/* ==========================================================================
   Rise Up Window Tinting — Hialeah Gardens, FL
   Palette derived from the countertop heat-lamp demo: sun/ember = the heat
   being rejected, ice = the film, smoked glass = the ground.
   ========================================================================== */

/* Palette taken from the Rise Up logo: charcoal ground, cream wordmark,
   red-orange slashes. Sage and ochre appear only in the legal indicator,
   where three states have to be told apart. */
:root{
  --glass-900:#141312;
  --glass-800:#232220;   /* the logo's own background */
  --glass-700:#2E2C29;
  --glass-600:#413E39;
  --glass-line:rgba(242,239,230,.13);

  --rust:#E0563A;        /* the slashes */
  --rust-lt:#F1856A;     /* accent text and fills that need contrast */
  --rust-dk:#A93C27;     /* the same accent on light ground */

  --sage:#7FA98F;
  --ochre:#D9A441;

  --ice:#F2EFE6;         /* cream — primary text on charcoal */
  --ice-dim:var(--rust-lt);
  --sun:var(--rust-lt);
  --ember:var(--rust);
  --daylight:#F2EFE6;
  --dim:#9E9A90;

  --paper:#F5F3ED;
  --ink:#1E1C1A;
  --ink-soft:#5B564E;

  --display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --body:"Instrument Sans","Helvetica Neue",Arial,sans-serif;
  --mono:"Martian Mono",ui-monospace,"SF Mono",Menlo,monospace;

  --gut:clamp(1.25rem,4vw,4rem);
  --maxw:78rem;
  --ease:cubic-bezier(.2,.7,.3,1);
}

/* Light sections re-point the same semantic names, so every descendant
   switches context in one place. */
.on-light,.on-daylight,.aside{
  --ice:var(--rust-dk);
  --ice-dim:var(--rust-dk);
  --dim:var(--ink-soft);
  --glass-line:rgba(30,28,26,.14);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  font-family:var(--body);
  font-size:clamp(1rem,.96rem + .2vw,1.0625rem);
  line-height:1.65;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}

img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit}

/* ---------- type roles ---------- */
.display{
  font-family:var(--display);
  font-variation-settings:"wdth" 112;
  font-weight:800;
  line-height:.92;
  letter-spacing:-.022em;
  text-transform:uppercase;
  margin:0;
}
h1.h-hero{margin:0;font-size:inherit;font-weight:inherit;line-height:inherit}
.h1{font-size:clamp(2.5rem,5.3vw,4.7rem)}
.h2{font-size:clamp(1.85rem,3.5vw,3.05rem)}
.h3{font-size:clamp(1.25rem,1.8vw,1.62rem)}

.mono{
  font-family:var(--mono);
  font-variation-settings:"wdth" 87.5;
  font-size:.66rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:500;
}
.eyebrow{display:block;color:var(--ice-dim);margin:0 0 1.4rem}


.lede{font-size:clamp(1.05rem,1rem + .45vw,1.3rem);line-height:1.55;max-width:46ch}
.muted{color:var(--ink-soft)}
.on-dark .muted{color:var(--dim)}

/* ---------- layout ---------- */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
section{padding-block:clamp(4rem,9vw,7.5rem)}
.on-dark{background:var(--glass-800);color:var(--daylight)}
.on-light{background:var(--paper);color:var(--ink)}
.on-daylight{background:var(--daylight);color:var(--ink)}

/* the film edge: one cyan hairline with a light catch above it */
.edge{position:relative;height:1px;background:linear-gradient(90deg,transparent,var(--ice-dim),transparent);opacity:.55}
.edge::after{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent)}

.skip{position:absolute;left:-9999px;top:0;background:var(--sun);color:var(--glass-900);padding:.75rem 1.25rem;z-index:100;font-weight:600}
.skip:focus{left:.5rem;top:.5rem}

:where(a,button,input,textarea,select,summary,[tabindex]):focus-visible{
  outline:2px solid var(--sun);outline-offset:3px;border-radius:2px;
}

/* ---------- header ---------- */
.hdr{
  position:sticky;top:0;z-index:50;
  background:rgba(20,19,18,.9);
  backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid var(--glass-line);
  color:var(--daylight);
}
.hdr-in{display:flex;align-items:center;gap:1.5rem;min-height:4.25rem}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;flex:0 0 auto;color:var(--ice);min-height:44px}
.brand-slash{width:25px;height:auto;flex:0 0 auto;color:var(--rust);transition:color .2s}
.brand:hover .brand-slash{color:var(--rust-lt)}
.brand-name{
  display:inline-block;
  font-family:var(--display);font-variation-settings:"wdth" 104;font-weight:800;
  font-size:1.16rem;line-height:.94;letter-spacing:-.006em;text-transform:uppercase;
  transform:skewX(-9deg);transform-origin:0 100%;
}
.brand-sub{
  display:block;font-family:var(--body);font-weight:500;
  font-size:.66rem;line-height:1;letter-spacing:.004em;
  color:var(--rust-lt);margin-top:.34rem;
}
.brand--lg .brand-slash{width:34px}
.brand--lg .brand-name{font-size:1.55rem}
.brand--lg .brand-sub{font-size:.82rem;margin-top:.42rem}

.nav{display:flex;gap:1.6rem;margin-left:auto;align-items:center}
.mnav{display:none}
.nav a{text-decoration:none;font-size:.9rem;font-weight:500;color:var(--daylight);opacity:.82;transition:opacity .2s,color .2s}
.nav a:hover{opacity:1;color:var(--ice)}
.nav a[aria-current="page"]{color:var(--ice);opacity:1}
.hdr-cta{display:flex;gap:.6rem;align-items:center}
@media (max-width:960px){
  .nav{display:none}
  .hdr-cta{margin-left:auto}
  .mnav{display:block;flex:0 0 auto}
}
.mnav > summary{
  list-style:none;display:grid;place-items:center;width:44px;height:44px;
  border:1px solid var(--glass-600);border-radius:2px;cursor:pointer;color:var(--ice);
}
.mnav > summary::-webkit-details-marker{display:none}
.mnav-ico{position:relative;display:block;width:18px;height:2px;background:currentColor;transition:background .2s}
.mnav-ico::before,.mnav-ico::after{content:"";position:absolute;left:0;width:18px;height:2px;background:currentColor;transition:transform .25s var(--ease)}
.mnav-ico::before{top:-6px}
.mnav-ico::after{top:6px}
.mnav[open] .mnav-ico{background:transparent}
.mnav[open] .mnav-ico::before{transform:translateY(6px) rotate(45deg)}
.mnav[open] .mnav-ico::after{transform:translateY(-6px) rotate(-45deg)}
.mnav-panel{
  position:absolute;left:0;right:0;top:100%;
  background:var(--glass-900);border-top:1px solid var(--glass-line);
  border-bottom:1px solid var(--glass-line);box-shadow:0 26px 44px -26px #000;
  padding:.35rem 0 .6rem;max-height:calc(100svh - 4.25rem);overflow-y:auto;
}
.mnav-panel a{
  display:flex;align-items:center;min-height:52px;
  padding:.5rem var(--gut);text-decoration:none;color:var(--ice);
  font-size:1rem;font-weight:500;border-bottom:1px solid rgba(242,239,230,.07);
}
.mnav-panel a:last-child{border-bottom:0}
.mnav-panel a:hover,.mnav-panel a:focus-visible{background:var(--glass-700);color:var(--rust-lt)}
.mnav-panel a[aria-current="page"]{color:var(--rust-lt)}
@media (max-width:520px){.hdr-cta .btn--ghost{display:none}}

/* ---------- buttons ---------- */
.btn{
  --bg:var(--sun);--fg:var(--glass-900);
  position:relative;overflow:hidden;isolation:isolate;
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.85rem 1.5rem;border:0;border-radius:2px;
  background:var(--bg);color:var(--fg);
  font-family:var(--body);font-size:.9rem;font-weight:600;letter-spacing:.005em;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:transform .18s var(--ease);
}
/* squeegee wipe */
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(255,255,255,.85),rgba(255,255,255,0));
  transform:translateX(-101%);transition:transform .42s var(--ease);
}
.btn:hover::before{transform:translateX(0)}
.btn:active{transform:translateY(1px)}
.btn--ghost{--bg:transparent;--fg:var(--daylight);box-shadow:inset 0 0 0 1px var(--glass-600)}
.btn--ghost::before{background:linear-gradient(90deg,rgba(242,239,230,.16),rgba(242,239,230,0))}
.btn--ghost:hover{color:var(--ice)}
.btn--ink{--bg:var(--glass-800);--fg:var(--daylight)}
.btn--sm{padding:.6rem 1rem;font-size:.82rem}
.btn--lg{padding:1.05rem 1.9rem;font-size:.98rem}

.linkarrow{
  display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;
  font-weight:600;font-size:.95rem;color:var(--ice-dim);
  border-bottom:1px solid currentColor;padding-bottom:.15rem;
  transition:gap .2s var(--ease),color .2s;
}
.on-dark .linkarrow{color:var(--ice)}
.linkarrow:hover{gap:.85rem;color:var(--sun)}

/* ==========================================================================
   HERO — the window. Left: interior wall + sun shaft. Right: tinted glass.
   --vlt (0..1 light through) is set by JS and drives everything.
   ========================================================================== */
.hero{
  --vlt:.35;
  --tint:calc((1 - var(--vlt)) * .88);
  position:relative;
  background:var(--glass-900);
  color:var(--daylight);
  overflow:hidden;
  border-bottom:1px solid var(--glass-line);
}
.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(1.5rem,3vw,3.5rem);
  align-items:center;
  padding-block:clamp(3rem,7vw,5.5rem);
  min-height:min(74svh,44rem);
}
@media (max-width:900px){
  .hero-grid{grid-template-columns:minmax(0,1fr);min-height:0;padding-block:2.5rem 3rem}
}

/* interior wall + the shaft of light the film lands on */
.hero-copy{position:relative;z-index:2}
.hero-shaft{
  position:absolute;
  top:-35%;left:-14%;width:132%;height:180%;
  z-index:0;pointer-events:none;
  background:linear-gradient(255deg,
    transparent 6%,
    rgba(224,86,58,calc(.40 * var(--vlt) + .035)) 24%,
    rgba(250,205,170,calc(.24 * var(--vlt) + .02)) 33%,
    transparent 58%);
  filter:blur(calc(16px + 26px * var(--tint)));
  transition:background .55s var(--ease),filter .55s var(--ease);
}
.hero-copy > :not(.hero-shaft){position:relative;z-index:1}

.hero h1{margin:0}
.hero .h1{margin:0 0 1.35rem}
.hero .h1 .cut{color:var(--sun)}
.hero .h1 .view{color:var(--ice)}
.hero-sub{max-width:38ch;color:var(--dim);margin:0 0 2rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-bottom:1.6rem}
.hero-sig{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;color:var(--ice-dim)}
.hero-sig span{display:inline-flex;align-items:center;gap:.45rem}
.hero-sig span::before{content:"";width:5px;height:5px;background:currentColor;transform:rotate(45deg)}

/* --- the glass --- */
.hero-window{position:relative;z-index:1}
.glass{
  position:relative;
  aspect-ratio:16/11;
  border:1px solid var(--glass-600);
  border-radius:3px;
  overflow:hidden;
  box-shadow:0 40px 90px -50px #000, inset 0 1px 0 rgba(255,255,255,.12);
  background:#0a1a1f;
}
@media (max-width:900px){.glass{aspect-ratio:16/10}}
@media (max-width:520px){.glass{aspect-ratio:4/3}}

/* the scene outside: Miami sky, sun, low skyline */
.scene{position:absolute;inset:0}
.sky{
  position:absolute;inset:0;
  background:linear-gradient(180deg,
    #17232C 0%, #2C3947 18%, #4E4A55 34%,
    #8A6A5C 52%, #C67F4E 70%, #F08C52 86%, #E0563A 100%);
  transition:filter .55s var(--ease);
  filter:saturate(calc(.78 + .3 * var(--vlt))) brightness(calc(.96 + .16 * var(--vlt)));
}
.glow{
  position:absolute;inset:0;
  background:radial-gradient(40% 36% at 73% 26%,
    rgba(255,244,214,.92) 0%, rgba(248,168,104,.55) 34%, rgba(224,86,58,.20) 62%, transparent 100%);
  opacity:calc(.18 + .5 * var(--vlt));
  transition:opacity .55s var(--ease);
}
.sun{
  position:absolute;left:73%;top:26%;width:11%;aspect-ratio:1;transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle,#FFFCF2 0%,#FFEFD0 55%,rgba(250,200,140,.35) 78%,transparent 82%);
  box-shadow:0 0 calc(20px + 60px * var(--vlt)) calc(2px + 16px * var(--vlt)) rgba(250,190,140,calc(.24 + .46 * var(--vlt)));
  transition:box-shadow .55s var(--ease),opacity .55s var(--ease);
  opacity:calc(.55 + .45 * var(--vlt));
}
.skyline{position:absolute;left:0;right:0;bottom:0;height:46%;color:#141312}
.road{display:none}

/* the film itself */
.film{
  position:absolute;inset:0;
  background:rgba(18,17,16,var(--tint));
  transition:background .55s var(--ease);
}
.film::after{ /* installed-film sheen along the top edge */
  content:"";position:absolute;inset:0;
  background:linear-gradient(147deg,rgba(255,255,255,.10) 0%,transparent 30%,transparent 72%,rgba(224,86,58,.10) 100%);
}
.glass::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;background:radial-gradient(120% 90% at 70% 25%,transparent 40%,rgba(12,11,10,.3) 100%)}
.frame{position:absolute;inset:0;z-index:2;box-shadow:inset 0 0 0 8px var(--glass-900),inset 0 0 0 9px rgba(242,239,230,.13);pointer-events:none}

/* live readout, sits on the glass */
.readout{
  position:absolute;left:1.4rem;top:1.4rem;z-index:4;
  background:rgba(20,19,18,.84);
  backdrop-filter:blur(8px);
  border:1px solid var(--glass-line);
  border-radius:2px;
  padding:.9rem 1.05rem;
  min-width:15.5rem;max-width:min(21rem,62%);
}
@media (max-width:640px){
  .readout{position:static;min-width:0;margin-top:.75rem;padding:.85rem .95rem;backdrop-filter:none;background:var(--glass-700)}
  .readout-vlt{font-size:1.6rem}
}
.readout-hd{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:.7rem;padding-bottom:.6rem;border-bottom:1px solid var(--glass-line)}
.readout-vlt{font-family:var(--display);font-variation-settings:"wdth" 112;font-weight:800;font-size:2rem;line-height:.85;color:var(--ice)}
.readout-vlt sup{font-size:.9rem;vertical-align:super;font-weight:700}
.readout-name{color:var(--dim);text-align:right}
.readout dl{margin:0;display:grid;grid-template-columns:1fr auto;gap:.34rem 1rem}
.readout dt{color:var(--dim);font-family:var(--mono);font-variation-settings:"wdth" 87.5;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;align-self:center}
.readout dd{margin:0;text-align:right;font-family:var(--mono);font-variation-settings:"wdth" 87.5;font-size:.72rem;font-weight:600;color:var(--daylight);font-feature-settings:"tnum"}
.readout dd b{color:var(--sun);font-weight:600}
.legal-row{margin-top:.7rem;padding-top:.6rem;border-top:1px solid var(--glass-line);display:flex;gap:.5rem;align-items:flex-start;font-family:var(--mono);font-variation-settings:"wdth" 87.5;font-size:.6rem;line-height:1.55;letter-spacing:.06em;text-transform:uppercase}
.legal-dot{width:7px;height:7px;flex:0 0 auto;margin-top:.4rem;border-radius:50%;background:var(--sage);box-shadow:0 0 8px currentColor;color:var(--sage)}
.legal-dot[data-state="partial"]{background:var(--ochre);color:var(--ochre)}
.legal-dot[data-state="no"]{background:var(--rust);color:var(--rust)}
.legal-txt{color:var(--dim)}

/* VLT selector */
.vlt{margin-top:1.5rem}
.vlt-hd{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.25rem 1rem;margin-bottom:.85rem;color:var(--ice-dim)}
@media (max-width:640px){.vlt-hd b{display:none}}
.vlt-hd b{color:var(--dim);font-weight:400;text-transform:none;letter-spacing:.04em}
.swatches{display:grid;grid-template-columns:repeat(5,1fr);gap:.5rem;list-style:none;margin:0;padding:0}
.sw{
  position:relative;display:block;width:100%;cursor:pointer;
  border:1px solid var(--glass-600);border-radius:2px;background:transparent;
  padding:0;color:var(--dim);
  transition:border-color .2s,color .2s,transform .2s var(--ease);
  font-family:var(--mono);font-variation-settings:"wdth" 87.5;
}
.sw:hover{border-color:var(--ice-dim);color:var(--daylight);transform:translateY(-2px)}
.sw[aria-pressed="true"]{border-color:var(--sun);color:var(--sun)}
.sw[aria-pressed="true"]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--sun)}
.sw-chip{
  display:block;height:2.6rem;border-bottom:1px solid var(--glass-600);
  background-image:
    linear-gradient(rgba(18,17,16,var(--a)),rgba(18,17,16,var(--a))),
    linear-gradient(180deg,#33414C 0%,#8A7A70 40%,#EE8A54 78%,#E0563A 100%);
}
.sw-lbl{display:block;padding:.5rem .2rem;font-size:.66rem;letter-spacing:.1em;font-weight:600}
@media (max-width:520px){.sw-chip{height:2rem}.sw-lbl{font-size:.64rem;letter-spacing:.04em}}
.vlt-note{margin:.9rem 0 0;font-size:.82rem;color:var(--dim);max-width:52ch}

/* ---------- trust strip ---------- */
.strip{background:var(--glass-900);color:var(--ice-dim);border-bottom:1px solid var(--glass-line);padding-block:0}
.strip ul{display:flex;flex-wrap:wrap;gap:.5rem 2.2rem;list-style:none;margin:0;padding:1.05rem 0}
.strip li{display:flex;align-items:center;gap:.55rem}
.strip li svg{width:13px;height:13px;flex:0 0 auto;color:var(--sun)}

/* ---------- services: full-width rows, not a card grid ---------- */
.svc{border-top:1px solid rgba(30,28,26,.13);display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1.1fr);gap:clamp(1.25rem,3vw,3rem);padding-block:clamp(2rem,4vw,3.25rem);align-items:start}
.svc:last-of-type{border-bottom:1px solid rgba(30,28,26,.13)}
.on-dark .svc,.on-dark .svc:last-of-type{border-color:var(--glass-line)}
.svc-swatch{width:8px;align-self:stretch;min-height:5rem;border-radius:1px;background:linear-gradient(180deg,var(--glass-800),var(--glass-600))}
.svc-swatch[data-s="auto"]{background:linear-gradient(180deg,#141312,#1d4d57)}
.svc-swatch[data-s="commercial"]{background:linear-gradient(180deg,#2E2C29,#A93C27)}
.svc-swatch[data-s="residential"]{background:linear-gradient(180deg,#7A2E1C,#F1856A)}
.svc-hd h3{margin:.15rem 0 .6rem}
.svc-hd .mono{color:var(--ink-soft);display:block;margin-bottom:.7rem}
.svc-body p{margin:0 0 1.1rem}
.svc-list{list-style:none;margin:0 0 1.25rem;padding:0;display:grid;gap:.4rem}
.svc-list li{display:flex;gap:.6rem;font-size:.94rem}
.svc-list li::before{content:"";width:6px;height:6px;margin-top:.55rem;flex:0 0 auto;background:var(--ice-dim);transform:rotate(45deg)}
@media (max-width:820px){
  .svc{grid-template-columns:auto minmax(0,1fr);gap:1.1rem}
  .svc-swatch{min-height:3rem}
  .svc-body{grid-column:2}
}

/* ---------- spec table (film comparison / FL law) ---------- */
.tablewrap{min-width:0;overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid rgba(30,28,26,.15);border-radius:3px}
.on-dark .tablewrap{border-color:var(--glass-line)}
table{width:100%;border-collapse:collapse;min-width:29rem;font-size:.9rem;table-layout:auto}
caption{text-align:left;padding:0 0 .9rem;color:var(--ink-soft);font-size:.86rem}
.on-dark caption{color:var(--dim)}
th,td{padding:.8rem .85rem;text-align:left;border-bottom:1px solid rgba(30,28,26,.11);vertical-align:top}
.on-dark th,.on-dark td{border-color:var(--glass-line)}
thead th{font-family:var(--mono);font-variation-settings:"wdth" 87.5;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--ink-soft);background:rgba(30,28,26,.04)}
.on-dark thead th{color:var(--ice-dim);background:rgba(242,239,230,.05)}
tbody th{font-weight:600}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:0}
td.num{font-family:var(--mono);font-variation-settings:"wdth" 87.5;font-size:.74rem;line-height:1.5;font-feature-settings:"tnum"}
tbody th{white-space:nowrap}
tr[data-pick] th{color:var(--ink)}
.on-dark tr[data-pick] th{color:var(--sun)}
tr[data-pick]{background:rgba(224,86,58,.08)}

/* ---------- install timeline: marked by duration, not index ---------- */
.timeline{list-style:none;margin:0;padding:0;display:grid;gap:0;counter-reset:none}
.tl{display:grid;grid-template-columns:7.5rem minmax(0,1fr);gap:clamp(1rem,2.5vw,2.5rem);padding-block:1.5rem;border-top:1px solid var(--glass-line);align-items:start}
.tl:last-child{border-bottom:1px solid var(--glass-line)}
.tl-dur{font-family:var(--mono);font-variation-settings:"wdth" 87.5;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--sun);padding-top:.28rem;white-space:nowrap}
.tl h3{margin:0 0 .4rem;font-size:1.1rem;font-weight:600;font-family:var(--body);text-transform:none;letter-spacing:0}
.tl p{margin:0;color:var(--dim);font-size:.95rem;max-width:62ch}
@media (max-width:600px){.tl{grid-template-columns:minmax(0,1fr);gap:.35rem}.tl-dur{padding-top:0}}

/* ---------- generic two-col ---------- */
.split{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(1.75rem,5vw,5rem);align-items:start}
@media (max-width:820px){.split{grid-template-columns:minmax(0,1fr)}}
.sec-hd{margin-bottom:clamp(2rem,4vw,3rem)}
.sec-hd .h2{margin:0 0 1rem}
.sec-hd p{margin:0;max-width:52ch}

/* ---------- stat row ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:1px;background:var(--glass-line);border:1px solid var(--glass-line);margin-top:2.25rem}
.stats div{background:var(--glass-800);padding:1.3rem 1.2rem}
.on-light .stats{background:rgba(30,28,26,.13);border-color:rgba(30,28,26,.13)}
.on-light .stats div{background:var(--paper)}
.stat-n{font-family:var(--display);font-variation-settings:"wdth" 112;font-weight:800;font-size:clamp(1.9rem,3.4vw,2.6rem);line-height:1;color:var(--sun);display:block;margin-bottom:.5rem}
.stat-l{color:var(--dim);display:block;line-height:1.6}
.on-light .stat-l{color:var(--ink-soft)}

/* ---------- service area ---------- */
.areas{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin:1.75rem 0 0;padding:0}
.areas li{border:1px solid var(--glass-line);border-radius:2px;padding:.45rem .8rem;font-family:var(--mono);font-variation-settings:"wdth" 87.5;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.on-light .areas li,.on-daylight .areas li{border-color:rgba(30,28,26,.17);color:var(--ink-soft)}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid rgba(30,28,26,.15)}
.faq details{border-bottom:1px solid rgba(30,28,26,.15)}
.on-dark .faq,.on-dark .faq details{border-color:var(--glass-line)}
.faq summary{
  cursor:pointer;list-style:none;padding:1.35rem 2.5rem 1.35rem 0;position:relative;
  font-weight:600;font-size:1.02rem;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:.4rem;top:1.75rem;width:12px;height:12px;
  border-right:2px solid var(--ice-dim);border-bottom:2px solid var(--ice-dim);
  transform:rotate(45deg);transition:transform .25s var(--ease);
}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq summary:hover{color:var(--ice-dim)}
.faq .a{padding:0 3rem 1.5rem 0;margin:0;color:var(--ink-soft);max-width:66ch}
.on-dark .faq .a{color:var(--dim)}
.faq .a p{margin:0 0 .8rem}
.faq .a p:last-child{margin:0}

/* ---------- quote form ---------- */
.quote{background:var(--glass-900);color:var(--daylight)}
.form{display:grid;gap:1rem}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media (max-width:600px){.row2{grid-template-columns:minmax(0,1fr)}}
.field{display:grid;gap:.45rem}
.field label{color:var(--ice-dim);font-family:var(--mono);font-variation-settings:"wdth" 87.5;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase}
.field input,.field select,.field textarea{
  font-family:var(--body);font-size:1rem;color:var(--daylight);
  background:var(--glass-800);border:1px solid var(--glass-600);border-radius:2px;
  padding:.8rem .9rem;width:100%;
  transition:border-color .2s;
}
.field textarea{resize:vertical;min-height:6.5rem}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--ice-dim)}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23E0563A' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .9rem center;background-size:12px;padding-right:2.4rem}
.form-note{font-size:.82rem;color:var(--dim);margin:.2rem 0 0}
.contact-card{display:grid;gap:1.4rem;align-content:start}
.cc{display:grid;gap:.3rem}
.cc .mono{color:var(--ice-dim)}
.cc a{color:var(--daylight);text-decoration:none;font-size:1.12rem;font-weight:600;justify-self:start;border-bottom:1px solid transparent;transition:border-color .2s,color .2s}
.cc a:hover{color:var(--sun);border-color:currentColor}
.cc address{font-style:normal;color:var(--dim);line-height:1.7}
.hours{list-style:none;margin:0;padding:0;display:grid;gap:.3rem;font-size:.92rem;color:var(--dim);max-width:20rem}
.hours li{display:flex;justify-content:space-between;gap:1rem}

/* ---------- footer ---------- */
.ftr{background:var(--glass-900);color:var(--dim);border-top:1px solid var(--glass-line);padding-block:clamp(2.5rem,5vw,4rem) 2rem;font-size:.9rem}
.ftr-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:clamp(1.5rem,3vw,3rem);margin-bottom:2.5rem}
@media (max-width:820px){.ftr-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media (max-width:480px){.ftr-grid{grid-template-columns:minmax(0,1fr)}}
.ftr h2{font-family:var(--mono);font-variation-settings:"wdth" 87.5;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ice-dim);margin:0 0 1rem;font-weight:600}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.ftr a{color:var(--dim);text-decoration:none;transition:color .2s}
.ftr a:hover{color:var(--ice)}
.ftr-btm{border-top:1px solid var(--glass-line);padding-top:1.5rem;display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;justify-content:space-between;font-size:.8rem}
.social{display:flex;gap:.75rem;margin-top:1rem}
.social a{display:grid;place-items:center;width:36px;height:36px;border:1px solid var(--glass-600);border-radius:2px;transition:border-color .2s,color .2s}
.social a:hover{border-color:var(--sun);color:var(--sun)}
.social svg{width:17px;height:17px}

/* ---------- scroll reveal ---------- */
.js .rise{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .rise.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .rise{opacity:1;transform:none;transition:none}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* ---------- inner-page hero ---------- */
.phero{background:var(--glass-800);color:var(--daylight);border-bottom:1px solid var(--glass-line);position:relative;overflow:hidden}
.phero::before{content:"";position:absolute;top:-30%;right:-10%;width:60%;height:180%;background:radial-gradient(closest-side,rgba(224,86,58,.20),transparent);pointer-events:none}
.phero .wrap{position:relative;padding-block:clamp(3rem,6.5vw,5rem)}
.phero .lede{color:var(--dim);margin:1.4rem 0 2rem}
.crumb{margin:0 0 1.4rem;color:var(--ice-dim)}
.crumb a{text-decoration:none;opacity:.75}
.crumb a:hover{opacity:1;color:var(--ice)}
.crumb span{opacity:.4;padding:0 .5rem}

.prose{max-width:66ch}
.prose h2{font-family:var(--display);font-variation-settings:"wdth" 112;font-weight:800;text-transform:uppercase;letter-spacing:-.015em;font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1;margin:2.75rem 0 1rem}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:1.12rem;margin:2rem 0 .6rem;font-weight:600}
.prose p{margin:0 0 1.1rem}
.prose ul{padding-left:0;list-style:none;margin:0 0 1.4rem;display:grid;gap:.5rem}
.prose ul li{display:flex;gap:.7rem}
.prose ul li::before{content:"";width:6px;height:6px;margin-top:.6rem;flex:0 0 auto;background:var(--ice-dim);transform:rotate(45deg)}
.callout{border-left:3px solid var(--sun);background:rgba(224,86,58,.09);padding:1.1rem 1.3rem;margin:1.75rem 0;border-radius:0 2px 2px 0}
.callout p{margin:0}
.callout strong{font-weight:600}

.aside{position:sticky;top:6rem;border:1px solid rgba(30,28,26,.15);border-radius:3px;padding:1.5rem;background:var(--daylight)}
.on-dark .aside{border-color:var(--glass-line);background:var(--glass-700)}
.aside h2{font-family:var(--mono);font-variation-settings:"wdth" 87.5;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;margin:0 0 1rem;color:var(--ink-soft);font-weight:600}
.aside .btn{width:100%;margin-top:.75rem}
@media (max-width:820px){.aside{position:static}}

/* the form is the point of this section, so it gets the wider column */
@media (min-width:821px){
  .quote .split{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
}

/* inner-page hero: copy left, at-a-glance specs right */
.phero-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(2rem,5vw,4.5rem);align-items:end}
@media (max-width:860px){.phero-grid{grid-template-columns:minmax(0,1fr);gap:2.25rem}}
.pfacts{margin:0;border-top:1px solid var(--glass-line)}
.pfacts > div{display:flex;justify-content:space-between;align-items:baseline;gap:1.5rem;padding:.85rem 0;border-bottom:1px solid var(--glass-line)}
.pfacts dt{font-family:var(--mono);font-variation-settings:"wdth" 87.5;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ice-dim);flex:0 0 auto}
.pfacts dd{margin:0;text-align:right;font-size:.92rem;font-weight:500;color:var(--daylight)}

/* article pages: the reading column dominates, the aside is a rail */
@media (min-width:861px){
  .split--doc{grid-template-columns:minmax(0,1.62fr) minmax(0,.78fr)}
}


/* Touch targets and small type, phones and tablets */
@media (max-width:900px){
  .ftr ul{gap:.1rem}
  .ftr ul li a{display:flex;align-items:center;min-height:44px}
  .ftr ul li address{padding-block:.4rem}
  .linkarrow{min-height:44px;align-items:center;padding-block:.5rem}
  .cc a{min-height:44px;display:inline-flex;align-items:center}
  .faq summary{padding-block:1.15rem}
  .crumb a{display:inline-block;padding-block:.35rem}
  .social a{width:44px;height:44px}
  .strip li{min-height:32px}
}


/* The header has to hold brand + phone + menu inside 320px. Below 384 the
   phone keeps its tap target but drops to the glyph. */
.hdr-tel{gap:0}
.hdr-tel-ico{display:none;width:18px;height:18px}
@media (max-width:430px){ .hdr-in{gap:.75rem} }
@media (max-width:384px){
  .hdr-tel-txt{display:none}
  .hdr-tel-ico{display:block}
  .hdr-tel{width:44px;height:44px;padding:0}
  .brand-name{font-size:1.05rem}
  .brand-sub{font-size:.6rem}
}

/* Standalone links need a real target; inline links in running text do not. */
.areas li:has(> a){padding:0}
.areas li > a{display:flex;align-items:center;min-height:44px;padding:0 .8rem;text-decoration:none}
@media (max-width:900px){
  .crumb{margin-bottom:.9rem}
  .crumb a{padding-block:.72rem}
}

/* ==========================================================================
   Page loader — the screen is a pane of clear glass and a squeegee lays
   film across it. Charcoal follows the blade, the lockup settles, the sheet
   lifts away. Shown once per session, never with reduced motion.
   The animation ends hidden on its own, so it clears without JavaScript.
   ========================================================================== */
.pl{
  position:fixed;inset:0;z-index:120;
  background:var(--paper);
  display:grid;place-items:center;overflow:hidden;
  animation:pl-lift .40s cubic-bezier(.7,0,.3,1) .96s forwards;
}
.pl-film{
  position:absolute;inset:0;background:var(--glass-800);
  clip-path:polygon(0 0,11% 0,0 100%,0 100%);
  animation:pl-wipe .54s cubic-bezier(.62,.02,.3,1) .06s forwards;
}
.pl-edge{           /* the blade: a lit wet edge running ahead of the film */
  position:absolute;top:-8%;height:116%;width:2px;
  background:var(--rust);
  box-shadow:0 0 22px 5px rgba(224,86,58,.55),0 0 3px 1px rgba(242,239,230,.5);
  transform:translateX(-6vw) skewX(-6deg);
  animation:pl-blade .54s cubic-bezier(.62,.02,.3,1) .06s forwards;
}
.pl-mark{
  position:relative;z-index:1;
  opacity:0;transform:translateY(10px);
  animation:pl-mark .34s var(--ease) .42s forwards;
}
@keyframes pl-wipe{ to{clip-path:polygon(0 0,111% 0,100% 100%,0 100%)} }
@keyframes pl-blade{ 70%{opacity:1} to{transform:translateX(106vw) skewX(-6deg);opacity:0} }
@keyframes pl-mark{ to{opacity:1;transform:none} }
@keyframes pl-lift{ to{transform:translateY(-101%);visibility:hidden} }

.no-pl .pl{display:none}
@media (prefers-reduced-motion:reduce){ .pl{display:none} }

/* ---------------------------------------------------------- WhatsApp ---- */
.wa-float{
  position:fixed;right:1.15rem;bottom:1.15rem;z-index:30;
  width:54px;height:54px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--rust);color:var(--glass-900);
  box-shadow:0 12px 26px -10px rgba(0,0,0,.75);
  transition:transform .2s var(--ease),background .2s;
}
.wa-float:hover{transform:translateY(-2px);background:var(--rust-lt)}
.wa-float svg{width:27px;height:27px}
@media (max-width:520px){ .wa-float{width:50px;height:50px;right:.9rem;bottom:.9rem} .wa-float svg{width:25px;height:25px} }
@media print{ .wa-float,.pl{display:none} }

/* ==========================================================================
   Work gallery — reel frames laid out like a contact sheet, which is what a
   roll of film looks like. Every tile is the same 9:16 as the source, so
   nothing is cropped twice or upscaled.
   ========================================================================== */
.work{display:grid;grid-template-columns:repeat(auto-fill,minmax(175px,1fr));gap:4px;margin-top:clamp(2rem,4vw,3rem)}
@media (max-width:520px){.work{grid-template-columns:repeat(2,minmax(0,1fr))}}
.work a{
  position:relative;display:block;overflow:hidden;background:var(--glass-700);
  aspect-ratio:9/16;border-radius:2px;
  outline-offset:2px;
}
.work img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .45s var(--ease),opacity .3s}
.work a::after{                     /* the wet edge, on hover */
  content:"";position:absolute;inset:0;border:1px solid transparent;border-radius:2px;
  box-shadow:inset 0 -46px 40px -30px rgba(20,19,18,.85);
  transition:border-color .25s;pointer-events:none;
}
.work a:hover img,.work a:focus-visible img{transform:scale(1.045)}
.work a:hover::after,.work a:focus-visible::after{border-color:var(--rust)}
.work-note{display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;align-items:baseline;justify-content:space-between;margin-top:1.25rem}