/* Decision 2026-10-01 (Q1): headings Inter Tight, served to every visitor; body DM Sans. One face per static weight (same variable file), so in-between weights round like the installed static family. */
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:100;font-display:swap;
  src:url(/media/2026/08/bl/cf-fonts/v/inter-tight/5.2.7/latin/wght/normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:200;font-display:swap;
  src:url(/media/2026/08/bl/cf-fonts/v/inter-tight/5.2.7/latin/wght/normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:300;font-display:swap;
  src:url(/media/2026/08/bl/cf-fonts/v/inter-tight/5.2.7/latin/wght/normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:400;font-display:swap;
  src:url(/media/2026/08/bl/cf-fonts/v/inter-tight/5.2.7/latin/wght/normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:500;font-display:swap;
  src:url(/media/2026/08/bl/cf-fonts/v/inter-tight/5.2.7/latin/wght/normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:600;font-display:swap;
  src:url(/media/2026/08/bl/cf-fonts/v/inter-tight/5.2.7/latin/wght/normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:700;font-display:swap;
  src:url(/media/2026/08/bl/cf-fonts/v/inter-tight/5.2.7/latin/wght/normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:800;font-display:swap;
  src:url(/media/2026/08/bl/cf-fonts/v/inter-tight/5.2.7/latin/wght/normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:900;font-display:swap;
  src:url(/media/2026/08/bl/cf-fonts/v/inter-tight/5.2.7/latin/wght/normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:100;font-display:swap;
  src:url(/media/2026/08/bl/cf-fonts/v/inter-tight/5.2.7/latin-ext/wght/normal.woff2) format("woff2");
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:200;font-display:swap;
  src:url(/media/2026/08/bl/cf-fonts/v/inter-tight/5.2.7/latin-ext/wght/normal.woff2) format("woff2");
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:300;font-display:swap;
  src:url(/media/2026/08/bl/cf-fonts/v/inter-tight/5.2.7/latin-ext/wght/normal.woff2) format("woff2");
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:400;font-display:swap;
  src:url(/media/2026/08/bl/cf-fonts/v/inter-tight/5.2.7/latin-ext/wght/normal.woff2) format("woff2");
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:500;font-display:swap;
  src:url(/media/2026/08/bl/cf-fonts/v/inter-tight/5.2.7/latin-ext/wght/normal.woff2) format("woff2");
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:600;font-display:swap;
  src:url(/media/2026/08/bl/cf-fonts/v/inter-tight/5.2.7/latin-ext/wght/normal.woff2) format("woff2");
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:700;font-display:swap;
  src:url(/media/2026/08/bl/cf-fonts/v/inter-tight/5.2.7/latin-ext/wght/normal.woff2) format("woff2");
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:800;font-display:swap;
  src:url(/media/2026/08/bl/cf-fonts/v/inter-tight/5.2.7/latin-ext/wght/normal.woff2) format("woff2");
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:900;font-display:swap;
  src:url(/media/2026/08/bl/cf-fonts/v/inter-tight/5.2.7/latin-ext/wght/normal.woff2) format("woff2");
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* Therum replica — shared styles */
:root{
  /* colour: Ohio black #111013, softened text, red accent #D90A2C */
  --ink:#111013; --paper:#ffffff; --dark:#1a1b1f; --brown:#604d3c; --footer:#121212;
  --rail-hi:#f0f0f2; --rail-dim:rgba(255,255,255,.5); --rail-line:rgba(255,255,255,.14); --rail-chip:#1b1a1f; --rail-nav-bg:rgba(17,16,19,.88); --rail-nav-line:rgba(255,255,255,.25);
  --accent:#D90A2C; --accent2:#7646DD;
  --muted:color-mix(in srgb,#111013 60%,white); --hair:color-mix(in srgb,#111013 12%,white);
  --rail-w:0px; --font:"DM Sans",sans-serif;
  --font-head:"Inter Tight",var(--font,"DM Sans",sans-serif);
  /* design system v1 (2026-09-12): spacing, layout, type scale */
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--s9:96px;
  --gutter:clamp(20px,4vw,48px);--wrap:1180px;--wrap-wide:1360px;
  --measure:48ch; /* ch = "0" width ≈ .69em here, so 48ch ≈ 66 avg chars */
  --measure-hero:min(980px,92vw);
  --sec-y:clamp(72px,9vw,128px);
  --focus-ring:#fff; --focus-band:#111013; --nav-dim:#9a9aa3; --nav-dim-sub:#8f8f98; --nav-on:#fff; --toggle-off:rgba(0,0,0,.62); --toggle-off-hover:rgba(0,0,0,.82); --t-min:12px; --t-pillar-sm:clamp(22px,6.6vw,27px);
  --t-body:clamp(16px,calc(1vw + 12px),18px);--t-lead:clamp(18px,calc(1.2vw + 12px),21px);--t-small:15px;--t-label:12.5px;
  --t-h3:clamp(20px,calc(1.6vw + 12px),26px);--t-h2:clamp(30px,3.7vw,48px);--t-h1:clamp(36px,4.6vw,60px);--t-display:clamp(44px,8vw,140px);
  --lh-body:1.6;--lh-lead:1.5;--lh-tight:1.05;--tap:44px;--cs-col-max:1600px;--cs-gutter:clamp(24px,3.4vw,48px);
  /* case-study boards: Therum OS pages built as HTML (Bam 2026-10-29: "same designs just actual components") */
  --cb-bg:#fafafa;--cb-card:#fff;--cb-line:#e9e9ec;--cb-line2:#d9d9de;--cb-ink:#0a0a0c;--cb-mut:#8a8a92;--cb-mut2:#585860;--cb-acc:#e5393b;--cb-btn:#3858e9;--cb-ok:#12b886;--cb-okbg:#e6f8f1;--cb-oktx:#0b7a55;--cb-wnbg:#fdf0c4;--cb-wntx:#92400e;--cb-dnbg:#fde8e8;--cb-dntx:#b42323;--cb-sub:#f4f4f6;--cb-black:#16181e;--cb-white:#fff;--cb-w10:rgba(255,255,255,.1);--cb-w60:rgba(255,255,255,.6);--cb-w70:rgba(255,255,255,.7);--cb-icobg:#fde4f1;--cb-icotx:#d6249f;--cb-ghost:#f2f2f4;--cb-sh1:rgba(0,0,0,.05);--cb-sh2:rgba(0,0,0,.08);--cb-oline:#f3c6c8;--cb-fs-em:.88em;
  --cb-fs-xs:11px;--cb-fs-s:13px;--cb-fs-m:15px;--cb-fs-l:clamp(18px,1.7vw,24px);--cb-fs-xl:clamp(26px,3vw,46px);--cb-mono:var(--therum-font-mono,'JetBrains Mono',ui-monospace,Menlo,monospace);}
html.dark-mode{--ink:#f2f1f4;--paper:#121215;--muted:rgba(242,241,244,.72);--hair:color-mix(in srgb,#f2f1f4 15%,transparent)}
@media(max-width:640px){:root{--gutter:24px;--sec-y:56px;--measure:100%;--measure-hero:100%;--t-body:16px;--t-lead:18px;--t-h3:20px;--t-h2:clamp(28px,8vw,36px);--t-h1:clamp(32px,9vw,40px);--t-display:clamp(40px,11vw,56px)}}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font);font-size:17px;line-height:1.65;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;font-optical-sizing:auto;font-kerning:normal;text-rendering:optimizeLegibility}
h1,h2,h3,h4,h5,h6{font-family:var(--font-head);text-wrap:balance;font-optical-sizing:auto}
p{text-wrap:pretty}
img,video,iframe{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font:inherit;cursor:pointer;background:none;border:0;color:inherit}
h1,h2,h3,h4,h5,h6{font-weight:400}
.wrap{max-width:1180px;margin:0 auto;padding:0 40px}
.wrap-wide{max-width:1360px;margin:0 auto;padding:0 40px}
@media(max-width:767px){.wrap,.wrap-wide{padding:0 20px}}

.h-xl{font-size:clamp(36px,4.6vw,60px);font-weight:440;line-height:1.02;letter-spacing:-.035em}
.h-lg{font-size:clamp(30px,3.7vw,48px);font-weight:430;line-height:1.05;letter-spacing:-.032em}
.h-md{font-size:clamp(21px,2vw,27px);font-weight:500;line-height:1.18;letter-spacing:-.022em}
.eyebrow{font-size:12.5px;font-weight:640;text-transform:uppercase;letter-spacing:.18em;line-height:1.6}
.lead{color:var(--muted);font-size:1.03em;line-height:1.7}
.meta{font-size:13px;color:var(--muted);letter-spacing:.01em}

.btn{display:inline-flex;align-items:center;gap:12px;background:var(--ink);color:var(--paper);padding:14px 26px;border-radius:6px;font-weight:540;font-size:15px;letter-spacing:.01em;transition:transform .3s,opacity .3s}
html.dark-mode .btn:where(:not(.-ghost)){background:#f2f1f4;color:#121215} /* N-102: ghost buttons keep no fill in dark mode; :where keeps this rule's old weight so the hero hover rules still win */
.btn:hover{transform:translateY(-2px);opacity:.9}
.btn.-light{background:#fff;color:#111013}
.btn.-ghost{background:transparent;color:inherit;border:1px solid var(--hair)}
.link-arrow{font-weight:500;border-bottom:1px solid currentColor;padding-bottom:2px}

/* chrome */
.rail{position:fixed;inset:0 auto 0 0;width:var(--rail-w);z-index:60;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:18px 0;border-right:1px solid var(--hair);background:var(--paper);transition:background .4s}
.burger{width:26px;height:18px;position:relative;display:block}
.burger span{position:absolute;left:0;width:100%;height:2px;background:var(--ink);transition:.35s}
.burger span:nth-child(1){top:2px}.burger span:nth-child(2){top:8px}.burger span:nth-child(3){top:14px;width:70%}
.burger:hover span:nth-child(3){width:100%}
.to-top{position:fixed;left:calc(var(--rail-w)/2);bottom:110px;transform:translateX(-50%) rotate(180deg);writing-mode:vertical-rl;font-size:11.5px;font-weight:600;letter-spacing:.12em;z-index:59;opacity:0;pointer-events:none;transition:opacity .4s}
.to-top.show{opacity:.85;pointer-events:auto}
.to-top::after{content:"";display:block;width:1px;height:34px;background:currentColor;margin:10px auto 0}
@media(max-width:1023px){.follow-rail,.mode-pill,.to-top{display:none}
.rail{border-right:0;background:transparent;width:auto;inset:0 0 auto 0;height:64px;flex-direction:row;padding:0 20px;justify-content:space-between}
}

.offnav{position:fixed;inset:0;background:#111013;color:#fff;z-index:70;display:flex;align-items:center;justify-content:center;transform:translateY(-102%);transition:transform .6s cubic-bezier(.77,0,.18,1)}
.offnav.open{transform:translateY(0)}
.offnav .inner{width:100%;text-align:center;padding:clamp(40px,7vh,90px) clamp(20px,5vw,90px)}
.offnav .bigword{display:block;width:max-content;max-width:100%;margin:0 auto;font-size:clamp(64px,14vw,220px);font-weight:700;letter-spacing:-.045em;line-height:.92;color:#fff;text-decoration:none;transition:opacity .22s ease,transform .5s cubic-bezier(.16,1,.3,1)}
.offnav .bigword.swapping{opacity:0;transform:translateY(10px)}
.offnav .navrow{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(14px,2.2vw,40px);margin-top:clamp(30px,5.5vh,64px)}
.offnav a.nav-link{display:inline-block;font-size:clamp(14px,1.35vw,19px);font-weight:700;letter-spacing:.06em;text-transform:uppercase;line-height:1;color:#82828a;transition:color .28s ease}
.offnav a.nav-link:hover,.offnav a.nav-link.active{color:#fff}
.offnav .nav-social{position:absolute;left:0;right:0;bottom:clamp(28px,5vh,56px);margin-top:0;justify-content:center}
.offnav .close-x{position:absolute;top:26px;right:34px;font-size:30px;line-height:1;opacity:.8}

/* generic sections */
main{margin-left:var(--rail-w)}
.sec{padding:clamp(70px,9vw,120px) 0}
.sec.-tint{background:rgba(150,144,162,.06)}
.sec.-dark{background:var(--dark);color:#fff}
.sec.-dark .lead{color:rgba(255,255,255,.65)}
.page-hero{padding:clamp(120px,16vw,200px) 0 clamp(60px,8vw,100px)}
.page-hero.-dark{background:var(--dark);color:#fff}
.page-hero.-dark .lead{color:rgba(255,255,255,.65)}
.page-hero .lead{max-width:34em;margin-top:22px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:50px;margin-top:40px}
@media(max-width:1023px){.split,.head2{grid-template-columns:1fr;gap:26px}}

/* expertise lists */
.items{display:grid;grid-template-columns:1fr 1fr;gap:0 60px}
.item{padding:38px 0;border-top:1px solid var(--hair)}
.item h3{margin-bottom:14px}
.item p{color:var(--muted);margin-bottom:18px}
@media(max-width:1023px){.items{grid-template-columns:1fr}}

/* sub-page structures */

/* portfolio */
.fbtn{border:1px solid var(--hair);border-radius:20px;padding:8px 18px;font-size:13.5px;opacity:.75}
.fbtn.active{background:var(--ink);color:var(--paper);opacity:1}
.pgrid{columns:2;column-gap:34px}
.pcard{break-inside:avoid;margin-bottom:44px;display:block}
.pcard img{border-radius:6px;width:100%}
.pcard h3{margin-bottom:8px}
.pcard .lead{font-size:15px}
.pcard.hide{display:none}
@media(max-width:900px){.pgrid{columns:1}}

/* journal */
.article,.article :is(p,.lead,.bullet,li):not(#_){max-width:none}
.article p{margin-bottom:20px}
.article h3{margin:44px 0 16px}
.article .bullet{margin:0 0 8px 10px}
.authorbox{display:flex;gap:18px;align-items:center;border-top:1px solid var(--hair);margin-top:60px;padding-top:34px;max-width:760px}
.authorbox .avatar{width:54px;height:54px;border-radius:50%;background:var(--dark);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700}
.authorbox h6{font-weight:600}
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:34px}
.post{border-top:1px solid var(--hair);padding-top:26px;display:flex;flex-direction:column;gap:14px}
.post h4{font-size:clamp(19px,1.8vw,23px);letter-spacing:-.03em;line-height:1.2}
.post h4 a:hover{opacity:.7}
.post p{color:var(--muted);font-size:15.5px}
@media(max-width:1023px){.posts{grid-template-columns:1fr}}

/* cta band */
.cta{padding:clamp(70px,9vw,120px) 0;text-align:center}
.cta h2{margin:0 auto 34px;max-width:14em}
.cta .row,.row{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}

/* homepage-specific (ported) */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden;color:#fff;margin-left:0}
.hero .veil{position:absolute;inset:0;background:rgba(0,0,0,.05);z-index:1}
.hero .wrap{position:relative;z-index:2;width:100%}
.hero .eyebrow{color:rgba(255,255,255,.85);margin-bottom:14px}
.hero h1{color:rgba(255,255,255,.4);max-width:6.2em}
.hero .btn{margin-top:34px}
.expertise{padding:clamp(70px,9vw,120px) 0;background:rgba(150,144,162,.04)}
.expertise .head{display:grid;grid-template-columns:1.2fr .8fr;gap:50px;margin-bottom:clamp(50px,6vw,90px);align-items:end}
@media(max-width:1023px){.expertise .head{grid-template-columns:1fr;gap:24px}}
.process{position:relative;background:#0d0d0f;color:#fff;overflow:hidden}
.process .step{border-left:1px solid rgba(255,255,255,.14);padding:46px 18px;display:flex;flex-direction:column;justify-content:flex-end;gap:8px}
.process .step:first-child{border-left:0}
.process .num{font-size:13px;font-weight:600;opacity:.7;letter-spacing:.08em}
.process .step h6{font-size:16.4px;font-weight:600;letter-spacing:-.02em}
@media(max-width:1023px){.process .step{border-top:1px solid rgba(255,255,255,.14);padding:30px 20px;justify-content:flex-start}}
.journal{padding:clamp(70px,9vw,120px) 0}
.journal .head{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end;margin-bottom:clamp(44px,5vw,70px)}
.journal .head .lead{max-width:24em;justify-self:end}
.journal .more{margin-top:56px;text-align:center}
@media(max-width:1023px){.journal .head{grid-template-columns:1fr}.journal .head .lead{justify-self:start}}

/* footer */
.sitefoot{background:var(--footer);color:#fff;padding:clamp(70px,9vw,110px) 0 40px}
.sitefoot .top{display:grid;grid-template-columns:1fr 1fr;gap:70px;margin-bottom:clamp(60px,7vw,100px)}
.sitefoot h2{max-width:12em}
.sitefoot .loop{display:flex;margin-top:14px}
.sitefoot .loop input{flex:1;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-right:0;border-radius:6px 0 0 6px;padding:11px 14px;color:#fff;font-size:14px}
.sitefoot .loop button{background:#fff;color:#111;border-radius:0 6px 6px 0;padding:11px 16px;font-size:14px;font-weight:600}
.sitefoot .base{display:flex;justify-content:space-between;gap:20px;margin-top:70px;font-size:13.5px;opacity:.6;flex-wrap:wrap}
@media(max-width:1023px){.sitefoot .top{grid-template-columns:1fr}}

/* cookie */
.cookiebar{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);z-index:80;background:#1c1c1e;color:#fff;border-radius:10px;padding:14px 20px;display:flex;gap:16px;align-items:center;font-size:13.5px;box-shadow:0 10px 34px rgba(0,0,0,.35);max-width:min(860px,94vw);flex-wrap:wrap}
.cookiebar .b{border-radius:6px;padding:8px 14px;font-size:13px;font-weight:600}
.cookiebar .b.-ghost{border:1px solid rgba(255,255,255,.35)}
.cookiebar.hidden{display:none}

/* reveal */
html.reveal-armed .rv:not(.in){opacity:0;transform:translateY(26px)}html.reveal-armed .rv{transition:opacity .8s ease,transform .8s ease}
html.reveal-armed .rv.in{opacity:1;transform:none}html.reveal-done .rv{opacity:1!important;transform:none!important;transition:none}
@media(prefers-reduced-motion:reduce){html.reveal-armed .rv{opacity:1!important;transform:none!important;transition:none}html{scroll-behavior:auto}}

/* Capture aid: pin viewport-height sections in very tall (headless full-page) viewports only. */
@media (min-height:2000px){
  .hero{min-height:800px}
}

/* case studies */
.csmeta .card p{font-size:14.5px;color:rgba(255,255,255,.7)}
.csimg{margin:28px 0}
.csimg img{width:100%;border-radius:6px}
.pcard:has(h3 a){cursor:pointer}
.pcard:has(h3 a):hover img{opacity:.92}

/* case-study bento — synopsis tiles up top, full page below, tiles scroll to sections */
.btile{border:1px solid var(--hair);border-radius:12px;padding:24px;cursor:pointer;display:flex;flex-direction:column;gap:10px;background:var(--paper);transition:transform .3s,box-shadow .3s,border-color .3s;min-height:150px}
.btile:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(0,0,0,.09);border-color:rgba(22,21,25,.3)}
.btile .eyebrow{opacity:.6}
.btile p{font-size:14.5px;line-height:1.5;color:var(--muted);display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.btile .go{margin-top:auto;font-size:13px;font-weight:600;opacity:.55}
.btile:hover .go{opacity:1}

/* case-study synopsis widget — tabs swap text INSIDE widget only; page below stays full */
.cssynop{padding:clamp(30px,4vw,48px) 0;border-bottom:1px solid var(--hair)}
.cstabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.cstab-btn{border:1px solid var(--hair);border-radius:20px;padding:9px 20px;font-size:13.5px;font-weight:540;letter-spacing:.02em;opacity:.7;cursor:pointer;transition:all .25s}
.cstab-btn:hover{opacity:1}
.cstab-btn.active{background:var(--ink);color:var(--paper);opacity:1;border-color:var(--ink)}
.csynop-panel{display:none;border:1px solid var(--hair);border-radius:12px;padding:clamp(24px,3vw,40px);background:var(--paper)}
.csynop-panel.active{display:block;animation:tabfade .4s ease}
@keyframes tabfade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.csynop-panel .eyebrow{opacity:.6;margin-bottom:10px}
.csynop-panel p{color:var(--muted);max-width:52em}
.csynop-panel .go a,.csynop-panel .go{font-size:13.5px;font-weight:600;margin-top:14px;display:inline-block}

/* placeholder hero banners — unmistakably unfinished */
.csplaceholder{margin:0;padding:0}
.csplaceholder .phband{min-height:320px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;border-top:2px dashed rgba(22,21,25,.28);border-bottom:2px dashed rgba(22,21,25,.28);background:repeating-linear-gradient(-45deg,rgba(150,144,162,.07) 0 22px,transparent 22px 44px)}
.csplaceholder .phband .eyebrow{opacity:.55}
.csplaceholder .phband p{color:var(--muted);font-size:15px}

/* case-study hero fade — header gradually melts into the page (Estateo-style technique, our palette) */
.case-study-page .page-hero.-dark{
  background:linear-gradient(180deg,var(--dark) 0%,var(--dark) 44%,rgba(26,27,31,.86) 60%,rgba(26,27,31,.38) 78%,rgba(26,27,31,0) 96%),var(--paper);
  padding-bottom:clamp(150px,20vw,260px);
}
.case-study-page .cssynop{margin-top:clamp(-140px,-12vw,-70px);border-bottom:0;padding-top:0;position:relative;z-index:5}
.case-study-page .csynop-panel{box-shadow:0 18px 44px rgba(0,0,0,.10)}
.case-study-page .cstabs .cstab-btn{background:var(--paper)}
.case-study-page .cstabs .cstab-btn.active{background:var(--ink)}
.page-hero.-dark h1,.page-hero.-dark .h-xl,.page-hero.-dark .eyebrow{color:#fff}
.page-hero.-dark .lead{color:rgba(255,255,255,.72)}

/* case-study layered cards — numbered, progressive depth, tappable chips */
.cscards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:1023px){.cscards{grid-template-columns:1fr}}
.cscard{position:relative;border:1px solid var(--hair);border-radius:16px;padding:26px 26px 22px;cursor:pointer;overflow:hidden;background:linear-gradient(160deg,var(--paper) 55%,rgba(150,144,162,.08) 100%);transition:transform .3s,box-shadow .3s,border-color .3s}
.cscard:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(0,0,0,.10);border-color:rgba(22,21,25,.28)}
.cscard .num{font-size:clamp(44px,4.6vw,64px);font-weight:680;line-height:1;letter-spacing:-.03em;opacity:.12;margin-bottom:6px}
.cscard h3{margin-bottom:8px}
.cscard .blurb{color:var(--muted);font-size:15px;line-height:1.55}
.chiprow{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.chip{display:inline-block;border:1px solid var(--hair);border-radius:16px;padding:6px 14px;font-size:12.5px;font-weight:600;letter-spacing:.02em;background:var(--paper);transition:all .25s;cursor:pointer}
.chip:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* story cards v2 — no numerals, dot-paged fade, data panel */
.cscard{cursor:default}
.cscard .num,.cscard .hint{display:none}
.cscards{grid-template-columns:minmax(230px,.85fr) 1fr 1fr 1fr;align-items:stretch}
@media(max-width:1023px){.cscards{grid-template-columns:1fr}}
.cardpages{position:relative;min-height:120px}
.cpage{opacity:0;position:absolute;inset:0;transition:opacity .45s ease;pointer-events:none}
.cpage.active{opacity:1;position:relative;pointer-events:auto}
.cpage p,.cpage .blurb{color:var(--muted);font-size:14.5px;line-height:1.6}
.dots{display:flex;gap:8px;margin-top:16px}
.dot{width:9px;height:9px;border-radius:50%;background:var(--hair);cursor:pointer;transition:all .25s;border:0;padding:0}
.dot:hover{background:rgba(22,21,25,.4)}
.dot.active{background:var(--ink);transform:scale(1.15)}

/* dashboard surface — one console, internal hairlines, no floating boxes */
.cscards-sec .wrap>.cscards{background:linear-gradient(165deg,var(--paper) 40%,rgba(150,144,162,.09) 100%);border:1px solid var(--hair);border-radius:18px;padding:6px 0;gap:0;box-shadow:0 22px 54px rgba(0,0,0,.07)}
.cscards .cscard,.cscards .csdatapanel{border:0;border-radius:0;background:transparent;box-shadow:none;padding:26px 28px;min-height:0}
.cscards .cscard{border-left:1px solid var(--hair)}
.cscards .cscard:hover{transform:none;box-shadow:none;border-color:var(--hair)}
.cscards .cscard:hover .dot:not(.active){background:rgba(22,21,25,.35)}
.dashhead{display:flex;justify-content:space-between;align-items:center;padding:20px 28px 2px}
.dashhead .eyebrow{opacity:.55}
.dashstatus{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--hair);border-radius:16px;padding:6px 14px;font-size:12.5px;font-weight:620;background:var(--paper)}
.dashstatus::before{content:"";width:7px;height:7px;border-radius:50%;background:#3f9e63}
@media(max-width:1023px){.cscards .cscard{border-left:0;border-top:1px solid var(--hair)}}

/* console v3 — no shadows, padded surface, horizontal timeline under modules */
.cscards-sec .wrap>.cscards{box-shadow:none}
.dashsurface{border:1px solid var(--hair);border-radius:18px;background:linear-gradient(165deg,var(--paper) 40%,rgba(150,144,162,.09) 100%);padding:26px 30px;box-shadow:none}
.dashsurface .cscards{background:none;border:0;border-radius:0;padding:0;box-shadow:none;grid-template-columns:1fr 1fr 1fr}
.dashsurface .cscard{border-left:1px solid var(--hair);padding:6px 28px 10px}
.dashsurface .cscard:first-child{border-left:0;padding-left:2px}
.dashhead{padding:0 6px 22px}
.cscards-sec .wrap{padding-top:10px}
/* timeline */
.cstimeline{display:flex;align-items:center;gap:18px;border-top:1px solid var(--hair);margin-top:26px;padding-top:24px}
.tlarrow{flex:0 0 auto;width:38px;height:38px;border:1px solid var(--hair);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:15px;cursor:pointer;background:var(--paper);transition:all .25s;user-select:none}
.tlarrow:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.tlrail{flex:1;display:flex;gap:0;overflow-x:auto;scroll-behavior:smooth;position:relative;scrollbar-width:none}
.tlrail::-webkit-scrollbar{display:none}
@media(max-width:1023px){.dashsurface .cscards{grid-template-columns:1fr}.dashsurface .cscard{border-left:0;border-top:1px solid var(--hair);padding:18px 2px}}

/* alignment — section wraps span full width so text hits the same grid edge as modules */
.el-section>.wrap{width:100%}

/* timeline v4 — one view at a time, paged by arrows */
.cstimeline{position:relative;display:flex;align-items:stretch;gap:14px}
.tlviews{flex:1;position:relative;min-height:96px}
.tlview{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .45s ease}
.tlview.active{opacity:1;pointer-events:auto;position:relative}
.tlview .vlabel{font-size:12px;text-transform:uppercase;letter-spacing:.12em;font-weight:620;color:var(--muted);margin-bottom:14px}
.tlaxis{display:flex;position:relative;padding-top:12px}
.tlaxis::before{content:"";position:absolute;top:16px;left:6px;right:6px;height:1px;background:var(--hair)}
.tlaxis .yr{flex:1;position:relative;text-align:center;font-size:13.5px;font-weight:560;color:var(--muted);padding-top:16px}
.tlaxis .yr::before{content:"";position:absolute;top:12px;left:50%;transform:translateX(-50%);width:8px;height:8px;border-radius:50%;background:var(--hair);transition:all .3s}
.tlaxis .yr.active{color:var(--ink);font-weight:680}
.tlaxis .yr.active::before{background:var(--accent,var(--ink));transform:translateX(-50%) scale(1.35)}
.tlduration{display:flex;align-items:center;gap:0;position:relative;padding-top:8px}
.tlduration .dnode{flex:0 0 auto;text-align:center;position:relative;z-index:2}
.tlduration .dnode .dl{font-size:12px;text-transform:uppercase;letter-spacing:.1em;font-weight:620;color:var(--muted)}
.tlduration .dbar{flex:1;height:1px;background:var(--hair);margin:0 14px;position:relative;top:-8px}
.tlarrow{align-self:center}

/* accents — set per case study from cover art via --accent */
.case-study-page .dashstatus::before{background:var(--accent,#3f9e63)}
.case-study-page .dot.active{background:var(--accent,var(--ink))}
.case-study-page .chip:hover{background:var(--accent,var(--ink));border-color:var(--accent,var(--ink));color:#fff}
.case-study-page .tlarrow:hover{background:var(--accent,var(--ink));border-color:var(--accent,var(--ink));color:#fff}
.case-study-page .dashsurface{background:linear-gradient(165deg,var(--paper) 46%,color-mix(in srgb,var(--accent,#9690a2) 10%,transparent) 100%)}

/* v2 — section head */
.sec .sechead{max-width:44em;margin-bottom:8px}

/* ═══════ V2 DESIGN LAYER — de-wire pass ═══════ */
/* rhythm + texture */
.sec{padding:clamp(90px,11vw,150px) 0;position:relative}
::selection{background:#604d3c;color:#fff}
.link-arrow{position:relative;transition:color .25s}
.link-arrow::after{content:" →";font-weight:600;display:inline-block;transition:transform .3s}
.link-arrow:hover::after{transform:translateX(5px)}
.btn::after{content:"→";font-size:14px;margin-left:2px;transition:transform .3s}
.btn:hover::after{transform:translateX(4px)}
.btn.-ghost::after{opacity:.7}

/* home hero — scale + depth */
.hero .eyebrow{display:inline-flex;align-items:center;gap:12px}
.hero .eyebrow::before{content:"";width:34px;height:1px;background:currentColor;opacity:.7}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:220px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.42));z-index:1;pointer-events:none}

/* ghost words — texture on key dark bands */
.sec.-dark{overflow:hidden}
.sec.-dark .split{position:relative;z-index:2}
.sec.-dark::before{content:"THERUM";position:absolute;right:-40px;bottom:-30px;font-size:clamp(120px,18vw,240px);font-weight:700;letter-spacing:-.04em;color:#fff;opacity:.035;line-height:1;pointer-events:none;white-space:nowrap}

/* footer — quiet monument */
.sitefoot{position:relative;overflow:hidden}
/* footer THERUM ghost removed — .footmark is the wordmark (was doubling) */
.sitefoot::before{content:none}

/* reveal stagger inside grids */
.pillargrid .rv:nth-child(2),.items .rv:nth-child(2),.posts .rv:nth-child(2),.psteps .rv:nth-child(2){transition-delay:.08s}
.pillargrid .rv:nth-child(3),.items .rv:nth-child(3),.posts .rv:nth-child(3),.psteps .rv:nth-child(3){transition-delay:.16s}

/* page heroes — kicker ticks + scale */
.page-hero .eyebrow{display:inline-flex;align-items:center;gap:12px}
.page-hero .eyebrow::before{content:"";width:34px;height:1px;background:currentColor;opacity:.7}
.page-hero .h-xl{font-size:clamp(40px,5.4vw,72px)}

/* ═══════ HOME v3 — typographic hero + editorial pillar index ═══════ */
.herotype{padding:clamp(150px,17vw,240px) 0 clamp(70px,8vw,110px);position:relative}
.metaline{display:flex;gap:28px;flex-wrap:wrap;font-size:12px;text-transform:uppercase;letter-spacing:.14em;font-weight:620;color:var(--muted);margin-bottom:clamp(40px,5vw,70px)}
.metaline span+span{position:relative;padding-left:28px}
.metaline span+span::before{content:"";position:absolute;left:0;top:50%;width:16px;height:1px;background:var(--hair)}
.ht-display{font-size:clamp(58px,9.2vw,148px);font-weight:640;line-height:.95;letter-spacing:-.035em}
.ht-display em{font-style:normal;font-weight:300;letter-spacing:-.02em;padding-left:.8em}
.ht-base{display:grid;grid-template-columns:auto 1fr auto;gap:40px;align-items:end;margin-top:clamp(50px,6vw,90px);padding-top:30px;border-top:1px solid var(--hair)}
.ht-base .eyebrow{opacity:.6}
.ht-body{max-width:30em;color:var(--muted);font-size:16.5px}
.ht-base .row{justify-content:flex-end}
@media(max-width:1023px){.ht-base{grid-template-columns:1fr;align-items:start}.ht-base .row{justify-content:flex-start}}
/* pillar index — oversized editorial rows */
.pillarsec .sechead{margin-bottom:clamp(40px,5vw,64px)}
.pillarindex{border-top:1px solid var(--hair)}
.pxrow{display:grid;grid-template-columns:90px 1fr 1.1fr 60px;align-items:center;gap:24px;padding:clamp(26px,3.4vw,44px) 10px;border-bottom:1px solid var(--hair);position:relative;transition:background .35s,padding .35s}
.pxrow::before{content:"";position:absolute;left:0;top:-1px;height:1px;width:0;background:var(--ink);transition:width .5s ease}
.pxrow:hover::before{width:100%}
.pxrow:hover{background:rgba(150,144,162,.05);padding-left:26px}
.pxname{font-size:clamp(34px,4.6vw,64px);font-weight:460;letter-spacing:-.032em;line-height:1;transition:letter-spacing .35s}
.pxrow:hover .pxname{letter-spacing:-.015em}
.pxblurb{font-size:15px;color:var(--muted);max-width:26em}
.pxarrow{font-size:clamp(22px,2.4vw,32px);justify-self:end;opacity:.25;transition:opacity .3s,transform .35s}
.pxrow:hover .pxarrow{opacity:1;transform:translateX(8px)}
@media(max-width:1023px){.pxrow{grid-template-columns:44px 1fr 40px}.pxblurb{display:none}}

/* home v3 fixes — stacked display lines, block metaline, row-click index */
.metaline{display:flex;gap:0;flex-wrap:wrap}
.metaline p{font-size:12px;text-transform:uppercase;letter-spacing:.14em;font-weight:620;color:var(--muted)}
.metaline>*+*{position:relative;padding-left:28px;margin-left:28px}
.metaline>*+*::before{content:"";position:absolute;left:0;top:50%;width:16px;height:1px;background:var(--hair)}
.ht-display{margin:0}
.ht-l1{font-weight:640}
.ht-l2{font-weight:300;padding-left:.9em;letter-spacing:-.02em}
.ht-l3{font-weight:640}
h2.ht-display{font-size:clamp(58px,9.2vw,148px);line-height:.95;letter-spacing:-.035em}
.pxrow{cursor:pointer}
.pxrow .pxnum,.pxrow .pxblurb{margin:0}
.pxrow h3.pxname{font-size:clamp(34px,4.6vw,64px);font-weight:460;letter-spacing:-.032em;line-height:1;transition:letter-spacing .35s}
a.pxarrow{font-size:clamp(22px,2.4vw,32px);justify-self:end;opacity:.25;transition:opacity .3s,transform .35s}
.pxrow:hover a.pxarrow{opacity:1;transform:translateX(8px)}
.metaline>*{font-size:12px;text-transform:uppercase;letter-spacing:.14em;font-weight:620;color:var(--muted)}
.metaline>*+*{position:relative;padding-left:28px;margin-left:28px}
.metaline>*+*::before{content:"";position:absolute;left:0;top:50%;width:16px;height:1px;background:var(--hair)}

/* pillar landing pages */
.pillarhero .ht-display{font-size:clamp(64px,10vw,160px)}
.pillartag{font-size:clamp(20px,2.2vw,28px);font-weight:300;letter-spacing:-.02em;color:var(--muted);margin-top:10px}
.pxname-sm{font-size:clamp(24px,3vw,40px)}

/* services hybrid — sticky left title, accordion rows right */
.svcsplit{display:grid;grid-template-columns:1fr 1.35fr;gap:clamp(40px,6vw,110px);align-items:start}
.svcleft{position:sticky;top:90px;min-width:0}
.svclabel{font-size:13px;color:var(--muted);letter-spacing:.02em;margin-bottom:18px}
.svctitle{font-size:clamp(44px,5.6vw,84px);font-weight:640;line-height:.92;letter-spacing:-.035em;text-transform:uppercase}
.svcsub{color:var(--muted);font-size:15.5px;line-height:1.6;max-width:26em;margin-top:22px}
.svcghost{font-size:clamp(90px,12vw,190px);font-weight:680;line-height:1;letter-spacing:-.04em;opacity:.05;margin-top:clamp(40px,8vw,120px);text-transform:uppercase;pointer-events:none;white-space:nowrap;max-width:100%;overflow:hidden}
.svcrows{border-top:0}
.svcrow{display:grid;grid-template-columns:44px 1fr 30px;align-items:baseline;gap:14px;padding:22px 4px;border-bottom:1px solid var(--hair);cursor:pointer;transition:background .3s}
.svcrow .svcname{font-size:clamp(19px,2vw,26px);font-weight:480;letter-spacing:-.018em;color:var(--muted);transition:color .3s,letter-spacing .3s;margin:0}
.svcrow:hover .svcname,.svcrow.open .svcname{color:var(--ink)}
.svcrow.open .svcname{font-weight:560}
.svctgl{justify-self:end;font-size:20px;font-weight:300;opacity:.4;transition:transform .35s ease,opacity .3s;margin:0}
.svcrow:hover .svctgl{opacity:1}
.svcrow.open .svctgl{transform:rotate(45deg);opacity:1}
.svcbody{grid-column:2/4;max-height:0;opacity:0;overflow:hidden;transition:max-height .45s ease,opacity .35s ease,margin .35s}
.svcrow.open .svcbody{max-height:200px;opacity:1;margin-top:10px}
.svcbody p{color:var(--muted);font-size:14.5px;line-height:1.6;margin:0 0 10px}
@media(max-width:1023px){.svcsplit{grid-template-columns:1fr}.svcleft{position:static}.svcghost{display:none}}
.svcsplit-sec .wrap-wide{padding-right:calc(40px + var(--rail-w))}
@media(max-width:1023px){.svcsplit-sec .wrap-wide{padding-right:20px}}

/* pricing statement band */
.pricingband{position:relative;overflow:hidden;padding:0!important;min-height:100vh}
/* pricing bg video (Vimeo 1022117600) + dark overlay — global via .pricingband template class */
.pricevid{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.pricevid iframe{position:absolute;top:50%;left:50%;width:max(100%,177.78vh)!important;height:max(100%,56.25vw)!important;max-width:none!important;max-height:none!important;transform:translate(-50%,-50%)!important;border:0;pointer-events:none}
.pricingband::before{content:"";position:absolute;inset:0;z-index:1;background:rgba(7,8,11,.8);pointer-events:none}
.pricingband>.wrap,.pricingband>*:not(.pricevid){position:relative;z-index:2}
/* per-page header video: any hero with a vbg-<id> class gets bg video + dark overlay + white text */
.hasvidbg{position:relative;overflow:hidden;padding:0!important;min-height:100vh}
/* fullscreen video, no gaps: kill the herotype top/bottom scrim; one uniform overlay only */
.hasvidbg::after,html.dark-mode .hasvidbg::after,html:not(.dark-mode) .hasvidbg::after{content:none!important;background:none!important;display:none!important}
.hasvidbg::before{content:"";position:absolute;inset:0;z-index:1;background:rgba(7,8,11,.62);pointer-events:none}
.hasvidbg>.wrap,.hasvidbg>*:not(.pricevid){position:relative;z-index:2}
.hasvidbg :is(h1,h2,h3,h4,h5,h6,p,.eyebrow,.lead,.pb-title,.ht-display,.ht-l1,.ht-l2,.ht-l3,.ht-body,.h-xl,.h-lg,.pillartag,.metaline,.metaline>*,.backlink),
.pricingband :is(h1,h2,h3,h4,p,.eyebrow,.lead,.pb-title,.h-xl,.h-lg){color:#fff!important}
.hasvidbg .btn.-ghost,.pricingband .btn.-ghost{color:#fff!important;border-color:rgba(255,255,255,.5)!important}
.pricingband .pb-title{font-size:clamp(44px,6.4vw,96px);font-weight:640;letter-spacing:-.035em;line-height:.98;margin:14px 0 20px}
.pricingband::after{content:"";position:absolute;right:-4%;top:-30%;width:50%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(150,144,162,.14),transparent 65%);pointer-events:none}

/* services v2 — full viewport, internal scroll, rich bodies */
.svcfull{min-height:100vh;display:flex;align-items:center;padding:60px 0}
.svcfull .wrap-wide{width:100%}
.svcfull .svcrows{max-height:calc(100vh - 160px);overflow-y:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 28px,#000 calc(100% - 28px),transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 28px,#000 calc(100% - 28px),transparent 100%);padding:28px 4px}
.svcfull .svcrows::-webkit-scrollbar{display:none}
.svcrow.open .svcbody{max-height:560px}
.svcdesc{font-size:15px}
.svccar{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;margin:16px 0 4px;padding-bottom:6px;scrollbar-width:none}
.svccar::-webkit-scrollbar{display:none}
.svcitem{flex:0 0 180px;scroll-snap-align:start}
.svcitem img,.svcitem video{aspect-ratio:16/9;object-fit:cover;border-radius:8px;width:100%}
.svcitem h5{font-size:13.5px;font-weight:560;margin-top:8px;letter-spacing:-.01em}
/* collection callout */
.collcall{padding:clamp(50px,7vw,90px) 0;border-top:1px solid var(--hair)}
.collink{display:block;font-size:clamp(34px,5.4vw,80px);font-weight:560;letter-spacing:-.035em;line-height:1.05;margin-top:14px;transition:letter-spacing .4s,opacity .3s}
.collink:hover{letter-spacing:-.015em;opacity:.75}
@media(max-width:1023px){.svcfull{min-height:0;display:block}.svcfull .svcrows{max-height:none;-webkit-mask-image:none;mask-image:none}}
.svccaps{font-size:12.5px;text-transform:uppercase;letter-spacing:.1em;font-weight:620;color:var(--muted);margin-top:10px}
.svcdesc{font-size:15px;color:var(--muted);line-height:1.62;max-width:44em}

/* immersive work showcase — full-bleed slide + feature strip */
.showcase{position:relative;background:var(--dark);color:#fff}
.showstage{position:relative;min-height:82vh}
.showslide{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .7s ease}
.showslide.active{opacity:1;pointer-events:auto}
.showbg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.showveil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,16,19,.25) 0%,rgba(16,16,19,.35) 45%,rgba(16,16,19,.88) 100%)}
.showcontent{position:absolute;left:0;right:0;bottom:0;padding:0 clamp(30px,5vw,80px) clamp(40px,5vw,70px);max-width:820px}
.showcontent .eyebrow{opacity:.7}
.showtitle{font-size:clamp(40px,5.6vw,84px);font-weight:640;letter-spacing:-.03em;line-height:.98;margin:12px 0 16px}
.showdesc{color:rgba(255,255,255,.75);font-size:15.5px;line-height:1.6;max-width:34em}
.showstrip{position:relative;display:grid;grid-template-columns:repeat(6,1fr);border-top:1px solid rgba(255,255,255,.16)}
.showtab{padding:20px 18px 24px;cursor:pointer;position:relative;transition:background .3s}
.showtab::before{content:"";position:absolute;top:-1px;left:0;width:0;height:2px;background:#fff;transition:width .5s ease}
.showtab.active::before{width:100%}
.showtab:hover{background:rgba(255,255,255,.05)}
.showtab .stnum{font-size:11px;font-weight:640;opacity:.4;margin:0 0 6px}
.showtab .stname{font-size:13.5px;font-weight:560;letter-spacing:-.01em;opacity:.5;transition:opacity .3s;margin:0}
.showtab.active .stname,.showtab:hover .stname{opacity:1}
@media(max-width:1023px){.showstrip{grid-template-columns:repeat(3,1fr)}.showstage{min-height:64vh}}
@media(max-width:600px){.showstrip{grid-template-columns:repeat(2,1fr)}}
.showstage,.showstrip{width:100%}
@media(max-width:767px){.showcontent{padding:0 20px 30px}.showtitle{font-size:clamp(30px,8vw,44px)}.showstage{min-height:70vh}}
.svcbtns{margin-top:16px;gap:10px}
.svcbtns .btn{padding:11px 20px;font-size:13.5px}

/* engagement model — case-study bento treatment (dark, borderless columns) */
.sec:has(.engrid){background:var(--ink)!important;color:#fff;text-align:center}
.sec:has(.engrid) .eyebrow{color:rgba(255,255,255,.55)!important;text-transform:uppercase;letter-spacing:.16em;font-size:12px;font-weight:650;margin-bottom:clamp(30px,4vw,52px)}
.engrid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(28px,3.6vw,60px);margin-top:0;text-align:left}
.encard{border:0!important;border-radius:0!important;padding:0!important;background:transparent!important;transition:none}
.encard:hover{border-color:transparent!important;transform:none!important}
.encard .ennum{font-size:11px;font-weight:650;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.4);margin:0 0 14px}
.encard .entitle{font-size:clamp(21px,2vw,30px);font-weight:600;letter-spacing:-.02em;color:#fff;margin:0 0 12px}
.encard .enline{font-size:clamp(15px,1.15vw,17.5px);color:rgba(255,255,255,.8);line-height:1.6;margin:0}
@media(max-width:1023px){.engrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.engrid{grid-template-columns:1fr}}
/* alignment: services sticky/ghost inside standard wrap */
.svcfull .svcsplit{gap:clamp(36px,5vw,80px)}
.ht-body{max-width:38em}
.engrid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}

/* hero restructure + discipline pages */
.ht-base{display:block;border-top:1px solid var(--hair);padding-top:26px;margin-top:clamp(40px,5vw,70px)}
.ht-base .eyebrow{margin-bottom:14px;opacity:.6}
.ht-base .row{margin-top:24px;justify-content:flex-start}
.backlink a{font-weight:620;letter-spacing:.02em}
.backlink a:hover{opacity:.7}
.svcbtns{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center}
.pfgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px}
@media(max-width:1023px){.pfgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.pfgrid{grid-template-columns:1fr}}

/* full-width paragraphs + wider services right column + inline buttons + honest subservice rows */
.ht-body{max-width:none}
.svcfull .svcsplit{grid-template-columns:minmax(320px,.9fr) 1.5fr}
@media(min-width:1024px){.svcbtns{flex-wrap:nowrap}}
.subsvc .pxrow{grid-template-columns:90px 1.4fr 1fr;cursor:default}
.subsvc .pxrow:hover{background:none;padding-left:10px}
.subsvc .pxrow::before{display:none}
.subsvc .pxrow .pxname{text-wrap:auto}
.subsvc .pxrow:hover .pxname{letter-spacing:-.032em}
@media(max-width:1023px){.subsvc .pxrow{grid-template-columns:44px 1fr}}

/* ═══ GRID LAW — index rows share the container left edge ═══ */
.pxrow{grid-template-columns:1fr 1.05fr 60px}
.subsvc .pxrow{grid-template-columns:1fr 60px}
.pxn{display:inline-block;font-size:13px;font-weight:680;letter-spacing:.06em;opacity:.35;margin-right:20px;transform:translateY(-.55em)}
.svcrow{grid-template-columns:1fr 40px}
.svcrow .svcbody{grid-column:1/-1}
/* subservices — live rows (click = search the work below) */
.subsvc .pxrow{cursor:pointer}
.subsvc .pxrow:hover .pxname{letter-spacing:-.015em}
.subsvc .pxrow::after{content:"see the work ↓";position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:11.5px;text-transform:uppercase;letter-spacing:.12em;font-weight:640;color:var(--muted);opacity:0;transition:opacity .3s}
.subsvc .pxrow:hover::after{opacity:.8}
/* ═══ REAL PORTFOLIO ═══ */
.pftools{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:34px 0 6px}
.pfsearch{flex:1 1 260px;max-width:380px;background:transparent;border:1px solid var(--hair);border-radius:24px;padding:12px 20px;font-family:var(--font);font-size:14px;color:var(--ink);outline:none;transition:border-color .3s}
.pfsearch:focus{border-color:var(--ink)}
.pfcount{font-size:12.5px;color:var(--muted);margin-left:auto;font-weight:620;letter-spacing:.04em}
.pfgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:26px}
@media(max-width:1023px){.pfgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.pfgrid{grid-template-columns:1fr}}
.pfcard{position:relative;border-radius:12px;overflow:hidden;cursor:pointer;background:#111}
.pfcard img,.pfcard video{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.2,.7,.2,1),opacity .4s}
.pfcard:hover img,.pfcard:hover video{transform:scale(1.05);opacity:.55}
.pfcard .pfmeta{position:absolute;inset:auto 0 0 0;padding:44px 20px 18px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.82));opacity:0;transform:translateY(14px);transition:opacity .35s,transform .35s}
.pfcard:hover .pfmeta{opacity:1;transform:none}
.pfcard .pfmeta h4{margin:0}
.pfcard .pfmeta h4 a{color:#fff;font-size:18px;letter-spacing:-.015em}
.pfcard .pfcats{color:rgba(255,255,255,.72);font-size:11.5px;text-transform:uppercase;letter-spacing:.1em;font-weight:620;margin-top:4px}
.pfcard.hide{display:none}
.pfempty{display:none;color:var(--muted);margin-top:30px;font-size:15px}
.pfempty.show{display:block}
@media(hover:none){.pfcard .pfmeta{opacity:1;transform:none}}

/* grid law refinements from measurement pass */
.subsvc .pxrow{padding-left:0;padding-right:0}
.subsvc .pxrow:hover{padding-left:0;background:transparent}
.pfseed{font-size:12.5px;color:var(--muted);margin-right:6px}
.pftitle{color:#fff;font-size:18px;font-weight:620;letter-spacing:-.015em;margin:0}
.pfgo{display:inline-block;color:rgba(255,255,255,.85);font-size:12px;text-transform:uppercase;letter-spacing:.1em;font-weight:640;margin-top:8px;border-bottom:1px solid rgba(255,255,255,.35);padding-bottom:2px}
.pfgo:hover{color:#fff;border-color:#fff}
.pfq{display:none}

/* ═══ subservices — fade-into-content expansion ═══ */
.subsvc .pxrow.sub5{display:grid;grid-template-columns:repeat(4,1fr);column-gap:28px;cursor:pointer;align-items:start}
.subsvc .pxrow.sub5::after{content:none}
.subsvc .pxrow.sub5 .sub5name{grid-column:1/-1;min-width:0;color:rgba(22,21,25,.5);transition:font-size .45s cubic-bezier(.2,.7,.2,1),color .35s,margin .4s}
.subsvc .pxrow.sub5{--s5fs:clamp(17px,1.5vw,22px)}
.subsvc .pxrow.sub5.open .sub5name{font-size:var(--s5fs);color:var(--ink);margin-bottom:18px}
@media(hover:hover){.subsvc .pxrow.sub5:hover .sub5name{font-size:var(--s5fs);color:var(--ink);margin-bottom:18px}}
.subsvc .pxrow.sub5 .subx{grid-row:2;min-width:0;max-height:0;overflow:hidden;opacity:0;transform:translateY(8px);transition:opacity .35s,transform .45s,max-height .5s cubic-bezier(.2,.7,.2,1)}
.subsvc .pxrow.sub5.open .subx{max-height:360px;opacity:1;transform:none}
.subsvc .pxrow.sub5.open .subx:nth-child(3){transition-delay:.05s}
.subsvc .pxrow.sub5.open .subx:nth-child(4){transition-delay:.1s}
.subsvc .pxrow.sub5.open .subx:nth-child(5){transition-delay:.15s}
@media(hover:hover){.subsvc .pxrow.sub5:hover .subx{max-height:360px;opacity:1;transform:none}
.subsvc .pxrow.sub5:hover .subx:nth-child(3){transition-delay:.05s}
.subsvc .pxrow.sub5:hover .subx:nth-child(4){transition-delay:.1s}
.subsvc .pxrow.sub5:hover .subx:nth-child(5){transition-delay:.15s}}
.sxl{font-size:12px;text-transform:uppercase;letter-spacing:.12em;font-weight:680;color:var(--muted);margin:4px 0 10px;white-space:nowrap}
.sxp{font-size:15.5px;line-height:1.6;color:var(--muted)}
.sxp.ph{font-style:italic;opacity:.55}
.subsvc .pxrow.sub5 .sub5foot{grid-column:1/-1;grid-row:3;max-height:0;overflow:hidden;opacity:0;transition:opacity .35s .12s,max-height .5s cubic-bezier(.2,.7,.2,1)}
.subsvc .pxrow.sub5.open .sub5foot{max-height:120px;opacity:1}
@media(hover:hover){.subsvc .pxrow.sub5:hover .sub5foot{max-height:120px;opacity:1}}
.sub5go{display:inline-block;margin:22px 0 26px;border:1px solid var(--hair);border-radius:20px;padding:9px 20px;font-size:12px;text-transform:uppercase;letter-spacing:.1em;font-weight:660;transition:all .25s}
.sub5go:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
@media(max-width:1023px){.subsvc .pxrow.sub5{grid-template-columns:1fr}.subsvc .pxrow.sub5 .subx{grid-row:auto}.subsvc .pxrow.sub5 .sub5foot{grid-row:auto}}
/* ═══ portfolio filter — dropdown + pills ═══ */
.pfditem{padding:10px 14px;border-radius:8px;font-size:13.5px;font-weight:560;cursor:pointer;transition:background .2s}
.pfditem:hover{background:rgba(150,144,162,.12)}
.pfditem.taken{opacity:.35;pointer-events:none}
.pfpills{display:flex;gap:8px;flex-wrap:wrap}
.pfpill{display:inline-flex;align-items:center;gap:8px;background:var(--ink);color:var(--paper);border-radius:18px;padding:8px 10px 8px 16px;font-size:12.5px;font-weight:620}
.pfpill button{all:unset;cursor:pointer;width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.18);font-size:11px;line-height:1}
.pfpill button:hover{background:rgba(255,255,255,.35)}
.pfseed{display:none}
.sxp.ph{font-style:italic;opacity:.55}

/* ═══ portfolio toolbar v3 — divider search, filter panel, grid switcher ═══ */
.pfheadrow{display:flex;align-items:baseline;justify-content:space-between;gap:20px}
.pfheadrow .pfcount{margin-left:0}
.pftools{display:block;margin:38px 0 0}
.pftoolbar{display:flex;align-items:center;gap:22px;border-bottom:1px solid var(--hair);padding-bottom:14px}
.pfsearch{flex:1;max-width:none;border:0;border-radius:0;background:transparent;padding:8px 0;font-size:14.5px;outline:none}
.pfsearch::placeholder{color:var(--muted);opacity:.7}
.pfgridsw{display:flex;gap:4px;align-items:center}
.pfg{all:unset;cursor:pointer;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:7px;font-size:12.5px;font-weight:660;color:var(--muted);transition:all .2s;font-family:var(--font)}
.pfg:hover{color:var(--ink)}
.pfg.active{background:var(--ink);color:var(--paper)}
.pffbtn{all:unset;cursor:pointer;font-size:12.5px;text-transform:uppercase;letter-spacing:.1em;font-weight:660;color:var(--ink);display:inline-flex;align-items:center;gap:8px;font-family:var(--font)}
.pffbtn::after{content:"▾";font-size:10px;transition:transform .3s}
.pffbtn.on::after{transform:rotate(180deg)}
.pfpanel{display:none;padding:18px 0 6px;border-bottom:1px solid var(--hair)}
.pfpanel.show{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.pfpanel .pfditem{border:1px solid var(--hair);border-radius:18px;padding:8px 16px;font-size:12.5px;font-weight:620;cursor:pointer;transition:all .2s}
.pfpanel .pfditem:hover{border-color:var(--ink)}
.pfpanel .pfditem.taken{opacity:.3;pointer-events:none}
.pfpanelx{all:unset;cursor:pointer;margin-left:auto;font-size:16px;opacity:.5;padding:4px 8px;font-family:var(--font)}
.pfpanelx:hover{opacity:1}
.pfpills{display:flex;gap:8px;flex-wrap:wrap;padding:14px 0 0}
.pfpills:empty{padding:0}
/* grid variants */
.pfgrid{margin-top:30px}
.pfgrid.g1{grid-template-columns:1fr}
.pfgrid.g2{grid-template-columns:repeat(2,1fr)}
.pfgrid.g4{grid-template-columns:repeat(4,1fr)}
.pfgrid.gm{display:block;columns:4 240px;column-gap:22px}
.pfgrid.gm .pfcard{break-inside:avoid;margin-bottom:22px}
.pfgrid.gm .pfcard img,.pfgrid.gm .pfcard video{aspect-ratio:auto}
@media(max-width:1023px){.pfgrid.g4{grid-template-columns:repeat(2,1fr)}.pfgrid.gm{columns:2 200px}}

/* svcrows viewport fix — open body bounded to viewport share, scroll affordance visible, next row always peeks */
.svcrow.open .svcbody{max-height:min(520px,52vh);overflow-y:auto;scrollbar-width:thin;padding-right:8px}
.svcfull .svcrows{scrollbar-width:thin;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 22px,#000 calc(100% - 60px),transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 22px,#000 calc(100% - 60px),transparent 100%)}
.svcfull .svcrows::-webkit-scrollbar{display:block;width:5px}
.svcfull .svcrows::-webkit-scrollbar-thumb{background:rgba(22,21,25,.22);border-radius:3px}
.svcfull .svcrows::-webkit-scrollbar-track{background:transparent}

.metaline a.backlink{font-size:12px;text-transform:uppercase;letter-spacing:.14em;font-weight:620;color:var(--muted)}
.metaline a.backlink:hover{color:var(--ink)}

/* real imagery band */
.secimg{padding:clamp(40px,6vw,80px) 0}
.secimg img{width:100%;border-radius:14px;display:block}

/* ═══════════ REAL THERUM DNA — type/color/scale matched to live Ohio source ═══════════ */
body{font-size:16.4px}
/* type scale → Ohio (h1 = 4.5rem cap, ratio ~0.68 down, weight 600, gentle negative tracking) */
.ht-display,h2.ht-display,.pillarhero .ht-display,.pillarhero.dischero .ht-display{font-size:clamp(42px,6.2vw,80px);font-weight:600;line-height:1.02;letter-spacing:-.045em}
.ht-l1,.ht-l3{font-weight:600}
.ht-l2{font-weight:300;letter-spacing:-.03em}
.h-xl{font-size:clamp(31px,4vw,50px);font-weight:600;line-height:1.08;letter-spacing:-.04em}
.h-lg{font-size:clamp(25px,3vw,37px);font-weight:600;line-height:1.14;letter-spacing:-.035em}
.h-md{font-size:clamp(20px,2vw,24px);font-weight:600;line-height:1.2;letter-spacing:-.03em}
.pxname,h3.pxname,.pillarindex .pxname{font-size:clamp(27px,3.1vw,43px);font-weight:600;letter-spacing:-.035em}
.pxrow:hover .pxname,.pxrow:hover h3.pxname{letter-spacing:-.028em}
.pillartag{font-weight:400;letter-spacing:-.01em}
.svcname{font-weight:600;letter-spacing:-.03em}
.sub5name{font-weight:600}
/* accent — applied sparingly like Ohio: interactive text, arrows, active states, marks */
a.link-arrow,.owgo,.sub5go{color:var(--ink)}
a:hover,a.link-arrow:hover,.nav-link:hover{color:var(--accent);border-color:var(--accent)}
.pxrow:hover a.pxarrow,.pxrow:hover .pxarrow{color:var(--accent);opacity:1}
.sub5go:hover,.owgo:hover{color:var(--accent);border-color:var(--accent)}
.fbtn.active,.cstab-btn.active,.cscard.active,.pfg.active{background:var(--accent);border-color:var(--accent);color:#fff}
.eyebrow::before{content:"";display:inline-block;width:16px;height:2px;background:var(--accent);vertical-align:middle;margin-right:10px;border-radius:2px}
/* section headers (eyebrow directly above a headline): NO red dash, NO rule — just small label over the text */
/* NO dash on ANY eyebrow, site-wide — every header is small label above headline, no dash, no rule */
.eyebrow::before,.hero .eyebrow::before,.page-hero .eyebrow::before,.herotype .eyebrow::before,.hasvideo .eyebrow::before{content:none!important;display:none!important}
.metaline>*:first-child{color:var(--ink)}
.dashstatus::before{background:var(--accent)}
/* radius → Ohio 8px consistency on primary surfaces */
.btn{border-radius:8px}
.btn:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn.-ghost:hover{background:transparent;color:var(--accent);border-color:var(--accent)}

/* ═══ hero background video (like live therum.studio) ═══ */
.herotype{position:relative;overflow:hidden;min-height:min(90vh,860px);display:flex;align-items:center}
.herovid{position:absolute;inset:0;z-index:0;pointer-events:none;margin:0}
.herovid iframe{position:absolute;top:50%;left:50%;width:max(100%,177.78vh);height:max(100%,56.25vw);transform:translate(-50%,-50%);border:0;pointer-events:none}
/* pre-footer CTA star video (Vimeo bg) — keeps the CTA's own padding; content rides above a legibility scrim */
.cta{position:relative;overflow:hidden}
.cta>.ctavid{position:absolute;inset:0;z-index:0;pointer-events:none;margin:0}
.cta>.ctavid iframe{position:absolute;top:50%;left:50%;width:max(100%,177.78vh);height:max(100%,56.25vw);transform:translate(-50%,-50%);border:0;pointer-events:none}
.cta>.ctavid::after{content:"";position:absolute;inset:0;background:rgba(9,9,12,.55)}
.cta>.wrap{position:relative;z-index:2}
/* header video (Vimeo bg on a compact herotype) — dark scrim so white text reads over the footage */
.herotype:has(> .herovid){color:#fff}
.herotype:has(> .herovid)::after{background:linear-gradient(180deg,rgba(9,9,12,.38) 0%,rgba(9,9,12,.62) 100%)!important}
.herotype:has(> .herovid) :is(.ht-display,.ht-l1,.ht-l2,.eyebrow,.metaline,.ht-body,.lead){color:#fff!important}
/* section-background video (Vimeo bg on a full section — pillars, etc.) */
.svhost{position:relative;overflow:hidden}
.svhost>.secvid{position:absolute;inset:0;z-index:0;pointer-events:none;margin:0}
.svhost>.secvid iframe{position:absolute;top:50%;left:50%;width:max(100%,177.78vh);height:max(100%,56.25vw);transform:translate(-50%,-50%);border:0;pointer-events:none}
.svhost>.secvid::after{content:"";position:absolute;inset:0;background:rgba(9,9,12,.6)}
.svhost>:not(.secvid){position:relative;z-index:2}
.svhost.pillarsec,.svhost.pillarsec :is(h1,h2,h3,h4,h5,p,li,.eyebrow,.lead,.sechead,.pillartitle,a){color:#fff!important}
.herotype::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(250,249,247,.60) 0%,rgba(250,249,247,.30) 42%,rgba(250,249,247,.05) 70%,transparent 100%)}
.herotype>.wrap{position:relative;z-index:2;width:100%}
html.dark-mode .herotype::after{background:linear-gradient(90deg,rgba(17,16,19,.66) 0%,rgba(17,16,19,.34) 45%,transparent 78%)}
/* ── header sizing: full-screen hero ONLY on the home video header (.hasvideo); every other page header hugs its content. Must beat #page-main>section{min-height:100vh!important} (l.1292) + .herotype{min-height:100svh!important} (l.1081) → higher specificity + !important ── */
#page-main > section.herotype:not(.hasvideo),
main > section.herotype:not(.hasvideo):not(:has(.pricevid)):not(:has(.herovid)):not(:has(.footvid)):not(:has(.ctavid)):not(:has(.secvid)):not(:has(.secvideo)):not(:has(.csvideo)):not(:has(.csvid-wrap)){min-height:100vh!important;padding-top:clamp(96px,10vh,140px)!important;padding-bottom:clamp(72px,8vh,110px)!important}
/* case-study cover header: kill forced 100vh + trim top padding (keep bottom padding — the synopsis card overlaps up into it) */
#page-main > section.page-hero,
main section.page-hero:not(:has(.pricevid)):not(:has(.herovid)):not(:has(.footvid)):not(:has(.ctavid)):not(:has(.secvid)):not(:has(.secvideo)):not(:has(.csvideo)):not(:has(.csvid-wrap)){min-height:100vh!important;display:flex;flex-direction:column;justify-content:center;padding-top:clamp(96px,10vh,140px)!important;padding-bottom:clamp(72px,8vh,110px)!important}

/* ═══ pillar index → image-forward tiles (Ohio) ═══ */
.pillarindex.-ohio{border-top:1px solid var(--hair)}
.pillarindex.-ohio .pxrow{grid-template-columns:150px 1fr 1.1fr 54px;gap:30px}
.pxthumb{width:150px;height:98px;border-radius:10px;overflow:hidden;background:var(--panel2,#e9e8e4);align-self:center}
.pxthumb img,.pxthumb video{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.pillarindex.-ohio .pxrow:hover .pxthumb :is(img,video){transform:scale(1.07)}
@media(max-width:1023px){.pillarindex.-ohio .pxrow{grid-template-columns:96px 1fr 40px}.pxthumb{width:96px;height:64px}}

/* hero over dark Vimeo clock video → white text + dark scrim (matches live therum.studio) */
.herotype::after{background:linear-gradient(90deg,rgba(12,12,14,.74) 0%,rgba(12,12,14,.48) 46%,rgba(12,12,14,.16) 76%,transparent 100%)!important}
.herotype .wrap, .herotype .ht-display, .herotype .ht-l1, .herotype .ht-l3, .herotype .ht-body, .herotype .metaline>*{color:#fff}
.herotype .ht-l2{color:rgba(255,255,255,.92)}
.herotype .metaline>*{color:rgba(255,255,255,.72)}
.herotype .eyebrow{color:#fff}
.herotype .eyebrow::before{background:var(--accent)}
.herotype hr, .herotype .wrap hr{border-color:rgba(255,255,255,.22)}
.herotype .btn{background:#fff;color:#111013;border-color:#fff}
.herotype .btn.-ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.5)}
.herotype .btn.-ghost:hover{background:#fff;color:#111013;border-color:#fff}
.herotype .btn:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.herotype .metaline>*+*::before{background:rgba(255,255,255,.3)}

/* ═══ generalized video-hero (any hero with .hasvideo) — old therum.studio heros ═══ */
.hasvideo{position:relative;overflow:hidden;min-height:min(88vh,820px);display:flex;align-items:center}
.hasvideo .herovid{position:absolute;inset:0;z-index:0;pointer-events:none;margin:0;overflow:hidden}
.hasvideo .herovid iframe,.hasvideo .herovid video,.hasvideo .herovid img{position:absolute;top:50%;left:50%;width:max(100%,177.78vh);height:max(100%,56.25vw);transform:translate(-50%,-50%);border:0;object-fit:cover;pointer-events:none}
.hasvideo::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(12,12,14,.74) 0%,rgba(12,12,14,.48) 46%,rgba(12,12,14,.16) 76%,transparent 100%)}
.hasvideo>.wrap{position:relative;z-index:2;width:100%}
.hasvideo .ht-display,.hasvideo .ht-l1,.hasvideo .ht-l3,.hasvideo .ht-body,.hasvideo .pillartag,.hasvideo h1,.hasvideo .h-xl,.hasvideo .lead{color:#fff}
.hasvideo .ht-l2{color:rgba(255,255,255,.92)}
.hasvideo .metaline>*{color:rgba(255,255,255,.72)}
.hasvideo .eyebrow{color:#fff}
.hasvideo .metaline>*+*::before{background:rgba(255,255,255,.3)}
.hasvideo hr,.hasvideo .wrap hr{border-color:rgba(255,255,255,.22)}
.hasvideo .backlink a{color:rgba(255,255,255,.8)}
.hasvideo .btn{background:#fff;color:#111013;border-color:#fff}
.hasvideo .btn.-ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.5)}
.hasvideo .btn.-ghost:hover{background:#fff;color:#111013;border-color:#fff}
.hasvideo .btn:hover{background:var(--accent);color:#fff;border-color:var(--accent)}

/* ═══ full-window control frame ═══ */
.navframe{position:fixed;inset:0;z-index:300;display:grid;grid-template-columns:1fr auto 1fr;grid-template-rows:auto 1fr auto;padding:26px clamp(20px,3vw,40px);pointer-events:none;gap:8px}
.rail,.to-top,.mode-pill,.follow-rail{display:none!important}
.nf{pointer-events:auto;font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:650;color:#fff;mix-blend-mode:difference;background:none;border:0;cursor:pointer;font-family:var(--font);text-decoration:none;line-height:1.3;transition:opacity .25s}
.nf:hover{opacity:.6}
.nf-brand{grid-column:1;grid-row:1;justify-self:start;align-self:start;font-size:15px;letter-spacing:.05em;font-weight:700}
.nf-section{grid-column:2;grid-row:1;justify-self:center;align-self:start;opacity:.85;cursor:default;pointer-events:none;white-space:nowrap;max-width:40vw;overflow:hidden;text-overflow:ellipsis}
.nf-menu{grid-column:3;grid-row:1;justify-self:end;align-self:start}
.nf-top{grid-column:1;grid-row:2;justify-self:start;align-self:center;}
.nf-mode{grid-column:3;grid-row:2;justify-self:end;align-self:center;display:flex;flex-direction:column;gap:3px;text-align:right}
.nf-mode .mL,.nf-mode .mD{transition:opacity .2s}
html:not(.dark-mode) .nf-mode .mL{opacity:1}html:not(.dark-mode) .nf-mode .mD{opacity:.4}
html.dark-mode .nf-mode .mD{opacity:1}html.dark-mode .nf-mode .mL{opacity:.4}
.nf-contact{grid-column:1;grid-row:3;justify-self:start;align-self:end}
.nf-copy{grid-column:2;grid-row:3;justify-self:center;align-self:end;pointer-events:none;opacity:.8;white-space:nowrap}
.nf-search{grid-column:3;grid-row:3;justify-self:end;align-self:end}
@media(max-width:640px){.nf-section,.nf-copy{display:none}.navframe{padding:16px}}
/* search panel */
.searchpanel{position:fixed;inset:0;z-index:400;background:var(--paper);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s}
.searchpanel.open{opacity:1;visibility:visible}
.searchform{width:min(760px,86vw);text-align:center}
.searchform .eyebrow{display:block;margin-bottom:18px;color:var(--muted)}
#siteSearch{width:100%;border:0;border-bottom:1px solid var(--hair);background:none;font-family:var(--font);font-size:clamp(28px,5vw,56px);font-weight:300;letter-spacing:-.02em;color:var(--ink);padding:14px 0;outline:none}
.searchhint{margin-top:16px;font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}
.searchresults{list-style:none;margin:18px 0 0;padding:0;text-align:left;max-height:min(52vh,460px);overflow-y:auto}
.searchresults a{display:flex;align-items:baseline;gap:16px;min-height:var(--tap,44px);padding:10px 0;border-bottom:1px solid var(--hair);color:var(--ink);text-decoration:none}
.searchresults a:hover,.searchresults a:focus-visible{color:var(--accent)}
.searchresults .sr-k{flex:0 0 72px;font-size:var(--t-label);text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}
.searchresults .sr-t{font-size:var(--t-lead)}
.searchresults .sr-none{padding:14px 0;color:var(--muted)}
.searchpanel .close-x{position:absolute;top:24px;right:34px;font-size:34px;background:none;border:0;color:var(--ink);cursor:pointer;line-height:1}
.nav-social{margin-top:40px;display:flex;gap:20px}
.nav-social a{font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);text-decoration:none}
.nav-social a:hover{color:var(--ink)}

/* ═══ giant-wordmark footer ═══ */
.sitefoot{background:var(--ink);color:var(--paper);min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:clamp(44px,6vh,90px) 0 clamp(78px,9.5vh,108px);overflow:hidden;position:relative;z-index:2}
.footwrap{width:100%;padding:0 clamp(20px,3vw,40px)}
.foottop{display:grid;grid-template-columns:1.4fr 1fr 1.2fr;gap:clamp(24px,4vw,64px);padding-bottom:clamp(40px,6vw,80px);border-bottom:1px solid rgba(255,255,255,.14)}
@media(max-width:820px){.foottop{grid-template-columns:1fr}}
.footcol{display:flex;flex-direction:column;gap:10px}
.footlbl{font-size:11px;text-transform:uppercase;letter-spacing:.16em;font-weight:650;color:rgba(255,255,255,.5)}
.footcol a{color:var(--paper);text-decoration:none;transition:opacity .2s}.footcol a:hover{opacity:.6}
.footbig{font-size:clamp(20px,2.4vw,30px);font-weight:500;letter-spacing:-.02em}
.footmini{font-size:13px;color:rgba(255,255,255,.55);margin-top:8px}
.footnews .loop{display:flex;border-bottom:1px solid rgba(255,255,255,.3);max-width:320px}
.footnews input{flex:1;background:none;border:0;color:var(--paper);padding:8px 0;font-family:var(--font);font-size:15px;outline:none}
.footnews input::placeholder{color:rgba(255,255,255,.4)}
.footnews button{background:none;border:0;color:var(--paper);font-size:20px;cursor:pointer;min-width:44px;min-height:44px}
.footsocial{display:flex;flex-wrap:wrap;gap:16px;margin-top:18px}
.footsocial a{font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.6)}
.footmark{display:block;text-align:center;text-transform:uppercase;font-weight:700;letter-spacing:-.04em;line-height:.8;color:var(--paper);text-decoration:none;font-size:clamp(78px,17vw,280px);margin:clamp(10px,1.4vw,20px) 0 clamp(6px,1vw,14px);transition:opacity .3s}
.footmark:hover{opacity:.85}
.footbase{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:rgba(255,255,255,.5)}
/* kill old footer cols/base styles interference */
.sitefoot .cols,.sitefoot .base{display:none}
/* ═══ nav frame: no left gap, no clipping ═══ */
.navframe{padding:22px clamp(22px,2.4vw,34px)}
.nf-brand{font-size:14px;letter-spacing:.08em;overflow:visible;white-space:nowrap}
.nf-top{margin-left:-2px}
body,html{overflow-x:hidden}
/* ═══ hero intro: THERUM wordmark → video ═══ */
.herointro{position:fixed;inset:0;z-index:500;background:var(--ink);display:flex;align-items:center;justify-content:center;transition:opacity .9s ease,visibility .9s}
.herointro.gone{opacity:0;visibility:hidden;pointer-events:none}
.herointro .him{color:var(--paper);font-weight:700;letter-spacing:-.04em;font-size:clamp(64px,16vw,280px);line-height:1;transform:scale(.96);opacity:0;animation:himin 1s cubic-bezier(.2,.7,.2,1) forwards}
.herointro.gone .him{transform:scale(1.08);transition:transform .9s ease}
@keyframes himin{to{transform:scale(1);opacity:1}}
@media(prefers-reduced-motion:reduce){.herointro{display:none}}

/* ═══ selected-work full-screen slider ═══ */
.workslider,#workslider{position:relative;width:100%;height:min(90vh,860px);overflow:hidden;background:var(--ink)}
.ws-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .7s ease}
.ws-slide.active{opacity:1;visibility:visible}
.ws-media{position:absolute;inset:0}
.ws-media img,.ws-media video{width:100%;height:100%;object-fit:cover;transform:scale(1.04);transition:transform 6s ease}
.ws-slide.active .ws-media img,.ws-slide.active .ws-media video{transform:scale(1)}
.ws-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,12,14,.45) 0%,rgba(12,12,14,.05) 30%,rgba(12,12,14,.1) 55%,rgba(12,12,14,.82) 100%)}
.ws-inner{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(30px,5vw,64px) clamp(22px,3vw,40px)}
.ws-top{display:flex;justify-content:space-between;align-items:flex-start;color:#fff}
.ws-idx{font-size:12px;letter-spacing:.14em;font-weight:650;font-variant-numeric:tabular-nums}
.ws-body{margin-top:auto;width:100%}
.ws-title{color:#fff;font-size:clamp(38px,6vw,92px);font-weight:680;letter-spacing:-.03em;line-height:.95;margin:0;max-width:14ch}
.ws-desc{color:rgba(255,255,255,.86);font-size:clamp(14px,1.15vw,17px);line-height:1.55;max-width:46em;margin:16px 0 0;text-shadow:0 1px 22px rgba(0,0,0,.45)}
.ws-bar{display:grid;grid-template-columns:1fr 2fr auto auto;gap:clamp(16px,3vw,44px);align-items:end;border-top:1px solid rgba(255,255,255,.25);padding-top:20px;margin-top:24px;color:#fff}
.ws-cell-wide .ws-v{font-weight:520}
.ws-cell .ws-l{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.14em;font-weight:650;color:rgba(255,255,255,.55);margin-bottom:6px}
.ws-cell .ws-v{font-size:clamp(14px,1.4vw,17px);font-weight:520}
.ws-explore{justify-self:end;background:#fff;color:#111013;border:0;border-radius:30px;padding:14px 26px;font-size:13px;font-weight:600;text-decoration:none;white-space:nowrap;transition:transform .25s,background .25s}
.ws-explore:hover{transform:translateY(-2px);background:var(--accent);color:#fff}
.ws-arrow{position:absolute;top:50%;z-index:3;transform:translateY(-50%);width:54px;height:54px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(0,0,0,.2);color:#fff;font-size:20px;cursor:pointer;backdrop-filter:blur(6px);transition:background .25s}
.ws-arrow:hover{background:rgba(255,255,255,.2)}
.ws-prev{left:clamp(14px,2vw,28px)}.ws-next{right:clamp(14px,2vw,28px)}
.ws-dots{position:absolute;bottom:clamp(30px,5vw,64px);left:50%;transform:translateX(-50%);z-index:3;display:flex;gap:10px}
@media(max-width:760px){.ws-bar{grid-template-columns:1fr 1fr;gap:14px}.ws-cell-wide{grid-column:1/-1}.ws-desc{font-size:14px}.ws-explore{grid-column:1/-1;justify-self:start;margin-top:8px}.ws-arrow{display:none}}

/* ═══════════ HERO/LAYOUT HARD FIXES ═══════════ */
/* 1. KILL left band — no side padding, full bleed (--rail-w is 0px in the token block at the top) */
main{margin-left:0!important}
.svcsplit-sec .wrap-wide{padding-right:clamp(20px,3vw,40px)!important}
/* 2. Hero: ONE left alignment, no stagger, no right-drift */
.ht-l2{padding-left:0!important}
.metaline{justify-content:flex-start!important}
.ht-base{grid-template-columns:1fr!important;align-items:start!important;gap:20px!important}
.ht-base .row{justify-content:flex-start!important}
.herotype .wrap,.hasvideo:where(:not(.cta)) .wrap{text-align:left}
/* 3. Hero FULL window height */
.herotype,.hasvideo{min-height:100svh!important;min-height:100vh}
/* 4. Intro = CURTAIN wipe up (NOT a fade) */
.herointro{transition:transform .95s cubic-bezier(.76,0,.24,1)!important;opacity:1!important;visibility:visible!important;will-change:transform}
.herointro.gone{transform:translateY(-100%)!important;opacity:1!important;visibility:visible!important}
.herointro.gone .him{transform:translateY(30%) scale(1)!important;transition:transform .95s cubic-bezier(.76,0,.24,1)}
/* 5. work slider: stop labels colliding with the nav frame */
.workslider,#workslider{margin-top:8px}
.ws-inner{padding:clamp(70px,8vw,110px) clamp(60px,6vw,90px) clamp(30px,5vw,64px)}

/* ═══ INTRO = clean SWIPE UP (no fade). Black "Therum" holds → panel slides up revealing nav+hero ═══ */
.herointro{position:fixed;inset:0;z-index:600;background:var(--ink);display:flex;align-items:center;justify-content:center;transform:translateY(0);transition:transform 1s cubic-bezier(.76,0,.24,1);opacity:1;visibility:visible;will-change:transform}
.herointro .him{color:#fff;font-weight:700;letter-spacing:-.04em;font-size:clamp(64px,16vw,280px);line-height:1;opacity:1;transform:none;animation:none}
.herointro.gone{transform:translateY(-100%);opacity:1;visibility:visible}
.herointro.gone .him{transform:none}
@media(prefers-reduced-motion:reduce){.herointro{display:none}}

/* ═══ kill hero bottom band + gap: vertical even scrim, no hero padding-bottom ═══ */
.herotype{padding-top:0!important;padding-bottom:0!important}
.hasvideo::after,.herotype::after{background:linear-gradient(180deg,rgba(10,10,12,.42) 0%,rgba(10,10,12,.14) 34%,rgba(10,10,12,.20) 62%,rgba(10,10,12,.52) 100%)!important}
html.dark-mode .hasvideo::after,html.dark-mode .herotype::after{background:linear-gradient(180deg,rgba(6,6,8,.5) 0%,rgba(6,6,8,.2) 40%,rgba(6,6,8,.62) 100%)!important}
.hasvideo .wrap,.herotype .wrap{position:relative;z-index:2}

/* ═══ FORCE Site video wrapper + video FULL-BLEED (kills black box + grey gap) ═══ */
.hasvideo .el-video.herovid,.hasvideo .herovid.el-video,.hasvideo .herovid{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;margin:0!important;padding:0!important;border-radius:0!important;overflow:hidden!important;z-index:0!important;background:transparent!important}
.hasvideo .herovid video{position:absolute!important;top:0!important;left:0!important;width:100%!important;height:100%!important;transform:none!important;object-fit:cover!important;border-radius:0!important}
.hasvideo .herovid iframe,.hasvideo .herovid img{position:absolute!important;top:50%!important;left:50%!important;transform:translate(-50%,-50%)!important;object-fit:cover!important;border-radius:0!important}
.hasvideo .herovid [class*="poster"],.hasvideo .herovid .site-video-play,.hasvideo .herovid button{display:none!important}
/* hero fills exactly; body paper never peeks */
.hasvideo{height:100vh!important;min-height:100vh!important}
/* nav: more right padding so LIGHT/DARK · MENU · SEARCH never clip */
.navframe{padding:22px clamp(26px,2.8vw,44px)!important}
.nf-menu,.nf-search,.nf-mode{white-space:nowrap}
.nf-mode{text-align:right}

/* ═══ hero text: ONE cohesive left group, clear of nav, no scatter ═══ */
.hasvideo .wrap{display:flex;flex-direction:column;justify-content:center;gap:0}
.hasvideo .metaline{margin-bottom:clamp(18px,2vw,26px)!important}
.hasvideo .ht-display{margin:0!important}
.hasvideo .ht-base{margin-top:clamp(22px,2.6vw,34px)!important;padding-top:clamp(18px,2vw,24px)!important;gap:clamp(12px,1.4vw,18px)!important}

/* hero group clears the nav top row */
.hasvideo .wrap{justify-content:center!important;padding-top:clamp(64px,8vh,96px);padding-bottom:clamp(30px,5vh,64px)}

/* hero content TRUE vertical center */
.hasvideo .wrap{justify-content:center!important;padding-top:0!important;padding-bottom:0!important;min-height:0}
.hasvideo{display:flex!important;align-items:center!important}

/* ═══ frame v2: icons, hover→label, Tʰ mark, ADAPTIVE color (flips per section bg) ═══ */
.navframe{--nav-color:#161519}
.navframe.on-dark{--nav-color:#ffffff}
.nf{mix-blend-mode:normal!important;color:var(--nav-color)!important;position:relative;display:inline-flex;align-items:center;transition:color .45s ease,opacity .25s}
.nf svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;display:block}
.nf-ico{display:inline-flex;align-items:center;transition:opacity .25s}
.nf-lbl{position:absolute;top:50%;transform:translateY(-50%);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .25s;font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700}
.nf-lbl-l{left:0}.nf-lbl-r{right:0}
.nf:hover .nf-ico{opacity:0}
.nf:hover .nf-lbl{opacity:1}
.th-mark{font-weight:700;font-size:23px;letter-spacing:-.01em;line-height:1;font-feature-settings:"sups"}
.th-mark sup{font-size:.5em;font-weight:600;margin-left:1px;top:-.55em}
.nf-section,.nf-copy{color:var(--nav-color)!important}
.nf-copy{font-size:11px;letter-spacing:.14em}
.nf-mode .mL,.nf-mode .mD{color:var(--nav-color)}

/* hero TRUE vertical center — column-center on the section (definitive) */
.hasvideo{display:flex!important;flex-direction:column!important;justify-content:center!important;align-items:flex-start!important}
.hasvideo:where(:not(.cta))>.wrap{width:100%!important;margin:0!important}
.hasvideo>.herovid{position:absolute!important}
.nf-copy #yr{margin-left:.4em}

/* hero: shift right off BACK-TO-TOP, hide the in-body eyebrow (indicator still reads it) */
.hasvideo:where(:not(.cta))>.wrap{padding-left:clamp(66px,6.5vw,104px)!important}
.hero-eyb-hide{position:absolute!important;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none;margin:0!important;padding:0!important}

/* nav icons — circle + hover label, vertical */
.nf-top,.nf-mode{display:flex;flex-direction:column;align-items:center;gap:12px}
.nfcirc{width:42px;height:42px;border:1px solid currentColor;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:0 0 auto;transition:background .25s,color .25s}
.nfcirc svg{width:17px;height:17px;display:block}
.nf-top:hover .nfcirc,.nf-mode:hover .nfcirc{transform:scale(1.06)}
.nflbl{writing-mode:vertical-rl;font-size:10px;letter-spacing:.18em;text-transform:uppercase;opacity:0;max-height:0;overflow:hidden;transition:opacity .3s ease,max-height .35s ease;text-align:center}
.nf-top:hover .nflbl,.nf-mode:hover .nflbl,.nf-top:focus-visible .nflbl,.nf-mode:focus-visible .nflbl{opacity:.85;max-height:140px}
.nf-mode .ic{display:flex}
html:not(.dark-mode) .ic-moon{display:none}
html.dark-mode .ic-sun{display:none}

/* centered hero (home) */
.hero-center>.wrap{text-align:center;max-width:1040px;margin:0 auto;padding-left:clamp(24px,4vw,48px)!important;padding-right:clamp(24px,4vw,48px)}
.hero-center .metaline{justify-content:center}
.hero-center .ht-display{margin-left:auto;margin-right:auto}
.hero-center .ht-base{display:block;border-top:0;margin-top:0}
.hero-center .ht-base::before{content:"";display:block;width:88px;height:1px;background:currentColor;opacity:.45;margin:30px auto 26px}
.hero-center .ht-body{margin:0 auto 28px;max-width:52ch}
.hero-center .ht-base .row{justify-content:center}

/* centered hero — force metaline + buttons center */
.hero-center .metaline{justify-content:center!important;width:100%}
.hero-center .row,.hero-center .ht-base .row{justify-content:center!important}

/* nav icon fixes */
.nf-top,.nf-mode{transform:none!important;writing-mode:horizontal-tb!important}
.nf-top .nfcirc svg,.nf-mode .nfcirc svg{transform:none}
.nf-mode .nflbl{display:flex;flex-direction:column;gap:4px}
.nf-mode .nflbl .mL,.nf-mode .nflbl .mD{display:block;opacity:.38;transition:opacity .2s}
html:not(.dark-mode) .nf-mode .nflbl .mL{opacity:1}
html.dark-mode .nf-mode .nflbl .mD{opacity:1}

/* CENTER HERO — flex container was pinning left (no justify-content) */
.hero-center{justify-content:center!important;text-align:center}
.hero-center>.wrap{max-width:1040px;width:100%;margin-left:auto!important;margin-right:auto!important;padding-left:clamp(24px,4vw,48px)!important;padding-right:clamp(24px,4vw,48px)!important}
.hero-center .ht-display{margin-left:auto!important;margin-right:auto!important;max-width:none}

/* menu: MENU→Close(✕) floats above overlay; overlay above frame */
.offnav{z-index:500}
html.menu-open .nf-menu{z-index:600;mix-blend-mode:normal;color:var(--ink)}
html.menu-open .navframe .nf:not(.nf-menu){opacity:0;pointer-events:none;transition:opacity .2s}
.nf-menu{position:relative;z-index:301}

/* bigger nav frame */
.nf{font-size:13px;letter-spacing:.13em}
.nf-brand{font-size:19px;letter-spacing:.05em}
.nf-section{font-size:12.5px;letter-spacing:.14em}
.nf-copy{font-size:12px}
.nfcirc{width:54px!important;height:54px!important}
.nfcirc svg{width:22px!important;height:22px!important}
.nf-mode .nflbl{font-size:12px}
/* centered header on ALL pages (reflect home) — no media = paper bg, ink text */
.hero-center:not(.hasvideo){min-height:74vh}
.hero-center:not(.hasvideo):not(.-dark),.hero-center:not(.hasvideo):not(.-dark) .ht-display,.hero-center:not(.hasvideo):not(.-dark) h1{color:var(--ink)}
.hero-center .metaline,.hero-center .ht-base,.hero-center .row{justify-content:center!important}
.hero-center .ht-base{grid-template-columns:1fr!important;text-align:center;max-width:760px;margin-left:auto;margin-right:auto}
.hero-center .backlink{justify-self:center}

/* footer video — SITE WIDE */
.sitefoot{position:relative;overflow:hidden}
.footvid{display:none}
.footvid{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;pointer-events:none}
.sitefoot::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(8,10,14,.72),rgba(8,10,14,.55) 45%,rgba(8,10,14,.8));pointer-events:none}
.sitefoot .footwrap{position:relative;z-index:2}
.sitefoot{color:#fff}
.sitefoot a{color:rgba(255,255,255,.82)}
.sitefoot a:hover{color:#fff}

/* ═══ section header = ONE tight typographic group: red-dash eyebrow → headline → lead.
   NO dividing rule — a full-width line between headline and body read as an accordion / dropdown /
   banner (4 elements in 1). Separation comes from SPACE AROUND the group, never a line through it. ═══ */
.eyebrow + h2, .eyebrow + .h-lg, .eyebrow + .h-xl, .sechead2 .h-lg{position:static;padding-bottom:0;margin:0 0 16px}
.eyebrow + h2::after, .eyebrow + .h-lg::after, .eyebrow + .h-xl::after, .sechead2 .h-lg::after{content:none;display:none}

/* footer stays a dark band in dark mode (was inverting to light) */
html.dark-mode .sitefoot{background:#0f0f12;color:#f2f1f4}
html.dark-mode .sitefoot a{color:rgba(242,241,244,.82)}
html.dark-mode .sitefoot a:hover{color:#fff}
html.dark-mode .sitefoot .loop input{background:transparent;color:#f2f1f4;border-color:rgba(242,241,244,.3)}

/* LARGER nav icons: Tʰ mark, menu, search, contact/message (were 20px SVG) */
.th-mark{font-size:30px!important;font-weight:800!important;line-height:1;letter-spacing:0}
.th-mark sup{font-size:.5em;font-weight:800!important;top:-.55em}
.nf-ico svg{width:30px!important;height:30px!important}
.nf-menu .nf-ico svg,.nf-search .nf-ico svg,.nf-contact .nf-ico svg{stroke-width:1.6}
.nf-ico{display:inline-flex;align-items:center;justify-content:center}
/* labels beside icons a touch bigger too */
.nf-lbl{font-size:13px}

/* no line anywhere in a section header — group stays tight, space below does the separating */
.pillarindex{border-top:0!important}
.eyebrow + h2, .eyebrow + .h-lg, .eyebrow + .h-xl, .sechead2 .h-lg{padding-bottom:0!important;margin-bottom:16px!important}
.eyebrow + h2::after, .eyebrow + .h-lg::after, .eyebrow + .h-xl::after, .sechead2 .h-lg::after{content:none!important;display:none!important}

/* ═══ this whole section = ONE centered column (h+v) on the sand video, NO box — like the hero.
   Stack: headline → paragraph → numbers → "See how we work". Overrides the .hasvideo hero
   rules (left-pad + margin:0 + text-align:left) that were shoving it left. ═══ */
.hasmerged{align-items:center}
.hasmerged>.wrap{text-align:center!important;max-width:1040px!important;width:100%;margin:0 auto!important;padding-left:clamp(24px,4vw,48px)!important;padding-right:clamp(24px,4vw,48px)!important}
.hasmerged .split,.hasmerged .split>*{text-align:center}
.hasmerged .split{display:block;margin-top:0}
.hasmerged .split .h-xl{margin:0 auto;max-width:15ch;font-size:clamp(44px,5.7vw,80px);line-height:1.03;font-weight:600;letter-spacing:-.022em}
.hasmerged .split>div{max-width:52ch;margin:26px auto 0}
.hasmerged .split .lead{margin-left:auto;margin-right:auto;font-size:clamp(16px,1.2vw,18.5px);line-height:1.65}
/* no box — strip background/border/blur/padding. even vertical rhythm w/ the numbers */
.hasmerged .mergedsteps{position:relative;z-index:2;margin:clamp(26px,3vw,40px) auto 0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;border:0;border-radius:0;padding:0;text-align:center;max-width:1120px;width:100%}
.hasmerged .mergedsteps .link-arrow{margin-top:0}
.hasmerged .mergedsteps .link-arrow{color:#fff;display:inline-block;margin-top:clamp(28px,3vw,44px)}

/* ═══ all sections full viewport height, content vertically centered ═══ */
main > section.el-section, #page-main > section.el-section{min-height:100vh;display:flex;flex-direction:column;justify-content:center}
/* content-heavy sections: let them grow past 100vh, keep top-aligned so nothing clips */
.pfolio, .svcfull, .cscards-sec, main > section:has(.pfgrid), main > section:has(.pillarindex){justify-content:flex-start;padding-top:clamp(90px,12vh,150px);padding-bottom:clamp(90px,12vh,150px)}
/* darker overlay on home footer video */
.sitefoot::before{background:linear-gradient(180deg,rgba(5,6,9,.92),rgba(5,6,9,.86) 50%,rgba(5,6,9,.95));opacity:1!important;transform:none!important;left:0!important;right:0!important;width:auto!important}

/* full-height sections — win specificity via #page-main id */
#page-main > section{min-height:100vh!important;display:flex;flex-direction:column;justify-content:center}
#page-main > section:has(.pfgrid), #page-main > section:has(.pillarindex), #page-main > section.svcfull, #page-main > section.pfolio, #page-main > section.cscards-sec{justify-content:flex-start;padding-top:clamp(90px,13vh,150px);padding-bottom:clamp(90px,13vh,150px)}

/* ═══ slider: arrows grouped on right (small), progress line, no dots ═══ */
.ws-dots{display:none!important}
.ws-nav{position:absolute;right:clamp(78px,7vw,120px);bottom:clamp(128px,17vh,190px);z-index:4;display:flex;gap:10px}
.ws-nav .ws-arrow{position:static!important;transform:none!important;top:auto!important;left:auto!important;right:auto!important;width:46px;height:46px;font-size:17px;border:1px solid rgba(255,255,255,.4);background:rgba(0,0,0,.25);backdrop-filter:blur(6px)}
.ws-nav .ws-arrow:hover{background:#fff;color:#111013;border-color:#fff}
.ws-progress{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(255,255,255,.16);z-index:4}
.ws-progress-fill{display:block;height:100%;width:16.66%;background:#fff;transition:width .5s cubic-bezier(.2,.7,.2,1)}
@media(max-width:760px){.ws-nav{display:flex;right:20px;bottom:90px}.ws-nav .ws-arrow{width:40px;height:40px}}

/* slider arrows — smaller + refined */
.ws-nav .ws-arrow{width:40px!important;height:40px!important;font-size:14px!important;border:1px solid rgba(255,255,255,.32)!important;background:rgba(0,0,0,.18)!important;display:flex;align-items:center;justify-content:center}
.ws-nav{gap:8px}

/* slider arrow glyphs — SVG, perfectly centered */
.ws-nav .ws-arrow{font-size:0!important;padding:0!important;line-height:0!important}
.ws-nav .ws-arrow svg{width:16px;height:16px;display:block}

/* case-study media gallery (imported therum.studio imagery, full-bleed stacked) */
#page-main>section.csgallery,main>section.csgallery{min-height:100vh!important;display:flex!important;flex-direction:column;justify-content:center;padding:0!important}
.csgallery .el-image,.csgallery .csgimg{width:100%;margin:0;line-height:0;border-radius:0}
.csgallery img,.csgallery video{width:100%;height:auto;display:block}

/* ═══ case-study story body (therum.studio structure: headings + copy + before/after sliders + carousel + video) ═══ */
.csbody{width:100%}
.csbody .csh{font-size:clamp(27px,3.3vw,46px);font-weight:600;letter-spacing:-.03em;line-height:1.06;margin:0 0 14px;color:var(--ink)}
.csba{position:relative;max-width:1200px;margin:clamp(30px,4vw,54px) auto 0;overflow:hidden;border-radius:10px;user-select:none;line-height:0;aspect-ratio:16/9}
.csba .csba-beforewrap{position:absolute;inset:0;width:50%;overflow:hidden}
.csba .csba-beforewrap img{position:absolute;inset:0;width:1200px;max-width:none;height:100%;object-fit:cover}
.csba .csba-handle{position:absolute;top:0;bottom:0;left:50%;width:2px;background:#fff;transform:translateX(-50%);pointer-events:none;z-index:4}
.csba .csba-handle span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:42px;height:42px;border-radius:50%;background:#fff;box-shadow:0 2px 14px rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center}
.csba .csba-handle span::before{content:"‹ ›";font-size:16px;color:#111;letter-spacing:2px}
.csgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;padding:clamp(28px,4vw,48px) clamp(24px,4vw,48px) 0}
.csgrid img,.csgrid video{width:100%;height:100%;object-fit:cover;border-radius:6px;display:block}
@media(max-width:700px){.csgrid{grid-template-columns:1fr}}

/* case-study hero image */
.case-study-page .page-hero.cshashero{position:relative;overflow:hidden}
.case-study-page .page-hero.cshashero::after{content:"";position:absolute;inset:0;z-index:0;background:var(--cshero) center/cover no-repeat}
.case-study-page .page-hero.cshashero::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(9,11,18,.9) 0%,rgba(9,11,18,.72) 42%,rgba(9,11,18,.5) 100%)}
.case-study-page .page-hero.cshashero>*{position:relative;z-index:2}
/* an animated hero plays as a video (therum.js __therumCSHeroVid); --cshero stays as its poster for no-JS */
.case-study-page .page-hero.cshashero>video.cshero-vid{position:absolute;inset:0;z-index:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 30%;pointer-events:none}
.case-study-page .page-hero.cshashero.cshasvid::after{background:none}

/* ═══ before/after slider (case-study media) ═══ */
.ba{position:relative;width:100%;aspect-ratio:var(--ar,16/10);overflow:hidden;border-radius:14px;user-select:none;touch-action:pan-y;cursor:ew-resize;background:#0a0a0a}
.ba>img,.ba-before img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.ba-before{position:absolute;inset:0;z-index:2;clip-path:inset(0 50% 0 0);will-change:clip-path}
.ba:focus-visible{outline:3px solid var(--paper);outline-offset:-3px;box-shadow:inset 0 0 0 6px var(--ink)}
.ba-handle{position:absolute;top:0;bottom:0;left:50%;width:2px;background:#fff;z-index:3;transform:translateX(-50%);pointer-events:none}
.ba-handle::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;background:#fff;box-shadow:0 2px 16px rgba(0,0,0,.4)}
.ba-handle::before{content:"⟺";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1;font-size:17px;color:#111;font-weight:800}
.ba-lbl{position:absolute;top:14px;z-index:4;font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:#fff;background:rgba(0,0,0,.5);padding:5px 12px;border-radius:20px;pointer-events:none}
.ba-lbl.-b{left:14px}.ba-lbl.-a{right:14px}
.csbagrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,24px);margin-top:clamp(26px,3vw,42px)}
@media(max-width:820px){.csbagrid{grid-template-columns:1fr}.ba{aspect-ratio:var(--ar,4/3)}}
/* Visa-brand colored story sections */
.cswhite{background:#fff!important}
.cswhite :is(h1,h2,h3,h4,h5,.h-lg,.h-xl,.eyebrow){color:var(--accent,#1434CB)!important}.cswhite :is(p,.lead,li){color:#3a3a55!important}
.csblue .ba,.cswhite .ba,.csyellow .ba{margin-top:clamp(28px,3.4vw,48px)}
/* case-study story: full-bleed colored sections */
.csstory{position:relative;width:100vw;left:50%;transform:translateX(-50%);margin:0}
.csb{padding:clamp(64px,9vw,130px) 0}
.csb>.wrap{max-width:1100px;margin:0 auto;padding:0 clamp(24px,4vw,48px);width:100%}
.csb .eyebrow{display:block;margin-bottom:16px;opacity:.9}
.csbody{font-size:clamp(18px,1.5vw,22px);line-height:1.55;font-weight:500;letter-spacing:-.01em;max-width:none;margin:0}
.csb p:not(.csbody){font-size:clamp(16px,1.15vw,18px);line-height:1.65;max-width:none;margin:18px 0 0}
.csb p strong{font-weight:680}
/* slider sections sit on the page bg, between the colored TEXT sections (therum pattern) */
.csimg{background:transparent;padding:clamp(34px,4.5vw,72px) 0}
.csimg>.wrap{max-width:1100px;margin:0 auto;padding:0 clamp(24px,4vw,48px)}
.csimg .ba,.csimg .csbagrid{margin-top:0}
/* case-study story sections span full width (Bam) — content edge-to-edge minus modest padding */
.csb>.wrap,.csimg>.wrap{max-width:var(--cs-col-max)!important;margin-inline:auto;padding-left:var(--cs-gutter);padding-right:var(--cs-gutter)}
.csbody{max-width:none}
.therum-cs-modes{display:none!important}
/* case-study: colored + slider story sections full height; bento content centered (closes the gap) */
.csb{min-height:100vh;display:flex;flex-direction:column;justify-content:center}
#page-main > section.cssynop{min-height:0!important;display:block!important;padding-bottom:clamp(44px,5vw,84px)!important}
/* case-study header centered like the home hero */
.case-study-page .page-hero{text-align:center}
.case-study-page .page-hero>.wrap{max-width:1040px!important;margin:0 auto!important;text-align:center!important;padding-left:clamp(24px,4vw,48px)!important;padding-right:clamp(24px,4vw,48px)!important}
.case-study-page .page-hero .eyebrow{display:inline-flex;justify-content:center}
.case-study-page .page-hero h1,.case-study-page .page-hero .h-xl,.case-study-page .page-hero .h-xxl{margin-left:auto;margin-right:auto}
.case-study-page .page-hero .lead{margin-left:auto;margin-right:auto;max-width:44em}
/* colored story sections: text centered */
.csb>.wrap{text-align:center}
.csbody,.csb p{margin-left:auto;margin-right:auto;max-width:58ch}
/* case-study hero fade-swap: default text/buttons ↔ bento-content overlay */
.page-hero{position:relative}
.cs-viewbtns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:clamp(24px,3vw,38px)}
.cs-vb{cursor:pointer;font-family:var(--font)}
.cs-hero-default{transition:opacity .4s ease}
.page-hero.show-summary .cs-hero-default{opacity:0;visibility:hidden;pointer-events:none}
.cs-hero-summary{position:absolute;inset:0;z-index:4;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .5s ease}
.page-hero.show-summary .cs-hero-summary{opacity:1;visibility:visible;pointer-events:auto}
.cs-sum-inner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:min(1080px,90vw)}
.cs-sum-close{position:absolute;top:clamp(20px,4vh,40px);right:clamp(20px,4vw,44px);width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:rgba(0,0,0,.28);color:#fff;font-size:24px;line-height:1;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background .2s;z-index:6}
.cs-sum-close:hover{background:rgba(255,255,255,.2)}
.cs-hero-summary,.cs-hero-summary *{color:#fff!important}
.cs-hero-summary .cscard,.cs-hero-summary .dashsurface,.cs-hero-summary .cstimeline,.cs-hero-summary .cscards,.cs-hero-summary .csbento{background:transparent!important;border-color:rgba(255,255,255,.22)!important;box-shadow:none!important}
.cs-hero-summary .dot{background:rgba(255,255,255,.4)!important}
.cs-hero-summary .dot.active{background:#fff!important}
.cs-toggle-armed #page-main>section.cs-hidden-orig{display:none!important}
.cs-toggle-armed .cs-full:not(.show){display:none!important}
.cs-toggle-armed .cs-full.show{display:block!important}

.cs-hero-summary .dashhead{display:none}
.cs-hero-summary .cstimeline{margin-top:clamp(20px,3vw,34px)}
.cs-hero-summary .cscard h3,.cs-hero-summary .cscard .h-md{font-size:clamp(20px,2vw,26px)}
/* summary overlay: clean 3-col grid, no console box */
.cs-hero-summary .dashsurface{display:block!important;background:transparent!important;border:0!important;padding:0!important}
.cs-hero-summary .cscards{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:clamp(28px,3.4vw,56px)!important;align-items:start}
.cs-hero-summary .cscard{border:0!important;border-left:0!important;padding:0!important;background:transparent!important;min-width:0}
.cs-hero-summary .cstimeline{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.22)!important;margin-top:clamp(22px,2.6vw,36px);padding-top:clamp(18px,2.2vw,30px)}
.cs-hero-summary .cscard h3,.cs-hero-summary .cscard .h-md{margin-bottom:10px}
/* summary overlay: cloned cards' pagination is dead (JS ran on originals) — force first page visible, hide dots */
.cs-hero-summary .cardpages .cpage{max-height:none!important;opacity:1!important;transform:none!important;overflow:visible!important}
.cs-hero-summary .cardpages .cpage:not(:first-child){display:none!important}
.cs-hero-summary .dot,.cs-hero-summary .cscard .dots{display:none!important}
.cs-hero-summary .blurb{color:#fff!important}
/* close X: force top-right of the overlay */
.cs-hero-summary .cs-sum-close{position:fixed!important;top:84px!important;right:clamp(20px,4vw,44px)!important;left:auto!important;bottom:auto!important;margin:0!important;z-index:310}
/* CTA sections = video-backed (1022143129), dark overlay, white text, buttons on dark */
.cta{position:relative;overflow:hidden}
.cta::before{content:"";position:absolute;inset:0;z-index:1;background:rgba(7,8,11,.74);pointer-events:none}
.cta>*:not(.pricevid){position:relative;z-index:2}
.cta :is(h1,h2,h3,.h-lg,.h-xl,p,.eyebrow,.lead){color:#fff!important}
.cta .btn:not(.-ghost){background:#fff!important;color:#111013!important;border-color:#fff!important}
.cta .btn.-ghost{background:transparent!important;color:#fff!important;border-color:rgba(255,255,255,.55)!important}
.cta .btn.-ghost:hover{background:#fff!important;color:#111013!important}
/* colored story sections: big, bold, impactful statement text */
.csb .csbody{font-size:clamp(30px,3.7vw,54px)!important;font-weight:680!important;line-height:1.16!important;letter-spacing:-.02em;max-width:min(1300px,92vw)!important}
.csb .csh,.csb .cscopy,.csb .cscopy p{color:inherit!important}
/* per-brand colored sections. The plate and its ink are per-section tokens: a section sets --plate and
   --plate-ink and gets that plate; a section that sets neither keeps the old default, so nothing that was
   never painted changes. These rules carry !important because a Site section background would otherwise
   win, which is why an inline background never took. */
.csb.cssx{background:var(--plate,var(--accent,#16161B))!important}
.csb.cssx.cssx-alt{background:var(--plate,#141414)!important}
.csb.cssx,.csb.cssx :is(h1,h2,h3,h4,h5,.eyebrow,.csbody,p,strong,li,.lead,.h-lg,.h-xl){color:var(--plate-ink,#fff)!important}
.cssx :is(.eyebrow,.csbody,p,strong,li){color:inherit!important}
.cssx .eyebrow{opacity:.6}
/* fill the section like Visa — big bold statement + substantial wide body, not a thin column */
.cssx>.wrap{max-width:var(--cs-col-max)!important;text-align:center}
.cssx .csbody{font-size:clamp(32px,3.9vw,56px)!important;max-width:min(1300px,92vw)!important;margin-left:auto;margin-right:auto}
.cssx .wrap>p:not(.csbody),.cssx .csbody+p{font-size:clamp(20px,1.75vw,28px)!important;line-height:1.5!important;max-width:min(1300px,92vw)!important;font-weight:500;opacity:1!important;margin-top:clamp(22px,2.4vw,34px)!important}
.csb .wrap>p:not(.csbody),.csb .csbody+p{font-size:clamp(18px,1.5vw,25px)!important;font-weight:480;line-height:1.55;max-width:none;margin-left:auto;margin-right:auto;opacity:.92;margin-top:clamp(20px,2.4vw,32px)}
/* no widows, better rags */
.csb .csbody,.cssx .csbody{text-wrap:balance}
.csb .wrap p,.cssx .wrap p{text-wrap:pretty}
/* ANY section holding an injected bg video = NO top/bottom padding (full-bleed) */
:has(> .pricevid),:has(> .herovid),:has(> .footvid){padding-top:0!important;padding-bottom:0!important}
.cta{padding:0!important}
/* story sections flush — no gaps/margins between them (Bam: no padding top/bottom of videos/sections) */
.csstory .csb,.csstory>section,.csimg{margin-top:0!important;margin-bottom:0!important}
/* ALL full-height sections flush — zero margins between any section (case study + everywhere) */
#page-main>section,main>section,.csstory>section{margin-top:0!important;margin-bottom:0!important}
/* Vimeo bg iframes letterbox inside the player — scale up so the video overflows + covers, killing top/bottom bars */
/* cover handled by max(100%,177.78vh)/max(100%,56.25vw) at .pricevid iframe above — no fixed scale (broke at non-1440x913 aspects) */
/* ═══ cs-story galleries + heading/copy for imported case studies (visa template, no before/after) ═══ */
.csgallery{padding:0!important;min-height:100vh!important;display:flex;flex-direction:column;justify-content:center;background:var(--ink)}
.csgallery .wrap{max-width:var(--cs-col-max)!important;padding:0 var(--cs-gutter)!important}
.csgallery .csgrid{padding-left:0;padding-right:0}
.csgallery .csgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
.csgallery .csgrid.one{grid-template-columns:1fr}
.csgallery .csgrid.three{grid-template-columns:repeat(3,1fr)}
.csgallery .csgrid img,.csgallery .csgrid video{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:4/3;background:#0d0d10}
.csgallery .csgrid.one img,.csgallery .csgrid.one video{aspect-ratio:16/9}
.csb .csh{font-size:clamp(30px,4vw,60px);font-weight:600;line-height:1.05;letter-spacing:-.025em;max-width:20ch;margin:0 auto}
.csb .cscopy{margin-top:clamp(22px,2.6vw,36px);max-width:56ch;margin-left:auto;margin-right:auto}
.csb .cscopy p{font-size:clamp(16px,1.25vw,19px);line-height:1.65;margin:0 0 14px;opacity:.92}
.csb .cscopy p:last-child{margin-bottom:0}
@media(max-width:760px){.csgallery .csgrid,.csgallery .csgrid.three{grid-template-columns:1fr}}
/* per-study gallery: column count (csgN) + aspect (sq/nat), matched to each therum source */
/* masonry columns — no empty cells, no gaps, no crop */
.csgallery .csgrid{display:block!important;grid-template-columns:none!important;column-gap:0!important;gap:0!important}
.csgallery .csgrid.csg2{column-count:2!important}
.csgallery .csgrid.csg3{column-count:3!important}
.csgallery .csgrid.csg4{column-count:4!important}
/* full-bleed standalone image between sections — full image, never cropped */
.csfullimg{padding:0!important;min-height:0!important;background:var(--ink);line-height:0}
.csfullimg img,.csfullimg video{width:100%!important;height:auto!important;display:block;object-fit:contain!important;aspect-ratio:auto!important}
/* case-study embeds: YouTube/Vimeo video + interactive Figma — full-bleed, no crop */
.csvideo{padding:0!important;min-height:0!important;background:#000}
.csvideo .csvid-wrap{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden}
.csvideo .csvid-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.csfigma{padding:clamp(40px,6vw,96px) 0!important;min-height:0!important;background:var(--ink)}
.csfigma .csfig-wrap{width:100%;box-sizing:border-box;max-width:var(--cs-col-max);margin:0 auto;padding:0 var(--cs-gutter);height:min(82vh,860px)}/* 2026-10-29: width:auto in the flex column shrank every Figma embed to 302 px (Deadass) */
.csfigma .csfig-wrap iframe{width:100%;height:100%;border:1px solid rgba(255,255,255,.12);display:block;background:#111}
/* 3-tab Figma component (Key Outputs) — block section, horizontal nav over full-width panel */
.csfigmatabs{display:block!important;min-height:0!important;height:auto!important;padding:clamp(48px,7vw,110px) 0!important;background:var(--ink)}
.csfigmatabs>.wrap{display:block!important;max-width:var(--cs-col-max)!important;margin:0 auto!important;padding:0 clamp(24px,4vw,48px)!important;text-align:left!important}
.cstabs{display:block}
.cstabs-nav{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:10px;margin:0 auto clamp(26px,3.4vw,44px);flex-wrap:wrap;padding:0;list-style:none}
.cstab{display:inline-flex;align-items:center;flex:0 0 auto;width:auto;height:auto;background:transparent;border:1px solid rgba(255,255,255,.28);color:#fff;padding:11px 24px;border-radius:100px;font:inherit;font-size:15px;font-weight:560;line-height:1.1;letter-spacing:-.01em;cursor:pointer;white-space:nowrap;transition:background .2s,color .2s,border-color .2s}
.cstab:hover{border-color:rgba(255,255,255,.6)}
.cstab.active{background:#fff;color:#111013;border-color:#fff}
.cstabs-panels{display:block;position:relative;width:100%}
.cstab-panel{display:none;width:100%;height:min(80vh,820px)}
.cstab-panel.active{display:block}
.cstab-panel iframe{width:100%;height:100%;border:1px solid rgba(255,255,255,.12);display:block;background:#111}.cstab-panel img{width:100%;height:100%;object-fit:contain;display:block;background:#111}
/* 2026-09-21 tall screens in image tabs (full-page captures): the panel scrolls, the image keeps its width and natural height, never shrunk to a sliver.
   Bam 2026-10-12: a single-image panel sizes to its image at 100% width; only page captures (-tall) keep the capped, scroll-inside box */
.cstab-panel.-img{height:auto}
.cstab-panel.-tall{max-height:min(80vh,820px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.cstab-panel.-img img{width:100%;max-width:100%;height:auto;object-fit:unset;margin:0 auto}
/* NEVER crop — every gallery image shows full, natural aspect (Bam law) */
.csgallery img,.csgallery video,.csgallery .csgrid img,.csgallery .csgrid video,.csgallery .csgrid-sq img,.csgallery .csgrid-nat img{width:100%!important;height:auto!important;object-fit:contain!important;aspect-ratio:auto!important;border-radius:0!important;background:transparent!important;display:block;break-inside:avoid;-webkit-column-break-inside:avoid;margin:0!important;vertical-align:top}
@media(max-width:760px){.csgallery .csgrid.csg2,.csgallery .csgrid.csg3,.csgallery .csgrid.csg4{grid-template-columns:1fr!important}}

/* case-study deck / PDF presentation */
.csb.csdeck{padding:clamp(40px,6vw,90px) 0}
.csdeck .wrap{max-width:var(--cs-col-max);margin:0 auto}
.csdeck iframe{width:100%;height:min(88vh,1120px);border:0;display:block;background:#fff;border-radius:6px;box-shadow:0 2px 24px rgba(0,0,0,.10)}
.csdeck .deckcap{font-size:13px;color:var(--muted,#777);margin-top:12px;text-align:center}

/* deck slideshow */
.csb.csdeck{padding:clamp(40px,6vw,90px) 0}
.csdeck .wrap{max-width:var(--cs-col-max);margin:0 auto}
.deck{position:relative;background:#0d0d10;border-radius:8px;overflow:hidden;box-shadow:0 10px 44px rgba(0,0,0,.30);outline:none}
.deck-stage{position:relative;width:100%;line-height:0}
.deck-slide{width:100%;height:auto;display:none}
.deck-slide.is-active{display:block}
.deck-nav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;border:0;background:rgba(255,255,255,.9);color:#111;font-size:24px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s,opacity .2s;z-index:2}
.deck-nav:hover{background:#fff}
.deck-prev{left:16px}
.deck-next{right:16px}
.deck-count{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.62);color:#fff;font-size:12px;letter-spacing:.06em;padding:5px 13px;border-radius:100px;z-index:2}
.csdeck .deckcap{font-size:13px;color:var(--muted,#777);margin-top:12px;text-align:center}
@media(max-width:600px){.deck-nav{width:38px;height:38px;font-size:19px}}

/* infrastructure svc cards: 16:9 placeholder + detail line, no scroll mask */
.svcph{aspect-ratio:16/9;width:100%;border-radius:8px;background:linear-gradient(135deg,#16161b,#2b2b34)}
.svcitem .svcitemdesc{font-size:11.5px;color:var(--muted,#8c8c92);margin-top:4px;line-height:1.4}
.svcrows{-webkit-mask-image:none;mask-image:none}

/* === FINAL (chat spec 2026-09-12): full-height sections; bg videos COVER their section (no letterbox band); slider carries its own title; no bands above/below the slider. Hero untouched. === */
.svhost>.secvid iframe,.ctavid iframe,#page-main>section:not(.herotype) .herovid iframe{top:50%!important;left:50%!important;transform:translate(-50%,-50%)!important;width:auto!important;height:auto!important;min-width:100%!important;min-height:100%!important;max-width:none!important;max-height:none!important;aspect-ratio:16/9!important}
#page-main>section.workslidersec{padding-top:0!important;padding-bottom:0!important}
.ws-top{align-items:flex-start;gap:24px}
.ws-idx{font-size:11px;text-transform:uppercase;letter-spacing:.18em;font-weight:650;color:rgba(255,255,255,.85);font-variant-numeric:tabular-nums}
.ws-headline{font-size:clamp(16px,1.5vw,22px);font-weight:600;letter-spacing:-.01em;line-height:1.2;color:#fff;text-align:right;max-width:52%}
/* CTA bg video: a later rule made .ctavid position:relative → inset:0 dead → 0x0 → iframe 0x0. Force the layer. */
#page-main>section.cta>.ctavid,.cta>.ctavid,.ctavid{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;margin:0!important;z-index:0!important;overflow:hidden!important}
#page-main>section.cta>.wrap,.cta>.wrap{position:relative;z-index:2}
/* bg video COVER, engine-safe: size the iframe against its own container (cq units), no aspect-ratio transfer. */
.svhost>.secvid,.ctavid{container-type:size}
.svhost>.secvid iframe,.ctavid iframe{width:max(100cqw,177.78cqh)!important;height:max(100cqh,56.25cqw)!important;min-width:0!important;min-height:0!important;max-width:none!important;max-height:none!important;aspect-ratio:auto!important;top:50%!important;left:50%!important;transform:translate(-50%,-50%)!important}
/* slider fills its full-height section — no strip above/below the slides */
#page-main>section.workslidersec{display:block!important;min-height:100vh!important;padding:0!important}
#workslider{position:relative!important;height:100vh!important;min-height:100vh!important;width:100%!important;margin:0!important}

/* === MOBILE NAV FRAME (Bam 2026-09-12): same transparent frame. Row 1: Logo | section text | Menu. Row 3: 4-icon dock — Back to top · Email · Light/Dark · Search (desktop left/right semantics kept). === */
@media(max-width:640px){
  .navframe{grid-template-columns:repeat(4,1fr)!important;grid-template-rows:auto 1fr auto!important;padding:14px 14px max(14px,env(safe-area-inset-bottom))!important;gap:0 6px!important}
  .nf-brand{grid-column:1!important;grid-row:1!important;justify-self:start!important;align-self:center!important}
  .nf-section{display:block!important;grid-column:2/4!important;grid-row:1!important;justify-self:center!important;align-self:center!important;max-width:46vw;font-size:10.5px;letter-spacing:.14em}
  .nf-menu{grid-column:4!important;grid-row:1!important;justify-self:end!important;align-self:center!important}
  .nf-copy{display:none!important}
  .nf-top,.nf-contact,.nf-mode,.nf-search{grid-row:3!important;align-self:end!important;justify-self:center!important;margin:0!important;display:flex!important;flex-direction:column!important;align-items:center!important;text-align:center!important;gap:0!important}
  .nf-top{grid-column:1!important}.nf-contact{grid-column:2!important}.nf-mode{grid-column:3!important}.nf-search{grid-column:4!important}
  .nf-contact .nf-ico,.nf-search .nf-ico{width:54px;height:54px;border:1px solid currentColor;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;opacity:1!important}
  .nf-contact .nf-ico svg,.nf-search .nf-ico svg{width:22px!important;height:22px!important}
  .nf-top .nflbl,.nf-mode .nflbl,.nf-contact .nf-lbl,.nf-search .nf-lbl,.nf-menu .nf-lbl,.nf-brand .nf-lbl{display:none!important}
}

/* ==================================================================================================
   THERUM DESIGN SYSTEM v1 (2026-09-12) — tokens + rules. Edit TOKENS in the :root blocks at the top of this file, never per-page values.
   Doc: addons/studio/knowledge/design-system.md
   ================================================================================================== */

/* layout containers */
.wrap{max-width:var(--wrap)!important;padding-left:var(--gutter)!important;padding-right:var(--gutter)!important;box-sizing:border-box}
.wrap-wide{max-width:var(--wrap-wide)!important;padding-left:var(--gutter)!important;padding-right:var(--gutter)!important;box-sizing:border-box}

/* running copy */
p,li,.svcbody p,.csbody p{font-size:var(--t-body);line-height:var(--lh-body)}
.lead,.ht-body,.svcsub{font-size:var(--t-lead);line-height:var(--lh-lead)}
p,.lead,.ht-body,.svcsub{max-width:var(--measure)}
.hero-center p,.hero-center .lead,.hero-center .ht-body,.cta p,.cta .lead,.sechead p{margin-left:auto;margin-right:auto}
.hero-center .ht-body,.hero-center .lead{text-align:center}
p+p{margin-top:var(--s4)}
.eyebrow{font-size:var(--t-label)}
.svclabel{font-size:var(--t-small)}
.svcitem h5{font-size:15px}
.svcitem .svcitemdesc{font-size:var(--t-small)!important;line-height:1.5}

/* headings */
.h-xl{font-size:var(--t-h1)}.h-lg{font-size:var(--t-h2)}
h3,.svcrow .svcname{font-size:var(--t-h3)}
.ht-display,h2.ht-display{font-size:var(--t-display)}
.sechead,.sechead2{margin-bottom:var(--s6)}

/* section rhythm (desktop). Hero / video / slider / CTA carry their own rules. */
.sec:not(.hasvideo):not(.workslidersec),.collcall{padding-top:var(--sec-y);padding-bottom:var(--sec-y)}

/* interaction + a11y */
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;border-radius:4px;box-shadow:0 0 0 2px var(--focus-band)}/* 2026-10-28: a light ring and a dark band, so the ring shows on any section (it was currentColor: white on a white section) */
.btn{min-height:var(--tap)}

/* ---------- mobile ---------- */
@media(max-width:640px){
  html,body{overflow-x:clip}
  .wrap,.wrap-wide{width:100%!important;max-width:100%!important;margin-left:0!important;margin-right:0!important}
  /* phones: content sections hug their content; hero, video, slider, CTA keep their height */
  #page-main>section:not(.herotype):not(.hasvideo):not(.showcase):not(.workslidersec):not(.cta):where(:not(.page-hero)){min-height:auto!important;justify-content:flex-start!important}
  .sec:not(.hasvideo):not(.workslidersec),.collcall,.cscards-sec,.cssynop{padding-top:var(--sec-y)!important;padding-bottom:var(--sec-y)!important}
  main>section.herotype:not(.hasvideo):not(:has(.pricevid)):not(:has(.herovid)):not(:has(.footvid)):not(:has(.ctavid)):not(:has(.secvid)):not(:has(.secvideo)):not(:has(.csvideo)):not(:has(.csvid-wrap)),main>section.page-hero:not(:has(.pricevid)):not(:has(.herovid)):not(:has(.footvid)):not(:has(.ctavid)):not(:has(.secvid)):not(:has(.secvideo)):not(:has(.csvideo)):not(:has(.csvid-wrap)){padding-top:calc(var(--s8) + 20px)!important;padding-bottom:var(--s6)!important}
  .page-hero{padding-bottom:var(--s7)!important}
  /* sub-service rows + carousel: readable */
  .svcrow{grid-template-columns:28px 1fr 22px;gap:var(--s3);padding:var(--s4) 0;min-height:var(--tap)}
  .svcrow.open .svcbody{max-height:none!important}
  .svccar{gap:var(--s3);margin:var(--s3) 0 0}
  .svcitem{flex:0 0 min(78vw,320px)!important}
  .svcitem h5{font-size:16px}.svcitem .svcitemdesc{font-size:15px!important}
  .svctitle{font-size:clamp(36px,11vw,52px)}
  .ht-display,h2.ht-display{font-size:var(--t-display)!important;line-height:1!important}
  .h-lg{font-size:var(--t-h2)!important}.h-xl{font-size:var(--t-h1)!important}
  /* tap targets */
  .btn,.nav-link,.ws-explore,.footcol a,.pillarindex a,.svcitem a{min-height:var(--tap);display:inline-flex;align-items:center}
  .btn{padding:12px 20px}
  .ws-arrow{width:var(--tap);height:var(--tap)}
  a,button{-webkit-tap-highlight-color:transparent}
}

/* DS v1.1 — phone enforcement (ID-scoped so page-level rules can't undercut the tokens) */
@media(max-width:640px){
  #page-main .wrap,#page-main .wrap-wide,.herotype .wrap,.page-hero .wrap{padding-left:var(--gutter)!important;padding-right:var(--gutter)!important}
  /* 16px floor for all running copy; labels/eyebrows/numbers exempt */
  #page-main :is(p,li,.lead,.ht-body,.svcsub,.svcdesc,.svcbody p,.pillar-sub,.pillarindex p,.csbody p,.cscopy,.pb-body,.svcitemdesc):not(.eyebrow):not(.svclabel):not(.svcnum):not(.metaline){font-size:max(16px,var(--t-body))!important;line-height:var(--lh-body)!important}
  #page-main :is(.lead,.ht-body){font-size:var(--t-lead)!important;line-height:var(--lh-lead)!important}
  /* 44px tap targets for every non-inline link/button */
  #page-main :is(a,button):not(p a):not(li a):not(.nf):not(.ws-arrow){min-height:var(--tap);display:inline-flex;align-items:center}
  #page-main .pfgrid a,#page-main .cscard a,#page-main .pillarindex a{display:flex}
}

/* DS v1.2 — desktop enforcement (ID-scoped). Case-study sections excluded (locked). */
@media(min-width:641px){
  #page-main :is(p,li,.svcsub,.svcdesc,.svcbody p,.svcitemdesc,.pillar-sub,.pillarindex p,.pb-body):not(.eyebrow):not(.svclabel):not(.svcnum):not(.metaline){font-size:max(16px,var(--t-body));line-height:var(--lh-body)}
  #page-main :is(.lead,.ht-body){font-size:var(--t-lead);line-height:var(--lh-lead)}
  #page-main :is(p,.lead,.svcsub,.svcdesc):not(.cscopy):not(.csbody p):not(.csout-card p):not(.csstory p):not(.article *){max-width:var(--measure)!important} /* Key Outputs lines span the card (2026-09-22) */
  #page-main>section:is(.sec,.svcfull,.pillarsec,.pfolio,.collcall):not(.hasvideo):not(.workslidersec):not(.cscards-sec):not(.cssynop):not(:has(.pricevid)):not(:has(.herovid)):not(:has(.footvid)):not(:has(.ctavid)):not(:has(.secvid)):not(:has(.secvideo)):not(:has(.csvideo)):not(:has(.csvid-wrap)){padding-top:var(--sec-y)!important;padding-bottom:var(--sec-y)!important}
  #page-main .svcitem h5{font-size:15px}
}

/* DS v1.3 — ht-body is a DIV with a page rule → pin it (--measure 48ch, --t-small 15px captions: token block at the top) */
#page-main .lead:not(.article *){font-size:var(--t-lead)!important;line-height:var(--lh-lead)!important;max-width:var(--measure)!important}
.article .lead{font-size:var(--t-lead);line-height:var(--lh-lead)}
#page-main .svcitem .svcitemdesc{font-size:var(--t-small)!important}







/* DS v1.4 — dark-mode + mobile correctness on the pillar template */
/* engagement band: stays a dark band in dark mode (was --ink = light + white text) */
html.dark-mode .sec:has(.engrid){background:var(--dark)!important;color:#fff}
.sec:has(.engrid) .enline{color:rgba(255,255,255,.74)!important}
.sec:has(.engrid) .ennum{color:rgba(255,255,255,.5)}
/* services title was hardcoded near-black */
html.dark-mode .svctitle{color:var(--ink)!important}
/* sub-service split: single column on phones/tablets (desktop-only column template was leaking → rows 8px wide) */
@media(max-width:1023px){
  .svcfull .svcsplit,.svcsplit{grid-template-columns:1fr!important;gap:var(--s6)!important}
  .svcrows,.svcright{width:100%!important;min-width:0!important}
  .svcfull .svcrows{max-height:none!important;overflow:visible!important;-webkit-mask-image:none!important;mask-image:none!important;padding:0!important}
}
/* nav frame: every control follows the adaptive --nav-color (was fixed white) */
#navframe .nf,#navframe .nf svg,#navframe .nfcirc,#navframe .nf-lbl,#navframe .nflbl{color:var(--nav-color)!important;mix-blend-mode:normal!important}

/* ============ REVISIONS 2026-09-17 ============ */
/* 1. loader: black plate, white wordmark (was theme --ink = light in dark mode) */
.herointro{background:#000!important}
.herointro .him{color:#fff!important}

/* 2. home "what we do" → motion gradient instead of video */
.pillarsec.motiongrad>.secvid{display:none!important}
.pillarsec.motiongrad{position:relative;isolation:isolate}
.pillarsec.motiongrad::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(120deg,#0e1a2b 0%,#123049 18%,#2a1b4a 38%,#6138f5 55%,#123049 74%,#0e1a2b 100%);
  background-size:300% 300%;animation:thgrad 26s ease-in-out infinite;opacity:.85}
.pillarsec.motiongrad::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(60% 50% at 70% 25%,rgba(97,56,245,.35),transparent 70%),radial-gradient(50% 40% at 20% 80%,rgba(0,168,224,.25),transparent 70%);
  animation:thglow 18s ease-in-out infinite alternate}
.pillarsec.motiongrad>*:not(.secvid){position:relative;z-index:2}
@keyframes thgrad{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes thglow{0%{transform:translate3d(0,0,0) scale(1);opacity:.75}100%{transform:translate3d(-3%,2%,0) scale(1.08);opacity:1}}
@media(prefers-reduced-motion:reduce){.pillarsec.motiongrad::before,.pillarsec.motiongrad::after{animation:none}}

/* 3. every section full height, content centred — pillar / craft / work templates */
#page-main>section.herotype{min-height:100vh!important;display:flex!important;flex-direction:column!important;justify-content:center!important;padding-top:clamp(96px,10vh,140px)!important;padding-bottom:clamp(72px,8vh,110px)!important}
#page-main>section{justify-content:center}

/* 4. alignment: one rule — heroes and CTAs centred, every content section left */
#page-main>section:is(.herotype,.cta),#page-main>section:is(.herotype,.cta) :is(h1,h2,h3,p,.lead,.ht-body,.eyebrow){text-align:center}
#page-main>section:not(.herotype):not(.page-hero):not(.cta):not(.csb):not(.cscards-sec):not(.csgallery),
#page-main>section:not(.herotype):not(.page-hero):not(.cta):not(.csb):not(.cscards-sec):not(.csgallery):not(.hasmerged) :is(h1,h2,h3,p,.lead,.ht-body,.eyebrow,.svclabel,.pb-title,.showtitle,.showdesc){text-align:left}
.sec:has(.engrid){text-align:left!important}
.sec:has(.engrid) .eyebrow{text-align:left!important}

/* 5. services split: wider, better two-column */
.svcfull .wrap-wide,.svcsplit-sec .wrap-wide{max-width:min(1560px,94vw)!important}
@media(min-width:1024px){.svcfull .svcsplit{grid-template-columns:minmax(380px,.8fr) 1.7fr!important;gap:clamp(48px,5vw,96px)!important}}

/* 6. pricing: the floating THERUM becomes a large centred backdrop */
.sec.-dark.pricingband::before{left:50%!important;right:auto!important;top:50%!important;bottom:auto!important;transform:translate(-50%,-50%)!important;font-size:clamp(140px,22vw,340px)!important;opacity:.055!important;text-align:center}

/* 7. work page: hero wordmark cycle, full-width title, 4-up grid */
@keyframes thinout{0%{opacity:0;transform:translateY(14px) scale(.98)}12%{opacity:1;transform:none}46%{opacity:1;transform:none}62%{opacity:0;transform:translateY(-14px) scale(1.02)}100%{opacity:0;transform:translateY(14px) scale(.98)}}
.pfmain{font-size:clamp(34px,5vw,68px);font-weight:560;letter-spacing:-.035em;line-height:1.02;margin:0 0 clamp(22px,3vw,40px);width:100%;grid-column:1/-1}
.pfolio>.wrap{max-width:min(1560px,94vw)!important}
.pfgrid{grid-template-columns:repeat(4,1fr)!important}
@media(max-width:1200px){.pfgrid{grid-template-columns:repeat(3,1fr)!important}}
@media(max-width:900px){.pfgrid{grid-template-columns:repeat(2,1fr)!important}}
@media(max-width:600px){.pfgrid{grid-template-columns:1fr!important}}

/* --- engagement model: informational cards --- */
.engrid{align-items:start}
.encard{display:flex;flex-direction:column;gap:0;border-top:1px solid rgba(255,255,255,.16)!important;padding-top:var(--s5)!important}
.encard .enline{font-size:var(--t-body);color:rgba(255,255,255,.82)!important;margin:0 0 var(--s4)!important}
.encard .enbody{font-size:var(--t-body);line-height:var(--lh-body);color:rgba(255,255,255,.7);margin:0 0 var(--s4);max-width:42ch}
.encard .enbest{font-size:var(--t-small);line-height:1.5;color:rgba(255,255,255,.6);margin:0 0 var(--s4)}
.encard .enbest span{display:inline-block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:rgba(255,255,255,.45);margin-right:8px}
.encard .enlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.encard .enlist li{position:relative;padding-left:20px;font-size:var(--t-small);line-height:1.55;color:rgba(255,255,255,.78)}
.encard .enlist li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:1px;background:rgba(255,255,255,.5)}
@media(max-width:900px){.encard{padding-top:var(--s4)!important}}

/* --- signature work: link + controls --- */
.showgo{display:inline-flex;align-items:center;gap:8px;min-height:var(--tap);margin-top:var(--s4);font-size:var(--t-small);font-weight:650;letter-spacing:.02em;color:#fff;border-bottom:1px solid rgba(255,255,255,.45);transition:border-color .25s,opacity .25s}
.showgo:hover{border-color:#fff;opacity:.85}
.shownav{position:absolute;left:0;right:0;bottom:clamp(20px,3vw,34px);z-index:4;display:flex;align-items:center;justify-content:center;gap:var(--s4);pointer-events:none}
.shownav>*{pointer-events:auto}
.showarrow{width:var(--tap);height:var(--tap);border-radius:50%;border:1px solid rgba(255,255,255,.45);background:rgba(0,0,0,.28);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:16px;cursor:pointer;transition:background .25s,border-color .25s}
.showarrow:hover{background:rgba(255,255,255,.14);border-color:#fff}
.showdots{display:flex;gap:9px}
.showdots button{width:9px;height:9px;padding:0;border-radius:50%;border:0;background:rgba(255,255,255,.34);cursor:pointer;transition:background .25s,transform .25s}
.showdots button.on{background:#fff;transform:scale(1.25)}
.showcase{position:relative}

/* --- the archive: index-card stack graphic --- */
.collcall{position:relative;overflow:hidden}
.archgfx{position:absolute;right:clamp(20px,5vw,90px);top:50%;transform:translateY(-50%) rotate(-8deg);display:grid;gap:9px;width:clamp(180px,22vw,330px);pointer-events:none;opacity:.5}
.archgfx span{display:block;height:clamp(16px,2.1vw,30px);border:1px solid var(--hair);border-left:3px solid var(--muted);background:linear-gradient(90deg,rgba(150,144,162,.16),transparent 78%);transform-origin:left center;animation:archslide 7s ease-in-out infinite}
.archgfx span:nth-child(1){width:100%;animation-delay:0s}.archgfx span:nth-child(2){width:88%;animation-delay:.25s}
.archgfx span:nth-child(3){width:94%;animation-delay:.5s}.archgfx span:nth-child(4){width:72%;animation-delay:.75s}
.archgfx span:nth-child(5){width:90%;animation-delay:1s}.archgfx span:nth-child(6){width:64%;animation-delay:1.25s}
.archgfx span:nth-child(7){width:84%;animation-delay:1.5s}.archgfx span:nth-child(8){width:56%;animation-delay:1.75s}
@keyframes archslide{0%,100%{transform:translateX(0);opacity:.55}50%{transform:translateX(12px);opacity:1}}
@media(max-width:900px){.archgfx{opacity:.22;right:-10px;width:56vw}}
@media(prefers-reduced-motion:reduce){.archgfx span{animation:none}}

/* headings: the face comes from the base heading rule at the top; the ink is inherited from the page (the base rule sets no
   colour); component rules (.ws-title, .showtitle) win on their own specificity. */
.showcase :is(h1,h2,h3,.showdesc,.eyebrow,.showtitle){color:#fff}
.ws-title,.ws-desc,.ws-v,.ws-l{color:#fff}
.ws-desc{color:rgba(255,255,255,.88)}
.ws-l{color:rgba(255,255,255,.62)}

/* work slider plate: was var(--ink) → a white box behind the slides in dark mode */
#workslider{background:#0d0d10!important}
.ws-slide{background:#0d0d10}

/* left-aligned sections: copy blocks must share the heading's left edge (measure caps width, never centres the box) */
#page-main>section:not(.herotype):not(.page-hero):not(.cta):not(.csb):not(.cscards-sec):not(.csgallery):not(.hasmerged) :is(p,.lead,.ht-body,.svcsub,.sechead,.pb-body){margin-left:0!important;margin-right:0!important}


/* ==== CASE STUDY HEADER — LOCKED 2026-09-18 (Mode of One is the reference) ==== */
.case-study-page .page-hero .lead{font-weight:700}







/* ==== STATEMENT WIDTH LOCK — paragraph spans the title width (Bam 2026-09-18) ==== */
html body #page-main section.csb.cssx>div.wrap>p,html body #page-main section.csb.cssx>div.wrap>p.csbody{max-width:none!important;margin-left:auto!important;margin-right:auto!important}
/* ==== END STATEMENT WIDTH LOCK ==== */


/* ==== STATEMENT TITLE BREAK — balance wins over the inherited text-wrap:pretty ==== */
html body #page-main section.csb.cssx>div.wrap>p.csbody{text-wrap:balance!important}
/* ==== END STATEMENT TITLE BREAK ==== */

/* ==== OVERFLOW SECTIONS — white plate, black text, linked columns 2026-09-18 ==== */
.csb.cseditorial,.csb.csoverflow{background:#f5f4f1!important;color:#14141a!important}
#page-main :is(.cseditorial,.csoverflow)>.wrap{max-width:var(--cs-col-max)!important;margin-inline:auto!important;text-align:left!important}
#page-main .cseditorial .csed-title{font-size:clamp(32px,3.9vw,56px)!important;font-weight:600!important;letter-spacing:-.022em;line-height:1.05!important;color:#14141a!important;margin:0 0 clamp(30px,3.4vw,52px)!important;max-width:none!important;text-wrap:balance}
#page-main :is(.cseditorial,.csoverflow) .csed-flow{column-count:3;column-gap:clamp(44px,4.8vw,96px);column-fill:balance}
#page-main :is(.cseditorial,.csoverflow) .csed-flow.c2{column-count:2}
#page-main :is(.cseditorial,.csoverflow) .csed-flow p{font-size:clamp(19px,1.45vw,22px)!important;line-height:1.58!important;letter-spacing:-.004em;color:#33333d!important;font-weight:400!important;opacity:1!important;max-width:none!important;margin:0 0 1.05em!important;break-inside:auto;orphans:2;widows:2;hyphens:none;-webkit-hyphens:none;text-wrap:pretty}
#page-main :is(.cseditorial,.csoverflow) .csed-flow p:last-child{margin-bottom:0!important}
/* Key Outputs — numbered spec rows over a hover-revealed image */
#page-main .csout-sec{position:relative;overflow:hidden}
#page-main .csout-sec .csout-bgs,#page-main .csout-sec .csout-veil{position:absolute;inset:0;pointer-events:none}
#page-main .csout-sec .csout-bgs{z-index:0}
#page-main .csout-sec .csout-bgs i{position:absolute;inset:0;background-image:var(--im);background-size:var(--sz,cover);background-position:var(--pos,center);transform:scale(var(--sc,1.12));opacity:0;transition:opacity .5s ease}
#page-main .csout-sec .csout-veil{z-index:1;background:linear-gradient(90deg,rgba(10,10,12,.86) 0%,rgba(10,10,12,.74) 55%,rgba(10,10,12,.62) 100%);opacity:0;transition:opacity .5s ease}
#page-main .csout-sec>.wrap{position:relative;z-index:2}
#page-main .csout-sec .csout-intro{font-size:clamp(19px,1.45vw,22px)!important;line-height:1.55!important;color:#33333d!important;font-weight:400!important;max-width:none!important;margin:0 0 clamp(34px,3.6vw,56px) 0!important;margin-inline:0!important;opacity:1!important;transition:color .5s ease}
#page-main .csoverflow .csout-list{display:block}
#page-main .csoverflow .csout-card{display:grid!important;grid-template-columns:72px 1fr!important;gap:clamp(16px,2vw,36px);align-items:baseline;border-top:1px solid rgba(20,20,26,.16);padding:clamp(20px,2vw,30px) 0;transition:border-color .5s ease}
#page-main .csoverflow .csout-card:first-child{border-top:0;padding-top:0}
/* News / Press: the last block of every case study (Bam 2026-10-03), inside the final text section; colours follow the section ink */
.cspress{margin-top:var(--s9)}
.cspress>.eyebrow{margin-bottom:var(--s5)}
.cspress-list{list-style:none;margin:0;padding:0}
.cspress-list li{border-top:1px solid color-mix(in srgb,currentColor 16%,transparent)}
.cspress-list li:last-child{border-bottom:1px solid color-mix(in srgb,currentColor 16%,transparent)}
.cspress-list a{display:grid;grid-template-columns:minmax(140px,220px) 1fr auto;gap:var(--s5);align-items:baseline;min-height:var(--tap);padding:var(--s5) 0;color:inherit;text-decoration:none}
.cspress-outlet{font-size:var(--t-label);letter-spacing:.14em;text-transform:uppercase;opacity:.62}
.cspress-title{font-size:var(--t-lead);line-height:var(--lh-lead)}
.cspress-date{font-size:var(--t-small);opacity:.62;white-space:nowrap}
.cspress-none{display:block;min-height:var(--tap);padding:var(--s5) 0;font-size:var(--t-small);opacity:.62}
.cspress-list a:hover .cspress-title,.cspress-list a:focus-visible .cspress-title{text-decoration:underline;text-underline-offset:.2em}
@media(max-width:640px){.cspress-list a{grid-template-columns:1fr;gap:var(--s2)}}
#page-main .csoverflow .csout-card:last-child{padding-bottom:0}
#page-main .csoverflow .csout-n{font-size:12px;letter-spacing:.18em;font-weight:650;color:rgba(20,20,26,.4);transition:color .5s ease}
#page-main .csoverflow .csout-card p{font-size:clamp(19px,1.7vw,28px)!important;line-height:1.3!important;color:#14141a!important;font-weight:500!important;letter-spacing:-.012em;margin:0!important;max-width:none!important;opacity:1!important;transition:color .5s ease,opacity .35s ease}
#page-main .csout-sec[data-hov] .csout-veil{opacity:1}
#page-main .csout-sec[data-hov="1"] .csout-bgs i:nth-child(1),#page-main .csout-sec[data-hov="2"] .csout-bgs i:nth-child(2),#page-main .csout-sec[data-hov="3"] .csout-bgs i:nth-child(3),#page-main .csout-sec[data-hov="4"] .csout-bgs i:nth-child(4),#page-main .csout-sec[data-hov="5"] .csout-bgs i:nth-child(5){opacity:1}
#page-main .csout-sec[data-hov] :is(.csout-intro,.csout-card p){color:#fff!important}
#page-main .csout-sec[data-hov] .csout-n{color:rgba(255,255,255,.55)!important}
#page-main .csout-sec[data-hov] .csout-card{border-top-color:rgba(255,255,255,.22)}
#page-main .csout-sec[data-hov] .csout-card p{opacity:.42!important}
#page-main .csout-sec[data-hov="1"] .csout-card:nth-child(1) p,#page-main .csout-sec[data-hov="2"] .csout-card:nth-child(2) p,#page-main .csout-sec[data-hov="3"] .csout-card:nth-child(3) p,#page-main .csout-sec[data-hov="4"] .csout-card:nth-child(4) p,#page-main .csout-sec[data-hov="5"] .csout-card:nth-child(5) p{opacity:1!important}
@media(max-width:900px){#page-main :is(.cseditorial,.csoverflow) .csed-flow{column-count:1!important}#page-main .csoverflow .csout-card{grid-template-columns:1fr!important;gap:8px}}
/* ==== END OVERFLOW SECTIONS ==== */

/* ==== SHORT VERSION OVERLAY 2026-09-18 ==== */
html body.case-study-page .page-hero .cs-hero-summary{position:fixed!important;inset:0!important;width:100vw!important;height:100vh!important;z-index:200!important;background:rgba(9,11,18,.965)!important;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);overflow-y:auto!important;display:flex;align-items:center;justify-content:center}
/* closed: never paints, never catches a click */
html body.case-study-page .page-hero:not(.show-summary) .cs-hero-summary,html body.case-study-page .page-hero:not(.show-summary) .cs-hero-summary *{visibility:hidden!important;pointer-events:none!important}
html body.case-study-page .page-hero .cs-sum-inner{position:static!important;transform:none!important;width:min(1240px,90vw)!important;margin:0 auto!important;padding:clamp(40px,6vh,80px) 0!important;text-align:left!important}
/* three columns, left aligned, label + copy */
html body.case-study-page .cs-hero-summary .cscards{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:clamp(32px,4vw,76px)!important;align-items:start}
html body.case-study-page .cs-hero-summary .cscard{text-align:left!important;padding:0!important;border:0!important;background:transparent!important}
html body.case-study-page .cs-hero-summary .cscard h3,html body.case-study-page .cs-hero-summary .cscard .h-md{font-size:12px!important;letter-spacing:.18em!important;text-transform:uppercase;font-weight:650!important;color:rgba(255,255,255,.55)!important;margin:0 0 16px!important;padding-bottom:14px!important;border-bottom:1px solid rgba(255,255,255,.2)}
html body.case-study-page .cs-hero-summary .cardpages{display:flex!important;flex-direction:column;gap:12px;position:static!important;height:auto!important;min-height:0!important}
html body.case-study-page .cs-hero-summary .cardpages .cpage:not(:first-child){display:block!important}
html body.case-study-page .cs-hero-summary .cardpages .cpage{position:static!important;inset:auto!important;max-height:none!important;height:auto!important;opacity:1!important;transform:none!important;overflow:visible!important}
html body.case-study-page .page-hero.show-summary .cs-hero-summary .cardpages .cpage{visibility:visible!important;pointer-events:auto!important}
html body.case-study-page .cs-hero-summary :is(.blurb,.cpage>.el-text-basic){font-size:clamp(15px,1.15vw,17px)!important;line-height:1.62!important;color:rgba(255,255,255,.86)!important;font-weight:400!important;max-width:none!important;margin:0!important;text-wrap:pretty}
/* no pills */
html body.case-study-page .cs-hero-summary .chiprow,html body.case-study-page .cs-hero-summary .chip,html body.case-study-page .cs-hero-summary .dots,html body.case-study-page .cs-hero-summary .dot{display:none!important}
/* summary title + services call-out */
html body.case-study-page .cs-hero-summary .cssum-title{font-size:clamp(30px,3.2vw,46px)!important;font-weight:600!important;letter-spacing:-.022em;line-height:1.05;color:#fff!important;margin:0 0 clamp(26px,3vw,42px)!important;text-align:left}
html body.case-study-page .cs-hero-summary .cssvc{list-style:none!important;display:grid;grid-template-columns:repeat(2,1fr);gap:4px 18px;margin:18px 0 0!important;padding:16px 0 0!important;border-top:1px solid rgba(255,255,255,.14)}
html body.case-study-page .cs-hero-summary .cssvc li{font-size:12px;letter-spacing:.06em;color:rgba(255,255,255,.62);padding:0;margin:0;line-height:1.5;white-space:nowrap}

/* project meta bar */
.csmeta{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(18px,2.4vw,40px);margin-top:clamp(34px,4vw,60px);padding-top:clamp(22px,2.6vw,34px);border-top:1px solid rgba(20,20,26,.16)}
.csmeta-item{display:flex;flex-direction:column;gap:7px}
.csmeta-l{font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:650;opacity:.55}
.csmeta-v{font-size:clamp(15px,1.2vw,19px);font-weight:500;letter-spacing:-.01em;line-height:1.2}
html body.case-study-page .cs-hero-summary .csmeta{border-top:1px solid rgba(255,255,255,.2)!important}
/* close sits under the bar, in flow */
html body.case-study-page .cs-sum-close{position:static!important;display:block!important;margin:clamp(30px,3.6vw,48px) auto 0!important;width:auto!important;min-width:132px;height:46px!important;padding:0 26px!important;border-radius:0!important;border:1px solid rgba(255,255,255,.38)!important;background:transparent!important;color:#fff!important;font-family:var(--font);font-size:12px!important;font-weight:650;letter-spacing:.18em;text-transform:uppercase;line-height:44px!important;cursor:pointer;transform:none!important;z-index:1!important;-webkit-backdrop-filter:none;backdrop-filter:none;transition:border-color .2s,background .2s;text-align:center;font-size:0!important}
html body.case-study-page .cs-sum-close::after{content:"CLOSE";font-size:12px;letter-spacing:.18em;font-weight:650}
html body.case-study-page .cs-sum-close:hover{background:rgba(255,255,255,.1)!important;border-color:rgba(255,255,255,.7)!important}
html body.case-study-page .cs-sum-close:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media(max-width:900px){html body.case-study-page .cs-hero-summary .cscards{grid-template-columns:1fr!important;gap:26px!important}.csmeta{grid-template-columns:repeat(2,1fr);gap:16px}}
/* ==== END SHORT VERSION OVERLAY ==== */



/* ==== HERO INTRO COPY — single authoritative rule (replaces DS v1.2/1.3/1.3b/1.3c stacking) ==== */
#page-main .ht-body{font-size:var(--t-lead)!important;line-height:var(--lh-lead)!important;max-width:var(--measure-hero)!important;margin-bottom:var(--s5)!important}
#page-main .hero-center .ht-body{margin-left:auto!important;margin-right:auto!important}
/* ==== END HERO INTRO COPY ==== */



/* ==== CASE STUDY IMAGE LAW — nothing inside a case study is ever cropped ==== */
html body.case-study-page .csstory :is(img,video){object-fit:contain!important;aspect-ratio:auto!important}
/* ==== END CASE STUDY IMAGE LAW ==== */



/* ==== VIDEO LAW 2026-09-19 — a video in a full-height section has ZERO padding and COVERS.
   Wrapper rules apply to div.pricevid,div.herovid,div.footvid,div.ctavid,div.secvid,div.secvideo,div.csvid-wrap,div.el-videoPER DIVS ONLY, never to a <section> that happens to share the class. ==== */
html body #page-main section:has(> .pricevid),html body #page-main section:has(> .herovid),html body #page-main section:has(> .footvid),html body #page-main section:has(> .ctavid),html body #page-main section:has(> .secvid),html body #page-main section:has(> .secvideo),html body #page-main section:has(> .el-video),html body #page-main section.hasvideo,html body #page-main section.hasvidbg,html body #page-main section.csvideo-full{padding-top:0!important;padding-bottom:0!important;min-height:100vh!important;position:relative;overflow:hidden}
div.pricevid,div.herovid,div.footvid,div.ctavid,div.secvid,div.secvideo,div.csvid-wrap,div.el-video{position:absolute!important;inset:0!important;container-type:size;overflow:hidden;z-index:0}
div.pricevid,div.herovid,div.footvid,div.ctavid,div.secvid,div.secvideo,div.csvid-wrap,div.el-video iframe{width:max(100cqw,177.78cqh)!important;height:max(100cqh,56.25cqw)!important;min-width:0!important;min-height:0!important;max-width:none!important;max-height:none!important;aspect-ratio:auto!important;position:absolute!important;top:50%!important;left:50%!important;transform:translate(-50%,-50%)!important;border:0!important}
div.pricevid,div.herovid,div.footvid,div.ctavid,div.secvid,div.secvideo,div.csvid-wrap,div.el-video video{position:absolute!important;top:50%!important;left:50%!important;transform:translate(-50%,-50%)!important;width:max(100cqw,177.78cqh)!important;height:max(100cqh,56.25cqw)!important;object-fit:cover!important}
.sitefoot{position:relative;overflow:hidden}
.sitefoot>video.footvid{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important}
/* a case-study video section is a normal section in the flow */
#page-main section.csb.csvideo{position:relative!important;top:auto!important;left:auto!important;inset:auto!important}
/* ==== END VIDEO LAW ==== */

/* ==== WORK PAGE — revisions 01-05 2026-09-19 ==== */
/* 01 hero is the looping video only, no padding (covered by the VIDEO LAW) */
/* 02 "The full collection." spans the full width, above the filter row */
html body #page-main section.pfolio.pfwide>.wrap{max-width:none!important;padding-left:clamp(24px,4vw,72px)!important;padding-right:clamp(24px,4vw,72px)!important}
html body #page-main section.pfolio.pfwide .pfmain{max-width:none!important;width:100%;font-size:clamp(40px,6.4vw,104px)!important;line-height:1.02;letter-spacing:-.03em;margin:0 0 clamp(20px,2.4vw,34px)!important;text-align:left}
/* 04 default 4-up grid, wider content */
html body #page-main section.pfolio.pfwide .pfgrid{grid-template-columns:repeat(var(--pfc,4),1fr)!important;gap:clamp(14px,1.4vw,20px)!important}
/* columns come from --pfc (2026-11-04: the 1 2 3 4 buttons set a class that the stronger rule above overrode, so they did nothing): default by width, a button sets its own */
.pfwide .pfgrid{--pfc:4}
.pfwide .pfgrid.g1{--pfc:1}
.pfwide .pfgrid.g2{--pfc:2}
.pfwide .pfgrid.g3{--pfc:3}
.pfwide .pfgrid.g4{--pfc:4}
@media(max-width:1280px){.pfwide .pfgrid{--pfc:3}.pfwide .pfgrid.g1{--pfc:1}.pfwide .pfgrid.g2{--pfc:2}.pfwide .pfgrid.g4{--pfc:4}.pfwide .pfgrid.gm{columns:3 220px}}
@media(max-width:900px){.pfwide .pfgrid{--pfc:2}.pfwide .pfgrid.g1{--pfc:1}.pfwide .pfgrid.g3{--pfc:3}.pfwide .pfgrid.g4{--pfc:4}.pfwide .pfgrid.gm{columns:2 200px}}
@media(max-width:600px){.pfwide .pfgrid{--pfc:1}}
/* the fixed arrow and light/dark circles sit 38 to 92 px from each edge at mid height; the search box and Filter button start inside that, so a click there went to a circle (Filter hit the light/dark switch) */
@media(min-width:769px){.pfwide .pftoolbar{padding-left:calc(104px - clamp(24px,4vw,72px));padding-right:calc(104px - clamp(24px,4vw,72px))}}
/* scroll cue on the /work/ hero (Bam 2026-11-04): a round arrow button under the wordmark that slides the page down to the work */
.herocue{position:absolute;z-index:2;left:50%;top:calc(50% + 76px);width:54px;height:54px;margin-left:-27px;border:1px solid var(--nav-on);border-radius:50%;color:var(--nav-on);display:flex;align-items:center;justify-content:center;text-decoration:none;background:color-mix(in srgb,var(--focus-band) 20%,transparent);transition:background .25s,color .25s,transform .25s}
.herocue svg{display:block;animation:herocue-nudge 2.2s ease-in-out infinite}
.herocue:hover,.herocue:focus-visible{background:var(--nav-on);color:var(--focus-band);transform:translateY(3px)}
.herocue:focus-visible{outline:2px solid var(--nav-on);outline-offset:4px}
@keyframes herocue-nudge{0%,100%{transform:translateY(-2px)}50%{transform:translateY(4px)}}
@media(prefers-reduced-motion:reduce){.herocue svg{animation:none}}
/* the wordmark film is 16:9: on a phone "cover" cut the T and the M off, so it is shown whole on the film's own black */
@media(max-width:820px){.workhero{background:black}html body .workhero .herovid>video{object-fit:contain!important}}
/* ==== END WORK PAGE ==== */

/* ==== ROW GALLERIES — source grids stay row-major with their own column count; nothing scattered, nothing cropped ==== */
html body #page-main .csgallery .csgrid.csrows{display:grid!important;column-count:auto!important;columns:auto!important;gap:clamp(10px,1.2vw,18px)!important;align-items:start}
html body #page-main .csgallery .csgrid.csrows-2{grid-template-columns:repeat(2,1fr)!important}
html body #page-main .csgallery .csgrid.csrows-3{grid-template-columns:repeat(3,1fr)!important}
html body #page-main .csgallery .csgrid.csrows-4{grid-template-columns:repeat(4,1fr)!important}
html body #page-main .csgallery .csgrid.csrows img,html body #page-main .csgallery .csgrid.csrows video{width:100%!important;height:auto!important;object-fit:contain!important;aspect-ratio:auto!important;display:block}
@media(max-width:760px){html body #page-main .csgallery .csgrid.csrows{grid-template-columns:1fr!important}}
/* ==== END ROW GALLERIES ==== */

/* ===== MOBILE CENTRE TEXT (case studies, ≤767px) — from addons/studio/templates/case-study/mobile-center-text.css ===== */
/* ── Mobile: centre case-study text (phones ≤767px) · 2026-09-19 rev2 ──
   Keyed on the ELEMENT, not a class list. The first version used an
   allow-list of classes and therefore missed 20 unclassed <p> and
   8 unclassed <li> in the story sections.
   Append to therum.css, then bump the ?ver= on the stylesheet. */
@media (max-width: 767px) {

  html body.case-study-page #page-main,
  html body.case-study-page #page-main :is(
    h1, h2, h3, h4, h5, h6,
    p, li, ul, ol, dl, dt, dd,
    blockquote, figcaption,
    div, span, a, strong, em, small, label
  ) {
    text-align: center !important;
  }

  /* a capped text block needs auto side margins to actually sit centred */
  html body.case-study-page #page-main :is(
    p, h1, h2, h3, h4, h5, h6, ul, ol, blockquote,
    .lead, .blurb, .csbody, .cscopy, .ht-body, .ht-base, .csout-intro
  ) {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* bullets sit with their text instead of hanging off to the left */
  html body.case-study-page #page-main :is(ul, ol) {
    list-style-position: inside !important;
    padding-left: 0 !important;
  }

  /* flex/grid rows holding text columns centre their items */
  html body.case-study-page #page-main :is(
    .csmeta, .csmeta-item, .csed-flow, .csbs-col,
    .cscard, .csout-card, .cssvc, .cardpages, .cpage
  ) {
    align-items: center !important;
    justify-items: center !important;
  }
}


/* ═══ 2026-09-20 — HERO MEDIA COVERS THE HERO ═══
   Two `div.herovid` rules applied the media cover recipe (top/left 50% + translate(-50%,-50%) + cq sizing) to the
   WRAPPER. A later rule reset the wrapper's top/left to 0 but not its transform, so the wrapper — and the video in it —
   sat in the top-left quadrant of every hero, both breakpoints. The wrapper fills the section; the media covers it. */
html body div.herovid,html body .herotype>.herovid,html body .hasvideo>.herovid{position:absolute!important;inset:0!important;top:0!important;left:0!important;right:0!important;bottom:0!important;width:100%!important;height:100%!important;min-width:0!important;min-height:0!important;max-width:none!important;max-height:none!important;transform:none!important;container-type:size;overflow:hidden!important}
html body .herovid>video{position:absolute!important;inset:0!important;top:0!important;left:0!important;width:100%!important;height:100%!important;min-width:0!important;min-height:0!important;max-width:none!important;max-height:none!important;transform:none!important;object-fit:cover!important}
html body .herovid>iframe,html body .herovid>img{position:absolute!important;top:50%!important;left:50%!important;width:max(100cqw,177.78cqh)!important;height:max(100cqh,56.25cqw)!important;min-width:0!important;min-height:0!important;max-width:none!important;max-height:none!important;transform:translate(-50%,-50%)!important;object-fit:cover!important;aspect-ratio:auto!important;border:0}

/* Same wrapper bug on the CTA video: the VIDEO LAW list `div.pricevid,div.herovid,…,div.ctavid,…,div.el-video iframe`
   only targets the media on its LAST item; every other item targets the wrapper. Same reset for .ctavid. */
html body div.ctavid,html body .cta>.ctavid{position:absolute!important;inset:0!important;top:0!important;left:0!important;right:0!important;bottom:0!important;width:100%!important;height:100%!important;min-width:0!important;min-height:0!important;max-width:none!important;max-height:none!important;transform:none!important;margin:0!important;container-type:size;overflow:hidden!important}
html body .ctavid>iframe,html body .ctavid>video{position:absolute!important;top:50%!important;left:50%!important;width:max(100cqw,177.78cqh)!important;height:max(100cqh,56.25cqw)!important;min-width:0!important;min-height:0!important;max-width:none!important;max-height:none!important;transform:translate(-50%,-50%)!important;object-fit:cover!important;aspect-ratio:auto!important;border:0}

/* ═══ 2026-09-20 — pillar hero reads like the home hero ═══ */
/* .pillarhero .ht-display was pinned to 80px by the "type scale → Ohio" rule; home gets --t-display (115px at 1440). */
.pillarhero .ht-display{font-size:var(--t-display)!important}
/* tagline = second stacked display line, same size and weight as home's .ht-l2/.ht-l3 */
.pillarhero .pillartag{font-size:var(--t-display);font-weight:600;line-height:1.02;letter-spacing:-.045em;margin-top:0;text-wrap:balance;color:#fff}
/* home hides its hero eyebrow (.hero-eyb-hide); pillars hide theirs the same way */
.pillarhero .ht-base>.eyebrow{position:absolute!important;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none;margin:0!important;padding:0!important}

/* ═══ 2026-09-20 — menu: Home · Craft · About · Contact; the five pillars in a sub line under the row, shown while Craft (or the sub line) is hovered ═══ */
.offnav .navwrap{position:relative}
.offnav .navrow-sub{position:absolute;left:0;right:0;top:100%;margin-top:clamp(10px,1.6vh,18px);padding-top:clamp(12px,2vh,20px);gap:clamp(12px,1.8vw,32px);opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .25s ease,transform .25s ease,visibility 0s linear .25s}
.offnav.sub-open .navrow-sub{opacity:1;visibility:visible;transform:none;transition:opacity .25s ease,transform .25s ease,visibility 0s}
.offnav .navrow-sub::before{content:"";position:absolute;top:0;left:50%;width:56px;height:1px;background:rgba(255,255,255,.22);transform:translateX(-50%)}
.offnav .navrow-sub a.nav-link{font-size:clamp(12.5px,1.1vw,16px);letter-spacing:.08em;color:#6d6d75}
.offnav .navrow-sub a.nav-link:hover,.offnav .navrow-sub a.nav-link.active{color:#fff}
/* no hover (touch): the sub line is simply part of the menu */
@media(hover:none){.offnav .navrow-sub{position:static;opacity:1;visibility:visible;transform:none;margin-top:clamp(14px,2.4vh,26px)}}

/* ═══ 2026-09-20 (2) — PHONES: text inset, buttons, case-study short version ═══ */
/* 1. Text sits 4px further from the edges on phones: mobile gutter 20 → 24 (phone token block at the top). Only the content wraps read the token, chrome does not. */
/* 2. Buttons span the full width on phones unless two share a line. A lone button on its line fills it; two that fit side by side share the line; a button that does not fit beside its sibling wraps and fills its own line. */
@media(max-width:767px){
  #page-main .btn{width:100%;justify-content:center;text-align:center}
  #page-main :is(.row,.svcbtns,.cs-viewbtns)>.btn{width:auto;flex:1 1 auto}
  html body.case-study-page .cs-sum-close{width:100%!important;min-width:0!important}
}
/* 3. Case-study short version. The panel centred its content with align-items:center, so on phones the top 228px of the summary (title + first heading) was unreachable; column flex + auto margins centre only when there is room. #page-main carries will-change:transform for the pjax transition, which made it the containing block of the "fixed" panel, so the panel scrolled away with the page; released while the panel is open. The page underneath is locked while it is open. On phones the summary clears the fixed nav row (0-44px) and the dock (776-830px) and takes the same side inset as the text. */
html body.case-study-page .page-hero .cs-hero-summary{flex-direction:column!important;align-items:center!important;justify-content:flex-start!important;overscroll-behavior:contain}
html body.case-study-page .page-hero .cs-sum-inner{margin:auto!important;flex:0 0 auto}
html:has(body.case-study-page .page-hero.show-summary),html body.case-study-page:has(.page-hero.show-summary){overflow:hidden!important}
html body.case-study-page:has(.page-hero.show-summary) #page-main{will-change:auto!important}
@media(max-width:767px){
  html body.case-study-page .page-hero .cs-sum-inner{width:calc(100vw - 2*var(--gutter))!important;padding-top:72px!important;padding-bottom:104px!important}
  /* Centred story copy in .cssx sections sat 12px left of centre: the 94vw wrap is pinned left by the full-width wrap rule. */
  html body.case-study-page .cssx>.wrap{max-width:var(--cs-col-max)!important}
}

/* ═══ 2026-09-20 (3) — AUDIT: desktop 1920/1440 · tablet 1024/834/768 · phone 430/390/360, both themes ═══ */
/* A. Sub-service portfolio rows: the row names were light-mode ink at 50% in BOTH themes — invisible on the dark default, on every sub-service page. The muted token flips with the theme. */
html body .subsvc .pxrow.sub5 .sub5name{color:var(--muted)}
/* B. Labels never below 12px; the two labels that failed contrast get the alpha they need (Key Outputs numbers 2.5:1 → 4.7:1). */
.footlbl,.footbase{font-size:12px}
.ws-idx,.ws-cell .ws-l{font-size:12px}
.encard .ennum,.showtab .stnum,.pfcard .pfcats{font-size:12px}
.encard .enbest span{font-size:12px;color:rgba(255,255,255,.55)}
#page-main .csoverflow .csout-n{color:rgba(20,20,26,.62)}
/* C. Phones: the 16px running-copy floor also flattened the lead, the hero body and the case-study statement title to body size. Tokens back; the statement title keeps its hierarchy. */
@media(max-width:640px){
  /* the floor reads max(16px,var(--t-body)) and its four :not() steps outrank any plain override, so the token it reads is set per element instead */
  #page-main .lead,#page-main .ht-body,#page-main .svcsub{--t-body:var(--t-lead)}
  html body.case-study-page #page-main p.csbody{--t-body:clamp(28px,7.7vw,36px);line-height:1.1!important}
}
/* D. Case-study story: full-bleed via 100vw sat 7px off centre and overflowed 7px whenever a scrollbar is visible (Windows, any Mac with scrollbars shown). The main column is already full width. */
html body.case-study-page .csstory{width:100%!important;left:auto!important;transform:none!important}
/* E. Phone galleries: three- and four-column galleries become two columns below 768px; the order does not change. 4-up gave 66–84px thumbnails. */
@media(max-width:767px){
  .csgallery .csgrid.csg3,.csgallery .csgrid.csg4{column-count:2!important}
  html body #page-main .csgallery .csgrid.csrows-3,html body #page-main .csgallery .csgrid.csrows-4{grid-template-columns:repeat(2,1fr)!important}
}
/* F. Every case-study image declares its ratio (style="--ar:W/H", set by the builders and the port scripts) so a lazy image reserves its box and nothing shifts when it loads. Images without --ar behave exactly as before. */
html body.case-study-page #page-main .csgallery .csgrid.csrows :is(img,video),html body.case-study-page .csstory :is(img,video){aspect-ratio:var(--ar,auto)!important}
/* G2. Portfolio toolbar: the search field shrank to 16px beside the switches on narrow phones; it takes its own row below 480px. */
@media(max-width:480px){.pftoolbar{flex-wrap:wrap}.pftoolbar .pfsearch{flex:1 1 100%;min-width:0}}
/* G. Pillar rows: a long name could not shrink its 1fr column, so the arrow overflowed the row on 360px phones. */
.pxrow>.pxname,.pxrow>.pxblurb{min-width:0;overflow-wrap:anywhere}
/* H. Touch devices: every control at least 44px tall, icon links at least 44px wide, the top-row brand and menu get a 44px hit area (padding in, margin out, no visual change), menu links 44px. */
@media(pointer:coarse){
  #page-main :is(a,button):not(p a):not(li a):not(.nf):not(.ws-arrow),.footcol a,.footsocial a,.footbase a,.nav-social a,.offnav a.nav-link{min-height:44px;display:inline-flex;align-items:center}
  #page-main a.pxarrow{min-width:44px;justify-content:flex-end}
  #page-main button.pfg,.footcol a,.footsocial a,.footbase a,.nav-social a,.svcitem a{min-width:44px}
  .nf-brand,.nf-menu{padding:7px!important;margin:-7px!important}
  /* the menu and search close buttons were 18×30 / 20×34; the box grows around the glyph, the glyph stays put */
  .offnav .close-x,.searchpanel .close-x{min-width:var(--tap);min-height:var(--tap);display:inline-flex;align-items:center;justify-content:center;top:19px;right:21px}
}
/* I. Tablets and small laptops, 641–1239px: the wrap has no side margins there, so the floating rail controls sat on the content column (measured at 768, 834 and 1024). The phone dock layout applies; the section label stays. */
@media(min-width:641px) and (max-width:1239px){
  .navframe{grid-template-columns:repeat(4,1fr)!important;grid-template-rows:auto 1fr auto!important;padding:14px 14px max(14px,env(safe-area-inset-bottom))!important;gap:0 6px!important}
  .nf-brand{grid-column:1!important;grid-row:1!important;justify-self:start!important;align-self:center!important}
  .nf-section{display:block!important;grid-column:2/4!important;grid-row:1!important;justify-self:center!important;align-self:center!important;max-width:46vw}
  .nf-menu{grid-column:4!important;grid-row:1!important;justify-self:end!important;align-self:center!important}
  .nf-copy{display:none!important}
  .nf-top,.nf-contact,.nf-mode,.nf-search{grid-row:3!important;align-self:end!important;justify-self:center!important;margin:0!important;display:flex!important;flex-direction:column!important;align-items:center!important;text-align:center!important;gap:0!important}
  .nf-top{grid-column:1!important}.nf-contact{grid-column:2!important}.nf-mode{grid-column:3!important}.nf-search{grid-column:4!important}
  .nf-contact .nf-ico,.nf-search .nf-ico{width:54px;height:54px;border:1px solid currentColor;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;opacity:1!important}
  .nf-contact .nf-ico svg,.nf-search .nf-ico svg{width:22px!important;height:22px!important}
  .nf-top .nflbl,.nf-mode .nflbl,.nf-contact .nf-lbl,.nf-search .nf-lbl,.nf-menu .nf-lbl,.nf-brand .nf-lbl{display:none!important}
  html body.case-study-page .page-hero .cs-sum-inner{padding-top:72px!important;padding-bottom:104px!important}
}

/* ═══ 2026-09-20 (4) — ENGAGEMENT MODEL AS TABS ═══
   Asked 2026-09-20: the four-column engagement grid on the pillar pages reads as one tab row; one model shows at a time,
   full width; 01 opens by default. therum.js builds the row from the cards (.ennum + .entitle) and marks the grid .entabs.
   Without JS the grid stays exactly as it was. Same markup, no content change. */
.entabrow{display:flex;flex-wrap:wrap;gap:0 clamp(18px,2.6vw,40px);margin:0 0 clamp(26px,3.4vw,44px);border-bottom:1px solid rgba(255,255,255,.16)}
.entab{display:inline-flex;align-items:baseline;gap:10px;min-height:44px;padding:8px 0 14px;margin-bottom:-1px;border:0;border-bottom:1px solid transparent;background:none;color:rgba(255,255,255,.55);cursor:pointer;font:inherit;text-align:left;transition:color .25s,border-color .25s}
.entab-n{font-size:12px;font-weight:650;letter-spacing:.16em;text-transform:uppercase}
.entab-t{font-size:clamp(15px,1.2vw,18px);font-weight:600;letter-spacing:-.01em}
.entab:hover{color:#fff}
.entab.active{color:#fff;border-bottom-color:#fff}
.entab:focus-visible{outline:2px solid currentColor;outline-offset:4px}
.engrid.entabs{display:block}
.engrid.entabs>.encard{border-top:0!important;padding-top:0!important;opacity:1!important;transform:none!important;visibility:visible!important}
.engrid.entabs>.encard:not(.active),.engrid.entabs>.encard[hidden]{display:none!important}
.engrid.entabs>.encard.active{display:grid!important;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);column-gap:clamp(32px,5vw,96px);row-gap:0;align-items:start}
.engrid.entabs>.encard .ennum{display:none}
.engrid.entabs>.encard .entitle{grid-column:1;font-size:var(--t-h2);letter-spacing:-.03em;line-height:1.05;margin:0 0 var(--s4)}
.engrid.entabs>.encard .enline{grid-column:1;font-size:var(--t-lead)!important;color:rgba(255,255,255,.86)!important;max-width:34ch}
.engrid.entabs>.encard .enbody{grid-column:1;max-width:58ch;font-size:var(--t-body)}
.engrid.entabs>.encard .enbest{grid-column:2;grid-row:1;margin-top:.6em}
.engrid.entabs>.encard .enlist{grid-column:2;grid-row:2/6}
@media(max-width:767px){
  .engrid.entabs>.encard.active{grid-template-columns:minmax(0,1fr)}
  .engrid.entabs>.encard .enbest,.engrid.entabs>.encard .enlist{grid-column:1;grid-row:auto}
  .engrid.entabs>.encard .enbest{margin-top:0}
}

/* ═══ 2026-09-20 (5) — SERVICES AS A TILE GRID ═══
   Asked 2026-09-20: the services header reads like the hero (centred, full width); the accordion becomes a grid of tiles; a
   tile opens into its full-width section; the header or × closes it; nothing is open on load. therum.js marks
   .svcrows.svctiles and toggles .svc-open. Without JS the accordion stays as it was. Same markup. */
.svcsplit{display:block!important}
.svcleft{position:static!important;text-align:center;max-width:min(1040px,100%);margin:0 auto clamp(40px,6vw,88px)}
.svcleft .svclabel{text-align:center!important;font-size:12.5px;text-transform:uppercase;letter-spacing:.16em;font-weight:650;color:var(--muted);margin-bottom:var(--s5)}
.svcleft .svctitle{text-align:center!important;font-size:var(--t-display);line-height:1;letter-spacing:-.04em}
/* inline-block so the centred parent centres it: the alignment rule forces margin-left/right:0 on every .svcsub */
.svcleft .svcsub{display:inline-block;text-align:center!important;margin-top:var(--s5);max-width:52ch!important}
.svcleft .svcghost{display:none!important}
.svcfull .svcrows.svctiles,.svcrows.svctiles{max-height:none!important;overflow:visible!important;-webkit-mask-image:none!important;mask-image:none!important;padding:0!important;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,22px)}
.svcrows.svctiles>.svcrow{display:flex;flex-direction:column;justify-content:space-between;gap:var(--s5);min-height:clamp(170px,17vw,240px);padding:clamp(20px,2.4vw,30px)!important;border:1px solid var(--hair);border-radius:14px;background:rgba(150,144,162,.06);cursor:pointer;transition:background .3s,border-color .3s;scroll-margin-top:84px;opacity:1!important;transform:none!important;visibility:visible!important}
.svcrows.svctiles>.svcrow:hover{background:rgba(150,144,162,.11);border-color:var(--muted)}
.svcrows.svctiles>.svcrow:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.svcrows.svctiles>.svcrow .svcname{font-size:var(--t-h3);color:var(--ink);font-weight:520;margin:0;max-width:16ch}
.svcrows.svctiles>.svcrow .svctgl{align-self:flex-end;width:var(--tap);height:var(--tap);display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--hair);border-radius:50%;opacity:.7;font-size:22px;line-height:1;margin:0;font-weight:300}
.svcrows.svctiles>.svcrow:hover .svctgl{opacity:1;border-color:var(--ink)}
.svcrows.svctiles>.svcrow .svcbody{display:none}
.svcrows.svctiles.svc-open>.svcrow:not(.open){display:none!important}
.svcrows.svctiles>.svcrow.open{grid-column:1/-1;display:grid!important;grid-template-columns:auto minmax(0,1fr) var(--tap);grid-template-rows:auto auto;column-gap:var(--s4);align-items:start;min-height:0;padding:clamp(24px,3vw,44px)!important;cursor:default}
.svcrows.svctiles>.svcrow.open .svcname{grid-column:2;grid-row:1;font-size:var(--t-h2);font-weight:600;max-width:none;cursor:pointer}
.svcrows.svctiles>.svcrow.open .svctgl{grid-column:3;grid-row:1;align-self:start;cursor:pointer;transform:rotate(45deg);opacity:1}
.svcrows.svctiles>.svcrow.open .svcbody{display:block;grid-column:1/-1;grid-row:2;max-height:none!important;opacity:1!important;overflow:visible!important;margin-top:var(--s5)!important;padding-right:0!important}
.svcrows.svctiles>.svcrow.open .svcdesc{font-size:var(--t-lead)!important;max-width:58ch!important}
.svcrows.svctiles>.svcrow.open .svccar{margin-top:var(--s6)}
.svcrows.svctiles>.svcrow.open .svcitem{flex-basis:clamp(220px,22vw,320px)}
@media(max-width:1023px){.svcfull .svcrows.svctiles,.svcrows.svctiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){
  .svcfull .svcrows.svctiles,.svcrows.svctiles{grid-template-columns:minmax(0,1fr)}
  .svcrows.svctiles>.svcrow{min-height:0;flex-direction:row;align-items:center;justify-content:space-between}
  .svcrows.svctiles>.svcrow.open{display:grid!important}
}

/* ═══ 2026-09-20 (6) — ONE ALIGNMENT RULE, ROWS INCLUDED; PRICING BAND CENTRED ═══
   "Design system should fix this": left sections are left, but their button rows were centred by the global .row default
   (the pricing band, the service buttons). Rows now follow their section; heroes and CTAs stay centred. The pricing band is
   a full-height section, so its content sits at the vertical centre like every other full-height section. */
#page-main>section:not(.herotype):not(.page-hero):not(.cta):not(.csb):not(.cscards-sec):not(.csgallery):not(.hero-center) .row{justify-content:flex-start}
#page-main>section.sec.pricingband{display:flex!important;flex-direction:column!important;justify-content:center!important;padding-top:0!important;padding-bottom:0!important}
#page-main>section.sec.pricingband>.wrap{margin-top:0!important;margin-bottom:0!important}

/* ═══ 2026-09-20 (7) — SLIDER SECTIONS: NO ARROW BUTTONS ═══
   Asked 2026-09-20. Signature Work keeps its dots, keyboard, swipe and autoplay; its prev/next circles are gone. The
   selected-work slider had only the two circles and the keyboard, so therum.js (__therumWsDots) gives it dots and swipe
   first; the circles hide once the dots exist, so a page without the script keeps them. Dots share one treatment: a 9px
   mark inside a 32×44 button, so every dot is a real tap target and none of them turns into a 9×44 pill under the touch rule. */
#workslider:has(.ws-dots) .ws-nav,#workslider:has(.ws-dots) .ws-arrow,.showcase .showarrow,.showcase .showprev,.showcase .shownext{display:none!important}
/* .ws-dots existed once (centred, then hidden with !important when the circles came in); it is re-used here and re-shown. */
#workslider .ws-dots{position:absolute;left:auto;right:clamp(78px,7vw,120px);bottom:clamp(128px,17vh,190px);transform:none;z-index:4;display:flex!important;align-items:center;gap:0}
@media(max-width:760px){#workslider .ws-dots{right:16px;bottom:88px}}
.showdots{gap:0}
.showdots button,.ws-dots button{width:32px;height:var(--tap);min-height:var(--tap);padding:0;border:0;border-radius:0;background:none!important;transform:none!important;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.showdots button::before,.ws-dots button::before{content:"";width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.34);transition:background .25s,transform .25s}
.showdots button.on::before,.ws-dots button.on::before{background:#fff;transform:scale(1.25)}
.showdots button:focus-visible,.ws-dots button:focus-visible{outline:2px solid #fff;outline-offset:-4px;border-radius:8px}
@media(pointer:coarse){.showdots button,.ws-dots button{width:var(--tap)}}

/* ═══ 2026-09-20 (8) — RAGS, WIDOWS, WIDTHS ═══
   The rule, site-wide: headings balance; running copy wraps pretty; no line ends on a single word (therum.js binds the last
   two words with a non-breaking space, everywhere since hunk 5, case studies only before); every line of copy lives inside
   its measure (tokens: 48ch body, 52ch hero body, 58ch statements and open tiles, 76ch editorial; 100% on phones); titles
   are capped in ch (14–20) so a headline breaks on meaning, not at the wrap edge. .csbody keeps its balance rule. */
#page-main :is(.ht-display,.pillartag,.h-xl,.h-lg,.sechead,.entitle,.svctitle,.svcname,.ws-title,.csh,.csed-title,h1,h2,h3){text-wrap:balance}
#page-main :is(.lead,.ht-body,.svcsub,.svcdesc,.enline,.enbody,.pxblurb,.blurb,.cscopy,.csout-intro,.pb-body,li,p):not(.csbody):not(.csh):not(.eyebrow):not(.metaline){text-wrap:pretty}
/* ==== CASE STUDY: versions + device switcher (2026-09-22) ==== */
.cs-viewbtns .cs-vb.-on{background:#fff;color:#111013;border-color:#fff}
.csdevices .cstab-panel{margin:0 auto}
.csdevices .cstab-panel[data-dev="t"]{max-width:768px}
.csdevices .cstab-panel[data-dev="m"]{max-width:390px}
.csdevices .cstab-panel.-tall img{width:100%;max-width:100%}
/* ==== CASE STUDY: split branches + browser frame (2026-09-22) ==== */
.csb.cssplit{background:#111013;color:#fff;padding:clamp(28px,4vw,56px) 0}
.cssplit .cstabs-nav{margin-bottom:0}
.cssplit .cstab{font-size:17px;padding:14px 32px}
.csbranch{display:none}
.csbranch.active{display:block}
.cssplit .eyebrow{text-align:center;margin-bottom:14px;color:rgba(255,255,255,.55)}
.cssplit .cssplit-lede{max-width:none;margin:0 auto 26px;text-align:center;color:rgba(255,255,255,.8);font-size:17px;line-height:1.5}
/* ==== CASE STUDY: responsive frame (2026-09-22) — the bamleon.me demo frame, light bar: url chip left, DESKTOP / TABLET / MOBILE
   centred with icons, the viewport morphs 100% / 768 / 390 over 450ms. Values from bamleon.me's therum-case-study.css (.bamleon-cs__demo-*, light). ==== */
.csb.csframe{background:var(--csframe-bg,#111013);padding:clamp(40px,5vw,72px) 0}
.csframe .wrap{max-width:var(--cs-col-max)}
.csframe-win{width:100%;margin:0 auto;background:#1a1a1a;border:1px solid rgba(0,0,0,.08);border-radius:16px;overflow:hidden;clip-path:inset(0 round 16px);isolation:isolate;display:flex;flex-direction:column;transition:max-width 450ms cubic-bezier(.4,0,.2,1),border-radius 450ms}
.csframe-bar{position:relative;height:48px;padding:0 16px;background:#f0f0f2;border-bottom:1px solid rgba(0,0,0,.06);display:flex;align-items:center;justify-content:center}
.csframe-url{position:absolute;left:16px;top:50%;transform:translateY(-50%);font-family:var(--therum-font-mono,'JetBrains Mono',ui-monospace,Menlo,monospace);font-size:11px;letter-spacing:.02em;padding:4px 12px;background:rgba(0,0,0,.04);border:1px solid rgba(0,0,0,.06);border-radius:8px;color:#6b6b6b;white-space:nowrap;max-width:38%;overflow:hidden;text-overflow:ellipsis}
.csframe-toggles{display:inline-flex;gap:2px;padding:3px;border-radius:10px;background:rgba(0,0,0,.04)}
.csframe-toggle{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border:0;background:transparent;font-family:var(--therum-font-mono,'JetBrains Mono',ui-monospace,Menlo,monospace);font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:rgba(0,0,0,.3);border-radius:8px;cursor:pointer;transition:color 150ms ease,background 150ms ease;line-height:1;white-space:nowrap;user-select:none}
.csframe-toggle::before{content:'';display:block;width:16px;height:16px;flex-shrink:0;background:currentColor;-webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat}
.csframe-toggle[data-vp="desktop"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='3' width='20' height='14' rx='2'/%3E%3Cpath d='M8 21h8M12 17v4'/%3E%3C/svg%3E")}
.csframe-toggle[data-vp="tablet"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='2' width='16' height='20' rx='2'/%3E%3Cpath d='M12 18h.01'/%3E%3C/svg%3E")}
.csframe-toggle[data-vp="mobile"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='2' width='14' height='20' rx='2'/%3E%3Cpath d='M12 18h.01'/%3E%3C/svg%3E")}
.csframe-toggle[data-vp="mobile"]::before{width:14px}
.csframe-toggle:hover{color:rgba(0,0,0,.55)}
.csframe-toggle.is-active{color:#0a0a0a;background:rgba(0,0,0,.08)}
.csframe-stage{background:#e8e8ec;display:flex;justify-content:center}
.csframe-viewport{width:100%;max-width:100%;margin:0 auto;height:min(80vh,820px);position:relative;background:#fff;transition:width 450ms cubic-bezier(.4,0,.2,1),max-width 450ms cubic-bezier(.4,0,.2,1)}
/* the whole window takes the device width, not just the page inside it (Bam 2026-10-14) */
.csframe[data-vp="tablet"] .csframe-win{max-width:768px}
.csframe[data-vp="mobile"] .csframe-win{max-width:390px;border-radius:28px;clip-path:inset(0 round 28px)}
.csframe[data-vp="tablet"] .csframe-url,.csframe[data-vp="mobile"] .csframe-url{display:none}
.csframe[data-vp="mobile"] .csframe-toggle{padding:5px 10px;font-size:var(--t-label);gap:5px}
.csframe[data-vp="mobile"] .csframe-toggle::before{width:14px;height:14px}
.csframe-viewport[data-vp="tablet"],.csframe-viewport[data-vp="mobile"]{box-shadow:0 0 0 1px rgba(0,0,0,.04)}
.csframe-pane{display:none;position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;background:#fff}
.csframe-pane.active{display:block}
/* a frame that holds pictures only is as tall as the shorter of its picture and the window: no blank band under a short page (Bam 2026-10-29, the Jaywalk wires at 390) */
.csframe-viewport:not(:has(iframe)){height:auto;max-height:min(80vh,820px);display:flex;flex-direction:column}
.csframe-viewport:not(:has(iframe))>.csframe-pane.active{position:relative;inset:auto;min-height:0;flex:0 1 auto}
.csframe-pane img{display:block;width:100%;height:auto}
.csframe-pane iframe{display:block;width:100%;height:100%;border:0;background:#fafafa}
.csframe-pages{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:14px}
.csframe-page{font-family:var(--therum-font-mono,'JetBrains Mono',ui-monospace,Menlo,monospace);font-size:11px;letter-spacing:.05em;text-transform:uppercase;padding:6px 12px;border-radius:8px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:rgba(255,255,255,.62);cursor:pointer;line-height:1;transition:color 150ms ease,background 150ms ease}
.csframe-page:hover{color:#fff}
.csframe-page.is-active{color:#0a0a0a;background:#f0f0f2;border-color:#f0f0f2}
.csframe-note{max-width:none;margin:14px 0 0;font-size:13px;color:rgba(255,255,255,.55)}
@media(max-width:820px){.csframe-bar:has(>.csframe-toggles[style*="none"]){display:none}.csframe-url{display:none}.csframe-toggle{padding:5px 10px;font-size:10px;gap:5px}.csframe-toggle::before{width:14px;height:14px}}
@media(pointer:coarse){.csframe-toggle,.csframe-page{min-height:44px}}
/* ==== KEY OUTPUTS after a flow (2026-09-22): the measure cap does not apply to the card line (it spans the wrap), and the list
   keeps the intro's distance from the paragraphs above it ==== */
.csout-sec .csed-flow+.csout-list{margin-top:clamp(34px,3.6vw,56px)}
/* ==== IMAGE DECK captions (2026-09-22): a numbered slide sequence is a deck, not a tab row; the active slide's label sits under it ==== */
.csdeck .deck-cap{margin-top:14px;text-align:center;font-size:14px;color:var(--ink,#111)}
.csdeck .deck-slide{width:100%;height:auto}
/* deck nav sits in a bottom cluster with the count (2026-09-22): at the side edges it landed under the fixed nav-frame circles and could not be clicked */
.deck-nav{top:auto;bottom:10px;transform:none;width:40px;height:40px;font-size:22px;z-index:3}
.deck-prev{left:calc(50% - 96px)}
.deck-next{right:calc(50% - 96px)}
.deck-count{bottom:18px;min-width:64px;text-align:center}
@media(max-width:600px){.deck-nav{width:38px;height:38px}.deck-prev{left:calc(50% - 92px)}.deck-next{right:calc(50% - 92px)}}
/* deck slides keep their whole picture and never run past the viewport: a portrait slide sits centred at viewport height (2026-09-22) */
.deck-stage{text-align:center}
.deck-slide{width:100%;max-width:100%;max-height:min(85vh,900px);margin:0 auto;object-fit:contain}
.deck-slide.is-active{display:block}


html body #page-main .csgallery .csgrid.csrows-2>:last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:calc(50% - clamp(5px,.6vw,9px))!important}
@media(max-width:760px){html body #page-main .csgallery .csgrid.csrows-2>:last-child:nth-child(odd){width:100%!important}}
/* image deck: a slide fills the column (Bam 2026-10-12: one image per row is 100% wide); a portrait slide is still capped at viewport height */
html body .csdeck .deck-slide{width:100%!important;max-width:100%!important}
/* showcase slider: no dots (the numbered strip is the nav); the stage fills the section, no band above or below */
html body #page-main section.showcase .showdots{display:none!important}
html body #page-main section.showcase{display:flex!important;flex-direction:column!important;justify-content:flex-start!important;padding:0!important}
html body #page-main section.showcase .showstage{flex:1 1 auto}
/* the collection call (The Archive): the dark mirror of the paper gradient, lifting toward the tiles */
html body #page-main section.collcall{background:linear-gradient(rgba(17,16,19,.18),rgba(17,16,19,.18)),linear-gradient(120deg,#0e1a2b 0%,#123049 18%,#2a1b4a 38%,#6138f5 55%,#123049 74%,#0e1a2b 100%),var(--dark)!important;background-size:100% 100%,300% 300%,auto!important;animation:thgradcc 26s ease-in-out infinite}
@keyframes thgradcc{0%{background-position:0 0,0% 50%,0 0}50%{background-position:0 0,100% 50%,0 0}100%{background-position:0 0,0% 50%,0 0}}
@media(prefers-reduced-motion:reduce){html body #page-main section.collcall{animation:none}}
/* Craft: the pillars section inverted, white ground and ink type (light tokens scoped to the section) */
html body.page-5 #page-main section.pillarsec:not(.svhost){--paper:#ffffff;--ink:#111013;--hair:rgba(22,21,25,.12);--muted:rgba(22,21,25,.62);background:#ffffff!important;color:#111013!important}
html body.page-5 #page-main section.pillarsec:not(.svhost) :is(.eyebrow,.pxname,.pxarrow,h2,h3){color:#111013!important}
html body.page-5 #page-main section.pillarsec:not(.svhost) .pxblurb{color:rgba(22,21,25,.62)!important}

/* Craft pillars: the label and the rows share one left edge (the index sits in the same measure as the label) */
html body #page-main section.pillarsec:not(.svhost)>.wrap-wide{max-width:1180px!important;width:100%!important;margin-left:auto!important;margin-right:auto!important}
html body #page-main section.pillarsec:not(.svhost) .pillarindex{width:100%;max-width:none;margin-left:0;margin-right:0}
html body #page-main section.pillarsec:not(.svhost) .pxrow{padding-left:0;padding-right:0}
html body #page-main section.pillarsec:not(.svhost) .pxrow:hover{padding-left:16px}
/* services grid: Signature Work spans the full row, the disciplines follow in rows of three */
html body #page-main .svcrows.svctiles>.svcrow.svcsig{grid-column:1/-1}

/* menu overlay: "Where to?" centred above the big word */
.offnav .inner>.eyebrow{display:block;width:max-content;max-width:100%;margin-left:auto!important;margin-right:auto!important;text-align:center}
/* star-video headers: the night sky is already dark, so the readability veil is lighter there */
html body #page-main section.pillarhero:has(.herovid.v-1022143129)::after{opacity:.35!important}

/* About: the studio mark reads on the dark ground and fits one viewport, uncropped */
html body.page-7 #page-main section.secimg{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:var(--sec-y) 0!important}
html body.page-7 #page-main section.secimg img{display:block;width:auto;max-width:100%;max-height:calc(100vh - 2*var(--sec-y));height:auto;margin:0 auto;object-fit:contain;filter:invert(1)}
/* About: paragraphs in a split column are separated, never run together */
html body.page-7 #page-main .split .lead+.lead{margin-top:1.1em}
/* About: the partner rows put their copy on the same right column as every split (745 at 1440) */
html body.page-7 #page-main section.pillarsec .pxrow{grid-template-columns:calc(50% - 25px) 1fr 60px;column-gap:50px}
@media(max-width:1023px){html body.page-7 #page-main section.pillarsec .pxrow{grid-template-columns:1fr 40px;column-gap:16px}}
/* pricing band: a centred statement like every full-height band (label, title, lead, action on one axis) */
html body #page-main section.pricingband>.wrap{text-align:center}
html body #page-main>section.pricingband:not(.herotype):not(.page-hero):not(.cta):not(.csb):not(.cscards-sec):not(.csgallery):not(.hasmerged)>.wrap .lead{max-width:46ch;margin-left:auto!important;margin-right:auto!important;text-align:center!important}
html body #page-main>section.pricingband:not(.herotype):not(.page-hero):not(.cta):not(.csb):not(.cscards-sec):not(.csgallery):not(.hasmerged)>.wrap .row{justify-content:center!important}

/* dark mode keeps each case study's own brand accent (it lives on :root per page); the Therum red accent applies everywhere else */
html.dark-mode body:not(.case-study-page){--accent:#ff4f66}
/* statement sub-paragraph: the design-system spec wins over the site measure cap: same measure as the title, exactly half its size */
html body #page-main section.csb.cssx>div.wrap>p.csbody,html body #page-main section.csb.cssx>div.wrap>p:not(.csbody){max-width:min(1300px,92vw)!important;margin-left:auto!important;margin-right:auto!important}
html body #page-main section.csb.cssx>div.wrap>p:not(.csbody){font-size:clamp(16px,1.95vw,28px)!important;line-height:1.5!important;text-wrap:pretty}
/* tab blocks: fixed dark ground in both themes (was var(--ink), a text token that flips light and hid the white tabs) */
html body #page-main section.csfigmatabs{background:#111013!important}
html body #page-main section.csfigmatabs .cstab:not(.active){color:rgba(255,255,255,.72)!important;border-color:rgba(255,255,255,.28)!important;background:transparent!important}
html body #page-main section.csfigmatabs .cstab.active{background:#fff!important;color:#111013!important;border-color:#fff!important}
/* white deck plate (Conyers Branding, 2026-09-22): the palette reads on white */
html body #page-main section.csb.csdeck.cswhite{background:#fff!important;color:#111013!important}
html body #page-main section.csb.csdeck.cswhite .deck-cap{color:#111013!important}
html body #page-main section.csb.csdeck.cswhite :is(.deck,.deck-stage){background:#fff!important;box-shadow:none!important}
/* a deck inside a tab panel keeps the deck rules (a panel img rule out-ranked .deck-slide, so every slide showed) */
html body .cstab-panel .deck-slide{display:none;width:100%;max-width:100%;max-height:min(85vh,900px);margin:0 auto}
html body .cstab-panel .deck-slide.is-active{display:block}
html body .cstab-panel .csdeck .wrap{max-width:100%;padding:0}
/* a tab panel that holds a deck takes the deck's height, not the fixed 80vh of a frame (Grey Goose, 2026-10-30: 400px of dead black under three concept decks on a phone) */
html body .cstab-panel:has(>.csdeck){height:auto}

/* ── MOBILE (2026-09-22) ─────────────────────────────────────────────
   hero: the veil is a left to right gradient built for desktop, so on a phone its dark end covers the whole
   width and the cover image never reads. On phones it runs top to bottom and lighter, image visible. */
@media(max-width:768px){
  html body #page-main section.page-hero::before{
    background:linear-gradient(180deg,rgba(9,11,18,.62) 0%,rgba(9,11,18,.70) 38%,rgba(9,11,18,.85) 100%)!important;/* 2026-10-28: was .42/.30/.78, white text over a bright cover read 1.7:1 (design critique item 4) */
  }
  html body #page-main section.page-hero::after{background-position:50% 30%!important}
}
/* work toolbar: the 1 2 3 4 grid switcher sets desktop columns, so it is off on phones (it read as broken page numbers);
   search takes the row, Filter sits at its end */
@media(max-width:768px){
  .pfgridsw{display:none!important}
  .pftoolbar{flex-wrap:wrap;gap:12px;align-items:center}
  .pftoolbar .pfsearch{flex:1 1 100%;min-width:0}
  .pffbtn{margin-left:auto}
  .pfpanel.show{gap:8px}
  .pfpanel .pfditem{padding:9px 14px;font-size:12px}
}
/* the four corner buttons get out of the way going down the page and come back on the way up (phones only) */
@media(max-width:768px){
  .navframe .nf-top,.navframe .nf-mode,.navframe .nf-contact,.navframe .nf-search{
    transition:opacity .28s ease,transform .28s ease;
  }
  .navframe.nf-tuck .nf-top,.navframe.nf-tuck .nf-contact{opacity:0;transform:translateX(-14px);pointer-events:none}
  .navframe.nf-tuck .nf-mode,.navframe.nf-tuck .nf-search{opacity:0;transform:translateX(14px);pointer-events:none}
}

/* ── before and after with a live surface (Therum OS): wireframe under, the shipped surface over, handle drags ── */
html body .csframe-ba .csframe-pane{padding:0}
html body .ba.ba-live{position:relative;width:100%;height:100%;aspect-ratio:auto;border-radius:0;cursor:default;overflow:hidden}
html body .ba.ba-live .ba-live-after,html body .ba.ba-live .ba-before{position:absolute;inset:0}
html body .ba.ba-live .ba-live-after iframe,html body .ba.ba-live .ba-before iframe{width:100%;height:100%;border:0;display:block}
html body .ba.ba-live .ba-before{z-index:2;background:#fff}
html body .ba.ba-live .ba-before img{width:100%;height:100%;object-fit:contain;object-position:left top;background:#fff}
html body .ba.ba-live .ba-handle{z-index:5;pointer-events:auto;cursor:ew-resize;width:2px}
html body .ba.ba-live .ba-handle::after{width:46px;height:46px;pointer-events:auto}
html body .ba.ba-live.is-dragging iframe{pointer-events:none}
html body .csframe-ba .csframe-note{text-align:center}

/* deck arrows stay a proper tap target on a phone */
@media(max-width:768px){
  html body .deck-nav{width:44px!important;height:44px!important;font-size:20px!important}
  html body .deck-prev{left:calc(50% - 98px)!important}
  html body .deck-next{right:calc(50% - 98px)!important}
}

/* the TH mark in the nav frame corner */
html body .navframe a.nf-brand.has-thmark{display:inline-flex;align-items:center;line-height:0;font-size:0}
html body .navframe a.nf-brand svg.thmark{height:19px;width:auto;display:block;color:inherit}
@media(max-width:768px){html body .navframe a.nf-brand svg.thmark{height:17px}}
html body .navframe a.nf-brand svg.thmark,html body .navframe a.nf-brand svg.thmark rect{fill:currentColor!important;stroke:none!important}
html body .navframe a.nf-brand{color:inherit}
html body .navframe.on-dark a.nf-brand{color:#fff}

/* ── READABILITY (2026-09-22) ─────────────────────────────────────────────────
   The nav frame labels were painted with --nav-color on dark pages, which put near black
   text on a near black screen (1.03 to 1). On a dark page they are white, on a light page ink. */
html body .navframe.on-dark .nf-section,html body .navframe.on-dark .nf-copy,html body .navframe.on-dark .nf-copy *{color:rgba(255,255,255,.82)!important}

html body .navframe .nf-section{opacity:1}
html body .navframe .nf-copy{opacity:1}

/* the tinted plate on About ran light type on lavender (2.74 to 1): the type goes ink in light mode; in dark mode it follows the theme */
html:not(.dark-mode) #page-main section.sec.-tint :is(.eyebrow,.h-lg,.h-md,.lead,p,li){color:#141318!important}
html:not(.dark-mode) #page-main section.sec.-tint .lead{color:rgba(20,19,24,.86)!important}

/* long file paths and urls in story copy wrap instead of running off a phone screen */
html body #page-main .csstory :is(p,li,em,code,.csbody,.blurb){overflow-wrap:anywhere;word-break:normal}

/* the decorative letter plates behind an outcome section stay inside the section */
html body #page-main .csout-sec{overflow:hidden}
html body #navframe.on-dark .nf-section,html body #navframe.on-dark .nf-copy,html body #navframe.on-dark .nf-copy *,html body .navframe.on-dark #yr{color:rgba(255,255,255,.82)!important}


/* the corner labels follow the theme, not the scroll state: dark theme = white, light theme = ink */
html.dark-mode body #navframe .nf-section,html.dark-mode body #navframe .nf-copy,html.dark-mode body #navframe .nf-copy *{color:rgba(255,255,255,.82)!important}
html:not(.dark-mode) body #navframe .nf-section,html:not(.dark-mode) body #navframe .nf-copy,html:not(.dark-mode) body #navframe .nf-copy *{color:rgba(22,21,25,.8)!important}

/* ═══ 2026-09-22 — PHONES: case-study blocks hug their content (design system: phones hug, hero/video keep height) ═══ */
@media(max-width:767px){
html body #page-main section.csb{min-height:0}
}
/* ═══ 2026-09-22 — PTA SECTION: a reading room for the Bibles, line colour the only variable ═══ */
html body .ptapage{--pta-rail:290px;--pta-gap:clamp(24px,3vw,56px)}
html body .ptapage .pta-room{display:grid;grid-template-columns:var(--pta-rail) minmax(0,1fr);
  gap:var(--pta-gap);max-width:var(--wrap-wide);margin:0 auto;padding:0 var(--gutter) clamp(80px,9vw,140px)}

/* the rail */
html body .ptapage .pta-side{position:sticky;top:76px;align-self:start;max-height:calc(100vh - 96px);
  overflow:auto;overscroll-behavior:contain;padding:var(--s5) 0 var(--s6)}
html body .ptapage .pta-brand{font-size:var(--t-label);text-transform:uppercase;letter-spacing:.18em;
  color:var(--muted);margin:0 0 var(--s4);font-weight:640}
html body .ptapage .pta-tabs{display:grid;gap:8px;margin-bottom:var(--s6)}
html body .ptapage a.pta-tab{display:grid;grid-template-columns:12px 1fr;gap:10px;align-items:center;
  min-height:var(--tap);padding:11px 14px;border:1px solid var(--hair);border-radius:10px;
  text-decoration:none;color:inherit;font-size:var(--t-small);font-weight:640}
html body .ptapage a.pta-tab small{display:block;font-weight:460;color:var(--muted);font-size:var(--t-label);margin-top:2px}
html body .ptapage a.pta-tab.active{border-color:var(--lc);box-shadow:inset 3px 0 0 var(--lc)}
html body .ptapage .pta-swatch{width:12px;height:12px;border-radius:3px;background:var(--lc);flex:0 0 auto}
html body .ptapage .pta-toclbl{font-size:var(--t-label);text-transform:uppercase;letter-spacing:.14em;
  color:var(--muted);margin:0 0 var(--s3);font-weight:640}
html body .ptapage .pta-toc a{display:block;padding:7px 10px;border-radius:7px;text-decoration:none;color:inherit;
  font-size:var(--t-small);line-height:1.35;font-weight:620}
html body .ptapage .pta-toc a.sub{padding-left:22px;font-weight:460;color:var(--muted);font-size:var(--t-label)}
html body .ptapage .pta-toc a:hover{background:rgba(128,128,140,.12)}
@media(pointer:coarse){html body .ptapage .pta-toc a{min-height:var(--tap);display:flex;align-items:center}}
html body .ptapage .pta-toc a.here{color:var(--lc)}

/* the reading pane */
html body .ptapage .pta-doc{display:none;padding:var(--s5) 0 0;max-width:none;min-width:0}
html body .ptapage .pta-reading{min-width:0}
html body .ptapage .pta-side{min-width:0}
html body .ptapage .pta-doc.on{display:block}
html body .ptapage .pta-doctitle{font-size:var(--t-h2);margin:0 0 4px;letter-spacing:-.02em}
html body .ptapage .pta-docsub{font-size:var(--t-small);color:var(--muted);margin:0 0 var(--s6)}
html body .ptapage .pta-h2{font-size:var(--t-h3);margin:var(--s7) 0 var(--s4);padding-bottom:8px;
  border-bottom:1px solid var(--hair);letter-spacing:-.01em}
html body .ptapage .pta-h3{font-size:var(--t-body);font-weight:700;margin:var(--s6) 0 var(--s3)}
html body .ptapage .pta-copy{max-width:none}
html body .ptapage .pta-copy p,html body .ptapage .pta-copy li{line-height:1.64;text-wrap:pretty;max-width:none}
html body .ptapage .pta-copy p+p{margin-top:var(--s4)}
html body .ptapage .pta-copy ul{list-style:disc;padding-left:1.25em;margin:0 0 var(--s5)}
html body .ptapage .pta-copy ol{list-style:decimal;padding-left:1.35em;margin:0 0 var(--s5)}
html body .ptapage .pta-copy li{margin:0 0 .45em}
html body .ptapage .pta-copy li::marker{color:var(--muted)}
html body .ptapage .pta-copy hr{border:0;border-top:1px solid var(--hair);margin:var(--s6) 0}
html body .ptapage .pta-copy code{font-size:.92em;padding:1px 5px;border-radius:4px;background:rgba(128,128,140,.16)}
html body .ptapage .pta-lede{font-size:var(--t-lead);line-height:1.5;margin:0 0 var(--s5)}

/* the map, and the legend that drives it. The map is the centre of the project, so it breaks out of the reading
   column and takes the room's full width, back past the contents rail to the page gutter. */
html body .ptapage .pta-mapsec{margin:0 0 var(--s7);
  margin-left:calc(-1 * (var(--pta-rail) + var(--pta-gap)));
  width:calc(100% + var(--pta-rail) + var(--pta-gap))}
html body .ptapage .pta-mapstats{display:flex;flex-wrap:wrap;gap:8px;margin:var(--s5) 0 var(--s4)}
html body .ptapage .pta-stat{border:1px solid var(--hair);border-radius:10px;padding:9px 14px;min-width:120px}
html body .ptapage .pta-stat b{display:block;font-size:var(--t-h3);font-weight:660;line-height:1.1;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
html body .ptapage .pta-stat span{font-size:var(--t-label);text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
html body .ptapage .pta-maplayout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:var(--s5);align-items:stretch}
html body .ptapage .pta-mapcanvas{height:clamp(440px,68vh,760px);border:1px solid var(--hair);border-radius:14px;
  background:#eceef1;overflow:hidden;z-index:0}
html body .ptapage .pta-mapside{display:flex;flex-direction:column;gap:10px;min-width:0}
html body .ptapage .pta-mapfind input{width:100%;min-height:var(--tap);padding:10px 13px;border:1px solid var(--hair);
  border-radius:9px;background:transparent;color:inherit;font:inherit;font-size:var(--t-small)}
html body .ptapage .pta-mapres{max-height:168px;overflow:auto;overscroll-behavior:contain}
html body .ptapage .pta-mapres button{display:block;width:100%;text-align:left;padding:8px 11px;border:0;
  background:transparent;color:inherit;font:inherit;font-size:var(--t-small);border-radius:7px;cursor:pointer}
html body .ptapage .pta-mapres button:hover{background:rgba(128,128,140,.12)}
html body .ptapage .pta-mapall{min-height:var(--tap);border:1px solid var(--hair);border-radius:9px;
  background:transparent;color:inherit;font:inherit;font-size:var(--t-small);font-weight:620;cursor:pointer}
html body .ptapage .pta-mapall:hover{border-color:var(--ink)}
html body .ptapage .pta-mapnote{font-size:var(--t-small);color:var(--muted);margin-top:var(--s4);max-width:62ch}
html body .ptapage .pta-mappanel{margin-top:var(--s5);border:1px solid var(--hair);border-left:4px solid var(--lc,var(--hair));
  border-radius:12px;padding:var(--s5)}
html body .ptapage .pta-mappanel[hidden]{display:none}
html body .ptapage .pta-mappanel h3{margin:0 0 var(--s3);font-size:var(--t-h3);font-weight:660;letter-spacing:-.02em}
html body .ptapage .pta-mappanel .pta-panelrts{font-size:var(--t-label);text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
html body .ptapage .pta-mappanel p{font-size:var(--t-small);max-width:66ch}
html body .ptapage .pta-panelroutes{display:flex;flex-wrap:wrap;gap:7px;margin:var(--s4) 0 0;padding:0;list-style:none}
html body .ptapage .pta-panelroutes li{font-size:var(--t-label);border:1px solid var(--hair);border-radius:99px;padding:5px 11px}
html body .ptapage .pta-panelgo{display:inline-flex;align-items:center;min-height:var(--tap);font-weight:640;
  font-size:var(--t-small);margin-top:var(--s3)}
html body .ptapage .pta-legend{display:grid;grid-template-columns:1fr;gap:6px;overflow:auto;overscroll-behavior:contain;
  flex:1 1 auto;min-height:0;border:1px solid var(--hair);border-radius:11px;padding:6px}
html body .ptapage a.pta-leg.off{opacity:.38}
html body .ptapage a.pta-leg.sel{border-color:var(--lc);background:color-mix(in srgb,var(--lc) 9%,transparent)}
html body .ptapage .pta-leg-ct{font-size:var(--t-label);color:var(--muted);font-variant-numeric:tabular-nums;
  grid-column:2;justify-self:end;grid-row:1}
/* Leaflet paints inside the frame and nothing of its chrome outranks the site's */
html body .ptapage .pta-mapcanvas .leaflet-container{width:100%;height:100%;background:#eceef1;font:inherit}
html body .ptapage .pta-mapcanvas .leaflet-popup-content{font:inherit;font-size:var(--t-small);margin:12px 16px}
html body .ptapage .pta-mapcanvas .pta-pop-n{font-weight:660;display:block}
html body .ptapage .pta-mapcanvas .pta-pop-l{color:#555;font-size:var(--t-label)}
html body .ptapage .pta-mapcanvas .leaflet-control-attribution{font-size:10px}
/* Leaflet's zoom buttons ship at 26/30px; the site's tap minimum applies to them like anything else */
html body .ptapage .pta-mapcanvas .leaflet-bar a{width:var(--tap);height:var(--tap);line-height:var(--tap)}
html body .ptapage a.pta-leg{display:grid;grid-template-columns:12px 1fr;gap:3px 10px;align-items:center;
  min-height:var(--tap);padding:9px 12px;border:1px solid var(--hair);border-radius:9px;text-decoration:none;color:inherit}
html body .ptapage a.pta-leg:hover{border-color:var(--lc)}
html body .ptapage .pta-leg .pta-swatch{grid-row:1/3}
html body .ptapage .pta-leg-n{font-weight:640;font-size:var(--t-small)}
html body .ptapage .pta-leg-r{font-size:var(--t-label);color:var(--muted)}

/* a line and its routes */
html body .ptapage .pta-line{border-left:4px solid var(--lc);padding-left:var(--s5);margin:var(--s7) 0}
html body .ptapage .pta-linehead{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
html body .ptapage .pta-linename{border-bottom:0;margin:0 0 var(--s3);padding:0}
html body .ptapage .pta-linerts{font-size:var(--t-label);color:var(--muted);text-transform:uppercase;letter-spacing:.1em}
html body .ptapage .pta-line.pta-flash{animation:ptaflash 1.2s ease}
@keyframes ptaflash{0%,40%{background:color-mix(in srgb,var(--lc) 14%,transparent)}100%{background:transparent}}
html body .ptapage details.pta-route{border-top:1px solid var(--hair)}
html body .ptapage details.pta-route>summary{display:flex;align-items:center;min-height:var(--tap);cursor:pointer;
  font-weight:620;font-size:var(--t-small);padding:10px 34px 10px 0;position:relative;list-style:none}
html body .ptapage details.pta-route>summary::-webkit-details-marker{display:none}
html body .ptapage details.pta-route>summary::after{content:"";position:absolute;right:8px;top:50%;width:9px;height:9px;
  border-right:2px solid var(--lc);border-bottom:2px solid var(--lc);transform:translateY(-70%) rotate(45deg);transition:transform .2s ease}
html body .ptapage details.pta-route[open]>summary::after{transform:translateY(-30%) rotate(225deg)}
html body .ptapage details.pta-route>.pta-copy{padding:0 0 var(--s6)}

/* tables stay inside the column */
html body .ptapage .pta-table{overflow-x:auto;border:1px solid var(--hair);border-radius:10px;margin:var(--s5) 0}
html body .ptapage .pta-table table{border-collapse:collapse;width:100%;font-size:var(--t-small)}
html body .ptapage .pta-table th,html body .ptapage .pta-table td{padding:9px 13px;border-bottom:1px solid var(--hair);text-align:left;white-space:nowrap}
html body .ptapage .pta-table th{font-size:var(--t-label);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
html body .ptapage .pta-table tr:last-child td{border-bottom:0}

@media(max-width:1023px){
  html body .ptapage .pta-room{grid-template-columns:minmax(0,1fr);gap:var(--s5)}
  html body .ptapage .pta-side{position:static;max-height:none;overflow:visible;border-bottom:1px solid var(--hair);padding-bottom:var(--s5)}
  html body .ptapage .pta-tabs{grid-auto-flow:column;grid-auto-columns:minmax(190px,1fr);overflow-x:auto;gap:8px;padding-bottom:4px}
  html body .ptapage .pta-toc{max-height:210px;overflow:auto;overscroll-behavior:contain}
}
@media(max-width:1023px){
  html body .ptapage .pta-mapsec{margin-left:0;width:auto}
  html body .ptapage .pta-maplayout{grid-template-columns:minmax(0,1fr)}
  html body .ptapage .pta-mapside{max-height:none}
  html body .ptapage .pta-legend{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));max-height:300px}
}
@media(max-width:767px){
  html body .ptapage .pta-mapcanvas{height:clamp(360px,60vh,520px)}
  html body .ptapage .pta-legend{grid-template-columns:1fr}
  html body .ptapage .pta-stat{flex:1 1 44%;min-width:0}
  html body .ptapage .pta-line{padding-left:var(--s4);margin:var(--s6) 0}
  html body .ptapage .pta-doc{max-width:100%}
}

/* PHONES: a tab strip wraps rather than running off the page */
@media(max-width:767px){
html body #page-main .cstabs-nav{flex-wrap:wrap;max-width:100%}
html body #page-main .cstab{white-space:normal;max-width:100%;text-align:center;padding:10px 18px}
}

/* touch targets: a browser-window control is 25-28px tall on a pointer device, which is fine with a mouse and
   too small with a thumb. At tablet and below every page button and viewport toggle gets a 44px box. The type
   and the padding do not change, only the minimum height and the hit area. */
@media(max-width:1023px){
 .csframe-page,.csframe-toggle{min-height:44px;padding-top:0;padding-bottom:0;align-items:center;display:inline-flex}
 .csframe-pages{gap:8px}
 .csframe-toggles{padding:4px}
}
/* click-to-load deck (.csdeckload): the deck's cover holds the place; the embed loads only when the visitor asks for it */
.csfigma .csfig-wrap.csdeckload{width:100%;height:auto;max-height:none}
.csdeckload-stage{position:relative;width:100%;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:var(--dark)}
.csdeckload-btn{all:unset;box-sizing:border-box;position:absolute;inset:0;z-index:2;cursor:pointer;transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.csdeckload-btn img{display:block;width:100%;height:100%;object-fit:cover}
.csdeckload-pill{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 22px;border-radius:999px;background:white;color:black;font:600 var(--t-small)/1 Inter,system-ui,sans-serif;box-shadow:0 8px 30px color-mix(in srgb,black 25%,transparent);white-space:nowrap}
.csdeckload-pill::before{content:"";border-style:solid;border-width:5.5px 0 5.5px 9px;border-color:transparent transparent transparent currentColor}
.csdeckload-stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0;opacity:0;transform:scale(.985);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.csdeckload-stage.is-on iframe{opacity:1;transform:none}
.csdeckload-stage.is-on .csdeckload-btn{opacity:0;transform:scale(1.015);pointer-events:none}
.csdeckload-link{text-align:center;margin:18px 0 0}
.csdeckload-link a{color:inherit;text-decoration:underline;text-underline-offset:4px;display:inline-block;min-height:var(--tap);line-height:var(--tap)}
/* gated case study (Bam 2026-10-14): a study that is still being polished shows its hero with a message and a way back to the work; scripts/cs-review.py hides the short version, the story and the press with an inline style on those blocks until it is unflagged */
.csgate{display:flex;flex-direction:column;align-items:center;gap:var(--s5);margin-top:clamp(24px,3vw,38px);text-align:center}
.csgate p{max-width:34em;margin:0;font-size:var(--t-lead);line-height:var(--lh-lead)}

/* deck: the old slide stays until the next image has arrived (slow connections showed a blank slide) */
.deck.is-loading{cursor:progress}
.deck.is-loading .deck-stage{opacity:.6;transition:opacity .2s}
/* tall page captures in decks (Bam 2026-10-14): a slide taller than 1.8 times its width is a div.deck-slide.-tall holding the img. It shows in a window of at most min(80vh,820px) that scrolls inside, full width, never shrunk to a strip; a narrow capture is not blown up past twice its own width; the bottom padding keeps the last lines clear of the arrows. */
.deck-stage .deck-slide.-tall{max-height:min(80vh,820px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding-bottom:64px}
.deck-stage .deck-slide.-tall img{display:block;width:100%;max-width:calc(var(--w,1000)*2px);height:auto;margin:0 auto}
/* padded full image (Bam 2026-10-14): csfullimg-pad is the same one-artwork block with equal padding all round, so the image sits centred in a black section; the black is --pad-bg set inline (default --ink), because --ink turns light in dark mode. */
.csfullimg-pad{background:var(--pad-bg,var(--ink))}
.csfullimg-pad>div{width:100%;box-sizing:border-box;padding:clamp(24px,6vw,96px)}
/* list on the page grid (Bam 2026-10-14, Kingsland: "if you gonna design a list do it right ... that top paragraph is on no grid"): .cslist sits under a .csed-flow in the same csoverflow section; every .cslist-row is a .csed-flow that is a two-column grid with the same columns and gap as the flow above it, key left (a stat value or a title), text right. Text, colour and size come from the .csed-flow p rules; only the layout lives here. One column on tablet and phone. */
.csed-flow+.cslist{margin-top:clamp(34px,3.6vw,56px)}
.cslist-row.csed-flow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(44px,4.8vw,96px);column-count:auto;align-items:baseline;padding:clamp(20px,2vw,30px) 0;border-top:1px solid color-mix(in srgb,currentColor 16%,transparent)}
.cslist-t{font-size:var(--t-h3);font-weight:500;line-height:1.2;letter-spacing:-.012em}
.cslist-v{font-size:var(--t-h2);font-weight:500;line-height:1;letter-spacing:-.03em}
@media(max-width:900px){.cslist-row.csed-flow{grid-template-columns:1fr;row-gap:var(--s3)}}
/* text clears the side controls and stays whole (Bam 2026-10-14, Kingsland: "its being covered by the frame so add more padding ... dont break shit up weird"): from 1200px the fixed controls (back to top, light and dark) sit at the left and right edges, up to 98px in from each side at every desktop width. .csclear on a csoverflow section pushes its flow and its list in to --frame-clear (120px) from the page edge; below 1200px the controls are a row at the bottom and nothing moves. .csed-whole on a .csed-flow keeps every paragraph in one piece: it moves to the next column instead of splitting across two. */
.csclear{--frame-clear:120px}
@media(min-width:1200px){.csclear>.wrap>.csed-flow,.csclear>.wrap>.cslist{padding-inline:calc(var(--frame-clear) - var(--cs-gutter))}}
.csed-flow.csed-whole p:not(#_){break-inside:avoid;-webkit-column-break-inside:avoid}

/* Case study video: two options only (Bam, "there is no bands on video").
   default: centred in its section with EQUAL padding on all four sides, no bands: the box takes the video's own shape
   (--csvar = width / height, set from the file by therum.js, 16:9 until it is known) and is never taller than the screen.
   The section colour is --csv-bg (the client's colour, else black). .csvideo-full: the video covers the whole full-height
   section (the VIDEO LAW above). There is no third option. */
html body #page-main section.csb.csvideo:not(.csvideo-full){--csv-pad:clamp(20px,5vw,80px);padding:var(--csv-pad)!important;min-height:0!important;background:var(--csv-bg,var(--ink));overflow:hidden}
html body #page-main section.csb.csvideo:not(.csvideo-full)>.csvid-wrap{position:relative!important;inset:auto!important;transform:none!important;width:min(100%,calc((100vh - 2*var(--csv-pad))*var(--csvar,1.7778)))!important;height:auto!important;aspect-ratio:var(--csvar,1.7778)!important;min-width:0!important;min-height:0!important;max-width:100%!important;margin:0 auto!important;overflow:hidden!important;container-type:normal!important}
html body #page-main section.csb.csvideo:not(.csvideo-full)>.csvid-wrap>:is(video,iframe){position:absolute!important;inset:0!important;transform:none!important;width:100%!important;height:100%!important;min-width:0!important;min-height:0!important;max-width:none!important;max-height:none!important;aspect-ratio:auto!important;object-fit:cover!important;display:block}

/* A frame with many pages picks them from a rail of real page thumbnails, not a row of text pills (Bam: "11 pills, that just doesn't look good").
   .csframe-rail wraps .csframe-pages.csframe-strip (the same .csframe-page buttons, data-page and is-active as the pills, so the frame logic is unchanged)
   and two arrows; the active thumbnail is lit, the others dimmed. */
.csframe-rail{position:relative;margin-top:18px}
.csframe-pages.csframe-strip{position:relative;display:flex;flex-wrap:nowrap;justify-content:flex-start;gap:14px;margin-top:0;padding:6px 3px 4px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.csframe-pages.csframe-strip::-webkit-scrollbar{display:none}
.csframe-strip .csframe-page{flex:0 0 calc((100% - 5*14px)/6.4);display:flex;flex-direction:column;gap:9px;align-items:stretch;padding:0;border:0;border-radius:0;background:none;text-align:left;color:var(--rail-dim);scroll-snap-align:start}
.csframe-strip .csframe-page:hover{color:var(--rail-hi)}
.csframe-strip .csframe-page.is-active{color:var(--rail-hi);background:none}
.csframe-thumb{display:block;aspect-ratio:16/10;overflow:hidden;border-radius:10px;border:1px solid var(--rail-line);background:var(--rail-chip);opacity:.6;transition:opacity 150ms ease,box-shadow 150ms ease,border-color 150ms ease}
.csframe-thumb img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.csframe-strip .csframe-page:hover .csframe-thumb{opacity:.9}
.csframe-strip .csframe-page.is-active .csframe-thumb{opacity:1;border-color:var(--rail-hi);box-shadow:0 0 0 2px var(--rail-hi)}
.csframe-cap{font-family:var(--therum-font-mono,'JetBrains Mono',ui-monospace,Menlo,monospace);font-size:var(--t-label);letter-spacing:.05em;text-transform:uppercase;line-height:1.25}
.csframe-rail-nav{position:absolute;top:calc(50% - 22px - 14px);z-index:2;width:44px;height:44px;border-radius:50%;border:1px solid var(--rail-nav-line);background:var(--rail-nav-bg);color:var(--rail-hi);font-size:var(--t-h3);line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:opacity 150ms ease,background 150ms ease}
.csframe-rail-nav:hover{background:var(--ink)}
.csframe-rail-prev{left:-10px}
.csframe-rail-next{right:-10px}
.csframe-rail-nav:disabled{opacity:0;pointer-events:none}
@media(max-width:1100px){.csframe-strip .csframe-page{flex-basis:calc((100% - 3*14px)/4.4)}}
@media(max-width:820px){.csframe-pages.csframe-strip{gap:12px}.csframe-strip .csframe-page{flex-basis:calc((100% - 2*12px)/2.6)}}
@media(max-width:820px),(pointer:coarse){.csframe-rail-nav{visibility:hidden;pointer-events:none}}

/* case-study lightbox: a section with data-lightbox="<group>" opens its images larger; the whole group is one gallery. Never cropped (Bam 2026-10-19, Mode of One) */
[data-lightbox] img{cursor:zoom-in}
[data-lightbox] img:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
html.cslb-open{overflow:hidden}
.cslb{position:fixed;inset:0;z-index:700;display:flex;align-items:center;justify-content:center;box-sizing:border-box;padding:calc(var(--tap)*1.3) calc(var(--tap)*1.6);background:var(--dark);overscroll-behavior:contain}
.cslb[hidden]{display:none}
.cslb-fig{margin:0;width:100%;height:100%;min-width:0;min-height:0;display:flex;align-items:center;justify-content:center}
.cslb-fig img{display:block;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;touch-action:pan-y;user-select:none;-webkit-user-drag:none}
.cslb button{position:absolute;width:var(--tap);height:var(--tap);padding:0;display:flex;align-items:center;justify-content:center;border:1px solid var(--rail-nav-line);border-radius:50%;background:var(--rail-nav-bg);color:var(--rail-hi);font:inherit;font-size:var(--t-h3);line-height:1;cursor:pointer}
.cslb button:hover,.cslb button:focus-visible{background:var(--rail-hi);color:var(--dark)}
.cslb-close{top:12px;right:12px}
.cslb-prev{left:12px;top:50%;margin-top:calc(var(--tap)/-2)}
.cslb-next{right:12px;top:50%;margin-top:calc(var(--tap)/-2)}
.cslb-count{position:absolute;left:0;right:0;bottom:16px;text-align:center;font-size:var(--t-small);color:var(--rail-dim);pointer-events:none}
@media(max-width:760px){.cslb{padding:calc(var(--tap)*1.2) 0 calc(var(--tap)*1.6)}.cslb-prev,.cslb-next{top:auto;bottom:8px;margin-top:0}.cslb-prev{left:12px}.cslb-next{right:12px}}

/* 2026-10-21 Therum OS: the wireframe deck keeps its controls off the drawings, and wireframes pan on a phone instead of shrinking past reading */
.csdeck-wire .deck-stage{padding-bottom:68px}
@media(max-width:820px){
  .csdeck-wire .deck-stage{overflow-x:auto;-webkit-overflow-scrolling:touch;text-align:left}
  .csdeck-wire .deck-slide{width:auto;min-width:1400px;max-width:none;max-height:none}
  .csframe-ba .csframe-pane>img{width:auto;min-width:1100px;max-width:none}
  .csframe-ba .csframe-pane{overflow-x:auto}
}

/* ═══ 2026-10-28 design critique fixes (docs/DESIGN-CRITIQUE-2026-10-28.md, items 1 to 7) ═══ */
/* Key Outputs asset plate (Bam 2026-10-28): a plate with no chapter number, one line naming an asset, then the asset; its line spans the wrap like the numbered plates' eyebrow does (the grid test) */
html body #page-main section.csb.cssx.cssx-sub>div.wrap>p.csbody{max-width:none!important}
/* 1. Vimeo background loops: the video's own still, or a self-hosted loop, in place of the player's error text */
.vposter{background-size:cover;background-position:center;background-repeat:no-repeat}
.vloop{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;pointer-events:none}
/* 3. words are never split in the middle: pillar and process rows stack on phones, the blurb takes the second line */
.pxrow>.pxname,.pxrow>.pxblurb{overflow-wrap:break-word}
@media(max-width:640px){
  .pxrow:has(.pxthumb),.pillarindex.-ohio .pxrow:has(.pxthumb){grid-template-columns:72px minmax(0,1fr) 44px;column-gap:14px}
  .pxrow:has(.pxthumb) .pxthumb,.pillarindex.-ohio .pxrow .pxthumb{width:72px;height:48px}
  .pxrow:has(.pxthumb) .pxname{font-size:var(--t-pillar-sm)}
  .pxrow:not(.sub5):not(:has(.pxthumb)){grid-template-columns:minmax(0,1fr) auto;column-gap:16px;row-gap:8px}
  .pxrow:not(.sub5):not(:has(.pxthumb))>.pxname{grid-column:1;grid-row:1}
  .pxrow:not(.sub5):not(:has(.pxthumb))>.pxblurb{grid-column:1/-1;grid-row:2;max-width:none}
  .pxrow:not(.sub5):not(:has(.pxthumb))>.pxarrow{grid-column:2;grid-row:1;align-self:center}
}
/* 4. contrast: menu links, device toggle, row arrows, the deck link, hero text over a picture */
.offnav a.nav-link{color:var(--nav-dim)}
.offnav .navrow-sub a.nav-link{color:var(--nav-dim-sub)}
.offnav a.nav-link:hover,.offnav a.nav-link.active,.offnav .navrow-sub a.nav-link:hover,.offnav .navrow-sub a.nav-link.active{color:var(--nav-on)}
.csframe-toggle{color:var(--toggle-off)}
.csframe-toggle:hover{color:var(--toggle-off-hover)}
.pxarrow,a.pxarrow{opacity:.7}
/* 6. one phone hero height on every page (the PTA hero was 84/32, the rest 96/72) */
@media(max-width:640px){/* the :not(.zz) run only raises the weight above the hero rule built from seven :not(:has()) clauses */ html body main.ptapage>section.page-hero.page-hero.herotype:not(.zz):not(.zz):not(.zz):not(.zz):not(.zz):not(.zz):not(.zz):not(.zz):not(.zz):not(.zz):not(.zz):not(.zz){padding-top:96px!important;padding-bottom:72px!important}}
/* 7. taps and small type */
@media(max-width:640px){
  a.nf.nf-brand{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:flex-start}
  .pfpill button{min-width:44px;min-height:44px;margin:-12px -10px -12px 0}
}
.csframe .csframe-url,.csframe[data-vp] .csframe-url,.csframe .csframe-toggle,.csframe[data-vp] .csframe-toggle,.csframe .csframe-page,.csframe-url,.csframe-toggle,.csframe-page,.ba-lbl{font-size:var(--t-min)}
@media(max-width:820px){.nf-section{font-size:var(--t-min);letter-spacing:.1em}}

/* case-study boards: the Therum OS study's pictures rebuilt as HTML components, no baked titles (Bam 2026-10-29) */
.csb.csbd{background:var(--cb-bg);color:var(--cb-ink);padding:clamp(40px,6vw,96px) 0;min-height:0}
.csbd .wrap{max-width:var(--cs-col-max);margin:0 auto;padding:0 var(--cs-gutter)}
.cb-g{display:grid;gap:clamp(12px,1.4vw,20px)}.cb-2{grid-template-columns:repeat(2,minmax(0,1fr))}.cb-3{grid-template-columns:repeat(3,minmax(0,1fr))}.cb-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.cb-card{background:var(--cb-card);border:1px solid var(--cb-line);border-radius:22px;padding:clamp(18px,2vw,30px);min-width:0}
.cb-card.hl{background:var(--cb-dnbg);border-color:var(--cb-dnbg)}.cb-card.sub{background:var(--cb-sub)}.cb-card.blk{background:var(--cb-black);border-color:var(--cb-black);color:var(--cb-white)}
.cb-lbl{font-family:var(--cb-mono);font-size:var(--cb-fs-xs);letter-spacing:.18em;text-transform:uppercase;color:var(--cb-mut)}
.cb-hl .cb-lbl,.cb-card.hl .cb-lbl{color:var(--cb-acc)}
.cb-h{font-size:var(--cb-fs-xl);letter-spacing:-.035em;line-height:1.02;font-weight:700}.cb-t{font-size:var(--cb-fs-l);letter-spacing:-.02em;line-height:1.2;font-weight:700}.cb-p{font-size:var(--cb-fs-m);line-height:1.4;color:var(--cb-mut2)}
.cb-chip{display:inline-block;font-family:var(--cb-mono);font-size:var(--cb-fs-s);padding:5px 12px;border-radius:99px;background:var(--cb-sub);border:1px solid var(--cb-line);color:var(--cb-mut2);white-space:nowrap}
.cb-chip.ok{background:var(--cb-okbg);border-color:var(--cb-okbg);color:var(--cb-oktx)}.cb-chip.wn{background:var(--cb-wnbg);border-color:var(--cb-wnbg);color:var(--cb-wntx)}.cb-chip.dn{background:var(--cb-dnbg);border-color:var(--cb-dnbg);color:var(--cb-dntx)}
.cb-dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--cb-ok);flex:none}.cb-dot.k{background:var(--cb-ink)}.cb-dot.r{background:var(--cb-acc)}
.cb-num{display:inline-grid;place-items:center;min-width:30px;height:24px;padding:0 9px;border-radius:99px;background:var(--cb-ink);color:var(--cb-white);font-family:var(--cb-mono);font-size:var(--cb-fs-xs)}
.cb-row{display:flex;align-items:center;gap:16px;padding:clamp(14px,1.8vw,26px) 0;border-bottom:1px solid var(--cb-line)}.cb-row:last-child{border-bottom:0}
.cb-row .n{font-family:var(--cb-mono);font-size:var(--cb-fs-s);color:var(--cb-mut);width:2.6em}.cb-row .t{font-size:var(--cb-fs-l);letter-spacing:-.025em;font-weight:700;flex:1}
.cb-rail{position:relative;display:flex;justify-content:space-between;align-items:center;margin:0 0 clamp(18px,2.4vw,34px)}.cb-rail::before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;background:var(--cb-line2)}
.cb-rail span{position:relative;background:var(--cb-bg);padding:0 14px}.cb-rail span:first-child{padding-left:0}.cb-rail span:last-child{padding-right:0}
.cb-big{min-height:clamp(220px,24vw,380px);display:flex;flex-direction:column;gap:12px}.cb-big .cb-t{margin-top:auto;font-size:var(--cb-fs-xl)}.cb-big .cb-p{margin:0 0 auto}.cb-big .top{display:flex;justify-content:space-between}
.cb-ol{list-style:none;margin:0;padding:0}.cb-ol li{display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--cb-line);font-size:var(--cb-fs-l);letter-spacing:-.02em;font-weight:700}.cb-ol li:last-child{border-bottom:0}.cb-ol li b{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--cb-ink);color:var(--cb-white);font-size:var(--cb-fs-s)}
.cb-stack{display:grid;gap:clamp(12px,1.4vw,20px);align-content:start}
.cb-win{border:1px solid var(--cb-line);border-radius:14px;overflow:hidden;background:var(--cb-card)}.cb-win .bar{display:flex;align-items:center;gap:6px;padding:9px 12px;border-bottom:1px solid var(--cb-line);font-family:var(--cb-mono);font-size:var(--cb-fs-xs);color:var(--cb-mut)}.cb-win .bar i{width:9px;height:9px;border-radius:50%;background:var(--cb-line2)}.cb-win .bar b{margin-left:8px;font-weight:400}.cb-win img{display:block;width:100%;height:auto}
.cb-bars i{display:block;height:8px;border-radius:4px;background:var(--cb-line2);margin:8px 0}
.cb-login{background:var(--cb-bg);border-radius:12px;padding:clamp(14px,2vw,26px);text-align:center}.cb-login .l{width:38px;height:38px;border-radius:10px;background:var(--cb-acc);color:var(--cb-white);display:grid;place-items:center;margin:0 auto 6px;font-weight:800}.cb-login .g{border:1px solid var(--cb-line);border-radius:8px;background:var(--cb-white);padding:8px;font-size:var(--cb-fs-s);font-weight:600;margin:10px 0}.cb-login .f{border:1px solid var(--cb-line);border-radius:8px;background:var(--cb-white);height:30px;margin:6px 0;text-align:left;padding:7px 10px;font-size:var(--cb-fs-s);color:var(--cb-mut)}.cb-login .f.on{border-color:var(--cb-acc)}.cb-login .s{border-radius:8px;background:var(--cb-btn);color:var(--cb-white);padding:8px;font-weight:700;font-size:var(--cb-fs-s);margin-top:8px}
.cb-aud{border:1px solid var(--cb-line);border-radius:14px;padding:14px;margin-bottom:12px}.cb-aud .h{display:flex;align-items:center;gap:10px;font-weight:700;font-size:var(--cb-fs-m)}.cb-aud .h b{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--cb-wnbg);color:var(--cb-wntx);font-size:var(--cb-fs-s)}.cb-aud .h .cb-chip{margin-left:auto}.cb-aud .r{display:flex;align-items:center;gap:8px;justify-content:flex-end;margin-top:10px;border-top:1px solid var(--cb-line);padding-top:10px}.cb-aud .r i{flex:1;height:7px;border-radius:4px;background:var(--cb-line2);max-width:42%}
.cb-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;border:1px solid var(--cb-line);border-radius:18px;background:var(--cb-card);padding:14px clamp(14px,2vw,26px)}.cb-bar .r{margin-left:auto}.cb-bar.blk{background:var(--cb-black);border-color:var(--cb-black);color:var(--cb-white)}.cb-bar.blk .cb-chip{background:var(--cb-w10);border-color:transparent;color:var(--cb-white)}
.cb-ico{display:grid;place-items:center;width:46px;height:46px;border-radius:12px;background:var(--cb-icobg);color:var(--cb-icotx);margin-bottom:22px}.cb-ico svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cb-code{font-family:var(--cb-mono);font-size:var(--cb-fs-em);background:var(--cb-sub);border-radius:6px;padding:1px 6px}
.cb-tg{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--cb-line);font-family:var(--cb-mono);font-size:var(--cb-fs-s)}.cb-tg:last-child{border-bottom:0}.cb-tg .nm{flex:1;min-width:0;overflow-wrap:anywhere}.cb-tg .nm small{display:block;font-family:var(--cb-sans,inherit);font-size:var(--cb-fs-xs);color:var(--cb-mut)}
.cb-sw{width:42px;height:24px;border-radius:99px;background:var(--cb-btn);position:relative;flex:none}.cb-sw::after{content:"";position:absolute;right:3px;top:3px;width:18px;height:18px;border-radius:50%;background:var(--cb-white)}.cb-sw.off{background:var(--cb-line2)}.cb-sw.off::after{right:auto;left:3px}
.cb-foot{margin-top:auto;border-radius:12px;padding:12px 14px;font-size:var(--cb-fs-s);font-weight:600}.cb-foot.ok{background:var(--cb-okbg);color:var(--cb-oktx)}.cb-foot.wn{background:var(--cb-wnbg);color:var(--cb-wntx)}.cb-foot.nu{background:var(--cb-sub);color:var(--cb-mut2);font-weight:400}
.cb-lay{display:flex;flex-direction:column;min-height:clamp(320px,34vw,520px)}
.cb-log .hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}.cb-log .cb-row .nm{flex:0 0 28%}.cb-log .cb-row .tags{flex:1;display:flex;gap:8px;flex-wrap:wrap}
.cb-sig{display:grid;grid-template-columns:auto 1fr;gap:6px 22px;align-items:baseline;border-bottom:1px solid var(--cb-line);padding:12px 0}.cb-sig:last-child{border-bottom:0}.cb-sig b{font-size:var(--cb-fs-xl);letter-spacing:-.04em;line-height:1}.cb-sig span{font-size:var(--cb-fs-m);color:var(--cb-mut2)}
.cb-road{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;position:relative;margin:clamp(24px,3vw,44px) 0}.cb-road::before{content:"";position:absolute;left:12.5%;right:12.5%;top:clamp(28px,3vw,40px);height:4px;background:var(--cb-btn)}
.cb-road div{position:relative;text-align:center}.cb-road .c{display:grid;place-items:center;width:clamp(56px,6vw,84px);height:clamp(56px,6vw,84px);border-radius:50%;margin:0 auto 14px;background:var(--cb-btn);color:var(--cb-white);font-family:var(--cb-mono);font-weight:700}.cb-road .c.g{background:var(--cb-ghost);color:var(--cb-mut2);border:2px solid var(--cb-line2)}.cb-road .c.r{background:var(--cb-acc)}.cb-road b{display:block;font-size:var(--cb-fs-m);letter-spacing:-.01em}.cb-road small{display:block;color:var(--cb-mut);font-size:var(--cb-fs-s);margin-top:4px}
.cb-pills{display:flex;gap:12px;flex-wrap:wrap}.cb-pills .cb-card{padding:16px 20px;display:flex;align-items:center;gap:14px;flex:1 1 180px;font-weight:700;font-size:var(--cb-fs-m)}.cb-pills .cb-card::after{content:"";margin-left:auto;width:22px;height:22px;border-radius:50%;background:var(--cb-okbg);box-shadow:inset 0 0 0 7px var(--cb-okbg),inset 0 0 0 20px var(--cb-ok);opacity:.9}
.cb-shim{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(20px,3vw,44px);align-items:center}.cb-shim .own{background:var(--cb-acc);color:var(--cb-white);border-radius:22px;padding:clamp(22px,3vw,40px);min-height:clamp(180px,20vw,300px);display:flex;flex-direction:column;justify-content:space-between}.cb-shim .own .cb-t{font-size:var(--cb-fs-xl);color:var(--cb-white)}.cb-shim .wp{border:1px dashed var(--cb-line2);border-radius:14px;padding:14px 18px;margin-top:12px;font-size:var(--cb-fs-m);background:var(--cb-sub)}.cb-shim .wp span{font-family:var(--cb-mono);font-size:var(--cb-fs-xs);color:var(--cb-mut);margin-right:10px;text-transform:uppercase}.cb-shim .big{font-size:var(--cb-fs-xl);letter-spacing:-.04em;font-weight:700;line-height:1.05}.cb-shim .big em{font-style:normal;color:var(--cb-acc)}
.cb-col{background:var(--cb-sub);border:1px solid var(--cb-line);border-radius:22px;padding:clamp(14px,1.6vw,22px);display:grid;gap:12px;align-content:start}.cb-col .hd{display:flex;justify-content:space-between;align-items:center;margin-bottom:2px}.cb-col .hd .k{display:grid;place-items:center;min-width:28px;height:28px;border-radius:50%;background:var(--cb-white);border:1px solid var(--cb-line);font-size:var(--cb-fs-s);color:var(--cb-mut2)}.cb-item{background:var(--cb-white);border-radius:16px;padding:16px 18px;box-shadow:0 1px 3px var(--cb-sh1)}.cb-item b{display:block;font-size:var(--cb-fs-m);letter-spacing:-.01em;line-height:1.25}.cb-item span{display:block;font-size:var(--cb-fs-s);color:var(--cb-mut2);margin-top:6px}.cb-item.o{border:1px solid var(--cb-oline)}
.cb-map{width:100%;border-collapse:collapse;font-family:var(--cb-mono);font-size:var(--cb-fs-s)}.cb-map th{font-weight:400;font-size:var(--cb-fs-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--cb-mut);text-align:left;padding:0 0 10px;border-bottom:1px solid var(--cb-line)}.cb-map td{padding:10px 0;border-bottom:1px solid var(--cb-line)}.cb-map tr:last-child td{border-bottom:0}.cb-map td.a{color:var(--cb-mut);width:2.2em}.cb-map td.v{text-align:right;color:var(--cb-mut);white-space:nowrap}.cb-map td.s{width:48px}.cb-map td.s i{display:block;width:42px;height:24px;border-radius:7px;border:1px solid var(--cb-sh2)}
.cb-tl{display:grid;gap:clamp(20px,3vw,40px)}.cb-tl .tr{display:grid;gap:14px}.cb-tl .pts{display:grid;grid-template-columns:repeat(var(--n),1fr);position:relative}.cb-tl .pts::before{content:"";position:absolute;left:calc(50%/var(--n));right:calc(50%/var(--n));top:9px;height:3px;background:var(--lc)}.cb-tl .pt{position:relative;text-align:center;font-family:var(--cb-mono)}.cb-tl .pt i{display:block;width:20px;height:20px;border-radius:50%;background:var(--cb-white);border:3px solid var(--lc);margin:0 auto 10px;position:relative;z-index:1}.cb-tl .pt b{display:block;font-size:var(--cb-fs-m)}.cb-tl .pt small{display:block;font-size:var(--cb-fs-xs);color:var(--cb-mut);margin-top:3px;font-family:var(--cb-sans,inherit)}
.csapps-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.4vw,20px)}
.csapps-card{all:unset;box-sizing:border-box;display:flex;flex-direction:column;gap:8px;width:100%;height:100%;min-height:clamp(180px,16vw,240px);padding:clamp(18px,2vw,28px);border-radius:22px;background:var(--cb-card);border:1px solid var(--cb-line);cursor:pointer;color:var(--cb-ink);transition:border-color .2s,transform .2s,background .2s}.csapps-card:hover,.csapps-card:focus-visible{border-color:var(--cb-ink);transform:translateY(-2px)}.csapps-card:focus-visible{outline:2px solid var(--cb-acc);outline-offset:2px}.csapps-card.is-on{background:var(--cb-ink);color:var(--cb-white);border-color:var(--cb-ink)}
.csapps-card .n{font-family:var(--cb-mono);font-size:var(--cb-fs-xs);letter-spacing:.14em;color:var(--cb-mut)}.csapps-card b{font-size:var(--cb-fs-xl);letter-spacing:-.035em;line-height:1.02}.csapps-card .k{font-size:var(--cb-fs-m);color:var(--cb-mut2)}.csapps-card.is-on .k,.csapps-card.is-on .n{color:var(--cb-w70)}.csapps-card .go{margin-top:auto;font-family:var(--cb-mono);font-size:var(--cb-fs-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--cb-acc)}.csapps-card.is-on .go{color:var(--cb-white)}
.csapps-stage{margin-top:clamp(20px,3vw,40px)}.csapps-stage[hidden]{display:none}.csapps-copy{max-width:var(--measure-hero,980px);margin:clamp(16px,2vw,28px) auto 0;color:var(--cb-mut2)}.csapps-copy[hidden]{display:none}.csapps-copy p{font-size:var(--cb-fs-m);line-height:1.55;margin:0 0 12px}.csapps-copy p:first-child{color:var(--cb-ink);font-size:var(--cb-fs-l);letter-spacing:-.015em;line-height:1.3;font-weight:600}
.csapps .csframe-pages [hidden]{display:none}
.csb.csbridge{background:var(--cb-black);color:var(--cb-white);padding:clamp(40px,5vw,72px) 0;min-height:0;text-align:center}.csbridge .k{font-family:var(--cb-mono);font-size:var(--cb-fs-xs);letter-spacing:.18em;text-transform:uppercase;color:var(--cb-w60);margin:0 0 18px}.csbridge .go{display:inline-flex;align-items:center;gap:14px;min-height:var(--tap,44px);padding:16px 30px;border-radius:99px;background:var(--cb-white);color:var(--cb-ink);font-size:var(--cb-fs-l);font-weight:700;letter-spacing:-.02em;text-decoration:none}.csbridge .go:hover,.csbridge .go:focus-visible{background:var(--cb-acc);color:var(--cb-white)}
.cb-s13{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}.cb-s15{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}.cb-s211{grid-template-columns:minmax(0,2fr) minmax(0,1.1fr) minmax(0,1fr)}
@media(max-width:900px){.cb-3,.cb-4{grid-template-columns:repeat(2,minmax(0,1fr))}.cb-s13,.cb-s15,.cb-s211{grid-template-columns:1fr}.csapps-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.cb-shim{grid-template-columns:1fr}}
@media(max-width:620px){.cb-2,.cb-3,.cb-4,.csapps-grid{grid-template-columns:1fr}.cb-log .cb-row{flex-wrap:wrap}.cb-log .cb-row .nm{flex:1 1 60%}.cb-road{grid-template-columns:1fr 1fr;row-gap:28px}.cb-road::before{display:none}.cb-tl .pts{grid-template-columns:1fr 1fr}.cb-tl .pts::before{display:none}.cb-bar .r{margin-left:0}}

/* 404 (Bam 2026-11-06: "we need a good 404 page", then "feels anything like Therum"): the 404 is cut out of our own work. One mosaic of every study's picture sits behind a 4 0 4 stencil; the work slides under it as the pointer moves, tiles swap places, and a tile opens its study. A missing address also gets "Did you mean" from the site's own search index. */
.nf404sec{background:var(--paper);color:var(--ink);padding-top:clamp(88px,11vh,130px);padding-bottom:clamp(88px,10vh,120px);min-height:100vh}
.nf404sec h1.ht-display,.nf404sec .ht-body,.nf404sec .metaline>*{color:var(--ink)}
.nf404{position:relative;width:min(100%,82vh,1000px);margin:0 auto clamp(14px,2.4vh,28px)}
.nf404-svg{display:block;width:100%;height:auto;overflow:visible}
.nf404-svg a{cursor:pointer}
.nf404-svg a svg{transition:filter .25s}
.nf404-svg:hover a svg{filter:saturate(.7) brightness(.82)}
.nf404-svg a:hover svg{filter:saturate(1.15) brightness(1.08)}
.nf404-card{position:absolute;z-index:5;width:260px;padding:10px;background:var(--paper);color:var(--ink);border:1px solid var(--hair);border-radius:10px;box-shadow:0 18px 40px color-mix(in srgb,var(--ink) 28%,transparent);pointer-events:none;display:flex;flex-direction:column;gap:6px}
.nf404-card[hidden]{display:none}
.nf404-card img{display:block;width:100%;height:auto;border-radius:6px;background:var(--hair)}
.nf404-ct{font-weight:640;font-size:var(--t-small)}
.nf404-cs{font-size:var(--t-label);letter-spacing:.12em;text-transform:uppercase;opacity:.7}
.nf404-dym{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;margin:0 0 clamp(14px,2vh,22px)}
.nf404-dym a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:99px;background:var(--accent);color:var(--paper)}
@media(max-width:600px){.nf404{width:100%}.nf404-svg a{pointer-events:none}}
.nf404sec h1.ht-display{font-size:var(--t-h1);line-height:1.1}
.nf404sec.herotype::after{display:none}
.nf404sec .ht-base{margin-top:0;padding-top:0}
.nf404sec .ht-base::before{margin:clamp(14px,2.4vh,26px) auto clamp(14px,2.4vh,24px)}
.nf404sec .row{flex-wrap:wrap;justify-content:center}
.nf404sec .btn{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.nf404sec .btn.-ghost{background:transparent;color:var(--ink);border:1px solid color-mix(in srgb,var(--ink) 45%,transparent)}
.nf404sec .btn.-ghost:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.nf404sec .btn:hover{background:var(--accent);color:var(--paper);border-color:var(--accent)}
.nf404-pil{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;margin-top:clamp(22px,3.4vh,40px)}
.nf404-lbl{width:100%;font-size:var(--t-label);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);opacity:.7}
.nf404-pil a{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:1px solid color-mix(in srgb,var(--ink) 40%,transparent);border-radius:99px;color:var(--ink);transition:background .25s,color .25s}
.nf404-pil a:hover,.nf404-pil a:focus-visible{background:var(--ink);color:var(--paper)}
/* skip link (2026-11-06, clarity check): sat off-screen at 1 x 1 px, which tools and screen magnifiers read as a broken 1 px button; now a normal 44 px link parked above the page until it takes focus */
.skip-link{clip:auto;overflow:visible;width:auto;height:auto;min-height:44px;display:inline-flex;align-items:center;padding:0 16px;background:var(--ink);color:var(--paper);transform:translateY(-120%);transition:transform .15s}
.skip-link:focus,.skip-link:focus-visible{transform:none;outline:2px solid var(--accent);outline-offset:2px}
/* 404 layout fixes (2026-11-06, clarity check): desktop shows the four buttons in one row; on a phone the four buttons are an even 2 x 2, the six pillars an even 3 x 2, and the whole page ends above the fixed round buttons (they sit 776 px down on a 390 x 844 screen) */
.nf404-lbl{opacity:.85}
@media(min-width:601px){.nf404sec .ht-base{max-width:940px}}
@media(max-width:600px){
.nf404sec{padding-top:76px;padding-bottom:120px;min-height:0}
.nf404{margin:0 0 12px}
.nf404sec .ht-base::before{margin:12px auto}
.nf404sec .ht-body{margin-bottom:14px}
.nf404sec .row{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%}
.nf404sec .row .btn{justify-content:center;padding:0 10px;min-height:48px}
.nf404-pil{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:20px}
.nf404-lbl{grid-column:1/-1}
.nf404-pil a{justify-content:center;padding:0 6px}
}