/* ============================================================
   SIGMA Architectural Glass & Metal — site styles
   PALETTE LIVES IN ONE PLACE. To reskin the whole site, change
   only the block below. Nothing else hard-codes a colour.
   ============================================================ */
:root{
  /* --- brand ------------------------------------------------ */
  --brand:#0C6B5D;          /* primary: buttons, links, accents  */
  --brand-alt:#0E8574;      /* hover                             */
  --brand-bright:#4FC9B2;   /* on dark backgrounds               */
  --wash:#E2EEEB;           /* tinted panels                     */
  --flag:#9A5B15;           /* annotation amber: cracks, board-up */
  --flag-wash:#F6EBDC;      /* its tint                          */

  /* --- neutrals --------------------------------------------- */
  --ink:#101E1C; --soft:#4B5A57; --faint:#7C8B88;
  --ground:#F1F4F3; --surface:#fff; --sunk:#E7ECEA;
  --rule:#D3DBD9; --rule2:#B4C0BD; --dark:#0E1B19;
  --dark-rule:#24322F; --dark-text:#DCE6E3; --dark-soft:#95AAA5;

  /* --- type ------------------------------------------------- */
  --sans:"IBM Plex Sans",system-ui,-apple-system,sans-serif;
  --disp:"Archivo","IBM Plex Sans",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;

  --wrap:1180px; --gut:40px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--sans);
  font-size:16px;line-height:1.6}
img{max-width:100%;display:block}
a{color:var(--brand)}
h1,h2,h3,h4{font-family:var(--disp);letter-spacing:-.02em;text-wrap:balance;margin:0}

/* Ampersand: Archivo's & reads oddly at size, and a serif italic looks borrowed from
   another document. IBM Plex Sans is already loaded for body copy and its ampersand is
   plain and upright, so it sits at the same rhythm as the words around it.
   Applied via <span class="amp">&amp;</span>. */
.amp{font-family:var(--sans);font-weight:500;font-style:normal;letter-spacing:0;
  font-size:1em;padding:0 .01em}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.eyebrow{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--brand);margin:0 0 14px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:#fff;padding:10px 16px;z-index:99;border:2px solid var(--brand)}

/* placeholder photo treatment ------------------------------- */
.ph{position:relative;background:repeating-linear-gradient(45deg,var(--sunk) 0 14px,#DCE4E1 14px 28px);
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.ph::after{content:attr(data-label);font-family:var(--mono);font-size:10px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--brand);background:rgba(255,255,255,.92);
  border:1px solid var(--brand);padding:7px 13px;text-align:center;line-height:1.5;max-width:80%}

/* placeholder artwork ---------------------------------------------------------
   A panel carrying data-art has an authored scene in it, so the hatch comes off
   and the label moves to the corner. Scenes are drawn in build_site.py; the
   full set previews at brand/placeholder-animations.html. Everything here is
   ours — no stock licence attaches to any of it. */
.artdefs{position:absolute;width:0;height:0;overflow:hidden}
.ph[data-art]{background:var(--wash)}
.ph[data-art] svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.ph[data-art]::after{position:absolute;left:12px;top:12px;max-width:calc(100% - 24px);
  font-size:9.5px;padding:6px 12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;z-index:1}

.ph .ln{fill:none;stroke:var(--brand);stroke-width:2.4;stroke-linecap:square;stroke-linejoin:miter}
.ph .ln-thin{fill:none;stroke:var(--rule2);stroke-width:1.4}
.ph .ln-ink{fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linejoin:miter}
.ph .glass{fill:var(--brand);opacity:.07}
.ph .glass-2{fill:var(--brand-bright);opacity:.16}

@keyframes ph-sweep{from{transform:translateX(-190px)}to{transform:translateX(470px)}}
@keyframes ph-slidein{0%,8%{transform:translateX(96px);opacity:0}32%,100%{transform:translateX(0);opacity:1}}
@keyframes ph-fadeseq{0%,10%{opacity:0}26%,100%{opacity:.16}}
@keyframes ph-drift{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes ph-pulse{0%{r:4;opacity:1}70%,100%{r:19;opacity:0}}
@keyframes ph-roll{to{transform:rotate(360deg)}}
@keyframes ph-road{to{transform:translateX(-56px)}}
@keyframes ph-crack{0%{stroke-dashoffset:220}34%,62%{stroke-dashoffset:0}78%,100%{stroke-dashoffset:-220}}
@keyframes ph-clear{0%,30%{opacity:.5}62%,100%{opacity:0}}
@keyframes ph-wipe{0%{transform:translateX(-140px)}55%,100%{transform:translateX(148px)}}

.ph .sweep{animation:ph-sweep 6.5s cubic-bezier(.5,0,.5,1) infinite}
.ph .pane-in{animation:ph-slidein 5s cubic-bezier(.22,1,.36,1) infinite}
.ph .seq{animation:ph-fadeseq 4.6s ease-out infinite}
.ph .seq:nth-of-type(2){animation-delay:.22s}
.ph .seq:nth-of-type(3){animation-delay:.44s}
.ph .seq:nth-of-type(4){animation-delay:.66s}
.ph .gas circle{animation:ph-drift 4.4s ease-in-out infinite}
.ph .gas circle:nth-child(2){animation-delay:.7s}
.ph .gas circle:nth-child(3){animation-delay:1.5s}
.ph .gas circle:nth-child(4){animation-delay:2.2s}
.ph .ping{animation:ph-pulse 3.4s ease-out infinite}
.ph .ping:nth-of-type(2){animation-delay:.85s}
.ph .ping:nth-of-type(3){animation-delay:1.7s}
.ph .ping:nth-of-type(4){animation-delay:2.55s}
.ph .wheel{animation:ph-roll 1.6s linear infinite}
.ph .road{animation:ph-road 1.1s linear infinite}
.ph .crack{stroke-dasharray:220;animation:ph-crack 5.2s ease-in-out infinite}
.ph .haze{animation:ph-clear 5.2s ease-in-out infinite}
.ph .divider{animation:ph-wipe 5.6s cubic-bezier(.6,0,.35,1) infinite}

@media (prefers-reduced-motion:reduce){
  .ph .sweep,.ph .pane-in,.ph .seq,.ph .gas circle,.ph .ping,.ph .wheel,
  .ph .road,.ph .crack,.ph .haze,.ph .divider{animation:none!important}
  .ph .seq{opacity:.16}
  .ph .pane-in{transform:none;opacity:1}
  .ph .crack{stroke-dashoffset:0}
  .ph .haze{opacity:0}
}

/* header ---------------------------------------------------- */
header{background:var(--surface);border-bottom:1px solid var(--rule);position:sticky;top:0;z-index:20}
.hbar{display:flex;align-items:center;gap:26px;height:112px}
.logo{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink);
  font-family:var(--disp);font-weight:700;font-size:19px;letter-spacing:.02em;white-space:nowrap}
.logo img{flex:none;width:auto;height:82px}
.logo__sub b{color:var(--ink);font-weight:700;letter-spacing:.1em}
.logo__sub{font-family:var(--mono);font-weight:500;font-size:11.5px;letter-spacing:.14em;
  line-height:1.5;color:var(--faint);text-transform:uppercase;display:block;
  border-left:1px solid var(--rule);padding-left:14px}
nav{display:flex;gap:26px;margin-left:auto;font-size:14.5px;font-weight:500}
nav a{color:var(--soft);text-decoration:none}
nav a:hover{color:var(--ink)}
nav a[aria-current=page]{color:var(--ink);box-shadow:inset 0 -2px var(--brand)}
.tel{font-family:var(--mono);font-size:13px;font-weight:500;color:var(--ink);
  white-space:nowrap;text-decoration:none}
.btn{display:inline-block;background:var(--brand);color:#fff;font-weight:600;font-size:14.5px;
  padding:12px 20px;text-decoration:none;border:1px solid var(--brand);white-space:nowrap;cursor:pointer}
.btn:hover{background:var(--brand-alt);border-color:var(--brand-alt)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--rule2)}
.btn--ghost:hover{background:var(--sunk);border-color:var(--rule2)}
.btn--light{background:#fff;color:var(--brand);border-color:#fff;font-size:15.5px;padding:14px 24px}
.navtoggle{display:none;margin-left:auto;background:none;border:1px solid var(--rule2);
  padding:9px 12px;font:inherit;font-size:14px;cursor:pointer}

/* hero ------------------------------------------------------ */
.hero{display:grid;grid-template-columns:1.05fr 1fr;background:var(--surface);
  border-bottom:1px solid var(--rule)}
.hero__copy{padding:58px 56px 58px 0}
.hero h1{font-size:58px;line-height:1.03;font-weight:700;margin:0 0 18px;max-width:14ch}
.hero p{font-size:18px;color:var(--soft);max-width:44ch;margin:0 0 26px}
.hero__cta{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.hero__img{min-height:470px}

/* page head (inner pages) ----------------------------------- */
.phead{background:var(--surface);border-bottom:1px solid var(--rule);padding:52px 0}
.phead h1{font-size:44px;font-weight:700;margin:0 0 14px;max-width:20ch}
.phead p{font-size:17.5px;color:var(--soft);max-width:60ch;margin:0}
.crumb{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--faint);margin:0 0 16px}
.crumb a{color:var(--faint);text-decoration:none}

/* trust strip ----------------------------------------------- */
.trust{background:var(--dark);color:var(--dark-text)}
.trust .wrap{display:grid;grid-template-columns:repeat(4,1fr)}
.trust div{padding:18px 26px 18px 0;border-right:1px solid var(--dark-rule)}
.trust div:last-child{border-right:0}
.trust b{display:block;font-family:var(--disp);font-size:22px;font-weight:600;color:#fff;letter-spacing:-.02em}
.trust small{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:#7E948F}

section{padding:52px 0;border-bottom:1px solid var(--rule)}
.sechead{max-width:56ch;margin-bottom:28px}
.sechead h2{font-size:34px;font-weight:600;margin:0 0 10px}
.sechead p{color:var(--soft);margin:0;font-size:16.5px}

/* cards ----------------------------------------------------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.cards--2{grid-template-columns:repeat(2,1fr)}
.card{background:var(--surface);border:1px solid var(--rule)}
.card .ph{height:172px}
.card__b{padding:22px 24px 24px}
.card h3{font-size:19px;font-weight:600;margin:0 0 9px}
.card p{color:var(--soft);font-size:14.5px;margin:0 0 13px}
.card ul{margin:0;padding-left:17px;color:var(--soft);font-size:14px}
.card li{margin-bottom:6px}
.card li::marker{color:var(--brand)}

/* dark band ------------------------------------------------- */
.band{background:var(--dark);color:var(--dark-text);border-bottom:0;padding:42px 0 40px}
.band .eyebrow{color:var(--brand-bright);margin-bottom:10px}
.band h2{color:#fff;font-size:34px;font-weight:600;margin:0 0 24px}
.feat{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.feat h4{font-size:16px;font-weight:600;color:#fff;margin:15px 0 6px}
.feat p{font-size:14px;color:var(--dark-soft);margin:0}
.ring{width:58px;height:58px;border:1px solid #2E4440;border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:var(--brand-bright)}
.ring svg{width:30px;height:30px;stroke-width:1.5}

/* process --------------------------------------------------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr)}
.step{padding:0 26px 0 20px;border-left:2px solid var(--brand)}
.step b{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.14em;
  color:var(--brand);text-transform:uppercase}
.step h3{font-size:18px;font-weight:600;margin:8px 0 7px}
.step p{color:var(--soft);font-size:14.5px;margin:0}

/* gallery --------------------------------------------------- */
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.gal .ph{height:224px;border:1px solid var(--rule)}
.gal--2{grid-template-columns:repeat(2,1fr)}
.gal--2 .ph{height:280px}

/* areas ----------------------------------------------------- */
.areas{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:start}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.chip{border:1px solid var(--rule2);background:var(--surface);padding:9px 15px;
  font-size:14px;font-weight:500;text-decoration:none;color:var(--ink)}
.chip--m{border-color:var(--brand);background:var(--wash);color:var(--brand)}
.quote{background:var(--surface);border:1px solid var(--rule);border-left:3px solid var(--brand);
  padding:26px 28px}
.quote p{font-family:var(--disp);font-size:19px;font-weight:500;line-height:1.45;margin:0 0 14px}
.quote cite{font-style:normal;font-family:var(--mono);font-size:11px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--faint)}

/* accolades ------------------------------------------------- */
.acc{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.accitem{border:1px solid var(--rule);background:var(--surface);padding:16px 14px;text-align:center}
.accitem b{display:block;font-size:14px;font-weight:600;margin-top:8px;font-family:var(--disp)}
.accitem small{font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--faint)}

/* reviews --------------------------------------------------- */
.revs{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.rev{background:var(--surface);border:1px solid var(--rule);padding:22px 24px}
.stars{color:var(--brand);letter-spacing:.12em;font-size:14px}
.rev p{font-size:15px;color:var(--soft);margin:12px 0 14px}
.rev cite{font-style:normal;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--faint)}
.note{background:var(--wash);border-left:3px solid var(--brand);padding:14px 18px;
  font-size:14.5px;color:var(--soft);margin-top:24px}

/* cta band -------------------------------------------------- */
.ctaband{background:var(--brand);color:#fff;padding:40px 0;border:0}
.ctaband .wrap{display:flex;align-items:center;gap:40px;justify-content:space-between;flex-wrap:wrap}
.ctaband h2{color:#fff;font-size:30px;font-weight:600;margin:0 0 7px}
.ctaband p{margin:0;color:#BFE3DC;font-size:16px}

/* form ------------------------------------------------------ */
.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.f{display:flex;flex-direction:column;gap:6px}
.f--full{grid-column:1/-1}
.f label{font-size:13px;font-weight:600;color:var(--ink)}
.f input,.f select,.f textarea{font:inherit;font-size:15px;padding:11px 13px;
  border:1px solid var(--rule2);background:var(--surface);color:var(--ink);border-radius:0}
.f textarea{min-height:110px;resize:vertical}
.f input:focus-visible,.f select:focus-visible,.f textarea:focus-visible,
a:focus-visible,button:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.radios{display:flex;gap:22px;align-items:center;padding-top:6px}
.radios label{font-weight:400;font-size:15px;display:flex;gap:7px;align-items:center}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--soft);
  grid-column:1/-1;line-height:1.5}
.consent input{margin-top:3px}
.req{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);margin-top:18px}

/* footer ---------------------------------------------------- */
footer{background:var(--dark);color:var(--dark-text);padding:46px 0 26px}
.fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:36px}
footer h4{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:#7E948F;font-weight:500;margin:0 0 13px}
footer ul{list-style:none;margin:0;padding:0;font-size:14.5px}
footer li{margin-bottom:8px}
footer a{color:var(--dark-text);text-decoration:none}
footer a:hover{color:#fff;text-decoration:underline}
.fbrand img{height:112px;width:auto}
.fbrand p{font-size:14px;color:var(--dark-soft);margin:16px 0 0;max-width:34ch}
.legal{border-top:1px solid var(--dark-rule);margin-top:34px;padding-top:18px;
  font-size:12.5px;color:#7E948F}

/* placeholder banner ---------------------------------------- */
.pbanner{background:#F6EBDC;border-bottom:1px solid #9A5B15;color:#7A4A11;
  font-size:13px;padding:9px 0;font-family:var(--mono);letter-spacing:.04em}

/* responsive ------------------------------------------------ */
@media(max-width:960px){
  :root{--gut:24px}
  .hero{grid-template-columns:1fr}
  .hero__copy{padding:44px 0 36px}
  .hero h1{font-size:44px}
  .hero__img{min-height:300px}
  .cards,.gal,.feat,.steps,.revs,.acc,.fgrid{grid-template-columns:repeat(2,1fr)}
  .steps{gap:22px}
  .areas{grid-template-columns:1fr;gap:32px}
  .trust .wrap{grid-template-columns:repeat(2,1fr)}
  .trust div{border-right:0;border-bottom:1px solid var(--dark-rule)}
}
@media(max-width:680px){
  nav{display:none;width:100%;flex-direction:column;gap:0;margin:0}
  nav.open{display:flex;padding:10px 0 16px}
  nav a{padding:11px 0;border-bottom:1px solid var(--rule)}
  .navtoggle{display:block}
  .hbar{flex-wrap:wrap;height:auto;padding:14px 0;gap:14px}
  .logo img{height:62px}
  .logo__sub{font-size:10px;padding-left:11px}
  .hbar .tel,.hbar .btn{display:none}
  .hero h1{font-size:34px}
  .cards,.gal,.feat,.revs,.acc,.fgrid,.formgrid{grid-template-columns:1fr}
  .phead h1{font-size:32px}
  .sechead h2,.band h2{font-size:26px}
}

/* honeypot ------------------------------------------------------------------
   Off-screen rather than display:none — bots routinely skip fields that are
   explicitly hidden, but will fill one they can see in the markup. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}