/* SolarSM | Soluções em Energia
   Dark, red on black, taken from their shopfront sign and their emblem.
   Display: Archivo (variable width axis, run condensed). Detail: IBM Plex Mono. */

@font-face{font-family:'Archivo';font-style:normal;font-weight:400 700;font-stretch:62% 125%;font-display:swap;src:url('/fonts/archivo-400-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 700;font-stretch:62% 125%;font-display:swap;src:url('/fonts/archivo-400-700-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/plexmono-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/plexmono-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/plexmono-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/plexmono-500-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

:root{
  color-scheme: dark;

  --ink:#0B0B0B;
  --ink-2:#141414;
  --ink-3:#1B1B1B;
  --line:rgba(240,240,240,.13);
  --line-strong:rgba(240,240,240,.24);

  --red:#D80000;
  --red-hot:#E33A0C;
  --red-deep:#780000;
  --red-dark:#480000;

  --paper:#F0F0F0;
  --paper-2:#B9B9B9;      /* 9.6:1 on --ink */
  --paper-3:#8E8E8E;      /* 5.4:1 on --ink, small labels only */

  --f-sans:'Archivo',"Segoe UI",system-ui,sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,"Cascadia Mono",Consolas,monospace;

  /* type scale, ratio ~1.33 off a 17px body */
  --t-11:0.6875rem;
  --t-13:0.8125rem;
  --t-15:0.9375rem;
  --t-17:1.0625rem;
  --t-22:1.375rem;
  --t-h2:clamp(2.1rem,5.4vw,3.6rem);
  --t-h1:clamp(3.1rem,6.6vw,6rem);
  --t-spine:clamp(1.9rem,4.2vw,3.1rem);

  --pad:clamp(1.25rem,5vw,4.5rem);
  --bar-h:64px;
}

*,*::before,*::after{box-sizing:border-box}
:target,section[id]{scroll-margin-top:calc(var(--bar-h) + 1rem)}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--f-sans);
  font-size:var(--t-17);
  line-height:1.55;
  font-stretch:100%;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2{margin:0;font-weight:700;font-stretch:62%;letter-spacing:-0.005em;text-transform:uppercase}
p{margin:0}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:fixed;left:-9999px;top:0;z-index:99;background:var(--red);color:#fff;padding:.75rem 1rem;font-family:var(--f-mono);font-size:var(--t-13)}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--red-hot);outline-offset:3px}

/* ---------- lockup ---------- */
.lockup{display:flex;align-items:center;gap:.6rem;text-decoration:none;min-height:44px}
.lockup-mark{width:26px;height:27.6px;flex:none;display:block}
.lockup-type{display:flex;flex-direction:column;line-height:1}
.lockup-name{font-stretch:70%;font-weight:700;font-size:1.15rem;letter-spacing:.045em}
.lockup-sub{font-family:var(--f-mono);font-size:0.5625rem;letter-spacing:.19em;text-transform:uppercase;color:var(--paper-3);margin-top:.28rem}

/* ---------- bar ---------- */
.bar{
  position:sticky;top:0;z-index:20;
  height:var(--bar-h);
  display:flex;align-items:center;gap:1.5rem;
  padding:0 var(--pad);
  background:rgba(11,11,11,.9);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--line);
}
.bar-nav{margin-left:auto;display:flex;gap:1.6rem}
.bar-nav a{
  display:inline-flex;align-items:center;min-height:44px;
  font-family:var(--f-mono);font-size:var(--t-13);
  letter-spacing:.06em;text-decoration:none;color:var(--paper-2);
  transition:color .18s ease;
}
.bar-nav a:hover{color:var(--paper)}
.bar .btn-sm{margin-left:0}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:0 1.5rem;
  background:var(--red);color:#fff;
  font-family:var(--f-mono);font-weight:500;font-size:var(--t-15);
  letter-spacing:.05em;text-transform:uppercase;text-decoration:none;
  white-space:nowrap;border:0;
  transition:background .18s ease,transform .12s ease;
}
.btn:hover{background:#F01000}
.btn:active{transform:translateY(1px)}
.btn-sm{min-height:44px;padding:0 1.1rem;font-size:var(--t-13)}
.tel{
  font-family:var(--f-mono);font-size:var(--t-15);letter-spacing:.04em;
  color:var(--paper);text-decoration:none;
  border-bottom:1px solid var(--red);padding-bottom:2px;
  display:inline-flex;align-items:center;min-height:44px;
}
.tel:hover{border-bottom-color:var(--paper)}

/* ---------- hero ---------- */
.hero{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(1.75rem,4vw,3rem);
  align-items:center;
  padding:clamp(2rem,5vh,3.5rem) var(--pad) clamp(3rem,7vh,5rem);
  min-height:calc(92dvh - var(--bar-h));
  border-bottom:1px solid var(--line);
}
.hero-mark{order:-1;justify-self:stretch}
/* Their shopfront sign, rebuilt: traced emblem over live type on a dark plate.
   The emblem alone reads as an abstract square at this size; the lockup is what
   makes it read as a logo, and it is the object above their own door. */
.sign{
  background:#101010;
  border:1px solid rgba(240,240,240,.10);
  box-shadow:inset 0 1px 0 rgba(240,240,240,.05);
  padding:clamp(1.5rem,5vw,2.6rem) clamp(1rem,4vw,2rem) clamp(1.4rem,4.5vw,2.2rem);
  display:flex;flex-direction:column;align-items:center;
  max-width:26rem;margin:0 auto;
}
.sign-mark{width:clamp(70px,18vw,104px);height:auto;display:block}
.sign-name{
  margin-top:clamp(1rem,3.5vw,1.6rem);
  font-stretch:70%;font-weight:700;text-transform:uppercase;
  font-size:clamp(2.1rem,8vw,3.1rem);line-height:.9;letter-spacing:.05em;color:#F0F0F0;
}
.sign-sub{
  margin-top:.7rem;
  font-family:var(--f-mono);font-size:clamp(.5rem,1.9vw,.625rem);
  letter-spacing:.3em;text-transform:uppercase;color:var(--paper-2);
}
.hero h1{
  font-size:var(--t-h1);
  line-height:.87;
  letter-spacing:-0.015em;
}
.hero-sub{
  margin-top:1.25rem;
  max-width:44ch;
  font-size:var(--t-17);
  color:var(--paper-2);
}
.hero-cta{
  margin-top:2rem;
  display:flex;flex-wrap:wrap;align-items:center;
  gap:1rem 1.6rem;
}

/* ---------- serviços: the four words from their own bio ---------- */
.servicos{background:var(--ink-2);border-bottom:1px solid var(--line);padding-top:clamp(2rem,5vh,3.25rem)}
.spine-label{
  font-family:var(--f-mono);font-stretch:100%;font-weight:400;
  font-size:var(--t-11);letter-spacing:.22em;color:var(--paper-3);
  padding:0 var(--pad);margin-bottom:1.5rem;
}
.spine{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:1fr;
}
.spine li{
  font-stretch:62%;font-weight:700;text-transform:uppercase;
  font-size:var(--t-spine);line-height:1.02;
  padding:1.15rem var(--pad);
  border-bottom:1px solid var(--line);
  position:relative;
}
.spine li:last-child{border-bottom:0}
.spine li::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--red);
}

/* ---------- o conserto ---------- */
.conserto{
  padding:clamp(3rem,9vh,6.5rem) var(--pad);
  display:grid;grid-template-columns:1fr;
  gap:clamp(2rem,4vw,3.5rem);
  border-bottom:1px solid var(--line);
}
.conserto h2{font-size:var(--t-h2);line-height:.94;letter-spacing:-0.01em}
.conserto blockquote{
  margin:1.75rem 0 0;padding:0 0 0 1.5rem;
  border-left:2px solid var(--red);
  max-width:56ch;
}
.conserto blockquote p{font-size:var(--t-22);line-height:1.42;color:var(--paper)}
.conserto blockquote footer{
  margin-top:1.1rem;
  font-family:var(--f-mono);font-size:var(--t-13);
  letter-spacing:.07em;color:var(--paper-3);
}

/* ---------- photo tiles: 640px sources, kept small on purpose ---------- */
.tile{margin:0;width:100%;max-width:520px}
.tile img{width:100%;height:auto;border:1px solid var(--line-strong)}
.tile figcaption{
  margin-top:.6rem;
  font-family:var(--f-mono);font-size:var(--t-11);
  letter-spacing:.06em;color:var(--paper-3);line-height:1.4;
}

/* ---------- o que mais fizemos ---------- */
.mais{padding:clamp(3rem,9vh,6.5rem) var(--pad);border-bottom:1px solid var(--line)}
.mais h2{font-size:var(--t-h2);line-height:.94}
.mais-grid{margin-top:2.5rem;display:grid;grid-template-columns:1fr;gap:1.75rem}
.feat{
  background:var(--ink-2);border-top:4px solid var(--red);
  padding:clamp(1.5rem,4vw,2.25rem);
}
.feat-kicker{
  font-family:var(--f-mono);font-weight:500;font-size:var(--t-11);
  letter-spacing:.2em;text-transform:uppercase;color:var(--paper-3);
}
.feat h3{
  margin:1rem 0 0;font-weight:700;font-stretch:62%;text-transform:uppercase;
  font-size:clamp(1.6rem,4.6vw,2.4rem);line-height:.98;letter-spacing:-.005em;color:var(--paper);
}
.feat p:last-child{margin-top:1rem;color:var(--paper-2);max-width:34ch}
.mais-side{display:grid;gap:1.75rem;align-content:space-between;border-bottom:1px solid var(--line-strong);padding-bottom:1.75rem}
.mais-side article{border-top:1px solid var(--line-strong);padding-top:1.25rem}
.mais-side h3{
  margin:0;font-family:var(--f-mono);font-weight:500;font-size:var(--t-13);
  letter-spacing:.09em;text-transform:uppercase;color:var(--paper);
}
.mais-side p{margin:.7rem 0 0;color:var(--paper-2);max-width:46ch}

/* ---------- onde estamos ---------- */
.onde{
  padding:clamp(3rem,9vh,6.5rem) var(--pad);
  display:grid;grid-template-columns:1fr;gap:clamp(2rem,4vw,3rem);
}
.onde-cols{display:grid;gap:clamp(1.75rem,4vw,2.25rem);margin-top:1.75rem}
.onde h2{font-size:var(--t-h2);line-height:.94}
.onde address{
  margin-top:0;font-style:normal;
  font-family:var(--f-mono);font-size:var(--t-15);line-height:1.85;
  color:var(--paper);
}
.onde-fone{margin-top:.75rem}
.onde .btn{margin-top:1.5rem}
.tile-fachada{width:100%;max-width:590px}
.mapa{
  border:1px solid var(--line-strong);background:var(--ink-2);
  aspect-ratio:16/9;width:100%;max-width:520px;align-self:start;
}
.mapa iframe{
  width:100%;height:100%;border:0;display:block;
  filter:invert(1) hue-rotate(180deg) saturate(.75) brightness(.92) contrast(1.05);
}

/* ---------- pé ---------- */
.pe{
  border-top:1px solid var(--line);
  padding:clamp(2.5rem,6vh,4rem) var(--pad);
  display:flex;flex-direction:column;gap:1.5rem;
}
.pe-contato{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem}
.pe-contato a{
  font-family:var(--f-mono);font-size:var(--t-13);letter-spacing:.06em;
  color:var(--paper-2);text-decoration:none;border-bottom:1px solid var(--line-strong);
  display:inline-flex;align-items:center;min-height:44px;
}
.pe-contato a:hover{color:var(--paper);border-bottom-color:var(--red)}
.pe-end{font-family:var(--f-mono);font-size:var(--t-11);letter-spacing:.06em;color:var(--paper-3)}

/* ---------- the loop: light crossing the panel, on the emblem's own angle ---------- */
.sweep{animation:sweep 11s linear infinite}
@keyframes sweep{
  from{transform:translateX(-105px)}
  to{transform:translateX(180px)}
}

/* ---------- reveal on scroll: visible by default, hidden only once JS runs ---------- */
.js [data-reveal]{opacity:0;transform:translateY(14px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.js [data-reveal].on{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .sweep{animation:none}
  .js [data-reveal]{opacity:1;transform:none;transition:none}
  *{scroll-behavior:auto !important}
}

/* ---------- larger ---------- */
@media (min-width:760px){
  .spine{grid-template-columns:repeat(4,1fr)}
  .spine li{
    border-bottom:0;border-right:1px solid var(--line);
    padding:clamp(2.5rem,6vh,4rem) 1.25rem;
    display:flex;align-items:flex-end;min-height:11rem;
  }
  .spine li:last-child{border-right:0}
  .spine li:first-child{padding-left:var(--pad)}
  .spine li:last-child{padding-right:var(--pad)}
  .spine li::before{width:100%;height:4px;bottom:auto}
  .conserto{grid-template-columns:minmax(0,1fr) clamp(240px,30vw,340px)}
  .tile-bancada{align-self:end}
  .mais-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(2rem,4vw,3.5rem)}
  .pe{flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:wrap}
}

@media (min-width:980px){
  .hero{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);min-height:calc(58vh - var(--bar-h))}
  .hero-mark{order:0;justify-self:end}
  .sign{margin:0;max-width:none;width:min(30vw,400px)}

}

@media (max-width:759px){
  .bar-nav{display:none}
  .bar .btn-sm{margin-left:auto}
}

/* The map belongs beside the address it plots, not stranded below the button.
   Needs ~1180px before the inner two-up stops squeezing both halves. */
@media (min-width:1180px){
  .onde{
    grid-template-columns:minmax(0,1fr) 520px;
    align-items:start;
    column-gap:clamp(2.5rem,4vw,3.5rem);
  }
  .onde-cols{
    grid-template-columns:minmax(0,17rem) minmax(0,1fr);
    gap:2.25rem;align-items:start;
  }
  .mapa{max-width:none}
  .tile-fachada{width:520px}
}