/* CSC Innovations design system, locked 2026-10-30 (Phase 1).  Loads LAST on every page (after site.css / pages.css).
   Reasoning, contrast numbers and copy rules: csc/site_next_build/pass/system_notes.md
   1 fonts  2 tokens + per-page themes  3 type scale (390 first)  4 glass panels  5 copy-rule parts  6 home  7 work  8 reduced motion
   Faces (all SIL OFL 1.1, self-hosted, Latin subset): League Gothic 400 (poster headlines), Libre Franklin 400-700 (subheads, text, UI),
   Fraunces 600 (logo wordmark ONLY). Nothing under 14px, no weight under 400. */

/* ---------- 1 fonts ---------- */
@font-face{font-family:"Fraunces";font-weight:600;font-style:normal;font-display:swap;src:url(../fonts/Fraunces-600.woff2) format("woff2")}
@font-face{font-family:"League Gothic";font-weight:400;font-style:normal;font-display:swap;src:url(../fonts/LeagueGothic-400.woff2?v=1) format("woff2")}
@font-face{font-family:"Libre Franklin";font-weight:400;font-style:normal;font-display:swap;src:url(../fonts/LibreFranklin-400.woff2?v=1) format("woff2")}
@font-face{font-family:"Libre Franklin";font-weight:500;font-style:normal;font-display:swap;src:url(../fonts/LibreFranklin-500.woff2?v=1) format("woff2")}
@font-face{font-family:"Libre Franklin";font-weight:600;font-style:normal;font-display:swap;src:url(../fonts/LibreFranklin-600.woff2?v=1) format("woff2")}
@font-face{font-family:"Libre Franklin";font-weight:700;font-style:normal;font-display:swap;src:url(../fonts/LibreFranklin-700.woff2?v=1) format("woff2")}
@font-face{font-family:"Libre Franklin";font-weight:400;font-style:italic;font-display:swap;src:url(../fonts/LibreFranklin-Italic-400.woff2?v=1) format("woff2")}

/* ---------- 2 tokens ---------- */
:root{
  --font-logo:"Fraunces",Georgia,"Times New Roman",serif;
  --font-poster:"League Gothic","Arial Narrow",Impact,sans-serif;--font-display:"Libre Franklin","Franklin Gothic Medium",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --font-text:"Libre Franklin","Franklin Gothic Medium",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --display-weight:700;--display-tracking:-.015em;--display-leading:1.1;--display-em-style:normal;
  --text-leading:1.55;--text-tracking:0;

  /* type scale, drawn at 390 first (value at 390 / at 1440). Floor 14px. */
  --fs-meta:.875rem;                                           /* 14 / 14  eyebrows, chips, captions: 600 weight, tracked caps */
  --fs-small:1rem;                                             /* 16 / 16  fine print, card captions */
  --fs-body:clamp(1.0625rem,1rem + .2vw,1.1875rem);            /* 17 / 19  running text, lh 1.55 */
  --fs-lede:clamp(1.1875rem,1.05rem + .6vw,1.5rem);            /* 19 / 24 */
  --h3:clamp(1.3125rem,1.15rem + .7vw,1.75rem);                /* 21 / 28 */
  --h2:clamp(1.875rem,1.3rem + 2.6vw,3.5rem);                  /* 31 / 56 */
  --h1:clamp(2.25rem,1.5rem + 4.6vw,4.75rem);                  /* 42 / 76 */
  --measure:34ch;--blob:min(95vw,720px);
  --fade:linear-gradient(to bottom,var(--fade-c,var(--th-bg)),transparent 160px),linear-gradient(to top,var(--fade-c,var(--th-bg)),transparent 160px);

  /* space (4px grid), panel geometry */
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;--sp-7:48px;--sp-8:72px;
  --panel-pad:20px;--panel-r:20px;

  /* glass, defaults = phone. Tuned per theme below. See notes: blur <=12px on phones, never over playing video. */
  --glass-blur:10px;--glass-sat:1.5;
  --glass-border:rgba(255,255,255,.14);
  --glass-hi:inset 0 1px 0 rgba(255,255,255,.16);
  --glass-shadow:0 14px 34px -18px rgba(0,0,0,.55);
}
@media (min-width:768px){:root{--glass-blur:16px;--glass-sat:1.8;--panel-pad:28px;--panel-r:22px}}
@media (min-width:1200px){:root{--glass-blur:18px;--panel-pad:32px}}

/* One palette per page. Each = bg / bg2 / text / mute / accent (text-safe on bg) / signature (the page's neon or 3D hue, used on dark bands) /
   glow1 + glow2 (calm colour fields behind glass) / glass fill + solid fallback + panel text. Pairing logic: notes. */
:root,body.home{
  --th-bg:#F6F6F4;--th-bg2:#DCEBE2;--th-text:#0A0A0A;--th-mute:#1F2A24;--th-accent:#2D6A4F;--th-accent-ink:#FFFFFF;--th-sig:#3DF2A0;
  --th-glow1:rgba(30,168,120,.26);--th-glow2:rgba(45,106,79,.25);
  --glass-fill:rgba(255,255,255,.74);--glass-solid:#FFFFFF;--glass-text:#0A0A0A;--glass-mute:#323C36;--glass-border:rgba(10,10,10,.12);
  --glass-hi:inset 0 1px 0 rgba(255,255,255,.9);--glass-shadow:0 18px 40px -22px rgba(20,60,42,.55)
}
body.page-work{
  --th-bg:#0B100E;--th-bg2:#131C18;--th-text:#F3F5F1;--th-mute:#D3DCD6;--th-accent:#5FD19A;--th-accent-ink:#06130D;--th-sig:#E3B04B;
  --th-glow1:rgba(45,106,79,.55);--th-glow2:rgba(227,176,75,.22);
  --glass-fill:rgba(14,22,19,.68);--glass-solid:#121B17;--glass-text:#F3F5F1;--glass-mute:#C3CEC7;--glass-border:rgba(255,255,255,.14);
  --glass-hi:inset 0 1px 0 rgba(255,255,255,.16);--glass-shadow:0 18px 40px -20px rgba(0,0,0,.8)
}
body.page-services{
  --th-bg:#DDEBF0;--th-bg2:#C7DEE6;--th-text:#06222B;--th-mute:#2B4852;--th-accent:#0B6E7F;--th-accent-ink:#FFFFFF;--th-sig:#19C3E0;
  --th-glow1:rgba(25,195,224,.38);--th-glow2:rgba(11,110,127,.32);
  --glass-fill:rgba(255,255,255,.6);--glass-solid:#F4FAFC;--glass-text:#06222B;--glass-mute:#27424C;--glass-border:rgba(6,34,43,.14);
  --glass-hi:inset 0 1px 0 rgba(255,255,255,.9);--glass-shadow:0 18px 40px -22px rgba(6,60,78,.5)
}
body.page-pricing{
  --th-bg:#F3E9D6;--th-bg2:#EBD9B6;--th-text:#1C1507;--th-mute:#4A3C20;--th-accent:#9A3E14;--th-accent-ink:#FFFFFF;--th-sig:#E0A82E;
  --th-glow1:rgba(224,168,46,.42);--th-glow2:rgba(154,62,20,.22);
  --glass-fill:rgba(255,251,242,.66);--glass-solid:#FFFBF2;--glass-text:#1C1507;--glass-mute:#44381E;--glass-border:rgba(28,21,7,.14);
  --glass-hi:inset 0 1px 0 rgba(255,255,255,.9);--glass-shadow:0 18px 40px -22px rgba(100,62,10,.5)
}
body.page-about{
  --th-bg:#1B1424;--th-bg2:#271B33;--th-text:#F8F0EC;--th-mute:#CDBFCC;--th-accent:#FFA17E;--th-accent-ink:#2A1208;--th-sig:#FF6F61;
  --th-glow1:rgba(255,111,97,.30);--th-glow2:rgba(140,90,200,.34);
  --glass-fill:rgba(30,20,40,.76);--glass-solid:#241A30;--glass-text:#F8F0EC;--glass-mute:#D3C6D2;--glass-border:rgba(255,255,255,.15);
  --glass-hi:inset 0 1px 0 rgba(255,255,255,.17);--glass-shadow:0 18px 40px -20px rgba(0,0,0,.75)
}
body.page-book{
  --th-bg:#0F3325;--th-bg2:#154532;--th-text:#F4F8F5;--th-mute:#C3D9CD;--th-accent:#C9F25C;--th-accent-ink:#0B2216;--th-sig:#C9F25C;
  --th-glow1:rgba(201,242,92,.26);--th-glow2:rgba(61,242,160,.22);
  --glass-fill:rgba(10,38,27,.78);--glass-solid:#0E3023;--glass-text:#F4F8F5;--glass-mute:#C9DDD2;--glass-border:rgba(255,255,255,.16);
  --glass-hi:inset 0 1px 0 rgba(255,255,255,.18);--glass-shadow:0 18px 40px -20px rgba(0,0,0,.7)
}
body.page-legal{
  --th-bg:#F6F6F4;--th-bg2:#EDEDE8;--th-text:#0A0A0A;--th-mute:#3F3F3A;--th-accent:#2D6A4F;--th-accent-ink:#FFFFFF;--th-sig:#2D6A4F;
  --th-glow1:rgba(45,106,79,.12);--th-glow2:rgba(45,106,79,.06);
  --glass-fill:#FFFFFF;--glass-solid:#FFFFFF;--glass-text:#0A0A0A;--glass-mute:#3F3F3A;--glass-border:rgba(10,10,10,.14)
}

/* ---------- 3 type ---------- */
body{font:400 var(--fs-body)/var(--text-leading) var(--font-text);letter-spacing:var(--text-tracking)}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:var(--display-weight);letter-spacing:var(--display-tracking);text-wrap:balance}
h1{line-height:1.04}h2{line-height:1.08}h3{line-height:1.16;letter-spacing:-.012em}
h1 em,h2 em,h3 em{font-style:normal}
.lede{font-size:var(--fs-lede);line-height:1.45;max-width:var(--measure)}
.lede,.sec-head p:not(.eyebrow),.demo .d,.cnote{font-weight:400}
.eyebrow{margin-bottom:var(--sp-3)}
p,li{text-wrap:pretty}
strong,b{font-weight:700}
.eyebrow,.kicker,.tag,.price-tag,.demo h3 small,.from small{font-family:var(--font-text);font-size:var(--fs-meta);font-weight:700;letter-spacing:.08em}
.brand,.foot-word{font-family:var(--font-logo);font-weight:600}   /* the ONLY place Fraunces is used */
.btn{font-family:var(--font-text);font-weight:700;letter-spacing:.005em}
.nav a,.menu-btn,.top-r a.pl{font-family:var(--font-text);font-weight:600}
.txt-link{font-weight:700}
/* numerals: lining everywhere, tabular only on prices/counters/timecodes/phones */
*,*::before,*::after{font-variant-numeric:lining-nums}
.v,.from,.price,.ledger .v,.count,.tc,.exif,.stats b,.big-phone,.foot-phone,.eyebrow b,.mx-price span,.mx-phone,.rn-head .count,.tray-h .sum b,.fbar button i,.promise-n{font-variant-numeric:lining-nums tabular-nums}

/* ---------- 4 glass ----------
   .glass is the one panel. Text sits on the fill, never on the raw background behind. Fill alpha is chosen for what is behind:
     calm colour field (aurora)      .58-.66 light / .74-.80 dark
     photo, 3D or video behind       add .over  ->  .86+ and NO blur (never blur over playing video)
   Fallbacks: @supports not (backdrop-filter), html.lite (set by js/boot.js), and forced-colors all get an opaque --glass-solid. */
.glass{position:relative;border-radius:var(--panel-r);padding:var(--panel-pad);color:var(--glass-text);background:var(--glass-fill);
  border:1px solid var(--glass-border);box-shadow:var(--glass-hi),var(--glass-shadow);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat))}
.glass h2,.glass h3,.glass strong{color:var(--glass-text)}
.glass p,.glass li,.glass .d{color:var(--glass-mute)}
.glass .glass{-webkit-backdrop-filter:none;backdrop-filter:none}                      /* never nest blur */
.glass.over{background:color-mix(in srgb,var(--glass-solid) 90%,transparent);-webkit-backdrop-filter:none;backdrop-filter:none}
.glass.d{--glass-fill:rgba(12,20,17,.78);--glass-solid:#101A16;--glass-text:#F3F5F1;--glass-mute:#C3CEC7;--glass-border:rgba(255,255,255,.14);--glass-hi:inset 0 1px 0 rgba(255,255,255,.16);--glass-shadow:0 18px 40px -20px rgba(0,0,0,.8)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass{background:var(--glass-solid);-webkit-backdrop-filter:none;backdrop-filter:none}
}
html.lite .glass{background:var(--glass-solid);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:var(--glass-hi)}
@media (forced-colors:active){.glass{background:Canvas;color:CanvasText;border-color:CanvasText;backdrop-filter:none}}

/* calm colour fields to sit glass on. Smooth gradients only, no texture, no photo, never behind running text without a panel. */
.aurora{position:relative;isolation:isolate;background:
  radial-gradient(circle var(--blob) at 12% 8%,var(--th-glow2),transparent),
  radial-gradient(circle var(--blob) at 92% 30%,var(--th-glow1),transparent),
  radial-gradient(circle var(--blob) at 40% 100%,var(--th-glow2),transparent),var(--th-bg)}

/* ---------- 5 copy-rule parts: kicker (2-3 words) / headline (2-6 words) / one or two short lines ---------- */
.panel-k{margin:0 0 var(--sp-2);font:700 var(--fs-meta)/1.2 var(--font-text);letter-spacing:.08em;text-transform:uppercase;color:var(--th-accent)}
.glass .panel-k{color:var(--glass-text);opacity:.82}
.panel-h{margin:0 0 var(--sp-2);font:var(--display-weight) var(--h3)/1.12 var(--font-display);letter-spacing:-.015em;color:var(--glass-text)}
.panel-p{margin:0;max-width:30ch;font-size:var(--fs-body);line-height:1.5}
.panel-grid{display:grid;gap:var(--sp-4);grid-template-columns:1fr}
@media (min-width:768px){.panel-grid.c3{grid-template-columns:repeat(3,minmax(0,1fr))}.panel-grid.c2{grid-template-columns:repeat(2,minmax(0,1fr))}.panel-grid{gap:var(--sp-5)}}

/* ---------- 6 home ---------- */
body.home{--m:120px}
@media (max-width:1100px){body.home{--m:48px}}
@media (max-width:760px){body.home{--m:20px}}
/* hero: copy never sits on the video; headline in white on the ink hero */
.hero .kicker{color:#C9D8CF;font-size:var(--fs-meta)}
.hero .sub{font-size:var(--fs-lede);color:#D6DDD8}
.hero h1{max-width:11em}
.hero h1 em{color:var(--th-sig)}
.hero-cta .or,.hero-cta .or a{font-size:var(--fs-body)}
.nb-cap{font-family:var(--font-poster);font-weight:400}
/* eyebrow */
.eyebrow{color:var(--th-accent)}
.eyebrow b{color:var(--th-text)}
.dark .eyebrow,.cpt .eyebrow{color:var(--th-sig)}
.dark .eyebrow b{color:#F6F6F4}
.dark .eyebrow b::after{color:var(--th-sig)}
body.home .dark .sec-head p:not(.eyebrow),body.home .dark .cnote{color:#C9D3CD}
body.home .dark h2 em{color:var(--th-sig)}
/* Numerals, prices and phone numbers use the display face */
.eyebrow b,.v,.from,.big-phone,.foot-phone,a[href^="tel"],.count,.tc,.exif{font-family:var(--font-display)}
.hero-cta .or a{font-weight:600}
/* family: three cards on a calm green field */
body.home .family{background:#F6F6F4;isolation:isolate;border-bottom:0}
@media (min-width:900px){body.home .family .l{grid-column:1/span 8}body.home .family .r{grid-column:1/-1;margin-top:var(--sp-6)}}
@media (max-width:899px){body.home .family .r{margin-top:var(--sp-6)}}
body.home .promise{display:grid;gap:var(--sp-4);border:0;grid-template-columns:1fr;overflow-x:clip}
body.home .promise li{display:block;transition:transform .25s}
body.home .promise li:hover{padding-left:var(--panel-pad);transform:translateY(-3px)}
body.home .promise li>b{width:40px;height:40px;margin:0 0 var(--sp-3)}
body.home .promise strong{font-size:var(--h3);line-height:1.12;margin-bottom:var(--sp-2)}
body.home .promise span{color:var(--glass-mute);font-size:var(--fs-body);line-height:1.5}
body.home .promise span strong{color:var(--glass-text)}
@media (min-width:768px){body.home .promise{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-5)}}
@media (min-width:1100px){body.home .promise{grid-template-columns:repeat(4,minmax(0,1fr))}}
body.home .r-note{grid-column:1/-1;margin:var(--sp-5) 0 0;color:var(--th-mute);font-size:var(--fs-small)}
/* sections */
body.home .sec-head p:not(.eyebrow){color:var(--th-mute);font-size:var(--fs-body)}
body.home .sec-head{margin-bottom:var(--sp-6)}
body.home .sec{padding-block:var(--sp-8)}
@media (min-width:768px){body.home .sec{padding-block:calc(var(--sp-8)*1.3)}}
/* tile captions and CTA tile: solid, over video, never blurred */
body.home .tile .cap{font-size:var(--fs-meta)}
body.home .tile .cap b{background:rgba(8,12,10,.88);font-weight:700}
body.home .t-cta{background:linear-gradient(135deg,#1F4E39,#2D6A4F);border:1px solid rgba(255,255,255,.18);box-shadow:var(--glass-hi),0 24px 50px -28px rgba(20,60,42,.9)}
body.home .t-cta p{font-size:var(--fs-body);color:#E6F3EC}
/* demos: each is a glass card on a mist field */
body.home .demos{--fade-c:var(--th-bg2);background:
  var(--fade),
  radial-gradient(circle var(--blob) at 0% 20%,var(--th-glow2),transparent),
  radial-gradient(circle var(--blob) at 100% 70%,var(--th-glow1),transparent),var(--th-bg2);border-block:0;isolation:isolate}
body.home .demo .d{color:var(--glass-mute);font-size:var(--fs-body)}
body.home .demo h3 small{color:var(--th-accent)}
/* prices: ledger rows as glass cards */
body.home #prices{background:#F6F6F4;isolation:isolate}
body.home .ledger{border:0;display:grid;gap:var(--sp-3)}
body.home .ledger li{align-items:center;padding:var(--sp-4) var(--sp-5)}
body.home .ledger.bk3 li:hover{padding-left:var(--sp-5)}
body.home .ledger .n small{color:var(--glass-mute);font-size:var(--fs-small)}
body.home .ledger .v small{color:var(--glass-mute);font-size:var(--fs-meta)}
/* where we work + book */
body.home .where{background:var(--th-bg2);border-top:0}
body.home .reach li{border-color:rgba(10,10,10,.18)}
body.home .reach em{color:var(--th-mute);font-style:normal;font-size:var(--fs-small)}
body.home .book{background:#F6F6F4;border-top:0;isolation:isolate}
body.home .fine,body.home address{color:#1F2A24;font-size:var(--fs-small)}

/* ---------- 7 work: the darkroom ---------- */
body.page-work{--paper:var(--th-bg);--ink:var(--th-text);--mute:var(--th-mute);--rule:rgba(255,255,255,.16);--card:var(--th-bg2);--green:#5FD19A;--green-d:#8FE3B8;
  background:var(--th-bg);color:var(--th-text);--m:120px}
@media (max-width:1100px){body.page-work{--m:48px}}
@media (max-width:760px){body.page-work{--m:20px}}
body.page-work .top{background:rgba(11,16,14,.94);border-bottom-color:rgba(255,255,255,.12)}
body.page-work .mark{background:#5FD19A}
body.page-work .btn{color:var(--th-accent-ink)}
body.page-work .btn.line{color:var(--th-text);border-color:rgba(243,245,241,.7)}
body.page-work .btn.line:hover{background:var(--th-text);color:var(--th-bg)}
body.page-work .btn:hover{background:#8FE3B8;border-color:#8FE3B8;color:var(--th-accent-ink)}
body.page-work .nav a.book{color:var(--th-accent-ink)}
body.page-work .nav a:hover{background:rgba(255,255,255,.1)}
body.page-work .menu-btn,body.page-work .top-r a.pl{color:var(--th-text)}
body.page-work .nav a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--th-sig)}
body.page-work .pg-head{background:
  linear-gradient(to top,var(--th-bg),transparent 90px),
  radial-gradient(circle var(--blob) at 8% 16%,var(--th-glow1),transparent),
  radial-gradient(circle var(--blob) at 100% 40%,var(--th-glow2),transparent),var(--th-bg);isolation:isolate}
body.page-work .pg-head h1 em{color:var(--th-sig)}
body.page-work .pg-head .lede,body.page-work .lede{color:var(--th-mute)}
body.page-work .eyebrow{color:var(--th-accent)}
body.page-work .eyebrow b{color:var(--th-text)}
body.page-work .eyebrow b::after{color:var(--th-sig)}
body.page-work h2 em{color:var(--th-sig)}
body.page-work .subnav{background:rgba(11,16,14,.9);border-color:rgba(255,255,255,.14);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
html.lite body.page-work .subnav{background:#0B100E;-webkit-backdrop-filter:none;backdrop-filter:none}
body.page-work .subnav a,body.page-work .subnav button{border-color:rgba(243,245,241,.55);color:var(--th-text)}
body.page-work .subnav a:hover,body.page-work .subnav button:hover{background:rgba(255,255,255,.12)}
body.page-work .subnav a[aria-current="true"],body.page-work .subnav button[aria-pressed="true"]{background:var(--th-text);color:var(--th-bg);border-color:var(--th-text)}
body.page-work .wsec{background:var(--th-bg)}
body.page-work .wsec:nth-of-type(even){background:var(--th-bg2)}
body.page-work .wt{background:#000}
body.page-work .wt:hover{box-shadow:0 22px 44px -22px rgba(0,0,0,.9),0 0 0 1px rgba(227,176,75,.5)}
body.page-work .wt .cap{font-size:var(--fs-meta)}
body.page-work .wt .cap b{background:rgba(6,9,8,.9);color:#F3F5F1;font-weight:700}
body.page-work .wt .cap span{background:#F3F5F1;color:#0A0A0A;font-weight:700}
body.page-work .wt:hover .cap span,body.page-work .wt:focus-visible .cap span{background:var(--th-sig);color:#1A1203}
body.page-work .wt .no{background:#F3F5F1;color:#0A0A0A}
body.page-work .wt.tyler .no{background:var(--th-sig);color:#1A1203}
body.page-work .cta-tile,body.page-work .wwall .cta-tile{background:linear-gradient(150deg,#16402F,#2D6A4F);border:1px solid rgba(255,255,255,.2);color:#fff}
body.page-work .wwall .cta-tile .btn{background:#fff;color:#123324;border-color:#fff}
body.page-work .cpt{background:#060908;border-block:1px solid rgba(255,255,255,.1)}
body.page-work .cpt .eyebrow,body.page-work .cpt h2 em{color:var(--th-sig)}
body.page-work .wc{background:var(--glass-solid);border-color:rgba(255,255,255,.18)}
body.page-work .wc.glass{background:rgba(12,20,17,.72)}
body.page-work .wc-b p{color:var(--th-mute);font-size:var(--fs-body)}
body.page-work .wc-m .k{background:rgba(6,9,8,.92);font-weight:700}
body.page-work .clients2{border-top-color:rgba(255,255,255,.4)}
body.page-work .clients2 a{border-bottom-color:rgba(255,255,255,.16)}
body.page-work .clients2 a:hover .cn{color:var(--th-sig)}
body.page-work .clients2 .nx,body.page-work .clients2 .ar{color:var(--th-accent)}
body.page-work .clients2 .cd{color:var(--th-mute)}
body.page-work .foot{background:#060908;color:var(--th-text);border-top:1px solid rgba(255,255,255,.12)}
body.page-work .foot a{color:var(--th-text)}
body.page-work .sticky{background:rgba(11,16,14,.96)}

/* ---------- 8 phones and reduced motion ---------- */
@media (max-width:767px){:root{--glass-sat:1.3}}
@media (prefers-reduced-motion:reduce){
  .glass{transition:none}
  body.home .promise li:hover{transform:none}
}

/* numerals in section labels use the display face too (pages.css sets .sec-label .sec-n to the text face) */
.sec-label .sec-n,.eyebrow .sec-n{font-family:var(--font-display)}


/* =====================================================================================================================
   PASS 2 (judge round 1 fixes), 2026-10-30
   ===================================================================================================================== */

/* ---- glass: one panel, lit rim, readable text. Phone fill is a choice: 78% light / 80% dark (blur 10px, sat 1.3) ---- */
:root{--glass-phone:78%;--rim-a:rgba(255,255,255,.95);--rim-b:rgba(255,255,255,.18);--rim-c:rgba(45,106,79,.45)}
body.page-work,body.page-about,body.page-book,.glass.d{--glass-phone:80%;--rim-a:rgba(255,255,255,.55);--rim-b:rgba(255,255,255,.08);--rim-c:rgba(95,209,154,.4)}
.glass :where(p,li,.d){color:var(--glass-mute)}
.glass::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:3;
  background:linear-gradient(140deg,var(--rim-a),var(--rim-b) 40%,var(--rim-c));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  @media (max-width:767px){html:not(.lite) .glass:not(.over){background:color-mix(in srgb,var(--glass-solid) var(--glass-phone),transparent)}}
}
html.lite .glass::after{opacity:.6}

/* a stage with real edges for the frost to show: deep brand-green slab, a hard-edged light band and two neon rings.
   Sits ONLY behind panel groups, never behind loose text, never over video. Pure gradients, no blur, no extra layers. */
body.home .promise,body.home .ledger,body.home .demo-grid,body.home .book-r,body.page-work .wcgrid{position:relative;isolation:isolate}
body.home .promise::before,body.home .ledger::before,body.home .demo-grid::before,body.home .book-r::before,body.page-work .wcgrid::before{
  content:"";position:absolute;z-index:-1;inset:-16px -10px;border-radius:30px;pointer-events:none;
  background:
    radial-gradient(circle at 90% 6%,transparent 0 78px,rgba(61,242,160,.6) 79px 81px,transparent 82px 104px,rgba(61,242,160,.28) 105px 106px,transparent 107px),
    radial-gradient(circle at 6% 96%,transparent 0 120px,rgba(61,242,160,.34) 121px 122px,transparent 123px),
    linear-gradient(118deg,transparent 0 46%,rgba(61,242,160,.13) 46.2% 63%,transparent 63.2%),
    linear-gradient(165deg,#0C3022 0%,#175A41 52%,#0B2A1E 100%)}
body.page-work .wcgrid::before{inset:-20px -12px;border-radius:28px;background:
    radial-gradient(circle at 88% 8%,transparent 0 90px,rgba(227,176,75,.62) 91px 93px,transparent 94px 118px,rgba(227,176,75,.26) 119px 120px,transparent 121px),
    radial-gradient(circle at 4% 92%,transparent 0 140px,rgba(95,209,154,.36) 141px 142px,transparent 143px),
    linear-gradient(118deg,transparent 0 44%,rgba(95,209,154,.12) 44.2% 62%,transparent 62.2%),
    linear-gradient(165deg,#07120D 0%,#15382A 55%,#0A1511 100%)}
@media (min-width:768px){body.home .promise::before,body.home .ledger::before,body.home .demo-grid::before,body.home .book-r::before{inset:-24px -20px}}

/* ---- eyebrow numerals, where-we-work reading surface ---- */
.eyebrow b{margin-right:var(--sp-2)}
body.home .where .lede{color:#1F2A24;max-width:28ch}
body.home .where{--th-mute:#1F2A24}
body.home .reach em{color:#26322B}

/* ---- numerals: numerals use the UI face on digit-heavy strings; proportional figures on prices ---- */
.foot p,.foot-base p,.foot-r p,.foot-r a,address,.wc-f .from,.wc-f .from em,.promise-n,.stats b,.pr .pv,.mx-price,.mx-phone,.big-phone,.foot-phone,
.nav.open li:not(.menu-x) a:not(.book)::before{font-family:var(--font-display)}
.foot-base p,address{font-weight:600}
body .v,body .from,body .pv,body .ledger .v,body .ledger .v small,body .wc-f .from,body .mx-price span,body .big-phone,body .foot-phone,body .promise-n{
  font-variant-numeric:lining-nums proportional-nums;font-feature-settings:"lnum" 1,"pnum" 1,"kern" 1;letter-spacing:-.01em}
body .tc,body .count,body .rn-head .count{font-variant-numeric:lining-nums tabular-nums;font-feature-settings:"lnum" 1,"tnum" 1}

/* ---- ledger rows: tap the row ---- */
body.home .ledger li{position:relative}
body.home .ledger .bk{position:static}
body.home .ledger .bk::after{content:"";position:absolute;inset:0;border-radius:inherit}
@media (max-width:767px){
  body.home .ledger li:nth-child(n+5){display:none}
  body.home .ledger .bk{position:relative;display:block;overflow:hidden;white-space:nowrap;text-indent:64px;color:transparent!important;width:44px;min-width:44px;height:44px;padding:0;border-radius:50%}
  body.home .ledger .bk::before{content:"";position:absolute;left:15px;top:16px;width:10px;height:10px;border:solid var(--glass-text);border-width:2.5px 2.5px 0 0;transform:rotate(45deg)}
  body.home .ledger li{min-height:60px}
}

/* ---- booking form: 4 fields up front, the rest folded ---- */
.form .more{margin:0 0 var(--sp-4)}
.form .more summary{display:flex;align-items:center;min-height:44px;cursor:pointer;font:700 var(--fs-small)/1.2 var(--font-text);color:var(--glass-text);list-style:none}
.form .more summary::-webkit-details-marker{display:none}
.form .more summary::before{content:"+";display:inline-grid;place-items:center;width:24px;height:24px;margin-right:var(--sp-2);border-radius:50%;background:var(--th-accent);color:var(--th-accent-ink);font:700 18px/1 var(--font-text)}
.form .more[open] summary::before{content:"\2212"}

/* ---- concept cards on home: type label lives in the panel, nothing sits on the thumbnail ---- */
.cc-v em{display:none}
.cc-b .panel-k{display:block;margin:0;color:#8FD6B2;opacity:1;font-size:var(--fs-meta)}

/* ---- full-bleed photo between sections 05 and 06 (pace) ---- */
.photo-band{margin:0;position:relative;height:clamp(220px,46vw,440px);overflow:hidden;background:#0A0A0A}
.photo-band img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 58%}

/* ---- hero: contrast, one bold button, H1 per token ---- */
.hero .btn{background:var(--th-sig);border-color:var(--th-sig);color:#04120B}
.hero .btn:hover{background:#fff;border-color:#fff;color:#04120B}
@media (min-width:1101px){
  body.home .hero h1{font-size:var(--h1p);max-width:9em}
  body.home .hero h1 .ln{white-space:normal}
}
@media (max-width:767px){
  body.home .top.on-hero{background:rgba(8,12,10,.94);border-bottom:1px solid rgba(255,255,255,.12)}
  body.home .top.on-hero::before{display:none}
  body.home .hero-media{top:64px;height:calc(100% - 430px)}
  body.home #opener{top:64px;height:calc(100% - 430px)}
  body.home .hero .kicker{margin-top:22px;white-space:nowrap}
  body.home .hero h1{font-size:var(--h1p)}
  body.home .hero h1 .ln{white-space:normal}
  body.home .snd,body.home .hero .csc-replay{top:auto;bottom:calc(366px + 12px);background:rgba(8,12,10,.88);color:#fff;border-color:#fff}
  body.home .snd{right:16px}
  body.home .hero .csc-replay{right:72px}
}

/* ---- tap targets 44px ---- */
@media (max-width:767px){
  .txt-link:not(.cnote .txt-link):not(.cta-r .txt-link),.hero .or a,.foot a,.foot-base a,.foot-r a{display:inline-flex;align-items:center;min-height:44px}
  .hero-cta .or{display:inline-flex;align-items:center;flex-wrap:wrap;gap:0 6px}
  .brand{min-height:44px}
}

/* ---- page-end strip: the sticky bar's padding must not expose the paper body ---- */
@media (max-width:767px){
  body.has-sticky{padding-bottom:0!important}
  body.has-sticky .foot{padding-bottom:84px}
}

/* ---- WORK ---- */
body.page-work .top{background:#0B100E;-webkit-backdrop-filter:none;backdrop-filter:none}
body.page-work .subnav{background:#0B100E;-webkit-backdrop-filter:none;backdrop-filter:none;border-block:1px solid rgba(255,255,255,.14)}
body.page-work .subnav.fbar{padding:0}
body.page-work .subnav .wrap{padding-block:6px}
body.page-work .wsec .lede,body.page-work .cpt .lede,body.page-work .pg-head .lede,body.page-work .wc-b p{font-weight:500;color:var(--th-mute)}
body.page-work .wt{outline:1px solid rgba(255,255,255,.2);outline-offset:-1px}
/* concept cards: dark glass on the darkroom stage; one primary action, one secondary, fixed row */
body.page-work .wc.glass{padding:0;border-color:var(--glass-border)}
body.page-work .wc-b{padding:var(--panel-pad);gap:var(--sp-2)}
body.page-work .wc-b .panel-k{margin:0;color:var(--th-accent);opacity:1}
body.page-work .wc-b h3{margin:0;color:var(--glass-text)}
body.page-work .wc-b p:not(.panel-k){margin:0;max-width:30ch;font-size:var(--fs-body);line-height:1.5}
body.page-work .wc-f{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3);margin-top:var(--sp-3)}
body.page-work .wc-f .from{grid-column:1/-1;font-size:var(--h3);font-weight:700;color:var(--glass-text)}
body.page-work .wc-f .from em{display:block;margin:2px 0 0;font:500 var(--fs-small)/1.3 var(--font-text);color:var(--glass-mute);opacity:1}
body.page-work .wc-f .btn{justify-content:center;min-height:44px;width:100%}
body.page-work .wc-f .btn.line{color:var(--th-text);border-color:rgba(243,245,241,.6);background:transparent}
body.page-work .wc-f .btn.line:hover{background:var(--th-text);color:var(--th-bg)}
/* CTA tile = dark glass over a lit field */
body.page-work .wwall .cta-tile.glass{color:var(--glass-text);border:1px solid var(--glass-border);background:
  linear-gradient(var(--glass-fill),var(--glass-fill)),
  radial-gradient(circle at 92% 8%,transparent 0 60px,rgba(227,176,75,.7) 61px 63px,transparent 64px),
  radial-gradient(circle at 10% 100%,rgba(95,209,154,.55),transparent 60%),linear-gradient(150deg,#15382A,#0B1A13)}
body.page-work .wwall .cta-tile h3{color:var(--glass-text)}
body.page-work .wwall .cta-tile p{color:var(--glass-mute);font-weight:500;font-size:var(--fs-body)}
body.page-work .wwall .cta-tile .btn{background:var(--th-sig);border-color:var(--th-sig);color:#1A1203}

@media (max-width:767px){
  /* chrome: header 64 + filter bar ~56; the filter bar leaves on scroll down and the Book bar takes its place */
  body.page-work .subnav{top:64px;transition:transform .3s ease,opacity .2s ease}
  body.page-work.sub-off .subnav{transform:translateY(-110%);opacity:0;pointer-events:none}
  body.page-work:not(.sub-off) .sticky{transform:translateY(110%)!important;visibility:hidden!important}
  /* grid: no stagger, odd last tile spans */
  body.page-work .wwall .wt:nth-child(n){margin-top:0}
  /* tile caption on phones: round 44px play button (the bar itself is global, see PASS 4 fix 7) */
  body.page-work .wt .cap{padding:0 4px 0 12px;gap:6px}
  body.page-work .wt .cap span{position:relative;display:block;overflow:hidden;white-space:nowrap;text-indent:64px;color:transparent;width:44px;height:44px;padding:0;border-radius:50%;flex:none;background:var(--th-sig)}
  body.page-work .wt .cap svg{position:absolute;left:13px;top:13px;width:18px;height:18px;color:#1A1203}
  body.page-work .wt .no{top:10px;left:10px}
}
body.home .promise li{padding:var(--panel-pad)}
body.home .demo.glass{padding:var(--panel-pad)}

/* ---- burned-in microtype in thumbnails: crop it out (tile loops) and zoom concept thumbs onto their big shapes ---- */
.wt img,.wt video,.wc-m img,.wc-m video,.cc-v video{transform-origin:var(--ox,50%) var(--oy,50%);scale:var(--zs,1)}
.cc-v img,.wc-m img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cc:hover .cc-v img{scale:1.04}
.cc-v img{transition:scale .8s cubic-bezier(.16,.84,.24,1)}
@media (prefers-reduced-motion:reduce){.cc:hover .cc-v img{scale:1}}
@media (max-width:767px){body.home .ledger li{display:grid;grid-template-columns:minmax(0,1fr) auto 44px;gap:var(--sp-3);align-items:center}}
.mgrid,.mgrid *,.sw span{font-family:var(--font-display)}
/* eyebrow inside .sec-head: site.css `.sec-head p` (0,1,1) used to win; this makes all eight labels identical */
.sec-head p.eyebrow{font-size:var(--fs-meta);font-weight:700;line-height:1;letter-spacing:.14em;max-width:none;color:var(--th-accent);margin:0 0 var(--sp-3)}
.dark .sec-head p.eyebrow,body.home .dark .sec-head p.eyebrow{color:var(--th-sig)}
@media (max-width:767px){.big-phone{display:inline-flex;align-items:center;min-height:44px}.foot-base nav a,.foot nav a{min-width:0;justify-content:flex-start}}
@media (min-width:1101px){body.home .hero h1{text-wrap:balance}body.home .hero h1 .ln{display:block}}

/* =====================================================================================================================
   PASS 3 (judge round 2 fixes), 2026-10-30
   ===================================================================================================================== */

/* ---- 3 home glass: bright frosted white, near #EEF3F0 over the stage; darker body text ---- */
:root{--glass-phone:82%}
body.home{--glass-fill:rgba(252,254,253,.7);--glass-solid:#FFFFFF;--glass-mute:#1F2A24;--glass-sat:1.4;--glass-phone:72%}
body.home .family .lede,body.home .book .lede,body.home #prices .lede,body.home .where .lede{color:#1F2A24}

/* ---- 4 stages: full-bleed light, one different shape per section, no slab. Pure gradients, hard edges so the frost has something to blur. ---- */
body.home .promise::before,body.home .ledger::before,body.home .demo-grid::before,body.home .book-r::before,body.page-work .wcgrid::before{
  inset:-16px calc(var(--m)*-1);border-radius:0}
body.home .demo-grid::before,body.home .book-r::before{display:none}
body.home .promise::before{background:
  radial-gradient(circle at 94% 12%,#7BEAC0 0 92px,transparent 93px),
  radial-gradient(circle at 94% 12%,transparent 0 112px,rgba(30,168,120,.55) 113px 115px,transparent 116px),
  linear-gradient(112deg,transparent 0 55%,rgba(30,168,120,.34) 55.2% 72%,transparent 72.2%),
  radial-gradient(circle at 4% 90%,rgba(45,106,79,.3) 0 70px,transparent 71px)}
body.home .ledger::before{background:
  radial-gradient(circle at 4% 30%,#F2C86B 0 80px,transparent 81px),
  linear-gradient(68deg,transparent 0 40%,rgba(30,168,120,.36) 40.2% 58%,transparent 58.2%),
  radial-gradient(circle at 98% 92%,transparent 0 96px,rgba(45,106,79,.5) 97px 99px,transparent 100px)}
body.page-work .wcgrid::before{inset:-20px calc(var(--m)*-1);background:
    radial-gradient(circle at 88% 8%,transparent 0 90px,rgba(227,176,75,.9) 91px 94px,transparent 95px 118px,rgba(227,176,75,.5) 119px 121px,transparent 122px),
    radial-gradient(circle at 4% 92%,transparent 0 140px,rgba(95,209,154,.6) 141px 143px,transparent 144px),
    linear-gradient(118deg,transparent 0 40%,rgba(95,209,154,.3) 40.2% 64%,transparent 64.2%),
    linear-gradient(165deg,#12382A 0%,#1E5240 52%,#0F2A20 100%)}
@media (min-width:768px){
  body.home .promise::before,body.home .ledger::before,body.page-work .wcgrid::before{inset:-24px -20px;border-radius:30px}
  body.page-work .wcgrid::before{inset:-24px -20px}
}

/* ---- 1 + 2 fallback: weak phones and no-backdrop browsers get solid panels and no stage art behind text ---- */
body.page-work .wc-b p.panel-k{font-weight:700}
html.lite body.page-work .wc.glass,html.lite body.page-work .wwall .cta-tile.glass{background:var(--glass-solid);-webkit-backdrop-filter:none;backdrop-filter:none}
html.lite body.page-work .wcgrid::before,html.lite body.home .promise::before,html.lite body.home .ledger::before,
html.lite body.home .demo-grid::before,html.lite body.home .book-r::before{background:none}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  body.page-work .wc.glass,body.page-work .wwall .cta-tile.glass{background:var(--glass-solid)}
  body.page-work .wcgrid::before,body.home .promise::before,body.home .ledger::before{background:none}
}

/* ---- 7 ledger rows on phones: name | price | chevron on one row ---- */
@media (max-width:767px){
  body.home .ledger li>.n{grid-column:1;grid-row:1}
  body.home .ledger li>.v{grid-column:2;grid-row:1;justify-self:end;text-align:right;font-size:var(--h3)}
  body.home .ledger li>.bk{grid-column:3;grid-row:1;margin:0}
  body.home .ledger li{min-height:0;padding:var(--sp-2) var(--sp-4)}
  body.home .ledger .n small{font-size:var(--fs-small);line-height:1.3;margin-top:2px}
}

/* ---- 11 home tile captions share the Work phone pattern: one solid bar, label, 44px round play ---- */
@media (max-width:767px){
  body.home .tile .vw{position:absolute;inset:0 0 56px 0;height:auto}
  body.home .tile .cap{position:absolute;left:0;right:0;bottom:0;height:56px;padding:0 4px 0 12px;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:6px;background:#060908;border-top:1px solid rgba(255,255,255,.18)}
  body.home .wall .wall-r .tile .cap{flex-direction:row;align-items:center;gap:6px}
  body.home .tile .cap b{background:transparent;padding:0;border-radius:0;font-size:var(--fs-meta);line-height:1.2;flex:1;min-width:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  body.home .tile .cap span{position:relative;display:block;overflow:hidden;white-space:nowrap;text-indent:64px;color:transparent;width:44px;height:44px;padding:0;border-radius:50%;flex:none;background:var(--th-sig)}
  body.home .tile .cap svg{position:absolute;left:13px;top:13px;width:18px;height:18px;color:#1A1203}
}

/* ---- 10 Work wall: an odd leftover tile spans the row at 2 columns (phones) and at 3 columns (tablet) ---- */
@media (max-width:900px){
  body.page-work .wwall .wt:last-child:nth-child(odd),body.page-work .wwall .wt:has(+ .cta-tile:last-child):nth-child(odd){grid-column:1/-1;aspect-ratio:16/9}
}

/* ---- 13 hero controls sit 16px inside the video frame on wide screens ---- */
@media (min-width:901px){
  body.home .hero{--ctl-b:calc(var(--b)*2 + (max(100svh,720px) - 72px - var(--b)*3 - var(--hm,540px)*1.3333)/2 + 16px)}
  body.home .snd{right:calc(var(--m) + 16px);bottom:var(--ctl-b)}
  body.home .hero .csc-replay{right:calc(var(--m) + 16px + 52px);bottom:var(--ctl-b)}
}

/* ---- 14 Run demo calendar: dots on phones so the 34px cell keeps its number ---- */
@media (max-width:767px){
  .mgrid .cell .p{display:block;width:8px;height:8px;margin:2px auto 0;padding:0;border-radius:50%;overflow:hidden;text-indent:-999px;white-space:nowrap;font-size:14px}
}

/* ---- 10b three-column band (901-1100): no empty cells in the last row ---- */
@media (min-width:901px) and (max-width:1100px){
  body.page-work .wwall .wt:last-child:nth-child(3n+1),body.page-work .wwall .wt:has(+ .cta-tile:last-child):nth-child(3n+1){grid-column:1/-1;aspect-ratio:16/9;margin-top:0}
  body.page-work .wwall .wt:last-child:nth-child(3n+2),body.page-work .wwall .wt:has(+ .cta-tile:last-child):nth-child(3n+2){grid-column:span 2;aspect-ratio:16/9;margin-top:0}
}

/* =====================================================================================================================
   PASS 4 (judge round 3 fixes), 2026-10-30
   ===================================================================================================================== */

/* ---- 3 Work client list at 901+: name and description in two real columns (the absolute .cp used to collapse the grid) ---- */
@media (min-width:901px){
  body.page-work .clients2 a{grid-template-columns:max-content minmax(0,22em);justify-content:space-between;gap:6px 32px;align-items:center}
  body.page-work .clients2 .cn{grid-column:1}
  body.page-work .clients2 .cd{grid-column:2;text-align:left}
  body.page-work .clients2 .cp{width:168px;box-shadow:6px 6px 0 -2px var(--tint),6px 6px 0 0 var(--ink)}
}

/* ---- 14 button word spacing ---- */
.btn{word-spacing:-.06em}

/* ---- 11 phone footer: first link's text starts on the 20px edge ---- */
@media (max-width:767px){
  body.home .foot2 .foot-base nav{margin-inline:-8px}
}

/* ---- 7 one caption component everywhere: solid bar under the picture on every Work tile, never a pill on the media ---- */
body.page-work .wt::after{display:none}
body.page-work .wt img,body.page-work .wt video{inset:0 0 56px 0;height:calc(100% - 56px)}
body.page-work .wt .cap{left:0;right:0;bottom:0;height:56px;padding:0 8px 0 14px;flex-wrap:nowrap;flex-direction:row;align-items:center;gap:8px;background:#060908;border-top:1px solid rgba(255,255,255,.18)}
body.page-work .wt .cap b{background:transparent;padding:0;border-radius:0;font-size:var(--fs-meta);line-height:1.2;flex:1;min-width:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
body.page-work .wt .cap span{flex:none;padding:8px 12px}
body.page-work .wt .no{top:10px;left:10px}

/* ---- 5/6 burned-in type: keep the clean part of each frame inside the crop ---- */
.wt img[src*="kinetic-c"],.wt video[data-loop*="kinetic-c"]{object-position:50% 75%}
.tile video[data-src*="kinetic-c"]{object-position:50% 90%}
body.page-work .wt img[src*="tile-motion-3d"],body.page-work .wt video[data-loop*="tile-motion-3d"]{object-position:50% 20%}
body.page-work .wt img[src*="mg-knot-3d"],body.page-work .wt video[data-loop*="mg-knot-3d"]{object-position:50% 100%}

/* ---- 8 stage art: no shape ends in a straight cut. Soft light plus whole circles, and the layer itself fades out at its top and bottom ---- */
body.home .promise::before,body.home .ledger::before,body.page-work .wcgrid::before{
  -webkit-mask-image:linear-gradient(transparent,#000 40px,#000 calc(100% - 40px),transparent);
  mask-image:linear-gradient(transparent,#000 40px,#000 calc(100% - 40px),transparent)}
body.home .promise::before{background:
  radial-gradient(circle at 86% 22%,#7BEAC0 0 84px,transparent 85px),
  radial-gradient(circle at 86% 22%,transparent 0 106px,rgba(30,168,120,.6) 107px 110px,transparent 111px),
  radial-gradient(ellipse 85% 26% at 18% 58%,rgba(30,168,120,.42),transparent 72%),
  radial-gradient(circle at 10% 86%,rgba(45,106,79,.32) 0 60px,transparent 61px)}
body.home .ledger::before{background:
  radial-gradient(circle at 12% 24%,#F2C86B 0 76px,transparent 77px),
  radial-gradient(ellipse 90% 20% at 72% 52%,rgba(30,168,120,.4),transparent 72%),
  radial-gradient(circle at 90% 80%,transparent 0 84px,rgba(45,106,79,.55) 85px 88px,transparent 89px)}

/* ---- 10 Work stage: green fades in from the black page instead of cutting; the dead band under it is trimmed ---- */
@media (max-width:767px){body.page-work #concepts{padding-bottom:54px}body.page-work #clients{padding-top:99px}}

/* ---- 12 Where we work: the rings carry their own labels, the list loses its dots ---- */
body.home .rings text{font:700 21px/1 var(--font-text);fill:#0A0A0A;stroke:none}
body.home .reach li{padding-left:0}
body.home .reach li::before{display:none}
@media (max-width:900px){body.home .rings{max-width:320px;margin-inline:auto}}


/* =====================================================================================================================
   PASS 5 (judge round 4 fixes), 2026-10-30
   ===================================================================================================================== */

/* ---- 3 Where we work: ring labels never render under 14px. 21 SVG units x (width/400) >= 15.75px needs the rings >= 300px wide ---- */
body.home .reach-note{grid-column:1/-1;margin:0;color:#1F2A24;font-size:var(--fs-small);font-weight:500}
@media (min-width:901px) and (max-width:1279px){
  body.home .wh-l,body.home .wh-r{grid-column:1/-1}
  body.home .wh-r{margin-top:var(--sp-7);grid-template-columns:300px minmax(0,1fr);gap:var(--sp-7)}
  body.home .rings{max-width:none}
}
@media (min-width:1280px){body.home .wh-r{grid-template-columns:minmax(300px,.9fr) minmax(0,1.1fr)}}
@media (max-width:900px){body.home .rings{max-width:320px;min-width:300px}}
@media (max-width:339px){body.home .rings{min-width:0;width:100%;max-width:none}}

/* ---- 6 Work concept cards are real glass at every width; the CTA tile's own opaque layers sit under it, so its blur is dropped ---- */
body.page-work .wwall .cta-tile.glass{-webkit-backdrop-filter:none;backdrop-filter:none}

/* ---- 7 + 8 + 9 stage art: no vertical edges, no coins, no stumps. One soft neon field behind the panel centre + one thin whole ring ---- */
body.home .promise::before,body.home .ledger::before,body.page-work .wcgrid::before{
  inset:-32px calc(var(--m)*-1);border-radius:0;
  -webkit-mask-image:linear-gradient(transparent,#000 56px,#000 calc(100% - 56px),transparent),linear-gradient(90deg,transparent,#000 calc(var(--m)*.9),#000 calc(100% - var(--m)*.9),transparent);
  mask-image:linear-gradient(transparent,#000 56px,#000 calc(100% - 56px),transparent),linear-gradient(90deg,transparent,#000 calc(var(--m)*.9),#000 calc(100% - var(--m)*.9),transparent);
  -webkit-mask-composite:source-in;mask-composite:intersect}
body.home .promise::before{background:
  radial-gradient(circle at 50% 50%,transparent 0 176px,rgba(30,168,120,.14) 177px 196px,rgba(30,168,120,.62) 197px 201px,transparent 202px),
  radial-gradient(ellipse 66% 60% at 50% 50%,rgba(61,242,160,.62),rgba(30,168,120,.26) 48%,transparent 76%)}
body.home .ledger::before{background:
  radial-gradient(circle at 50% 46%,transparent 0 176px,rgba(30,168,120,.14) 177px 196px,rgba(30,168,120,.62) 197px 201px,transparent 202px),
  radial-gradient(ellipse 66% 60% at 50% 46%,rgba(61,242,160,.6),rgba(30,168,120,.26) 48%,transparent 76%)}
body.page-work .wcgrid::before{background:
  radial-gradient(circle at 50% 50%,transparent 0 150px,rgba(227,176,75,.7) 151px 153px,transparent 154px),
  radial-gradient(ellipse 70% 52% at 30% 50%,rgba(95,209,154,.3),transparent 72%),
  linear-gradient(165deg,#0C1D16 0%,#12382A 52%,#0A1511 100%)}

/* ---- 10 phones: concepts and the four demos are swipe rails (no scroll hijack, the next card peeks) ---- */
@media (max-width:767px){
  body.home #concepts .cgrid,body.home .demo-grid{display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
    margin-inline:calc(var(--m)*-1);padding-inline:var(--m);padding-block:4px 8px;scroll-padding-inline:var(--m);scrollbar-width:none;align-items:stretch}
  body.home #concepts .cgrid::-webkit-scrollbar,body.home .demo-grid::-webkit-scrollbar{display:none}
  body.home #concepts .cc{flex:0 0 min(86vw,340px);grid-column:auto;scroll-snap-align:start}
  body.home .demo-grid>.demo{flex:0 0 min(86vw,340px);grid-column:auto!important;scroll-snap-align:start;min-width:0}
}

/* ---- 11 one caption component: a solid bar under the picture on every home In Motion tile, and one row on small home wall tiles ---- */
.mgt .vw{inset:0 0 56px 0}
.mgt::after{display:none}
.mgt .cap{left:0;right:0;bottom:0;height:56px;display:flex;align-items:center;padding:0 14px;background:#060908;border-top:1px solid rgba(255,255,255,.18)}
.mgt .cap b{background:transparent;color:#F3F5F1;padding:0;border-radius:0;font-weight:700}
@media (hover:hover){.mgt:hover .cap b{background:transparent;color:#8FD6B2}}
@media (min-width:768px){
  body.home .wall .wall-r .tile .cap{flex-direction:row;flex-wrap:nowrap;align-items:center;gap:8px}
  body.home .wall .wall-r .tile .cap b{flex:1;min-width:0}
  body.home .wall .wall-r .tile .cap span{flex:none;padding:8px 12px}
}

/* ---- 12 inline links inside a sentence keep even line spacing; the 44px hit area is a pseudo-element ---- */
.cnote .txt-link,.cta-r .txt-link{position:relative;display:inline;min-height:0}
.cnote .txt-link::after,.cta-r .txt-link::after{content:"";position:absolute;inset:-12px 0}

/* ---- 13 word spacing ---- */
.foot-base a,.hero-cta .or{word-spacing:-.06em}

/* ---- 14 ledger sub-lines: Libre Franklin 500, one line ---- */
body.home .ledger .n small{font-family:var(--font-text);font-weight:500;font-size:var(--fs-small);line-height:1.3}

/* ---- 16 + 17 Work on phones: no twin dark frames, no dead bands ---- */
@media (max-width:767px){
  body.page-work .wcgrid .wc:first-child .wc-m{display:block}
  body.page-work .sec{padding-block:calc(var(--b)*1.8)}
  body.page-work .sec[style*="border-top"]{border-top:0!important}
}
#motion .wwall .cta-tile{min-height:0}
@media (min-width:1101px){#motion .wwall .cta-tile{grid-column:span 1;aspect-ratio:9/16}#motion .wwall .cta-tile h3{font-size:1.5rem}}

/* ---- 18 Work client hover: the preview never prints over the description ---- */
@media (min-width:901px){body.page-work .clients2 a{grid-template-columns:max-content minmax(0,16em)}}

/* ---- 10b phone length: tighter section rhythm, In Motion rows become swipe rails, shorter closing band ---- */
@media (max-width:767px){
  body.home .sec{padding-block:var(--sp-7)}
  body.home .sec-head{margin-bottom:var(--sp-5)}
  body.home .mg-row{display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
    margin-inline:calc(var(--m)*-1);padding-inline:var(--m);scroll-padding-inline:var(--m);scrollbar-width:none;align-items:flex-start}
  body.home .mg-row::-webkit-scrollbar{display:none}
  body.home .mg-row .mgt{flex:0 0 42vw;width:auto;scroll-snap-align:start;margin-top:0!important}
  body.home .foot2 .foot-cta{padding-block:calc(var(--b)*2) calc(var(--b)*1.5)}
}
@media (max-width:767px){body.home .family{padding-block:var(--sp-7)}}
@media (max-width:767px){body.home .mg-row.b .mgt{aspect-ratio:9/16}}
.mgt video[data-src*="hazy-c"],.wt video[data-loop*="hazy-c"],.wt img[src*="hazy-c"]{object-position:50% 0}
/* a wide (spanning) look-closer tile keeps its title in the crop */
.wt img[src*="look-d"],.wt video[data-loop*="look-d"]{object-position:50% 40%}
@media (min-width:1101px){.wt img[src*="look-d"],.wt video[data-loop*="look-d"]{object-position:50% 50%}}
@media (max-width:1100px){body.page-work #motion .wwall .wt:has(+ .cta-tile:last-child):nth-child(n){aspect-ratio:4/3}}
@media (max-width:767px){.photo-band{height:170px}}


/* =====================================================================================================================
   PASS E: THE NEON LANGUAGE (angle e). Dark theatre. One idea: light is made by tubes, everything else is lit by it.
   - tubes: thin saturated lines (mint, with gold as the accent) divide sections and sit BEHIND panel groups
   - glass: dark panels that frost the tube light behind them; the edges spill the same colour
   - screens: every tile is a glowing screen, never a bare rectangle
   - reading surfaces are flat near-black; no glow ever sits behind loose text
   ===================================================================================================================== */
:root{--tube:#3DF2A0;--tube-g:#E3B04B;--stage:#060908;--stage2:#0A110E}

/* ---- home takes the darkroom tokens with the mint signature ---- */
body.home{
  --paper:#060908;--ink:#F3F5F1;--mute:#D2DCD6;--rule:rgba(255,255,255,.16);--card:#0A110E;--green:#5FD19A;--green-d:#8FE3B8;
  --th-bg:#060908;--th-bg2:#0A110E;--th-text:#F3F5F1;--th-mute:#D2DCD6;--th-accent:#5FD19A;--th-accent-ink:#04120B;--th-sig:#3DF2A0;
  --glass-fill:rgba(7,13,11,.55);--glass-solid:#0E1814;--glass-text:#F3F5F1;--glass-mute:#D2DCD6;--glass-border:rgba(61,242,160,.5);
  --glass-hi:inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 22px rgba(61,242,160,.10);--glass-shadow:0 0 0 1px rgba(61,242,160,.18),0 0 34px -6px rgba(61,242,160,.42);
  --glass-sat:1.6;--glass-phone:62%;--rim-a:rgba(61,242,160,.95);--rim-b:rgba(61,242,160,.15);--rim-c:rgba(227,176,75,.6);
  background:var(--stage);color:var(--th-text)}
body.page-work{
  --glass-fill:rgba(7,13,11,.55);--glass-solid:#0E1814;--glass-border:rgba(61,242,160,.5);--glass-phone:62%;
  --glass-hi:inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 22px rgba(61,242,160,.10);--glass-shadow:0 0 0 1px rgba(61,242,160,.18),0 0 34px -6px rgba(61,242,160,.42);
  --rim-a:rgba(61,242,160,.95);--rim-b:rgba(61,242,160,.15);--rim-c:rgba(227,176,75,.6);--th-bg:#060908;--th-bg2:#0A110E}
body.home .top,body.home .top.menu-open{background:#060908!important;color:#F3F5F1!important;border-bottom:1px solid rgba(61,242,160,.35);box-shadow:0 1px 18px -6px rgba(61,242,160,.55)}
body.page-work .top{border-bottom:1px solid rgba(61,242,160,.35);box-shadow:0 1px 18px -6px rgba(61,242,160,.55)}
body.home .top .mark,body.home .top.on-hero .mark{background:var(--tube)}
body.home .nav a:hover{background:rgba(255,255,255,.1)}
body.home .nav a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--tube)}
body.home .nav a.book,body.home .btn{background:var(--tube);border-color:var(--tube);color:#04120B}
body.home .btn:hover,body.home .nav a.book:hover{background:#fff;border-color:#fff;color:#04120B}
body.home .btn.line,body.home .btn.line.on-dark{background:transparent;color:#F3F5F1;border-color:rgba(243,245,241,.75)}
body.home .btn.line:hover{background:#F3F5F1;color:#04120B}
body.home .skip-link{background:#F3F5F1;color:#04120B}
body.home .txt-link{color:#F3F5F1}
body.home :focus-visible{outline-color:var(--tube)}
@media (max-width:1100px){body.home .nav{background:#060908;color:#F3F5F1}}
body.home .marq{background:#060908;border-bottom:0;color:#F3F5F1}
body.home .marq-t span{color:#F3F5F1}
body.home .marq-t i{background:var(--tube);box-shadow:0 0 10px var(--tube)}

/* ---- flat reading surfaces: no glow, no gradient behind any loose text ---- */
body.home .family,body.home #prices,body.home .book,body.home #work,body.home .demos,body.home .dark.concepts{background:var(--stage)}
body.home .where,body.home .dark.motion{background:var(--stage2)}
body.home .sec,body.home .where,body.home .dark{border:0}
body.page-work .pg-head,body.page-work .wsec,body.page-work #clients,body.page-work .cpt,body.page-work main>section{background:var(--stage)}
body.page-work .wsec:nth-of-type(even){background:var(--stage2)}
body.home .sec-head p:not(.eyebrow),body.home .lede,body.home .family .lede,body.home .book .lede,body.home #prices .lede,body.home .where .lede,body.home .cnote,body.home .fine,body.home address,body.home .reach-note,body.home .reach em,body.home .r-note,body.home .dark .sec-head p:not(.eyebrow),body.home .dark .cnote{color:#D2DCD6}
body.home .eyebrow,body.home .sec-head p.eyebrow,body.home .dark .sec-head p.eyebrow{color:var(--tube)}
body.home .eyebrow b,body.home .dark .eyebrow b{color:#F3F5F1}
body.home h2 em,body.home .dark h2 em{color:var(--tube)}
.eyebrow b::after,.dark .eyebrow b::after,body.page-work .eyebrow b::after{content:none!important}
body.page-work .eyebrow,body.page-work .sec-head p.eyebrow{color:var(--tube)}
body.page-work h2 em,body.page-work .pg-head h1 em{color:var(--tube-g)}
body.home .where .lede,body.home .reach li,body.home .reach b,body.home .reach span{color:#F3F5F1}
body.home .where .lede{color:#D2DCD6}
body.home .reach li{border-color:rgba(61,242,160,.45)}
body.home .rings circle{fill:none;stroke:var(--tube);stroke-width:3;filter:drop-shadow(0 0 6px rgba(61,242,160,.9))}
body.home .rings circle.r2{stroke:var(--tube-g);filter:drop-shadow(0 0 6px rgba(227,176,75,.9))}
body.home .rings circle.pin{fill:#fff;stroke:var(--tube)}
body.home .rings text{fill:#F3F5F1}

/* ---- section dividers: a thin tube, mint and gold in turn ---- */
body.home main>section:not(.hero):not(.marq):not(.neonband),body.page-work main>section{position:relative}
body.home main>section:not(.hero):not(.marq):not(.neonband):not(.family)::before,body.page-work main>section:not(.pg-head)::before{
  content:"";position:absolute;z-index:2;top:0;left:var(--m);right:var(--m);height:3px;border-radius:3px;pointer-events:none;
  background:linear-gradient(90deg,transparent 0,var(--tube) 9%,#C9FFE6 50%,var(--tube) 91%,transparent 100%);
  box-shadow:0 0 5px var(--tube),0 0 16px rgba(61,242,160,.65),0 0 40px rgba(61,242,160,.4);opacity:.92}
body.home #work::before,body.home .where::before,body.page-work #motion::before,body.page-work #clients::before{background:linear-gradient(90deg,transparent 0,var(--tube-g) 9%,#FFE9B0 50%,var(--tube-g) 91%,transparent 100%);box-shadow:0 0 5px var(--tube-g),0 0 16px rgba(227,176,75,.65),0 0 40px rgba(227,176,75,.4)}
@media (prefers-reduced-motion:no-preference){
  body.home main>section::before,body.page-work main>section::before{animation:tube-breathe 7s ease-in-out infinite}
}
@keyframes tube-breathe{0%,100%{opacity:.78}50%{opacity:1}}
body.home .neonband{border:0}

/* ---- the stage behind each panel group: tube lines + one saturated field, the glass frosts them ---- */
body.home .promise::before,body.home .ledger::before,body.page-work .wcgrid::before,body.home .demo-grid::before,body.home .book-r::before{
  content:"";display:block;position:absolute;z-index:-1;pointer-events:none;inset:-28px calc(var(--m)*-.55);border-radius:0;
  -webkit-mask-image:none;mask-image:none}
body.home .promise::before{background:
  radial-gradient(ellipse 60% 55% at 50% 50%,rgba(30,168,120,.85),rgba(30,168,120,.3) 55%,transparent 78%),
  var(--stage)}
body.home .ledger::before{background:
  radial-gradient(ellipse 55% 50% at 30% 40%,rgba(227,176,75,.5),transparent 72%),
  radial-gradient(ellipse 55% 55% at 78% 70%,rgba(30,168,120,.75),transparent 74%),var(--stage)}
body.home .demo-grid::before{display:block;background:
  radial-gradient(ellipse 50% 45% at 22% 38%,rgba(30,168,120,.72),transparent 74%),
  radial-gradient(ellipse 45% 50% at 80% 66%,rgba(227,176,75,.34),transparent 74%),var(--stage)}
body.home .book-r::before{display:block;inset:-24px -12px;background:radial-gradient(ellipse 65% 60% at 50% 50%,rgba(30,168,120,.7),transparent 76%),var(--stage)}
body.page-work .wcgrid::before{background:
  radial-gradient(ellipse 62% 55% at 50% 50%,rgba(30,168,120,.82),rgba(30,168,120,.3) 56%,transparent 80%),
  radial-gradient(ellipse 40% 40% at 88% 14%,rgba(227,176,75,.4),transparent 75%),var(--stage)}
html.lite body.page-work .wcgrid::before,html.lite body.home .promise::before,html.lite body.home .ledger::before,html.lite body.home .demo-grid::before,html.lite body.home .book-r::before{background:radial-gradient(ellipse 60% 50% at 50% 50%,rgba(30,168,120,.45),transparent 76%),var(--stage)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  body.page-work .wcgrid::before,body.home .promise::before,body.home .ledger::before,body.home .demo-grid::before,body.home .book-r::before{background:radial-gradient(ellipse 60% 50% at 50% 50%,rgba(30,168,120,.45),transparent 76%),var(--stage)}
}
@media (max-width:767px){body.home .promise::before,body.home .ledger::before,body.home .demo-grid::before,body.page-work .wcgrid::before{inset:-20px calc(var(--m)*-1)}}

/* ---- glass: dark, frosting the tube light, rim and spill in tube colour ---- */
.glass::after{background:linear-gradient(140deg,var(--rim-a),var(--rim-b) 42%,var(--rim-c))}
body.home .glass,body.page-work .glass{background:var(--glass-fill);border-color:var(--glass-border);box-shadow:var(--glass-hi),var(--glass-shadow)}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  @media (max-width:767px){html:not(.lite) body.home .glass:not(.over),html:not(.lite) body.page-work .wc.glass{background:color-mix(in srgb,#070D0B var(--glass-phone),transparent)}}
}
html.lite body.home .glass,html.lite body.page-work .glass,html.lite body.page-work .wc.glass{background:var(--glass-solid);box-shadow:var(--glass-hi),0 0 18px -6px rgba(61,242,160,.5)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){body.home .glass,body.page-work .glass{background:var(--glass-solid)}}
body.home .promise li>b{background:none;box-shadow:none;height:40px;border-radius:0;color:var(--tube)}
body.home .promise li>b svg{filter:drop-shadow(0 0 7px rgba(61,242,160,.55))}
body.home .promise strong,body.home .promise span strong{color:#F3F5F1}
body.home .promise span{color:#D2DCD6}
body.home .glass p,body.home .glass li,body.home .glass .d{color:#D2DCD6}
body.home .demo .d,body.home .ledger .n small,body.home .ledger .v small{color:#D2DCD6}
body.home .demo h3 small{color:var(--tube)}
body.home .from small{color:#D2DCD6}
body.home .ledger .btn.line{border-color:rgba(243,245,241,.7);color:#F3F5F1}
body.home .ledger .bk::before{border-color:#F3F5F1}

/* ---- devices inside the demo glass keep their own light interiors ---- */
body.home .browser,body.home .month,body.home .ba,body.home .phone,body.home .mini{--ink:#0A0A0A;--paper:#fff;--mute:#3A3A36;--rule:#D9D9D3;--green:#2D6A4F;--green-d:#1F4E39}
body.home .phone{border-color:#0A0A0A;box-shadow:0 0 0 2px var(--tube),0 0 26px rgba(61,242,160,.6)}
body.home .browser,body.home .month{box-shadow:0 0 0 1px rgba(61,242,160,.6),0 0 22px -4px rgba(61,242,160,.45);color:#0A0A0A}
body.home .ba{box-shadow:0 0 0 1px rgba(61,242,160,.6),0 0 22px -4px rgba(61,242,160,.45)}
body.home .ba-tabs button,body.home .ba-ctl button{color:#F3F5F1;border-color:rgba(243,245,241,.6);background:transparent}
body.home .ba-ctl button[aria-pressed="true"],body.home .ba-tabs button[aria-pressed="true"]{background:#F3F5F1;color:#04120B}
body.home .demo-foot .btn.sm{background:var(--tube);color:#04120B}
body.home .form{background:var(--glass-fill)}
body.home .f label{color:#F3F5F1}
body.home .f input,body.home .f select,body.home .f textarea{background:#0B1310;color:#F3F5F1;border-color:rgba(243,245,241,.55)}
body.home .f input:focus,body.home .f select:focus,body.home .f textarea:focus{border-color:var(--tube);outline-color:rgba(61,242,160,.35)}
body.home .form .more summary{color:#F3F5F1}
body.home .form .more summary::before{background:var(--tube);color:#04120B}
body.home .status.ok{color:var(--tube)}body.home .status.err{color:#FF9A9A}
body.home .big-phone{color:#F3F5F1;border-bottom:3px solid var(--tube)}

/* ---- tiles are glowing screens ---- */
.wt,.tile,.mgt{--screen:rgba(61,242,160,.62);border:1px solid var(--screen);outline:0;background:#000;
  box-shadow:0 0 0 1px rgba(61,242,160,.16),0 0 26px -5px rgba(61,242,160,.42),inset 0 0 26px rgba(61,242,160,.12)}
body.page-work .wt{outline:0}
.wt:nth-child(3n+2),.mgt:nth-child(3n+2){--screen:rgba(227,176,75,.7);box-shadow:0 0 0 1px rgba(227,176,75,.2),0 0 26px -5px rgba(227,176,75,.42),inset 0 0 26px rgba(227,176,75,.1)}
body.page-work .wt:hover,.tile:hover,.mgt:hover{border-color:#C9FFE6}
.wt .cap,.mgt .cap,body.home .tile .cap{background:#060908;border-top:1px solid rgba(61,242,160,.5)}
.wt .cap span,.tile .cap span,body.page-work .wt .cap span{background:var(--tube)!important;color:#04120B!important}
.wt:hover .cap span,.wt:focus-visible .cap span{background:#fff!important}
body.page-work .wt .no{background:#060908;color:var(--tube);border:1px solid var(--tube)}
body.page-work .wt.tyler .no{background:var(--tube-g);color:#1A1203}
.wt .cap b,.mgt .cap b,body.home .tile .cap b{color:#F3F5F1;font-family:var(--font-text);font-size:15px}
.wt .cap svg,.tile .cap svg{color:#04120B}

/* square media: every Work tile and home motion tile shows a 1:1 picture over a 56px bar. Black-stage loops are contained, never cropped. */
.wt,.mgt{aspect-ratio:auto!important}
.wt::before,.mgt::before{content:"";display:block;padding-top:calc(100% + 56px)}
.wt img,.wt video{inset:0 0 56px 0;height:calc(100% - 56px);scale:1;object-fit:cover;object-position:50% 50%}
.wt.sq img,.wt.sq video,.tile.sq video{object-fit:contain;background:#000}
.mgt .vw{inset:0 0 56px 0}
.mgt video{object-fit:cover;object-position:50% 50%;scale:1}
.mg-row.a .mgt:nth-child(2n),.wwall .wt:nth-child(n){margin-top:0!important}
.wwall{align-items:stretch}
.wt video,.mgt video,.tile video{background:#000}
.tile video[data-src*="look-s"]{object-position:50% 40%}

/* ---- Work wall: no stagger, columns by width, CTA pinned to its cells ---- */
body.page-work .wwall .cta-tile.glass{min-width:0;width:auto;max-width:100%;box-sizing:border-box;aspect-ratio:auto!important;height:auto;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--sp-4);grid-column:1/-1;padding:var(--panel-pad);
  background:linear-gradient(var(--glass-fill),var(--glass-fill)),radial-gradient(ellipse 80% 90% at 20% 50%,rgba(30,168,120,.7),transparent 75%),#060908;border:1px solid var(--tube);box-shadow:0 0 0 1px rgba(61,242,160,.2),0 0 34px -6px rgba(61,242,160,.55),inset 0 0 24px rgba(61,242,160,.12)}
body.page-work .wwall .cta-tile h3{font-size:var(--h3)}
body.page-work .wwall .cta-tile .btn{background:var(--tube);border-color:var(--tube);color:#04120B}
@media (min-width:1101px){#shot .wwall .cta-tile{grid-column:span 2}#motion .wwall .cta-tile{grid-column:span 1;aspect-ratio:auto!important}#motion .wwall .cta-tile h3{font-size:1.375rem}#motion .wwall .cta-tile .btn{padding:0 20px;min-height:48px}}
@media (min-width:768px) and (max-width:1100px){#motion .wwall .cta-tile{grid-column:span 2}}
@media (min-width:768px) and (max-width:900px){.wwall{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:767px){body.page-work #motion .wwall .wt:nth-child(7){grid-column:1/-1}body.page-work #motion .wwall .wt:nth-child(7)::before{padding-top:calc(56.25% + 56px)}}
body.page-work .wwall .wt:nth-child(n){aspect-ratio:auto!important}


/* ---- PASS E2: footer, stage light, concept cards, type, rails ---- */
body.home .foot2,body.page-work .foot2{background:#060908;color:#F3F5F1;border-top:0;position:relative}
body.home .foot2::before,body.page-work .foot2::before{content:"";position:absolute;z-index:2;top:0;left:var(--m);right:var(--m);height:3px;border-radius:3px;background:linear-gradient(90deg,transparent 0,var(--tube-g) 9%,#FFE9B0 50%,var(--tube-g) 91%,transparent 100%);box-shadow:0 0 5px var(--tube-g),0 0 16px rgba(227,176,75,.65),0 0 40px rgba(227,176,75,.4)}
.foot2 .foot-mark{background:var(--tube);opacity:.16}
.foot2 .foot-k{color:var(--tube)}
.foot2 .foot-word{font-family:var(--font-logo)!important;color:#F3F5F1;font-weight:600}
.foot2 a.foot-phone{border-bottom-color:var(--tube);color:#F3F5F1}
.foot2 .foot-r p,.foot2 .foot-base p,.foot2 address,.foot2 a.foot-mail,.foot2 .foot-base a{font-family:var(--font-text)}
.foot2 .foot-base{border-top:1px solid rgba(61,242,160,.35)}
.foot2 .btn{background:var(--tube);border-color:var(--tube);color:#04120B}
.foot2 .btn.line{background:transparent;color:#F3F5F1;border-color:rgba(243,245,241,.75)}
.foot2 .btn:hover{background:#fff;color:#04120B;border-color:#fff}
.num{font-family:var(--font-display)}

/* stage fields fade out before their edges, so no rectangle ever shows; tube lines cross the gaps */
body.home .promise::before,body.home .ledger::before,body.home .demo-grid::before,body.home .book-r::before,body.page-work .wcgrid::before{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent),linear-gradient(transparent,#000 16%,#000 84%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent),linear-gradient(transparent,#000 16%,#000 84%,transparent);
  -webkit-mask-composite:source-in;mask-composite:intersect}
body.home .promise::before{background:
  linear-gradient(#E4FFF1,#E4FFF1) 0 34%/100% 3px no-repeat,
  linear-gradient(transparent,rgba(61,242,160,.65),transparent) 0 34%/100% 70px no-repeat,
  linear-gradient(#E4FFF1,#E4FFF1) 0 80%/100% 3px no-repeat,
  linear-gradient(transparent,rgba(61,242,160,.5),transparent) 0 80%/100% 56px no-repeat,
  radial-gradient(ellipse 52% 52% at 50% 50%,rgba(46,214,146,.8),rgba(30,168,120,.3) 58%,transparent 80%),var(--stage)}
body.page-work .wcgrid::before{background:
  radial-gradient(ellipse 54% 52% at 50% 50%,rgba(46,214,146,.8),rgba(30,168,120,.3) 58%,transparent 80%),var(--stage)}
body.home .ledger::before{background:
  radial-gradient(ellipse 48% 50% at 62% 50%,rgba(46,214,146,.7),transparent 76%),var(--stage)}

/* home concept cards and CTA tile: glowing screens too */
body.home .cc{border:1px solid rgba(61,242,160,.6);background:#060908;box-shadow:0 0 0 1px rgba(61,242,160,.16),0 0 26px -5px rgba(61,242,160,.42),inset 0 0 26px rgba(61,242,160,.1)}
body.home .cc:nth-child(3n+2){border-color:rgba(227,176,75,.7);box-shadow:0 0 0 1px rgba(227,176,75,.2),0 0 26px -5px rgba(227,176,75,.42),inset 0 0 26px rgba(227,176,75,.1)}
body.home .cc:hover{border-color:#C9FFE6}
body.home .cc-b{background:#060908;color:#F3F5F1}
body.home .cc-b .panel-k{color:var(--tube)}
body.home .cc-b u{color:var(--tube);text-decoration-color:var(--tube)}
body.home .t-cta{background:#060908;border:1px solid var(--tube);box-shadow:0 0 0 1px rgba(61,242,160,.2),0 0 34px -6px rgba(61,242,160,.55),inset 0 0 26px rgba(61,242,160,.14)}
body.home .t-cta .btn{background:var(--tube);color:#04120B;border-color:var(--tube)}
body.home .t-cta h3{color:#F3F5F1}
body.home .t-cta p{color:#D2DCD6}
body.home .photo-band{border-block:1px solid var(--tube);box-shadow:0 0 28px -4px rgba(61,242,160,.55)}

/* sticky bar */
.sticky{background:#060908;border-top:1px solid var(--tube);box-shadow:0 -4px 22px -8px rgba(61,242,160,.6)}
.sticky .btn{background:var(--tube);border-color:var(--tube);color:#04120B}
.sticky .btn.line{background:transparent;color:#F3F5F1;border-color:rgba(243,245,241,.75)}
@media (max-width:767px){body.in-rail .sticky,body.in-rail .sticky.show{transform:translateY(110%)!important;visibility:hidden!important}}

/* type: raise meta, eyebrows and captions at desktop (fix 19) */
@media (min-width:1100px){
  :root{--fs-meta:.9375rem}
  .eyebrow,.sec-head p.eyebrow,.panel-k,.cc-b .panel-k,.demo h3 small,.from small,.wt .cap b,.mgt .cap b,body.home .tile .cap b,body.home .tile .cap,.wt .cap span,.tile .cap span,.tile .cap{font-size:15px}
  .wt .cap span,.tile .cap span{font-size:15px}
}
body.home .tile .cap,.wt .cap{padding-right:12px}

/* home phone rails also run up to 1099 so 768 is not twice the phone (fix 21) */
@media (min-width:768px) and (max-width:1099px){
  body.home #concepts .cgrid,body.home .demo-grid{display:flex;gap:16px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
    margin-inline:calc(var(--m)*-1);padding-inline:var(--m);padding-block:8px 12px;scroll-padding-inline:var(--m);scrollbar-width:none;align-items:flex-start}
  body.home #concepts .cgrid::-webkit-scrollbar,body.home .demo-grid::-webkit-scrollbar{display:none}
  body.home #concepts .cc{flex:0 0 min(44vw,380px);grid-column:auto;scroll-snap-align:start}
  body.home .demo-grid>.demo{flex:0 0 min(46vw,400px);grid-column:auto!important;scroll-snap-align:start;min-width:0}
}
@media (max-width:1099px){body.home .demo-grid{align-items:flex-start!important}body.home .phone{width:min(100%,240px)}}
@media (max-width:767px){body.home .demo-grid{align-items:flex-start!important}body.home .phone{width:min(100%,200px)}}

/* hero and other ink-backed bands stay dark now that home --ink is the light text colour */
body.home .hero,body.home .slot,body.home .decal{background:#060908;color:#F6F6F4}

/* Work on phones: concepts become a swipe rail like home, padding trimmed (fix 13) */
@media (max-width:767px){
  body.page-work .wcgrid{display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;margin-inline:calc(var(--m)*-1);padding:8px var(--m) 12px;scroll-padding-inline:var(--m);scrollbar-width:none;align-items:flex-start}
  body.page-work .wcgrid::-webkit-scrollbar{display:none}
  body.page-work .wcgrid .wc{flex:0 0 min(86vw,340px);grid-column:auto;scroll-snap-align:start;min-width:0}
  body.page-work .wcgrid::before{inset:0}
  body.page-work .wsec,body.page-work .sec{padding-block:calc(var(--b)*1.1)!important}
  body.page-work #shot{padding-top:calc(var(--b)*1.1)!important}
  body.page-work #concepts{padding-bottom:calc(var(--b)*1.5)!important}
  body.page-work #clients{padding-top:calc(var(--b)*1.5)!important}
  body.page-work .wwall{padding-bottom:calc(var(--b)*1)}
  body.page-work .pg-head{padding-block:calc(var(--b)*2.4) calc(var(--b)*1.2)}
}
@media (min-width:768px) and (max-width:1099px){
  body.page-work .wcgrid{display:flex;gap:16px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;margin-inline:calc(var(--m)*-1);padding:8px var(--m) 12px;scroll-padding-inline:var(--m);scrollbar-width:none;align-items:flex-start}
  body.page-work .wcgrid::-webkit-scrollbar{display:none}
  body.page-work .wcgrid .wc{flex:0 0 min(44vw,380px);grid-column:auto;scroll-snap-align:start;min-width:0}
  body.page-work .wcgrid::before{inset:0}
}

/* tablet 768-1099: the work wall and ledger stop being two phones stacked (fix 21) */
@media (min-width:768px) and (max-width:1099px){
  body.home .wall{display:flex;flex-direction:column;gap:var(--gut)}
  body.home .wall .t-reel{aspect-ratio:16/9!important;height:auto;width:100%}
  body.home .mg-row{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
  body.home .mgt .cap{padding:0 10px}
  body.home .ledger{grid-template-columns:minmax(0,1fr);gap:var(--sp-3)}
  body.home .ledger li{display:grid;grid-template-columns:minmax(0,1fr) auto 44px;gap:var(--sp-3);align-items:center;padding:var(--sp-2) var(--sp-4);min-height:0}
  body.home .ledger li>.n{grid-column:1;grid-row:1}
  body.home .ledger li>.v{grid-column:2;grid-row:1;justify-self:end;text-align:right;font-size:var(--h3)}
  body.home .ledger li>.bk{grid-column:3;grid-row:1;margin:0;position:relative;display:block;overflow:hidden;white-space:nowrap;text-indent:64px;color:transparent!important;width:44px;min-width:44px;height:44px;padding:0;border-radius:50%}
  body.home .ledger .bk::before{content:"";position:absolute;left:15px;top:16px;width:10px;height:10px;border:solid #F3F5F1;border-width:2.5px 2.5px 0 0;transform:rotate(45deg)}
}
body.home .promise li.glass{--glass-fill:rgba(7,13,11,.55)}
@media (max-width:767px){body.page-work .wt .cap{padding:0 12px 0 14px}}
.foot2 .foot-act .btn:not(.line){color:#04120B}

@media (min-width:768px){body.home,body.page-work{--glass-blur:24px}}

/* ================= angle-e install pass (2026-10-30) ================= */
/* section dividers: one slim tube, no stacked glow */
body.home main>section:not(.hero):not(.marq):not(.neonband):not(.family)::before,body.page-work main>section:not(.pg-head)::before{
  height:2px;box-shadow:0 0 4px var(--tube),0 0 14px rgba(61,242,160,.45)}
body.home #work::before,body.home .where::before,body.page-work #motion::before,body.page-work #clients::before{box-shadow:0 0 4px var(--tube-g),0 0 14px rgba(227,176,75,.45)}
/* phone: swipe-rail tiles at a size where burned type and knots read; bigger section heads */
@media (max-width:767px){
  body.home .mg-row .mgt{flex:0 0 min(74vw,300px)}
  body.home .mg-row.b .mgt,body.home .mg-row .mgt{aspect-ratio:4/5}
  body.home .sec h2,body.home .family h2,body.page-work .wsec h2,body.page-work .cpt h2,body.page-work #clients h2{
    font-size:clamp(2.5rem,.9rem + 7vw,4.25rem);line-height:1.04;letter-spacing:-.025em}
  body.page-work .wsec,body.page-work .sec{padding-block:calc(var(--b)*1.1)}
  body.page-work .cpt{padding-block:calc(var(--b)*1.1)}
  body.page-work .wcgrid::before{inset:-8px calc(var(--m)*-1) -8px}
  body.page-work .wcgrid{padding-bottom:0}
}
/* neon band: its own solo moment, brighter than the page's other tubes */
body.home .neonband{background:#030504;border-block:2px solid #C9FFE6;
  box-shadow:0 0 6px var(--tube),0 0 26px rgba(61,242,160,.75),0 0 70px rgba(61,242,160,.35),inset 0 0 40px rgba(61,242,160,.12)}
body.home .neonband::before{background:radial-gradient(closest-side at 50% 36%,rgba(30,168,120,.62),rgba(30,168,120,.2) 62%,transparent 100%)}
body.home .neonband .sign{width:clamp(170px,23vw,340px)}
@media (min-width:768px){body.home .neonband{padding-block:calc(var(--b)*3) calc(var(--b)*2.5)}}
/* the light device screens inside dark glass keep dark text */
body.home .browser p,body.home .browser .d,body.home .phone p,body.home .month p,body.home .mini p,body.home .ba p{color:#3A3A36}
@media (max-width:767px){body.page-work .wt[data-play$="mg-glass.mp4"]{display:none}}

/* ================= round-6 pass (2026-10-30) ================= */
/* one primary green: every filled call to action is mint with dark ink; #5FD19A stays for text and rules only */
body.page-work .nav a.book,body.page-work .btn:not(.line),body.page-work .wc-f .btn:not(.line),body.page-work .cta-r .btn,body.page-work .cpt .btn.sm,.b-open{background:#3DF2A0;border-color:#3DF2A0;color:#04120B}
body.page-work .btn:not(.line):hover,body.page-work .nav a.book:hover{background:#8FF7C8;border-color:#8FF7C8;color:#04120B}
body.page-work .wc-m .live{background:#3DF2A0;color:#04120B}
body.page-work .mark{background:#3DF2A0}

/* ---- 7: rings. one soft glow behind each panel group, nothing that can poke out as a stub; one complete ring only on wide desktop ---- */
body.home .promise::before,body.home .ledger::before{inset:-40px 0;border-radius:0;
  background:radial-gradient(ellipse 60% 62% at 50% 50%,rgba(30,168,120,.42),rgba(30,168,120,.14) 58%,transparent 80%)}
@media (min-width:1101px){
  body.home .promise::before{inset:-110px 0;
    background:
      radial-gradient(circle 196px at 50% 50%,transparent 0 191px,rgba(61,242,160,.8) 192px 195px,transparent 196px),
      radial-gradient(ellipse 60% 55% at 50% 50%,rgba(30,168,120,.4),rgba(30,168,120,.12) 60%,transparent 82%)}
}

/* ---- 8: no-backdrop fallback matches html.lite: no art, still rounded ---- */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  body.page-work .wcgrid::before,body.home .promise::before,body.home .ledger::before,body.home .demo-grid::before,body.home .book-r::before{background:none}
  body.home .glass,body.page-work .glass{background:var(--glass-solid);border-radius:var(--panel-r)}
}
html.lite body.home .promise::before,html.lite body.home .ledger::before{background:none}

/* ---- 10: one call to action before the footer; footer clears the sticky bar by 16px, not 178 ---- */
@media (max-width:767px){
  body.has-sticky .foot,body.has-sticky .foot2{padding-bottom:0}
  body.has-sticky .foot-base{padding-bottom:93px}
}

/* ---- 11: 768 hero sits on the 48px grid ---- */
@media (min-width:768px) and (max-width:900px){
  .hero-copy{margin:0;width:100%;max-width:none;box-sizing:border-box;padding:24px 48px calc(var(--b)*2)}
  .hero .kicker{margin-bottom:14px}
  .hero-media{height:calc(100% - 344px)}
  .hero-cta .btn{width:100%;max-width:100%}
}

/* ---- 9: Work glass. real structure behind the group (one complete ring + soft field), lighter fill so the blur shows, flat even text zone ---- */
body.page-work .wcgrid::before{background:
  radial-gradient(ellipse 62% 52% at 50% 50%,rgba(30,168,120,.5),rgba(30,168,120,.16) 62%,transparent 84%),var(--stage)}
@media (min-width:768px){
  body.page-work{--glass-fill:rgba(7,13,11,.6)}
  body.home{--glass-fill:rgba(7,13,11,.5)}
}
body.page-work .wc.glass .wc-b{background:rgba(4,8,6,.34);border-radius:0 0 calc(var(--panel-r) - 1px) calc(var(--panel-r) - 1px)}
@media (max-width:767px){body.page-work .wcgrid::before{background:radial-gradient(ellipse 70% 40% at 50% 50%,rgba(30,168,120,.45),transparent 80%),var(--stage)}}
html.lite body.page-work .wcgrid::before{background:radial-gradient(ellipse 60% 50% at 50% 50%,rgba(30,168,120,.4),transparent 76%),var(--stage)}
html.lite body.page-work .wc.glass .wc-b{background:none}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){body.page-work .wc.glass .wc-b{background:none}}

/* ---- live stage: the hint and buttons live in their own solid strip, never on top of the scene ---- */
.band3d .b-poster,.band3d .b-fb{height:calc(100% - 68px)}
.band3d canvas{height:calc(100% - 68px)}
.band3d .b-ui{left:0;right:0;bottom:0;height:68px;padding:0 16px;flex-wrap:nowrap;background:#060908;border-top:1px solid rgba(61,242,160,.45);pointer-events:auto}
.band3d .b-hint{background:transparent;padding:0;font-size:15px;color:#F3F5F1}
@media (max-width:480px){.band3d .b-hint{font-size:14px;max-width:46%}}
@media (max-width:480px){.band3d .b-btns{gap:8px}.band3d .b-replay,.band3d .b-open{padding:0 12px;font-size:15px;white-space:nowrap}.band3d .b-ui{padding:0 12px;gap:8px}}

/* ---- 4+5: home wall at 768 and up. every cell in the right-hand block is a true square picture over a caption bar, so a square master never sits in a wider cell and no word is cropped ---- */
@media (min-width:768px){
  body.home .wall .wall-r{grid-auto-rows:auto;align-content:start}
  body.home .wall .wall-r .tile{display:flex;flex-direction:column;height:auto;min-height:0;aspect-ratio:auto}
  body.home .wall .wall-r .tile .vw{position:relative;inset:auto;flex:none;width:100%;aspect-ratio:1/1;height:auto}
  body.home .wall .wall-r .tile .vw video,body.home .wall .wall-r .tile .vw img{width:100%;height:100%;object-fit:cover}
  body.home .wall .wall-r .tile.sq .vw video{object-fit:cover;object-position:50% 50%}
}

/* ---- 12: Work wall at 768 to 1100. the seventh tile is one cell, the CTA fills the rest of its row, captions stay on one line (icon-only play) ---- */
@media (min-width:768px) and (max-width:1100px){
  body.page-work #motion .wwall .wt:nth-child(7){grid-column:auto/span 1;aspect-ratio:auto!important;margin-top:0}
  body.page-work #motion .wwall .cta-tile.glass{grid-column:span 2}
  body.page-work .wt .cap{padding:0 4px 0 12px;gap:6px}
  body.page-work .wt .cap b{-webkit-line-clamp:1;white-space:nowrap;text-overflow:ellipsis}
  body.page-work .wt .cap span{position:relative;display:block;overflow:hidden;white-space:nowrap;text-indent:64px;color:transparent;width:44px;height:44px;padding:0;border-radius:50%;flex:none}
  body.page-work .wt .cap svg{position:absolute;left:13px;top:13px;width:18px;height:18px}
}

/* ---- 13: concept cards share one rhythm; nothing in the body stretches, the action row sits at the bottom ---- */
body.page-work .wc-b>*{flex:none}
body.page-work .wc-b .wc-f{margin-top:auto}
body.page-work .wc-f .from{align-self:start}
body.page-work .wc-f .from{min-height:51px}
@media (max-width:767px){body.home .sec,body.home .family{padding-block:38px}}

/* ---------- 9 fonts v2 (10-30 late): League Gothic ("poster") sets h1/h2, the neon caption and the marquee only; Libre Franklin (--font-display/--font-text) sets all else ---------- */
:root{
  --h1p:clamp(3.25rem,2.2rem + 6.4vw,7rem);
  --h2p:clamp(2.5rem,1.7rem + 3.8vw,4.75rem);
}
html{font-synthesis-weight:none}
h1,h2,.nb-cap,.marq-t span{font-family:var(--font-poster);font-weight:400;letter-spacing:.008em;text-transform:uppercase;text-wrap:balance}
h1{font-size:var(--h1p);line-height:.95}h2{font-size:var(--h2p);line-height:1}
.marq-t span{font-size:clamp(2.75rem,6vw,4.75rem);line-height:1}
.nb-cap{letter-spacing:.03em;font-size:clamp(1.75rem,3vw,2.5rem)}
h3,h4{font-family:var(--font-display);font-weight:700;letter-spacing:-.012em;line-height:1.18;text-transform:none}
.eyebrow,.kicker,.tag,.price-tag,.demo h3 small,.from small,.panel-k{letter-spacing:.01em;text-transform:none;font-size:max(var(--fs-meta),.9375rem)}

/* ---------- 10 gate fixes (10-30 late) ---------- */
/* 3 glass: lighter fill so the blur reads, softer outer rim, crisp top highlight */
:root{--glass-phone:66%}
body.page-work,body.home{--glass-phone:64%}
body.page-work .wc.glass,body.page-work .wwall .cta-tile.glass{background:rgba(12,20,17,.58)}
body.home .glass:not(.over){background:rgba(8,16,13,.5)}
body.home .glass,body.page-work .glass{box-shadow:inset 0 1px 0 rgba(255,255,255,.34),inset 0 0 0 1px rgba(255,255,255,.04),0 12px 30px -16px rgba(0,0,0,.7),0 0 14px -8px rgba(61,242,160,.35)}
html.lite body.home .glass,html.lite body.page-work .glass,html.lite body.page-work .wc.glass,html.lite body.page-work .wwall .cta-tile.glass{background:var(--glass-solid)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){body.home .glass,body.page-work .glass,body.page-work .wc.glass{background:var(--glass-solid)}}
/* 4 family: no ring; one soft glow plus knot tubing behind the cards so the frost has detail to blur */
@media (min-width:1101px){body.home .promise::before{background:radial-gradient(ellipse 60% 55% at 50% 50%,rgba(30,168,120,.4),rgba(30,168,120,.12) 60%,transparent 82%)}}
body.home .promise{position:relative;isolation:isolate}
body.home .promise::after{content:"";position:absolute;z-index:-1;pointer-events:none;left:50%;top:50%;height:min(100%,420px);aspect-ratio:1;transform:translate(-50%,-50%);
  background:var(--tube,#3DF2A0);opacity:.6;-webkit-mask:url(../img/knot.svg) center/contain no-repeat;mask:url(../img/knot.svg) center/contain no-repeat;filter:drop-shadow(0 0 10px rgba(61,242,160,.6))}
html.lite body.home .promise::after{display:none}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){body.home .promise::after{display:none}}
/* 5 rails: room for the glow so overflow clipping never draws a straight edge */
body.home #concepts .cgrid,body.home .demo-grid,body.home .mg-row,body.page-work .wcgrid{padding-block:48px!important;margin-block:-48px!important}
@media (min-width:1101px){body.page-work .wcgrid,body.home #concepts .cgrid,body.home .demo-grid,body.home .mg-row{padding-block:0!important;margin-block:0!important}}
/* 6 footer: the knot never sits under lettering or buttons */
.foot2 .foot-mark{display:none}
@media (min-width:1100px){.foot2 .foot-mark{display:block;width:300px;right:2%;top:auto;bottom:8%;transform:none;opacity:.12}}
/* 7 work CTA tile: even panel surface, no gradient behind lettering */
body.page-work .wwall .cta-tile.glass,body.page-work .cta-tile.glass{background:rgba(12,20,17,.62)!important}
html.lite body.page-work .wwall .cta-tile.glass{background:var(--glass-solid)!important}
/* 10 work footer nav on the 20px edge */
@media (max-width:767px){body.page-work .foot2 .foot-base nav{margin-inline:-8px}}
.foot-k,.foot2 .foot-k{letter-spacing:.01em;text-transform:none;font-size:1rem}
@media (min-width:1100px){body.home .promise::after{display:none}}