/* Brand layer for workwithmattsmith.com (Final A, Clean Bento). Lifted from the approved brand book:
   ~/workwithmattsmith/brand-book/finals.css. Sizes use cqw against the .page container. */
.wt{--w-bg:#F6F9FC;--w-alice:#E9F1F7;--w-coral:#FC814A;--w-amber:#FFA947;--w-yale:#344966;--w-bell:#1E9BF0;--w-acc:#1188E6;--w-mut:#5D6E86;--w-line:rgba(52,73,102,.16);--w-ink:#1B2638;--w-card:#FFFFFF}
.wf{background:var(--w-bg);color:var(--w-yale);font-family:'Chillax','Lil Grotesk',system-ui,sans-serif;font-size:0.9375rem;line-height:1.5;position:relative}

.wf-nav{display:flex;align-items:center;gap:var(--space-md);padding:clamp(14px,2.6cqw,28px) clamp(16px,4cqw,48px) 0}
.wf-brand{display:flex;align-items:center;gap:var(--space-sm);font-weight:600;font-size:clamp(0.9375rem,1.6cqw,1.25rem);white-space:nowrap}
.wf-brand svg{width:clamp(30px,3.6cqw,46px);height:auto;flex:none;display:block}
.wf-navr{margin-left:auto;display:flex;gap:clamp(12px,2cqw,28px);align-items:center;font-size:clamp(0.875rem,1.3cqw,0.9688rem);font-weight:500}
.wf-h{font-weight:600;font-size:clamp(1.625rem,5cqw,3.75rem);line-height:1;letter-spacing:-.03em;margin:0;text-wrap:balance}
.wf-h b{display:block;font-weight:600;color:var(--w-acc)}
.wf-h .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}
.wf-h .w>span{display:inline-block}
.wf-sub{font-size:clamp(0.875rem,1.55cqw,1.1562rem);line-height:1.55;color:var(--w-mut);max-width:50ch;margin:clamp(12px,1.9cqw,22px) 0 clamp(16px,2.3cqw,28px)}
.wf-cta{display:flex;gap:var(--space-sm);flex-wrap:wrap}
.wf-btn{display:inline-flex;align-items:center;gap:var(--space-xs);padding:.78em 1.25em;border-radius:999px;font-weight:600;font-size:clamp(0.875rem,1.35cqw,1rem);line-height:1.1;background:linear-gradient(120deg,#FF8A4C,#FFAE4A);color:var(--w-ink);border:0;white-space:nowrap;text-decoration:none;font-family:inherit;cursor:pointer;transition:transform .15s}
.wf-btn.o{border:2px solid transparent;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(90deg,#1E9BF0,#FC814A,#FFA947) border-box;color:var(--w-yale)}
.wf-btn:active{transform:translateY(1px) scale(.985)}
.wf-nav .wf-btn{padding:.6em 1.1em}
.wf-proof{font-size:clamp(0.875rem,1.2cqw,0.9062rem);color:var(--w-mut);margin:clamp(14px,2cqw,24px) 0 0;max-width:50ch}

.wf-caret{display:inline-block;width:.55em;height:1.05em;background:var(--w-amber);vertical-align:-2px;margin-left:2px;animation:blink 1s steps(1) infinite}


/* showcase heading */
.wf-sec{padding:clamp(8px,2cqw,28px) clamp(16px,4cqw,48px) clamp(14px,2.4cqw,30px)}
.wf-sec h2{font-weight:600;font-size:clamp(1.5rem,3.7cqw,2.875rem);letter-spacing:-.03em;line-height:1.02;margin:0;text-wrap:balance}
.wf-sec p{margin:var(--space-xs) 0 0;color:var(--w-mut);max-width:52ch;font-size:clamp(0.875rem,1.4cqw,1.0625rem)}

/* shared case text */
.wf-who{font-size:clamp(0.875rem,1.2cqw,0.9062rem);color:var(--w-mut);margin:0 0 var(--space-sm);font-weight:500}
.wf-card h3{font-weight:600;font-size:clamp(1.1875rem,3cqw,2.5rem);line-height:1.08;letter-spacing:-.025em;margin:0;text-wrap:balance}
.wf-status{display:flex;align-items:center;gap:var(--space-xs);margin:clamp(10px,1.6cqw,18px) 0 0;font-size:clamp(0.875rem,1.2cqw,0.9062rem);font-weight:500}
.wf-status i{width:8px;height:8px;border-radius:50%;background:var(--dot,#2B9DDF);flex:none}
.wf-more{display:inline-block;margin-top:clamp(10px,1.5cqw,18px);font-weight:600;font-size:clamp(0.875rem,1.25cqw,0.9375rem);color:var(--w-yale);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--w-bell)}
.wf-stat{display:flex;align-items:baseline;gap:var(--space-sm);margin-top:clamp(14px,2.4cqw,30px);padding-top:clamp(12px,1.8cqw,22px);border-top:1px solid var(--w-line)}
.wf-num{font-weight:600;font-size:clamp(1.875rem,6cqw,5rem);line-height:.9;letter-spacing:-.03em;font-variant-numeric:tabular-nums;white-space:nowrap}
.wf-stat span{font-size:clamp(0.875rem,1.25cqw,0.9375rem);color:var(--w-mut);max-width:30ch;line-height:1.35}

/* A showcase: sticky stack of cards, each running its build */
.wf-stack{display:grid;padding:0 clamp(12px,3cqw,48px) clamp(20px,4cqw,56px)}
.wf-mk{height:0}
.wf-card{--tabh:32px;position:sticky;top:calc(var(--stick,56px) + 12px + var(--tabh));margin:var(--tabh) 0 16px;background:var(--tint,#fff);border:1px solid var(--w-line);border-radius:clamp(20px,2.6cqw,34px);padding:clamp(16px,3.2cqw,46px);display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(14px,3cqw,52px);align-items:center;box-shadow:0 -14px 40px -30px rgba(52,73,102,.5)}
.wf-stack.js-scroll .wf-card{margin-bottom:32svh;min-height:min(520px,calc(100svh - var(--stick,56px) - 170px))}
.wf-stack.js-scroll .wf-card:last-of-type{margin-bottom:26svh}
/* folder tabs: every card sticks at the same line, so the tabs of the ones underneath stay readable */
.wf-tab{position:absolute;bottom:100%;left:calc(clamp(20px,2.6cqw,34px) + var(--i,0)*clamp(96px,13.4cqw,176px));height:var(--tabh);margin-bottom:-1px;padding:0 clamp(10px,1.4cqw,18px);display:flex;align-items:center;border-radius:12px 12px 0 0;background:var(--tint,#fff);border:1px solid var(--w-line);border-bottom:0;font-size:clamp(0.875rem,1.15cqw,0.875rem);font-weight:600;white-space:nowrap;transition:color .3s}
.wf-card.is-under .wf-tab{color:var(--w-mut)}
.wf-flow{min-width:0}
.wf-steps{--ic:clamp(3.25rem,7.2cqw,5.75rem);position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-xs)}
.wf-track{position:absolute;left:12.5%;right:12.5%;top:calc(var(--ic)/2 - 1.5px);height:3px;background:var(--w-line);border-radius:2px}
.wf-track u{position:absolute;inset:0;background:linear-gradient(90deg,#1E9BF0,#FC814A,#FFA947);border-radius:2px;transform-origin:0 50%}
.wf-track b{position:absolute;inset:0;transform:translateX(100%)}
.wf-track b::after{content:"";position:absolute;top:50%;left:0;width:13px;height:13px;margin:-6.5px 0 0 -6.5px;border-radius:50%;background:#fff;border:3px solid var(--w-coral)}
.wf-chip{display:grid;justify-items:center;align-content:start;gap:var(--space-xs);text-align:center;font-size:clamp(0.875rem,1.15cqw,0.875rem);line-height:1.25;font-weight:500;position:relative}


/* closing: consultation form */
.wf-close{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(18px,4cqw,60px);padding:clamp(28px,6cqw,88px) clamp(16px,4cqw,48px);align-items:center;border-top:1px solid var(--w-line)}
.wf-seal{width:clamp(88px,11cqw,136px)}
.wf-seal svg{width:100%;height:auto;display:block}
.wf-close h2{font-weight:600;font-size:clamp(1.5rem,3.8cqw,2.875rem);letter-spacing:-.03em;line-height:1.02;margin:clamp(12px,2cqw,22px) 0 10px;text-wrap:balance}
.wf-close p{margin:0;color:var(--w-mut);max-width:44ch;font-size:clamp(0.875rem,1.4cqw,1.0625rem)}
.wf-form{display:grid;gap:var(--space-sm);background:#fff;border:1px solid var(--w-line);border-radius:clamp(16px,2.2cqw,28px);padding:clamp(16px,2.6cqw,32px);min-width:0}
.wf-field{display:grid;gap:var(--space-xs);font-size:0.875rem;font-weight:600}
.wf-field input,.wf-field textarea{font:inherit;font-weight:400;font-size:1rem;color:var(--w-yale);background:#F5F8FB;border:1.5px solid var(--w-line);border-radius:12px;padding:var(--space-sm) var(--space-sm);width:100%;color-scheme:light}
.wf-field textarea{min-height:84px;resize:vertical}
.wf-field input:focus-visible,.wf-field textarea:focus-visible{outline:2px solid var(--w-bell);outline-offset:1px}
.wf-form .wf-btn{justify-self:start;font-size:0.9375rem}

@container wf (max-width:700px){
  .wf-h{font-size:clamp(1.625rem,7.4cqw,2.75rem)}
}
@container wf (max-width:520px){
  .wf-card,.wf-close{grid-template-columns:minmax(0,1fr)}
  .wf-stack.js-scroll .wf-card{min-height:0}
  .wf-navlink{display:none}
  .wf-tab{left:clamp(20px,2.6cqw,34px)}
  .wf-card.is-under .wf-tab{visibility:hidden}
}


/* ===== Site layer: base, nav, footer, /work, form states ===== */
@font-face{font-family:'Chillax';src:url(/assets/fonts/chillax-200-700.woff2) format('woff2');font-weight:200 700;font-display:swap}
@font-face{font-family:'Azeret Mono';src:url(/assets/fonts/azeret-mono-100-900.woff2) format('woff2');font-weight:100 900;font-display:swap}
@keyframes blink{50%{opacity:0}}
*{box-sizing:border-box}
:root{--stick:68px;color-scheme:light}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--stick) + 16px)}
body{margin:0;overflow-x:clip;background:#F6F9FC;color:#344966;font-family:'Chillax',system-ui,-apple-system,'Segoe UI',sans-serif;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:2px solid #344966;outline-offset:3px;border-radius:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:-999px;top:10px;z-index:100;background:#344966;color:#fff;padding:var(--space-sm) var(--space-md);border-radius:10px;font-weight:600}
.skip:focus{left:16px}
.page{max-width:1320px;margin:0 auto;container:wf / inline-size;font-size:1rem;background:transparent}

/* nav */
.site-nav{position:sticky;top:0;z-index:50;transition:background-color .3s}
.site-nav.scrolled{background:rgba(246,249,252,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.site-nav::after{content:"";position:absolute;left:50%;bottom:0;width:100vw;height:1px;transform:translateX(-50%);background:var(--w-line);opacity:0;transition:opacity .3s}
.site-nav.scrolled::after{opacity:1}
.site-nav .wf-nav{padding-block:var(--space-sm)}
.wf-brand{text-decoration:none}
.wf-brand svg{width:clamp(36px,3.8cqw,48px);height:auto;display:block;flex:none}
.wf-navlink{text-decoration:none;font-weight:500}
.wf-navlink[aria-current="page"]{text-decoration:underline;text-underline-offset:5px;text-decoration-color:var(--w-bell);text-decoration-thickness:2px}
.wf-btn.o[aria-current="page"]{background:var(--w-yale);color:#fff}




/* footer */
.site-foot{display:flex;flex-wrap:wrap;gap:var(--space-md) var(--space-xl);align-items:center;padding:clamp(24px,4cqw,48px) clamp(16px,4cqw,48px);border-top:1px solid var(--w-line);font-size:0.9062rem;color:var(--w-mut);margin-top:clamp(28px,5cqw,72px)}
.site-foot p{margin:0}
.site-foot nav{display:flex;gap:var(--space-md);margin-left:auto}
.site-foot a{text-underline-offset:4px}
.wf-seal.small{width:64px;flex:none}
.foot-mail{font-weight:500;color:var(--w-yale);user-select:all}

/* form */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.wf-fine{margin:0;font-size:0.875rem;color:var(--w-mut)}
.wf-form output{font-size:0.9062rem;font-weight:500;line-height:1.45;min-height:1.4em;display:block}
.wf-form output[data-state="ok"]{color:#1E7A4E}
.wf-form output[data-state="err"]{color:#B4431F}
.wf-form output b{user-select:all;font-weight:600}
.wf-form button[disabled]{opacity:.6;cursor:progress}
.wf-field input[aria-invalid="true"],.wf-field textarea[aria-invalid="true"]{border-color:#B4431F}
.wf-close.solo{border-top:0;align-items:start;padding-top:clamp(28px,5cqw,72px)}
.wf-close.solo .wf-h{font-size:clamp(1.75rem,4.4cqw,3.375rem);margin-top:clamp(14px,2cqw,24px)}
.next{margin:clamp(16px,2.4cqw,28px) 0 0;padding:0 0 0 1.2em;color:var(--w-mut);line-height:1.8;font-size:clamp(0.875rem,1.4cqw,1.0625rem)}

/* /work */
.wk-head{padding:clamp(28px,5cqw,72px) clamp(16px,4cqw,48px) clamp(8px,1.6cqw,20px)}
.wk-head .wf-h{max-width:20ch}
.wf-flow{overflow-x:clip}
.wk-head .wf-sub{margin-bottom:0}
.wk-tabs{position:sticky;top:var(--stick);z-index:20;display:flex;gap:var(--space-xs);overflow-x:auto;padding:10px clamp(16px,4cqw,48px);background:rgba(246,249,252,.9);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);scrollbar-width:none}
.wk-tabs::-webkit-scrollbar{display:none}
.wk-tabs a{flex:none;padding:var(--space-xs) var(--space-md);border-radius:999px;border:1px solid var(--w-line);font-size:0.875rem;font-weight:500;text-decoration:none;white-space:nowrap;transition:background .2s,color .2s}
.wk-tabs a[aria-current="true"]{background:var(--w-yale);color:#fff;border-color:var(--w-yale)}
.case{--tabh:32px;position:relative;margin:calc(clamp(24px,4.4cqw,64px) + var(--tabh)) clamp(12px,3cqw,48px) 0;background:var(--tint,#fff);border:1px solid var(--w-line);border-radius:clamp(20px,2.6cqw,34px);padding:clamp(18px,4cqw,56px);scroll-margin-top:calc(var(--stick) + 100px)}
.case .wf-tab{--i:0}
.case-top{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(16px,4cqw,60px);align-items:center}
.case h2{font-weight:600;font-size:clamp(1.5rem,3.6cqw,2.875rem);line-height:1.04;letter-spacing:-.03em;margin:0 0 var(--space-md);text-wrap:balance}
.case h2 .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}
.case h2 .w>span{display:inline-block}
.case .lede{font-size:clamp(0.9375rem,1.5cqw,1.1562rem);line-height:1.6;color:var(--w-mut);margin:0;max-width:60ch}
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-md) var(--space-lg);margin:clamp(18px,3cqw,38px) 0 0;padding:clamp(14px,2cqw,22px) 0 0;border-top:1px solid var(--w-line)}
.facts dt{font-size:0.875rem;color:var(--w-mut);font-weight:500;margin-bottom:var(--space-2xs)}
.facts dd{margin:0;font-size:0.9375rem;font-weight:500;line-height:1.35}
.case-body{display:grid;gap:clamp(22px,3.4cqw,46px);margin-top:clamp(22px,4cqw,54px)}
.blk{display:grid;grid-template-columns:minmax(0,.3fr) minmax(0,1fr);gap:10px clamp(16px,3cqw,44px)}
.blk>h3{font-size:clamp(0.875rem,1.2cqw,0.9375rem);font-weight:600;color:var(--w-mut);margin:var(--space-2xs) 0 0}
.blk .big{font-weight:600;font-size:clamp(1.1875rem,2.3cqw,1.75rem);line-height:1.15;letter-spacing:-.02em;margin:0 0 var(--space-sm);text-wrap:balance;max-width:30ch}
.blk p{margin:0 0 var(--space-sm);max-width:64ch;line-height:1.65;font-size:clamp(0.9375rem,1.4cqw,1.0625rem)}
.blk p:last-child{margin-bottom:0}
.steps-ol{list-style:none;margin:var(--space-md) 0 0;padding:0;display:grid;gap:var(--space-md);counter-reset:s}
.steps-ol li{display:grid;grid-template-columns:var(--st) minmax(0,1fr);gap:2px var(--space-md);counter-increment:s;align-items:start}
.steps-ol b{font-weight:600;line-height:1.3;align-self:end}
.steps-ol span{color:var(--w-mut);line-height:1.6;max-width:62ch;font-size:clamp(0.9375rem,1.4cqw,1.0625rem)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:var(--space-md) var(--space-lg);margin-top:var(--space-md);padding-top:18px;border-top:1px solid var(--w-line)}
.stats b{display:block;font-weight:600;font-size:clamp(1.75rem,4cqw,3.25rem);letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.stats span{font-size:0.875rem;color:var(--w-mut)}
.notes{margin:0;padding:0;list-style:none;display:grid;gap:var(--space-xs);max-width:64ch}
.notes li{padding-left:20px;position:relative;line-height:1.5;font-size:clamp(0.9375rem,1.4cqw,1.0625rem)}
.notes li::before{content:"";position:absolute;left:0;top:.6em;width:7px;height:7px;border-radius:50%;background:var(--w-bell)}
.wk-cta{margin:clamp(28px,5cqw,72px) clamp(12px,3cqw,48px) 0;padding:clamp(24px,5cqw,64px);border-radius:clamp(20px,2.6cqw,34px);background:radial-gradient(70% 120% at 0 0,#CFE8FA 0,transparent 60%),linear-gradient(120deg,#FFE3CC,#FFD9A8);color:var(--w-ink);display:grid;gap:var(--space-sm);justify-items:start}
.wk-cta h2{font-weight:600;font-size:clamp(1.5rem,3.6cqw,2.875rem);letter-spacing:-.03em;line-height:1.04;margin:0}
.wk-cta p{margin:0 0 var(--space-sm);font-size:clamp(0.9375rem,1.5cqw,1.125rem)}
.wk-cta .wf-btn{background:var(--w-yale);color:#fff}
.plain{padding:clamp(40px,9cqw,140px) clamp(16px,4cqw,48px);display:grid;gap:var(--space-2xs);justify-items:start}

@container wf (max-width:620px){
  .case-top{grid-template-columns:minmax(0,1fr)}
  .case:nth-of-type(even) .case-top>.wf-flow{order:0}
}
@container wf (max-width:760px){
  .blk{grid-template-columns:minmax(0,1fr)}
  .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .site-foot nav{margin-left:0}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .wf-caret{animation:none}
  .wf-tab,.site-nav,.site-nav::after{transition:none}
  .me-float,.orbit-spin,.orbit-spin svg,.stage-glow{animation:none}
}

/* ===== Hero: the cutout floats out of the glowing ring, the six builds orbit behind him ===== */
.hero{position:relative;overflow-x:clip;display:grid;grid-template-columns:minmax(0,1.36fr) minmax(0,1fr);gap:clamp(12px,3cqw,48px);align-items:center;padding:clamp(12px,2.4cqw,36px) clamp(16px,4cqw,48px) clamp(28px,5cqw,76px)}
/* the Final B glow sits behind the top of every page, full width, and never adds sideways scroll */
body::before{content:"";position:absolute;inset:0 0 auto;height:min(940px,120vh);z-index:-1;pointer-events:none;background:
  radial-gradient(44% 64% at 16% 10%,rgba(126,199,250,.6) 0,transparent 70%),
  radial-gradient(42% 66% at 84% 30%,rgba(255,184,138,.72) 0,transparent 70%),
  radial-gradient(48% 46% at 56% 100%,rgba(255,216,160,.78) 0,transparent 72%)}
body{position:relative}
.hero .wf-h{font-size:clamp(1.75rem,3.8cqw,3.125rem)}
.hero-copy{min-width:0}
.stage{position:relative;width:100%;max-width:600px;aspect-ratio:1/1.02;justify-self:end;isolation:isolate}
.stage-glow{position:absolute;inset:8% 3% 2%;border-radius:50%;z-index:0;background:radial-gradient(circle at 50% 50%,#FFC86E 0,#FF9C50 32%,rgba(252,129,74,.6) 50%,rgba(252,129,74,0) 72%);filter:blur(14px);animation:breathe 9s ease-in-out infinite}
.stage-ring{position:absolute;left:8%;top:9%;width:84%;height:auto;z-index:1;overflow:visible}
.orbit{position:absolute;left:0;top:1%;width:100%;aspect-ratio:1;z-index:3}
.orbit-spin{position:absolute;inset:0;animation:spin 90s linear infinite}
.orbit-spin span{--s:clamp(38px,4.6cqw,58px);position:absolute;left:calc(50% + 49.5%*cos(var(--a)) - var(--s)/2);top:calc(50% + 49.5%*sin(var(--a)) - var(--s)/2);width:var(--s);height:var(--s);border-radius:50%;background:#fff;color:var(--w-yale);display:grid;place-items:center;box-shadow:0 12px 26px -14px rgba(27,38,56,.5),0 0 0 1px rgba(52,73,102,.08)}
.orbit-spin svg{width:48%;height:48%;animation:spin 90s linear infinite reverse}
.me{position:absolute;left:7%;bottom:0;width:86%;z-index:2}
.me-float{animation:floaty 7s ease-in-out infinite}
.me img{display:block;width:100%;height:auto;-webkit-mask-image:linear-gradient(to bottom,#000 82%,transparent 99%);mask-image:linear-gradient(to bottom,#000 82%,transparent 99%);filter:drop-shadow(0 26px 28px rgba(176,74,16,.26))}
.chip-term{position:absolute;left:-3%;bottom:10%;z-index:4;background:var(--w-ink);color:#C9D6E5;font-family:'Azeret Mono','Chillax',sans-serif;font-size:clamp(0.875rem,1.12cqw,0.875rem);line-height:1.8;padding:clamp(10px,1.3cqw,16px) clamp(12px,1.6cqw,20px);border-radius:clamp(12px,1.5cqw,18px);box-shadow:0 24px 40px -22px rgba(27,38,56,.75);white-space:nowrap;min-width:20ch}
.chip-term b{color:var(--w-amber);font-weight:500}
@keyframes floaty{50%{transform:translateY(-12px)}}
@keyframes breathe{50%{transform:scale(1.05)}}
@keyframes spin{to{transform:rotate(360deg)}}
@container wf (max-width:760px){
  .hero{grid-template-columns:minmax(0,1fr)}
  .hero .wf-h{font-size:clamp(1.75rem,8cqw,2.875rem)}
  .stage{max-width:430px;justify-self:center;margin-top:var(--space-xs)}
  .orbit{left:7%;top:7%;width:86%}
  .chip-term{left:0}
}

/* ===== Polish layer (2026-09-30 tool audits): scale tokens, type, touch, states, transitions ===== */
:root{--space-2xs:4px;--space-xs:8px;--space-sm:12px;--space-md:16px;--space-lg:24px;--space-xl:32px;--space-2xl:48px;--space-3xl:64px;--space-4xl:96px;
  --ease-out:cubic-bezier(.23,1,.32,1);--ease-in-out:cubic-bezier(.77,0,.175,1)}

/* type: body copy is a fixed size and never under 1rem; only headings are fluid */
.wf-sub{font-size:1.0625rem;text-wrap:pretty}
@container wf (min-width:760px){.wf-sub{font-size:1.125rem}}
.blk p,.case .lede,.steps-ol span,.notes li{font-size:1.0625rem;text-wrap:pretty}
.wf-close p,.wf-sec p,.wk-cta p{font-size:1.0625rem;text-wrap:pretty}
.wf-chip{font-size:.8125rem}
.chip-term{font-size:clamp(.75rem,1.12cqw,.875rem)}

/* layout: even case studies flip, so six in a row never read as one template */
.case:nth-of-type(even) .case-top{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)}
.case:nth-of-type(even) .case-top>.wf-flow{order:-1}
.wf-tab{left:calc(clamp(20px,2.6cqw,34px) + var(--i,0)*clamp(150px,15cqw,192px))}
@container wf (max-width:980px){
  .wf-tab{left:clamp(20px,2.6cqw,34px)}
  .wf-card.is-under .wf-tab{visibility:hidden}
}
.page{padding-inline:env(safe-area-inset-left,0px) env(safe-area-inset-right,0px)}
.site-nav{padding-top:env(safe-area-inset-top,0px);view-transition-name:site-nav}

/* touch: no double-tap delay, a deliberate tap colour, 44px targets */
a,button,input,textarea,label{touch-action:manipulation}
a,button{-webkit-tap-highlight-color:rgba(52,73,102,.12)}
.wk-tabs a{min-height:44px;display:inline-flex;align-items:center;transition:background-color .2s ease,color .2s ease,border-color .2s ease,transform .12s var(--ease-out)}
.wf-navlink{padding-block:var(--space-sm)}
.wf-brand{min-height:44px}
.wf-more{display:inline-flex;align-items:center;gap:.4em;min-height:44px;margin-top:var(--space-2xs);transition:text-decoration-color .2s ease}
.wf-more .arr{display:inline-grid;width:1em;height:1em;transition:transform .25s var(--ease-out)}
.wf-more .arr svg{width:100%;height:100%}
.site-foot a{display:inline-block;padding-block:var(--space-sm)}
.wf-btn{min-height:44px;transition:transform .15s var(--ease-out),filter .15s ease,box-shadow .2s ease}

/* states: hover only where there is a real pointer; press feedback everywhere */
@media (hover:hover) and (pointer:fine){
  .wf-btn:hover{filter:brightness(1.06);box-shadow:0 12px 22px -14px rgba(232,104,32,.9)}
  .wf-btn.o:hover{filter:none;box-shadow:0 12px 22px -16px rgba(30,155,240,.9)}
  .wf-navlink:hover{text-decoration:underline;text-underline-offset:5px;text-decoration-color:var(--w-bell);text-decoration-thickness:2px}
  .wf-more:hover{text-decoration-color:var(--w-coral)}
  .wf-more:hover .arr{transform:translateX(4px)}
  .wk-tabs a:hover{border-color:var(--w-yale)}
  .site-foot a:hover{color:var(--w-yale)}
}
.wf-more:active,.wf-navlink:active{transform:translateY(1px)}
.wk-tabs a:active{transform:scale(.97)}

/* form: a field edge you can see, and the result arrives instead of snapping in */
.wf-field input,.wf-field textarea{border-color:rgba(52,73,102,.55)}
.wf-form output[data-state]{animation:rise-in .35s var(--ease-out)}
@keyframes rise-in{from{opacity:0;transform:translateY(6px)}}

/* hero motion can be paused, and stops by itself when the hero is off screen */
.motion-toggle{position:absolute;right:0;bottom:1%;z-index:5;width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.9);color:var(--w-yale);display:grid;place-items:center;box-shadow:0 0 0 1px rgba(52,73,102,.16);cursor:pointer}
.motion-toggle svg{width:16px;height:16px}
.stage.paused .me-float,.stage.paused .orbit-spin,.stage.paused .orbit-spin svg,.stage.paused .stage-glow,.stage.paused .wf-caret,
.stage.away .me-float,.stage.away .orbit-spin,.stage.away .orbit-spin svg,.stage.away .stage-glow,.stage.away .wf-caret{animation-play-state:paused}

/* moving between pages cross-fades, and the nav holds still */
@view-transition{navigation:auto}
::view-transition-group(root){animation-duration:.26s}
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  .wf-form output[data-state]{animation:none}
  .wf-btn,.wf-more .arr,.wk-tabs a{transition:none}
  .motion-toggle{display:none}
}

/* ===== Iconography: duotone icons on tinted tiles, an emblem per case study, icons on tabs, facts and steps ===== */
.c1{--tint:#DCEEFD;--acc:#86C9F8}
.c2{--tint:#FFE3D3;--acc:#FF9E70}
.c3{--tint:#FFEFCC;--acc:#FFC25E}
.c4{--tint:#E1E8F2;--acc:#AEBED6}
.fa{fill:var(--acc,#FFC25E)}
.wf-ic,.st-ic{position:relative;display:grid;place-items:center;border-radius:30%;color:var(--w-yale);box-shadow:inset 0 0 0 1.5px var(--w-line);isolation:isolate}
.wf-ic{width:var(--ic);height:var(--ic)}
.ic-bg{position:absolute;inset:0;border-radius:inherit;background:var(--tint);z-index:-1}
.wf-ic svg,.st-ic svg{width:56%;height:56%}

/* the emblem: one big icon in the brand ring, with three of its steps in orbit */
.emb{--e:clamp(5.25rem,10.5cqw,8.75rem);position:relative;width:var(--e);height:var(--e);margin:0 0 var(--space-lg) var(--space-xs);border-radius:50%;border:clamp(4px,.5cqw,6px) solid transparent;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(135deg,#1E9BF0,#FC814A 58%,#FFA947) border-box;box-shadow:0 18px 30px -22px rgba(232,104,32,.75)}
.emb-ic{position:absolute;inset:14%;border-radius:50%;display:grid;place-items:center;background:var(--tint);color:var(--w-yale)}
.emb-ic svg{width:58%;height:58%}
.emb-sat{--s:calc(var(--e)*.34);position:absolute;left:calc(50% + 53%*cos(var(--a)) - var(--s)/2);top:calc(50% + 53%*sin(var(--a)) - var(--s)/2);width:var(--s);height:var(--s);border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--w-yale);box-shadow:0 8px 16px -10px rgba(27,38,56,.55),0 0 0 1px rgba(52,73,102,.1)}
.emb-sat svg{width:60%;height:60%}

/* tabs, facts and build steps carry their own icons */
.wf-tab svg,.wk-tabs a svg{width:1.15em;height:1.15em;flex:none;margin-right:.45em}
.wk-tabs a[aria-current="true"] svg{color:#fff}
.facts dt{display:flex;align-items:center;gap:.45em}
.facts dt svg{width:1.2em;height:1.2em;flex:none;color:var(--w-bell)}
.steps-ol{--st:clamp(2.75rem,4.4cqw,3.5rem)}
.st-ic{width:var(--st);height:var(--st);grid-row:span 2}
.st-ic::after{content:counter(s);position:absolute;right:-5px;top:-5px;min-width:1.35rem;height:1.35rem;border-radius:999px;background:var(--w-yale);color:#fff;font-size:.75rem;font-weight:600;display:grid;place-items:center;font-variant-numeric:tabular-nums}
.orbit-spin span{color:var(--w-yale)}
.case-links{display:flex;flex-wrap:wrap;gap:0 var(--space-lg);margin:0}
@container wf (max-width:520px){
  .emb{margin-bottom:var(--space-md)}
  .wf-steps{gap:var(--space-2xs)}
}

/* sticky bars paint edge to edge, so the glow never shows as a strip beside them */
.site-nav.scrolled{box-shadow:0 0 0 100vmax rgba(246,249,252,.86);clip-path:inset(0 -100vmax)}
.wk-tabs{box-shadow:0 0 0 100vmax rgba(246,249,252,.9);clip-path:inset(0 -100vmax)}

/* home folder tabs sit in one row per card; the other five are invisible spacers, so long names never collide */
.wf-tabs{position:absolute;bottom:100%;left:clamp(20px,2.6cqw,34px);right:clamp(20px,2.6cqw,34px);display:flex;gap:var(--space-2xs);margin-bottom:-1px;pointer-events:none}
.wf-tabs .wf-tab{position:static;flex:none;margin:0}
.wf-tab.g{visibility:hidden}
@container wf (max-width:1080px){
  .wf-tab.g{display:none}
}

/* optional-field hint inside a form label */
.wf-field small{font-weight:400;font-size:0.8125rem;color:var(--w-mut)}

/* ===== Podcast Autopilot page layer. Sits on the WWMS brand + site layers; everything here is this page's own. ===== */
.pa-mark{display:grid;place-items:center;width:clamp(34px,3.6cqw,44px);height:clamp(34px,3.6cqw,44px);border-radius:50%;color:#fff;background:linear-gradient(135deg,#1E9BF0,#FC814A 58%,#FFA947);flex:none}
.pa-mark svg{width:56%;height:56%}
.pa-sec{padding-top:clamp(20px,4cqw,56px)}
.pa-sec .wf-sec p{max-width:60ch}
.engine .wf-sec p{max-width:66ch;font-size:1.125rem;line-height:1.65;margin-top:var(--space-md)}

/* hero: the cutout in a 16:9 frame that a video replaces later (same slot, same size) */
.vid{position:relative;width:100%;max-width:620px;aspect-ratio:16/10;justify-self:end;border-radius:clamp(20px,2.6cqw,34px);overflow:hidden;isolation:isolate;background:linear-gradient(160deg,#DCEEFD,#FFE3D3 60%,#FFEFCC);box-shadow:0 30px 60px -36px rgba(176,74,16,.45),0 0 0 1px rgba(52,73,102,.1)}
.vid-glow{position:absolute;inset:18% 12% -10%;border-radius:50%;background:radial-gradient(circle at 50% 60%,#FFC86E 0,#FF9C50 34%,rgba(252,129,74,.55) 52%,rgba(252,129,74,0) 72%);filter:blur(16px)}
.vid img{position:absolute;left:50%;bottom:-6%;width:72%;transform:translateX(-50%);-webkit-mask-image:linear-gradient(to bottom,#000 84%,transparent 99%);mask-image:linear-gradient(to bottom,#000 84%,transparent 99%);filter:drop-shadow(0 22px 24px rgba(176,74,16,.24))}
.vid video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vid-tag{position:absolute;left:14px;top:14px;padding:7px 13px;border-radius:999px;background:rgba(27,38,56,.8);color:#fff;font-size:.8125rem;font-weight:500;border:1px dashed rgba(255,255,255,.55)}
.vid-play{position:absolute;right:16px;bottom:16px;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.92);color:var(--w-ink);box-shadow:0 10px 24px -10px rgba(0,0,0,.5)}
.vid-play svg{width:46%;height:46%;margin-left:6%}

/* three ways to work */
.ways{--ic:clamp(2.75rem,4.4cqw,3.5rem);list-style:none;margin:0;padding:0 clamp(16px,4cqw,48px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-md)}
.ways li{background:#fff;border:1px solid var(--w-line);border-radius:clamp(16px,2.2cqw,28px);padding:clamp(16px,2.4cqw,28px);display:grid;gap:var(--space-sm);align-content:start}
.ways h3{font-weight:600;font-size:clamp(1.125rem,1.8cqw,1.375rem);letter-spacing:-.02em;line-height:1.15;margin:var(--space-xs) 0 0}
.ways p{margin:0;color:var(--w-mut);line-height:1.6;font-size:1.0625rem;text-wrap:pretty}

/* per episode: the steps list, two columns when there is room */
.steps-ol.ep{padding:0 clamp(16px,4cqw,48px);grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-lg) var(--space-2xl);margin-top:var(--space-sm)}
.pa-stats{margin:0 clamp(16px,4cqw,48px) clamp(18px,3cqw,36px);border-top:0;padding-top:0}

/* the timeline */
.tl{list-style:none;margin:0;padding:0 clamp(16px,4cqw,48px);display:grid;gap:clamp(24px,4cqw,56px)}
.tl-era{display:grid;gap:var(--space-md);padding-top:clamp(18px,3cqw,36px);border-top:1px solid var(--w-line)}
.tl-head{display:flex;align-items:baseline;gap:var(--space-md)}
.tl-year{font-weight:600;font-size:clamp(1.75rem,4cqw,3.25rem);letter-spacing:-.03em;line-height:1;color:var(--w-acc);font-variant-numeric:tabular-nums;flex:none}
.tl-head h3{font-weight:600;font-size:clamp(1.25rem,2.4cqw,1.875rem);letter-spacing:-.02em;line-height:1.1;margin:0}
.tl-role{margin:var(--space-2xs) 0 0;color:var(--w-mut);font-weight:500;font-size:.9375rem}
.tl-blurb{margin:0;max-width:64ch;line-height:1.65;font-size:1.0625rem;text-wrap:pretty}
.tl-vids{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-md)}
.yt{position:relative;display:block;aspect-ratio:16/9;border-radius:clamp(12px,1.6cqw,20px);overflow:hidden;background:#1B2638;color:#fff;text-decoration:none;isolation:isolate;box-shadow:0 0 0 1px rgba(52,73,102,.12)}
.yt img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease-out)}
.yt-play{position:absolute;left:50%;top:50%;width:clamp(44px,5cqw,64px);height:clamp(44px,5cqw,64px);transform:translate(-50%,-50%);border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.92);color:var(--w-ink);box-shadow:0 10px 24px -10px rgba(0,0,0,.6);transition:transform .25s var(--ease-out)}
.yt-play svg{width:46%;height:46%;margin-left:6%}
.yt-t{position:absolute;left:0;right:0;bottom:0;padding:clamp(28px,3cqw,36px) var(--space-sm) var(--space-sm);font-size:.875rem;font-weight:500;line-height:1.3;background:linear-gradient(to top,rgba(27,38,56,.9),rgba(27,38,56,0));text-wrap:pretty}
.tl-vids iframe{width:100%;aspect-ratio:16/9;height:auto;border:0;border-radius:clamp(12px,1.6cqw,20px);background:#000}
.tl-stat{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-xs) var(--space-lg);margin:0;font-weight:500}
.tl-stat .wf-more{margin-top:0}
.tl-q{margin:0;padding:var(--space-md) var(--space-lg);border-left:3px solid var(--w-coral);background:#fff;border-radius:0 16px 16px 0;max-width:60ch}
.tl-q p{margin:0 0 var(--space-xs);font-size:1.125rem;line-height:1.5}
.tl-q cite{font-style:normal;color:var(--w-mut);font-size:.9375rem}

/* packages */
.pks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-md);padding:0 clamp(16px,4cqw,48px)}
.pk{background:var(--tint,#fff);border:1px solid var(--w-line);border-radius:clamp(20px,2.6cqw,34px);padding:clamp(20px,3cqw,40px);display:grid;gap:var(--space-sm);align-content:start}
.pk h3{font-weight:600;font-size:clamp(1.375rem,2.6cqw,2rem);letter-spacing:-.025em;line-height:1.08;margin:0}
.pk-price{margin:0;font-size:1.0625rem;color:var(--w-mut)}
.pk-price b{font-weight:600;font-size:clamp(2rem,4.4cqw,3.5rem);letter-spacing:-.03em;line-height:1;color:var(--w-ink);font-variant-numeric:tabular-nums;margin-right:.25em}
.pk-lead{margin:0;font-weight:500;font-size:1.0625rem}
.pk ul{list-style:none;margin:var(--space-xs) 0 var(--space-sm);padding:0;display:grid;gap:var(--space-xs)}
.pk li{display:flex;gap:.6em;align-items:flex-start;line-height:1.5;font-size:1.0625rem;text-wrap:pretty}
.pk li svg{width:1.25em;height:1.25em;flex:none;color:var(--w-acc);margin-top:.15em}
.pk .wf-btn{justify-self:start}
.pa-who{margin:var(--space-lg) clamp(16px,4cqw,48px) 0;max-width:66ch;color:var(--w-mut);line-height:1.6;font-size:1.0625rem;text-wrap:pretty}
.pa-cal{margin-top:var(--space-md)}

@media (hover:hover) and (pointer:fine){
  .yt:hover img{transform:scale(1.04)}
  .yt:hover .yt-play{transform:translate(-50%,-50%) scale(1.08)}
}
@container wf (max-width:900px){
  .ways,.tl-vids{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@container wf (max-width:760px){
  .vid{max-width:none;justify-self:stretch;margin-top:var(--space-xs)}
  .steps-ol.ep,.pks{grid-template-columns:minmax(0,1fr)}
}
@container wf (max-width:560px){
  .ways,.tl-vids{grid-template-columns:minmax(0,1fr)}
  .tl-head{flex-direction:column;gap:var(--space-xs)}
}
@media (prefers-reduced-motion:reduce){
  .yt img,.yt-play{transition:none}
}