/* ==========================================================================
   TMC Media, fluid video forward design system
   Dark base, motion led, social first. Everything scales with the viewport.
   Concentric corners: inner radius = outer radius minus the gap (border included).
   ========================================================================== */

:root{
  /* ink and ground, matte black */
  --bg:#000000;
  --bg-2:#050506;
  --bg-3:#0a0b0c;
  --ink:#f2f5f3;
  --ink-soft:#9aa39d;
  --ink-mute:#5f6a68;

  /* brand */
  --green:#50c878;
  --green-2:#3aa960;
  --green-deep:#041a0d;
  --green-glow:rgba(80,200,120,.26);
  --green-halo:rgba(80,200,120,.11);

  /* surfaces, kept very low so black stays black */
  --wa:255,255,255;
  --panel:rgba(var(--wa),.028);
  --panel-2:rgba(var(--wa),.05);
  --line:rgba(var(--wa),.075);
  --line-2:rgba(var(--wa),.15);
  --blur:blur(26px) saturate(1.7);

  /* geometry, concentric backbone */
  --r:26px;            /* outer */
  --gap:10px;          /* padding + border between shells */
  --r-in:16px;         /* = --r minus --gap */
  --r-sm:14px;
  --r-pill:999px;

  /* fluid rhythm */
  --wrap:1280px;
  --gut:clamp(18px,4vw,34px);
  --sec-y:clamp(56px,9vw,132px);

  /* fluid type */
  --t-mega:clamp(2.6rem,8.2vw,7.2rem);
  --t-h1:clamp(2.2rem,6.2vw,5rem);
  --t-h2:clamp(1.8rem,4.3vw,3.4rem);
  --t-h3:clamp(1.15rem,1.9vw,1.6rem);
  --t-lede:clamp(1.02rem,1.5vw,1.35rem);
  --t-body:clamp(.95rem,1.05vw,1.06rem);
  --t-sm:clamp(.8rem,.95vw,.92rem);
  --t-eyebrow:clamp(.68rem,.82vw,.78rem);

  --bar-h:clamp(62px,7vw,76px);
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;

  color-scheme:dark;
}

*,*::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;background:var(--bg);color:var(--ink);
  font:400 var(--t-body)/1.65 var(--font);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,video,svg,canvas{max-width:100%;display:block}
img,video{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4{margin:0;line-height:1.04;letter-spacing:-.028em;font-weight:700;text-wrap:balance}
h1{font-size:var(--t-h1)}
h2{font-size:var(--t-h2)}
h3{font-size:var(--t-h3);letter-spacing:-.018em;line-height:1.2}
p{margin:0;text-wrap:pretty}
ul{margin:0;padding:0;list-style:none}
::selection{background:var(--green);color:#04120a}
:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:6px}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut)}
.wrap-n{width:100%;max-width:820px;margin:0 auto;padding-inline:var(--gut)}
section{position:relative;overflow-x:clip}
.sec{padding-block:var(--sec-y)}
.sec-line{border-top:1px solid var(--line)}

/* ---------- shared bits ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-size:var(--t-eyebrow);font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--green);margin-bottom:clamp(14px,1.6vw,20px);
}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--green);opacity:.8}
.lede{font-size:var(--t-lede);color:var(--ink-soft);line-height:1.62;max-width:62ch}
.sec-head{max-width:760px;margin-bottom:clamp(30px,4.2vw,58px)}
.sec-head.mid{margin-inline:auto;text-align:center}
.sec-head.mid .eyebrow{justify-content:center}
.sec-head p{margin-top:clamp(12px,1.6vw,18px)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:clamp(13px,1.5vw,17px) clamp(22px,2.6vw,32px);
  border-radius:var(--r-pill);font-weight:600;font-size:var(--t-sm);
  letter-spacing:.01em;border:1px solid transparent;
  transition:transform .25s cubic-bezier(.2,.8,.2,1),background .25s,border-color .25s,box-shadow .25s;
  will-change:transform;
}
.btn-p{background:var(--green);color:#04140b;box-shadow:0 10px 34px -10px var(--green-glow)}
.btn-p:hover{transform:translateY(-2px);background:#5fd685;box-shadow:0 16px 44px -12px var(--green-glow)}
.btn-s{background:rgba(var(--wa),.06);border-color:var(--line-2);color:var(--ink);backdrop-filter:var(--blur)}
.btn-s:hover{transform:translateY(-2px);background:rgba(var(--wa),.11);border-color:rgba(var(--wa),.3)}
.cta-row{display:flex;flex-wrap:wrap;gap:clamp(10px,1.2vw,14px);margin-top:clamp(24px,3vw,38px)}
.cta-row.mid{justify-content:center}

.panel{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(20px,2.6vw,32px);backdrop-filter:var(--blur);
  transition:border-color .3s,background .3s,transform .3s;
}
.panel:hover{border-color:var(--line-2);background:var(--panel-2)}
.panel h3{margin-bottom:10px}
.panel p{color:var(--ink-soft);font-size:var(--t-sm)}

.list{margin-top:16px;display:grid;gap:9px}
.list li{position:relative;padding-left:22px;color:var(--ink-soft);font-size:var(--t-sm);line-height:1.55}
.list li::before{
  content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;
  background:var(--green);opacity:.85;
}

.grid{display:grid;gap:clamp(14px,1.8vw,22px)}
.g2{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr))}
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:clamp(28px,4.5vw,72px);align-items:center}

/* ==========================================================================
   HEADER
   ========================================================================== */
.bar{
  position:fixed;inset-block-start:0;inset-inline:0;z-index:90;
  height:var(--bar-h);display:flex;align-items:center;
  background:rgba(7,8,10,.62);backdrop-filter:var(--blur);
  border-bottom:1px solid transparent;transition:background .3s,border-color .3s;
}
.bar.stuck{background:rgba(7,8,10,.9);border-bottom-color:var(--line)}
.bar-in{
  display:flex;align-items:center;justify-content:space-between;gap:clamp(12px,2vw,26px);
  width:100%;max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut);
}
.brand{display:flex;align-items:center;flex:0 0 auto}
.brand img{height:clamp(24px,2.6vw,32px);width:auto}
.nav{display:flex;align-items:center;gap:clamp(4px,1.4vw,10px);margin-inline-start:auto}
.nav a{
  padding:9px 14px;border-radius:var(--r-pill);font-size:var(--t-sm);font-weight:500;
  color:var(--ink-soft);transition:color .2s,background .2s;white-space:nowrap;
}
.nav a:hover,.nav a[aria-current=page]{color:var(--ink);background:rgba(var(--wa),.07)}
.nav>.bar-cta{display:none}
.nav>.bar-cta:hover{background:#5fd685}
.bar-cta{
  flex:0 0 auto;background:var(--green);color:#04140b;padding:10px 20px;
  border-radius:var(--r-pill);font-size:var(--t-sm);font-weight:600;white-space:nowrap;
  transition:transform .25s,background .25s;
}
.bar-cta:hover{transform:translateY(-1px);background:#5fd685}
.burger{display:none;width:44px;height:44px;border-radius:12px;position:relative;flex:0 0 auto;margin-inline-start:auto}
.burger span{
  position:absolute;left:11px;width:22px;height:2px;background:var(--ink);border-radius:2px;
  transition:transform .3s,opacity .2s;
}
.burger span:nth-child(1){top:15px}
.burger span:nth-child(2){top:21px}
.burger span:nth-child(3){top:27px}
.burger[aria-expanded=true] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded=true] span:nth-child(2){opacity:0}
.burger[aria-expanded=true] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

@media(max-width:900px){
  .burger{display:block}
  .bar-in>.bar-cta{display:none}
  .nav>.bar-cta{display:block}
  .nav{
    position:fixed;inset-block-start:var(--bar-h);inset-inline:0;
    flex-direction:column;align-items:stretch;gap:4px;
    background:rgba(7,8,10,.97);backdrop-filter:var(--blur);
    padding:16px var(--gut) 26px;border-bottom:1px solid var(--line);
    transform:translateY(-12px);opacity:0;pointer-events:none;transition:.28s ease;margin:0;
  }
  .nav.on{transform:none;opacity:1;pointer-events:auto}
  .nav a{padding:14px 16px;font-size:1rem;border-radius:var(--r-sm)}
  .nav .bar-cta{margin-top:10px;text-align:center;padding:15px}
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative;min-height:clamp(560px,92vh,1000px);display:flex;align-items:center;
  padding-block:calc(var(--bar-h) + clamp(44px,6vw,74px)) clamp(48px,7vw,90px);
  overflow:hidden;isolation:isolate;
}
.hero-bg{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero-bg video,.hero-bg img{
  width:100%;height:100%;object-fit:cover;
  filter:saturate(1.05) contrast(1.04);
  transform:scale(1.04);
}
.hero-bg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(to right,rgba(7,8,10,.96) 0%,rgba(7,8,10,.82) 38%,rgba(7,8,10,.42) 68%,rgba(7,8,10,.68) 100%),
    linear-gradient(to bottom,rgba(7,8,10,.8) 0%,rgba(7,8,10,.12) 32%,rgba(7,8,10,.55) 76%,var(--bg) 100%);
}
.hero-grain{
  position:absolute;inset:0;z-index:-1;opacity:.28;pointer-events:none;
  background-image:radial-gradient(rgba(var(--wa),.07) 1px,transparent 1px);
  background-size:3px 3px;mix-blend-mode:overlay;
}
.hero .wrap{position:relative;z-index:2}
.hero h1{font-size:var(--t-mega);max-width:16ch}
.hero h1 em{font-style:normal;color:var(--green);display:block}
.hero .lede{margin-top:clamp(18px,2.4vw,28px);max-width:54ch}
.hero-flag{
  display:inline-flex;align-items:center;gap:10px;padding:8px 16px 8px 10px;
  border-radius:var(--r-pill);border:1px solid var(--line-2);
  background:rgba(var(--wa),.06);backdrop-filter:var(--blur);
  font-size:var(--t-sm);color:var(--ink-soft);margin-bottom:clamp(18px,2.2vw,26px);
}
.hero-flag b{color:var(--ink);font-weight:600}
.hero-flag .dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px var(--green-glow);flex:0 0 auto}

/* scroll cue */
.scroller{
  position:absolute;inset-block-end:clamp(18px,3vw,34px);left:50%;transform:translateX(-50%);
  z-index:3;display:flex;flex-direction:column;align-items:center;gap:8px;
  font-size:var(--t-eyebrow);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-mute);
}
.scroller i{display:block;width:1px;height:36px;background:linear-gradient(var(--green),transparent);animation:cue 2.1s ease-in-out infinite}
@keyframes cue{0%,100%{opacity:.25;transform:scaleY(.5);transform-origin:top}50%{opacity:1;transform:scaleY(1);transform-origin:top}}
@media(max-width:760px){.scroller{display:none}}

/* ==========================================================================
   STATS
   ========================================================================== */
.stats{
  display:grid;gap:clamp(12px,1.6vw,18px);margin-top:clamp(32px,4.4vw,56px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,168px),1fr));
}
.stat{
  border:1px solid var(--line);border-radius:var(--r);padding:clamp(16px,2vw,24px);
  background:var(--panel);backdrop-filter:var(--blur);
  transition:border-color .3s,transform .3s,background .3s;
}
.stat:hover{border-color:var(--green);transform:translateY(-3px);background:var(--panel-2)}
.stat b{
  display:block;font-size:clamp(1.75rem,3.5vw,2.9rem);font-weight:700;letter-spacing:-.035em;
  line-height:1;color:var(--ink);font-variant-numeric:tabular-nums;
}
.stat span{display:block;margin-top:9px;font-size:var(--t-sm);color:var(--ink-mute);line-height:1.35}
.stat .up{color:var(--green);font-size:var(--t-sm);font-weight:600}

/* ==========================================================================
   LOGO MARQUEE
   ========================================================================== */
.marq{
  position:relative;overflow:hidden;padding-block:clamp(20px,2.6vw,30px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.marq-row{display:flex;width:max-content;gap:clamp(30px,5vw,74px);align-items:center;will-change:transform}
.marq-row.a{animation:slide 42s linear infinite}
.marq-row.b{animation:slide 56s linear infinite reverse;margin-top:clamp(16px,2vw,24px)}
.marq:hover .marq-row{animation-play-state:paused}
@keyframes slide{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media(prefers-reduced-motion:reduce){.marq-row{animation:none!important}}
.marq img{
  /* --s is the per logo optical scale set in build.js. A single flat height
     made the wide bold marks dwarf the delicate ones. */
  height:calc(clamp(24px,3.1vw,40px) * var(--s,1));width:auto;object-fit:contain;
  /* knockout, not silhouette. brightness(0) invert(1) flattened every mark to a
     solid white blob, so any logo with its own filled background (De Bortoli's
     ellipse, KPMG's boxes) became a slab. grayscale then invert keeps the
     internal detail and drops a light background to black, which is the page. */
  filter:grayscale(1) invert(1);opacity:.5;
  transition:opacity .3s,filter .3s,transform .3s;flex:0 0 auto;
}
.marq a:hover img{opacity:1;transform:scale(1.06)}
.marq .wordmark{
  flex:0 0 auto;font-weight:700;letter-spacing:-.02em;white-space:nowrap;
  font-size:clamp(.95rem,1.7vw,1.35rem);color:var(--ink);opacity:.4;transition:opacity .3s;
}
.marq .wordmark:hover{opacity:1}

/* ==========================================================================
   WORK TILES, autoplay muted, click to unmute and restart
   ========================================================================== */
.work-grid{
  display:grid;gap:clamp(14px,1.8vw,22px);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,352px),1fr));
}
.tile{
  position:relative;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--line);background:var(--bg-2);
  transition:border-color .35s,transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s;
  display:flex;flex-direction:column;
}
.tile:hover{border-color:var(--line-2);transform:translateY(-4px);box-shadow:0 22px 60px -28px rgba(0,0,0,.9)}
.tile.playing{border-color:var(--green);box-shadow:0 0 0 1px var(--green),0 24px 70px -26px var(--green-glow)}
.tile-shot{
  position:relative;aspect-ratio:16/9;overflow:hidden;background:#000;
  border-radius:calc(var(--r) - 1px) calc(var(--r) - 1px) 0 0;
}
.tile-shot video,.tile-shot img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.tile-shot video{opacity:0;transition:opacity .5s}
.tile-shot video.ready{opacity:1}
.tile-badge{
  position:absolute;inset-block-start:12px;inset-inline-start:12px;z-index:3;
  display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border-radius:var(--r-pill);
  background:rgba(7,8,10,.72);backdrop-filter:blur(10px);border:1px solid rgba(var(--wa),.14);
  font-size:.68rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);
}
.tile-sound{
  position:absolute;inset-block-end:12px;inset-inline-end:12px;z-index:4;
  width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  background:rgba(7,8,10,.7);backdrop-filter:blur(10px);border:1px solid rgba(var(--wa),.16);
  transition:background .25s,transform .25s,border-color .25s;
}
.tile:hover .tile-sound{background:var(--green);border-color:var(--green);transform:scale(1.06)}
.tile:hover .tile-sound svg{stroke:#04140b}
.tile-sound svg{width:17px;height:17px;stroke:var(--ink);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.tile-b{padding:clamp(15px,1.8vw,20px);display:flex;flex-direction:column;gap:5px;flex:1}
.tile-b .who{font-size:var(--t-eyebrow);letter-spacing:.13em;text-transform:uppercase;color:var(--green);font-weight:600}
.tile-b h3{font-size:clamp(1rem,1.35vw,1.2rem)}
.tile-b .role{font-size:var(--t-sm);color:var(--ink-mute);line-height:1.5}
.tile-live{
  position:absolute;inset-block-start:12px;inset-inline-end:12px;z-index:3;
  display:none;align-items:center;gap:6px;padding:5px 10px;border-radius:var(--r-pill);
  background:rgba(80,200,120,.18);border:1px solid var(--green);
  font-size:.64rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--green);
}
.tile.playing .tile-live{display:inline-flex}
.tile-live i{width:6px;height:6px;border-radius:50%;background:var(--green);animation:blip 1.4s ease-in-out infinite}
@keyframes blip{0%,100%{opacity:1}50%{opacity:.25}}

/* ==========================================================================
   SOCIAL PHONES, vertical video cutouts
   ========================================================================== */
.phones{
  display:flex;gap:clamp(12px,2vw,26px);justify-content:center;align-items:flex-end;
  flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
  padding-block:clamp(16px,2.4vw,30px);padding-inline:var(--gut);
  scroll-snap-type:x mandatory;max-width:100%;
}
.phones::-webkit-scrollbar{display:none}
.phone{
  position:relative;flex:0 0 auto;scroll-snap-align:center;
  width:clamp(178px,19vw,250px);aspect-ratio:9/19.5;
  border-radius:clamp(26px,3vw,38px);
  background:linear-gradient(160deg,#2b3038,#0d0f13 42%,#1b1f25);
  padding:clamp(6px,.7vw,9px);
  box-shadow:0 30px 70px -28px rgba(0,0,0,.95),0 0 0 1px rgba(var(--wa),.1),inset 0 1px 0 rgba(var(--wa),.16);
  transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s;
}
.phone:hover{transform:translateY(-10px) scale(1.015);box-shadow:0 44px 90px -30px rgba(0,0,0,1),0 0 0 1px var(--green)}
.phone.tilt-l{transform:rotate(-4deg) translateY(14px)}
.phone.tilt-r{transform:rotate(4deg) translateY(14px)}
.phone.tilt-l:hover,.phone.tilt-r:hover{transform:rotate(0) translateY(-10px) scale(1.015)}
.phone-screen{
  position:relative;width:100%;height:100%;overflow:hidden;background:#000;
  /* concentric: outer radius minus the padding gap */
  border-radius:calc(clamp(26px,3vw,38px) - clamp(6px,.7vw,9px));
}
.phone-screen video,.phone-screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.phone-notch{
  position:absolute;inset-block-start:clamp(8px,1vw,12px);left:50%;transform:translateX(-50%);z-index:4;
  width:32%;height:clamp(16px,1.8vw,22px);border-radius:var(--r-pill);background:#05060a;
}
.phone-ui{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(10px,1.2vw,14px);
  background:linear-gradient(to top,rgba(0,0,0,.78) 0%,transparent 42%,transparent 74%,rgba(0,0,0,.42) 100%)}
.phone-handle{display:flex;align-items:center;gap:6px;font-size:clamp(.62rem,.8vw,.74rem);font-weight:600;color:#fff}
.phone-handle .av{width:20px;height:20px;border-radius:50%;background:linear-gradient(135deg,var(--green),#2a7f4c);flex:0 0 auto}
.phone-cap{margin-top:5px;font-size:clamp(.58rem,.74vw,.68rem);color:rgba(255,255,255,.78);line-height:1.4}
.phone-rail{
  position:absolute;inset-inline-end:clamp(8px,1vw,12px);inset-block-end:clamp(46px,5vw,64px);z-index:4;
  display:grid;gap:clamp(10px,1.2vw,15px);justify-items:center;
}
.phone-rail span{display:grid;gap:3px;justify-items:center;font-size:clamp(.5rem,.64vw,.58rem);color:#fff;opacity:.92}
.phone-rail svg{width:clamp(16px,1.9vw,22px);height:clamp(16px,1.9vw,22px);fill:#fff;filter:drop-shadow(0 1px 3px rgba(0,0,0,.6))}

/* verified + platform chips */
.chips{display:flex;flex-wrap:wrap;gap:clamp(8px,1vw,12px);margin-top:clamp(22px,2.8vw,32px)}
.chip{
  display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:var(--r-pill);
  border:1px solid var(--line);background:var(--panel);backdrop-filter:var(--blur);
  font-size:var(--t-sm);color:var(--ink-soft);font-weight:500;transition:border-color .3s,color .3s;
}
.chip:hover{border-color:var(--line-2);color:var(--ink)}
.chip svg{width:16px;height:16px;flex:0 0 auto}
.chip .vf{color:#1d9bf0}
.chip .mt{color:#0866ff}

/* ==========================================================================
   REVIEWS
   ========================================================================== */
.rev-head{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(14px,2vw,26px);margin-bottom:clamp(26px,3.4vw,44px)}
.rev-score{display:flex;align-items:center;gap:14px}
.rev-score b{font-size:clamp(2.2rem,4.4vw,3.4rem);line-height:1;letter-spacing:-.04em}
.stars{display:flex;gap:3px}
.stars svg{width:clamp(15px,1.7vw,19px);height:clamp(15px,1.7vw,19px);fill:#ffc247}
.rev-meta{font-size:var(--t-sm);color:var(--ink-mute);line-height:1.5}
.rev-wall{
  columns:3 300px;column-gap:clamp(14px,1.8vw,20px);
}
.rev{
  break-inside:avoid;margin-bottom:clamp(14px,1.8vw,20px);
  border:1px solid var(--line);border-radius:var(--r);padding:clamp(18px,2.2vw,26px);
  background:var(--panel);backdrop-filter:var(--blur);
  transition:border-color .3s,background .3s,transform .3s;
}
.rev:hover{border-color:var(--line-2);background:var(--panel-2);transform:translateY(-2px)}
.rev .stars{margin-bottom:12px}
.rev p{font-size:var(--t-sm);color:var(--ink-soft);line-height:1.62}
.rev footer{margin-top:14px;display:flex;align-items:center;gap:10px;font-size:var(--t-sm)}
.rev footer .av{
  width:32px;height:32px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--green),#2a7f4c);color:#04140b;font-weight:700;font-size:.8rem;
}
.rev footer b{font-weight:600;display:block;line-height:1.3}
.rev footer span{color:var(--ink-mute);font-size:.8em}

/* ==========================================================================
   TIMELINE
   ========================================================================== */
.tl{display:grid;gap:clamp(16px,2vw,22px);margin-top:clamp(26px,3.4vw,44px)}
.tl-i{
  position:relative;padding-left:clamp(26px,3vw,40px);
  border-left:1px solid var(--line);padding-bottom:clamp(16px,2vw,22px);
}
.tl-i::before{
  content:"";position:absolute;left:-5px;top:6px;width:9px;height:9px;border-radius:50%;
  background:var(--green);box-shadow:0 0 0 4px var(--green-glow);
}
.tl-y{font-size:var(--t-eyebrow);letter-spacing:.14em;text-transform:uppercase;color:var(--green);font-weight:600;margin-bottom:7px}
.tl-i h3{margin-bottom:8px}
.tl-i p{color:var(--ink-soft);font-size:var(--t-sm)}

/* ==========================================================================
   BLOG
   ========================================================================== */
.post-grid{display:grid;gap:clamp(16px,2.2vw,26px);grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr))}
.post{
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  border:1px solid var(--line);border-radius:var(--r);background:var(--bg-2);
  transition:border-color .35s,transform .35s,box-shadow .35s;
}
.post:hover{border-color:var(--green);transform:translateY(-5px);box-shadow:0 26px 64px -30px rgba(0,0,0,.9)}
.post-shot{
  position:relative;aspect-ratio:16/10;overflow:hidden;background:linear-gradient(150deg,var(--bg-3),#06070a);
  display:grid;place-items:center;
}
.post-shot img,.post-shot video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.post-shot .cut{
  position:relative;z-index:2;height:86%;width:auto;object-fit:contain;
  filter:drop-shadow(0 26px 44px rgba(0,0,0,.75));
  transition:transform .6s cubic-bezier(.2,.8,.2,1);
}
.post:hover .post-shot .cut{transform:translateY(-8px) scale(1.04)}
.post-shot::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:radial-gradient(120% 80% at 50% 12%,var(--green-glow),transparent 62%);
  opacity:.55;
}
.post-b{padding:clamp(18px,2.2vw,26px);display:flex;flex-direction:column;gap:9px;flex:1}
.post-tag{
  align-self:flex-start;font-size:var(--t-eyebrow);letter-spacing:.13em;text-transform:uppercase;
  color:var(--green);font-weight:600;
}
.post-b h3{font-size:clamp(1.05rem,1.5vw,1.32rem)}
.post-b p{font-size:var(--t-sm);color:var(--ink-mute);line-height:1.55}
.post-b .more{margin-top:auto;padding-top:12px;font-size:var(--t-sm);font-weight:600;color:var(--green);display:inline-flex;align-items:center;gap:7px}
.post:hover .more{gap:11px}
.post-b .more{transition:gap .3s}

/* article body */
.article{max-width:760px;margin:0 auto}
.article h2{font-size:clamp(1.5rem,3vw,2.2rem);margin-top:clamp(34px,4.2vw,56px);margin-bottom:16px}
.article h3{margin-top:clamp(24px,3vw,36px);margin-bottom:12px}
.article p{margin-bottom:18px;color:var(--ink-soft);font-size:var(--t-lede);line-height:1.72}
.article ul{margin:0 0 22px}
.article li{position:relative;padding-left:24px;margin-bottom:10px;color:var(--ink-soft);font-size:var(--t-lede);line-height:1.62}
.article li::before{content:"";position:absolute;left:0;top:.66em;width:7px;height:7px;border-radius:50%;background:var(--green)}
.article .pull{
  margin:clamp(30px,4vw,48px) 0;padding:clamp(22px,3vw,34px);
  border-left:2px solid var(--green);background:var(--panel);border-radius:0 var(--r) var(--r) 0;
}
.article .pull p{margin:0;color:var(--ink);font-size:clamp(1.1rem,1.8vw,1.5rem);font-weight:500;line-height:1.45;letter-spacing:-.015em}
.article figure{margin:clamp(28px,3.6vw,44px) 0}
.article figure img,.article figure video{width:100%;border-radius:var(--r);border:1px solid var(--line)}
.article figcaption{margin-top:12px;font-size:var(--t-sm);color:var(--ink-mute);text-align:center}
.meta-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center;font-size:var(--t-sm);color:var(--ink-mute);margin-top:18px}
.meta-row .dot{width:4px;height:4px;border-radius:50%;background:var(--ink-mute)}

/* ==========================================================================
   PRICING
   ========================================================================== */
.price{border:1px solid var(--line);border-radius:var(--r);padding:clamp(24px,3.4vw,48px);background:var(--panel);backdrop-filter:var(--blur)}
.amt{font-size:clamp(2.4rem,5.4vw,4rem);font-weight:700;letter-spacing:-.04em;line-height:1;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.amt small{font-size:var(--t-sm);font-weight:500;color:var(--ink-mute);letter-spacing:0}

/* ==========================================================================
   FORM
   ========================================================================== */
.form{display:grid;gap:clamp(12px,1.5vw,16px)}
.field{display:grid;gap:7px}
.field label{font-size:var(--t-sm);font-weight:500;color:var(--ink-soft)}
.field input,.field textarea,.field select{
  width:100%;padding:clamp(12px,1.4vw,15px) clamp(14px,1.6vw,17px);
  border-radius:var(--r-sm);border:1px solid var(--line);background:rgba(var(--wa),.04);
  color:var(--ink);font:inherit;font-size:var(--t-sm);transition:border-color .25s,background .25s;
}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;border-color:var(--green);background:rgba(var(--wa),.07);
}
.field textarea{resize:vertical;min-height:120px}
.form-note{font-size:var(--t-sm);color:var(--ink-mute)}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.foot{border-top:1px solid var(--line);padding-block:clamp(40px,5.5vw,74px) clamp(24px,3vw,36px);background:var(--bg-2)}
.foot-g{display:grid;gap:clamp(26px,3.4vw,44px);grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));margin-bottom:clamp(30px,3.6vw,48px)}
.foot-g img{height:clamp(24px,2.6vw,30px);width:auto;margin-bottom:16px}
.foot-g p{font-size:var(--t-sm);color:var(--ink-mute);max-width:38ch;line-height:1.6}
.foot-g h4{font-size:var(--t-sm);letter-spacing:.1em;text-transform:uppercase;color:var(--ink);margin-bottom:14px;font-weight:600}
.foot-g ul{display:grid;gap:9px}
.foot-g ul a{font-size:var(--t-sm);color:var(--ink-mute);transition:color .2s}
.foot-g ul a:hover{color:var(--green)}
.foot-b{
  border-top:1px solid var(--line);padding-top:clamp(18px,2.2vw,26px);
  display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;
  font-size:var(--t-sm);color:var(--ink-mute);
}

/* ==========================================================================
   REVEAL ON SCROLL
   ========================================================================== */
/* Only ever hide content when JS is actually there to bring it back. With JS
   off, or if the observer never fires, the page must still read completely. */
.js .rv{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1)}
.js .rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .js .rv{opacity:1;transform:none;transition:none}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ==========================================================================
   CHAT
   ========================================================================== */
.chat-fab{
  position:fixed;inset-block-end:clamp(16px,2.4vw,26px);inset-inline-end:clamp(16px,2.4vw,26px);z-index:95;
  width:clamp(54px,5.4vw,62px);height:clamp(54px,5.4vw,62px);border-radius:50%;
  background:var(--green);color:#04140b;display:grid;place-items:center;
  box-shadow:0 14px 40px -12px var(--green-glow),0 0 0 1px rgba(var(--wa),.08);
  transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s;
}
.chat-fab:hover{transform:scale(1.07) translateY(-2px)}
.chat-fab svg{width:25px;height:25px;stroke:#04140b;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.chat-fab .pip{
  position:absolute;top:2px;right:2px;width:13px;height:13px;border-radius:50%;
  background:#ff4d4d;border:2px solid var(--bg);
}
.chat-fab.open .pip{display:none}
.chat-panel{
  position:fixed;inset-block-end:calc(clamp(54px,5.4vw,62px) + clamp(26px,3.4vw,38px));
  inset-inline-end:clamp(16px,2.4vw,26px);z-index:96;
  width:min(calc(100vw - 32px),382px);height:min(72vh,560px);
  display:flex;flex-direction:column;overflow:hidden;
  border-radius:var(--r);border:1px solid var(--line-2);
  background:rgba(11,13,16,.96);backdrop-filter:var(--blur);
  box-shadow:0 34px 80px -30px rgba(0,0,0,1);
  opacity:0;transform:translateY(14px) scale(.97);pointer-events:none;
  transition:opacity .3s,transform .3s cubic-bezier(.2,.8,.2,1);
}
.chat-panel.on{opacity:1;transform:none;pointer-events:auto}
.chat-top{
  display:flex;align-items:center;gap:11px;padding:15px 17px;border-bottom:1px solid var(--line);flex:0 0 auto;
}
.chat-top .av{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--green),#2a7f4c);display:grid;place-items:center;color:#04140b;font-weight:700;font-size:.8rem;flex:0 0 auto}
.chat-top b{display:block;font-size:.92rem;line-height:1.25}
.chat-top span{font-size:.74rem;color:var(--green);display:flex;align-items:center;gap:5px}
.chat-top span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green)}
.chat-x{margin-left:auto;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:var(--ink-mute);transition:background .2s,color .2s}
.chat-x:hover{background:rgba(var(--wa),.08);color:var(--ink)}
.chat-log{flex:1;overflow-y:auto;padding:17px;display:flex;flex-direction:column;gap:11px;scrollbar-width:thin}
.msg{max-width:84%;padding:11px 15px;border-radius:var(--r-in);font-size:.88rem;line-height:1.52;white-space:pre-wrap}
.msg.bot{background:rgba(var(--wa),.07);border:1px solid var(--line);border-bottom-left-radius:6px;align-self:flex-start;color:var(--ink-soft)}
.msg.me{background:var(--green);color:#04140b;border-bottom-right-radius:6px;align-self:flex-end;font-weight:500}
.msg.typing{display:flex;gap:5px;align-items:center;padding:15px}
.msg.typing i{width:7px;height:7px;border-radius:50%;background:var(--ink-mute);animation:dot 1.3s ease-in-out infinite}
.msg.typing i:nth-child(2){animation-delay:.18s}
.msg.typing i:nth-child(3){animation-delay:.36s}
@keyframes dot{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}
.chat-quick{display:flex;flex-wrap:wrap;gap:7px;padding:0 17px 12px}
.chat-quick button{
  padding:8px 13px;border-radius:var(--r-pill);border:1px solid var(--line-2);
  background:rgba(var(--wa),.05);font-size:.78rem;color:var(--ink-soft);transition:.2s;
}
.chat-quick button:hover{border-color:var(--green);color:var(--ink);background:rgba(80,200,120,.1)}
.chat-in{display:flex;gap:9px;padding:13px 15px;border-top:1px solid var(--line);flex:0 0 auto}
.chat-in input{
  flex:1;padding:11px 15px;border-radius:var(--r-pill);border:1px solid var(--line);
  background:rgba(var(--wa),.05);color:var(--ink);font:inherit;font-size:.88rem;
}
.chat-in input:focus{outline:none;border-color:var(--green)}
.chat-in button{
  width:40px;height:40px;border-radius:50%;background:var(--green);display:grid;place-items:center;flex:0 0 auto;
  transition:transform .2s;
}
.chat-in button:hover{transform:scale(1.07)}
.chat-in button svg{width:17px;height:17px;stroke:#04140b;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

@media(max-width:520px){
  .chat-panel{inset-inline:12px;width:auto;height:min(76vh,520px)}
}

/* ==========================================================================
   NARROW SCREEN TRIMS
   ========================================================================== */
@media(max-width:760px){
  .rev-wall{columns:1}
  .hero{min-height:auto;padding-block:calc(var(--bar-h) + 44px) 56px}
  .phone.tilt-l,.phone.tilt-r{transform:none}
}
@media(max-width:420px){
  .stats{grid-template-columns:repeat(2,1fr)}
}

/* ==========================================================================
   GREEN GLOW FIELD
   Black stays black. Light comes from a few placed halos, never a flat lift.
   ========================================================================== */
.glow{position:absolute;border-radius:50%;pointer-events:none;z-index:0;filter:blur(70px);opacity:.5}
.glow-a{width:min(52vw,620px);aspect-ratio:1;background:var(--green-halo);inset-block-start:-14%;inset-inline-start:-10%}
.glow-b{width:min(40vw,460px);aspect-ratio:1;background:rgba(80,200,120,.07);inset-block-end:-18%;inset-inline-end:-8%}
.sec>.wrap,.sec>.wrap-n{position:relative;z-index:1}

/* a hairline of green light along a section edge */
.edge-lit{position:relative}
.edge-lit::before{
  content:"";position:absolute;inset-block-start:0;inset-inline:0;height:1px;z-index:2;
  background:linear-gradient(90deg,transparent,rgba(80,200,120,.55) 22%,rgba(80,200,120,.55) 78%,transparent);
  opacity:.5;
}

/* ==========================================================================
   LIQUID GLASS DOCK
   Ported from scalus.app. --dock-r and --dock-pad are the concentric pair:
   every rounded thing inside derives from them.
   ========================================================================== */
.dock{
  position:fixed;z-index:75;inset-inline:0;
  inset-block-end:calc(18px + env(safe-area-inset-bottom));
  display:flex;justify-content:center;padding-inline:10px;
  opacity:1;transition:opacity .3s ease;pointer-events:none;
}
.dock.hide{opacity:0;pointer-events:none}
.dock.hide .dock-in{transform:translateY(18px) scale(.96)}
.dock-in{
  --dock-r:27px;--dock-pad:7px;
  pointer-events:auto;position:relative;isolation:isolate;max-width:100%;
  display:flex;align-items:stretch;gap:1px;padding:var(--dock-pad);border-radius:var(--dock-r);
  background:linear-gradient(180deg,rgba(var(--wa),.11),rgba(var(--wa),.035));
  -webkit-backdrop-filter:blur(26px) saturate(200%) brightness(1.3);
          backdrop-filter:blur(26px) saturate(200%) brightness(1.3);
  box-shadow:
    0 26px 54px -14px rgba(0,0,0,.86),0 3px 12px rgba(0,0,0,.5),
    0 0 38px -14px var(--green-glow),
    inset 0 1px 0 rgba(var(--wa),.16),inset 0 -1px 0 rgba(var(--wa),.05);
  transform:translateY(0) scale(1);
  transition:transform .38s cubic-bezier(.2,.8,.2,1);
}
/* travelling rim light */
.dock-in::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;z-index:2;pointer-events:none;
  background:conic-gradient(from var(--rim),
    rgba(var(--wa),.55),rgba(var(--wa),.04) 18%,
    rgba(80,200,120,.5) 38%,rgba(var(--wa),.03) 55%,
    rgba(var(--wa),.45) 76%,rgba(var(--wa),.07) 90%,rgba(var(--wa),.55));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:dockRim 16s linear infinite;
}
@property --rim{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes dockRim{to{--rim:560deg}}
/* refractive edge: negative inset so it samples the raw page, not the panel */
.dock-lens{
  position:absolute;inset:-9px;border-radius:999px;padding:9px;z-index:1;pointer-events:none;opacity:.55;
  -webkit-backdrop-filter:blur(6px) saturate(2.8) brightness(1.4);
          backdrop-filter:blur(6px) saturate(2.8) brightness(1.4);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
.dock-edge{
  position:absolute;inset:-2px;border-radius:999px;padding:3px;z-index:2;pointer-events:none;
  -webkit-backdrop-filter:blur(.5px) saturate(3.6) brightness(1.55) contrast(1.35);
          backdrop-filter:blur(.5px) saturate(3.6) brightness(1.55) contrast(1.35);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
/* specular hotspot, position set from JS */
.dock-in::after{
  content:"";position:absolute;inset:0;border-radius:inherit;z-index:1;pointer-events:none;
  background:radial-gradient(130px 66px at var(--sx,28%) var(--sy,-10%),
    rgba(var(--wa),.2),rgba(var(--wa),.05) 45%,rgba(var(--wa),0) 72%);
}
/* sliding pill behind the current item */
.dock-pill{
  position:absolute;inset-block:var(--dock-pad);left:0;z-index:0;width:var(--w,0px);
  border-radius:calc(var(--dock-r) - var(--dock-pad));pointer-events:none;opacity:0;
  transform:translate3d(var(--x,0px),0,0);
  background:linear-gradient(180deg,rgba(80,200,120,.2),rgba(80,200,120,.07));
  box-shadow:inset 0 1px 0 rgba(var(--wa),.28),inset 0 -1px 0 rgba(0,0,0,.24),0 4px 14px rgba(0,0,0,.34);
  transition:transform .5s cubic-bezier(.34,1.35,.5,1),width .5s cubic-bezier(.34,1.35,.5,1),opacity .35s;
}
.dock.ready .dock-pill{opacity:1}
.dock-i{
  position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;min-width:64px;padding:8px 8px 7px;
  border-radius:calc(var(--dock-r) - var(--dock-pad));
  color:var(--ink-soft);-webkit-tap-highlight-color:transparent;
  transition:color .25s ease,transform .2s ease;
}
.dock-i:hover{color:var(--ink)}
.dock-i:active{transform:scale(.93)}
.dock-i.on{color:#fff}
.dock-i .ic{width:26px;height:26px;display:grid;place-items:center;flex:none}
.dock-i .ic svg{width:21px;height:21px;display:block;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.dock-i .lb{font-size:.64rem;font-weight:650;line-height:1;white-space:nowrap}
.dock-i:focus-visible{outline:2px solid var(--green);outline-offset:2px}
/* the action item carries the brand fill */
.dock-i.act .ic{background:var(--green);border-radius:9px;width:30px;height:30px}
.dock-i.act .ic svg{stroke:#04140b;width:17px;height:17px}
@media(max-width:460px){
  .dock-in{--dock-r:24px}
  .dock-i{min-width:56px;padding:7px 5px 6px}
  .dock-i .lb{font-size:.58rem}
}
/* the dock owns the bottom edge, so lift the chat launcher above it */
body:not([data-nodock]) .chat-fab{inset-block-end:calc(88px + env(safe-area-inset-bottom))}
body:not([data-nodock]) .chat-panel{inset-block-end:calc(158px + env(safe-area-inset-bottom))}
body:not([data-nodock]) .foot{padding-bottom:calc(96px + env(safe-area-inset-bottom))}

/* ==========================================================================
   FUTURISTIC MINIMAL TRIMS
   Less chrome, more air, light only where it means something.
   ========================================================================== */
.hero-bg::after{
  background:
    linear-gradient(to right,rgba(0,0,0,.97) 0%,rgba(0,0,0,.86) 38%,rgba(0,0,0,.46) 68%,rgba(0,0,0,.74) 100%),
    linear-gradient(to bottom,rgba(0,0,0,.86) 0%,rgba(0,0,0,.1) 32%,rgba(0,0,0,.62) 76%,#000 100%);
}
.hero h1 em{
  color:var(--green);
  text-shadow:0 0 44px rgba(80,200,120,.42);
}
.stat:hover{box-shadow:0 0 34px -12px var(--green-glow)}
.tile{background:var(--bg-2)}
.panel,.stat,.rev,.tile,.post,.price{border-radius:var(--r)}

/* a thin scan line that travels a divider, reads as machined rather than drawn */
.rule{position:relative;height:1px;background:var(--line);overflow:hidden}
.rule::after{
  content:"";position:absolute;inset-block:0;width:22%;
  background:linear-gradient(90deg,transparent,var(--green),transparent);
  animation:scan 6.5s ease-in-out infinite;opacity:.7;
}
@keyframes scan{0%{transform:translateX(-120%)}55%,100%{transform:translateX(560%)}}
@media(prefers-reduced-motion:reduce){.rule::after{animation:none;opacity:0}}

/* ==========================================================================
   ODDS AND ENDS
   ========================================================================== */
.skip{
  position:absolute;left:-9999px;top:0;z-index:200;padding:12px 18px;border-radius:0 0 var(--r-sm) 0;
  background:var(--green);color:#04140b;font-weight:600;font-size:var(--t-sm);
}
.skip:focus{left:0}

.shotbox{position:relative;border-radius:var(--r);overflow:hidden}
.shotbox img{width:100%;height:auto;object-fit:cover}

/* blog card art built from our own vertical work */
.post-phones{
  position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;
  gap:clamp(6px,1vw,12px);padding-block:clamp(14px,2vw,22px);
}
.pp{
  position:relative;flex:0 0 auto;height:100%;aspect-ratio:9/19.5;overflow:hidden;
  border-radius:clamp(10px,1.3vw,15px);background:#000;
  box-shadow:0 18px 40px -18px rgba(0,0,0,.95),0 0 0 1px rgba(var(--wa),.12);
  transition:transform .6s cubic-bezier(.2,.8,.2,1);
}
.pp video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pp1{transform:rotate(-7deg) translateY(9px) scale(.9)}
.pp2{z-index:2;transform:translateY(-5px)}
.pp3{transform:rotate(7deg) translateY(9px) scale(.9)}
.post:hover .pp1{transform:rotate(-10deg) translateY(2px) scale(.92)}
.post:hover .pp2{transform:translateY(-11px) scale(1.02)}
.post:hover .pp3{transform:rotate(10deg) translateY(2px) scale(.92)}

.post-hero{margin-bottom:clamp(28px,3.6vw,44px)}
.post-hero .phones{margin-inline:0;padding-inline:0;overflow:visible}

.article blockquote{margin:0}
.rev blockquote{margin:0}

/* tiles are interactive, say so */
.tile{cursor:pointer}
.tile:focus-visible{outline:2px solid var(--green);outline-offset:3px}

/* ==========================================================================
   BEHIND THE SCENES GRID
   ========================================================================== */
.bts-grid{display:grid;gap:clamp(12px,1.6vw,20px);grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.bts{margin:0;position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:var(--bg-2)}
.bts img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.bts:hover img{transform:scale(1.04)}
.bts figcaption{
  position:absolute;inset-inline:0;inset-block-end:0;padding:clamp(30px,4vw,44px) clamp(14px,1.6vw,18px) clamp(13px,1.5vw,16px);
  font-size:var(--t-sm);color:var(--ink-soft);line-height:1.45;
  background:linear-gradient(to top,rgba(0,0,0,.9),rgba(0,0,0,.55) 55%,transparent);
}
@media(min-width:820px){
  .bts-grid{grid-template-columns:repeat(3,1fr)}
  /* spans two columns but keeps the native 3:2, so nobody gets cropped out of
     their own frame. A square cell would cut Tim off the left of this shot. */
  .bts-big{grid-column:span 2}
  .bts-big img{aspect-ratio:8/5}
}

/* ==========================================================================
   LIQUID GLASS  (iOS 26/27 treatment)

   The house glass, extended off the dock so every surface reads as the same
   material. Four layers, no solid background-color anywhere, so the page
   behind actually shows through:

     1  a narrow specular band that sweeps across on hover
     2  a low alpha green tint, so light reads as bending rather than painted
     3  a faint white film that gives the glass its body
     4  backdrop-filter, which blurs and over saturates whatever sits behind

   The refractive EDGE is what separates this from a pill with a stroke on it.
   Two mask-composite rings pulled OUTSIDE the panel footprint (negative inset)
   so they sample the raw page, not the panel's own blurred output. Blur is kept
   near zero on the sharp ring: a 6px blur averages a 12px circle of page into
   every pixel of a 3px band, which is most of the local colour gone.

   Concentric rule still governs: inner radius = outer radius minus the gap.
   ========================================================================== */
:root{
  --g-film:linear-gradient(180deg,rgba(var(--wa),.075),rgba(var(--wa),.022));
  --g-tint:linear-gradient(100deg,
      rgba(80,200,120,.13) 0%,
      rgba(58,190,170,.10) 26%,
      rgba(80,200,120,.06) 52%,
      rgba(120,215,150,.11) 78%,
      rgba(80,200,120,.13) 100%);
  --g-spec:linear-gradient(105deg,rgba(var(--wa),0) 0%,rgba(var(--wa),.17) 46%,rgba(var(--wa),0) 100%);
  --g-blur:blur(22px) saturate(210%) brightness(1.16);
  --g-shadow:inset 0 1px 0 rgba(var(--wa),.20),inset 0 -1px 0 rgba(var(--wa),.05),0 14px 40px -18px rgba(0,0,0,.85);
}
@property --gr{syntax:'<angle>';inherits:false;initial-value:0deg}

.glass{
  position:relative;isolation:isolate;
  background-color:transparent;
  background-image:var(--g-spec),var(--g-tint),var(--g-film);
  background-size:44% 100%,260% 100%,auto;
  background-repeat:no-repeat,repeat,no-repeat;
  background-position:-70% 50%,0% 50%,0 0;
  -webkit-backdrop-filter:var(--g-blur);
          backdrop-filter:var(--g-blur);
  border:1px solid transparent;
  box-shadow:var(--g-shadow);
  transition:background-position 1.1s cubic-bezier(.2,.8,.2,1),box-shadow .35s,transform .35s cubic-bezier(.2,.8,.2,1);
}
/* the rim: a conic ring painted on 1px, mask-composite cutting the middle out */
.glass::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;z-index:2;pointer-events:none;
  background:conic-gradient(from var(--gr),
    rgba(var(--wa),.5),rgba(var(--wa),.05) 16%,
    rgba(80,200,120,.55) 34%,rgba(var(--wa),.04) 52%,
    rgba(var(--wa),.42) 72%,rgba(var(--wa),.06) 88%,rgba(var(--wa),.5));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:.65;transition:opacity .35s;
}
/* the specular hotspot, position fed from JS */
.glass::after{
  content:"";position:absolute;inset:0;border-radius:inherit;z-index:1;pointer-events:none;
  background:radial-gradient(180px 120px at var(--sx,50%) var(--sy,-20%),
    rgba(var(--wa),.16),rgba(var(--wa),.04) 46%,rgba(var(--wa),0) 74%);
  opacity:0;transition:opacity .45s;
}
.glass>*{position:relative;z-index:3}
.glass:hover{
  background-position:170% 50%,260% 50%,0 0;
  box-shadow:inset 0 1px 0 rgba(var(--wa),.32),inset 0 -1px 0 rgba(var(--wa),.07),
             0 22px 60px -20px rgba(0,0,0,.92),0 0 34px -16px var(--green-glow);
}
.glass:hover::before{opacity:1;animation:glassRim 9s linear infinite}
.glass:hover::after{opacity:1}
@keyframes glassRim{to{--gr:360deg}}

/* the refractive edge, desktop only: two rings that sample the raw page */
@media(min-width:900px) and (hover:hover){
  .glass-lit>.g-lens{
    position:absolute;inset:-8px;border-radius:inherit;padding:8px;z-index:0;pointer-events:none;opacity:.42;
    -webkit-backdrop-filter:blur(6px) saturate(2.6) brightness(1.34);
            backdrop-filter:blur(6px) saturate(2.6) brightness(1.34);
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
            mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;mask-composite:exclude;
  }
  .glass-lit>.g-edge{
    position:absolute;inset:-2px;border-radius:inherit;padding:3px;z-index:1;pointer-events:none;
    -webkit-backdrop-filter:blur(.5px) saturate(3.4) brightness(1.5) contrast(1.3);
            backdrop-filter:blur(.5px) saturate(3.4) brightness(1.5) contrast(1.3);
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
            mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;mask-composite:exclude;
  }
}

/* ---------- apply it to the real surfaces ---------- */
.panel,.stat,.rev,.price,.chip,.hero-flag,.bts{
  background:transparent;
  background-image:var(--g-spec),var(--g-tint),var(--g-film);
  background-size:44% 100%,260% 100%,auto;
  background-repeat:no-repeat,repeat,no-repeat;
  background-position:-70% 50%,0% 50%,0 0;
  -webkit-backdrop-filter:var(--g-blur);
          backdrop-filter:var(--g-blur);
  border-color:transparent;
  box-shadow:var(--g-shadow);
  position:relative;isolation:isolate;
  transition:background-position 1.1s cubic-bezier(.2,.8,.2,1),box-shadow .35s,transform .35s cubic-bezier(.2,.8,.2,1);
}
.panel::before,.stat::before,.rev::before,.price::before,.chip::before,.hero-flag::before,.bts::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;z-index:2;pointer-events:none;
  background:conic-gradient(from var(--gr),
    rgba(var(--wa),.46),rgba(var(--wa),.04) 16%,
    rgba(80,200,120,.5) 34%,rgba(var(--wa),.03) 52%,
    rgba(var(--wa),.4) 72%,rgba(var(--wa),.05) 88%,rgba(var(--wa),.46));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:.6;transition:opacity .35s;
}
.panel:hover,.stat:hover,.rev:hover,.chip:hover,.bts:hover{
  background-position:170% 50%,260% 50%,0 0;
  box-shadow:inset 0 1px 0 rgba(var(--wa),.32),inset 0 -1px 0 rgba(var(--wa),.07),
             0 22px 60px -20px rgba(0,0,0,.92),0 0 34px -16px var(--green-glow);
}
.panel:hover::before,.stat:hover::before,.rev:hover::before,.chip:hover::before,.bts:hover::before{
  opacity:1;animation:glassRim 9s linear infinite;
}
.bts img,.bts figcaption{position:relative;z-index:3}
.rev>*,.panel>*,.price>*,.stat>*{position:relative;z-index:3}

/* the work tile: glass lives on the caption block, the shot stays optically clear */
.tile{background:transparent;border-color:transparent;box-shadow:0 14px 44px -22px rgba(0,0,0,.9)}
.tile-b{
  background-image:var(--g-spec),var(--g-tint),var(--g-film);
  background-size:44% 100%,260% 100%,auto;
  background-repeat:no-repeat,repeat,no-repeat;
  background-position:-70% 50%,0% 50%,0 0;
  -webkit-backdrop-filter:var(--g-blur);
          backdrop-filter:var(--g-blur);
  transition:background-position 1.1s cubic-bezier(.2,.8,.2,1);
  border-radius:0 0 calc(var(--r) - 1px) calc(var(--r) - 1px);
}
.tile:hover .tile-b{background-position:170% 50%,260% 50%,0 0}
.tile::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;z-index:4;pointer-events:none;
  background:conic-gradient(from var(--gr),
    rgba(var(--wa),.42),rgba(var(--wa),.04) 16%,
    rgba(80,200,120,.5) 34%,rgba(var(--wa),.03) 52%,
    rgba(var(--wa),.38) 72%,rgba(var(--wa),.05) 88%,rgba(var(--wa),.42));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:.55;transition:opacity .35s;
}
.tile:hover::before{opacity:1;animation:glassRim 9s linear infinite}
.tile.playing::before{opacity:1;background:conic-gradient(from var(--gr),var(--green),rgba(80,200,120,.35) 40%,var(--green) 70%,rgba(80,200,120,.4))}

/* header and chat sheet: the same piece of glass as the dock */
.bar{background:rgba(0,0,0,.38);-webkit-backdrop-filter:blur(26px) saturate(200%) brightness(1.22);backdrop-filter:blur(26px) saturate(200%) brightness(1.22)}
.bar.stuck{background:rgba(0,0,0,.62)}
.chat-panel{
  background:rgba(0,0,0,.44);
  background-image:var(--g-tint),var(--g-film);
  background-repeat:repeat,no-repeat;
  -webkit-backdrop-filter:blur(30px) saturate(210%) brightness(1.2);
          backdrop-filter:blur(30px) saturate(210%) brightness(1.2);
  border-color:transparent;
}
.chat-panel::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;z-index:6;pointer-events:none;
  background:conic-gradient(from var(--gr),
    rgba(var(--wa),.5),rgba(var(--wa),.05) 18%,rgba(80,200,120,.55) 38%,
    rgba(var(--wa),.04) 56%,rgba(var(--wa),.44) 76%,rgba(var(--wa),.06) 90%,rgba(var(--wa),.5));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:glassRim 16s linear infinite;
}
.chat-panel>*{position:relative;z-index:7}

/* secondary button becomes a glass pill */
.btn-s{
  background-color:transparent;
  background-image:var(--g-spec),var(--g-tint),var(--g-film);
  background-size:50% 100%,260% 100%,auto;
  background-repeat:no-repeat,repeat,no-repeat;
  background-position:-80% 50%,0% 50%,0 0;
  -webkit-backdrop-filter:blur(18px) saturate(200%) brightness(1.14);
          backdrop-filter:blur(18px) saturate(200%) brightness(1.14);
  border-color:transparent;position:relative;isolation:isolate;
  box-shadow:inset 0 1px 0 rgba(var(--wa),.24),0 8px 26px -14px rgba(0,0,0,.8);
  transition:background-position 1s cubic-bezier(.2,.8,.2,1),transform .25s,box-shadow .3s;
}
.btn-s::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;z-index:2;pointer-events:none;
  background:conic-gradient(from var(--gr),
    rgba(var(--wa),.55),rgba(var(--wa),.06) 18%,rgba(80,200,120,.6) 38%,
    rgba(var(--wa),.05) 56%,rgba(var(--wa),.46) 76%,rgba(var(--wa),.07) 90%,rgba(var(--wa),.55));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:.7;transition:opacity .3s;
}
.btn-s:hover{background-position:180% 50%,260% 50%,0 0;background-color:transparent}
.btn-s:hover::before{opacity:1;animation:glassRim 8s linear infinite}

/* the phone body is machined metal, so it gets the rim but not the tint */
.phone::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;z-index:5;pointer-events:none;
  background:conic-gradient(from var(--gr),
    rgba(var(--wa),.55),rgba(var(--wa),.06) 20%,rgba(80,200,120,.4) 40%,
    rgba(var(--wa),.05) 58%,rgba(var(--wa),.5) 78%,rgba(var(--wa),.08) 92%,rgba(var(--wa),.55));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:.55;transition:opacity .4s;
}
.phone:hover::before{opacity:1;animation:glassRim 10s linear infinite}

/* post cards pick up the same body */
.post{background:transparent;border-color:transparent;box-shadow:var(--g-shadow)}
.post-b{
  background-image:var(--g-spec),var(--g-tint),var(--g-film);
  background-size:44% 100%,260% 100%,auto;
  background-repeat:no-repeat,repeat,no-repeat;
  background-position:-70% 50%,0% 50%,0 0;
  -webkit-backdrop-filter:var(--g-blur);
          backdrop-filter:var(--g-blur);
  transition:background-position 1.1s cubic-bezier(.2,.8,.2,1);
}
.post:hover .post-b{background-position:170% 50%,260% 50%,0 0}
.post::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;z-index:4;pointer-events:none;
  background:conic-gradient(from var(--gr),
    rgba(var(--wa),.42),rgba(var(--wa),.04) 16%,rgba(80,200,120,.5) 34%,
    rgba(var(--wa),.03) 52%,rgba(var(--wa),.38) 72%,rgba(var(--wa),.05) 88%,rgba(var(--wa),.42));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:.5;transition:opacity .35s;
}
.post:hover::before{opacity:1;animation:glassRim 9s linear infinite}

/* form fields, same material at a smaller scale */
.field input,.field textarea{
  background-color:transparent;background-image:var(--g-film);
  -webkit-backdrop-filter:blur(14px) saturate(180%);backdrop-filter:blur(14px) saturate(180%);
  border-color:rgba(var(--wa),.14);
}
.field input:focus,.field textarea:focus{border-color:var(--green);background-color:transparent}

/* glass is expensive and it is decoration, so it comes off when motion is off */
@media(prefers-reduced-motion:reduce){
  .glass::before,.panel::before,.stat::before,.rev::before,.tile::before,.post::before,
  .btn-s::before,.phone::before,.chat-panel::before,.chip::before,.price::before,
  .hero-flag::before,.bts::before{animation:none!important}
}
/* phones do not get the heavy stack: too many blurred layers over playing video */
@media(max-width:760px){
  :root{--g-blur:blur(16px) saturate(180%) brightness(1.12)}
  .glass-lit>.g-lens,.glass-lit>.g-edge{display:none}
}

/* the specular hotspot on every glass surface. Position comes from site.js,
   which tracks the pointer against whichever surface is under it. */
.panel::after,.stat::after,.rev::after,.price::after,.tile::after,.post::after,.bts::after,.btn-s::after{
  content:"";position:absolute;inset:0;border-radius:inherit;z-index:2;pointer-events:none;
  background:radial-gradient(200px 140px at var(--sx,50%) var(--sy,-25%),
    rgba(var(--wa),.15),rgba(var(--wa),.035) 46%,rgba(var(--wa),0) 74%);
  opacity:0;transition:opacity .4s;
}
.panel:hover::after,.stat:hover::after,.rev:hover::after,.price:hover::after,
.tile:hover::after,.post:hover::after,.bts:hover::after,.btn-s:hover::after{opacity:1}
.tile::after{z-index:5}
.post::after{z-index:5}

/* ==========================================================================
   iOS 27 PASS
   Three corrections to the first glass build:

   1  APPLE MATERIALS ARE NEARLY NEUTRAL. The colour in a real iOS panel comes
      from the wallpaper behind it, not from paint in the panel. A .13 alpha
      green fill on a black page has nothing to refract, so it just reads as
      olive. Tint drops to a trace and the backdrop does the work instead.
   2  THE PAGE NEEDS SOMETHING BEHIND THE GLASS. Pure black refracts to pure
      black. A slow ambient field gives every panel a backdrop to bend.
   3  SQUIRCLES. Continuous corner curvature is the single clearest Apple tell.
      corner-shape is progressive: browsers without it keep the plain radius.
   ========================================================================== */
:root{
  --g-tint:linear-gradient(100deg,
      rgba(80,200,120,.045) 0%,
      rgba(150,220,255,.030) 30%,
      rgba(var(--wa),.018) 55%,
      rgba(80,200,120,.038) 80%,
      rgba(80,200,120,.045) 100%);
  --g-film:linear-gradient(180deg,rgba(var(--wa),.10),rgba(var(--wa),.035));
  --g-spec:linear-gradient(105deg,rgba(var(--wa),0) 0%,rgba(var(--wa),.20) 46%,rgba(var(--wa),0) 100%);
  --g-blur:blur(30px) saturate(190%) brightness(1.28);
  --g-shadow:inset 0 1px 0 rgba(var(--wa),.26),inset 0 -1px 0 rgba(var(--wa),.05),0 16px 44px -20px rgba(0,0,0,.9);
}

/* ---- the ambient field: what the glass actually bends ---- */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(58vw 48vw at 12% 6%,  rgba(80,200,120,.085), transparent 62%),
    radial-gradient(46vw 40vw at 88% 28%, rgba(60,150,200,.055), transparent 64%),
    radial-gradient(52vw 44vw at 76% 74%, rgba(80,200,120,.065), transparent 62%),
    radial-gradient(40vw 36vw at 20% 92%, rgba(120,200,255,.04),  transparent 66%);
  filter:blur(30px);
}
body{background:#000}

/* ---- squircles, the Apple corner ---- */
@supports (corner-shape: superellipse(4)){
  .panel,.stat,.rev,.price,.tile,.post,.bts,.chat-panel,.phone,.phone-screen,
  .dock-in,.shotbox,.tile-shot,.post-shot,.field input,.field textarea,.glass{
    corner-shape:superellipse(4);
  }
  .btn,.chip,.hero-flag,.bar-cta,.nav a,.dock-i,.tile-badge,.tile-live,.chat-quick button{
    corner-shape:superellipse(3);
  }
}

/* ---- seamless: no hairlines between sections, material does the separating ---- */
.edge-lit::before{display:none}
.sec-line{border-top:0}
.foot{border-top:0;background:transparent}
.foot-b{border-top:1px solid rgba(var(--wa),.06)}
.bar{border-bottom:0}
.bar.stuck{border-bottom:0;box-shadow:0 1px 0 rgba(var(--wa),.05)}

/* ---- vibrant labels: text on glass picks the backdrop up rather than sitting on it ---- */
.panel h3,.stat b,.price h3,.rev p,.post-b h3{
  color:var(--ink);
  text-shadow:0 1px 14px rgba(0,0,0,.45);
}
.tile-badge,.tile-live{
  -webkit-backdrop-filter:blur(18px) saturate(200%) brightness(1.3);
          backdrop-filter:blur(18px) saturate(200%) brightness(1.3);
  background:rgba(var(--wa),.10);border-color:rgba(var(--wa),.16);
}

/* ---- Apple type rhythm: tighter tracking as the size goes up ---- */
h1{letter-spacing:-.035em}
h2{letter-spacing:-.03em}
.hero h1{letter-spacing:-.042em;line-height:.98}
.stat b{letter-spacing:-.04em}
.amt{letter-spacing:-.045em}

/* ---- the glass surfaces lift on hover rather than just brightening ---- */
.panel:hover,.stat:hover,.rev:hover,.bts:hover,.post:hover{transform:translateY(-3px)}
.tile:hover{transform:translateY(-5px)}

/* ---- separators, iOS style: a hairline that fades at both ends ---- */
.rule{
  height:1px;border:0;
  background:linear-gradient(90deg,transparent,rgba(var(--wa),.16) 18%,rgba(var(--wa),.16) 82%,transparent);
}