/* =============================================================
   ADNA — shared stylesheet for every page (home, social, gmb, studio)
   and the dashboard. One file, two themes.

   Default is LIGHT. The toggle in the nav flips to dark and
   remembers the choice per visitor. Nothing here depends on the
   visitor's OS setting — light-first is a deliberate brand choice,
   not a fallback.
   ============================================================= */

@property --ang { syntax: "<angle>"; initial-value: 0deg; inherits: false; }

:root,
[data-theme="light"]{
  --paper:#FFFFFF;
  --card:#FFFFFF;
  --ink:#0B0B0C;
  --ink-2:rgba(11,11,12,.60);
  --line:rgba(11,11,12,.10);
  --line-2:rgba(11,11,12,.18);

  --accent:#0B0B0C;
  --accent-ink:#FFFFFF;
  --accent-soft:rgba(11,11,12,.05);

  --glass:rgba(11,11,12,.025);
  --glass-hi:rgba(255,255,255,.9);
  --hov:rgba(11,11,12,.05);
  --hov-strong:rgba(11,11,12,.09);

  --edge:rgba(11,11,12,.85);
  --edge2:rgba(11,11,12,.18);

  --nav-bg:rgba(255,255,255,.72);
  --shadow:0 20px 50px rgba(11,11,12,.08);
  --shadow-lg:0 24px 70px rgba(11,11,12,.10);

  --danger:#C4321A;
  --danger-soft:rgba(196,50,26,.10);

  color-scheme:light;
}

[data-theme="dark"]{
  --paper:#000000;
  --card:rgba(255,255,255,.045);
  --ink:#F5F5F7;
  --ink-2:rgba(245,245,247,.56);
  --line:rgba(255,255,255,.10);
  --line-2:rgba(255,255,255,.16);

  --accent:#FFFFFF;
  --accent-ink:#000000;
  --accent-soft:rgba(255,255,255,.06);

  --glass:rgba(255,255,255,.045);
  --glass-hi:rgba(255,255,255,.14);
  --hov:rgba(255,255,255,.07);
  --hov-strong:rgba(255,255,255,.13);

  --edge:rgba(255,255,255,.95);
  --edge2:rgba(255,255,255,.25);

  --nav-bg:rgba(0,0,0,.6);
  --shadow:0 24px 70px rgba(0,0,0,.6);
  --shadow-lg:0 30px 90px rgba(0,0,0,.7);

  --danger:#FF6B5A;
  --danger-soft:rgba(255,107,90,.12);

  color-scheme:dark;
}

:root{
  --blur:saturate(170%) blur(22px);
  --r:18px;
  --sf:-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
       "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; background:var(--paper)}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sf);
  font-size:17px; line-height:1.47; letter-spacing:-.374px;
  -webkit-font-smoothing:antialiased;
  transition:background .35s ease, color .35s ease;
}
img,video,iframe{max-width:100%; display:block; border:0}
a{color:inherit}
h1,h2,h3{font-family:var(--sf); font-weight:600; letter-spacing:-.02em; line-height:1.07; margin:0}
p{margin:0}
:focus-visible{outline:2px solid var(--ink); outline-offset:4px}

.wrap{max-width:1160px; margin:0 auto; padding:0 26px}
@media(max-width:700px){.wrap{padding:0 20px}}
.blk{padding:86px 0}
.ctr{text-align:center}
h2.big{font-size:clamp(30px,4.4vw,48px); font-weight:600; line-height:1.08}
.rt a{color:var(--ink); text-decoration:underline; text-underline-offset:4px}
.rt strong{font-weight:600}
.eyebrow{font-size:13px; color:var(--ink-2); margin-bottom:16px}

/* -------------------------------------------------------------
   GLASS + INFINITE EDGE
   A hairline of light travels around the border, forever, on hover.
   ------------------------------------------------------------- */
.tier,.ba-tbl,.steps,.clip,.test,.ind .shot,.hero-media,.embed-wrap,.btn,
.card,.item,.leadform input,.leadform textarea,.door,.case,.rev,.mem{
  position:relative;
}
.tier::after,.ba-tbl::after,.steps::after,.clip::after,.test::after,
.ind .shot::after,.hero-media::after,.embed-wrap::after,.btn::after,.card::after,
.door::after,.case::after,.rev::after,.mem::after{
  content:"";
  position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:conic-gradient(from var(--ang),
    transparent 0deg, var(--edge) 26deg,
    var(--edge2) 58deg, transparent 96deg, transparent 360deg);
  -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:0; transition:opacity .4s ease; pointer-events:none; z-index:3;
}
.tier:hover::after,.ba-tbl:hover::after,.steps:hover::after,.clip:hover::after,
.test:hover::after,.ind .shot:hover::after,.hero-media:hover::after,
.embed-wrap:hover::after,.btn:hover::after,.card:hover::after,
.door:hover::after,.case:hover::after,.rev:hover::after,.mem:hover::after{
  opacity:1; animation:edgeRun 2.8s linear infinite;
}
@keyframes edgeRun{ to{ --ang:360deg } }

.glass,.g{
  background:var(--glass);
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  border:1px solid var(--line);
  border-radius:20px;
  box-shadow:inset 0 1px 0 var(--glass-hi), var(--shadow);
}

/* -------------------------------------------------------------
   TEXT UTILITIES — used across hero/about/talk sections
   ------------------------------------------------------------- */
.lede{margin-top:18px; font-size:19px; line-height:1.4; color:var(--ink-2); max-width:34em}
.split{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start}
@media(max-width:860px){.split{grid-template-columns:1fr; gap:32px}}
.direct{margin-top:26px; font-size:15px; color:var(--ink-2); line-height:2.1}
.direct a{border-bottom:1px solid var(--line)}
.direct a:hover{border-color:var(--ink)}

/* -------------------------------------------------------------
   NAV
   ------------------------------------------------------------- */
nav{position:sticky; top:0; z-index:50; background:var(--nav-bg);
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  border-bottom:1px solid var(--line)}
nav .w{display:flex; align-items:center; justify-content:space-between; height:66px; gap:18px;
  max-width:1160px; margin:0 auto; padding:0 26px}
@media(max-width:700px){nav .w{padding:0 20px}}
.logo{display:flex; align-items:center; gap:10px; font-size:21px; font-weight:600; letter-spacing:-.04em;
  text-decoration:none; color:var(--ink)}
.logo img{height:var(--logo-h,26px); width:auto}
.nlinks{display:flex; gap:26px; font-size:15px; color:var(--ink-2)}
.nlinks a{text-decoration:none}
.nlinks a:hover{color:var(--ink)}
.nright{display:flex; align-items:center; gap:10px}
@media(max-width:840px){.nlinks{display:none}}

.tog{width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background:var(--glass);
  color:var(--ink); cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:background .3s ease; padding:0}
.tog:hover{background:var(--hov)}
.tog svg{width:17px; height:17px}
[data-theme="dark"] .tog .sun{display:block} [data-theme="dark"] .tog .moon{display:none}
[data-theme="light"] .tog .sun{display:none} [data-theme="light"] .tog .moon{display:block}
:root:not([data-theme]) .tog .sun{display:none}
:root:not([data-theme]) .tog .moon{display:block}

.badge{display:inline-block; padding:7px 16px; border-radius:980px; border:1px solid var(--line);
  background:var(--glass); font-size:13px; color:var(--ink-2); margin-bottom:28px}

/* -------------------------------------------------------------
   BUTTONS — Apple pill
   ------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--accent); color:var(--accent-ink); text-decoration:none;
  font-family:var(--sf); font-weight:500; font-size:17px; letter-spacing:-.374px;
  text-transform:none; padding:14px 30px; border:0; border-radius:980px; cursor:pointer;
  transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, opacity .2s ease;
}
.btn:hover{ transform:translateY(-1px); box-shadow:0 10px 34px rgba(0,0,0,.18) }
[data-theme="dark"] .btn:hover{ box-shadow:0 10px 40px rgba(255,255,255,.14) }
.btn:active{ transform:translateY(0); opacity:.85 }
.btn:disabled{opacity:.5; cursor:default}
.btn.sm{ padding:9px 18px; font-size:14px }
.btn.plain,.btn.out,.btn.o{
  background:var(--glass); color:var(--ink);
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  border:1px solid var(--line-2); font-size:15px; padding:11px 22px;
}

/* -------------------------------------------------------------
   1 — HERO
   ------------------------------------------------------------- */
.hero{padding:74px 0 30px; display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center}
.hero h1{font-size:clamp(40px,6vw,74px); font-weight:600; line-height:1.05; letter-spacing:-.028em}
.hero h1 em,.hero h1 span{font-style:normal; color:var(--ink-2)}
.hero .sub{margin-top:24px; font-size:21px; line-height:1.28; color:var(--ink-2); max-width:28em}
.hero .btn{margin-top:34px}
.cta{margin-top:38px; display:flex; gap:12px; flex-wrap:wrap}
.note{margin-top:32px; font-size:14px; color:var(--ink-2)}
.hero-media{
  background:var(--glass); border-radius:24px; overflow:hidden;
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  border:1px solid var(--line);
  box-shadow:inset 0 1px 0 var(--glass-hi), var(--shadow-lg);
}
.hero-media > *{width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:24px}
@media(max-width:900px){
  .hero{grid-template-columns:1fr; gap:34px; padding:40px 0 0}
  .hero-media{order:-1; max-width:360px; margin:0 auto}
}

/* -------------------------------------------------------------
   SERVICE DOORS (homepage)
   ------------------------------------------------------------- */
.doors{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:48px}
.door{padding:32px 26px 26px; display:flex; flex-direction:column; gap:13px; min-height:272px;
  transition:transform .45s cubic-bezier(.2,.8,.2,1), background .4s ease;
  background:var(--glass); border:1px solid var(--line); border-radius:20px; text-decoration:none; color:var(--ink);
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  box-shadow:inset 0 1px 0 var(--glass-hi), var(--shadow)}
.door:hover{transform:translateY(-6px); background:var(--hov)}
.door .n{font-size:12px; color:var(--ink-2)}
.door h3{font-size:24px}
.door p{color:var(--ink-2); font-size:15px; line-height:1.5}
.door .go{margin-top:auto; font-size:15px; font-weight:500}
@media(max-width:860px){.doors{grid-template-columns:1fr}}

/* -------------------------------------------------------------
   2 — INDUSTRY TILES
   ------------------------------------------------------------- */
.inds{display:grid; grid-template-columns:repeat(6,1fr); gap:16px; margin-top:46px}
.ind{text-align:center}
.ind .shot{
  border-radius:16px; overflow:hidden;
  background:var(--glass); border:1px solid var(--line);
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  transition:transform .45s cubic-bezier(.2,.8,.2,1);
}
.ind .shot:hover{transform:translateY(-4px)}
.ind .shot .m{width:100%; aspect-ratio:3/4; object-fit:cover; background:transparent}
.ind .badge{
  position:absolute; left:50%; bottom:-20px; transform:translateX(-50%);
  width:44px; height:44px; border-radius:50%; z-index:4; margin:0; padding:0;
  background:var(--hov-strong); border:1px solid var(--line-2);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  box-shadow:inset 0 1px 0 var(--glass-hi), 0 8px 24px rgba(0,0,0,.3);
}
.ind .badge img{width:100%; height:100%; object-fit:cover}
.ind .l{margin-top:32px; font-size:14px; font-weight:500; line-height:1.3; color:var(--ink-2)}
@media(max-width:980px){.inds{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.inds{grid-template-columns:repeat(2,1fr)}}

/* -------------------------------------------------------------
   3 — BEFORE / AFTER (also used for keyword-ranking proof)
   ------------------------------------------------------------- */
.ba-sub{margin-top:16px; font-size:clamp(20px,2.6vw,28px); font-weight:400;
  color:var(--ink-2); letter-spacing:-.02em}
.ba-tbl{
  margin-top:46px; border-radius:20px; overflow:hidden;
  background:var(--glass); border:1px solid var(--line);
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  box-shadow:inset 0 1px 0 var(--glass-hi), var(--shadow)}
.ba-head{display:grid; grid-template-columns:1fr 1fr; border-bottom:1px solid var(--line)}
.ba-head div{padding:13px 18px; font-size:12px; font-weight:500; letter-spacing:.02em; color:var(--ink-2)}
.ba-head div:last-child{border-left:1px solid var(--line); color:var(--ink); background:var(--hov)}
.ba-row{display:grid; grid-template-columns:1fr 1fr; border-bottom:1px solid var(--line)}
.ba-row:last-child{border-bottom:0}
.ba-cell{padding:24px; display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center}
.ba-cell + .ba-cell{border-left:1px solid var(--line); background:var(--hov)}
.ba-cell .m{width:100%; max-width:330px; aspect-ratio:5/3; object-fit:cover;
  border-radius:12px; background:var(--hov)}
.ba-cell .nm{font-size:13px; font-weight:400; color:var(--ink-2)}
.ba-cell .desc{font-size:13px; color:var(--ink-2); line-height:1.4; max-width:28em}
.ba-cell .st{font-size:24px; font-weight:600; letter-spacing:-.02em; color:var(--ink)}

/* -------------------------------------------------------------
   4 — NUMBERS
   ------------------------------------------------------------- */
.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:30px; text-align:center; padding:76px 0}
.stats .v{font-size:clamp(46px,7vw,84px); font-weight:600; letter-spacing:-.045em;
  line-height:.94; color:var(--ink); font-variant-numeric:tabular-nums}
.stats .l{margin-top:10px; font-size:clamp(16px,1.7vw,20px); font-weight:400; color:var(--ink-2)}
@media(max-width:760px){.stats{grid-template-columns:1fr; gap:38px}}

/* -------------------------------------------------------------
   5 — CLIP STRIP
   ------------------------------------------------------------- */
.clips{display:flex; gap:24px; justify-content:center; flex-wrap:wrap; padding-bottom:16px}
.clip{width:180px; border-radius:16px; transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.clip:hover{transform:translateY(-5px)}
.clip .tag{
  display:inline-block; margin-bottom:10px; padding:5px 13px; border-radius:980px;
  background:var(--hov-strong); border:1px solid var(--line-2);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  font-size:12px; font-weight:500; color:var(--ink);
}
.clip .m,.clip .emb{
  width:100%; aspect-ratio:9/16; object-fit:cover; border-radius:16px;
  background:var(--hov); border:1px solid var(--line);
}

/* -------------------------------------------------------------
   6 — HOW IT WORKS
   ------------------------------------------------------------- */
.steps{
  display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:46px; text-align:center;
  border-radius:20px; overflow:hidden;
  background:var(--glass); border:1px solid var(--line);
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  box-shadow:inset 0 1px 0 var(--glass-hi), var(--shadow)}
.step{padding:44px 30px; border-right:1px solid var(--line)}
.step:last-child{border-right:0}
.step .ic{width:56px; height:56px; margin:0 auto; display:flex; align-items:center;
  justify-content:center; overflow:hidden}
.step .ic img{width:100%; height:100%; object-fit:contain}
.step .ic .dot{
  width:36px; height:36px; border-radius:50%;
  background:radial-gradient(circle at 32% 28%, var(--edge), var(--edge2));
  box-shadow:0 6px 24px rgba(0,0,0,.15);
}
.step .pill{
  display:inline-block; margin-top:18px; padding:7px 17px; border-radius:980px;
  background:var(--hov); border:1px solid var(--line-2);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  font-size:13px; font-weight:500; letter-spacing:.01em; color:var(--ink); text-transform:none;
}
.step p{margin-top:16px; color:var(--ink-2); font-size:16px; line-height:1.5;
  max-width:24em; margin-left:auto; margin-right:auto}
@media(max-width:820px){
  .steps{grid-template-columns:1fr}
  .step{border-right:0; border-bottom:1px solid var(--line)}
  .step:last-child{border-bottom:0}
}

/* -------------------------------------------------------------
   7 — TESTIMONIALS (short video/photo grid)
   ------------------------------------------------------------- */
.tests{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:46px}
.test{border-radius:18px; transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.test:hover{transform:translateY(-5px)}
.test .m,.test .emb{
  width:100%; aspect-ratio:9/13; object-fit:cover; border-radius:18px;
  background:var(--hov); border:1px solid var(--line);
}
.test .n{margin-top:14px; font-size:15px; font-weight:500; text-align:center; color:var(--ink)}
.test .r{font-size:13px; color:var(--ink-2); text-align:center}
@media(max-width:860px){.tests{grid-template-columns:repeat(2,1fr)}}

/* -------------------------------------------------------------
   REVIEWS (long-form: quote + video + person)
   ------------------------------------------------------------- */
.revs{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:48px}
.rev{padding:24px; display:flex; flex-direction:column; gap:14px; border-radius:20px;
  background:var(--glass); border:1px solid var(--line);
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  box-shadow:inset 0 1px 0 var(--glass-hi), var(--shadow)}
.rev .vid{width:100%; aspect-ratio:9/14; border-radius:14px; overflow:hidden; background:var(--hov)}
.rev .vid iframe,.rev .vid video{width:100%; height:100%; border:0; object-fit:cover}
.rev .q{font-size:16px; line-height:1.5; color:var(--ink)}
.rev .who{display:flex; align-items:center; gap:11px; margin-top:auto}
.rev .who img{width:38px; height:38px; border-radius:50%; object-fit:cover}
.rev .who b{font-weight:500; font-size:15px}
.rev .who span{display:block; font-size:13px; color:var(--ink-2)}
@media(max-width:860px){.revs{grid-template-columns:1fr}}

/* -------------------------------------------------------------
   CASE STUDIES / WORK CARDS
   ------------------------------------------------------------- */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:48px}
.case{padding:26px; display:flex; flex-direction:column; gap:10px; border-radius:20px;
  background:var(--glass); border:1px solid var(--line);
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  box-shadow:inset 0 1px 0 var(--glass-hi), var(--shadow);
  transition:transform .45s cubic-bezier(.2,.8,.2,1), background .4s ease}
.case:hover{transform:translateY(-5px); background:var(--hov)}
.case .m{width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:12px; margin-bottom:6px; background:var(--hov)}
.case .cat{font-size:12px; color:var(--ink-2)}
.case h3{font-size:20px}
.case p{font-size:15px; color:var(--ink-2); line-height:1.5}
@media(max-width:860px){.cards{grid-template-columns:1fr}}

/* -------------------------------------------------------------
   TEAM
   ------------------------------------------------------------- */
.team{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:48px}
.mem{padding:24px; display:flex; flex-direction:column; gap:12px; border-radius:20px;
  background:var(--glass); border:1px solid var(--line);
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  box-shadow:inset 0 1px 0 var(--glass-hi), var(--shadow)}
.mem img{width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:16px}
.mem .ph{width:100%; aspect-ratio:1/1; border-radius:16px; background:var(--hov);
  display:flex; align-items:center; justify-content:center; font-size:44px; font-weight:600; color:var(--ink-2)}
.mem h3{font-size:20px}
.mem .role{font-size:14px; color:var(--ink-2)}
.mem p{font-size:15px; color:var(--ink-2); line-height:1.5}
@media(max-width:860px){.team{grid-template-columns:1fr}}

/* -------------------------------------------------------------
   SCROLLING CLIENT STRIP (marquee)
   ------------------------------------------------------------- */
.mq{overflow:hidden; margin-top:34px;
  -webkit-mask:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.mq-in{display:flex; width:max-content; animation:slide var(--dur,42s) linear infinite}
.mq:hover .mq-in{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.mq-row{display:flex; gap:12px; padding-right:12px}
.chip{display:flex; align-items:center; gap:10px; white-space:nowrap; padding:12px 22px; border-radius:980px;
  border:1px solid var(--line); background:var(--glass); font-size:15px; color:var(--ink-2)}
.chip img{height:22px; width:auto; border-radius:4px}

/* -------------------------------------------------------------
   8 — PACKAGES
   ------------------------------------------------------------- */
.tiers{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:46px; align-items:stretch}
.tier{
  border-radius:20px; padding:34px 26px 28px; text-align:center;
  display:flex; flex-direction:column; gap:16px;
  background:var(--glass); border:1px solid var(--line);
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  box-shadow:inset 0 1px 0 var(--glass-hi), var(--shadow);
  transition:transform .45s cubic-bezier(.2,.8,.2,1), background .4s ease;
}
.tier:hover{transform:translateY(-6px); background:var(--hov)}
.tier .nm{
  display:inline-block; align-self:center; padding:6px 18px; border-radius:980px;
  background:var(--hov-strong); border:1px solid var(--line-2);
  font-size:15px; font-weight:500; letter-spacing:-.01em; color:var(--ink); text-transform:none;
}
.tier .bl{font-size:14px; color:var(--ink-2); line-height:1.45}
.tier ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px}
.tier li{font-size:15px; font-weight:400; color:var(--ink-2)}
.tier li:first-child{font-weight:500; color:var(--ink)}
.tier .pr{font-size:40px; font-weight:600; letter-spacing:-.04em; margin-top:auto; color:var(--ink)}
.tier .btn{width:100%}
.fine{margin-top:24px; text-align:center; font-size:12px; letter-spacing:0;
  text-transform:none; color:var(--ink-2)}
@media(max-width:880px){.tiers{grid-template-columns:1fr}}

/* -------------------------------------------------------------
   9 — CLOSING BLOCK
   ------------------------------------------------------------- */
.final{
  display:grid; grid-template-columns:.85fr 1.15fr; align-items:stretch;
  background:var(--paper); color:var(--ink); border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.final .ph-img{background:var(--hov); overflow:hidden}
.final .ph-img > *{width:100%; height:100%; min-height:320px; object-fit:cover}
.final .bd{padding:86px 46px; display:flex; flex-direction:column; align-items:center;
  justify-content:center; text-align:center; gap:30px}
.final h2{font-size:clamp(32px,4.8vw,58px); font-weight:600; line-height:1.07;
  letter-spacing:-.028em; max-width:13em}
@media(max-width:860px){.final{grid-template-columns:1fr} .final .bd{padding:56px 24px}}

/* -------------------------------------------------------------
   10 — FOOTER
   ------------------------------------------------------------- */
.fbar{
  padding:22px; text-align:center; font-weight:400; font-size:15px; color:var(--ink-2);
  background:var(--hov);
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
}
.fbar a{text-decoration:none}
.fbar a:hover{color:var(--ink)}
.flinks{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:22px 0 46px; font-size:12px; color:var(--ink-2)}
.flinks a{text-decoration:none}
.flinks a:hover{color:var(--ink)}

/* -------------------------------------------------------------
   TEXT BLOCK / EMBED / FORM
   ------------------------------------------------------------- */
.rich{max-width:44em}
.rich h2{margin-bottom:20px}
.rich p{color:var(--ink-2); font-size:19px; line-height:1.5; margin-bottom:16px}
.rich .btn{margin-top:18px}
.embed-wrap{
  margin-top:34px; border-radius:20px; overflow:hidden;
  background:var(--hov); border:1px solid var(--line);
}
.embed-wrap iframe{width:100%; aspect-ratio:16/9; display:block}
.embed-wrap.vertical iframe{aspect-ratio:9/16; max-width:420px; margin:0 auto}

.leadform{max-width:520px; display:flex; flex-direction:column; gap:14px; margin-top:30px}
.leadform input,.leadform textarea{
  font:inherit; font-family:var(--sf); font-size:16px; padding:15px 16px; width:100%;
  color:var(--ink); border-radius:14px;
  background:var(--hov); border:1px solid var(--line);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  transition:border-color .3s ease, background .3s ease;
}
.leadform input::placeholder,.leadform textarea::placeholder{color:var(--ink-2)}
.leadform input:focus,.leadform textarea:focus{
  outline:none; border-color:var(--line-2); background:var(--hov-strong);
}
.leadform select{font:inherit; font-family:var(--sf); font-size:16px; padding:15px 16px; width:100%;
  color:var(--ink); border-radius:14px; background:var(--hov); border:1px solid var(--line)}
.leadform textarea{min-height:120px; resize:vertical}
.leadform .msg{font-size:14px; color:var(--ink); font-weight:500}

.ph{
  display:flex; align-items:center; justify-content:center;
  background:var(--hov); color:var(--ink-2);
  font-size:11px; font-weight:500; letter-spacing:.02em;
  border:1px dashed var(--line-2);
}
.hidden{display:none !important}

/* -------------------------------------------------------------
   DASHBOARD
   ------------------------------------------------------------- */
.top{
  background:var(--nav-bg) !important;
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  border-bottom:1px solid var(--line) !important;
}
.top .t{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.card{
  border-radius:16px;
  background:var(--glass) !important; border:1px solid var(--line) !important;
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
}
.card > summary{font-family:var(--sf); font-weight:500}
.card .chev{color:var(--ink)}
.card .body{border-top:1px solid var(--line) !important}
.stype{
  background:var(--hov-strong) !important; color:var(--ink) !important;
  border:1px solid var(--line-2); border-radius:980px; letter-spacing:.02em;
}
.item{background:var(--glass) !important; border:1px solid var(--line) !important; border-radius:14px}
.card .item.card{background:var(--hov) !important; box-shadow:none !important}
.card .item.card::after{display:none}
.fld input[type=text],.fld textarea,.fld select,.login input{
  background:var(--hov) !important; border:1px solid var(--line) !important;
  color:var(--ink) !important; border-radius:12px; font-family:var(--sf);
}
.fld input::placeholder,.fld textarea::placeholder,.login input::placeholder{color:var(--ink-2)}
.fld label{color:var(--ink-2)}
.mini{
  background:var(--hov) !important; border:1px solid var(--line-2) !important;
  color:var(--ink) !important; border-radius:980px; font-family:var(--sf);
}
.mini:hover{border-color:var(--line-2) !important; background:var(--hov-strong) !important}
.mini.on{background:var(--accent) !important; color:var(--accent-ink) !important; border-color:var(--accent) !important}
.mini.danger{color:var(--danger) !important; border-color:var(--danger-soft) !important}
.err{color:var(--danger) !important}
.status,.hint{color:var(--ink-2)}
.addbar{
  border:1px dashed var(--line-2) !important; border-radius:16px;
  background:var(--glass) !important;
}
.media-edit .prev{
  background:var(--hov) !important; border:1px solid var(--line) !important; border-radius:12px;
}
.leadrow{border-bottom:1px solid var(--line) !important}
input[type=color]{border:1px solid var(--line-2) !important; border-radius:10px; background:none}
.boot{color:var(--ink-2)}

#pagePick{
  font:inherit !important; font-size:15px !important; font-weight:500;
  color:var(--ink) !important; background:var(--hov) !important;
  border:1px solid var(--line-2) !important; border-radius:980px;
  padding:7px 14px !important; width:auto !important; cursor:pointer;
  appearance:none; -webkit-appearance:none;
}
#pagePick:hover{background:var(--hov-strong) !important}
#pagePick option{background:var(--card); color:var(--ink)}

/* -------------------------------------------------------------
   REVEAL ON SCROLL
   ------------------------------------------------------------- */
.r{opacity:0; transform:translateY(16px); transition:opacity .7s, transform .7s}
.r.in{opacity:1; transform:none}

/* -------------------------------------------------------------
   MOTION
   ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important}
  .tier:hover,.clip:hover,.test:hover,.ind .shot:hover,.btn:hover,
  .door:hover,.case:hover{transform:none}
  .tier:hover::after,.ba-tbl:hover::after,.steps:hover::after,.clip:hover::after,
  .test:hover::after,.ind .shot:hover::after,.hero-media:hover::after,
  .embed-wrap:hover::after,.btn:hover::after,.card:hover::after,
  .door:hover::after,.case:hover::after,.rev:hover::after,.mem:hover::after{
    opacity:1;
    background:linear-gradient(120deg, var(--edge), var(--edge2));
  }
  .mq-in{animation:none !important}
  .r{opacity:1; transform:none}
}

/* -------------------------------------------------------------
   HOME-STYLE PAGES (index, gmb): container, section rhythm,
   forms, footer
   ------------------------------------------------------------- */
.w{max-width:1120px; margin:0 auto; padding:0 24px}
@media(max-width:700px){.w{padding:0 20px}}
section{padding:96px 0; border-top:1px solid var(--line)}
section.blk{padding:86px 0}
section.final{padding:0}
section h2{font-size:clamp(30px,4.2vw,46px)}
section h2.big{font-size:clamp(30px,4.4vw,48px)}
section .stats{padding:0}
header.hero{display:block; padding:112px 0 90px}
header.hero h1{font-size:clamp(40px,6.8vw,84px); line-height:1.02}
header.hero .sub{max-width:24em}
.step .i{font-size:13px; color:var(--ink-2)}
.step h3{margin-top:12px; font-size:22px}
.btn.s{padding:10px 20px; font-size:15px}
section form{display:flex; flex-direction:column; gap:12px}
section form input,section form textarea,section form select{
  font:400 16px/1.4 var(--sf); color:var(--ink); padding:15px 16px; width:100%;
  border-radius:14px; background:var(--hov); border:1px solid var(--line);
  transition:border-color .3s, background .3s}
section form input::placeholder,section form textarea::placeholder{color:var(--ink-2)}
section form input:focus,section form textarea:focus,section form select:focus{
  outline:0; border-color:var(--line-2); background:var(--hov-strong)}
section form textarea{min-height:104px; resize:vertical}
section form select option{background:var(--paper); color:var(--ink)}
.msg{font-size:15px; min-height:22px; color:var(--ink-2)}
footer{padding:32px 0 50px; border-top:1px solid var(--line); display:flex;
  justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:13px; color:var(--ink-2)}

/* -------------------------------------------------------------
   iOS CONTROL-CENTRE GLASS
   Glass needs something behind it to refract. A soft neutral
   light field sits behind every page; panels frost it.
   ------------------------------------------------------------- */
:root{--blur:saturate(200%) blur(40px)}
[data-theme="light"],:root:not([data-theme]){
  --glass:rgba(255,255,255,.52); --glass-hi:rgba(255,255,255,1);
  --hov:rgba(255,255,255,.72); --line:rgba(11,11,12,.07);
  --shadow:0 18px 50px rgba(11,11,12,.10), 0 2px 6px rgba(11,11,12,.04);
}
[data-theme="dark"]{
  --glass:rgba(255,255,255,.075); --glass-hi:rgba(255,255,255,.24);
  --hov:rgba(255,255,255,.12);
  --shadow:0 18px 60px rgba(0,0,0,.55);
}
body{background:transparent}
body::before{
  content:""; position:fixed; inset:-15%; z-index:-1; pointer-events:none;
  background:
    radial-gradient(38% 32% at 12% 18%, rgba(11,11,12,.10), transparent 70%),
    radial-gradient(34% 30% at 88% 26%, rgba(11,11,12,.08), transparent 70%),
    radial-gradient(42% 36% at 55% 92%, rgba(11,11,12,.09), transparent 70%);
  filter:blur(30px);
}
[data-theme="dark"] body::before{
  background:
    radial-gradient(38% 32% at 12% 18%, rgba(255,255,255,.10), transparent 70%),
    radial-gradient(34% 30% at 88% 26%, rgba(255,255,255,.07), transparent 70%),
    radial-gradient(42% 36% at 55% 92%, rgba(255,255,255,.08), transparent 70%);
}
.g,.glass,.door,.case,.rev,.mem,.tier,.steps,.ba-tbl,.card,.hero-media,.tog,.badge,.chip,.btn.o,.btn.plain{
  border-radius:26px;
  border:1px solid rgba(255,255,255,.55);
  box-shadow:inset 0 1px 0 var(--glass-hi), inset 0 -1px 0 rgba(11,11,12,.04), var(--shadow);
}
[data-theme="dark"] :is(.g,.glass,.door,.case,.rev,.mem,.tier,.steps,.ba-tbl,.card,.hero-media,.tog,.badge,.chip,.btn.o,.btn.plain){
  border-color:rgba(255,255,255,.12);
  box-shadow:inset 0 1px 0 var(--glass-hi), inset 0 -1px 0 rgba(255,255,255,.03), var(--shadow);
}
.tog,.badge,.chip,.btn.o,.btn.plain{border-radius:980px}
nav{background:color-mix(in srgb, var(--paper) 55%, transparent)}