/* ==========================================================================
   FRANNZI LUX — style.css (business edition)
   Same identity as before: themes, floating header, circular menu, rounded
   sheets, restrained motion. New in this version: project case studies,
   screenshot frames, work preview, message builder and service chapters.

   Hooks set by app.js: html[data-theme], html.js, html.js-ready, html.menu-open,
   body.sidebar-open, html.theme-transition, #main.is-swapping (page change),
   [data-reveal].is-visible, .line>.line__inner(--i), [data-scroll-words] .word.is-lit,
   .direction.is-hscroll, #sidebar(--ox,--oy), .site-header.is-scrolled/.is-hidden.
   ========================================================================== */

/* 01 TOKENS */
:root{
--font-sans:"Inter Tight","Helvetica Neue",Arial,system-ui,sans-serif;
--font-serif:"Instrument Serif","Iowan Old Style","Times New Roman",serif;
--font-mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
--fs-body:clamp(1rem,.96rem + .2vw,1.0625rem);--fs-label:.72rem;
--fs-display-m:clamp(2.3rem,7vw,6.5rem);--fs-display-l:clamp(2.6rem,10.5vw,10.5rem);--fs-hero:clamp(2.4rem,9.4vw,10rem);
--max:1480px;--gutter:clamp(1.25rem,4vw,3rem);--pad-x:max(var(--gutter),calc((100vw - var(--max))/2));
--gap:clamp(1rem,2.4vw,2rem);--sheet:clamp(.5rem,1.4vw,1.25rem);--hdr-x:clamp(.75rem,2.5vw,2rem);--header-h:5.75rem;
--offset:clamp(1rem,10vw,14rem);
--r-s:.9rem;--r-m:1.25rem;--r-l:clamp(1.25rem,3vw,2.25rem);
--ease:cubic-bezier(.65,0,.35,1);--ease-out:cubic-bezier(.16,1,.3,1);--ease-io:cubic-bezier(.76,0,.24,1);
--t-fast:.2s;--t-med:.45s;
--z-header:80;--z-menu:100;--z-progress:120;--z-skip:200;
}
:root,html[data-theme="dark"]{
color-scheme:dark;
--bg:#070a11;--surface:#0d121c;--surface-2:#151b29;
--text:#eef2fb;--text-2:#a3adc2;--text-3:#8691a8;
--border:rgba(238,242,251,.1);--border-strong:rgba(238,242,251,.22);
--accent:#5aa9ff;--accent-ink:#04101f;--accent-text:#6db3ff;
--inv-bg:#e9eefb;--inv-fg:#070a11;--inv-muted:#4a546b;--inv-border:rgba(7,10,17,.2);--inv-accent:#1d4fd8;
--header-bg:#0d121c;--shadow:0 8px 24px -12px rgba(0,0,0,.7);--wordmark:rgba(238,242,251,.06);
--wm-op:.1;--wm-menu:.14;
--menu-bg:#060a14;--menu-fg:#eef2fb;--menu-muted:#8f9ab1;--menu-line:rgba(238,242,251,.14);
}
html[data-theme="light"]{
color-scheme:light;
--bg:#f2f5fa;--surface:#fff;--surface-2:#e8edf6;
--text:#0a0e17;--text-2:#4a5469;--text-3:#66708a;
--border:rgba(10,14,23,.1);--border-strong:rgba(10,14,23,.22);
--accent:#1d5bf0;--accent-ink:#fff;--accent-text:#1a52d9;
--inv-bg:#0a0e17;--inv-fg:#eef2fb;--inv-muted:#a3adc2;--inv-border:rgba(238,242,251,.2);--inv-accent:#6db3ff;
--header-bg:#fff;--shadow:0 8px 24px -12px rgba(20,40,90,.28);--wordmark:rgba(10,14,23,.06);
--wm-op:.08;--wm-menu:.12;
--menu-bg:#eef2fc;--menu-fg:#0a0e17;--menu-muted:#55607a;--menu-line:rgba(10,14,23,.14);
}
html.theme-transition,html.theme-transition *,html.theme-transition *::before,html.theme-transition *::after{
transition:background-color .45s var(--ease),color .45s var(--ease),border-color .45s var(--ease),fill .45s var(--ease),stroke .45s var(--ease)!important}

/* 02 BASE */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 1rem)}
body{margin:0;min-height:100vh;font-family:var(--font-sans);font-size:var(--fs-body);line-height:1.55;color:var(--text);background:var(--bg);overflow-x:clip;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
main{transition:opacity .2s var(--ease)}
main.is-swapping{opacity:0}
main:focus{outline:none}
main,.site-footer{position:relative;z-index:1}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
::selection{background:var(--accent);color:var(--accent-ink)}
:focus-visible{outline:2px solid var(--accent-text);outline-offset:3px}

.noscript-note{max-width:46rem;margin-inline:auto;padding:3rem var(--gutter);display:grid;gap:1.25rem}
.noscript-note h1{font-size:clamp(1.8rem,5vw,2.8rem);line-height:1.1;letter-spacing:-.03em}
.noscript-note h2{margin-top:1rem;font-size:1.2rem}
.noscript-note ul{display:grid;gap:.4rem}
.noscript-note a{text-decoration:underline;text-underline-offset:.2em}

/* Logo watermark: one static fixed layer, nothing animates it */
.watermark{position:fixed;z-index:0;right:-14vmin;top:16vh;width:min(86vmin,50rem);height:min(86vmin,50rem);pointer-events:none;contain:layout paint;opacity:var(--wm-op);transform:rotate(-10deg)}
.watermark .logo{width:100%;height:100%}

/* 03 PRIMITIVES */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:fixed;top:-6rem;left:1rem;z-index:var(--z-skip);padding:.75rem 1.1rem;background:var(--accent);color:var(--accent-ink);font-weight:600;border-radius:999px;transition:top var(--t-fast) var(--ease)}
.skip-link:focus{top:1rem}
.icon{width:1.25rem;height:1.25rem;flex:none;display:block}
.logo{display:block;width:100%;height:100%}
.label{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--font-mono);font-size:var(--fs-label);font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--text-2)}
.label--muted{color:var(--text-3)}
.label__dot{position:relative;width:.45rem;height:.45rem;border-radius:50%;background:var(--accent)}
.label__dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--accent);animation:fl-pulse 2.6s var(--ease-out) infinite}
.serif{font-family:var(--font-serif);font-weight:400;letter-spacing:-.01em}
em.serif{font-style:italic;color:var(--accent-text);font-size:1.06em}
.display-m,.display-l{font-weight:500;letter-spacing:-.045em;line-height:.96}
.display-m{font-size:var(--fs-display-m)}
.display-l{font-size:var(--fs-display-l);line-height:.92}
.line{display:block;overflow:hidden;padding:.06em 0 .14em;margin-bottom:-.14em}
.line__inner{display:inline-block}
.rule{display:block;height:1px;background:var(--border-strong);transform-origin:left center}

.button{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;gap:.85rem;padding:1rem 1.5rem;border-radius:999px;font-weight:500;font-size:.95rem;line-height:1;transition:translate .4s var(--ease-out),color var(--t-med) var(--ease),border-color var(--t-med) var(--ease)}
.button::before{content:"";position:absolute;inset:0;z-index:-1;transform:translateY(101%);transition:transform .5s var(--ease)}
.button .icon{width:1.1rem;height:1.1rem;transition:transform var(--t-med) var(--ease-out)}
.button:hover .icon,.button:focus-visible .icon{transform:translateX(4px)}
.button:hover::before,.button:focus-visible::before{transform:none}
.button--primary{background:var(--accent);color:var(--accent-ink)}
.button--primary::before{background:var(--text)}
.button--primary:hover,.button--primary:focus-visible{color:var(--bg)}
.button--ghost{border:1px solid var(--border-strong);color:var(--text)}
.button--ghost::before{background:var(--accent)}
.button--ghost:hover,.button--ghost:focus-visible{color:var(--accent-ink);border-color:var(--accent)}

.text-link{display:inline-block;padding-bottom:.2rem;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat,linear-gradient(var(--border-strong),var(--border-strong)) 0 100%/100% 1px no-repeat;transition:background-size .5s var(--ease),color var(--t-fast) var(--ease)}
.text-link:hover,.text-link:focus-visible{background-size:100% 1px,100% 1px}
.text-link[aria-current="page"]{color:var(--accent-text)}
.ink .text-link,.chapter--ink .text-link{background-image:linear-gradient(currentColor,currentColor),linear-gradient(var(--inv-border),var(--inv-border))}

/* Rounded sheets */
.fields,.signoff,.direction,.approach,.ink,.next,.chapter--tint,.chapter--ink{margin:var(--sheet);border-radius:var(--r-l)}
.fields,.signoff,.approach,.next,.chapter--tint{border:1px solid var(--border)}

/* Shared page patterns */
.page-head{padding:calc(var(--header-h) + clamp(2.5rem,8vw,6rem)) var(--pad-x) clamp(3rem,7vw,5.5rem);display:grid;gap:2rem}
.page-head__title{font-size:clamp(2.4rem,10.5vw,11rem)}
.page-head__title .line--offset,.hero__title .line--offset{padding-left:var(--offset)}
.page-head__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);margin-top:clamp(1rem,4vw,3rem)}
.page-head__lede{grid-column:7/13;max-width:34rem;font-size:clamp(1.05rem,1.5vw,1.3rem);line-height:1.5;color:var(--text-2)}

.ink{padding:clamp(3.5rem,9vw,8rem) var(--gutter);background:var(--inv-bg);color:var(--inv-fg)}
.ink .label{color:var(--inv-muted)}
.ink em.serif{color:var(--inv-accent)}
.ink__inner{max-width:var(--max);margin-inline:auto;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:2.5rem}
.ink__inner>.label{grid-column:1/-1}
.ink__title{grid-column:1/8}
.ink__list{grid-column:6/13;border-bottom:1px solid var(--inv-border)}
.ink__item{display:grid;grid-template-columns:3rem minmax(0,1fr);gap:1rem;padding-block:1.5rem;border-top:1px solid var(--inv-border)}
.ink__num{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.1em;color:var(--inv-accent);padding-top:.35rem}
.ink__item h3{font-size:clamp(1.3rem,2.4vw,1.9rem);font-weight:500;letter-spacing:-.03em;margin-bottom:.4rem}
.ink__item p{color:var(--inv-muted);max-width:28rem}
.ink__item .text-link{margin-top:.9rem}
.ink__cols{grid-column:5/13;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap);padding-top:clamp(1rem,3vw,2.5rem);border-top:1px solid var(--inv-border)}
.ink__col h3{font-family:var(--font-serif);font-weight:400;font-size:clamp(1.8rem,3vw,2.5rem);line-height:1;margin-bottom:1rem}
.ink__col p{color:var(--inv-muted)}

.next{padding:clamp(3.5rem,8vw,7rem) var(--gutter);background:var(--surface)}
.next__inner{max-width:var(--max);margin-inline:auto;display:grid;gap:1.75rem}
.next__text{max-width:34rem;color:var(--text-2);font-size:clamp(1.02rem,1.4vw,1.2rem)}
.next__actions{display:flex;flex-wrap:wrap;gap:1rem 1.75rem;align-items:center;margin-top:.5rem}

/* 04 PROGRESS + FLOATING HEADER */
.scroll-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:var(--z-progress);pointer-events:none}
.scroll-progress__bar{display:block;height:100%;background:var(--accent);transform:scaleX(0);transform-origin:left center}

.site-header{position:fixed;top:.75rem;left:var(--hdr-x);right:var(--hdr-x);z-index:var(--z-header);max-width:calc(var(--max) + 2rem);margin-inline:auto;transition:transform .5s var(--ease)}
.site-header.is-hidden{transform:translateY(calc(-100% - 1.5rem))}
.header-pill{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:4rem;padding:0 .6rem 0 1.1rem;background:var(--header-bg);border:1px solid var(--border);border-radius:1.5rem;box-shadow:var(--shadow);transition:border-color .4s var(--ease)}
.site-header.is-scrolled .header-pill{border-color:var(--border-strong)}

.brand{display:inline-flex;align-items:center;gap:.75rem;min-width:0}
.brand__mark{flex:none;width:2.4rem;height:2.4rem;transition:transform .7s var(--ease-out)}
.brand:hover .brand__mark,.brand:focus-visible .brand__mark{transform:rotate(-10deg) scale(1.1)}
.brand__text{font-weight:600;font-size:.9rem;letter-spacing:.16em;white-space:nowrap}
.brand__lux{color:var(--accent-text)}
.site-header__end{display:flex;align-items:center;gap:.6rem}
.site-header__end>:nth-child(2){--i:1}.site-header__end>:nth-child(3){--i:2}

.header-link{padding:.7rem 1.1rem;border:1px solid var(--border-strong);border-radius:999px;font-size:.88rem;font-weight:500;line-height:1;white-space:nowrap;transition:background-color var(--t-fast),color var(--t-fast),border-color var(--t-fast)}
.header-link:hover,.header-link:focus-visible,.header-link[aria-current="page"]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}

.theme-toggle{position:relative;flex:none;width:2.75rem;height:2.75rem;border:1px solid var(--border-strong);border-radius:999px;transition:background-color var(--t-fast),color var(--t-fast),border-color var(--t-fast)}
.theme-toggle .icon{position:absolute;top:50%;left:50%;width:1.15rem;height:1.15rem;transform:translate(-50%,-50%);transition:transform .6s var(--ease-out),opacity var(--t-med) var(--ease)}
html[data-theme="dark"] .theme-toggle .icon--moon{opacity:0;transform:translate(-50%,-50%) rotate(-90deg) scale(.5)}
html[data-theme="light"] .theme-toggle .icon--sun{opacity:0;transform:translate(-50%,-50%) rotate(90deg) scale(.5)}
.theme-toggle:hover,.theme-toggle:focus-visible{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.theme-toggle--labelled{width:auto;padding:0 1.1rem 0 2.8rem;display:inline-flex;align-items:center}
.theme-toggle--labelled .icon{left:1.4rem}
.theme-toggle__label{font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:.12em;text-transform:uppercase}

.nav-trigger{display:inline-flex;align-items:center;gap:.75rem;height:2.75rem;padding:0 1.1rem 0 1rem;background:var(--text);color:var(--bg);border-radius:999px;transition:translate .4s var(--ease-out),scale .3s var(--ease-out),background-color var(--t-fast),color var(--t-fast)}
.nav-trigger:active{scale:.94}
.nav-trigger__lines{display:grid;gap:4px;width:1.2rem}
.nav-trigger__lines span{display:block;height:1.5px;background:currentColor;border-radius:2px;transform-origin:100% 50%;transition:transform .5s var(--ease-out),opacity .3s var(--ease),transform-origin .5s}
.nav-trigger__lines span:nth-child(2){transform:scaleX(.7)}
.nav-trigger__lines span:nth-child(3){transform:scaleX(.45)}
.nav-trigger:hover .nav-trigger__lines span,.nav-trigger:focus-visible .nav-trigger__lines span{transform:scaleX(1)}
body.sidebar-open .nav-trigger__lines span{transform-origin:50% 50%}
body.sidebar-open .nav-trigger__lines span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
body.sidebar-open .nav-trigger__lines span:nth-child(2){opacity:0;transform:scaleX(0)}
body.sidebar-open .nav-trigger__lines span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
.nav-trigger:hover,.nav-trigger:focus-visible{background:var(--accent);color:var(--accent-ink)}
.nav-trigger__label{font-size:.88rem;font-weight:500;line-height:1}

/* 05 FULL-SCREEN MENU (light on layers: two clipped fills, one ring layer, one logo) */
.menu{position:fixed;inset:0;z-index:var(--z-menu);color:var(--menu-fg);visibility:hidden;pointer-events:none;contain:layout paint style;transition:visibility 0s linear 1s}
body.sidebar-open .menu{visibility:visible;pointer-events:auto;transition:visibility 0s}
.menu__wipe,.menu__bg{position:absolute;inset:0;clip-path:circle(0px at var(--ox,calc(100% - 3rem)) var(--oy,2.75rem));transition:clip-path .75s var(--ease-io)}
.menu__wipe{background:var(--accent);transition-delay:.12s}
.menu__bg{background:var(--menu-bg)}
body.sidebar-open .menu__wipe,body.sidebar-open .menu__bg{will-change:clip-path;clip-path:circle(150vmax at var(--ox,calc(100% - 3rem)) var(--oy,2.75rem))}
body.sidebar-open .menu__wipe{transition-delay:0s}
body.sidebar-open .menu__bg{transition-delay:.12s}

.menu__mark{position:absolute;right:-6vmax;bottom:-6vmax;width:42vmax;height:42vmax;pointer-events:none;opacity:0;transform:rotate(-25deg) scale(.8);transition:opacity .3s var(--ease),transform .4s var(--ease)}
body.sidebar-open .menu__mark{opacity:var(--wm-menu);transform:none;transition:opacity 1s var(--ease-out) .45s,transform 1.4s var(--ease-out) .35s}
.menu__rings{position:absolute;right:-14vmax;bottom:-14vmax;width:56vmax;height:56vmax;border-radius:50%;pointer-events:none;background:repeating-radial-gradient(circle at 50% 50%,transparent 0 5vmax,var(--menu-line) 5vmax calc(5vmax + 1px));opacity:0;transform:scale(.6);transition:opacity .3s var(--ease),transform .4s var(--ease)}
body.sidebar-open .menu__rings{opacity:1;transform:none;transition:opacity 1s var(--ease-out) .4s,transform 1.4s var(--ease-out) .4s}

.menu__inner{position:relative;height:100vh;height:100dvh;display:flex;flex-direction:column;padding:.75rem var(--hdr-x) 1.25rem;max-width:calc(var(--max) + 2rem);margin-inline:auto;overflow-y:auto;overscroll-behavior:contain}
.menu__top,.menu__aside>*,.menu__foot{opacity:0;transform:translateY(1rem);transition:opacity .25s var(--ease),transform .25s var(--ease)}
body.sidebar-open .menu__top,body.sidebar-open .menu__aside>*,body.sidebar-open .menu__foot{opacity:1;transform:none;transition:opacity .8s var(--ease-out),transform .9s var(--ease-out);transition-delay:.4s}
body.sidebar-open .menu__aside>:nth-child(2){transition-delay:.52s}
body.sidebar-open .menu__aside>:nth-child(3){transition-delay:.64s}
body.sidebar-open .menu__aside>:nth-child(4){transition-delay:.76s}
body.sidebar-open .menu__foot{transition-delay:.85s}

.menu__top{flex:none;display:flex;align-items:center;justify-content:space-between;height:4rem;padding-left:.35rem}
.menu__close{display:grid;place-items:center;width:2.75rem;height:2.75rem;background:var(--accent);color:var(--accent-ink);border-radius:50%;transition:transform .6s var(--ease-out),background-color var(--t-fast),color var(--t-fast)}
body.sidebar-open .menu__close{animation:fl-pop .8s var(--ease-out) .45s backwards}
.menu__close:hover,.menu__close:focus-visible{transform:rotate(90deg);background:var(--menu-fg);color:var(--menu-bg)}

.menu__body{flex:1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:center;padding-block:clamp(1rem,3vh,2.5rem)}
.menu__nav{grid-column:1/9}
.menu__aside{grid-column:10/13;align-self:end;display:grid;gap:1.25rem;justify-items:start}
.menu__list{border-top:1px solid var(--menu-line)}
.menu__link{position:relative;display:grid;grid-template-columns:clamp(2rem,4vw,3.5rem) minmax(0,1fr) auto;align-items:center;gap:1rem;padding-block:clamp(.4rem,1.4vh,.9rem);border-bottom:1px solid var(--menu-line);transition:opacity .4s var(--ease)}
.menu__link::after{content:"";position:absolute;left:0;bottom:-1px;width:100%;height:1px;background:var(--accent-text);transform:scaleX(0);transform-origin:left center;transition:transform .7s var(--ease)}
.menu__idx{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;color:var(--menu-muted)}
.menu__mask{display:block;overflow:hidden;padding:.04em 0 .14em}
.menu__text{display:inline-block;font-size:clamp(2.5rem,min(9vw,11vh),7.5rem);font-weight:500;letter-spacing:-.05em;line-height:1;transform:translateY(112%);transition:transform .4s var(--ease),color var(--t-med) var(--ease)}
body.sidebar-open .menu__text{transform:none;transition:transform 1s var(--ease-out),color var(--t-med) var(--ease);transition-delay:calc(.35s + var(--n,0)*.07s)}
.menu__list li:nth-child(2){--n:1}.menu__list li:nth-child(3){--n:2}.menu__list li:nth-child(4){--n:3}.menu__list li:nth-child(5){--n:4}
.menu__roll{position:relative;display:inline-block;transition:transform .6s var(--ease-out)}
.menu__roll::after{content:attr(data-text);position:absolute;left:0;top:125%;color:var(--accent-text)}
.menu__arrow{width:clamp(1.5rem,3vw,2.5rem);height:clamp(1.5rem,3vw,2.5rem);color:var(--accent-text);opacity:0;transform:translate(-.75rem,.75rem);transition:opacity var(--t-med) var(--ease),transform .6s var(--ease-out)}
.menu__link:hover::after,.menu__link:focus-visible::after,.menu__link[aria-current="page"]::after{transform:scaleX(1)}
.menu__link:hover .menu__arrow,.menu__link:focus-visible .menu__arrow{opacity:1;transform:none}
.menu__link:focus-visible .menu__text{color:var(--accent-text)}
.menu__link[aria-current="page"] .menu__text{color:var(--accent-text);font-family:var(--font-serif);font-style:italic;font-weight:400;letter-spacing:-.02em}
.menu__link[aria-current="page"] .menu__idx{color:var(--accent-text)}
@media(hover:hover){
.menu__link:hover .menu__roll,.menu__link:focus-visible .menu__roll{transform:translateY(-125%)}
.menu__list:hover .menu__link:not(:hover):not(:focus-visible){opacity:.38}}

.menu__label{font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:.14em;text-transform:uppercase;color:var(--accent-text)}
.menu__blurb{max-width:16rem;color:var(--menu-muted);font-size:.95rem}
.menu .social-link,.menu .theme-toggle{border-color:var(--menu-line)}
.menu .social-link:hover,.menu .social-link:focus-visible,.menu .theme-toggle:hover,.menu .theme-toggle:focus-visible{border-color:var(--accent)}
.menu__foot{flex:none;padding-top:1rem;border-top:1px solid var(--menu-line)}
.menu__copy{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.04em;color:var(--menu-muted)}

.social-list--icons{display:flex;flex-wrap:wrap;gap:.5rem}
.social-link{display:grid;place-items:center;width:2.75rem;height:2.75rem;border:1px solid var(--border-strong);border-radius:999px;transition:background-color var(--t-fast),color var(--t-fast),border-color var(--t-fast)}
.social-link .icon{width:1.05rem;height:1.05rem;transition:transform var(--t-med) var(--ease-out)}
.social-link:hover,.social-link:focus-visible{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.social-link:hover .icon,.social-link:focus-visible .icon{transform:translateY(-2px)}

html.menu-open .badge__ring,html.menu-open .label__dot::after{animation-play-state:paused}

/* 06 HOME: HERO */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;padding:calc(var(--header-h) + 1.5rem) var(--pad-x) 0}
.hero__meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.75rem 2rem}
.hero__title{margin-block:auto clamp(2rem,6vh,5rem);padding-top:2rem;font-size:var(--fs-hero);font-weight:500;letter-spacing:-.048em;line-height:.92}
.hero__foot{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:end;margin-bottom:clamp(2.5rem,6vh,4.5rem)}
.hero__lede{grid-column:7/13;grid-row:1;max-width:34rem;font-size:clamp(1.05rem,1.5vw,1.3rem);line-height:1.5;color:var(--text-2)}
.hero__actions{grid-column:1/7;grid-row:1;display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.75rem}
.hero__badge{position:absolute;z-index:2;top:clamp(9rem,26vh,15rem);right:var(--pad-x);width:clamp(6.5rem,10.5vw,9.5rem);aspect-ratio:1;display:grid;place-items:center;border-radius:50%;color:var(--text);background:var(--header-bg);border:1px solid var(--border-strong);transition:background-color var(--t-med) var(--ease),color var(--t-med) var(--ease),border-color var(--t-med) var(--ease)}
.badge__ring{position:absolute;inset:0;width:100%;height:100%;animation:fl-spin 28s linear infinite}
.badge__ring text{font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.12em;fill:currentColor}
.badge__arrow{width:1.6rem;height:1.6rem;transition:transform var(--t-med) var(--ease-out)}
.hero__badge:hover,.hero__badge:focus-visible{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.hero__badge:hover .badge__arrow,.hero__badge:focus-visible .badge__arrow{transform:translateY(4px)}
.hero__index ul{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:1px solid var(--border-strong)}
.hero__index a{display:flex;align-items:baseline;gap:.75rem;padding:1.1rem 1rem 1.25rem 0;font-size:.95rem;color:var(--text-2);transition:color var(--t-fast) var(--ease)}
.hero__index a span{font-family:var(--font-mono);font-size:.7rem;color:var(--accent-text);transition:transform var(--t-med) var(--ease-out)}
.hero__index a:hover,.hero__index a:focus-visible{color:var(--text)}
.hero__index a:hover span,.hero__index a:focus-visible span{transform:translateX(4px)}

/* 07 STATEMENT */
.statement{padding:clamp(6rem,16vw,14rem) var(--gutter)}
.statement__inner{max-width:var(--max);margin-inline:auto;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:2.5rem}
.statement__inner>.label{grid-column:1/4;padding-top:.9rem;align-self:start}
.statement__text{grid-column:4/13;max-width:26em;font-size:clamp(1.6rem,3.9vw,3.6rem);font-weight:400;letter-spacing:-.028em;line-height:1.18}
.statement__inner>.rule{grid-column:4/13;margin-top:clamp(1.5rem,4vw,3rem)}

/* 08 SERVICES LIST (home) */
.fields{padding:clamp(3.5rem,9vw,8rem) var(--gutter);background:var(--surface)}
.fields__inner{max-width:var(--max);margin-inline:auto}
.fields__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,18rem);grid-template-areas:"label label" "title note";column-gap:var(--gap);row-gap:1.5rem;align-items:end;margin-bottom:clamp(2.5rem,6vw,5rem)}
.fields__head .label{grid-area:label}.fields__head .display-m{grid-area:title}
.fields__note{grid-area:note;color:var(--text-2);font-size:.98rem;padding-bottom:.6rem}
.fields__list{border-bottom:1px solid var(--border-strong)}
.field{position:relative;border-top:1px solid var(--border-strong)}
.field::before{content:"";position:absolute;top:-1px;left:0;width:100%;height:1px;background:var(--accent-text);transform:scaleX(0);transform-origin:left center;transition:transform .8s var(--ease)}
.field:hover::before,.field:focus-within::before{transform:scaleX(1)}
.field__link{display:grid;grid-template-columns:clamp(2.5rem,6vw,5rem) minmax(0,1fr) auto;gap:var(--gap);align-items:start;padding-block:clamp(1.75rem,4vw,3rem)}
.field:nth-child(even) .field__link{padding-left:clamp(0rem,7vw,7rem)}
.field__num{padding-top:.9rem;font-family:var(--font-mono);font-size:.8rem;color:var(--accent-text)}
.field__body{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);grid-template-areas:"title text" "title tags";column-gap:clamp(1.5rem,5vw,5rem);align-content:start}
.field__title{grid-area:title;font-size:clamp(1.9rem,5vw,4.5rem);font-weight:500;letter-spacing:-.045em;line-height:1;transition:transform .6s var(--ease-out),color var(--t-med) var(--ease)}
.field__text{grid-area:text;max-width:34rem;padding-top:.5rem;color:var(--text-2);font-size:1.02rem}
.field__tags{grid-area:tags;margin-top:1rem;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3)}
.field__arrow{width:2rem;height:2rem;margin-top:.4rem;color:var(--text-2);transition:transform .6s var(--ease-out),color var(--t-med) var(--ease)}
.field__link:hover .field__title,.field__link:focus-visible .field__title{transform:translateX(1rem);color:var(--accent-text)}
.field__link:hover .field__arrow,.field__link:focus-visible .field__arrow{transform:translate(5px,-5px);color:var(--accent-text)}

/* 09 HOW A PROJECT STARTS (horizontal on desktop; app.js writes transforms directly) */
.direction{background:var(--inv-bg);color:var(--inv-fg)}
.direction .label{color:var(--inv-muted)}
.direction em.serif{color:var(--inv-accent)}
.direction__sticky{padding:clamp(4rem,9vw,8rem) 0}
.direction__head{padding-inline:var(--gutter);margin-bottom:clamp(2.5rem,6vw,4.5rem);display:grid;gap:1.25rem}
.direction__viewport{overflow-x:auto;padding-inline:var(--gutter);scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:var(--inv-border) transparent}
.direction__track{display:flex;width:max-content;padding-right:var(--gutter)}
.hpanel{flex:0 0 min(82vw,26rem);display:flex;flex-direction:column;min-height:clamp(18rem,40vh,26rem);padding:clamp(1.5rem,3vw,2.5rem);border-left:1px solid var(--inv-border);scroll-snap-align:start}
.hpanel__num{font-family:var(--font-serif);font-size:clamp(3rem,6vw,5rem);line-height:1;color:var(--inv-accent)}
.hpanel__title{margin:auto 0 1rem;padding-top:2rem;font-size:clamp(2.2rem,4vw,3.6rem);line-height:1}
.hpanel__text{max-width:26rem;color:var(--inv-muted)}
.direction__progress{display:none}
@media(min-width:900px) and (prefers-reduced-motion:no-preference){
.direction.is-hscroll .direction__sticky{position:sticky;top:0;height:100vh;height:100svh;padding:calc(var(--header-h) + .5rem) 0 0;display:flex;flex-direction:column;justify-content:center;gap:clamp(1.5rem,5vh,3.5rem);overflow:hidden;border-radius:var(--r-l)}
.direction.is-hscroll .direction__head{margin-bottom:0}
.direction.is-hscroll .direction__viewport{overflow:visible;scroll-snap-type:none}
.direction.is-hscroll .direction__track{will-change:transform}
.direction.is-hscroll .hpanel{flex-basis:clamp(22rem,32vw,30rem);scroll-snap-align:none}
.direction.is-hscroll .direction__progress{display:block;height:2px;margin:0 var(--gutter) clamp(1.75rem,5vh,3rem);background:var(--inv-border)}
.direction.is-hscroll [data-hscroll-progress]{display:block;height:100%;background:var(--inv-accent);transform:scaleX(0);transform-origin:left center}}

/* 10 HOME: WORK PREVIEW */
.showcase{padding:clamp(5rem,12vw,10rem) var(--gutter)}
.showcase__inner{max-width:var(--max);margin-inline:auto}
.showcase__head{display:grid;gap:1.25rem;max-width:44rem}
.showcase__note{color:var(--text-2);font-size:clamp(1.02rem,1.4vw,1.2rem);max-width:32rem}
.showcase__list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);align-items:start;margin-top:clamp(2rem,5vw,4rem)}
.shot-card:nth-child(2){margin-top:clamp(2rem,7vw,6rem)}
.shot-card:nth-child(3){margin-top:clamp(1rem,3vw,3rem)}
.shot-card__link{display:grid;gap:.6rem}
.shot-card__fig{overflow:hidden;border:1px solid var(--border-strong);border-radius:var(--r-m);background:var(--surface);aspect-ratio:2.1/1;margin-bottom:.4rem}
.shot-card__fig img{width:100%;height:100%;object-fit:cover;object-position:center top;transition:transform .9s var(--ease-out)}
.shot-card__name{font-size:clamp(1.3rem,2.2vw,1.8rem);font-weight:500;letter-spacing:-.035em;line-height:1.1;transition:color var(--t-med) var(--ease)}
.shot-card__link:hover .shot-card__fig img,.shot-card__link:focus-visible .shot-card__fig img{transform:scale(1.04)}
.shot-card__link:hover .shot-card__name,.shot-card__link:focus-visible .shot-card__name{color:var(--accent-text)}
.showcase__more{margin-top:clamp(2rem,4vw,3.5rem)}

/* 11 HOME: NEXT STEP */
.signoff{padding:clamp(3.5rem,9vw,8rem) var(--gutter);background:var(--surface)}
.signoff__inner{max-width:var(--max);margin-inline:auto;display:grid;gap:1.5rem}
.signoff__text{max-width:30rem;color:var(--text-2)}
.signoff__actions{display:flex;flex-wrap:wrap;gap:1rem 1.25rem;align-items:center}
.social-list--rows{width:min(100%,52rem);margin:clamp(1.5rem,4vw,3rem) 0 0 auto;border-bottom:1px solid var(--border-strong)}
.social-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:1rem 1.25rem;padding-block:1.25rem;border-top:1px solid var(--border-strong)}
.social-row .icon{width:1.5rem;height:1.5rem;transition:color var(--t-med) var(--ease)}
.social-row__name{font-size:clamp(1.25rem,2.6vw,2rem);font-weight:500;letter-spacing:-.03em;transition:transform .6s var(--ease-out)}
.social-row__handle{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--font-mono);font-size:.75rem;letter-spacing:.04em;color:var(--text-3)}
.social-row__arrow{width:1.4rem;height:1.4rem;color:var(--text-2);transition:transform .6s var(--ease-out),color var(--t-med) var(--ease)}
.social-row:hover .icon,.social-row:focus-visible .icon,.social-row:hover .social-row__arrow,.social-row:focus-visible .social-row__arrow{color:var(--accent-text)}
.social-row:hover .social-row__name,.social-row:focus-visible .social-row__name{transform:translateX(.6rem)}
.social-row:hover .social-row__arrow,.social-row:focus-visible .social-row__arrow{transform:translate(4px,-4px)}

/* 12 SERVICES PAGE: chapters, index bar, pull quote */
.chapters-nav{position:sticky;top:calc(var(--header-h) - .75rem);z-index:50;margin:0 var(--sheet);padding:0 clamp(1rem,2.5vw,1.75rem);background:var(--header-bg);border:1px solid var(--border);border-radius:999px}
.chapters-nav ul{display:flex;gap:clamp(1.25rem,3vw,2.5rem);overflow-x:auto;scrollbar-width:none}
.chapters-nav ul::-webkit-scrollbar{display:none}
.chapters-nav a{display:flex;align-items:baseline;gap:.6rem;padding:.95rem 0;white-space:nowrap;font-size:.92rem;color:var(--text-2);transition:color var(--t-fast) var(--ease)}
.chapters-nav a span{font-family:var(--font-mono);font-size:.7rem;color:var(--accent-text)}
.chapters-nav a:hover,.chapters-nav a:focus-visible{color:var(--text)}

.chapter{position:relative;padding:clamp(4rem,10vw,9rem) var(--gutter);scroll-margin-top:calc(var(--header-h) + 3rem)}
.chapter--tint{background:var(--surface)}
.chapter--ink{background:var(--inv-bg);color:var(--inv-fg)}
.chapter--ink .chapter__label,.chapter--ink .chapter__text{color:var(--inv-muted)}
.chapter--ink em.serif,.chapter--ink .chapter__numeral{color:var(--inv-accent)}
.chapter--ink .chapter__meta,.chapter--ink .chapter__foot{border-top-color:var(--inv-border)}
.chapter--ink .chapter__meta li{border-bottom-color:var(--inv-border);color:var(--inv-muted)}
.chapter--ink .chapter__fit{color:var(--inv-muted)}
.chapter--ink .chapter__fit strong{color:var(--inv-accent)}
.chapter__inner{max-width:var(--max);margin-inline:auto;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:2.5rem}
.chapter__numeral{grid-column:1/4;font-family:var(--font-serif);font-size:clamp(5rem,14vw,13rem);line-height:.8;color:var(--accent-text);letter-spacing:-.04em}
.chapter__main{grid-column:4/13;display:grid;gap:1.5rem}
.chapter__label{color:var(--text-2)}
.chapter__title{font-size:clamp(2.3rem,7.4vw,7rem);font-weight:500;letter-spacing:-.048em;line-height:.95}
.chapter__cols{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:var(--gap);row-gap:2rem;margin-top:clamp(.5rem,2vw,1.5rem);align-items:start}
.chapter__text{max-width:34rem;font-size:clamp(1.05rem,1.4vw,1.2rem);line-height:1.55;color:var(--text-2)}
.chapter__meta{border-top:1px solid var(--border-strong)}
.chapter__meta li{padding:.85rem 0;border-bottom:1px solid var(--border);font-family:var(--font-mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3)}
.chapter__foot{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:1rem 2rem;margin-top:clamp(.5rem,2vw,1.5rem);padding-top:1.25rem;border-top:1px solid var(--border-strong)}
.chapter__fit{max-width:34rem;color:var(--text-2);font-size:.98rem}
.chapter__fit strong{margin-right:.5rem;font-family:var(--font-mono);font-size:.72rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-text)}
.chapter--flip .chapter__numeral{grid-column:10/13;grid-row:1;text-align:right}
.chapter--flip .chapter__main{grid-column:1/10;grid-row:1}
.pull{padding:clamp(5rem,12vw,10rem) var(--gutter)}
.pull__inner{max-width:var(--max);margin-inline:auto;display:grid;gap:2rem}
.pull__text{max-width:22em;font-size:clamp(1.9rem,5vw,4.6rem);font-weight:400;letter-spacing:-.035em;line-height:1.1}

/* 13 WORK PAGE: case studies */
.workintro{padding:0 var(--pad-x) clamp(2rem,4vw,3rem)}
.workintro__note{max-width:40rem;padding-left:1rem;border-left:1px solid var(--accent-text);font-size:.95rem;color:var(--text-3)}
.projects{margin-top:clamp(1.5rem,3vw,2.5rem)}
.project{scroll-margin-top:calc(var(--header-h) + 4rem);padding:clamp(3rem,7vw,6rem) var(--pad-x);border-top:1px solid var(--border-strong);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:clamp(1.5rem,3vw,2.5rem)}
.project__head{grid-column:1/6;display:grid;grid-template-columns:auto minmax(0,1fr);gap:1rem 1.5rem;align-content:start}
.project__num{font-family:var(--font-serif);font-size:clamp(3rem,7vw,6rem);line-height:.9;color:var(--accent-text)}
.project__cat{display:block;margin-bottom:.75rem;color:var(--text-2)}
.project__title{font-size:clamp(2rem,5vw,4.5rem);font-weight:500;letter-spacing:-.045em;line-height:.98}
.project__body{grid-column:6/13;display:grid;gap:1.5rem;align-content:start}
.project__summary{font-size:clamp(1.08rem,1.5vw,1.3rem);line-height:1.5}
.project__points{border-top:1px solid var(--border-strong)}
.project__points li{position:relative;padding:.7rem 0 .7rem 1.4rem;border-bottom:1px solid var(--border);color:var(--text-2);font-size:.98rem}
.project__points li::before{content:"";position:absolute;left:0;top:1.3rem;width:.55rem;height:1px;background:var(--accent-text)}
.project__shows{display:grid;gap:.5rem;color:var(--text-2);font-size:.98rem}
.project__shot{grid-column:1/-1;overflow:hidden;background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--r-m);box-shadow:var(--shadow)}
.shot__bar{display:flex;align-items:center;gap:.4rem;height:2.25rem;padding:0 1rem;background:var(--surface-2);border-bottom:1px solid var(--border)}
.shot__bar i{width:.55rem;height:.55rem;border-radius:50%;background:var(--border-strong)}
.shot__bar span{margin-left:.75rem;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.04em;color:var(--text-3)}
.project__shot img{width:100%;height:auto}
.shot__empty{display:grid;place-content:center;gap:.75rem;min-height:clamp(14rem,30vw,22rem);margin:1rem;padding:2rem;text-align:center;color:var(--text-2);border:1px dashed var(--border-strong);border-radius:var(--r-m)}
.shot__empty .label{justify-self:center;color:var(--accent-text)}
.project__foot{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.5rem}
.project__note{font-family:var(--font-mono);font-size:.74rem;letter-spacing:.04em;color:var(--text-3)}

/* 14 ABOUT PAGE */
.approach{padding:clamp(3.5rem,9vw,8rem) var(--gutter);background:var(--surface)}
.approach__inner{max-width:var(--max);margin-inline:auto;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:3rem}
.approach__head{grid-column:1/6;align-self:start;position:sticky;top:calc(var(--header-h) + 1.5rem);display:grid;gap:1.5rem}
.approach__list{grid-column:7/13;border-bottom:1px solid var(--border-strong)}
.principle{padding:clamp(1.75rem,4vw,2.75rem) 0;border-top:1px solid var(--border-strong)}
.principle__num{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.12em;color:var(--accent-text)}
.principle__title{margin:.9rem 0;font-size:clamp(1.7rem,3.2vw,2.7rem);font-weight:500;letter-spacing:-.04em;line-height:1.05}
.principle__text{max-width:30rem;color:var(--text-2)}
.skills{padding:clamp(4rem,10vw,9rem) var(--gutter)}
.skills__inner,.tools__inner{max-width:var(--max);margin-inline:auto}
.skills__head{display:grid;gap:1.5rem;margin-bottom:clamp(2.5rem,6vw,5rem)}
.skills__list{border-bottom:1px solid var(--border-strong)}
.skill{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,3fr) minmax(0,4fr);column-gap:var(--gap);row-gap:.75rem;align-items:baseline;padding-block:clamp(1.5rem,3.5vw,2.5rem);border-top:1px solid var(--border-strong)}
.skill__name{font-size:clamp(1.8rem,4.6vw,4rem);font-weight:500;letter-spacing:-.045em;line-height:1;transition:transform .6s var(--ease-out),color var(--t-med) var(--ease)}
.skill:hover .skill__name{transform:translateX(.75rem);color:var(--accent-text)}
.skill__level{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-text)}
.skill__note{color:var(--text-2)}
.tools{padding:0 var(--gutter) clamp(4rem,10vw,9rem)}
.tools__inner{display:grid;gap:1.5rem}
.tools__list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--border-strong);margin-top:1.5rem}
.tool{padding:1.75rem 1.5rem 2rem 0}
.tool+.tool{padding-left:1.5rem;border-left:1px solid var(--border)}
.tool__name{font-size:clamp(1.4rem,2.4vw,2rem);font-weight:500;letter-spacing:-.035em;margin-bottom:.5rem}
.tool__text{color:var(--text-2);font-size:.95rem}

/* 15 CONTACT PAGE */
.brief{padding:0 var(--sheet) var(--sheet)}
.brief__inner{max-width:calc(var(--max) + 2rem);margin-inline:auto;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:2rem;padding:clamp(1.5rem,4vw,3.5rem);background:var(--surface);border:1px solid var(--border);border-radius:var(--r-l)}
.brief__head{grid-column:1/6;display:grid;gap:1.25rem;align-content:start}
.brief__note{max-width:26rem;color:var(--text-2);font-size:.98rem}
.brief__form{grid-column:6/13;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem}
.brief__field{display:grid;gap:.5rem}
.brief__field--wide{grid-column:1/-1}
.brief__field label{font-size:.88rem;font-weight:500;color:var(--text-2)}
.brief__field input,.brief__field select,.brief__field textarea{width:100%;padding:.95rem 1.1rem;font:inherit;color:var(--text);background:var(--bg);border:1px solid var(--border-strong);border-radius:var(--r-s);transition:border-color var(--t-fast) var(--ease)}
.brief__field textarea{min-height:8rem;resize:vertical}
.brief__field select{appearance:none;-webkit-appearance:none;padding-right:2.6rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none' stroke='%238691a8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 7 7.5l6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1.1rem center}
.brief__field input::placeholder,.brief__field textarea::placeholder{color:var(--text-3)}
.brief__field input:hover,.brief__field select:hover,.brief__field textarea:hover,.brief__field input:focus,.brief__field select:focus,.brief__field textarea:focus{border-color:var(--accent-text)}
.brief__actions{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.5rem}
.brief__status{min-height:1.4em;font-size:.9rem;color:var(--accent-text)}

.channels{padding:0 var(--sheet) var(--sheet)}
.channels__inner{max-width:calc(var(--max) + 2rem);margin-inline:auto;padding:clamp(1.25rem,3.5vw,3rem) clamp(1.25rem,3.5vw,3rem) clamp(.5rem,1.5vw,1.25rem);background:var(--surface);border:1px solid var(--border);border-radius:var(--r-l)}
.channels__head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.75rem 2rem;padding-bottom:1.25rem}
.channels__list{border-bottom:1px solid var(--border-strong)}
.channel{position:relative;display:grid;grid-template-columns:clamp(3rem,7vw,6rem) minmax(0,1fr) minmax(0,14rem) auto;align-items:center;gap:1rem var(--gap);padding-block:clamp(1.5rem,4vw,2.75rem);border-top:1px solid var(--border-strong)}
.channel::before{content:"";position:absolute;top:-1px;left:0;width:100%;height:1px;background:var(--accent-text);transform:scaleX(0);transform-origin:left center;transition:transform .8s var(--ease)}
.channel:hover::before,.channel:focus-visible::before{transform:scaleX(1)}
.channel__icon{width:clamp(1.75rem,3.4vw,2.75rem);height:clamp(1.75rem,3.4vw,2.75rem);color:var(--text-2);transition:color var(--t-med) var(--ease),transform .6s var(--ease-out)}
.channel__name{font-size:clamp(2rem,6.6vw,6rem);font-weight:500;letter-spacing:-.05em;line-height:1;transition:transform .6s var(--ease-out),color var(--t-med) var(--ease)}
.channel__meta{display:grid;gap:.35rem}
.channel__handle{font-family:var(--font-mono);font-size:.78rem;letter-spacing:.04em;color:var(--text-2);overflow-wrap:anywhere}
.channel__note{font-size:.9rem;color:var(--text-3)}
.channel__arrow{width:clamp(1.75rem,3vw,2.5rem);height:clamp(1.75rem,3vw,2.5rem);color:var(--text-2);transition:transform .6s var(--ease-out),color var(--t-med) var(--ease)}
.channel:hover .channel__icon,.channel:focus-visible .channel__icon{color:var(--accent-text);transform:scale(1.08)}
.channel:hover .channel__name,.channel:focus-visible .channel__name{transform:translateX(1rem);color:var(--accent-text)}
.channel:hover .channel__arrow,.channel:focus-visible .channel__arrow{transform:translate(5px,-5px);color:var(--accent-text)}

/* 16 FOOTER */
.site-footer{margin:var(--sheet);padding:clamp(3rem,7vw,6rem) var(--gutter) 1.5rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-l)}
.site-footer__inner{max-width:var(--max);margin-inline:auto}
.site-footer__grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr));gap:2.5rem var(--gap)}
.site-footer__title{font-weight:600;letter-spacing:.16em;margin-bottom:.75rem}
.site-footer__blurb{max-width:22rem;color:var(--text-2)}
.site-footer__heading{margin-bottom:1.1rem;font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}
.footer-list{display:grid;gap:.7rem;justify-items:start}
.site-footer__wordmark{margin:clamp(3rem,8vw,6rem) 0 0;font-size:clamp(2.5rem,13.4vw,12.5rem);font-weight:700;letter-spacing:-.05em;line-height:.8;white-space:nowrap;overflow:hidden;color:var(--wordmark);user-select:none}
.site-footer__bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;margin-top:clamp(1.5rem,3vw,2.5rem);padding-top:1.25rem;border-top:1px solid var(--border)}
.site-footer__copy{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.04em;color:var(--text-2)}
.back-to-top{display:inline-flex;align-items:center;gap:.9rem}
.back-to-top__label{font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:.14em;text-transform:uppercase}
.back-to-top .icon{width:2.75rem;height:2.75rem;padding:.7rem;border:1px solid var(--border-strong);border-radius:50%;transition:background-color var(--t-fast),color var(--t-fast),transform .5s var(--ease-out)}
.back-to-top:hover .icon,.back-to-top:focus-visible .icon{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);transform:translateY(-3px)}

/* 17 MOTION (transform and opacity only) */
@keyframes fl-line{from{transform:translateY(110%)}to{transform:none}}
@keyframes fl-fade{from{opacity:0;transform:translateY(1rem)}to{opacity:1;transform:none}}
@keyframes fl-spin{to{transform:rotate(360deg)}}
@keyframes fl-pulse{0%{transform:scale(1);opacity:.55}70%,100%{transform:scale(2.8);opacity:0}}
@keyframes fl-pill{from{opacity:0;transform:translateY(-1.25rem) scale(.94)}to{opacity:1;transform:none}}
@keyframes fl-mark{from{opacity:0;transform:rotate(-140deg) scale(.3)}to{opacity:1;transform:none}}
@keyframes fl-item{from{opacity:0;transform:translateY(-.6rem)}to{opacity:1;transform:none}}
@keyframes fl-pop{from{opacity:0;transform:rotate(-180deg) scale(.4)}to{opacity:1;transform:none}}

.js .header-pill{animation:fl-pill .9s var(--ease-out) .1s backwards}
.js .brand__mark{animation:fl-mark 1.2s var(--ease-out) .35s backwards}
.js .brand__text,.js .site-header__end>*{animation:fl-item .8s var(--ease-out) backwards;animation-delay:calc(.5s + var(--i,0)*.09s)}

.js .hero .line__inner{animation:fl-line 1.15s var(--ease-out) both;animation-delay:calc(.15s + var(--i,0)*.11s)}
.js .hero__meta,.js .hero__badge,.js [data-hero-fade]{animation:fl-fade .9s var(--ease-out) both;animation-delay:calc(.3s + var(--i,0)*.1s)}
.js .hero__meta{animation-delay:.1s}

.js-ready [data-reveal]{opacity:0;transform:translateY(1.5rem);transition:opacity .9s var(--ease-out),transform 1s var(--ease-out);transition-delay:calc(var(--d,0)*.1s)}
.js-ready [data-reveal].is-visible{opacity:1;transform:none}
.js-ready .display-m[data-reveal],.js-ready .display-l[data-reveal],.js-ready h1[data-reveal],.js-ready h2[data-reveal]{opacity:1;transform:none}
.js-ready [data-reveal] .line__inner{transform:translateY(110%);transition:transform 1.1s var(--ease-out);transition-delay:calc(var(--d,0)*.1s + var(--i,0)*.1s)}
.js-ready [data-reveal].is-visible .line__inner{transform:none}
.js-ready .rule[data-reveal]{opacity:1;transform:scaleX(0);transition:transform 1.4s var(--ease)}
.js-ready .rule[data-reveal].is-visible{transform:scaleX(1)}
.js-ready .field[data-reveal]:nth-child(odd){transform:translate(-2rem,1rem)}
.js-ready .field[data-reveal]:nth-child(even){transform:translate(2rem,1rem)}
.js-ready .field[data-reveal].is-visible{transform:none}
.js-ready [data-scroll-words] .word{opacity:.18}
.js-ready [data-scroll-words] .word.is-lit{opacity:1}

/* 18 RESPONSIVE */
@media(max-width:1100px){.field__body{column-gap:2rem}.tools__list{grid-template-columns:repeat(2,minmax(0,1fr))}.tool:nth-child(3){padding-left:0;border-left:0}.tool:nth-child(n+3){border-top:1px solid var(--border)}}
@media(max-width:900px){
.menu__body{grid-template-columns:1fr;align-items:start;row-gap:2rem}
.menu__nav,.menu__aside{grid-column:1}.menu__aside{align-self:start}
.hero__foot{grid-template-columns:1fr;row-gap:1.75rem}
.hero__lede{grid-column:1;grid-row:1}.hero__actions{grid-column:1;grid-row:2}
.hero__index ul{grid-template-columns:repeat(2,minmax(0,1fr))}
.hero__index li:last-child:nth-child(odd){grid-column:1/-1}
.hero__badge{width:6.5rem;top:calc(var(--header-h) + 5rem)}
.page-head__lede,.ink__title,.ink__list,.ink__cols{grid-column:1/-1}
.statement__inner>.label,.statement__text,.statement__inner>.rule{grid-column:1/-1}
.statement__inner>.label{padding-top:0}
.fields__head{grid-template-columns:1fr;grid-template-areas:"label" "title" "note"}
.fields__note{padding-bottom:0}
.field__body{grid-template-columns:1fr;grid-template-areas:"title" "text" "tags";row-gap:1rem}
.field__text{padding-top:0}
.field:nth-child(even) .field__link{padding-left:0}
.showcase__list{grid-template-columns:1fr}
.shot-card:nth-child(n){margin-top:0}
.social-list--rows{margin-left:0}
.chapter__numeral,.chapter__main,.chapter--flip .chapter__numeral,.chapter--flip .chapter__main{grid-column:1/-1;grid-row:auto;text-align:left}
.chapter__numeral{font-size:clamp(4rem,22vw,7rem)}
.chapter__cols{grid-template-columns:1fr}
.project__head,.project__body{grid-column:1/-1}
.approach__head,.approach__list{grid-column:1/-1}.approach__head{position:static}
.skill{grid-template-columns:1fr}
.brief__head,.brief__form{grid-column:1/-1}
.channel{grid-template-columns:2.25rem minmax(0,1fr) auto;grid-template-areas:"icon name arrow" ". meta meta"}
.channel__icon{grid-area:icon}.channel__name{grid-area:name}.channel__arrow{grid-area:arrow}.channel__meta{grid-area:meta}
.site-footer__grid{grid-template-columns:1fr 1fr}.site-footer__col--brand{grid-column:1/-1}}
@media(max-width:640px){
:root{--header-h:5.25rem}
.header-pill{height:3.6rem;padding-left:.9rem;border-radius:1.35rem}
.brand__mark{width:2.1rem;height:2.1rem}
.brand__text{font-size:.8rem;letter-spacing:.12em}
.header-link,.nav-trigger__label{display:none}
.nav-trigger{padding:0 1rem}
.menu__top{height:3.6rem}.menu__aside{gap:1.1rem}.menu__blurb{display:none}
.ink__cols{grid-template-columns:1fr}
.tools__list{grid-template-columns:1fr}
.tool,.tool+.tool{padding:1.5rem 0;border-left:0}
.tool:nth-child(n+2){border-top:1px solid var(--border)}
.hero__index a{font-size:.88rem}
.field__link{grid-template-columns:2rem minmax(0,1fr) auto;gap:.75rem}
.field__arrow{width:1.5rem;height:1.5rem}
.social-row{gap:.75rem}.social-row__handle{max-width:7.5rem}
.brief__form{grid-template-columns:1fr}
.project__head{grid-template-columns:1fr}
.button{padding:1.05rem 1.4rem;min-height:3rem}}
@media(max-width:560px){.hero__badge{display:none}}
@media(max-width:360px){.brand__text{letter-spacing:.06em;font-size:.74rem}.brand{gap:.5rem}}

/* 19 REDUCED MOTION */
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*::before,*::after{animation-duration:.001ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0s!important}
.badge__ring{animation:none}
.label__dot::after{display:none}
.js-ready [data-reveal],.js-ready .field[data-reveal]{opacity:1;transform:none}
.js-ready [data-reveal] .line__inner,.js-ready .rule[data-reveal]{transform:none}
.js-ready [data-scroll-words] .word{opacity:1}
.menu__text{transform:none}
.menu__top,.menu__aside>*,.menu__foot{opacity:1;transform:none}}