/* ==========================================================
   Tint'd — Mobile Window Tinting
   ========================================================== */

:root{
  --bg:#05060a;
  --bg-2:#080a11;
  --panel:#0c0f17;
  --panel-2:#11151f;
  --line:rgba(255,255,255,.09);
  --line-strong:rgba(255,255,255,.16);

  --ink:#f4f7fb;
  --ink-2:#c6cedd;
  --muted:#8a93a6;

  /* Brand palette, sampled from the logo (CMYK -> sRGB via ICC):
     logo navy #283C78, logo red #D23C32, logo grey #E6E7E8.
     The -lit values are those hues lifted for legibility on near-black. */
  --navy:#283c78;
  --blue:#4457c9;
  --blue-lit:#8f9cf7;
  --red:#d23c32;
  --red-lit:#f0564a;
  --steel:#e6e7e8;

  --blue-glow:68,87,201;   /* rgb() parts for translucent washes */
  --lit-glow:143,156,247;

  --shadow:0 30px 80px -30px rgba(0,0,0,.9);
  --r:18px;
  --maxw:1240px;

  --display:'Anton', 'Haettenschweiler', 'Arial Narrow', system-ui, sans-serif;
  --sans:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

*{box-sizing:border-box}
:root{color-scheme:dark}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button,input,select,textarea{font:inherit; color:inherit}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Keyboard users land here first and can jump past the nav. */
.skip-link{
  position:fixed; top:-100px; left:1rem; z-index:130;
  padding:.8rem 1.3rem; border-radius:0 0 12px 12px;
  background:var(--blue); color:#fff; font-weight:700; font-size:.9rem;
  transition:top .25s;
}
.skip-link:focus{top:0}

/* keyboard focus — visible on every interactive element, never on mouse clicks */
:focus-visible{outline:2px solid var(--blue-lit); outline-offset:3px; border-radius:6px}
.btn:focus-visible, .nav-links a:focus-visible, .nav-call:focus-visible{outline-offset:4px}

.wrap{width:min(var(--maxw), calc(100% - 2.5rem)); margin-inline:auto}

/* ---------- Type ---------- */
h1,h2,h3,h4{margin:0; font-family:var(--display); font-weight:400; letter-spacing:.01em; line-height:.94; text-transform:uppercase}
h1{font-size:clamp(2.9rem, 7.4vw, 6.6rem)}
h2{font-size:clamp(2.4rem, 6vw, 4.9rem)}
h3{font-size:clamp(1.25rem,2.2vw,1.6rem); letter-spacing:.02em}
p{margin:0 0 1rem}
.accent{
  background:linear-gradient(100deg,var(--blue-lit),#6f7ff0 52%,var(--red-lit));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.kicker{
  font-family:var(--sans); font-size:.72rem; font-weight:700; letter-spacing:.28em;
  text-transform:uppercase; color:var(--blue); margin:0 0 1rem;
}
.sec-sub{color:var(--ink-2); max-width:60ch; font-size:1.06rem}
.fineprint{font-size:.78rem; color:var(--muted); line-height:1.5}

/* ---------- Chrome ---------- */
.scroll-progress{position:fixed; inset:0 0 auto 0; height:2px; z-index:120; pointer-events:none}
.scroll-progress i{display:block; height:100%; width:0; background:linear-gradient(90deg,var(--blue-lit),var(--blue))}

.grain{
  position:fixed; inset:0; z-index:110; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.cursor-glow{
  position:fixed; top:0; left:0; width:520px; height:520px; margin:-260px 0 0 -260px; z-index:0;
  pointer-events:none; opacity:0; transition:opacity .6s;
  background:radial-gradient(circle, rgba(var(--blue-glow),.13), transparent 62%);
}
@media (hover:hover) and (pointer:fine){ .cursor-glow{opacity:1} }

/* ---------- Nav ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  display:flex; align-items:center; gap:1.5rem;
  padding:1.15rem clamp(1rem,3vw,2.2rem);
  transition:padding .35s, background .35s, border-color .35s, backdrop-filter .35s;
  border-bottom:1px solid transparent;
}
/* Soft scrim behind the transparent nav so links stay legible over bright
   frames of the reel. Fades away once the nav gets its own solid background. */
.nav::before{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:-1;
  background:linear-gradient(180deg, rgba(5,6,10,.72) 0%, rgba(5,6,10,.34) 55%, transparent 100%);
  transition:opacity .35s ease;
}
.nav.stuck::before{opacity:0}
.nav-links a, .nav-call{text-shadow:0 1px 6px rgba(3,4,8,.7)}
.nav.stuck .nav-links a, .nav.stuck .nav-call{text-shadow:none}

.nav.stuck{
  padding-block:.7rem;
  background:rgba(5,6,10,.72);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom-color:var(--line);
}
/* The logo carries the wordmark itself, so it runs larger than a typical
   nav mark — it's the only brand element in the header. */
.brand{display:flex; align-items:center; flex-shrink:0}
.brand img{
  width:auto; height:80px; transition:height .35s cubic-bezier(.2,.7,.2,1);
  filter:drop-shadow(0 6px 22px rgba(0,0,0,.7));
}
.nav.stuck .brand img{height:58px}
.apo{color:var(--blue-lit)}

.nav-links{display:flex; align-items:center; gap:.35rem; margin-left:auto}
.nav-links a{
  padding:.55rem .8rem; border-radius:999px; font-size:.83rem; font-weight:600;
  color:var(--ink-2); letter-spacing:.02em; transition:color .2s, background .2s;
}
.nav-links a:hover{color:#fff; background:rgba(255,255,255,.06)}
.nav-links a.active{color:#fff}
.nav-links a.active::after{
  content:''; display:block; height:2px; margin-top:3px; border-radius:2px;
  background:linear-gradient(90deg,var(--blue-lit),var(--blue));
}
.nav-cta{
  background:linear-gradient(100deg,var(--blue),var(--navy))!important; color:#fff!important;
  padding:.6rem 1.1rem!important; box-shadow:0 8px 26px -10px rgba(var(--blue-glow),.9);
}
.nav-call{
  display:inline-flex; align-items:center; gap:.5rem; font-weight:700; font-size:.9rem;
  padding:.6rem 1rem; border:1px solid var(--line-strong); border-radius:999px; white-space:nowrap;
  transition:border-color .2s, background .2s;
}
.nav-call:hover{border-color:var(--blue-lit); background:rgba(var(--lit-glow),.08)}
.pulse-dot{
  width:7px; height:7px; border-radius:50%; background:#37e39a; flex:none;
  box-shadow:0 0 0 0 rgba(55,227,154,.7); animation:pulse 2.4s infinite;
}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(55,227,154,0)}100%{box-shadow:0 0 0 0 rgba(55,227,154,0)}}

.menu-toggle{
  display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer;
  padding:.5rem; margin-left:auto;
}
.menu-toggle span{width:24px; height:2px; background:#fff; border-radius:2px; transition:.3s}
.menu-toggle.active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-toggle.active span:nth-child(2){opacity:0}
.menu-toggle.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:1rem 1.7rem; border-radius:999px; border:1px solid transparent; cursor:pointer;
  font-weight:700; font-size:.98rem; letter-spacing:.01em; transition:transform .25s, box-shadow .25s, background .25s, border-color .25s;
}
.btn-primary{
  background:linear-gradient(100deg,var(--blue-lit),#6f7ff0 55%,var(--blue)); color:#0b1233;
  box-shadow:0 18px 45px -18px rgba(var(--blue-glow),.95);
}
.btn-primary:hover{transform:translateY(-3px); box-shadow:0 26px 60px -18px rgba(var(--lit-glow),.9)}
.btn-ghost{border-color:var(--line-strong); background:rgba(255,255,255,.03); color:#fff}
.btn-ghost:hover{border-color:var(--blue-lit); background:rgba(var(--lit-glow),.09); transform:translateY(-3px)}

/* Parallax layers get their own compositor layer; JS writes only transform. */
[data-parallax]{will-change:transform}
@media (prefers-reduced-motion:reduce){ [data-parallax]{transform:none!important} }

/* ---------- Reveal ---------- */
.js .reveal{opacity:0; transform:translateY(26px); transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1)}
.js .reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1; transform:none; transition:none}
  html{scroll-behavior:auto}
  *{animation-duration:.001ms!important; animation-iteration-count:1!important}
}

/* ==========================================================
   HERO
   ========================================================== */
.hero{position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden}
/* Poster and video are parallaxed together as one layer (.hero-media), so the
   two can never drift apart and expose a seam at the top of the hero. */
.hero-media{position:absolute; inset:-12% 0; z-index:0; will-change:transform}
/* Poster sits ON TOP of the player and fades out once playback is confirmed.
   The player must stay visible and opaque underneath: WebKit refuses to
   autoplay a video it considers invisible, so hiding the iframe until it
   plays deadlocks on iOS — it never plays, so it never gets revealed. */
.hero-img{
  position:absolute; inset:0; z-index:2;
  width:100%; height:100%; object-fit:cover; object-position:center center;
  filter:saturate(.92) contrast(1.03);
  transition:opacity .9s ease;
}
.hero-media.playing .hero-img{opacity:0}
/* Vimeo background video — sized to COVER the hero at any aspect ratio.
   16:9 iframe: grow by viewport width, then by viewport height, take the larger. */
.hero-video{
  position:absolute; inset:0; overflow:hidden; container-type:size;
  z-index:1;                       /* under the poster, but visible to WebKit */
  background:#07080d;              /* backstop: never white behind the player */
}
/* BASE = viewport units, supported everywhere including iOS Safari 15 and
   older. These MUST NOT use container-query units: cqw/cqh don't exist before
   Safari 16, and if the base rule used them every sizing declaration would be
   dropped and the iframe would collapse to its default 300x150 box. */
.hero-video iframe{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  border:0; pointer-events:none; background:#07080d;
  /* 16:9 cover — grow by width, then by height, larger wins. */
  width:100vw; height:56.25vw;
  min-width:177.7778vh; min-height:100vh;
}
/* 9:16 cover for the vertical cut. On a portrait phone this crops far less of
   the frame than a 16:9 clip would, so the video is barely scaled and the
   composition survives. */
.hero-video.vertical iframe{
  width:100vw; height:177.7778vw;
  min-width:56.25vh; min-height:100vh;
}
/* UPGRADE for browsers with container queries: measure the media box itself.
   The hero's height depends on its content, not just the viewport, so viewport
   units can leave a sliver uncovered. Container units always fit exactly. */
@supports (width: 1cqw){
  .hero-video iframe{
    width:max(100cqw, 177.7778cqh);
    height:max(56.25cqw, 100cqh);
    min-width:0; min-height:0;
  }
  .hero-video.vertical iframe{
    width:max(100cqw, 56.25cqh);
    height:max(177.7778cqw, 100cqh);
    min-width:0; min-height:0;
  }
}
@media (max-width:900px){
  .hero-veil{
    background:
      linear-gradient(180deg,
        rgba(5,6,10,.30) 0%,
        rgba(5,6,10,.46) 14%,
        rgba(5,6,10,.62) 34%,
        rgba(5,6,10,.68) 62%,
        rgba(5,6,10,.74) 82%,
        var(--bg) 99%) !important;
  }
}
/* One flat, gentle tint across the entire video. The gradients below shape
   contrast where the text sits; this just takes the edge off every frame so
   bright shots don't wash the copy out. Deliberately light — the reel still
   has to read as the hero. */
.hero-veil::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:rgba(5,6,10,.30);
}
.hero-veil{
  position:absolute; inset:0;
  background:
    /* Just enough scrim to hold the headline; the video stays visible. */
    linear-gradient(95deg, rgba(5,6,10,.80) 0%, rgba(5,6,10,.46) 34%, rgba(5,6,10,.06) 62%, transparent 100%),
    radial-gradient(120% 80% at 78% 22%, rgba(var(--blue-glow),.18), transparent 60%),
    linear-gradient(180deg, rgba(5,6,10,.55) 0%, rgba(5,6,10,.10) 30%, rgba(5,6,10,.55) 74%, var(--bg) 99%);
}
.hero-inner{
  position:relative; z-index:2;
  width:min(var(--maxw), calc(100% - 2.5rem)); margin:0 auto;
  padding:10.5rem 0 1.8rem;
}
.eyebrow{
  display:inline-flex; align-items:center; gap:.6rem;
  font-size:.74rem; font-weight:700; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-2);
  border:1px solid var(--line-strong); border-radius:999px; padding:.5rem 1rem;
  background:rgba(5,6,10,.4); backdrop-filter:blur(8px);
}
.hero h1, .hero-sub, .hero-trust, .eyebrow{
  /* The reel has bright frames as well as dark ones. A soft shadow keeps
     every line legible over both without having to crush the video. */
  text-shadow:0 2px 10px rgba(3,4,8,.75), 0 1px 3px rgba(3,4,8,.9);
}
.hero h1{margin:1.1rem 0 0; text-shadow:0 20px 60px rgba(0,0,0,.6)}
.hero h1 .line{display:block}
.hero-sub{max-width:52ch; color:var(--ink-2); font-size:clamp(1rem,1.5vw,1.14rem); margin-top:1.3rem}
.hero-sub strong{color:#fff}
.hero-cta{display:flex; flex-wrap:wrap; gap:.9rem; margin-top:1.7rem}
.hero-trust{
  display:flex; align-items:center; gap:.7rem; margin-top:1.5rem; max-width:56ch;
  font-size:.85rem; color:var(--ink-2); line-height:1.45; transition:color .25s;
}
.hero-trust .stars{color:#ffd166; letter-spacing:.1em; flex:none; font-size:.95rem}
.hero-trust:hover{color:#fff}

.hero-stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  margin-top:2.2rem; background:var(--line); border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden;
}
.stat{background:rgba(8,10,17,.72); backdrop-filter:blur(10px); padding:1.15rem 1.3rem}
.stat b{display:block; font-family:var(--display); font-size:clamp(1.8rem,3.4vw,2.7rem); line-height:1; color:#fff}
.stat span{font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}

.marquee{
  position:relative; z-index:2; margin-top:1.4rem;
  border-block:1px solid var(--line); background:rgba(8,10,17,.6); overflow:hidden; padding:.75rem 0;
}
.marquee-track{display:flex; gap:2rem; width:max-content; animation:slide 38s linear infinite}
.marquee span{font-family:var(--display); font-size:1.05rem; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.55); white-space:nowrap}
.marquee i{color:var(--blue); font-style:normal; font-size:.7rem; align-self:center}
@keyframes slide{to{transform:translateX(-50%)}}

/* ==========================================================
   SECTION SHELL
   ========================================================== */
.section{position:relative; padding:clamp(4rem,8vw,7rem) 0; z-index:1}
/* Offscreen sections skip layout/paint until they scroll near the viewport.
   contain-intrinsic-size keeps the scrollbar honest before they render. */
.services, .process, .work, .band, .area, .reviews, .quote, .faq{
  content-visibility:auto;
  contain-intrinsic-size:auto 900px;
}
.sec-head{margin-bottom:clamp(2.5rem,5vw,4rem); max-width:var(--maxw)}
.sec-head h2{margin-bottom:1.2rem}

/* ==========================================================
   TINT LAB
   ========================================================== */
.lab{background:linear-gradient(180deg, var(--bg), var(--bg-2) 40%, var(--bg))}
.lab-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(1.5rem,3vw,3rem); align-items:start}

.sim{}
.sim-window{
  position:relative; border-radius:calc(var(--r) + 8px); overflow:hidden; aspect-ratio:16/10;
  box-shadow:var(--shadow); isolation:isolate; background:#0a1420;
}
.sim-scene{position:absolute; inset:0; overflow:hidden}
/* Golden-hour high desert, painted in gradients — layered ridges with
   atmospheric perspective instead of cartoon shapes. */
.sky{position:absolute; inset:0; background:linear-gradient(180deg,#5d7bb0 0%,#8fa6c9 34%,#d9c3a6 62%,#e3a878 86%,#d98d5f 100%)}
.sun{
  position:absolute; top:20%; right:22%; width:10%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle,#fff8ec 24%, #ffdfa3 55%, rgba(255,214,140,0) 74%);
  box-shadow:0 0 110px 60px rgba(255,214,150,.55); animation:shimmer 7s ease-in-out infinite;
}
@keyframes shimmer{50%{transform:scale(1.05); filter:brightness(1.08)}}
.haze{position:absolute; inset:0; background:linear-gradient(180deg, transparent 40%, rgba(238,196,150,.35) 62%, transparent 78%)}
.ridge{position:absolute; left:-5%; right:-5%}
.ridge-far{
  bottom:30%; height:30%; background:linear-gradient(180deg,#8b95b8,#7d84a8); opacity:.55;
  clip-path:polygon(0 70%,9% 52%,17% 63%,28% 38%,39% 58%,52% 33%,63% 56%,74% 42%,86% 60%,94% 48%,100% 62%,100% 100%,0 100%);
}
.ridge-mid{
  bottom:23%; height:28%; background:linear-gradient(180deg,#6a6a92,#585678); opacity:.8;
  clip-path:polygon(0 64%,8% 48%,19% 62%,30% 36%,42% 58%,55% 44%,68% 64%,80% 40%,91% 58%,100% 50%,100% 100%,0 100%);
}
.ridge-near{
  bottom:14%; height:26%; background:linear-gradient(180deg,#453f61,#332e4c);
  clip-path:polygon(0 74%,11% 56%,23% 72%,36% 48%,50% 68%,63% 52%,77% 72%,89% 58%,100% 70%,100% 100%,0 100%);
}
.floor{position:absolute; inset:auto 0 0 0; height:16%; background:linear-gradient(180deg,#332e4c,#201c31)}

.sim-film{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(6,10,18,.96), rgba(10,14,22,.9));
  opacity:.65; transition:opacity .55s cubic-bezier(.2,.7,.2,1);
  mix-blend-mode:multiply;
}
.sim-glare{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.10) 44%, rgba(255,255,255,.03) 50%, transparent 62%);
}
.sim-frame{
  position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  box-shadow:
    inset 0 0 0 10px #0b0d12,
    inset 0 0 0 11px rgba(255,255,255,.16),
    inset 0 1px 0 11px rgba(255,255,255,.06),
    inset 0 40px 90px -40px rgba(0,0,0,.9);
}
.sim-badge{
  position:absolute; left:1.4rem; bottom:1.4rem; z-index:3;
  font-family:var(--display); font-size:1.5rem; letter-spacing:.05em;
  padding:.45rem 1rem; border-radius:999px;
  background:rgba(5,6,10,.72); border:1px solid var(--line-strong); backdrop-filter:blur(10px);
}

.sim-controls{margin-top:1.8rem}
input[type=range]{
  -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:999px; background:linear-gradient(90deg,#0b0e15,var(--blue)); outline:none; cursor:pointer;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:26px; height:26px; border-radius:50%;
  background:linear-gradient(160deg,#fff,#cfe6ff); border:3px solid var(--blue);
  box-shadow:0 0 22px rgba(var(--blue-glow),.85); cursor:grab;
}
input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#fff;border:3px solid var(--blue);cursor:grab}
.sim-ticks{
  display:flex; justify-content:space-between; gap:.25rem; margin-top:1rem;
  padding:.3rem; border:1px solid var(--line); border-radius:999px; background:rgba(255,255,255,.03);
}
.sim-ticks button{
  flex:1; background:none; border:0; border-radius:999px; padding:.5rem .4rem;
  font-size:.78rem; font-weight:700; letter-spacing:.05em; color:var(--muted); cursor:pointer;
  transition:color .25s, background .25s, box-shadow .25s;
}
.sim-ticks button:hover{color:#fff}
.sim-ticks button.on{
  color:#fff; background:linear-gradient(160deg,var(--blue),var(--navy));
  box-shadow:0 6px 18px -8px rgba(var(--blue-glow),.9);
}

.readout{
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
  border:1px solid var(--line); border-radius:calc(var(--r) + 8px);
  padding:clamp(1.5rem,3vw,2.2rem);
}
.readout-top{display:flex; align-items:center; gap:1.1rem; margin-bottom:.9rem}
.readout-vlt{
  display:flex; align-items:baseline; gap:.15rem; flex:none;
  padding:.5rem .85rem; border-radius:14px;
  background:linear-gradient(160deg,rgba(var(--blue-glow),.30),rgba(var(--blue-glow),.06));
  border:1px solid rgba(var(--lit-glow),.28);
}
.readout-vlt b{font-family:var(--display); font-weight:400; font-size:2rem; line-height:1; color:#fff}
.readout-vlt i{font-style:normal; font-size:.68rem; font-weight:700; letter-spacing:.12em; color:var(--blue-lit)}
.readout-vlt.is-none b{font-size:1.6rem}
.readout h3{margin-bottom:0}
.readout > p{color:var(--ink-2); font-size:.96rem; min-height:3.2em}
.meter{margin-top:1.3rem}
.meter-top{display:flex; justify-content:space-between; align-items:baseline; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:.5rem}
.meter-top b{font-family:var(--display); font-size:1.15rem; letter-spacing:.04em; color:#fff}
.meter-bar{height:8px; border-radius:999px; background:rgba(255,255,255,.07); overflow:hidden}
.meter-bar i{display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,var(--red),#ffd166); transition:width .55s cubic-bezier(.2,.7,.2,1)}
.meter-bar.priv i{background:linear-gradient(90deg,var(--blue),var(--blue-lit))}

.temp{display:flex; align-items:center; justify-content:space-between; gap:1rem; margin:1.7rem 0 1.3rem; padding-top:1.4rem; border-top:1px solid var(--line)}
.temp-label{font-size:.8rem; color:var(--muted); max-width:18ch; line-height:1.4}
.temp-num{font-family:var(--display); font-size:clamp(2.6rem,5vw,3.6rem); line-height:1; color:#fff}
.temp-num sup{font-size:.4em; color:var(--red); vertical-align:super}

.legal{display:flex; gap:.8rem; align-items:flex-start; padding:.9rem 1rem; border-radius:14px; border:1px solid var(--line); background:rgba(255,255,255,.03); margin-bottom:1rem}
.legal p{margin:0; font-size:.83rem; color:var(--ink-2); line-height:1.5}
.legal b{color:#fff}
.legal-dot{width:9px;height:9px;border-radius:50%;background:#37e39a;flex:none;margin-top:.45rem;box-shadow:0 0 12px #37e39a}
.legal[data-state="warn"]{border-color:rgba(255,122,47,.45); background:rgba(255,122,47,.09)}
.legal[data-state="warn"] .legal-dot{background:var(--red); box-shadow:0 0 12px var(--red)}

/* ---------- Film tiers ---------- */
.tiers-head{margin:clamp(4rem,8vw,6.5rem) 0 2.5rem; max-width:62ch}
.tiers-head h3{font-size:clamp(1.8rem,4vw,3rem); margin-bottom:1rem}
.tiers-head p{color:var(--ink-2)}

.tiers{display:grid; grid-template-columns:repeat(2,1fr); gap:1.3rem; align-items:stretch; max-width:900px; margin-inline:auto}
.tier{
  position:relative; display:flex; flex-direction:column;
  background:linear-gradient(180deg,var(--panel),#0a0d14);
  border:1px solid var(--line); border-radius:calc(var(--r) + 6px);
  padding:clamp(1.5rem,2.6vw,2.1rem);
  transition:transform .4s cubic-bezier(.2,.7,.2,1), border-color .4s, box-shadow .4s;
}
.tier:hover{transform:translateY(-6px); border-color:var(--line-strong); box-shadow:var(--shadow)}
.tier-rank{
  font-size:.68rem; font-weight:800; letter-spacing:.22em; text-transform:uppercase;
  color:var(--muted); margin-bottom:1rem;
}
.tier h4{font-family:var(--display); font-weight:400; font-size:clamp(1.6rem,3vw,2.2rem); letter-spacing:.02em; text-transform:uppercase; margin-bottom:.5rem}
.tier-price{
  display:inline-block; align-self:flex-start; margin-bottom:1rem;
  font-size:.78rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--blue-lit);
  border:1px solid rgba(var(--lit-glow),.32); border-radius:999px; padding:.35rem .85rem;
}
.tier p{color:var(--ink-2); font-size:.95rem; flex:1}
.tier p em{color:#fff; font-style:italic}
.tier ul{list-style:none; margin:1.2rem 0 0; padding:1.2rem 0 0; border-top:1px solid var(--line)}
.tier li{position:relative; padding-left:1.6rem; font-size:.88rem; color:var(--ink-2); margin-bottom:.5rem}
.tier li::before{position:absolute; left:0; top:-.05rem; font-weight:800}
.tier li[data-yes]::before{content:'✓'; color:#37e39a}
.tier li[data-no]::before{content:'—'; color:var(--red)}
.tier-best{
  border-color:rgba(var(--blue-glow),.4);
  background:linear-gradient(165deg,rgba(var(--blue-glow),.14),#0a0d14 62%);
}
.tier-best .tier-rank{color:var(--blue-lit)}
.tier-flag{
  position:absolute; top:1.2rem; right:1.2rem;
  font-size:.62rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase;
  color:#fff; background:linear-gradient(100deg,var(--blue),var(--navy));
  border-radius:999px; padding:.4rem .8rem; box-shadow:0 8px 20px -8px rgba(var(--blue-glow),.8);
}
.tiers-note{
  margin:2rem auto 0; max-width:70ch; text-align:center; color:var(--muted); font-size:.95rem;
}
.tiers-note strong{color:#fff}

/* ==========================================================
   SERVICES
   ========================================================== */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem}
.card{
  position:relative; overflow:hidden;
  background:linear-gradient(180deg,var(--panel),#0a0d14);
  border:1px solid var(--line); border-radius:calc(var(--r) + 6px);
  padding:clamp(1.6rem,2.6vw,2.2rem);
  transition:transform .4s cubic-bezier(.2,.7,.2,1), border-color .4s, box-shadow .4s;
}
.card::before{
  content:''; position:absolute; inset:0; opacity:0; transition:opacity .45s;
  background:radial-gradient(80% 60% at 50% 0%, rgba(var(--blue-glow),.16), transparent 70%);
}
.card:hover{transform:translateY(-8px); border-color:var(--line-strong); box-shadow:var(--shadow)}
.card:hover::before{opacity:1}
.card > *{position:relative}
.card-num{
  font-family:var(--display); font-size:.95rem; letter-spacing:.2em; color:var(--blue);
  display:block; margin-bottom:1.4rem;
}
.card h3{margin-bottom:.8rem}
.card p{color:var(--ink-2); font-size:.95rem; margin:0}
.card.feature{grid-column:span 2; background:linear-gradient(120deg,#0d1420,#0a0d14 60%)}
.card.feature h3{font-size:clamp(1.6rem,3.4vw,2.4rem)}
.card.accent-card{border-color:rgba(var(--blue-glow),.35); background:linear-gradient(160deg,rgba(var(--blue-glow),.12),#0a0d14 65%)}
.tags{display:flex; flex-wrap:wrap; gap:.5rem; list-style:none; padding:0; margin:1.4rem 0 0}
.tags li{font-size:.74rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2); border:1px solid var(--line-strong); border-radius:999px; padding:.35rem .8rem}
.card-link{display:inline-block; margin-top:1.2rem; font-weight:700; font-size:.9rem; color:var(--blue-lit)}
.card-link:hover{text-decoration:underline}

/* ==========================================================
   PROCESS
   ========================================================== */
.process{background:var(--bg-2); border-block:1px solid var(--line)}
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.5rem,3vw,3rem)}
.step{display:flex; flex-direction:column; align-items:flex-start}
.step b{
  font-family:var(--display); font-size:clamp(2.4rem,5.2vw,4rem); line-height:.9;
  color:transparent; -webkit-text-stroke:1.5px rgba(var(--blue-glow),.55);
  margin-bottom:.9rem;
}
.step h3{padding-top:1.4rem; border-top:1px solid var(--line-strong); width:100%}
.step h3{margin-bottom:.7rem}
.step p{color:var(--ink-2); font-size:.96rem; margin:0}

/* ==========================================================
   WORK / BEFORE-AFTER
   ========================================================== */
.ba-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem}
.ba{margin:0}
.ba-stage{
  position:relative; overflow:hidden; border-radius:calc(var(--r) + 6px);
  aspect-ratio:4/5; background:#0a0d14; border:1px solid var(--line);
  cursor:ew-resize; user-select:none; touch-action:pan-y;
  box-shadow:var(--shadow);
}
.ba-stage img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 48%; pointer-events:none}
.ba-before-wrap{position:absolute; inset:0; clip-path:inset(0 50% 0 0); will-change:clip-path}
.ba-handle{
  position:absolute; top:0; bottom:0; left:50%; width:2px; margin-left:-1px; z-index:3;
  background:linear-gradient(180deg,transparent,var(--blue-lit) 12%,var(--blue-lit) 88%,transparent);
  box-shadow:0 0 20px rgba(var(--lit-glow),.75);
}
.ba-handle span{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:46px; height:46px; border-radius:50%;
  background:rgba(5,6,10,.6); border:2px solid var(--blue-lit); backdrop-filter:blur(6px);
  box-shadow:0 0 26px rgba(var(--lit-glow),.5);
}
.ba-handle span::before,.ba-handle span::after{
  content:''; position:absolute; top:50%; width:0; height:0; border-block:5px solid transparent;
}
.ba-handle span::before{left:9px; border-right:7px solid var(--blue-lit); transform:translateY(-50%)}
.ba-handle span::after{right:9px; border-left:7px solid var(--blue-lit); transform:translateY(-50%)}
.ba-handle:focus-visible{outline:none}
.ba-handle:focus-visible span{box-shadow:0 0 0 4px rgba(var(--lit-glow),.35), 0 0 26px rgba(var(--lit-glow),.5)}
.ba-tag{
  position:absolute; top:1rem; z-index:4; font-style:normal;
  font-size:.68rem; font-weight:800; letter-spacing:.2em; text-transform:uppercase;
  padding:.35rem .75rem; border-radius:999px; background:rgba(5,6,10,.7); border:1px solid var(--line-strong);
  backdrop-filter:blur(6px);
}
.ba-tag-l{left:1rem}
.ba-tag-r{right:1rem; color:var(--blue-lit); border-color:rgba(var(--lit-glow),.4)}
.ba.shot .ba-stage{cursor:default}
.ba.shot .ba-tag-r{color:#fff; border-color:var(--line-strong)}
.ba figcaption{margin-top:1rem; font-size:.88rem; color:var(--muted)}
.ba figcaption b{display:block; color:#fff; font-size:1rem; letter-spacing:.01em}
.work-cta{margin-top:2.5rem; text-align:center; color:var(--ink-2)}
.work-cta a{color:var(--blue-lit); font-weight:700}
.work-cta a:hover{text-decoration:underline}

/* ==========================================================
   BAND
   ========================================================== */
.band{background:linear-gradient(180deg,var(--bg),#070911); border-top:1px solid var(--line)}
.band-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:center}
.band-h{font-size:clamp(2.2rem,4.6vw,4rem)}
.band-copy p{color:var(--ink-2)}
.band-copy strong{color:#fff}
.band-badges{display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.6rem}
.band-badges span{
  font-size:.74rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  border:1px solid var(--line-strong); border-radius:999px; padding:.5rem .95rem; color:var(--ink-2);
}

/* ==========================================================
   AREA
   ========================================================== */
.area-list{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:calc(var(--r) + 6px); overflow:hidden}
.area-list li{
  background:var(--bg); padding:clamp(1.6rem,3vw,2.4rem); transition:background .35s;
  display:flex; flex-direction:column; gap:.4rem;
}
.area-list li:hover{background:var(--panel)}
.area-list b{font-family:var(--display); font-size:clamp(1.4rem,2.6vw,2rem); font-weight:400; letter-spacing:.02em; text-transform:uppercase}
.area-list span{font-size:.76rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
.area-list li.alt{background:linear-gradient(150deg,rgba(var(--blue-glow),.14),var(--bg) 70%)}
.area-list li.alt span{color:var(--blue-lit)}
.area-copy{margin-top:2.2rem; max-width:78ch; color:var(--muted); font-size:.95rem}
.area-copy strong{color:var(--ink-2)}

/* ==========================================================
   REVIEWS
   ========================================================== */
.reviews{background:var(--bg-2); border-block:1px solid var(--line)}
/* Google reviews bar */
.gr{
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem; flex-wrap:wrap;
  margin-bottom:1.6rem; padding:1.3rem 1.6rem;
  border:1px solid var(--line); border-radius:calc(var(--r) + 6px);
  background:linear-gradient(120deg,rgba(var(--blue-glow),.12),var(--panel) 60%);
}
.gr-left{display:flex; align-items:center; gap:1rem}
.gr-logo{
  display:grid; place-items:center; width:48px; height:48px; flex:none;
  background:#fff; border-radius:14px;
}
.gr-left b{display:flex; align-items:center; gap:.55rem; font-size:1.02rem; letter-spacing:.01em}
.gr-num{font-family:var(--display); font-weight:400; font-size:1.9rem; line-height:1; letter-spacing:.02em}
.gr-score .stars{margin:0; font-size:.95rem}
.gr-left span{font-size:.86rem; color:var(--muted)}
.gr-actions{display:flex; gap:.7rem; flex-wrap:wrap}
.gr-actions .btn{padding:.8rem 1.3rem; font-size:.9rem}

/* Two reviews, so they get more room and sit centred rather than
   leaving an obvious gap in a three-up grid. */
.quotes{
  display:grid; grid-template-columns:repeat(2,1fr); gap:1.3rem; align-items:stretch;
  max-width:1080px; margin-inline:auto;
}
.quotes blockquote{
  position:relative; margin:0; padding:clamp(1.6rem,2.6vw,2.4rem);
  display:flex; flex-direction:column;
  background:linear-gradient(180deg,var(--panel),#0a0d14);
  border:1px solid var(--line); border-radius:calc(var(--r) + 6px);
}
.stars{color:#ffd166; letter-spacing:.18em; font-size:1rem; margin-bottom:1rem}
.quotes p{color:var(--ink-2); font-size:1.02rem; flex:1}
.quotes blockquote::before{
  content:'"'; position:absolute; top:.2rem; right:1.4rem;
  font-family:var(--display); font-size:6rem; line-height:1;
  color:rgba(var(--lit-glow),.12); pointer-events:none;
}
.quotes cite{
  font-style:normal; font-weight:700; font-size:.85rem; letter-spacing:.14em;
  text-transform:uppercase; color:#fff; display:flex; flex-direction:column; gap:.25rem;
}
.quotes cite em{
  font-style:normal; font-weight:600; font-size:.66rem; letter-spacing:.14em;
  color:var(--muted); text-transform:uppercase;
}

/* ==========================================================
   QUOTE
   ========================================================== */
.quote-pitch h2{margin-bottom:1.1rem}
.quote-grid{display:grid; grid-template-columns:.95fr 1.05fr; gap:clamp(2rem,4vw,3.5rem); align-items:start}
.contact-rows{margin-top:2.2rem; border-top:1px solid var(--line)}
.crow{
  display:flex; align-items:baseline; gap:1rem; padding:1.05rem .2rem;
  border-bottom:1px solid var(--line); transition:padding-left .3s, background .3s;
}
.crow:hover{padding-left:1rem; background:rgba(255,255,255,.03)}
.crow-k{font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); width:6.5rem; flex:none}
.crow-v{font-family:var(--display); font-size:clamp(1.1rem,2vw,1.5rem); letter-spacing:.03em; text-transform:uppercase}

.quote-tip{
  margin-top:2.4rem; padding:1.6rem 1.8rem; border-radius:calc(var(--r) + 4px);
  border:1px solid var(--line); background:linear-gradient(150deg,rgba(var(--blue-glow),.10),transparent 70%);
}
.quote-tip h3{font-size:1.15rem; margin-bottom:.6rem}
.quote-tip p{color:var(--ink-2); font-size:.92rem; margin-bottom:.9rem}
.quote-tip ol{margin:0; padding-left:1.1rem; color:var(--ink-2); font-size:.92rem}
.quote-tip li{margin-bottom:.3rem}
.quote-tip li::marker{color:var(--blue-lit); font-weight:700}

.quote-form{
  display:grid; grid-template-columns:1fr 1fr; gap:1rem;
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
  border:1px solid var(--line); border-radius:calc(var(--r) + 8px);
  padding:clamp(1.5rem,3vw,2.4rem);
}
.field{display:flex; flex-direction:column; gap:.45rem}
.field.full, .quote-form .btn, .form-note{grid-column:1/-1}
.field label{font-size:.72rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--muted)}
.field input,.field select,.field textarea{
  background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:12px;
  padding:.85rem 1rem; font-size:.95rem; transition:border-color .25s, background .25s;
}
.field input::placeholder,.field textarea::placeholder{color:#5c657a}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--blue); background:rgba(var(--blue-glow),.07)}
.field textarea{resize:vertical}
.field select option{background:#0c0f17; color:#f4f7fb}
.field select{appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%); background-position:calc(100% - 20px) 55%, calc(100% - 14px) 55%; background-size:6px 6px; background-repeat:no-repeat}
.form-note{font-size:.8rem; color:var(--muted); margin:0; text-align:center}
.form-note a{color:var(--blue-lit); font-weight:700}

/* ==========================================================
   FAQ
   ========================================================== */
.acc{border-top:1px solid var(--line)}
.acc details{border-bottom:1px solid var(--line)}
.acc summary{
  list-style:none; cursor:pointer; padding:1.5rem 3rem 1.5rem 0; position:relative;
  font-family:var(--display); font-size:clamp(1.1rem,2.2vw,1.6rem); letter-spacing:.02em;
  text-transform:uppercase; transition:color .25s;
}
.acc summary::-webkit-details-marker{display:none}
.acc summary:hover{color:var(--blue-lit)}
.acc summary::after{
  content:''; position:absolute; right:.4rem; top:50%; width:14px; height:14px; margin-top:-7px;
  border-right:2px solid var(--blue); border-bottom:2px solid var(--blue);
  transform:rotate(45deg) translateY(-25%); transition:transform .3s;
}
.acc details[open] summary::after{transform:rotate(-135deg) translateY(-25%)}
.acc p{margin:0 0 1.8rem; max-width:78ch; color:var(--ink-2); font-size:1rem}

/* ==========================================================
   FOOTER
   ========================================================== */
.footer{border-top:1px solid var(--line); background:#04050a; padding:clamp(3rem,6vw,5rem) 0 7rem}
.footer-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:2.5rem}
.footer-logo{width:min(280px,80%); height:auto; margin-bottom:1.2rem}
.footer p{color:var(--muted); font-size:.9rem; max-width:34ch}
.footer h4{font-family:var(--sans); font-size:.72rem; font-weight:800; letter-spacing:.2em; color:#fff; margin-bottom:1.1rem}
.footer-grid a{display:block; color:var(--muted); font-size:.92rem; padding:.28rem 0; transition:color .2s}
.footer-grid a:hover{color:var(--blue-lit)}
.footer-area{line-height:1.7}
.footer-base{
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  margin-top:3rem; padding-top:1.6rem; border-top:1px solid var(--line);
  font-size:.78rem; color:#5c657a;
}

/* ==========================================================
   MOBILE ACTION BAR
   ========================================================== */
.mobile-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:99; display:none; gap:.6rem;
  padding:.7rem .9rem calc(.7rem + env(safe-area-inset-bottom));
  background:rgba(5,6,10,.82); backdrop-filter:blur(18px); border-top:1px solid var(--line);
}
.mobile-bar a{
  flex:1; text-align:center; padding:.95rem; border-radius:999px; font-weight:800; font-size:.95rem;
}
.mb-call{background:linear-gradient(100deg,var(--blue-lit),#6f7ff0 55%,var(--blue)); color:#0b1233}
.mb-text{border:1px solid var(--line-strong); color:#fff}

/* ==========================================================
   RESPONSIVE
   ========================================================== */
@media (max-width:1080px){
  .lab-grid{grid-template-columns:1fr}
  .cards{grid-template-columns:repeat(2,1fr)}
  .card.feature{grid-column:span 2}
  .quotes{grid-template-columns:1fr; max-width:640px}
  .quote-grid{grid-template-columns:1fr}
  .band-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:960px){
  .nav-links{
    position:fixed; inset:0 0 0 auto; width:min(86vw,360px);
    flex-direction:column; align-items:stretch; justify-content:center; gap:.4rem;
    padding:2rem; background:rgba(6,8,14,.97); backdrop-filter:blur(20px);
    border-left:1px solid var(--line);
    transform:translateX(100%); transition:transform .45s cubic-bezier(.2,.7,.2,1);
  }
  .nav-links.open{transform:none}
  .nav-links a{font-size:1.4rem; font-family:var(--display); letter-spacing:.04em; text-transform:uppercase; padding:.8rem 1rem}
  .nav-cta{text-align:center; margin-top:1rem}
  .nav-call{display:none}
  .menu-toggle{display:flex; z-index:101}
  .steps, .ba-grid, .area-list, .tiers{grid-template-columns:1fr}
  .ba-grid{gap:2rem}
  .ba-stage{aspect-ratio:4/5}
  .mobile-bar{display:flex}
}
@media (max-width:680px){
  body{font-size:16px}
  .hero{min-height:96svh}
  .hero-inner{padding-top:8.75rem}
  .hero-stats{grid-template-columns:repeat(2,1fr)}
  .cards{grid-template-columns:1fr}
  .card.feature{grid-column:span 1}
  .quote-form{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .sim-window{aspect-ratio:4/3}
  .sim-ticks{flex-wrap:wrap; justify-content:center}
  .crow{flex-direction:column; gap:.15rem}
  .crow-k{width:auto}
  .brand img{height:68px}
  .nav.stuck .brand img{height:54px}
  .hero-trust{font-size:.8rem; margin-top:1.2rem}

  /* Hero on a phone: the eyebrow reads as one tight line, the CTAs sit
     side by side instead of stacking into two full-width slabs, and the
     stat grid stays above the fold. */
  .eyebrow-long{display:none}
  .eyebrow{font-size:.68rem; padding:.45rem .9rem}
  .hero-cta{gap:.6rem; flex-wrap:nowrap}
  .hero-cta .btn{flex:1; padding:.95rem .6rem; font-size:.88rem; white-space:nowrap}
  .hero-sub{font-size:1rem; line-height:1.55}
  .sec-head{margin-bottom:2.2rem}
  .tiers-head{margin-top:3.5rem}
  .quote-tip{padding:1.3rem 1.4rem}
  .gr{padding:1.1rem 1.2rem; gap:1.1rem}
  .gr-actions{width:100%}
  .gr-actions .btn{flex:1}
  .footer-base{flex-direction:column; gap:.4rem}
  .steps{gap:2.4rem}
  .step h3{padding-top:1.1rem}
  .band-badges{gap:.5rem}
  .band-badges span{font-size:.68rem; padding:.45rem .8rem}
  .tiers-note{margin-top:1.6rem}
  .area-copy{margin-top:1.6rem}
  .work-cta{margin-top:2rem}
  .ba figcaption{margin-top:.85rem}
}