/* Monalisa / Form × Feeling. Dependency-free. Native-scroll by design. */
@layer reset, tokens, base, components, pages, motion, responsive, access;
/* Local Latin subsets sourced from Google Fonts; see SOURCES.md. */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/manrope-latin-400-700.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/instrument-serif-latin-normal-400.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/instrument-serif-latin-italic-400.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@layer reset {
  *,*::before,*::after{box-sizing:border-box}
  html,body{margin:0;padding:0}
  h1,h2,h3,p,figure{margin:0}
  button,input,textarea,select{font:inherit}
  button,a{-webkit-tap-highlight-color:transparent}
  button{color:inherit;cursor:pointer}
  a{color:inherit;text-decoration:none}
  svg,img{display:block;max-width:100%}
  img{height:auto}
  button{border:0}
  [hidden]{display:none!important}
}
@layer tokens {
  :root{--paper:#f6f1eb;--ink:#481329;--muted:#735d66;--red:#b9235a;--acid:#edc7dd;--line:#d1bac4;--soft:#eedfe5;--sand:#e6dfd0;--rose:#e8d9d2;--blue:#dce4e7;--sage:#dfe4d4;--yellow:#eae9be;--gutter:clamp(20px,3.3vw,64px);--sans:"Manrope",Arial,"Helvetica Neue",sans-serif;--serif:"Instrument Serif",Georgia,serif;--ease:cubic-bezier(.22,1,.36,1);--fast:180ms;--medium:420ms;--slow:700ms;color-scheme:light}
}
@layer base {
  html{scroll-padding-top:100px;scrollbar-gutter:stable}
  body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
  html.menu-open{overflow:hidden;scroll-behavior:auto}
  html.menu-open body{position:fixed;top:var(--menu-scroll-y,0px);left:0;right:0;overflow:hidden}
  ::selection{background:var(--acid);color:var(--ink)}
  main{min-height:60vh}
  h1,h2,h3{font-weight:400;line-height:1.02;letter-spacing:-.065em}
  h1{font-size:clamp(64px,8.5vw,156px)}
  h2{font-size:clamp(40px,4.3vw,76px)}
  h3{font-size:24px;letter-spacing:-.035em}
  em{font-family:var(--serif);font-weight:400;letter-spacing:-.067em}
  p{text-wrap:pretty}
  a,button{touch-action:manipulation}
  a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--red);outline-offset:5px}
  input:focus-visible,textarea:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
  button:disabled{cursor:not-allowed;opacity:.6}
  .page-gutter{padding-inline:var(--gutter)}
  .section-space{padding-block:110px}
  .eyebrow{font-size:12px;font-weight:500;letter-spacing:.065em;line-height:1.5}
  .arrow-icon{width:24px;height:24px;flex-shrink:0}
  .arrow-down{transform:rotate(90deg)}
  .text-link{display:inline-flex;gap:16px;align-items:center;width:fit-content;min-height:44px;font-size:14px;position:relative;line-height:1.4}
  .text-link::after{content:"";position:absolute;bottom:5px;left:0;width:100%;height:1px;transform:scaleX(0);transform-origin:left;background:currentColor;transition:transform var(--fast) ease-out}
  .text-link:hover::after,.text-link:focus-visible::after{transform:scaleX(1)}
  .text-link .arrow-icon{width:20px;height:20px;transition:translate var(--fast) ease-out}
  .text-link:hover .arrow-icon{translate:2px -2px}
  .pill-button{display:inline-flex;min-height:54px;align-items:center;justify-content:space-between;gap:34px;padding:15px 25px;border-radius:80px;background:var(--ink);color:var(--paper);font-size:14px;line-height:1.4;transition:background var(--fast),color var(--fast),transform var(--fast)}
  .pill-button:hover{background:var(--red)}
  .pill-button:active{transform:scale(.98)}
  .spark{width:80px;height:80px;display:inline-block;vertical-align:middle;color:var(--red)}
  .js-only{display:none}
  .js-ready .js-only{display:inline-flex}
  .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  .skip-link{position:fixed;z-index:100;top:8px;left:8px;transform:translateY(-150%);padding:14px 20px;background:var(--ink);color:var(--paper);border-radius:4px}
  .skip-link:focus{transform:translateY(0)}
}
@layer components {
  .site-header{height:106px;padding:24px var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:24px;border-bottom:1px solid var(--line);position:relative;z-index:10;background:var(--paper)}
  .brand{display:flex;flex-direction:column;width:180px;align-items:flex-start;line-height:1}
  .wordmark{font-family:var(--serif);font-size:38px;letter-spacing:-2.9px;line-height:.86;white-space:nowrap}
  .logo-dot{font-family:var(--sans);font-size:22px;vertical-align:top;margin-left:3px;letter-spacing:0;color:var(--red)}
  .logo-subtitle{font-size:12px;letter-spacing:.24em;margin-top:9px}
  .desktop-nav{display:flex;align-items:center;gap:32px;font-size:13px}
  .desktop-nav a{position:relative;display:flex;align-items:center;min-height:44px;gap:4px}
  .desktop-nav a::after{content:"";position:absolute;bottom:6px;left:0;right:0;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform var(--fast) ease-out}
  .desktop-nav a:hover::after,.desktop-nav a[aria-current]::after{transform:scaleX(1)}
  sup{font-size:12px;letter-spacing:0;align-self:flex-start;margin-top:8px}
  .header-contact{display:flex;gap:36px;align-items:center;background:var(--acid);border-radius:30px;min-height:46px;padding:11px 18px;font-size:13px;transition:background var(--fast)}
  .header-contact:hover{background:var(--ink);color:var(--paper)}
  .header-contact svg{width:20px;height:20px}
  .menu-trigger{display:none}
  .mobile-menu{position:fixed;inset:0;z-index:100;max-width:100%;max-height:none;width:100%;height:100vh;height:100dvh;margin:0;padding:max(24px,env(safe-area-inset-top)) max(var(--gutter),env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(var(--gutter),env(safe-area-inset-left));background:var(--ink);color:var(--paper);border:0;overflow-y:auto;overflow-x:clip;overscroll-behavior:contain;touch-action:pan-y}
  .mobile-menu::backdrop{background:#48132980}
  .menu-top{display:flex;align-items:center;justify-content:space-between}
  .round-button{display:grid;place-items:center;width:48px;height:48px;border:1px solid #ffffff50;border-radius:50%;background:none;font-size:30px}
  .mobile-menu nav{margin-top:8vh;display:grid}
  .mobile-menu nav a{display:flex;align-items:center;gap:20px;padding-block:18px;border-bottom:1px solid #ffffff30;font-size:clamp(30px,7.5vw,64px);letter-spacing:-.06em}
  .mobile-menu nav sup{font-size:12px;letter-spacing:0;align-self:center;margin:0 3px 0 0}
  .mobile-menu nav svg{margin-left:auto;width:30px;height:30px}
  .menu-bottom{display:grid;gap:9px;margin-top:44px;font-size:14px;overflow-wrap:anywhere}
  .menu-bottom a{padding-block:10px}
  .menu-bottom span{font-size:12px;color:#dbc8d0}
  .nojs-nav{display:flex;flex-wrap:wrap;gap:16px}
  .site-footer{padding:65px var(--gutter) 24px;background:var(--ink);color:var(--paper);overflow:clip}
  .footer-invitation{display:flex;justify-content:space-between;align-items:center;padding-bottom:70px}
  .footer-invitation .eyebrow{display:block;margin-bottom:35px;text-transform:uppercase;font-size:12px}
  .footer-invitation h2{font-size:clamp(68px,9.5vw,164px);line-height:.93}
  .footer-invitation h2 em{color:var(--acid)}
  .footer-cta{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;width:210px;aspect-ratio:1;border:1px solid #d9dfcc70;border-radius:50%;transition:background var(--medium),color var(--medium),rotate var(--medium)}
  .footer-cta svg{width:70px;height:70px}
  .footer-cta span{text-align:center;font-size:12px;letter-spacing:.06em;line-height:1.5}
  .footer-cta:hover{background:var(--acid);color:var(--ink);rotate:5deg}
  .footer-middle{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-block:28px;border-block:1px solid #ffffff36}
  .footer-email{display:inline-flex;align-items:center;gap:22px;font-size:clamp(14px,2.2vw,32px);letter-spacing:-.025em;min-height:44px;overflow-wrap:anywhere}
  .footer-socials{display:flex;gap:30px;font-size:12px}
  .footer-socials a{display:flex;align-items:center;gap:8px;min-height:44px}
  .footer-socials svg{width:15px;height:15px}
  .footer-wordmark{font-family:var(--serif);font-size:20.5vw;letter-spacing:-1.75vw;line-height:.9;padding-block:35px 42px;white-space:nowrap;user-select:none}
  .footer-wordmark span{font-family:var(--sans);font-size:10.5vw;vertical-align:top;display:inline-block;margin:2.6vw 0 0 1vw;letter-spacing:0;color:var(--acid)}
  .footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:16px;border-top:1px solid #ffffff36;padding-top:15px;font-size:12px}
  .footer-bottom>div{display:flex;gap:24px;align-items:center}
  .footer-bottom a,.motion-toggle{min-height:44px;display:inline-flex;align-items:center;font-size:12px}
  .motion-toggle{background:none;padding:6px 0;gap:7px}
  .motion-toggle::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--acid)}
  .motion-toggle[aria-pressed="true"]::before{background:currentColor;opacity:.6}
  .kinetic-object{position:relative;aspect-ratio:1;color:var(--ink);width:100%;max-width:560px;isolation:isolate}
  .rosette{width:100%;height:auto;transform-origin:center}
  .orbit-lines{transform-origin:260px 260px}
  .object-registration{position:absolute;inset:15px 5px auto;display:flex;justify-content:space-between;font-size:12px;letter-spacing:.06em}
  .shape-switch{position:absolute;bottom:-7px;left:50%;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;gap:8px;font-size:12px;min-height:44px;white-space:nowrap;background:transparent;border-bottom:1px solid var(--line);padding:3px 10px}
  .shape-icon{font-size:18px;line-height:1}
  .kinetic-object[data-shape="1"]{color:var(--red)}
  .kinetic-object[data-shape="1"] .rosette-heart{fill:var(--ink)}
  .kinetic-object[data-shape="2"]{color:var(--ink)}
  .section-heading{display:grid;grid-template-columns:1fr 2.3fr 1fr;align-items:start;gap:30px;margin-bottom:52px}
  .section-heading>.eyebrow{padding-top:9px}
  .section-heading>.text-link{justify-self:end;align-self:end}
  .project-grid{display:grid;grid-template-columns:1.08fr 1fr;column-gap:36px;row-gap:54px}
  .selected-work .project-card:nth-child(2){margin-top:100px}
  .selected-work .project-card:nth-child(3){margin-top:-35px}
  .selected-work .project-card:nth-child(4){margin-top:70px}
  .project-card{min-width:0}
  .project-image-link{display:block}
  .project-image{position:relative;aspect-ratio:1.2;overflow:clip;isolation:isolate}
  .project-art{width:100%;height:100%;object-fit:cover;transition:transform 650ms var(--ease)}
  .project-image-link:hover .project-art{transform:scale(1.035)}
  .tone-sand{background:var(--sand)}
  .tone-blue{background:var(--blue)}
  .tone-rose{background:var(--rose)}
  .tone-sage{background:var(--sage)}
  .tone-yellow{background:var(--yellow)}
  .project-round-arrow{position:absolute;right:20px;bottom:20px;width:48px;height:48px;display:grid;place-items:center;border-radius:50%;background:var(--paper);color:var(--ink);transition:background var(--fast),rotate var(--medium)}
  .project-image-link:hover .project-round-arrow{background:var(--acid);rotate:45deg}
  .source-card{position:absolute;inset:0;display:flex;flex-direction:column;align-items:flex-start;padding:32px;border:1px solid #48132925}
  .source-card-label{font-size:12px;letter-spacing:.07em;line-height:1.5}
  .source-card-name{font-family:var(--serif);font-size:clamp(30px,3.1vw,50px);line-height:1.04;letter-spacing:-.045em;margin-top:auto;max-width:92%}
  .source-card-note{font-size:12px;line-height:1.5;color:var(--muted);margin-top:18px;max-width:75%}
  .source-card-id{font-size:12px;letter-spacing:.04em;margin-top:32px}
  .project-caption{display:flex;flex-direction:column;gap:6px;justify-content:space-between;padding-top:18px}
  .project-caption>div{display:flex;align-items:baseline;gap:14px}
  .project-caption h3{font-size:19px;letter-spacing:-.025em;line-height:1.3}
  .project-number{font-size:12px}
  .project-discipline{font-size:12px;color:var(--muted);margin-left:28px;line-height:1.5}
  .ai-badge{position:absolute;left:16px;bottom:18px;padding:6px 10px;background:var(--ink);color:var(--paper);border-radius:30px;font-size:12px;letter-spacing:.05em}
  .source-only .ai-badge{bottom:auto;top:51px;left:30px}
  .service-list{border-top:1px solid var(--line)}
  .service{border-bottom:1px solid var(--line)}
  .service summary{display:grid;grid-template-columns:1fr 3.3fr 36px;align-items:center;gap:30px;list-style:none;cursor:pointer;padding-block:25px;min-height:84px}
  .service summary::-webkit-details-marker{display:none}
  .service-num{font-size:12px}
  .service h3{font-size:clamp(22px,3vw,43px);letter-spacing:-.055em}
  .service-plus{font-size:30px;font-weight:400;line-height:1;justify-self:end;transition:rotate var(--medium) var(--ease)}
  .service[open] .service-plus{rotate:45deg}
  .service-body{display:grid;grid-template-columns:1fr 3.3fr 36px;gap:30px}
  .service-detail{grid-column:2;padding:0 0 28px;max-width:580px}
  .service-detail p{font-size:15px;line-height:1.65;color:var(--muted);max-width:530px}
  .service-tags{display:flex;flex-wrap:wrap;gap:7px;margin:20px 0 8px}
  .service-tags span{font-size:12px;border:1px solid var(--line);padding:5px 12px;border-radius:20px}
}
@layer pages {
  .hero{padding-top:25px}
  .hero-kicker{display:flex;justify-content:space-between;gap:30px}
  .hero-kicker>span:first-child{display:flex;align-items:center;gap:8px}
  .status-dot{width:6px;height:6px;display:inline-block;flex-shrink:0;border-radius:50%;background:var(--red)}
  .hero-stage{display:grid;grid-template-columns:1.25fr 1fr;align-items:center;gap:0;padding:55px 0 50px;position:relative}
  .hero-copy{position:relative;z-index:2;min-width:0}
  .hero h1{font-size:clamp(76px,9.15vw,171px);line-height:.94;letter-spacing:-.076em}
  .hero-line{display:block}
  .hero-serif{color:var(--red);line-height:1.07;font-size:1.02em}
  .hero-description{display:flex;gap:20px;max-width:405px;margin-top:33px;padding-left:5px}
  .hero-description p{font-size:14px;line-height:1.6;max-width:335px}
  .tiny-marker{font-size:29px;line-height:1}
  .hero-sculpture{width:100%;max-width:550px;justify-self:end;position:relative;margin-top:22px}
  .sculpture-caption{display:block;font-size:12px;text-align:center;margin-top:33px;letter-spacing:.08em}
  .hero-bottom{display:flex;justify-content:space-between;align-items:center;gap:24px;border-block:1px solid var(--line);padding-block:11px}
  .hero-scroll-note{display:flex;align-items:center;gap:40px;font-size:12px;letter-spacing:.06em}
  .hero-scroll-note>span{font-size:22px}
  .studio-statement{background:var(--acid);position:relative;padding-block:80px}
  .statement-inner{display:grid;grid-template-columns:1fr 3.2fr;gap:30px;position:relative}
  .statement-inner>.eyebrow{margin-top:12px}
  .statement-inner h2{font-size:clamp(72px,9vw,144px);line-height:.98;letter-spacing:-.074em}
  .statement-inner h2 em{font-size:1.03em}
  .statement-spark{width:clamp(65px,8vw,120px);height:auto;margin-left:25px;color:var(--ink)}
  .statement-copy{display:grid;grid-template-columns:1.3fr 1fr;gap:40px;margin-top:48px;align-items:end}
  .statement-copy p{max-width:350px;font-size:16px;line-height:1.5}
  .statement-copy .text-link{justify-self:center}
  .statement-side{position:absolute;top:0;right:var(--gutter);writing-mode:vertical-rl;letter-spacing:.09em;font-size:12px}
  .quiet-invite{display:flex;align-items:center;gap:50px;justify-content:space-between;margin:10px var(--gutter) 110px;padding:40px 0;border-block:1px solid var(--line)}
  .quiet-mark{position:relative;font-family:var(--serif);font-size:100px;line-height:1;letter-spacing:-.1em;color:var(--red)}
  .quiet-mark span{font-family:var(--sans);font-size:35px;vertical-align:top;letter-spacing:0;margin:10px 0 0 5px;display:inline-block}
  .quiet-invite p{font-size:clamp(28px,3.5vw,50px);line-height:1.1;letter-spacing:-.04em;margin-right:auto}
  .interior-hero{padding-top:65px;padding-bottom:75px}
  .interior-hero>.eyebrow{display:block;margin-bottom:36px}
  .interior-hero h1{line-height:1;max-width:1100px}
  .interior-hero h1 em{color:var(--red)}
  .interior-hero .spark{width:9vw;min-width:55px;height:auto;margin-left:25px}
  .interior-description{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-top:40px}
  .interior-description p{font-size:16px;line-height:1.5}
  .work-index{padding-bottom:95px}
  .js-ready .work-tools{display:flex!important}
  .work-tools{gap:30px;justify-content:space-between;align-items:center;border-block:1px solid var(--line);padding:16px 0;margin-bottom:36px}
  .filter-group{display:flex;gap:9px;flex-wrap:wrap}
  .filter{display:flex;gap:5px;min-height:44px;align-items:center;justify-content:center;padding:10px 17px;font-size:12px;line-height:1.4;background:transparent;border:1px solid transparent;border-radius:30px;transition:background var(--fast),color var(--fast)}
  .filter:hover{border-color:var(--ink)}
  .filter[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
  .filter sup{font-size:12px;align-self:flex-start;margin:0}
  .view-toggle{display:flex;gap:3px;flex-shrink:0}
  .view-toggle button{width:44px;height:44px;background:transparent;padding:12px;border-radius:50%;opacity:.5}
  .view-toggle svg{width:20px;height:20px}
  .view-toggle button[aria-pressed="true"]{background:var(--soft);opacity:1}
  .all-projects{row-gap:50px}
  .all-projects[data-view="index"]{display:flex;flex-direction:column;gap:0}
  .all-projects[data-view="index"] .project-card{display:grid;grid-template-columns:150px 1fr;gap:30px;border-bottom:1px solid var(--line);padding:20px 0;align-items:center}
  .all-projects[data-view="index"] .project-image{aspect-ratio:1.5}
  .all-projects[data-view="index"] .project-caption{padding:0;gap:12px}
  .all-projects[data-view="index"] .project-caption h3{font-size:28px}
  .all-projects[data-view="index"] .source-card{padding:15px;justify-content:center}
  .all-projects[data-view="index"] .source-card-label,.all-projects[data-view="index"] .source-card-note,.all-projects[data-view="index"] .source-card-id,.all-projects[data-view="index"] .project-round-arrow,.all-projects[data-view="index"] .ai-badge{display:none}
  .all-projects[data-view="index"] .source-card-name{font-size:20px;margin:0}
  .work-provenance{font-size:12px;line-height:1.6;max-width:570px;color:var(--muted);margin-top:50px}
  .studio-page-hero{padding-bottom:55px}
  .studio-page-hero h1{font-size:clamp(62px,8.1vw,144px)}
  .studio-hero-bottom{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-top:40px}
  .studio-hero-bottom p{font-size:18px;max-width:425px}
  .studio-canvas{position:relative;display:flex;justify-content:center;background:var(--acid);padding:70px var(--gutter) 100px;min-height:530px;overflow:clip}
  .studio-object{max-width:540px}
  .studio-object .shape-switch{border-color:var(--ink)}
  .canvas-caption{position:absolute;bottom:24px;left:var(--gutter);right:var(--gutter);display:flex;justify-content:space-between;font-size:12px;letter-spacing:.05em}
  .studio-details{display:grid;grid-template-columns:1fr 2fr;gap:40px}
  .studio-details p{font-size:17px;line-height:1.65;max-width:610px;margin-top:30px}
  .studio-details .text-link{margin-top:25px}
  .shop-note{display:grid;grid-template-columns:1fr 1fr;gap:40px;background:var(--soft);padding-block:65px;margin-bottom:90px}
  .shop-note h2{margin-top:25px}
  .shop-note>div:last-child{align-self:end;max-width:400px}
  .shop-note p{font-size:17px;line-height:1.55;margin-bottom:25px}
  .shop-caption{display:block;font-size:12px;color:var(--muted);margin-top:14px}
  .capabilities-full{padding-bottom:10px}
  .brief-starter>h2{margin-top:30px;max-width:1000px}
  .brief-prompts{display:grid;grid-template-columns:1fr 1fr 1fr;gap:40px;margin-block:55px 40px}
  .brief-prompts>div{border-top:1px solid var(--line);padding-top:15px}
  .brief-prompts span{font-size:12px}
  .brief-prompts h3{font-size:23px;margin-top:35px;line-height:1.2;letter-spacing:-.045em}
  .brief-prompts p{font-size:14px;color:var(--muted);margin-top:16px;line-height:1.6}
  .case-hero{padding-top:25px;padding-bottom:50px}
  .back-link{display:flex;gap:15px;align-items:center;font-size:12px;min-height:44px;width:fit-content}
  .case-category{display:flex;flex-wrap:wrap;gap:15px;align-items:center;margin-top:50px}
  .case-hero h1{font-size:clamp(56px,8.1vw,138px);margin-top:25px;max-width:1200px;line-height:1;letter-spacing:-.067em}
  .case-name{font-size:18px;margin-top:35px}
  .ai-label{padding:4px 10px;border:1px solid var(--ink);border-radius:20px;font-size:12px}
  .case-cover{overflow:clip;view-transition-name:project-image}
  .case-cover img{width:100%;height:auto;max-height:none;object-fit:contain}
  .artwork-pending{min-height:420px;padding:55px;display:flex;flex-direction:column;align-items:center;text-align:center;border:1px solid #48132920}
  .artwork-pending h2{margin-top:30px;font-size:76px}
  .artwork-pending p{font-size:14px;line-height:1.6;max-width:410px;margin-top:25px}
  .artwork-pending .pill-button{margin-top:25px}
  .case-context{display:grid;grid-template-columns:1fr 1.1fr;gap:70px}
  .case-context h2{margin-top:30px;font-size:56px}
  .case-summary{font-size:25px;line-height:1.4;letter-spacing:-.02em}
  .project-facts{margin:35px 0 0}
  .project-facts>div{display:grid;grid-template-columns:1fr 2fr;gap:30px;padding:18px 0;border-top:1px solid var(--line);font-size:14px;line-height:1.65}
  .project-facts dt{font-size:12px;color:var(--muted);padding-top:3px}
  .project-facts dd{margin:0}
  .project-facts .text-link{font-size:13px;min-height:30px}
  .case-gallery{display:grid;gap:45px}
  .case-gallery figure img{margin-inline:auto;max-height:none;max-width:100%;width:auto}
  .case-gallery figcaption{font-size:12px;line-height:1.6;color:var(--muted);margin-top:14px}
  .case-attribution{display:grid;grid-template-columns:1fr 1.1fr;gap:70px;padding-block:45px 75px}
  .case-attribution p,.case-attribution li{font-size:12px;color:var(--muted);line-height:1.7;max-width:550px}
  .case-attribution .text-link{font-size:12px;margin-top:8px}
  .next-project{display:flex;align-items:center;justify-content:space-between;gap:40px;padding-block:50px;background:var(--soft)}
  .next-project h2{font-size:clamp(30px,3.8vw,60px);line-height:1.1;margin-top:25px}
  .next-project>.arrow-icon{width:70px;height:70px}
  .next-project:hover{background:var(--acid)}
  .contact-hero{padding-bottom:60px}
  .contact-hero h1{position:relative;max-width:none}
  .contact-hero h1>.spark{position:absolute;right:4%;top:20px;width:clamp(100px,15vw,240px);margin:0}
  .contact-intro{display:flex;justify-content:space-between;gap:50px;align-items:flex-start;margin-top:50px}
  .contact-intro p{font-size:16px;line-height:1.6}
  .contact-intro>div{max-width:55%;min-width:0}
  .contact-email{display:flex;align-items:center;gap:15px;font-size:clamp(14px,2vw,29px);letter-spacing:-.03em;min-height:44px;overflow-wrap:anywhere}
  .copy-email{background:transparent;padding:5px 0;font-size:12px;text-decoration:underline;text-underline-offset:4px;min-height:44px}
  .contact-section{display:grid;grid-template-columns:1fr 1.65fr;gap:70px;padding-bottom:100px;border-top:1px solid var(--line);padding-top:45px}
  .contact-section aside p{font-size:28px;line-height:1.2;letter-spacing:-.035em;margin-top:30px}
  .contact-section aside .text-link{font-size:12px;margin-top:25px}
  #brief-form{min-width:0}
  .form-row{display:grid;grid-template-columns:1fr 1fr;gap:28px}
  .field{display:flex;flex-direction:column;gap:13px;margin-bottom:30px}
  .field label,legend{font-size:12px;line-height:1.5}
  .field label>span,legend>span{font-size:12px;color:var(--muted)}
  .field input,.field textarea{width:100%;min-width:0;border:0;border-bottom:1px solid var(--line);background:transparent;border-radius:0;padding:15px 0;font-size:16px;color:var(--ink);resize:vertical;line-height:1.5;min-height:52px}
  .field textarea{min-height:150px;max-height:500px;field-sizing:content}
  input::placeholder,textarea::placeholder{color:#6b7268;opacity:1;font-size:13px}
  input:user-invalid,textarea:user-invalid{border-color:var(--red)}
  .field-hint{font-size:12px;color:var(--muted)}
  .interest-options{border:0;padding:15px 0 0;margin:0 0 35px;display:flex;flex-wrap:wrap;gap:8px;min-width:0}
  .interest-options legend{padding:0;margin-bottom:5px;float:left;width:100%}
  .interest-options label{position:relative;display:inline-flex}
  .interest-options input{position:absolute;width:1px;height:1px;opacity:0;inset:50%}
  .interest-options label>span{display:inline-flex;align-items:center;min-height:44px;border:1px solid var(--line);border-radius:30px;padding:10px 17px;font-size:12px;line-height:1.4;cursor:pointer;transition:background var(--fast),color var(--fast)}
  .interest-options input:checked+span{background:var(--ink);color:var(--paper);border-color:var(--ink)}
  .interest-options input:focus-visible+span{outline:2px solid var(--red);outline-offset:4px}
  .form-submit-row{display:flex;align-items:center;flex-wrap:wrap;gap:24px}
  .text-button{min-height:44px;background:transparent;font-size:12px;padding:10px 0;text-decoration:underline;text-underline-offset:4px}
  .form-disclosure{font-size:12px;color:var(--muted);line-height:1.7;margin-top:20px;max-width:550px}
  .form-status{font-size:13px;margin-top:15px;line-height:1.5;overflow-wrap:anywhere}
  .legal-copy{padding-bottom:80px;display:grid;grid-template-columns:1fr 1fr;gap:65px}
  .legal-copy h2{font-size:32px;letter-spacing:-.045em;margin-bottom:25px}
  .legal-copy p{font-size:14px;line-height:1.7;margin-block:15px;color:var(--muted)}
  .source-register{margin-top:20px;display:grid}
  .source-register a{display:flex;gap:20px;justify-content:space-between;align-items:center;font-size:12px;border-bottom:1px solid var(--line);min-height:48px;padding-block:12px}
  .source-register svg{width:17px;height:17px}
  .not-found{padding-bottom:100px}
  .not-found p{font-size:17px;line-height:1.6;margin-top:30px}
  .not-found .pill-button{margin-top:25px}
}
@layer motion {
  @view-transition{navigation:none}
  ::view-transition-old(root){animation:page-out 130ms ease-out both}
  ::view-transition-new(root){animation:page-in 220ms ease-out both}
  ::view-transition-group(project-image){animation-duration:420ms;animation-timing-function:var(--ease)}
  @keyframes page-out{to{opacity:0}}
  @keyframes page-in{from{opacity:0}}
  @keyframes menu-in{from{opacity:0}to{opacity:1}}
  @keyframes reveal{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
  @keyframes orbit-turn{to{transform:rotate(180deg)}}
  @keyframes spark-turn{to{rotate:90deg}}
  @keyframes underline-grow{from{transform:scaleX(.3)}to{transform:scaleX(1)}}
  @keyframes scroll-turn{from{rotate:-12deg}to{rotate:70deg}}
  @media (prefers-reduced-motion:no-preference){
    html:not([data-motion="off"]){scroll-behavior:smooth}
    html:not([data-motion="off"]) .js-ready [data-reveal].revealed{animation:reveal 750ms var(--ease) both}
    html:not([data-motion="off"]) .hero-line:nth-child(2){animation-delay:65ms!important}
    html:not([data-motion="off"]) .hero-line:nth-child(3){animation-delay:125ms!important}
    html:not([data-motion="off"]) .kinetic-object.is-visible .orbit-lines{animation:orbit-turn 38s linear infinite}
    html:not([data-motion="off"]) .service::details-content{interpolate-size:allow-keywords;transition:height 280ms var(--ease),content-visibility 280ms allow-discrete;height:0;overflow:clip}
    html:not([data-motion="off"]) .service[open]::details-content{height:auto}
    html:not([data-motion="off"]) .mobile-menu[open]{animation:menu-in 160ms ease-out both}
    @supports(animation-timeline:view()){
      @media (min-width:900px) and (hover:hover) and (pointer:fine){
        html:not([data-motion="off"]) .statement-spark{animation:scroll-turn linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
      }
    }
  }
  .is-page-hidden *{animation-play-state:paused!important}
}
@layer responsive {
  @media(min-width:1700px){.hero-stage{padding-block:85px}.hero-sculpture{max-width:660px}.kinetic-object{max-width:660px}.source-card-name{font-size:54px}.footer-wordmark{font-size:20.8vw}}
  @media(max-width:1050px){
    .desktop-nav{gap:20px}.hero h1{font-size:9.6vw}.hero-description{max-width:340px}.hero-description p{font-size:13px}.hero-stage{grid-template-columns:1.2fr 1fr}.section-heading{grid-template-columns:1fr 2.7fr}.section-heading>.text-link{grid-column:2;justify-self:start;margin-top:-15px}.section-heading{row-gap:25px}.service summary,.service-body{grid-template-columns:.4fr 3.3fr 25px}.project-grid{gap:30px}.contact-section{gap:35px;grid-template-columns:1fr 1.8fr}.contact-intro{gap:30px}.footer-cta{width:170px}.footer-email{font-size:22px}.footer-socials{gap:18px}.source-card{padding:25px}.source-card-name{font-size:34px}.source-card-label{font-size:12px}.quiet-invite{gap:30px}.footer-wordmark{font-size:20vw}.footer-location{display:none}
  }
  @media(max-width:700px){
    html{scroll-padding-top:25px;scrollbar-gutter:auto}
    .site-header{height:82px;padding-block:20px;gap:15px;flex-wrap:wrap}
    .brand{width:140px}.wordmark{font-size:31px;letter-spacing:-2.5px}.logo-dot{font-size:18px}.logo-subtitle{font-size:12px;margin-top:8px;letter-spacing:.17em}
    .desktop-nav,.header-contact{display:none}
    .js-ready .menu-trigger{display:inline-flex;gap:12px;align-items:center;justify-content:center;min-width:80px;min-height:44px;padding:8px 0 8px 8px;background:transparent;font-size:12px}
    .menu-lines{width:20px;height:10px;position:relative;border-top:1px solid currentColor;border-bottom:1px solid currentColor;display:inline-block}
    .nojs-nav{font-size:12px;margin-top:15px;width:100%}.site-header:has(.nojs-nav){height:auto;min-height:82px}
    .hero{padding-top:18px}.hero-kicker{font-size:12px;line-height:1.7;gap:10px}.hero-kicker>span:first-child{max-width:225px;align-items:flex-start;gap:6px}.hero-kicker>span:last-child{white-space:nowrap;font-size:12px}.hero-kicker .status-dot{width:4px;height:4px;margin-top:5px}
    .hero-stage{display:block;padding:38px 0 38px;min-height:0}
    .hero h1{font-size:18.7vw;line-height:.99;letter-spacing:-.075em}
    .hero-serif{font-size:1.02em;line-height:1.08}
    .hero-description{width:57%;gap:10px;margin-top:30px;padding:0;min-height:138px;align-items:flex-start}
    .hero-description p{font-size:12px;line-height:1.6}.tiny-marker{font-size:19px;line-height:1.4;display:none}
    .hero-sculpture{position:absolute;z-index:3;right:-7px;bottom:56px;width:45%;max-width:185px;margin:0}
    .sculpture-caption{display:none}.object-registration{display:none}.shape-switch{font-size:12px;gap:4px;padding:0 5px;bottom:-25px;min-height:44px}.shape-icon{font-size:16px}.rosette{transform:none!important}
    .hero-bottom{padding-block:10px;gap:15px}.hero-bottom>.text-link{font-size:12px;gap:12px}.hero-scroll-note{font-size:0;gap:0}.hero-scroll-note span{font-size:21px}
    .section-space{padding-block:65px}.section-heading{grid-template-columns:1fr;gap:20px;margin-bottom:30px}.section-heading>.eyebrow{padding-top:0}.section-heading>.text-link{grid-column:1;margin:0;justify-self:start;align-self:start;font-size:12px}.section-heading h2{font-size:clamp(38px,10.3vw,57px);line-height:1.07;letter-spacing:-.063em}
    .eyebrow{font-size:12px}.text-link{font-size:12px;gap:12px}.text-link .arrow-icon{width:19px;height:19px}.pill-button{font-size:12px;min-height:50px;padding:13px 20px;gap:30px}
    .project-grid{grid-template-columns:1fr;gap:33px}.selected-work .project-card:nth-child(n){margin-top:0}.project-image{aspect-ratio:1.18}.project-caption{padding-top:13px;gap:4px}.project-caption h3{font-size:16px;line-height:1.35}.project-caption>div{gap:12px}.project-number{font-size:12px}.project-discipline{font-size:12px;margin-left:24px}.project-round-arrow{width:44px;height:44px;right:15px;bottom:15px}.project-round-arrow svg{width:20px;height:20px}.source-card{padding:23px}.source-card-name{font-size:33px;line-height:1.04}.source-card-label{font-size:12px}.source-card-note{font-size:12px;line-height:1.5;margin-top:14px}.source-card-id{font-size:12px;margin-top:24px}.source-only .ai-badge{left:22px;top:45px}.ai-badge{font-size:12px}
    .studio-statement{padding-block:45px}.statement-inner{grid-template-columns:1fr;gap:30px}.statement-inner>.eyebrow{margin:0}.statement-inner h2{font-size:18vw;line-height:1.01;letter-spacing:-.073em}.statement-spark{width:17vw;margin-left:14px}.statement-copy{grid-template-columns:1fr;gap:20px;margin-top:28px}.statement-copy p{font-size:13px;max-width:280px;line-height:1.65}.statement-copy>.text-link{justify-self:start;font-size:12px}.statement-side{font-size:12px;top:0}
    .service summary{grid-template-columns:20px 1fr 20px;gap:12px;padding-block:22px;min-height:76px}.service h3{font-size:25px;letter-spacing:-.055em;line-height:1.08}.service-num{font-size:12px}.service-plus{font-size:24px}.service-body{grid-template-columns:20px 1fr 20px;gap:12px}.service-detail{padding-bottom:24px}.service-detail p{font-size:12px;line-height:1.65}.service-tags{margin-top:17px}.service-tags span{font-size:12px;padding:5px 10px}.service-detail .text-link{font-size:12px}
    .quiet-invite{display:grid;grid-template-columns:65px 1fr;gap:22px;margin:0 var(--gutter) 65px;padding-block:30px}.quiet-mark{font-size:68px;align-self:start}.quiet-mark span{position:absolute;top:4px;left:51px;font-size:22px;margin:0}.quiet-invite p{font-size:28px;line-height:1.1}.quiet-invite>.pill-button{grid-column:2;justify-self:start;font-size:12px;padding:12px 16px;gap:15px;min-height:48px}
    .site-footer{padding-top:40px;padding-bottom:18px}.footer-invitation{gap:15px;align-items:end;padding-bottom:38px}.footer-invitation .eyebrow{font-size:12px;max-width:225px;margin-bottom:27px}.footer-invitation h2{font-size:17vw;line-height:.98;letter-spacing:-.065em}.footer-cta{width:80px;min-width:80px;gap:0;margin-bottom:8px}.footer-cta svg{width:38px;height:38px}.footer-cta span{display:none}.footer-middle{flex-direction:column;align-items:flex-start;gap:12px;padding-block:20px}.footer-email{font-size:clamp(14px,4vw,19px);gap:12px;letter-spacing:-.02em}.footer-email svg{width:18px;height:18px}.footer-socials{gap:30px;font-size:12px}.footer-wordmark{font-size:19.6vw;letter-spacing:-1.8vw;padding-block:25px 28px}.footer-wordmark span{font-size:10vw;margin-top:2.3vw}.footer-bottom{flex-wrap:wrap;align-items:center;gap:2px;font-size:12px;padding-top:14px}.footer-bottom>span{width:100%}.footer-bottom>div{justify-content:space-between;width:100%;gap:20px}.footer-bottom a,.motion-toggle{font-size:12px;min-height:44px}
    .interior-hero{padding-top:38px;padding-bottom:40px}.interior-hero>.eyebrow{margin-bottom:30px}.interior-hero h1{font-size:17vw;line-height:1.02;letter-spacing:-.07em}.interior-hero .spark{width:12vw;min-width:38px;margin-left:6px}.interior-description{flex-direction:column;align-items:flex-start;gap:20px;margin-top:28px}.interior-description p{font-size:13px;line-height:1.6}
    .work-index{padding-bottom:60px}.work-tools{flex-wrap:wrap;gap:10px;padding-block:13px;margin-bottom:26px}.filter-group{gap:4px;flex:1 1 100%}.filter{padding:10px 13px;font-size:12px;min-height:44px}.view-toggle{margin-left:auto}.view-toggle button{width:44px;height:44px}.all-projects[data-view="index"] .project-card{grid-template-columns:85px 1fr;gap:15px;padding-block:18px}.all-projects[data-view="index"] .project-caption h3{font-size:16px;line-height:1.35}.all-projects[data-view="index"] .project-caption{gap:4px}.all-projects[data-view="index"] .project-caption>div{gap:7px}.all-projects[data-view="index"] .project-discipline{margin-left:20px;font-size:12px}.all-projects[data-view="index"] .source-card-name{font-size:13px;line-height:1.1}.all-projects[data-view="index"] .source-card{padding:8px}.all-projects[data-view="index"] .project-image{aspect-ratio:1.05}.work-provenance{font-size:12px;margin-top:32px}
    .studio-page-hero h1{font-size:14.3vw;line-height:1.1}.studio-hero-bottom{flex-direction:column;align-items:flex-start;gap:25px;margin-top:28px}.studio-hero-bottom p{font-size:15px;line-height:1.65;max-width:290px}.studio-canvas{padding:32px 10px 60px;min-height:0}.studio-object{max-width:360px}.studio-object .shape-switch{bottom:1px;font-size:12px}.canvas-caption{font-size:12px;bottom:15px;gap:10px}.studio-details{grid-template-columns:1fr;gap:25px}.studio-details h2{font-size:39px;line-height:1.07}.studio-details p{font-size:14px;line-height:1.65;margin-top:25px}.studio-details .text-link{margin-top:15px}.shop-note{grid-template-columns:1fr;gap:30px;padding-block:40px;margin-bottom:55px}.shop-note h2{font-size:51px}.shop-note p{font-size:14px;margin-bottom:20px}.shop-caption{font-size:12px}
    .brief-starter>h2{font-size:40px;line-height:1.1;margin-top:25px}.brief-prompts{grid-template-columns:1fr;gap:30px;margin-block:35px}.brief-prompts h3{font-size:24px;margin-top:16px}.brief-prompts p{font-size:13px;margin-top:12px;max-width:320px}
    .case-hero{padding-top:14px;padding-bottom:35px}.case-category{margin-top:30px;font-size:12px;gap:10px}.case-hero h1{font-size:15.5vw;line-height:1.03;margin-top:22px;letter-spacing:-.065em}.case-name{font-size:15px;line-height:1.5;margin-top:26px}.artwork-pending{min-height:390px;padding:33px 22px}.artwork-pending h2{font-size:57px;line-height:1.02;margin-top:28px}.artwork-pending p{font-size:12px;line-height:1.7;margin-top:24px}.artwork-pending .pill-button{font-size:12px;gap:20px;padding:13px 19px}.case-context{grid-template-columns:1fr;gap:28px;padding-block:50px}.case-context h2{font-size:42px;margin-top:20px}.case-summary{font-size:21px;line-height:1.45}.project-facts{margin-top:30px}.project-facts>div{grid-template-columns:1fr 1.9fr;gap:15px;font-size:12px;line-height:1.7;padding-block:15px}.project-facts dt{font-size:12px}.project-facts .text-link{font-size:12px;gap:6px}.project-facts .text-link svg{width:16px;height:16px}.case-gallery{gap:26px}.case-gallery figcaption{font-size:12px}.case-attribution{grid-template-columns:1fr;gap:18px;padding-block:30px 45px}.case-attribution p,.case-attribution li{font-size:12px}.case-attribution .text-link{font-size:12px}.next-project{padding-block:35px;gap:20px}.next-project h2{font-size:29px;line-height:1.12;margin-top:18px}.next-project>.arrow-icon{width:42px;height:42px}
    .contact-hero h1{font-size:18vw}.contact-hero h1>.spark{width:19vw;min-width:0;right:0;top:0}.contact-intro{flex-direction:column;gap:25px;margin-top:30px}.contact-intro p{font-size:13px;line-height:1.7}.contact-intro>div{max-width:100%}.contact-email{font-size:4.45vw;gap:10px}.contact-email svg{width:20px;height:20px}.copy-email{font-size:12px}.contact-section{grid-template-columns:1fr;gap:35px;padding-top:27px;padding-bottom:65px}.contact-section aside{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}.contact-section aside>.eyebrow{width:100%}.contact-section aside p{font-size:20px;margin-top:10px}.contact-section aside .text-link{font-size:12px;margin-top:10px}.form-row{grid-template-columns:1fr;gap:0}.field{gap:8px;margin-bottom:26px}.field label,legend{font-size:12px}.field label>span,legend>span{font-size:12px}.field input,.field textarea{font-size:16px}.field input::placeholder,.field textarea::placeholder{font-size:12px}.interest-options{gap:7px}.interest-options label>span{font-size:12px;min-height:44px;padding:10px 14px}.form-submit-row{gap:16px}.text-button{font-size:12px}.form-disclosure{font-size:12px;line-height:1.7}.form-status{font-size:12px}
    .legal-copy{grid-template-columns:1fr;gap:45px;padding-bottom:55px}.legal-copy h2{font-size:28px;margin-bottom:20px}.legal-copy p{font-size:13px;line-height:1.7}.source-register a{font-size:12px;line-height:1.5}.not-found p{font-size:14px;line-height:1.6}
    /* Mobile motion is a separate system: short, finite, no parallax, pinning or mouse listeners. */
    html:not([data-motion="off"]) .js-ready [data-reveal].revealed{animation-duration:380ms;animation-delay:0ms!important}
    html:not([data-motion="off"]) .kinetic-object.is-visible .orbit-lines{animation:none}
    .project-art,.project-round-arrow{transition:none}.project-image-link:hover .project-art{transform:none}.project-image-link:hover .project-round-arrow{rotate:0deg}.footer-cta:hover{rotate:0deg}
    ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
  }
  @media(max-width:374px){.hero-kicker{font-size:12px}.hero-kicker>span:last-child{font-size:12px}.hero-description p{font-size:12px;line-height:1.7}.hero-description{min-height:133px}.hero-sculpture{bottom:59px}.service h3{font-size:23px}.service summary,.service-body{grid-template-columns:17px 1fr 18px;gap:9px}.source-card-name{font-size:29px}.footer-cta{width:65px;min-width:65px}.footer-cta svg{width:30px;height:30px}.filter{padding-inline:11px}.interest-options label>span{font-size:12px;padding-inline:12px}}
}
@layer access {
  @media(prefers-reduced-motion:reduce){
    html{scroll-behavior:auto!important}
    *,*::before,*::after{animation:none!important;transition:none!important}
    ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
    .rosette{transform:none!important}
  }
  html[data-motion="off"]{scroll-behavior:auto!important}
  html[data-motion="off"] *,html[data-motion="off"] *::before,html[data-motion="off"] *::after{animation:none!important;transition:none!important}
  html[data-motion="off"]::view-transition-group(*),html[data-motion="off"]::view-transition-old(*),html[data-motion="off"]::view-transition-new(*){animation:none!important}
  html[data-motion="off"] .rosette{transform:none!important}
  @media(forced-colors:active){.pill-button,.header-contact,.filter,.interest-options label>span{border:1px solid ButtonText}.project-round-arrow{border:1px solid CanvasText}.spark{color:CanvasText}.status-dot{background:CanvasText}.source-card{border:1px solid CanvasText}}
}

@layer access { body:not(.js-ready) .js-only{display:none!important} }

@layer components { .artwork-credit { font-size:12px;line-height:1.6;padding-block:12px;overflow-wrap:anywhere; } .artwork-credit a { text-decoration:underline;text-underline-offset:3px; } }

/* Final artwork and readability pass. */
@layer access {
 .hero-description p,.service-detail p,.statement-copy p,.interior-description p,.shop-note p,.brief-prompts p,.studio-details p,.contact-intro p,.legal-copy p{font-size:16px;line-height:1.65}
 .desktop-nav,.header-contact,.menu-trigger,.shape-switch,.project-discipline,.filter,.footer-socials,.text-link,.pill-button,.text-button,.field label,legend,.interest-options label>span{font-size:14px}
 .project-art{object-fit:contain;max-height:100%;background:var(--soft)}
 .project-image{aspect-ratio:1; background:var(--soft)}
 .selected-work .project-card:nth-child(2) .project-image{aspect-ratio:.85}
 .case-cover{max-width:1000px;margin-inline:auto}
 .case-cover img{max-height:1000px;object-fit:contain;background:var(--soft)}
 .artwork-credit{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:12px;color:var(--muted);line-height:1.6;padding-block:18px}
 .artwork-credit a{text-decoration:underline;text-underline-offset:4px;min-height:32px;display:inline-flex;align-items:center}
 .studio-art-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:30px;background:var(--ink);padding:60px var(--gutter);align-items:center;overflow:clip}
 .studio-art-grid figure:last-child{padding:50px 0}
 .studio-art-grid img{width:100%;height:auto;max-height:750px;object-fit:contain}
 .studio-art-grid figcaption{color:var(--paper);font-size:12px;letter-spacing:.05em;margin-top:16px;text-transform:uppercase}
 .motion-band{overflow:clip;border-block:1px solid var(--line);padding-block:22px;margin-top:0}
 .motion-band-track{display:flex;width:max-content;font-size:clamp(28px,4vw,58px);letter-spacing:-.04em;gap:0;will-change:transform}
 .motion-band-track span{padding-inline:30px;white-space:nowrap}
 @keyframes band-move{to{transform:translateX(-50%)}}
 @media(prefers-reduced-motion:no-preference){html:not([data-motion="off"]) .motion-band.is-visible .motion-band-track{animation:band-move 38s linear infinite}}
 @media(max-width:700px){
  .hero-description{width:100%;min-height:0;margin-top:26px;max-width:none}
  .hero-description p{max-width:none;width:100%;font-size:16px;line-height:1.6}
  .hero-sculpture{position:relative;right:auto;bottom:auto;z-index:auto;width:62%;max-width:260px;margin:25px auto 20px;justify-self:auto}
  .hero-stage{padding-bottom:35px}
  .hero-kicker{flex-wrap:wrap;font-size:12px}.hero-kicker>span:first-child{max-width:270px}.hero-kicker>span:last-child{font-size:12px}.hero-kicker .status-dot{width:5px;height:5px;margin-top:7px}
  .hero h1{font-size:18.2vw;letter-spacing:-.07em}
  .hero-serif em{letter-spacing:-.04em}
  .hero-bottom>.text-link{font-size:14px}.hero-bottom{gap:10px}
  .shape-switch{bottom:-22px;font-size:12px}
  .project-discipline{font-size:14px;line-height:1.5;margin-left:0}.project-caption h3{font-size:20px}
  .project-image,.selected-work .project-card:nth-child(2) .project-image{aspect-ratio:1}
  .service-detail .text-link,.section-heading>.text-link,.statement-copy>.text-link{font-size:14px}
  .service-tags span{font-size:12px}.service summary,.service-body{grid-template-columns:18px 1fr 20px;gap:10px}
  .project-facts>div{font-size:14px}.project-facts .text-link{font-size:14px}.case-attribution p,.case-attribution li{font-size:14px}
  .contact-section aside .text-link,.copy-email{font-size:14px}
  .field input::placeholder,.field textarea::placeholder{font-size:16px}
  .form-disclosure,.form-status{font-size:14px}
  .studio-art-grid{gap:16px;padding:30px var(--gutter);grid-template-columns:1fr 1fr}.studio-art-grid figure:last-child{padding:30px 0}
  .studio-art-grid figcaption{font-size:12px;line-height:1.5}
  .contact-email{font-size:clamp(14px,4.25vw,19px)}
  .hero-scroll-note{font-size:0}
  .all-projects[data-view="index"] .project-discipline{font-size:12px;margin-left:0}
  .footer-bottom a,.motion-toggle{font-size:12px}
  .motion-band{padding-block:15px}.motion-band-track{font-size:28px}
  html:not([data-motion="off"]) .motion-band.is-visible .motion-band-track{animation-duration:50s}
 }
}

@layer access {
 .site-header{position:sticky;top:0}
 @media(max-width:700px){html{scroll-padding-top:100px}.hero-bottom{scroll-margin-top:100px}}
}

@layer access {
 .mobile-menu :focus-visible,.site-footer :focus-visible{outline-color:var(--paper)}
}

/* MONALISA / Make your mark. Original kinetic identity, September 2026. */
@layer v2 {
:root{--paper:#eae9e1;--ink:#191a18;--muted:#62645c;--red:#ed432b;--acid:#ef4930;--line:#c7c8bc;--soft:#deded4;--gutter:clamp(22px,4vw,80px);--chrome:#d8dad5;--ease-out:cubic-bezier(.16,1,.3,1)}
body{background:var(--paper)}
.site-header{height:86px;background:var(--ink);color:var(--paper);border-color:#ffffff23;padding-block:17px;transition:height .35s,background .35s}
.brand{width:175px}.wordmark{font-family:var(--sans);font-weight:700;font-size:37px;letter-spacing:-2.6px;line-height:.9}.logo-dot{font-size:38px;margin:0;color:var(--red);vertical-align:baseline}.logo-subtitle{font-size:9px;letter-spacing:.29em;margin-top:7px}
.desktop-nav{font-size:12px;gap:40px;text-transform:uppercase;letter-spacing:.035em}.desktop-nav a::after{background:var(--paper)}
.header-contact{background:var(--paper);color:var(--ink);border-radius:0;font-size:12px;text-transform:uppercase;padding:12px 18px;min-height:44px;gap:32px}.header-contact:hover{background:var(--red);color:var(--ink)}
.menu-trigger{color:var(--paper)}.menu-lines,.menu-lines::before,.menu-lines::after{border-color:var(--paper)}
.mobile-menu{background:var(--red);color:var(--ink)}.mobile-menu::backdrop{background:var(--ink)}.mobile-menu nav{margin-top:5vh}.mobile-menu nav a{font-size:clamp(38px,7vw,78px);font-weight:500;letter-spacing:-.065em;border-color:#191a1840;animation:menu-link-in .65s var(--ease-out) both}.mobile-menu nav a:nth-child(2){animation-delay:.05s}.mobile-menu nav a:nth-child(3){animation-delay:.1s}.mobile-menu nav a:nth-child(4){animation-delay:.15s}.mobile-menu nav a:nth-child(5){animation-delay:.2s}.menu-bottom span{color:#272720}.mobile-menu :focus-visible{outline-color:var(--ink)}.round-button{border-color:#191a1860}
@keyframes menu-link-in{from{opacity:0;transform:translateY(25px)}to{opacity:1;transform:none}}
.avant-hero{position:relative;color:var(--paper);background:var(--ink);overflow:clip;isolation:isolate;min-height:calc(100svh - 86px)}
.hero-meta{display:flex;justify-content:space-between;position:relative;z-index:4;padding-top:24px;font-size:10px;letter-spacing:.1em}
.avant-stage{position:relative;min-height:650px;height:calc(100svh - 255px);max-height:900px}
.avant-title{position:absolute;z-index:3;left:var(--gutter);top:50%;transform:translateY(-52%);font-size:clamp(100px,12.5vw,220px);font-weight:500;letter-spacing:-.088em;line-height:.91;pointer-events:none}
.title-row{display:block;overflow:clip;padding:0 .1em .11em 0}.title-row>span{display:block;animation:hero-type-in 1.2s .1s var(--ease-out) both}.mark-row>span{animation-delay:.22s}.mark-row{font-family:var(--serif);font-style:italic;font-size:1.35em;font-weight:400;letter-spacing:-.065em;line-height:.88;padding-bottom:.1em}.title-period{color:var(--red)}
@keyframes hero-type-in{from{transform:translateY(115%) rotate(3deg)}to{transform:none}}
.sculpture-stage{position:absolute;z-index:2;width:61%;height:117%;right:-4%;top:-7%;pointer-events:none;isolation:isolate}
.sculpture-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity 1s}.sculpture-stage[data-webgl="ready"] canvas,.sculpture-stage.is-ready canvas{opacity:1}
.sculpture-fallback{position:absolute;inset:20%;display:grid;place-items:center;color:var(--chrome);opacity:.72;transform:rotate(-18deg);transition:opacity .5s}.sculpture-fallback svg{width:100%;filter:drop-shadow(12px 24px 0 #0006)}
.sculpture-stage[data-webgl="ready"] .sculpture-fallback,.sculpture-stage.is-ready .sculpture-fallback{opacity:0}
.sculpture-caption-v2{position:absolute;right:13%;bottom:15%;font-size:9px;letter-spacing:.14em;writing-mode:vertical-rl;color:#b4b8ac}
.hero-side-note{position:absolute;right:var(--gutter);top:30px;display:flex;gap:12px;font-size:11px;line-height:1.6;z-index:4}.live-dot{width:6px;height:6px;background:var(--red);border-radius:100%;margin-top:7px;box-shadow:0 0 0 4px #ed432b20}
.avant-bottom{position:relative;z-index:4;display:flex;justify-content:space-between;align-items:center;gap:30px;padding-block:18px 26px;border-top:1px solid #ffffff28;margin-top:0;font-size:12px}.avant-bottom p{font-size:14px;line-height:1.5;max-width:275px}.hero-coordinate{text-align:right;font-size:10px;line-height:1.8;letter-spacing:.045em}
.round-link{display:flex;align-items:center;gap:16px;font-size:12px}.round-icon{width:52px;height:52px;display:grid;place-items:center;border:1px solid #ffffff65;border-radius:50%;transition:background .3s,transform .5s var(--ease-out)}.round-link:hover .round-icon{background:var(--red);transform:rotate(45deg)}
.manifesto{padding-block:50px 80px;min-height:850px;display:flex;flex-direction:column;justify-content:space-between;background:var(--paper);color:var(--ink);position:relative}
.manifesto-label{display:flex;justify-content:space-between;gap:25px}.manifesto h2{font-size:clamp(70px,9.7vw,165px);line-height:1;letter-spacing:-.07em;font-weight:500;margin-block:100px 85px;max-width:1400px}.manifesto h2>span{display:block;color:#b6b8ab;background:linear-gradient(90deg,var(--ink) 0%,var(--ink) var(--fill,100%),#b6b8ab var(--fill,100%),#b6b8ab 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.manifesto h2 em{font-size:1.17em}.manifesto-bottom{display:grid;grid-template-columns:1fr 1.3fr 1fr;align-items:end;gap:40px}.mini-mark{width:80px;color:var(--red)}.manifesto-bottom p{max-width:420px;font-size:17px;line-height:1.65}.manifesto-bottom>.text-link{justify-self:end}
.exhibition{padding:90px var(--gutter) 100px;background:var(--ink);color:var(--paper);overflow:clip}.exhibition-heading{padding:0;display:grid;grid-template-columns:.8fr 2.2fr 1fr;gap:35px;align-items:end;margin-bottom:70px}.exhibition-heading>.eyebrow{align-self:start}.exhibition-heading h2{font-size:clamp(45px,5vw,90px);line-height:1.08}.exhibition-heading p{font-size:13px;line-height:1.6;color:#b4b8ac;max-width:240px;justify-self:end}
.exhibition-studies{display:grid;grid-template-columns:1fr 1fr;gap:70px 30px}.study{min-width:0;position:relative}.study-identity{grid-column:1 / -1}.study-caption{display:flex;justify-content:space-between;align-items:end;gap:25px;padding-top:23px}.study-caption span{font-size:10px;letter-spacing:.06em}.study-caption h3{font-size:clamp(22px,2.1vw,34px);font-weight:400;letter-spacing:-.04em;margin-top:7px}.study-caption p{color:#b4b8ac;font-size:11px;text-align:right;max-width:200px}
.identity-board,.type-board,.editorial-board{position:relative;overflow:hidden;isolation:isolate;padding:25px;min-height:500px;aspect-ratio:1.12;transform:translateZ(0)}
.identity-board{background:var(--red);color:var(--ink);aspect-ratio:1.95;min-height:570px}.board-registration{position:absolute;inset:24px 26px auto;display:flex;justify-content:space-between;gap:20px;z-index:5;font-size:9px;letter-spacing:.08em}.identity-form{position:absolute;inset:8% 0 13%;perspective:1000px;display:grid;place-items:center;transform:rotate(-18deg)}.identity-layer{position:absolute;width:38%;color:var(--ink);transform:translate3d(calc((var(--i) - 3)*24px),calc((var(--i) - 3)*-13px),calc(var(--i)*-20px));opacity:calc(1 - var(--i)*.04)}.identity-layer svg{width:100%;overflow:visible}.identity-layer:nth-child(even){color:var(--paper)}.is-inview .identity-layer{animation:identity-breathe 7s cubic-bezier(.55,0,.45,1) infinite;animation-delay:calc(var(--i)*-130ms)}
@keyframes identity-breathe{0%,100%{transform:translate3d(calc((var(--i) - 3)*24px),calc((var(--i) - 3)*-13px),calc(var(--i)*-20px)) rotateY(-16deg)}50%{transform:translate3d(calc((var(--i) - 3)*48px),calc((var(--i) - 3)*13px),calc(var(--i)*-10px)) rotateY(20deg)}}
.board-wordmark{position:absolute;bottom:11%;left:5%;font-size:clamp(65px,13vw,230px);font-weight:700;letter-spacing:-.09em;line-height:.8;z-index:4;mix-blend-mode:normal}.board-wordmark>span{display:inline-block}.is-inview .board-wordmark>span{animation:letter-squeeze 7s ease-in-out infinite}@keyframes letter-squeeze{50%{transform:scaleX(.45)}}
.board-bottom{position:absolute;inset:auto 26px 24px;display:flex;align-items:end;justify-content:space-between;z-index:5;gap:25px;font-size:9px;line-height:1.6;letter-spacing:.02em}.board-bottom>span:last-child{text-align:right}
.type-board{background:#d4ef54;color:var(--ink);aspect-ratio:.92;min-height:0}.type-stack{position:absolute;inset:13% 0 10%;display:flex;flex-direction:column;justify-content:center;align-items:center;transform:rotate(-8deg)}.type-stack-line{font-size:clamp(62px,9vw,158px);font-weight:700;line-height:.84;letter-spacing:-.075em;white-space:nowrap;position:relative;z-index:2}.type-stack-line:nth-child(2){color:#d4ef54;-webkit-text-stroke:1px var(--ink);z-index:4}.type-stack-line:nth-child(3){color:var(--red)}.type-stack-line>span{display:inline-block}.is-inview .type-stack-line>span{animation:type-wave 4.8s var(--ease-out) infinite;animation-delay:calc(var(--i)*-.6s + var(--j)*-.2s)}@keyframes type-wave{0%,70%,100%{transform:translateY(0) scaleY(1)}28%{transform:translateY(-.09em) scaleY(1.18)}}
.type-orbit{position:absolute;width:60%;aspect-ratio:1;right:-22%;top:22%;z-index:0}.type-orbit i{position:absolute;inset:0;border:30px solid #191a18;border-radius:50%;transform:rotateY(50deg) rotateZ(30deg)}.type-orbit i:nth-child(2){transform:rotateY(50deg) rotateZ(90deg);border-color:#ed432b}.type-orbit i:nth-child(3){transform:rotateY(50deg) rotateZ(150deg)}.is-inview .type-orbit{animation:type-orbit 24s linear infinite}@keyframes type-orbit{to{transform:rotate(360deg)}}
.editorial-board{background:#b2c6bf;color:var(--ink);aspect-ratio:.92;min-height:0}.editorial-scene{position:absolute;inset:15% 7% 10%;perspective:900px}.editorial-sheet{position:absolute;width:61%;height:85%;padding:20px;box-shadow:15px 24px 25px #1a2b2330;overflow:hidden}.editorial-sheet>span{font-size:7px;letter-spacing:.08em;line-height:1.6;position:relative;z-index:2}.sheet-one{background:var(--paper);z-index:3;left:0;top:9%;transform:rotate(-11deg) rotateY(10deg)}.sheet-two{background:var(--ink);color:var(--paper);right:0;top:0;transform:rotate(12deg) rotateY(-10deg)}.editorial-sheet strong{display:block;font-size:clamp(35px,4.8vw,86px);font-weight:500;letter-spacing:-.07em;line-height:.92;position:absolute;left:20px;bottom:50px;z-index:2}.editorial-sheet strong em{font-size:1.2em}.editorial-sheet small{position:absolute;left:20px;bottom:18px;font-size:6px;letter-spacing:.08em}.sheet-two b{display:block;font-weight:400;font-family:var(--serif);font-size:clamp(45px,6vw,100px);line-height:.85;letter-spacing:-.055em;margin-top:20px}.sheet-disc{position:absolute;width:90%;aspect-ratio:1;background:var(--red);border-radius:50%;right:-35%;bottom:10%;box-shadow:-12px 0 #eae9e1,-24px 0 #ed432b,-36px 0 #eae9e1}.cutout{position:absolute;right:-5%;top:17%;width:65%;aspect-ratio:1;transform:rotate(-23deg)}.cutout i{position:absolute;inset:0;background:var(--red);border-radius:70% 30% 60% 40%;transform:translateX(calc(var(--n,0)*7px));mix-blend-mode:multiply}.cutout i:nth-child(2){transform:rotate(36deg)}.cutout i:nth-child(3){transform:rotate(72deg)}.cutout i:nth-child(4){transform:rotate(108deg)}.cutout i:nth-child(5){transform:rotate(144deg)}
.is-inview .sheet-one{animation:sheet-one 8s ease-in-out infinite}.is-inview .sheet-two{animation:sheet-two 8s ease-in-out infinite}@keyframes sheet-one{50%{transform:rotate(-4deg) rotateY(-8deg) translateY(-12px)}}@keyframes sheet-two{50%{transform:rotate(17deg) rotateY(8deg) translateY(8px)}}
.kinetic-message{background:var(--red);color:var(--ink);overflow:clip;padding-block:35px}.kinetic-message-track{display:flex;width:max-content;will-change:transform}.kinetic-message-track>span{font-size:clamp(70px,11.5vw,190px);font-weight:500;letter-spacing:-.065em;line-height:1.1;display:flex;gap:60px;align-items:center;white-space:nowrap;padding-right:60px}.kinetic-message-track svg{width:1em;height:.8em}.kinetic-message.is-inview .kinetic-message-track{animation:kinetic-marquee 24s linear infinite}@keyframes kinetic-marquee{to{transform:translateX(-50%)}}
.archive-heading{display:grid;grid-template-columns:.8fr 2.2fr 1fr;gap:35px;align-items:end;margin-bottom:60px}.archive-heading>.eyebrow{align-self:start}.archive-heading h2{font-size:clamp(50px,6vw,105px)}.archive-heading p{margin-top:24px;font-size:15px;line-height:1.6}.archive-heading>.text-link{justify-self:end}.archive-grid{border-top:1px solid var(--line)}.archive-row{border-bottom:1px solid var(--line)}.archive-row>a{display:grid;grid-template-columns:60px 1fr 150px 40px;align-items:center;gap:24px;padding-block:32px;position:relative;isolation:isolate;transition:padding-inline .5s var(--ease-out),color .35s}.archive-row>a::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--red);transform:scaleY(0);transform-origin:bottom;transition:transform .5s var(--ease-out)}.archive-row>a:hover::before,.archive-row>a:focus-visible::before{transform:scaleY(1)}.archive-row>a:hover{padding-inline:22px}.archive-no,.archive-category{font-size:11px}.archive-row h3{font-size:clamp(24px,2.7vw,47px);font-weight:400;letter-spacing:-.045em;line-height:1.15}.archive-summary{display:block;font-size:12px;margin-top:8px;color:var(--muted)}.archive-row>a:hover .archive-summary{color:var(--ink)}.archive-row .arrow-icon{width:32px;height:32px;transition:rotate .5s}.archive-row>a:hover .arrow-icon{rotate:45deg}.archive-section{padding-block:100px}
.practice-section{display:grid;grid-template-columns:1fr 1.3fr;gap:10%;border-top:1px solid var(--line)}.practice-heading h2{font-size:clamp(48px,5.5vw,100px);margin-top:50px}.practice-intro{font-size:clamp(24px,2.5vw,40px);line-height:1.2;letter-spacing:-.035em;margin-bottom:50px}.practice-content .service summary,.practice-content .service-body{grid-template-columns:30px 1fr 24px;gap:20px}.practice-content .service h3{font-size:26px}.practice-content .service-detail{grid-column:2}.service[open] .service-body{animation:service-open .4s var(--ease-out)}@keyframes service-open{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.site-footer{background:var(--red);color:var(--ink);padding-top:70px}.footer-invitation h2{font-size:clamp(80px,11vw,190px);font-weight:500;letter-spacing:-.075em}.footer-invitation h2 em{color:var(--ink)}.footer-cta{border-color:#191a1870}.footer-cta:hover{background:var(--ink);color:var(--paper)}.footer-middle,.footer-bottom{border-color:#191a1855}.footer-wordmark{font-family:var(--sans);font-weight:700;font-size:20.8vw;letter-spacing:-1.9vw;padding-block:48px 25px}.footer-wordmark span{font-size:1em;letter-spacing:inherit;vertical-align:baseline;margin:0;color:var(--ink)}.footer-bottom{font-size:11px}.motion-toggle::before{background:var(--ink)}.site-footer :focus-visible{outline-color:var(--ink)}
.interior-hero{padding-top:65px}.interior-hero h1{font-weight:500}.v2-interior{padding-block:70px 90px}.v2-interior h1{font-size:clamp(70px,8.5vw,155px);line-height:1.03}.studio-original-art{padding:0 var(--gutter)}.studio-original-art .identity-board{aspect-ratio:1.9}.studio-details{padding-block:120px}.studio-details h2{font-size:clamp(60px,7vw,115px)}.shop-note{background:var(--ink);color:var(--paper);padding-block:80px}.shop-note .pill-button{background:var(--red);color:var(--ink)}.case-hero h1{font-weight:500}.case-cover{max-width:900px}.case-cover img{background:#d9dad0}.contact-hero h1>.spark{color:var(--red)}.pill-button{border-radius:0;background:var(--ink);color:var(--paper)}.filter{border-radius:0}.filter[aria-pressed=true]{background:var(--ink);color:var(--paper)}.work-tools{border-color:var(--line)}
/* Pause every continuous scene when it is outside the viewport or page is hidden. */
[data-animate]:not(.is-inview) *,body.is-page-hidden [data-animate] *{animation-play-state:paused!important}
html[data-motion=off] [data-word]{--fill:100%!important}html[data-motion=off] .title-row>span{transform:none}html[data-motion=off] .identity-layer{animation:none!important}
@media(min-width:1100px){.avant-hero{--hero-shift:0px}.avant-title{translate:0 var(--hero-shift)}.study-motion{margin-top:0}.study-editorial{margin-top:120px}.exhibition-studies{column-gap:50px}}
@media(max-width:1099px){.avant-stage{min-height:580px}.avant-title{font-size:13vw}.sculpture-stage{width:69%;right:-10%;top:-2%;height:105%}.hero-side-note{top:20px}.exhibition-heading,.archive-heading{grid-template-columns:1fr 2fr}.exhibition-heading p,.archive-heading>.text-link{grid-column:2;justify-self:start}.identity-board{min-height:430px}.board-wordmark{font-size:14vw}.manifesto{min-height:750px}.practice-section{gap:5%}.practice-content .service h3{font-size:23px}}
@media(max-width:700px){
:root{--gutter:22px}.site-header{height:75px;padding-block:14px}.brand{width:140px}.wordmark{font-size:31px;letter-spacing:-2.2px}.logo-dot{font-size:31px}.logo-subtitle{font-size:8px;margin-top:5px;letter-spacing:.25em}.menu-trigger{font-size:12px;gap:12px}.menu-lines{width:22px}.mobile-menu nav a{font-size:44px;padding-block:17px}.mobile-menu nav{margin-top:4vh}.mobile-menu .eyebrow{font-size:10px}
.avant-hero{min-height:calc(100svh - 75px)}.hero-meta{font-size:8px;letter-spacing:.08em;padding-top:18px;gap:25px}.hero-meta>span:last-child{max-width:135px;text-align:right}.avant-stage{min-height:510px;height:calc(100svh - 233px);max-height:720px}.avant-title{left:20px;top:33px;transform:none;font-size:14.9vw;line-height:1;letter-spacing:-.072em;z-index:3;width:calc(100% - 40px)}.title-row{padding-bottom:.05em}.mark-row{font-size:2.05em;letter-spacing:-.073em;position:absolute;top:300px;left:-2px;line-height:.95}.sculpture-stage{width:110%;height:425px;left:-5%;right:auto;top:44px;z-index:2}.sculpture-caption-v2{font-size:7px;right:8%;bottom:34%;color:#959b8a}.sculpture-fallback{inset:15% 20% 20%}.hero-side-note{left:22px;right:auto;top:auto;bottom:6px;font-size:10px;line-height:1.5}.hero-side-note .live-dot{margin-top:4px;width:5px;height:5px}.hero-side-note br{display:none}.hero-side-note span:last-child{display:flex;gap:4px}.avant-bottom{padding-block:18px 21px;gap:20px;align-items:center}.round-icon{width:38px;height:38px}.round-icon svg{width:19px;height:19px}.round-link{font-size:11px;gap:9px}.avant-bottom p{font-size:11px;line-height:1.5;width:49%;max-width:180px}.hero-coordinate{display:none}
.manifesto{min-height:0;padding-block:35px 60px}.manifesto-label{gap:15px}.manifesto-label .eyebrow{font-size:8px;max-width:160px}.manifesto-label .eyebrow:last-child{text-align:right;max-width:100px}.manifesto h2{font-size:12.8vw;line-height:1.07;letter-spacing:-.065em;margin-block:70px 55px}.manifesto-bottom{grid-template-columns:46px 1fr;gap:25px}.mini-mark{width:43px;align-self:start;margin-top:5px}.manifesto-bottom p{font-size:15px;line-height:1.6}.manifesto-bottom>.text-link{grid-column:2;justify-self:start;margin-top:2px}
.exhibition{padding-block:55px 60px}.exhibition-heading{grid-template-columns:1fr;gap:22px;margin-bottom:35px}.exhibition-heading>.eyebrow{font-size:9px}.exhibition-heading h2{font-size:10vw;line-height:1.07;letter-spacing:-.055em}.exhibition-heading p{grid-column:auto;justify-self:start;font-size:12px}.exhibition-studies{grid-template-columns:1fr;gap:45px}.study-identity{grid-column:auto}.identity-board{aspect-ratio:.86;min-height:0;padding:18px}.board-registration{inset:16px 16px auto;font-size:6px;letter-spacing:.04em;gap:10px}.identity-form{inset:14% -30% 20%}.identity-layer{width:43%}.board-wordmark{font-size:16vw;left:5%;bottom:18%;letter-spacing:-.085em}.board-bottom{inset:auto 16px 16px;font-size:7px;gap:12px}.study-caption{padding-top:16px;display:block}.study-caption span{font-size:8px}.study-caption h3{font-size:24px;line-height:1.1;margin-top:8px}.study-caption p{font-size:11px;margin-top:9px;text-align:left;max-width:none}.type-board,.editorial-board{aspect-ratio:.91;padding:18px}.type-stack-line{font-size:19vw;line-height:.84}.type-orbit i{border-width:19px}.editorial-sheet{padding:12px}.editorial-sheet>span{font-size:5px}.editorial-sheet strong{left:12px;bottom:38px;font-size:10vw}.editorial-sheet small{left:12px;bottom:13px;font-size:4px}.sheet-two b{font-size:12vw;margin-top:20px}.sheet-disc{box-shadow:-8px 0 #eae9e1,-16px 0 #ed432b,-24px 0 #eae9e1}.editorial-scene{inset:17% 7% 9%}
.kinetic-message{padding-block:22px}.kinetic-message-track>span{font-size:17vw;gap:25px;padding-right:25px}.kinetic-message.is-inview .kinetic-message-track{animation-duration:30s}
.home-archive{padding-block:60px}.archive-heading{grid-template-columns:1fr;gap:24px;margin-bottom:35px}.archive-heading>.eyebrow{font-size:9px}.archive-heading h2{font-size:14vw}.archive-heading p{font-size:14px;margin-top:22px}.archive-heading>.text-link{grid-column:auto;justify-self:start}.archive-row>a{grid-template-columns:23px 1fr 25px;gap:11px;padding-block:24px}.archive-row h3{font-size:24px;line-height:1.12;letter-spacing:-.045em}.archive-no{font-size:9px;align-self:start;margin-top:5px}.archive-summary{font-size:11px;margin-top:8px;line-height:1.5}.archive-category{display:none}.archive-row .arrow-icon{width:22px;height:22px}.archive-row>a:hover{padding-inline:0}.archive-section{padding-block:60px}.work-tools{margin-bottom:20px}.filter{font-size:12px;padding:11px}
.practice-section{grid-template-columns:1fr;gap:38px;padding-block:60px}.practice-heading .eyebrow{font-size:9px}.practice-heading h2{font-size:14vw;margin-top:28px}.practice-intro{font-size:25px;line-height:1.25;margin-bottom:33px}.practice-content .service summary,.practice-content .service-body{grid-template-columns:18px 1fr 18px;gap:11px}.practice-content .service h3{font-size:24px}.service-detail p{font-size:15px}
.site-footer{padding-top:42px}.footer-invitation{align-items:end;padding-bottom:35px;gap:10px}.footer-invitation .eyebrow{font-size:9px}.footer-invitation h2{font-size:18vw;line-height:.94}.footer-cta{width:65px;min-width:65px}.footer-cta svg{width:30px;height:30px}.footer-wordmark{font-size:20.4vw;letter-spacing:-1.85vw;padding-block:35px 28px}.footer-wordmark span{font-size:1em}.footer-email{font-size:clamp(14px,4.15vw,18px)}.footer-socials{font-size:12px}.footer-bottom{font-size:10px}.footer-bottom a,.motion-toggle{font-size:11px}
.v2-interior{padding-block:43px 55px}.v2-interior h1{font-size:15.5vw;line-height:1.04;letter-spacing:-.065em}.v2-interior>.eyebrow{font-size:9px;margin-bottom:30px}.studio-original-art{padding-inline:var(--gutter)}.studio-original-art .identity-board{aspect-ratio:.86}.studio-details{padding-block:65px}.studio-details h2{font-size:14vw}.studio-details p{font-size:16px}.shop-note{padding-block:45px;margin-bottom:0}.contact-hero h1>.spark{width:17vw}.contact-intro p{font-size:16px}.case-hero{padding-top:22px}.case-hero h1{font-size:14vw}.case-category{font-size:10px}.interior-description p{font-size:16px}.case-attribution p{font-size:14px}.source-register a{min-height:44px}
}
@media(max-width:374px){.avant-stage{min-height:475px}.mark-row{top:280px}.sculpture-stage{top:36px;height:395px}.hero-meta{font-size:7px}.avant-bottom{gap:10px}.round-link{font-size:10px}.avant-bottom p{font-size:10px}.archive-row h3{font-size:22px}}
@media(prefers-reduced-motion:reduce){.manifesto h2>span{--fill:100%!important}.title-row>span{transform:none}.avant-title{translate:none!important}.identity-layer{animation:none!important}}
}
@layer v2 {
.identity-board{background:var(--board-bg,var(--red));color:var(--board-ink,var(--ink));transition:background .7s,color .7s}
.identity-layer{color:var(--board-ink,var(--ink))}.identity-layer:nth-child(even){color:var(--board-paper,var(--paper))}
.identity-controls{position:absolute;z-index:6;right:24px;bottom:85px;display:flex;gap:5px;padding:5px;border:1px solid currentColor;border-radius:50px;background:var(--board-paper,var(--paper));color:var(--board-ink,var(--ink))}
.identity-controls button{width:32px;height:32px;border-radius:50%;background:var(--swatch);border:4px solid transparent;background-clip:padding-box;position:relative}
.identity-controls button[aria-pressed=true]{outline:1px solid currentColor;outline-offset:-1px}.identity-controls button:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.route-cut{position:fixed;inset:0;pointer-events:none;display:grid;grid-template-columns:repeat(4,1fr);z-index:1000;visibility:hidden}.route-cut i{background:var(--red);transform:translateY(101%);transition:transform .28s cubic-bezier(.7,0,.2,1);margin-left:-1px}.route-cut i:nth-child(2){transition-delay:20ms}.route-cut i:nth-child(3){transition-delay:40ms}.route-cut i:nth-child(4){transition-delay:60ms}.route-cut.is-cutting{visibility:visible}.route-cut.is-cutting i{transform:translateY(0)}
@media(max-width:700px){.identity-controls{right:14px;bottom:71px;padding:3px;gap:2px}.identity-controls button{width:36px;height:36px;border-width:7px}.route-cut i{transition-duration:.22s}}
}
@layer v2 {
:root{--ink:#171816}
.sculpture-stage[data-kinetic-ready="true"] canvas{opacity:1}
.sculpture-stage[data-kinetic-ready="true"] .sculpture-fallback{opacity:0;visibility:hidden}
}
@layer v2 {
.manifesto h2>span{padding-bottom:.13em;margin-bottom:-.04em;line-height:1.03}
.identity-form{inset:-8% 0 28%}
.board-wordmark{font-size:11vw;bottom:14%}
@media(max-width:700px){.identity-form{inset:-2% -30% 35%}.board-wordmark{font-size:15.8vw;bottom:18%}}
}
@layer v2 {
@media(hover:hover) and (pointer:fine) and (min-width:900px){.sculpture-stage{pointer-events:auto}}
}
@layer v2 {
.archive-row>a:focus-visible .archive-summary{color:var(--ink)}
.identity-controls{bottom:24px}.identity-board .board-bottom>span:last-child{visibility:hidden}
@media(max-width:700px){.identity-controls{bottom:16px;right:14px}.hero-side-note{font-size:11px;bottom:12px}.hero-side-note br{display:block}.hero-side-note span:last-child{display:block}.hero-meta{font-size:9px}.avant-bottom p{font-size:12px}.round-link{font-size:12px}.mark-row{top:345px}.sculpture-stage{top:37px;height:395px}}
@media(max-width:374px){.mark-row{top:315px}.sculpture-stage{top:40px;height:360px}.hero-meta{font-size:8px}.avant-bottom p,.round-link{font-size:11px}}
}
@layer v2 {
.contact-mark{position:absolute;right:2%;top:15%;width:12vw;max-width:220px;color:var(--red);transform:rotate(-12deg)}
@media(max-width:700px){.contact-mark{width:18vw;right:0;top:15%}}
}
@layer v2 {@media(max-width:700px){.identity-controls button{width:44px;height:44px;border-width:10px}.identity-controls{padding:2px;gap:0}}}
@layer v2 {.work-archive-v2{padding-bottom:110px}.work-archive-v2 .work-tools{margin-bottom:0;border-bottom:0}@media(max-width:700px){.work-archive-v2{padding-bottom:65px}}}
@layer v2 {.studio-original-art .identity-board{width:100%;min-height:0}}

/* A single motion language carried through the entire studio. */
@layer v2 {
.motion-word{display:inline-block;overflow:clip;vertical-align:top;padding:.035em .035em .18em;margin:-.035em -.035em -.18em;line-height:inherit}
.motion-word-inner{display:inline-block;transform-origin:0 100%;line-height:inherit}
.case-image-stage{position:relative;overflow:hidden}.case-image-stage picture,.case-image-stage>a{display:block}
.case-image-matte{position:absolute;inset:0;background:var(--red);transform:scaleY(0);transform-origin:50% 0;pointer-events:none}
.motion-rule{position:relative}.motion-rule::before{content:"";position:absolute;inset:0 0 auto;height:1px;background:currentColor;opacity:.22;pointer-events:none;transform-origin:0 50%}
.rule-arrived::before{animation:rule-draw .9s var(--ease-out) both}@keyframes rule-draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.archive-hero{position:relative}.archive-signal{position:absolute;right:var(--gutter);top:75px;width:24vw;max-width:385px;aspect-ratio:1;display:grid;place-items:center;color:var(--red);isolation:isolate}
.archive-signal svg{position:absolute;width:65%;opacity:.14;transform:rotate(-15deg)}.archive-signal strong{font-size:clamp(90px,15vw,250px);letter-spacing:-.095em;font-weight:500;line-height:.9}.archive-signal small{font-size:9px;letter-spacing:.13em;position:absolute;bottom:8%;color:var(--ink)}
.archive-signal.is-inview svg{animation:archive-mark 12s ease-in-out infinite}@keyframes archive-mark{50%{transform:rotate(15deg) scale(1.15)}}
.archive-hero h1{max-width:70%}
.next-project{position:relative;overflow:hidden;isolation:isolate;transition:color .25s}.next-project::before{content:"";position:absolute;inset:0;background:var(--red);z-index:-1;transform:translateY(101%);transition:transform .4s var(--ease-out)}.next-project:hover::before,.next-project:focus-visible::before{transform:translateY(0)}.next-project:hover{background:var(--soft)}.next-project>.arrow-icon{transition:transform .4s var(--ease-out)}.next-project:hover>.arrow-icon{transform:translate(8px,-8px)}
.field input,.field textarea{background-image:linear-gradient(var(--red),var(--red));background-repeat:no-repeat;background-position:0 100%;background-size:0% 2px;transition:background-size .28s var(--ease-out)}.field input:focus,.field textarea:focus{background-size:100% 2px}
.interest-options label>span{border-radius:0;transition:background .22s,color .22s,transform .22s var(--ease-out)}.interest-options input:checked+span{animation:chip-select .25s var(--ease-out)}@keyframes chip-select{50%{transform:scale(.96)}}
[data-copy-email][data-copied=true]::after{content:" ✓";display:inline-block;animation:copied-check .3s var(--ease-out)}@keyframes copied-check{from{transform:translateY(5px) scale(.6);opacity:0}to{transform:none;opacity:1}}
.pill-button,.header-contact,.text-button{transition:background .2s,color .2s,transform .2s var(--ease-out)}.pill-button:active,.header-contact:active{transform:scale(.98)}
.filter-group{position:relative}.filter{position:relative;transition:background .18s,color .18s}.filter::after{content:"";position:absolute;bottom:-5px;left:0;right:0;height:2px;background:var(--red);transform:scaleX(0);transform-origin:0 50%;transition:transform .28s var(--ease-out)}.filter[aria-pressed=true]::after{transform:scaleX(1)}
@media(max-width:900px){.archive-signal{top:55px;width:25vw}.archive-signal strong{font-size:17vw}.archive-hero h1{max-width:74%}}
@media(max-width:700px){.archive-signal{position:relative;top:auto;right:auto;width:100%;max-width:none;aspect-ratio:auto;height:125px;display:flex;justify-content:space-between;margin-top:30px;border-top:1px solid var(--line)}.archive-signal strong{font-size:92px;letter-spacing:-.09em}.archive-signal svg{width:80px;right:30px;opacity:.8}.archive-signal small{position:static;margin:auto auto 25px 24px;max-width:120px;font-size:9px;line-height:1.5}.archive-hero h1{max-width:none}.archive-hero{padding-bottom:25px}.next-project>.arrow-icon{width:42px;min-width:42px;height:42px}.rule-arrived::before{animation-duration:.45s}}
html[data-motion=off] .motion-word-inner,html[data-motion=off] .footer-brand-signature{transform:none!important}
html[data-motion=off] .case-image-matte{transform:scaleY(0)!important}
html[data-motion=off] .archive-signal svg,html[data-motion=off] .rule-arrived::before,html[data-motion=off] .interest-options input:checked+span{animation:none!important}
@media(prefers-reduced-motion:reduce){.motion-word-inner,.footer-brand-signature{transform:none!important}.case-image-matte{transform:scaleY(0)!important}.archive-signal svg,.rule-arrived::before,.interest-options input:checked+span{animation:none!important}}
}
@layer v2 {
.capability-layout{display:grid;grid-template-columns:minmax(250px,.75fr) minmax(0,1.5fr);gap:8%;align-items:start;padding-bottom:70px}
.capability-layout .capability-instrument{position:sticky;top:110px;max-width:none;width:100%}
.capability-layout .service summary,.capability-layout .service-body{grid-template-columns:35px minmax(0,1fr) 25px;gap:20px}.capability-layout .service-detail{grid-column:2;max-width:none}.capability-layout .service h3{font-size:clamp(25px,2.8vw,46px)}
@media(max-width:700px){.capability-layout{grid-template-columns:1fr;gap:32px;padding-bottom:30px}.capability-layout .capability-instrument{position:relative;top:0;max-width:none}.capability-layout .service summary,.capability-layout .service-body{grid-template-columns:20px minmax(0,1fr) 20px;gap:10px}.capability-layout .service h3{font-size:24px}}
}
@layer v2 {
.capability-layout .capability-instrument--inline{display:none}
@media(max-width:700px){.capability-layout.has-inline-instruments>.capability-instrument{display:none}.capability-layout .capability-instrument--inline{display:block;margin-top:24px;position:relative;top:0;width:100%;aspect-ratio:1.1}.capability-instrument--inline .capability-instrument__caption{grid-template-columns:1fr;font-size:9px;padding:11px}.capability-instrument--inline .capability-instrument__index{display:none}}
}

@layer v2 {
.capability-instrument{
  --ci-carbon:#171816;
  --ci-porcelain:#eae9e1;
  --ci-vermilion:#ed432b;
  --ci-acid:#d4ef54;
  position:relative;
  width:min(100%,400px);
  aspect-ratio:5/6;
  margin:0;
  overflow:hidden;
  background:var(--ci-carbon);
  color:var(--ci-porcelain);
  isolation:isolate;
}
.capability-instrument__art,
.capability-instrument__art svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.capability-instrument__art svg{overflow:hidden}
.ci-ground{fill:var(--ci-carbon)}
.ci-registration{fill:none;stroke:rgba(234,233,225,.42);stroke-width:1}
.ci-registration text{fill:rgba(234,233,225,.58);stroke:none;font:600 7px/1 Manrope,Arial,sans-serif;letter-spacing:1.15px}
.ci-state{
  opacity:0;
  transform:translate3d(0,14px,0) scale(.97);
  transform-origin:200px 240px;
  transition:opacity 300ms ease,transform 460ms cubic-bezier(.16,1,.3,1);
  pointer-events:none;
}
[data-capability-instrument][data-mode="0"] .ci-state--identity,
[data-capability-instrument][data-mode="1"] .ci-state--campaign,
[data-capability-instrument][data-mode="2"] .ci-state--experience,
[data-capability-instrument][data-mode="3"] .ci-state--digital{opacity:1;transform:none}
.ci-state-note{fill:var(--ci-porcelain);font:650 8px/1 Manrope,Arial,sans-serif;letter-spacing:1.8px}

/* 01 — a layered M assembled from distinct but interlocking planes. */
.ci-identity-shadow{fill:none;stroke:rgba(234,233,225,.2);stroke-width:1;transform:translate(9px,9px)}
.ci-m-outline{fill:var(--ci-porcelain)}
.ci-m-left{fill:var(--ci-vermilion)}
.ci-m-right{fill:var(--ci-porcelain)}
.ci-m-cut{fill:var(--ci-carbon)}
.ci-live--identity circle{fill:var(--ci-acid)}
.ci-live--identity path{fill:none;stroke:var(--ci-carbon);stroke-width:1.5}

/* 02 — one message moves through a skewed campaign sheet. */
.ci-campaign-sheet{transform-origin:200px 235px}
.ci-campaign-red{fill:var(--ci-vermilion)}
.ci-campaign-paper{fill:var(--ci-porcelain)}
.ci-type{font:800 52px/.8 Manrope,Arial,sans-serif;letter-spacing:-3px}
.ci-type--dark{fill:var(--ci-carbon)}
.ci-type--light{fill:var(--ci-porcelain)}
.ci-type--matter{font-size:42px;letter-spacing:-2.5px}
.ci-campaign-target{fill:none;stroke:var(--ci-acid);stroke-width:2;transform-origin:323px 330px}
.ci-campaign-target circle:first-child{stroke-dasharray:14 8}

/* 03 — physical panels part to create an experience at the centre. */
.ci-frame-field{fill:var(--ci-vermilion)}
.ci-frame-left,.ci-frame-right{fill:var(--ci-carbon)}
.ci-frame-line{fill:none;stroke:var(--ci-porcelain);stroke-width:1}
.ci-frame-sun{fill:var(--ci-acid)}
.ci-frame-cross{fill:none;stroke:var(--ci-carbon);stroke-width:1}
.ci-frame-word{fill:var(--ci-carbon);font:800 13px/1 Manrope,Arial,sans-serif;letter-spacing:2.2px}

/* 04 — modular screen panels snap to a shared system. */
.ci-digital-grid{transform-origin:200px 229px}
.ci-panel--a{fill:var(--ci-vermilion)}
.ci-panel--b{fill:var(--ci-porcelain)}
.ci-panel--c{fill:var(--ci-porcelain)}
.ci-panel--d{fill:var(--ci-acid)}
.ci-panel-mark{fill:var(--ci-carbon)}
.ci-panel-orbit{fill:none;stroke:var(--ci-carbon);stroke-width:8;stroke-dasharray:34 12}
.ci-panel-copy{fill:var(--ci-carbon)}
.ci-panel-axis{fill:none;stroke:var(--ci-carbon);stroke-width:5}
.ci-digital-route{fill:none;stroke:rgba(234,233,225,.38);stroke-width:1;stroke-dasharray:3 7}
.ci-digital-cursor{fill:var(--ci-vermilion);stroke:var(--ci-carbon);stroke-width:2;transform-origin:334px 332px}

.capability-instrument__caption{
  position:absolute;
  z-index:2;
  inset:auto 0 0;
  min-height:58px;
  display:grid;
  grid-template-columns:52px 1fr;
  align-items:center;
  gap:14px;
  padding:12px 18px;
  border-top:1px solid rgba(234,233,225,.24);
  background:rgba(23,24,22,.94);
  color:var(--ci-porcelain);
  font:650 11px/1.35 Manrope,Arial,sans-serif;
  letter-spacing:.065em;
  text-transform:uppercase;
}
.capability-instrument__index{color:rgba(234,233,225,.58)}
.capability-instrument__index::before{content:"01 "}
[data-mode="1"] .capability-instrument__index::before{content:"02 "}
[data-mode="2"] .capability-instrument__index::before{content:"03 "}
[data-mode="3"] .capability-instrument__index::before{content:"04 "}

/* Ambient motion is modest, and only the visible active study is allowed to run. */
.is-inview[data-mode="0"] .ci-live--identity{animation:ci-register 3.8s ease-in-out infinite}
.is-inview[data-mode="1"] .ci-live--campaign{animation:ci-target 4.8s linear infinite}
.is-inview[data-mode="2"] .ci-live--experience{animation:ci-open 4.5s ease-in-out infinite}
.is-inview[data-mode="3"] .ci-live--digital{animation:ci-cursor 3.4s ease-in-out infinite}
@keyframes ci-register{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
@keyframes ci-target{to{transform:rotate(360deg)}}
@keyframes ci-open{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.94)}}
@keyframes ci-cursor{0%,65%,100%{transform:translate(0,0)}35%{transform:translate(-12px,-10px)}}

@media (max-width:700px){
  .capability-instrument{width:100%;max-width:346px;aspect-ratio:346/300}
  .capability-instrument__art svg{inset:-1px 0 0;height:calc(100% + 2px)}
  .ci-registration text{display:none}
  .ci-state-note{font-size:9px}
  .capability-instrument__caption{min-height:52px;grid-template-columns:42px 1fr;padding:9px 14px;font-size:10px}
}

html[data-motion="off"] .capability-instrument .ci-state,
html[data-motion="off"] .capability-instrument .ci-live{transition:none!important;animation:none!important}
@media (prefers-reduced-motion:reduce){
  .capability-instrument .ci-state,
  .capability-instrument .ci-live{transition:none!important;animation:none!important}
}
/* The instrument uses Monalisa's own rounded M, continuous with the master identity. */
.ci-rounded-m path{fill:none;stroke-width:26;stroke-linecap:square}
.ci-rounded-m .ci-identity-shadow{stroke:#eae9e1;opacity:.85;transform:translate(5px,6px)}
.ci-rounded-m .ci-identity-mark{stroke:#ed432b}
.is-inview[data-mode="0"] .ci-rounded-m .ci-identity-shadow{animation:ci-m-depth 7s ease-in-out infinite}
@keyframes ci-m-depth{50%{transform:translate(11px,11px)}}
@media(max-width:700px){.ci-state-note{display:none}}
html[data-motion="off"] .ci-rounded-m *{animation:none!important}
@media(prefers-reduced-motion:reduce){.ci-rounded-m *{animation:none!important}}

}

@layer v2 {
  .case-study{overflow:clip}
  .case-artwork{position:relative}
  .case-cover{max-width:1180px;margin-inline:auto;overflow:visible;view-transition-name:project-image}
  .case-media{min-width:0;margin:0;scroll-margin-top:45px}
  .case-media img,.case-media video{display:block;width:100%;height:auto;max-height:none;object-fit:contain;background:#d9dad0}
  .case-media video{max-height:88vh;background:var(--ink)}
  .case-media-open{display:block;position:relative;cursor:zoom-in;overflow:clip}
  .case-media-open::after{content:"VIEW";position:absolute;right:14px;bottom:14px;display:grid;place-items:center;width:56px;aspect-ratio:1;border-radius:50%;background:var(--paper);color:var(--ink);font-size:9px;letter-spacing:.08em;opacity:0;transform:translateY(9px);transition:opacity .25s,transform .35s var(--ease-out),background .25s}
  .case-media-open:hover::after,.case-media-open:focus-visible::after{opacity:1;transform:none}
  .case-media-open:hover::after{background:var(--red)}
  .case-media figcaption{display:flex;flex-wrap:wrap;justify-content:space-between;gap:5px 20px;margin-top:13px;font-size:11px;line-height:1.55;color:var(--muted)}
  .case-media figcaption a{text-decoration:underline;text-underline-offset:4px;min-height:30px;display:inline-flex;align-items:center}
  .case-cover figcaption{padding-bottom:0}
  .case-overview{display:grid;grid-template-columns:minmax(220px,.75fr) minmax(430px,1.25fr);gap:clamp(50px,9vw,150px);align-items:start;border-bottom:1px solid var(--line)}
  .case-overview-title{position:sticky;top:30px}
  .case-overview-title h2{margin-top:28px;font-size:clamp(55px,6vw,104px)}
  .case-overview-copy>p{font-size:16px;line-height:1.75;max-width:720px;color:var(--muted);margin-top:23px}
  .case-overview-copy>.case-summary{font-size:clamp(25px,2.2vw,38px);line-height:1.3;letter-spacing:-.035em;color:var(--ink);margin-top:0}
  .case-editorial{display:grid;grid-template-columns:minmax(145px,.25fr) minmax(0,1fr);gap:clamp(35px,6vw,95px);padding-block:95px 120px}
  .case-editorial--no-index{grid-template-columns:minmax(0,1fr)}
  .case-media-overview{padding-block:65px}
  .case-media-overview .case-media-index{position:static;max-width:250px;max-height:none;overflow:visible}
  .case-media-index{position:sticky;top:30px;align-self:start;max-height:calc(100vh - 60px);overflow:auto;padding-right:12px}
  .case-media-tally{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .case-media-tally>span{display:grid;gap:7px;border-top:1px solid var(--line);padding-top:10px}
  .case-media-tally small{font-size:8px;line-height:1.35;letter-spacing:.06em;color:var(--muted)}
  .case-media-tally strong{font-size:28px;line-height:1;font-weight:500;letter-spacing:-.05em;font-variant-numeric:tabular-nums}
  .case-media-index ol{list-style:none;margin:22px 0 0;padding:0;border-top:1px solid var(--line)}
  .case-media-index li{border-bottom:1px solid var(--line)}
  .case-media-index a{display:grid;grid-template-columns:25px 1fr;gap:8px;align-items:start;padding:12px 0;font-size:10px;line-height:1.45;color:var(--muted);transition:color .2s}
  .case-media-index a span{color:var(--ink);font-variant-numeric:tabular-nums}
  .case-media-index a:hover,.case-media-index a:focus-visible{color:var(--ink)}
  .case-story{display:grid;gap:clamp(70px,9vw,145px);min-width:0}
  .case-media-index + .case-story{grid-column:2}
  .case-media-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2.5vw,42px);align-items:start}
  .case-media-pair .case-media:nth-child(even){margin-top:clamp(50px,9vw,145px)}
  .case-media-sequence{display:grid;gap:32px}
  .case-media-sequence--single .case-media{width:min(100%,1040px)}
  .case-media-sequence--single .case-media--portrait{width:min(67%,700px);margin-inline:auto}
  .case-story-copy{display:grid;grid-template-columns:minmax(120px,.38fr) minmax(300px,1fr);gap:40px;padding-block:28px;border-block:1px solid var(--line)}
  .case-story-copy>div{max-width:760px}
  .case-story-copy h2{font-size:clamp(38px,4.2vw,72px);margin-bottom:26px}
  .case-story-copy p{font-size:clamp(18px,1.65vw,27px);line-height:1.55;letter-spacing:-.018em;margin-top:17px}
  .case-story-copy--context{background:var(--soft);padding-inline:clamp(22px,4vw,60px);margin-inline:calc(var(--gutter) * -1)}
  .case-inline-sources{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:28px}
  .case-inline-sources a{display:inline-flex;align-items:center;gap:8px;font-size:11px;text-decoration:underline;text-underline-offset:4px;min-height:38px}
  .case-inline-sources svg{width:16px;height:16px}
  .case-presentation-archive{padding-block:0 110px}
  .case-presentation-archive details{border-block:1px solid var(--line)}
  .case-presentation-archive summary{display:flex;align-items:center;justify-content:space-between;gap:30px;min-height:112px;padding-block:24px;cursor:pointer;list-style:none}
  .case-presentation-archive summary::-webkit-details-marker{display:none}
  .case-presentation-archive summary>span:first-child{display:grid;gap:12px}
  .case-presentation-archive summary strong{font-size:clamp(24px,3vw,46px);font-weight:500;letter-spacing:-.045em;line-height:1.1}
  .archive-toggle{display:grid;place-items:center;width:48px;aspect-ratio:1;border:1px solid var(--line);border-radius:50%;font-size:25px;line-height:1;transition:rotate .3s var(--ease-out),background .2s}
  .case-presentation-archive details[open] .archive-toggle{rotate:45deg;background:var(--red);border-color:var(--red)}
  .case-archive-intro{display:grid;grid-template-columns:1fr 2fr;padding:12px 0 42px}
  .case-archive-intro p{grid-column:2;max-width:630px;font-size:14px;line-height:1.65;color:var(--muted)}
  .case-archive-group{padding-bottom:65px}
  .case-archive-group h3{font-size:12px;line-height:1.5;letter-spacing:.04em;margin-bottom:18px}
  .case-archive-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px 18px}
  .case-media--archive .case-media-open{display:grid;place-items:center;aspect-ratio:1;background:var(--soft)}
  .case-media--archive img{width:100%;height:100%;max-height:100%;object-fit:contain;background:transparent}
  .case-media--archive .case-media-open::after{width:40px;right:9px;bottom:9px;font-size:8px}
  .case-media--archive figcaption{display:grid;justify-content:stretch;gap:3px;margin-top:9px;font-size:9px;line-height:1.45}
  .case-media--archive figcaption a{font-size:9px;min-height:28px}
  .case-external-context{display:grid;grid-template-columns:minmax(180px,.55fr) minmax(420px,1.25fr);gap:clamp(40px,9vw,145px);padding-block:95px;background:var(--ink);color:var(--paper)}
  .case-external-context h2{font-size:clamp(48px,6vw,100px);margin-bottom:35px}
  .case-external-context p{max-width:760px;font-size:17px;line-height:1.75;color:#d7d7cf;margin-top:18px}
  .case-external-context .case-inline-sources a{color:var(--paper)}
  .case-attribution{border-top:1px solid var(--line)}
  .case-source-links{display:grid;margin-top:25px;border-top:1px solid var(--line)}
  .case-source-links a{display:grid;grid-template-columns:1fr 22px;align-items:center;gap:20px;min-height:62px;border-bottom:1px solid var(--line);font-size:12px;line-height:1.45}
  .case-source-links a>span{display:grid;gap:4px}
  .case-source-links small{text-transform:uppercase;font-size:9px;letter-spacing:.08em;color:var(--muted)}
  .case-source-links svg{width:19px;height:19px}
  html.case-viewer-open{overflow:hidden;scroll-behavior:auto}
  html.case-viewer-open body{position:fixed;top:var(--case-viewer-scroll-y,0);left:0;right:0;overflow:hidden}
  .case-viewer:not([open]){display:none}
  .case-viewer{position:fixed;inset:0;z-index:120;width:100%;max-width:none;height:100dvh;max-height:none;margin:0;padding:max(16px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));border:0;background:var(--ink);color:var(--paper);overflow:hidden}
  .case-viewer::backdrop{background:var(--ink)}
  .case-viewer-bar{display:flex;justify-content:space-between;align-items:center;height:42px;border-bottom:1px solid #ffffff42;font-size:11px;letter-spacing:.05em}
  .case-viewer-bar button{min-height:42px;padding:5px 0 5px 20px;background:transparent;color:inherit;font-size:12px}
  .case-viewer-stage{display:grid;grid-template-columns:64px minmax(0,1fr) 64px;align-items:center;height:calc(100% - 74px);gap:16px}
  .case-viewer-stage figure{display:grid;grid-template-rows:minmax(0,1fr) auto;place-items:center;height:100%;min-width:0;min-height:0;padding-block:16px 8px}
  .case-viewer-stage img{display:block;max-width:100%;max-height:100%;min-height:0;width:auto;height:auto;object-fit:contain}
  .case-viewer-stage figcaption{justify-self:start;max-width:820px;font-size:11px;line-height:1.45;color:#c5c6be;margin-top:8px}
  .case-viewer-nav{width:54px;aspect-ratio:1;border:1px solid #ffffff55;border-radius:50%;background:transparent;color:inherit;font-size:21px;transition:background .2s,color .2s}
  .case-viewer-nav:hover{background:var(--red);color:var(--ink)}
  .case-viewer-nav[disabled]{visibility:hidden}
  .case-viewer-project{display:block;height:30px;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:#bcbdb5}
}

@layer v2 {
  @media(max-width:900px){
    .case-overview{grid-template-columns:1fr;gap:35px}
    .case-overview-title{position:static}
    .case-story-copy,.case-external-context{grid-template-columns:minmax(0,1fr);gap:28px}
  }
  @media(max-width:700px){
    .case-cover{max-width:none}
    .case-media-open::after{display:none}
    .case-media figcaption{font-size:11px;line-height:1.55;margin-top:10px;gap:2px 12px}
    .case-overview{grid-template-columns:1fr;gap:28px;padding-block:58px}
    .case-overview-title{position:static}
    .case-overview-title h2{font-size:14vw;margin-top:18px}
    .case-overview-copy>.case-summary{font-size:23px;line-height:1.35}
    .case-overview-copy>p{font-size:14px;line-height:1.7;margin-top:19px}
    .case-editorial{display:block;padding-block:60px 70px}
    .case-media-index{position:static;max-height:none;padding:0;margin-bottom:55px}
    .case-media-tally{max-width:240px}
    .case-media-index ol{display:flex;overflow-x:auto;scrollbar-width:none;gap:7px;border:0;margin-top:15px;padding-bottom:5px}
    .case-media-index ol::-webkit-scrollbar{display:none}
    .case-media-index li{border:0;flex:0 0 auto}
    .case-media-index a{display:flex;gap:6px;align-items:center;border:1px solid var(--line);padding:9px 12px;max-width:190px;min-height:42px}
    .case-story{gap:75px}
    .case-media-pair{grid-template-columns:1fr;gap:52px}
    .case-media-pair .case-media:nth-child(even){margin-top:0}
    .case-media-sequence{gap:52px}
    .case-media-sequence--single .case-media,.case-media-sequence--single .case-media--portrait{width:100%;margin-inline:0}
    .case-story-copy{grid-template-columns:1fr;gap:20px;padding-block:25px}
    .case-story-copy h2{font-size:11vw;margin-bottom:19px}
    .case-story-copy p{font-size:18px;line-height:1.55;margin-top:14px}
    .case-story-copy--context{margin-inline:0;padding-inline:20px}
    .case-presentation-archive{padding-bottom:70px}
    .case-presentation-archive summary{min-height:96px;gap:18px}
    .case-presentation-archive summary strong{font-size:25px}
    .archive-toggle{width:44px;flex:0 0 44px}
    .case-archive-intro{display:block;padding:8px 0 32px}
    .case-archive-intro p{font-size:12px;line-height:1.65}
    .case-archive-group{padding-bottom:45px}
    .case-archive-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 12px}
    .case-external-context{grid-template-columns:1fr;gap:25px;padding-block:60px}
    .case-external-context h2{font-size:13vw;margin-bottom:26px}
    .case-external-context p{font-size:14px;line-height:1.7}
    .case-attribution{padding-block:50px}
    .case-viewer{padding-inline:max(12px,env(safe-area-inset-left));overflow:auto}
    .case-viewer-stage{grid-template-columns:1fr 1fr;grid-template-rows:minmax(0,1fr) 44px;gap:4px 12px;height:calc(100% - 74px)}
    .case-viewer-stage figure{grid-column:1/-1;grid-row:1;padding-block:10px 6px}
    .case-viewer-stage img{max-height:100%;touch-action:pan-y pinch-zoom;user-select:none}
    .case-viewer-nav{grid-row:2;width:44px;font-size:17px}
    .case-viewer-prev{grid-column:1;justify-self:start}.case-viewer-next{grid-column:2;justify-self:end}
    .case-viewer-stage figcaption{font-size:10px;max-height:24dvh;overflow:auto;overscroll-behavior:contain}
    .case-viewer-project{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .case-viewer-stage figure::after{content:'SWIPE TO EXPLORE';position:absolute;bottom:max(57px,calc(env(safe-area-inset-bottom) + 41px));left:50%;transform:translateX(-50%);font-size:8px;letter-spacing:.12em;color:#bcbdb5;pointer-events:none}
  }
}

@layer access {
  @media(prefers-reduced-motion:no-preference){
    html:not([data-motion="off"]) .case-viewer[open]{animation:case-viewer-in .22s ease-out both}
    html:not([data-motion="off"]) .case-viewer[open] .case-viewer-stage figure{animation:case-viewer-image-in .38s var(--ease-out) both}
    @keyframes case-viewer-in{from{opacity:0}to{opacity:1}}
    @keyframes case-viewer-image-in{from{opacity:.25;transform:scale(.985)}to{opacity:1;transform:none}}
  }
}

/* Supplied Monalisa identity. The logo artwork itself is always fixed and undistorted. */
@layer brandIdentity {
  .brand {
    display: block;
    width: auto;
    flex: 0 0 auto;
    line-height: 0;
    padding: 4px 6px;
    background: transparent;
  }

  .brand-lockup {
    width: auto;
    height: 46.5px;
    max-width: none;
  }

  .footer-brand-signature {
    padding-block: clamp(38px, 4vw, 64px) clamp(24px, 2.5vw, 40px);
    line-height: 0;
    user-select: none;
  }

  .footer-brand-wordmark {
    width: 100%;
    height: auto;
  }

  .brand-identity-board {
    min-height: 570px;
    aspect-ratio: 1.95;
    background: #ed432b;
    color: #141414;
  }

  .brand-identity-board .board-bottom>span:last-child { display: block; visibility: visible; }

  .brand-board-art {
    position: absolute;
    inset: 12% 5% 24%;
    isolation: isolate;
  }

  .brand-board-mark-plate {
    position: absolute;
    z-index: 4;
    top: 50%;
    left: 23%;
    width: min(35%, 400px);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    background: #f4f0e8;
    transform: translate(-50%, -50%);
  }

  .brand-board-mark {
    width: 64%;
    height: auto;
  }

  .brand-registration-frame {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 23%;
    width: min(37%, 424px);
    aspect-ratio: 1;
    border: 1px solid currentColor;
    opacity: .24;
    transform: translate(-50%, -50%);
    transform-origin: center;
  }

  .frame-a { margin: -22px 0 0 -22px; }
  .frame-b { margin: 18px 0 0 24px; }
  .frame-c { width: min(42%, 480px); opacity: .13; }

  .brand-board-period {
    width: 100%;
    height: auto;
  }

  .brand-board-wordmark {
    position: absolute;
    z-index: 5;
    left: 43%;
    right: 5%;
    top: 47%;
    transform: translateY(-50%);
  }

  .brand-registration-cross {
    position: absolute;
    z-index: 2;
    width: 11px;
    height: 11px;
    opacity: .52;
  }

  .brand-registration-cross::before,
  .brand-registration-cross::after {
    content: '';
    position: absolute;
    background: currentColor;
  }

  .brand-registration-cross::before { width: 11px; height: 1px; top: 5px; left: 0; }
  .brand-registration-cross::after { width: 1px; height: 11px; top: 0; left: 5px; }
  .cross-a { left: 3%; top: 8%; }
  .cross-b { right: 1%; bottom: 2%; }

  .brand-identity-board.is-inview .frame-a { animation: registration-a 9s ease-in-out infinite; }
  .brand-identity-board.is-inview .frame-b { animation: registration-b 11s ease-in-out infinite; }
  .brand-identity-board.is-inview .frame-c { animation: registration-c 13s ease-in-out infinite; }

  @keyframes registration-a {
    50% { transform: translate(calc(-50% + 8px), calc(-50% - 5px)); }
  }
  @keyframes registration-b {
    50% { transform: translate(calc(-50% - 7px), calc(-50% + 8px)); }
  }
  @keyframes registration-c {
    50% { transform: translate(calc(-50% + 4px), calc(-50% + 5px)); }
  }

  html[data-motion=off] .brand-registration-frame { animation: none !important; }

  @media (max-width: 700px) {
    .brand-lockup { height: 40px; }

    .brand-identity-board {
      min-height: 0;
      aspect-ratio: .86;
    }

    .brand-board-art { inset: 12% 5% 35%; }

    .brand-board-mark-plate {
      top: 45%;
      left: 50%;
      width: 67%;
    }

    .brand-registration-frame {
      top: 45%;
      left: 50%;
      width: 72%;
    }

    .frame-c { width: 82%; }

    .brand-board-wordmark {
      top: auto;
      bottom: 20%;
      left: 8%;
      right: 8%;
      transform: none;
    }

    .footer-brand-signature { padding-block: 34px 27px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .brand-registration-frame { animation: none !important; }
  }
}

@layer mobile-experience {
  .mobile-pocket-studio,
  .mobile-story-compass { display: none; }

  @media (max-width: 700px) {
    .mobile-pocket-studio {
      display: grid;
      gap: 27px;
      padding-block: 56px 66px;
      background: var(--ink);
      color: var(--paper);
      overflow: clip;
      isolation: isolate;
    }
    .mobile-pocket-heading {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      padding-bottom: 11px;
      border-bottom: 1px solid #f6f1eb45;
    }
    .mobile-pocket-heading .eyebrow,
    .mobile-pocket-coordinate {
      font-size: 8px;
      line-height: 1.4;
      letter-spacing: .09em;
      font-variant-numeric: tabular-nums;
    }
    .mobile-pocket-coordinate { color: #f6f1eb9e; }
    .mobile-pocket-copy { display: grid; gap: 21px; }
    .mobile-pocket-copy h2 {
      max-width: 9ch;
      font-size: clamp(51px, 15vw, 76px);
      line-height: .91;
      letter-spacing: -.075em;
    }
    .mobile-pocket-copy h2 em { color: var(--acid); }
    .mobile-pocket-copy p {
      max-width: 30ch;
      margin-left: auto;
      font-size: 12px;
      line-height: 1.65;
      color: #f6f1ebbd;
    }
    .mobile-pocket-board {
      position: relative;
      border: 1px solid #f6f1eb55;
      background: var(--paper);
      color: var(--ink);
      box-shadow: 9px 9px 0 var(--red);
    }
    .mobile-pocket-canvas {
      position: relative;
      overflow: hidden;
      touch-action: pan-y pinch-zoom;
      user-select: none;
      -webkit-user-select: none;
      cursor: ew-resize;
    }
    .mobile-pocket-canvas:focus-visible {
      outline: 2px solid var(--acid);
      outline-offset: 5px;
    }
    .mobile-pocket-canvas svg { width: 100%; height: auto; }
    .mobile-pocket-paper { fill: var(--paper); }
    .mobile-pocket-grid { fill: none; stroke: var(--line); stroke-width: .6; opacity: .55; }
    .mobile-pocket-orbit { fill: none; stroke: var(--ink); stroke-width: .85; stroke-dasharray: 2.5 6; opacity: .42; }
    .mobile-pocket-orbit--inner { stroke: var(--red); stroke-dasharray: none; opacity: .42; }
    .mobile-pocket-type {
      fill: var(--ink);
      font: 700 53px/1 var(--sans);
      letter-spacing: -.075em;
    }
    .mobile-pocket-type--bottom { font-family: var(--serif); font-style: italic; font-weight: 400; fill: var(--red); }
    .mobile-pocket-index { fill: var(--muted); font: 500 7px/1 var(--sans); letter-spacing: .085em; }
    .mobile-pocket-lines path {
      stroke: var(--ink);
      stroke-width: 1.3;
      vector-effect: non-scaling-stroke;
    }
    .mobile-pocket-lines path:nth-child(2) { stroke: var(--red); stroke-width: 2.2; }
    .mobile-pocket-lines path:nth-child(3) { stroke-dasharray: 3 5; }
    .mobile-pocket-disc circle { fill: var(--acid); stroke: var(--ink); stroke-width: 1; }
    .mobile-pocket-disc path { fill: none; stroke: var(--ink); stroke-width: .7; opacity: .55; }
    .mobile-pocket-sight circle:first-child { fill: var(--red); stroke: var(--ink); stroke-width: 1; }
    .mobile-pocket-sight circle:nth-child(2) { fill: var(--paper); }
    .mobile-pocket-sight path { fill: none; stroke: var(--ink); stroke-width: 1; }
    .mobile-pocket-instruction {
      position: absolute;
      right: 13px;
      top: 49%;
      display: flex;
      align-items: center;
      gap: 7px;
      padding: 7px 9px;
      background: var(--ink);
      color: var(--paper);
      font-size: 7px;
      letter-spacing: .08em;
      pointer-events: none;
      transform: rotate(-90deg) translateX(50%);
      transform-origin: right center;
    }
    .mobile-pocket-instruction i { width: 18px; height: 1px; background: currentColor; position: relative; }
    .mobile-pocket-instruction i::after { content: ""; position: absolute; right: 0; top: -2px; width: 5px; height: 5px; border-top: 1px solid; border-right: 1px solid; transform: rotate(45deg); }
    .mobile-pocket-remix {
      width: 100%;
      min-height: 67px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      padding: 12px 14px;
      border-top: 1px solid var(--line);
      background: var(--paper);
      color: var(--ink);
      text-align: left;
    }
    .mobile-pocket-remix > span:first-child { display: grid; gap: 2px; }
    .mobile-pocket-remix small { font-size: 7px; letter-spacing: .1em; color: var(--muted); }
    .mobile-pocket-remix strong { font-size: 15px; font-weight: 500; letter-spacing: -.025em; }
    .mobile-pocket-remix-icon {
      width: 43px;
      aspect-ratio: 1;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: var(--red);
      color: var(--paper);
      font-size: 20px;
      transition: transform 540ms var(--ease-out, cubic-bezier(.22,1,.36,1));
    }
    .mobile-pocket-board.is-remixing .mobile-pocket-remix-icon { transform: rotate(210deg) scale(.9); }
    .mobile-pocket-board.is-remixing { animation: mobile-pocket-nudge 620ms var(--ease-out, cubic-bezier(.22,1,.36,1)) both; }
    .mobile-pocket-board.is-dragging .mobile-pocket-sight circle:first-child { fill: var(--ink); }
    .mobile-pocket-board.has-landed .mobile-pocket-sight { animation: mobile-pocket-land 360ms var(--ease-out, cubic-bezier(.22,1,.36,1)); }

    .mobile-story-compass {
      --mobile-story-progress: 0;
      position: fixed;
      z-index: 82;
      right: max(13px, env(safe-area-inset-right));
      bottom: max(13px, calc(env(safe-area-inset-bottom) + 8px));
      display: grid;
      width: min(286px, calc(100vw - 26px));
      pointer-events: none;
      opacity: 0;
      transform: translate3d(0, 22px, 0) scale(.96);
      transform-origin: right bottom;
      transition: opacity 240ms ease, transform 520ms var(--ease-out, cubic-bezier(.22,1,.36,1));
      filter: drop-shadow(0 12px 22px #17181635);
    }
    .mobile-story-compass.is-visible {
      pointer-events: auto;
      opacity: 1;
      transform: translate3d(0, 0, 0) scale(1);
    }
    html.menu-open .mobile-story-compass,
    html.case-viewer-open .mobile-story-compass { opacity: 0; pointer-events: none; }
    .mobile-compass-trigger {
      position: relative;
      z-index: 2;
      min-height: 68px;
      display: grid;
      grid-template-columns: 46px minmax(0,1fr) auto;
      align-items: center;
      gap: 10px;
      width: 100%;
      padding: 9px 13px 9px 10px;
      background: var(--ink);
      color: var(--paper);
      border: 1px solid #f6f1eb34;
      text-align: left;
    }
    .mobile-compass-ring { width: 44px; height: 44px; transform: rotate(-90deg); }
    .mobile-compass-ring circle { fill: none; stroke-width: 1.6; }
    .mobile-compass-ring-track { stroke: #f6f1eb35; }
    .mobile-compass-ring-progress {
      stroke: var(--red);
      stroke-dasharray: 100;
      stroke-dashoffset: calc(100 - var(--mobile-story-progress));
      stroke-linecap: round;
      transition: stroke-dashoffset 180ms linear;
    }
    .mobile-compass-ring path { fill: none; stroke: var(--paper); stroke-width: 1.5; transform-origin: 22px 22px; transform: rotate(90deg); transition: transform 420ms var(--ease-out, cubic-bezier(.22,1,.36,1)); }
    .mobile-story-compass.is-open .mobile-compass-ring path { transform: rotate(270deg); }
    .mobile-compass-copy { min-width: 0; display: grid; gap: 1px; }
    .mobile-compass-copy small { font-size: 7px; line-height: 1.4; letter-spacing: .1em; color: #f6f1eb9b; font-variant-numeric: tabular-nums; }
    .mobile-compass-copy strong { overflow: hidden; text-overflow: ellipsis; font-size: 14px; line-height: 1.2; font-weight: 500; white-space: nowrap; }
    .mobile-compass-open { font-size: 7px; letter-spacing: .1em; color: #f6f1ebad; }
    .mobile-compass-panel {
      position: absolute;
      left: 0;
      right: 0;
      bottom: calc(100% - 1px);
      z-index: 1;
      max-height: min(58dvh, 460px);
      overflow-y: auto;
      overscroll-behavior: contain;
      padding: 15px 13px 11px;
      background: var(--paper);
      color: var(--ink);
      border: 1px solid var(--ink);
      border-bottom: 0;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transform: translateY(16px) scaleY(.92);
      transform-origin: bottom;
      transition: opacity 180ms ease, transform 420ms var(--ease-out, cubic-bezier(.22,1,.36,1)), visibility 0s linear 420ms;
    }
    .mobile-story-compass.is-open .mobile-compass-panel { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition-delay: 0s; }
    .mobile-compass-panel-label { display: block; margin-bottom: 9px; font-size: 7px; letter-spacing: .09em; color: var(--muted); }
    .mobile-compass-panel nav { border-top: 1px solid var(--line); }
    .mobile-compass-link {
      min-height: 45px;
      display: grid;
      grid-template-columns: 29px 1fr;
      align-items: center;
      border-bottom: 1px solid var(--line);
      font-size: 11px;
      line-height: 1.3;
    }
    .mobile-compass-link span { font-size: 8px; color: var(--muted); font-variant-numeric: tabular-nums; }
    .mobile-compass-link strong { font-weight: 500; }
    .mobile-compass-link[aria-current="location"] { color: var(--red); }
    .mobile-compass-link[aria-current="location"] strong::after { content: " — HERE"; font-size: 7px; letter-spacing: .08em; vertical-align: middle; }
    .case-study section.mobile-chapter-focus:focus { outline: 1px solid var(--red); outline-offset: 6px; }

    .archive-row > a { overflow: hidden; }
    .archive-row > a::after {
      content: "";
      position: absolute;
      z-index: -1;
      left: var(--mobile-touch-x, 50%);
      top: 50%;
      width: 34vw;
      aspect-ratio: 1;
      border-radius: 50%;
      background: var(--red);
      opacity: 0;
      transform: translate(-50%,-50%) scale(.05);
      transition: transform 480ms var(--ease-out, cubic-bezier(.22,1,.36,1)), opacity 360ms ease;
      pointer-events: none;
    }
    .archive-row > a.mobile-touch-active::after { opacity: 1; transform: translate(-50%,-50%) scale(3.4); }
    .archive-row > a.mobile-touch-active .arrow-icon { rotate: 45deg; }
    .archive-row > a.mobile-touch-active .archive-summary { color: var(--ink); }
    .filter { transform-origin: center; }
    .filter.mobile-touch-active { transform: scale(.94); }
    .filter.mobile-filter-pulse { animation: mobile-filter-pulse 440ms var(--ease-out, cubic-bezier(.22,1,.36,1)); }

    @media (hover: none) {
      .archive-row > a:hover::before { transform: scaleY(0); }
      .archive-row > a:hover { padding-inline: 0; }
    }

    @keyframes mobile-pocket-nudge {
      0%,100% { transform: rotate(0); }
      35% { transform: rotate(-.6deg) translateY(-3px); }
      68% { transform: rotate(.35deg) translateY(0); }
    }
    @keyframes mobile-pocket-land {
      0%,100% { scale: 1; }
      45% { scale: 1.32; }
    }
    @keyframes mobile-filter-pulse {
      0%,100% { box-shadow: 0 0 0 0 transparent; }
      42% { box-shadow: 0 0 0 5px var(--acid); }
    }
  }

  @media (max-width: 374px) {
    .mobile-pocket-studio { padding-block: 48px 58px; }
    .mobile-pocket-copy h2 { font-size: 14.5vw; }
    .mobile-story-compass { width: calc(100vw - 22px); right: 11px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .mobile-pocket-lines path,
    .mobile-pocket-disc,
    .mobile-pocket-sight,
    .mobile-pocket-board,
    .mobile-pocket-remix-icon,
    .mobile-story-compass,
    .mobile-compass-panel,
    .mobile-compass-ring path,
    .mobile-compass-ring-progress,
    .archive-row > a::after,
    .filter,
    .filter.mobile-filter-pulse { transition: none !important; animation: none !important; }
  }

  html[data-motion="off"] .mobile-pocket-lines path,
  html[data-motion="off"] .mobile-pocket-disc,
  html[data-motion="off"] .mobile-pocket-sight,
  html[data-motion="off"] .mobile-pocket-board,
  html[data-motion="off"] .mobile-pocket-remix-icon,
  html[data-motion="off"] .mobile-story-compass,
  html[data-motion="off"] .mobile-compass-panel,
  html[data-motion="off"] .mobile-compass-ring path,
  html[data-motion="off"] .mobile-compass-ring-progress,
  html[data-motion="off"] .archive-row > a::after,
  html[data-motion="off"] .filter,
  html[data-motion="off"] .filter.mobile-filter-pulse {
    transition: none !important;
    animation: none !important;
  }
}

/* Series cards (internal identity series and Behance links). Uses the existing Monalisa type, spacing and motion language. */
@layer v2 {
.concept-series{border-top:1px solid var(--line);overflow:clip}
.concept-series-heading{display:grid;grid-template-columns:.8fr 2.2fr 1fr;gap:35px;align-items:end;margin-bottom:65px}
.concept-series-heading>.eyebrow{align-self:start;max-width:180px;line-height:1.7}
.concept-series-heading h2{font-size:clamp(50px,6vw,105px);line-height:1.04;letter-spacing:-.055em}
.concept-series-heading p{font-size:15px;line-height:1.65;margin-top:26px}
.concept-series-heading>.text-link,.concept-series-count{justify-self:end}
.concept-series-count{font:italic 96px/.8 var(--serif);color:var(--muted);letter-spacing:-.06em}
.concept-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:65px 32px}
.concept-card{min-width:0}
.concept-card-link{display:block}
.concept-card-media{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--soft)}
.concept-card-media--board{aspect-ratio:4/3}
.concept-card-media>img{width:100%;height:100%;object-fit:cover;transition:transform .65s var(--ease-out)}
.concept-card-link:hover .concept-card-media>img{transform:scale(1.025)}
.concept-card-arrow{position:absolute;right:20px;bottom:20px;width:48px;height:48px;display:grid;place-items:center;color:var(--ink);background:var(--paper);border-radius:50%;transition:background .3s,rotate .3s}
.concept-card-link:hover .concept-card-arrow{background:var(--red);rotate:45deg}
/* Behance cover boards carry their own text (titles, AI-generated labels, page numbers) along the bottom edge, so on board media the arrow sits top-right. It scales with the card (20px inset and 48px at full desktop size, 28px minimum) so it also stays clear of the mona frame, which starts 16% of the card width from the top, down to 320px screens. */
.concept-card-media--board .concept-card-arrow{top:clamp(8px,4%,20px);right:clamp(8px,3%,20px);bottom:auto;width:clamp(28px,7.5%,48px);height:auto;aspect-ratio:1}
.concept-card-media--board .concept-card-arrow svg{width:50%;height:50%}
.concept-card-caption{display:grid;grid-template-columns:25px 1fr auto;gap:15px;padding-top:22px;align-items:start}
.concept-card-number{font-size:10px;padding-top:9px}
.concept-card-caption h3{font-size:clamp(27px,2.6vw,44px);line-height:1.1;font-weight:400;letter-spacing:-.05em}
.concept-card-caption p{font-size:12px;margin-top:10px;color:var(--muted)}
.concept-card-scope{font-size:10px;line-height:1.65;text-align:right;padding-top:8px;max-width:130px}
.concept-series-note{font-size:12px;line-height:1.6;margin-top:42px;color:var(--muted)}
.concept-series-footer{display:flex;align-items:baseline;justify-content:space-between;gap:25px}.concept-series-footer>.text-link{font-size:12px;min-height:44px}
.concept-hero h1{max-width:none;font-size:clamp(80px,10.5vw,180px);line-height:.97;letter-spacing:-.065em}
.concept-hero-bottom{display:flex;justify-content:space-between;gap:40px;align-items:end;margin-top:40px}
.concept-hero-bottom p{font-size:clamp(21px,2.6vw,38px);max-width:660px;line-height:1.25;letter-spacing:-.025em}
.concept-hero-bottom>span{font-size:10px;line-height:1.8;letter-spacing:.045em;text-align:right;flex-shrink:0}
.concept-hero-art .concept-cover{max-width:none;margin:0}
.concept-hero-art .concept-cover img{width:100%;height:auto;max-height:none;object-fit:contain;background:var(--soft)}
.concept-brief{display:grid;grid-template-columns:1fr 1.2fr;gap:10%;border-bottom:1px solid var(--line)}
.concept-brief h2{font-size:clamp(42px,4.8vw,76px);line-height:1.08;letter-spacing:-.04em;max-width:560px;margin-top:35px}
.concept-brief>div>p{font-size:17px;line-height:1.7;max-width:690px;margin-top:20px}
.concept-brief>div>.concept-lead{font-size:clamp(23px,2.4vw,35px);line-height:1.36;letter-spacing:-.02em;margin-top:0}
.concept-brief dl{margin-top:40px}
.concept-brief dl>div{display:grid;grid-template-columns:120px 1fr;gap:25px;padding-block:17px;border-top:1px solid var(--line);font-size:12px;line-height:1.7}
.concept-brief dt{color:var(--muted)}
.concept-section{padding-block:70px 25px}
.concept-body.case-editorial{display:block;padding:0}
.concept-case + .case-viewer .case-viewer-stage img{background:var(--paper)}
.concept-section-heading{display:grid;grid-template-columns:1fr 2.2fr;gap:35px;margin-bottom:38px}
.concept-section-heading>.eyebrow{padding-top:8px;line-height:1.7}
.concept-section-heading h2{font-size:clamp(38px,4.2vw,67px);line-height:1.08;letter-spacing:-.045em}
.concept-section-heading p{font-size:17px;line-height:1.7;max-width:700px;margin-top:22px}
.concept-artwork-layout{display:grid;gap:28px;align-items:start}
.concept-artwork-layout--pair,.concept-artwork-layout--gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
.concept-artwork-layout--gallery .concept-figure:last-child:nth-child(odd){grid-column:1/-1}
.concept-figure{margin:0;min-width:0}
.concept-figure img{display:block;width:100%;height:auto;max-width:100%;object-fit:contain}
.concept-figure figcaption{margin-top:13px;font-size:11px;line-height:1.65;color:var(--muted)}
.concept-artwork-link{position:relative;display:block;overflow:hidden;background:var(--soft)}
.concept-zoom{position:absolute;right:16px;bottom:16px;display:grid;place-items:center;width:34px;height:34px;background:var(--paper);color:var(--ink);opacity:0;transform:translateY(5px);transition:opacity .2s,transform .2s}
.concept-artwork-link:hover .concept-zoom,.concept-artwork-link:focus-visible .concept-zoom{opacity:1;transform:none}
.concept-zoom svg{width:19px;height:19px}
.concept-board{width:min(100%,880px);margin-inline:auto}
.concept-detail-note{font-size:13px;line-height:1.7;max-width:690px;margin:24px 0 0 auto;color:var(--muted)}
.concept-palette{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.concept-colour-chip{display:block;aspect-ratio:1.25;border:1px solid #17181612}
.concept-colour>div{display:flex;justify-content:space-between;gap:15px;margin-top:17px;font-size:11px;line-height:1.6}
.concept-colour strong{font-weight:600}
.concept-colour>p{font-size:12px;line-height:1.65;margin-top:8px;color:var(--muted)}
.concept-type-note{display:grid;grid-template-columns:1fr 2.2fr;gap:35px;padding-block:32px;margin-top:28px;border-top:1px solid var(--line)}
.concept-type-note p{font-size:18px;line-height:1.65;max-width:750px}
.concept-motion{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);gap:10%;align-items:center;max-width:1160px;margin-inline:auto}
.concept-motion video{display:block;width:100%;max-width:420px;height:auto;background:var(--ink)}
.concept-motion>div{max-width:430px}
.concept-motion p{font-size:24px;line-height:1.5;letter-spacing:-.02em;margin-block:25px 30px}
.concept-social-strip{display:flex;gap:22px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;padding-bottom:20px;scrollbar-width:thin;scrollbar-color:var(--ink) var(--soft)}
.concept-social-frame{flex:0 0 clamp(235px,30%,390px);scroll-snap-align:start}
.concept-scroll-note{font-size:11px;line-height:1.6;margin-top:15px;color:var(--muted)}
.concept-downloads{display:grid;grid-template-columns:1fr 2.2fr;gap:35px;margin-top:70px;padding-block:40px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.concept-downloads>div{display:flex;flex-wrap:wrap;gap:25px 38px}
.concept-downloads .text-link{font-size:13px;min-height:44px}
.concept-credits{padding-top:48px}
.concept-credits p+p{margin-top:12px}
.concept-archive{margin-top:65px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.concept-archive>summary{position:relative;display:grid;grid-template-columns:1fr 2.2fr;gap:24px 35px;padding-block:42px;list-style:none;cursor:pointer;padding-right:65px}
.concept-archive>summary::-webkit-details-marker{display:none}
.concept-archive>summary>.eyebrow{align-self:center;line-height:1.7}
.concept-archive-title{font-size:clamp(36px,4vw,64px);line-height:1.1;letter-spacing:-.045em}
.concept-archive-title em{font-family:var(--serif);font-weight:400}
.concept-archive-description{grid-column:2;font-size:14px;line-height:1.6;color:var(--muted)}
.concept-archive-toggle{position:absolute;right:0;top:50%;font-size:38px;line-height:1;transform:translateY(-50%);font-weight:300}
.concept-archive[open]>summary .concept-archive-toggle{transform:translateY(-50%) rotate(45deg)}
.concept-archive>summary:focus-visible{outline:2px solid var(--red);outline-offset:8px}
.concept-archive-content>.concept-section{padding-inline:0}
.concept-archive-content{padding-bottom:40px}
@media(min-width:1100px){.concept-card:nth-child(even){margin-top:75px}.concept-grid{column-gap:48px}}
@media(max-width:1000px){.concept-series-heading{grid-template-columns:1fr 2fr}.concept-series-heading>.text-link,.concept-series-count{grid-column:2;justify-self:start}.concept-card-scope{display:none}.concept-card-caption{grid-template-columns:25px 1fr}.concept-brief{gap:6%}.concept-brief dl>div{grid-template-columns:95px 1fr;gap:15px}.concept-colour>div{display:block}.concept-colour>div>span{display:block;margin-top:3px}}
@media(max-width:700px){
.concept-archive{margin-top:36px}.concept-archive>summary{grid-template-columns:1fr;gap:18px;padding-block:30px;padding-right:42px}.concept-archive-title{font-size:38px}.concept-archive-description{grid-column:auto;font-size:13px}.concept-archive>summary>.eyebrow{font-size:9px}.concept-archive-toggle{font-size:30px}.concept-archive-content{padding-bottom:22px}
.concept-series-footer{display:block}.concept-series-footer>.text-link{margin-top:18px;font-size:11px}
.concept-series-heading{grid-template-columns:1fr;gap:22px;margin-bottom:35px}.concept-series-heading>.eyebrow{font-size:9px;max-width:none}.concept-series-heading h2{font-size:12.5vw;line-height:1.06}.concept-series-heading p{font-size:14px;margin-top:22px}.concept-series-heading>.text-link{grid-column:auto;justify-self:start}.concept-series-count{display:none}.concept-grid{grid-template-columns:1fr;gap:40px}.concept-card-arrow{width:39px;height:39px;right:14px;bottom:14px}.concept-card-arrow svg{width:20px;height:20px}.concept-card-caption{padding-top:17px;gap:10px;grid-template-columns:22px 1fr}.concept-card-caption h3{font-size:30px}.concept-card-caption p{font-size:11px;margin-top:7px}.concept-series-note{font-size:11px;margin-top:30px}
.concept-hero h1{font-size:16vw;line-height:1;overflow-wrap:normal}.concept-hero-bottom{display:block;margin-top:25px}.concept-hero-bottom p{font-size:22px;line-height:1.3}.concept-hero-bottom>span{display:block;text-align:left;margin-top:26px;font-size:9px}.concept-brief{grid-template-columns:1fr;gap:30px}.concept-brief h2{font-size:42px;margin-top:24px}.concept-brief>div>p{font-size:16px}.concept-brief>div>.concept-lead{font-size:23px}.concept-brief dl{margin-top:27px}.concept-brief dl>div{font-size:11px;gap:16px;grid-template-columns:95px 1fr}
.concept-section{padding-block:44px 12px}.concept-section-heading{grid-template-columns:1fr;gap:20px;margin-bottom:27px}.concept-section-heading>.eyebrow{font-size:9px;padding-top:0}.concept-section-heading h2{font-size:38px}.concept-section-heading p{font-size:16px;margin-top:19px}.concept-artwork-layout{gap:24px}.concept-artwork-layout--pair,.concept-artwork-layout--gallery{grid-template-columns:1fr}.concept-figure figcaption{font-size:10px;margin-top:11px}.concept-zoom{width:30px;height:30px;right:10px;bottom:10px;opacity:1;transform:none}.concept-detail-note{font-size:12px;margin-top:18px}
.concept-palette{grid-template-columns:repeat(2,minmax(0,1fr));gap:25px 14px}.concept-colour>div{margin-top:12px;font-size:10px}.concept-colour>p{font-size:11px}.concept-type-note{grid-template-columns:1fr;gap:17px;padding-block:25px}.concept-type-note .eyebrow{font-size:9px}.concept-type-note p{font-size:16px}.concept-motion{grid-template-columns:1fr;gap:30px}.concept-motion video{width:min(100%,360px);margin-inline:auto}.concept-motion p{font-size:21px;margin-block:18px 22px}.concept-social-strip{gap:15px}.concept-social-frame{flex-basis:78%}.concept-scroll-note{font-size:10px}.concept-downloads{grid-template-columns:1fr;gap:20px;padding-block:30px;margin-top:44px}.concept-downloads>.eyebrow{font-size:9px}.concept-downloads>div{display:block}.concept-downloads .text-link{display:flex;justify-content:space-between;font-size:13px;padding-block:12px;border-bottom:1px solid var(--line)}.concept-downloads .text-link:last-child{border-bottom:0}.concept-credits{padding-top:30px}
}
@media(prefers-reduced-motion:reduce){.concept-card-media>img,.concept-card-arrow,.concept-zoom{transition:none}.concept-card-link:hover .concept-card-media>img{transform:none}}
html[data-motion=off] .concept-card-media>img,html[data-motion=off] .concept-card-arrow,html[data-motion=off] .concept-zoom{transition:none}
}

/* A content-sized phone hero: browser chrome can change height without collisions. */
@layer mobileRefinement {

  @media (max-width: 700px) {
    .avant-hero { min-height: 0; }
    .avant-stage {
      display: flow-root;
      height: auto;
      min-height: 0;
      max-height: none;
      padding: 28px var(--gutter) 22px;
    }
    .avant-title {
      position: relative;
      inset: auto;
      width: 100%;
      font-size: clamp(47px, 14.9vw, 98px);
      transform: none;
      translate: none;
      margin: 0;
    }
    .avant-title .mark-row {
      position: relative;
      inset: auto;
      margin-top: clamp(168px, 53vw, 320px);
      font-size: 2.05em;
      line-height: .94;
      padding-bottom: .12em;
    }
    .hero-side-note {
      position: relative;
      inset: auto;
      display: grid;
      grid-template-columns: 6px minmax(0, 1fr) auto;
      align-items: center;
      gap: 11px;
      margin-top: 16px;
      min-height: 44px;
      font-size: 11px;
      line-height: 1.6;
    }
    .hero-side-note .live-dot { align-self: start; margin-top: 10px; }
    .hero-side-note br { display: block; }
    .hero-side-note > span:last-of-type { display: block; }
    .avant-bottom { align-items: flex-start; padding-block: 18px 22px; }

    /* The chapter index remains within reach without covering a third of the artwork. */
    .mobile-story-compass { width: min(205px, calc(100vw - 26px)); }
    .mobile-compass-trigger { min-height: 52px; grid-template-columns: 32px minmax(0,1fr) auto; padding: 7px 10px; gap: 8px; }
    .mobile-compass-ring { width: 32px; height: 32px; }
    .mobile-compass-copy strong { font-size: 12px; }
    .mobile-compass-open { font-size: 7px; }
    .mobile-compass-panel { left: auto; width: min(286px, calc(100vw - 26px)); }
    .mobile-compass-panel a { min-height: 44px; }
    .mobile-story-compass.is-scrolling:not(.is-open):not(:focus-within) { opacity: 0; pointer-events: none; transform: translateY(12px); }

    .mobile-menu { padding-bottom: max(24px, env(safe-area-inset-bottom)); }
    .mobile-menu nav { margin-top: clamp(12px, 3dvh, 28px); }
    .mobile-menu nav a { font-size: clamp(31px, 8.4vw, 44px); padding-block: clamp(10px, 1.8dvh, 17px); }
  }

  @media (max-width: 374px) {
    .avant-stage { padding-top: 25px; }
    .hero-side-note { font-size: 10px; gap: 9px; }
  }
}

@layer mobile-choreography {
  @media (max-width: 700px) {
    .mobile-concept-filmstrip {
      display: flex;
      gap: 14px;
      width: 100%;
      overflow-x: auto;
      overflow-y: hidden;
      overscroll-behavior-x: contain;
      scroll-snap-type: x mandatory;
      scroll-padding-inline: 0;
      padding: 0 0 15px;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
    }
    .mobile-concept-filmstrip::-webkit-scrollbar { display: none; }
    .mobile-concept-filmstrip::after {
      content: "";
      flex: 0 0 28px;
      height: 1px;
    }
    .mobile-concept-filmstrip > .concept-card {
      flex: 0 0 calc(100% - 42px);
      scroll-snap-align: start;
      scroll-snap-stop: normal;
      opacity: .62;
      transform: translate3d(0, 9px, 0);
      transition: opacity 340ms ease, transform 520ms cubic-bezier(.16,1,.3,1);
    }
    .mobile-concept-filmstrip > .concept-card[data-mobile-filmstrip-active="true"] {
      opacity: 1;
      transform: translate3d(0,0,0);
    }
    .mobile-concept-filmstrip .concept-card-link {
      min-height: 100%;
    }
    .mobile-concept-filmstrip .concept-card-link:focus-visible {
      outline-offset: -3px;
    }
    .mobile-filmstrip-controls {
      display: grid;
      grid-template-columns: minmax(0,1fr) auto;
      align-items: stretch;
      min-height: 58px;
      margin-top: 7px;
      background: var(--ink);
      color: var(--paper);
      border-bottom: 3px solid var(--red);
    }
    .mobile-filmstrip-position {
      display: grid;
      grid-template-columns: auto minmax(50px, 1fr);
      align-items: center;
      gap: 15px;
      min-width: 0;
      padding: 7px 17px;
    }
    .mobile-filmstrip-count {
      font-size: 10px;
      line-height: 1;
      letter-spacing: .085em;
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
    }
    .mobile-filmstrip-progress {
      display: block;
      height: 2px;
      overflow: hidden;
      background: color-mix(in srgb, var(--paper) 28%, transparent);
    }
    .mobile-filmstrip-progress > i {
      display: block;
      width: var(--mobile-filmstrip-position, 25%);
      height: 100%;
      background: var(--red);
      transition: width 340ms cubic-bezier(.16,1,.3,1);
    }
    .mobile-filmstrip-actions {
      display: flex;
      border-left: 1px solid color-mix(in srgb, var(--paper) 28%, transparent);
    }
    .mobile-filmstrip-actions button {
      display: grid;
      place-items: center;
      width: 52px;
      min-width: 44px;
      min-height: 44px;
      padding: 0;
      background: transparent;
      color: inherit;
      font-size: 20px;
      line-height: 1;
    }
    .mobile-filmstrip-actions button + button {
      border-left: 1px solid color-mix(in srgb, var(--paper) 28%, transparent);
    }
    .mobile-filmstrip-actions button:not(:disabled):active {
      background: var(--red);
      color: var(--ink);
    }
    .mobile-filmstrip-actions button:disabled {
      opacity: .34;
    }
    .mobile-filmstrip-actions button:focus-visible {
      position: relative;
      z-index: 1;
      outline: 2px solid var(--red);
      outline-offset: -4px;
    }
    .mobile-scroll-art {
      translate: 0 var(--mobile-art-shift, 0px);
    }
    .mobile-scroll-heading {
      position: relative;
      padding-top: 17px;
    }
    .mobile-scroll-heading::before {
      content: "";
      position: absolute;
      inset: 0 0 auto;
      height: 1px;
      background: var(--red);
      transform: scaleX(var(--mobile-section-rule, .18));
      transform-origin: 0 50%;
    }
    .mobile-scroll-heading > .eyebrow {
      translate: 0 var(--mobile-section-index-shift, 0px);
    }
  }

  html[data-motion="off"] .mobile-concept-filmstrip > .concept-card {
    opacity: 1;
    transform: none;
    transition: none;
  }
  html[data-motion="off"] .mobile-scroll-art,
  html[data-motion="off"] .mobile-scroll-heading > .eyebrow { translate: none; }
  html[data-motion="off"] .mobile-filmstrip-progress > i { transition: none; }
  html[data-motion="off"] .mobile-scroll-heading::before { transform: scaleX(1); }

  @media (prefers-reduced-motion: reduce) {
    .mobile-concept-filmstrip { scroll-behavior: auto; }
    .mobile-concept-filmstrip > .concept-card {
      opacity: 1;
      transform: none;
      transition: none;
    }
    .mobile-scroll-art,
    .mobile-scroll-heading > .eyebrow { translate: none; }
    .mobile-filmstrip-progress > i { transition: none; }
    .mobile-scroll-heading::before { transform: scaleX(1); }
  }
}

/* v5 (4 Oct 2026): v2.4 kept whole; only the owner's named edits live here.
   E1 white ground · E2 black pills · E3 clean work cards · E6 nav. Loaded last. */
@layer v5 {
:root{--paper:#ffffff;--ink:#171816;--muted:#5f615b;--line:rgba(23,24,22,.14);--soft:#f3f3f1;--hair:rgba(23,24,22,.14)}
body{background:#ffffff;color:var(--ink)}
::selection{background:var(--red);color:#fff}

/* E6 nav: v2.4 bar, now on white with the ink lockup */
.site-header{background:#ffffff;color:var(--ink);border-bottom:1px solid var(--hair)}
.desktop-nav a::after{background:var(--ink)}
.menu-trigger{color:var(--ink)}
.menu-lines,.menu-lines::before,.menu-lines::after{border-color:var(--ink)}
.header-contact.nav-pill{background:var(--ink);color:#fff;border-radius:999px;text-transform:none;letter-spacing:0;font-size:15px;font-weight:500;min-height:44px;padding:0 22px;gap:0;transition:background .28s var(--ease-out),transform .16s var(--ease-out)}
.header-contact.nav-pill:hover{background:#000;color:#fff}
.header-contact.nav-pill:active{transform:scale(.97)}

/* E2 the one primary action */
.start-pill{display:inline-flex;align-items:center;gap:14px;min-height:52px;padding:0 6px 0 24px;border-radius:999px;background:var(--ink);color:#fff;font-size:15px;font-weight:500;line-height:1;letter-spacing:0;white-space:nowrap;transition:background .28s var(--ease-out),transform .16s var(--ease-out)}
.start-pill-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#fff;color:var(--ink);transition:rotate .5s var(--ease-out),background .3s}
.start-pill-icon svg{width:18px;height:18px}
.start-pill:hover{background:#000}
.start-pill:hover .start-pill-icon{rotate:45deg;background:var(--red);color:#fff}
.start-pill:active{transform:scale(.97)}
.start-pill:focus-visible{outline:2px solid var(--red);outline-offset:4px}

/* E1 hero on white */
.avant-hero{background:#ffffff;color:var(--ink)}
.hero-readout{font-variant-numeric:tabular-nums;color:var(--muted)}
.avant-bottom{border-top:1px solid var(--hair)}
.round-icon{border-color:rgba(23,24,22,.32)}
.round-link:hover .round-icon{color:#fff}
.hero-side-note{color:var(--ink)}

/* manifesto: same scroll fill, lighter unfilled tone for white */
.manifesto{background:#ffffff}
.manifesto h2>span{background:linear-gradient(90deg,var(--ink) 0%,var(--ink) var(--fill,100%),#cfd0cb var(--fill,100%),#cfd0cb 100%);-webkit-background-clip:text;background-clip:text}
.manifesto-bottom{grid-template-columns:1fr 1.3fr 1fr}

/* ink band (v2.4 world section) stays carbon; white type */
.exhibition{background:var(--ink);color:#fff}
.exhibition-heading p:empty,.study-caption p:empty{display:none}
.brand-board-mark-plate{background:#ffffff}

/* E3 work cards: no badge, no frame, the work carries it */
.concept-series{border-top:0}
.concept-card-media{background:var(--soft);outline:0;box-shadow:none}
.concept-card-link,.concept-card-link:hover,.concept-card-link:active{outline:0;box-shadow:none;background:transparent}
.concept-card-arrow{display:none}
.concept-card-link:focus-visible{outline:2px solid var(--ink);outline-offset:4px}

/* marquee: the six service names on white (the colour bands stay two) */
.kinetic-message{background:#ffffff;color:var(--ink);border-block:1px solid var(--hair)}
.kinetic-message-track svg{color:var(--red)}
.kinetic-message-track>span{gap:.42em;padding-right:.42em}

/* services accordion */
.practice-section{border-top:0}
.service-tags span{border-color:var(--hair)}
.practice-content .service-detail .text-link{margin-top:6px}

/* closing: v2.4 vermilion band; white logo, black pill */
.site-footer{background:var(--red);color:var(--ink)}
.footer-invitation{align-items:end}
.footer-invitation h2 em .closing-period{color:#ffffff}
.footer-socials a,.footer-email{color:var(--ink)}
.footer-brand-wordmark{filter:none}

/* phone menu: v2.4 vermilion sheet plus the pill */
.menu-pill{margin-top:28px}
.menu-pill .start-pill{min-height:56px;font-size:16px}

/* mobile pocket: white, not a third band */
@media (max-width:700px){
  .mobile-pocket-studio{background:#ffffff;color:var(--ink);border-top:1px solid var(--hair)}
  .mobile-pocket-heading{border-bottom-color:var(--hair)}
  .mobile-pocket-coordinate{color:var(--muted)}
  .mobile-pocket-board{border-color:var(--hair)}
  .avant-bottom{display:grid;grid-template-columns:auto minmax(0,1fr);row-gap:18px}
  .avant-bottom .hero-pill{grid-column:1 / -1;justify-self:start}
  .avant-bottom p{width:auto;max-width:none}
  .header-contact.nav-pill{display:none}
  .footer-invitation{flex-direction:column;align-items:flex-start;gap:26px}
}
}
@layer v5 {
@media (max-width:700px){
}
}
/* round 2 fixes */
@layer v5 {
.practice-heading{position:relative}
.practice-count{display:block;margin-top:28px;font:italic 96px/.8 var(--serif);color:var(--muted);letter-spacing:-.06em}
@media (min-width:701px){
  .closing-pill{min-height:68px;padding:0 8px 0 30px;gap:20px;font-size:16px}
  .closing-pill .start-pill-icon{width:52px;height:52px}
  .closing-pill .start-pill-icon svg{width:22px;height:22px}
}
}

/* round 3 (critic list, 4 Oct): v2.4 craft restored on the white ground */
@layer v5 {

/* hero bottom: v2.4's three-part rule (link / line / caps caption) */
.hero-services{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,max-content);column-gap:34px;font-size:10px;line-height:1.8;letter-spacing:.045em;color:var(--ink)}
.hero-coordinate a{color:inherit;text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .35s var(--ease-out)}
.hero-coordinate a:hover{background-size:100% 1px}
@media (max-width:700px){
  .avant-bottom{display:flex;align-items:center;justify-content:space-between}
  .hero-services{grid-template-columns:1fr;font-size:8px;line-height:1.75;letter-spacing:.07em;text-align:right}
  .hero-side-note .live-dot{align-self:center;margin-top:0}
}

/* manifesto bottom: m left, round link in the middle column */
.manifesto-bottom{grid-template-columns:1fr 1.3fr 1fr;align-items:center}
.manifesto-bottom .manifesto-link{grid-column:2;justify-self:start}
@media (max-width:700px){.manifesto-bottom{grid-template-columns:46px 1fr}.manifesto-bottom .manifesto-link{grid-column:2}}

/* marquee: an ink band again, white type, vermilion m */
.kinetic-message{background:var(--ink);color:#fff;border-block:0}
.kinetic-message-track svg{color:var(--red)}
.kinetic-message-track>span{gap:.42em;padding-right:.42em}

/* services heading: grotesk line + italic serif line, held while the list scrolls */
.practice-heading{position:sticky;top:110px;align-self:start}
.practice-heading h2 em.practice-count{display:inline;margin:0;font:inherit;font-family:var(--serif);font-style:italic;font-weight:400;font-size:1.12em;color:var(--ink);letter-spacing:-.03em}
@media (max-width:700px){.practice-heading{position:static}.practice-heading h2 em.practice-count{font-size:1.12em;margin:0}}

/* closing: v2.4's round CTA, now a black disc with the one label */
.footer-cta.start-disc{background:var(--ink);color:#fff;border:0;gap:14px;width:210px}
.footer-cta.start-disc span{font-size:16px;letter-spacing:0;line-height:1.2;font-weight:500;text-transform:none}
.footer-cta.start-disc svg{width:54px;height:54px;transition:rotate .5s var(--ease-out)}
.footer-cta.start-disc:hover{background:#000;color:#fff;rotate:0deg}
.footer-cta.start-disc:hover svg{rotate:45deg}
.footer-cta.start-disc:focus-visible{outline:2px solid var(--ink);outline-offset:5px}
@media (max-width:700px){
  .footer-invitation{flex-direction:row;align-items:flex-end;gap:12px}
  .footer-cta.start-disc{width:118px;min-width:118px;gap:6px;margin-bottom:6px}
  .footer-cta.start-disc span{display:block;font-size:15px;text-align:center;max-width:9ch}
  .footer-cta.start-disc svg{width:26px;height:26px}
}

/* phone composition: v2.4 lead-in, ink italic on white */
@media (max-width:700px){
  .mobile-pocket-copy h2{color:var(--ink)}
  .mobile-pocket-copy h2 em{color:var(--ink)}
}
}

/* Story layer (4 Oct 2026): one story, two device journeys. Unlayered, so it sits above v5's @layer rules.
   Motion: transform, opacity and clip-path only. Tokens from MOTION-PLAN. */
:root{
  --m-out:cubic-bezier(.16,1,.3,1);--m-punch:cubic-bezier(.7,0,.16,1);--m-move:cubic-bezier(.77,0,.175,1);
  --m-sheet:cubic-bezier(.32,.72,0,1);--m-pop:cubic-bezier(.34,1.36,.64,1);--m-exit:cubic-bezier(.4,0,.6,1);
  --coral:#ed432b;--ink2:#141414;--canvas:#F4F0E8;
}
html{-webkit-tap-highlight-color:transparent}

/* ---------- section caption: rule draws, digits roll (M03) ---------- */
.m-roll{display:inline-flex;font-variant-numeric:tabular-nums;vertical-align:top}
.m-roll i{display:inline-block;height:1.5em;overflow:clip;font-style:normal;line-height:1.5}
.m-roll b{display:block;font-weight:inherit;transform:translateY(calc(var(--n)*-1.5em))}
.m-roll br{display:block}
.m-armed .m-roll b{transform:translateY(0)}
.m-in .m-roll b{transform:translateY(calc(var(--n)*-1.5em));transition:transform .34s var(--m-punch)}
.m-in .m-roll i+i b{transition-delay:30ms}
.ch-cap{display:flex;align-items:center;gap:0;text-transform:uppercase;position:relative}
.ch-rule{position:absolute;left:0;right:0;top:-12px;height:1px;background:currentColor;opacity:.25;transform-origin:left}
.m-armed .ch-rule{transform:scaleX(0)}
.m-in .ch-rule{transform:scaleX(1);transition:transform .9s var(--m-out)}

/* ---------- kinetic type: masked line rise + italic write-in (M04, M05) ---------- */
.m-lines .ln{display:block;overflow:clip;padding-bottom:.14em;margin-bottom:-.14em}
.m-lines .ln>*{display:inline-block;transform-origin:0 100%}
.m-armed.m-lines .ln>span{transform:translateY(110%) rotate(2.5deg)}
.m-armed.m-lines .ln>em,.m-armed .m-write{clip-path:inset(-10% 100% -25% -6%);transform:translateX(-.12em) skewX(-10deg)}
.m-in.m-lines .ln>span{transform:none;transition:transform .7s var(--m-out) calc(var(--i,0)*60ms)}
.m-in.m-lines .ln>em,.m-in .m-write{clip-path:inset(-10% -6% -25% -6%);transform:none;transition:clip-path .6s var(--m-punch) calc(var(--i,0)*50ms + 120ms),transform .6s var(--m-out) calc(var(--i,0)*50ms + 120ms)}
.lean{display:inline-block;will-change:transform}

/* ---------- chapters: a track with a sticky stage ---------- */
.ch{position:relative;background:#fff;color:var(--ink);--track:260}
.ch-ink{background:var(--ink2);color:#fff}
#ch-02{--track:250}#ch-03{--track:240}#ch-04{--track:215}#ch-05{--track:200}#ch-06{--track:180}
#ch-06 .ch-stage{grid-template-columns:minmax(240px,24%) 1fr}
.ch{height:calc(var(--track)*1vh)}
.ch-stage{position:sticky;top:0;height:100vh;overflow:clip;display:grid;grid-template-columns:minmax(260px,31%) 1fr;gap:clamp(24px,3vw,56px);padding:110px var(--gutter) 48px;contain:layout paint}
.ch-head{align-self:center;display:grid;gap:26px;position:relative;z-index:3}
.ch-head h2{font-size:clamp(44px,4.6vw,84px);line-height:1;letter-spacing:-.065em;font-weight:400;margin:0}
.ch-head h2 em{font-size:1.08em}
.ch-cap{font-size:12px;letter-spacing:.065em}
.ch-steps{position:relative;height:1.5em;font-size:12px;letter-spacing:.065em;text-transform:uppercase}
.ch-step{position:absolute;left:0;top:0;white-space:nowrap;opacity:0;transform:translateY(8px);transition:opacity .15s var(--m-exit),transform .2s var(--m-out)}
.ch-step::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--coral);margin-right:10px;vertical-align:1px}
.ch-step.on{opacity:1;transform:none;transition:opacity .2s var(--m-out),transform .2s var(--m-out)}
.ch-scene{position:relative;min-height:0;min-width:0}
.ch-seg{position:absolute;left:var(--gutter);right:var(--gutter);top:94px;display:flex;gap:4px;z-index:4;opacity:.9}
.ch-seg i{flex:1;height:2px;background:currentColor;opacity:.16;overflow:clip;position:relative}
.ch-ink .ch-seg i{opacity:.3}
.ch-seg b{position:absolute;inset:0;background:currentColor;transform-origin:left;transform:scaleX(var(--s,0))}
.ch-seg i.done{opacity:.5}

/* ---------- 02 Branding: the mark constructs ---------- */
.c2-scene{display:grid;place-items:center;align-content:center;gap:28px}
#ch-02{--cbg:#F4F0E8;--cink:#141414;--cdot:#ED432B}
.c2-square{--sz:min(620px,64vh,52vw);width:var(--sz);height:var(--sz);position:relative}
.c2-bg{position:absolute;inset:0;background:var(--cbg)}
.c2-pattern{position:absolute;inset:0;opacity:0}
.c2-pattern img{width:100%;height:100%;display:block}
.c2-mark{position:absolute;inset:16%;transform-origin:50% 50%}
.c2-l{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.c2-l path,.c2-l rect:not(.g-c){fill:var(--cink)}
.l-frame rect{fill:none!important;stroke:var(--cink);stroke-width:32.7}
.l-grid g{stroke:var(--cink);stroke-width:1;vector-effect:non-scaling-stroke;fill:none;opacity:.22}
.l-grid path,.lens-grid path{fill:none!important;stroke:currentColor;vector-effect:non-scaling-stroke}
.l-guide{color:var(--coral)}
.l-guide path,.l-guide circle,.l-dup circle,.lens-grid circle,.lens-grid rect.g-c{fill:none!important;stroke:var(--coral);stroke-width:1.4;stroke-dasharray:6 5;vector-effect:non-scaling-stroke}
.l-guide .g-base path{stroke:var(--coral);opacity:.6}
.l-dot circle{fill:var(--cdot)}
.c2-type{position:absolute;left:0;right:0;top:110%;height:24%;color:var(--cink)}
.c2-type span{position:absolute;inset:0;display:grid;place-items:center;font-size:calc(var(--sz)*.17);letter-spacing:-.06em;line-height:1;opacity:0}
.c2-lens{position:absolute;inset:16%;pointer-events:none;clip-path:circle(0 at 50% 50%);color:var(--coral)}
.c2-lens .c2-l{color:var(--coral)}
.lens-grid g{stroke:var(--coral);opacity:.75}
.c2-boards{position:absolute;left:0;right:0;top:12.5%;height:75%}
.c2-board{position:absolute;inset:0;margin:0;overflow:clip;clip-path:inset(100% 0 0 0)}
.c2-board img{width:100%;height:100%;object-fit:cover;display:block}
.c2-edges i{position:absolute;background:#F4F0E8;opacity:0}
.c2-edges .t,.c2-edges .b{left:0;right:0;height:1.4%}.c2-edges .t{top:0}.c2-edges .b{bottom:0}
.c2-edges .l,.c2-edges .r{top:0;bottom:0;width:1.4%}.c2-edges .l{left:0}.c2-edges .r{right:0}
.c2-chips{display:flex;gap:2px}
.c2-chip{width:44px;height:44px;border-radius:50%;background:transparent;border:0;padding:0;display:grid;place-items:center;opacity:0;transform:scale(.6);transition:transform .2s var(--m-out);color:inherit}
.c2-chip i{display:block;width:26px;height:26px;border-radius:50%;background:var(--c);box-shadow:0 0 0 1px #ffffff40;transition:transform .2s var(--m-out),box-shadow .2s}
.c2-chip.on{opacity:1;transform:scale(1);transition:transform .42s var(--m-pop),opacity .2s}
.c2-chip:focus-visible{opacity:1;transform:scale(1)} /* a chip reached by Tab is never invisible (finisher fix 5 Oct) */
.c2-chip.act i{transform:scale(1.14);box-shadow:0 0 0 1px #ffffff40,0 0 0 4px #141414,0 0 0 5.5px #fff}
.c2-chip:active{transform:scale(.92)}

/* ---------- 03 Packaging: dieline → fold → turn → world → one grid ---------- */
.c3-flat{position:absolute;left:0;top:2%;height:94%;aspect-ratio:940/1870;z-index:1}
.c3-dieline{width:100%;height:100%;display:block}
.c3-flat .cut path{fill:none;stroke:#141010;stroke-width:3}
.c3-flat .fold path{fill:none;stroke:var(--coral);stroke-width:3;stroke-dasharray:10 7}
.c3-dieline .cut,.c3-dieline .fold{transition:none}
.c3-box-wrap{position:absolute;left:52%;top:50%;width:min(46vh,30vw);aspect-ratio:1;translate:-50% -50%;z-index:3;touch-action:pan-y;cursor:grab}
.c3-box3d{position:absolute;inset:0;perspective:1400px;display:grid;place-items:center}
.c3-lid{position:relative;width:62%;aspect-ratio:1;transform-style:preserve-3d}
.c3-lid .f{position:absolute;background-size:100% 100%;backface-visibility:visible}
.c3-lid .top{inset:0}
.c3-lid .w{left:0;width:100%;height:29.2%;top:100%;transform-origin:50% 0}
.c3-lid .hinge{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d}
.c3-turn{position:absolute;inset:-4% -12%;opacity:0;overflow:clip;pointer-events:none;border-radius:20px;background:#141010;box-shadow:0 40px 80px -40px rgba(23,24,22,.55)}
.c3-sprite{position:absolute;left:50%;top:50%;width:100%;aspect-ratio:4/3;translate:-50% -50%;overflow:clip}
.c3-sprite i{position:absolute;left:0;top:0;width:600%;height:600%;background-size:100% 100%;will-change:transform}
.c3-sprite.bh{opacity:0}
.c3-hint{position:absolute;left:50%;bottom:-10%;translate:-50% 0;white-space:nowrap;opacity:0;text-transform:uppercase;font-size:11px;transition:opacity .3s}
.c3-world{position:absolute;inset:0;z-index:2;pointer-events:none}
.c3-plate{position:absolute;margin:0;opacity:0;box-shadow:0 30px 60px -30px rgba(23,24,22,.45)}
.c3-plate img,.c3-plate video{display:block;width:100%;height:auto}
.c3-plate.p1{right:0;top:0;width:40%}
.c3-plate.p2{right:3%;top:42%;width:16%}
.c3-plate.p3{left:30%;bottom:2%;width:11%}
.c3-plate.p4{right:0;bottom:0;width:38%}
.c3-reel{position:absolute;right:2%;top:2%;height:96%;aspect-ratio:9/16;margin:0;z-index:5;clip-path:inset(100% 0 0 0);background:#f3eedf}
.c3-reel video{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- 04 Website: a page assembles, scrolls, changes flavour ---------- */
.c4-browser{position:absolute;left:0;top:6%;width:74%;aspect-ratio:16/10.4;background:#fff;border:1px solid var(--hair);border-radius:12px;overflow:clip;box-shadow:0 40px 80px -40px rgba(23,24,22,.35);z-index:2}
.c4-bar{height:28px;display:flex;gap:6px;align-items:center;padding-inline:12px;border-bottom:1px solid var(--hair);background:#fafaf8}
.c4-bar i{width:9px;height:9px;border-radius:50%;background:#dcdcd6}
.c4-view{position:absolute;inset:28px 0 0 0;overflow:clip}
.c4-page{position:absolute;left:0;right:0;top:0}
.c4-band img,.c4-ppage img{display:block;width:100%;height:auto}
.c4-band{clip-path:inset(0 0 100% 0);transform:translateY(16px);transition:clip-path .42s var(--m-out),transform .42s var(--m-out)}
.c4-band.on{clip-path:inset(0);transform:none}
.c4-aira{position:absolute;inset:0}
.c4-fl{position:absolute;inset:0;clip-path:inset(0 100% 0 0);transition:clip-path .42s var(--m-punch)}
.c4-fl.on{clip-path:inset(0)}
.c4-fl img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.c4-phone{position:absolute;right:0;bottom:4%;width:22%;aspect-ratio:9/19;background:#111;border-radius:30px;padding:7px;box-shadow:0 40px 80px -40px rgba(23,24,22,.45);z-index:3}
.c4-pview{position:relative;width:100%;height:100%;border-radius:24px;overflow:clip;background:#fff}
.c4-ppage{position:absolute;left:0;right:0;top:0;clip-path:inset(0 0 100% 0);transition:clip-path .42s var(--m-out)}
.c4-ppage.b1{clip-path:inset(0 0 calc(100% - 33svh) 0)}.c4-ppage.b2{clip-path:inset(0 0 calc(100% - 66svh) 0)}.c4-ppage.b3{clip-path:inset(0)}
.c4-pfl{position:absolute;inset:0;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;opacity:0;pointer-events:none;overscroll-behavior-x:contain}
.c4-pfl::-webkit-scrollbar{display:none}
.c4-pf{flex:0 0 100%;scroll-snap-align:center}
.c4-pf img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.c4-count{position:absolute;right:12px;bottom:10px;opacity:0;color:var(--ink);background:#ffffffd9;border-radius:99px;padding:2px 10px}
.c4-pt{position:absolute;inset:0;pointer-events:none;z-index:4}
.c4-pt figure{position:absolute;margin:0;box-shadow:0 40px 80px -40px rgba(23,24,22,.45)}
.c4-pt img{display:block;width:100%;height:auto}
.c4-ptp{left:0;top:6%;width:62%;clip-path:inset(100% 0 0 0)}
.c4-pte{right:0;top:30%;width:52%;opacity:0}

/* ---------- 05 Content: a film is cut on a timeline ---------- */
.c5-scene{display:grid;grid-template-rows:1fr auto;grid-template-columns:minmax(0,1fr);gap:22px;align-content:center}
.c5-monitor{position:relative;width:min(100%,calc((100vh - 290px) * 16 / 9));max-width:100%;aspect-ratio:16/9;background:var(--ink2);overflow:clip;justify-self:center;border-radius:4px}
.c5-f,.c5-film{position:absolute;inset:0;opacity:0}
.c5-f.on,.c5-film.on{opacity:1}
.c5-f img{width:100%;height:100%;object-fit:contain;display:block}
.c5-f.k-shoot img{object-fit:cover}
.c5-film video{width:100%;height:100%;object-fit:cover;display:block}
.c5-tc{position:absolute;left:14px;bottom:10px;color:#fff;opacity:.8;font-variant-numeric:tabular-nums}
.c5-strip{position:relative;min-width:0;width:100%;height:78px;overflow:clip;touch-action:pan-y;cursor:ew-resize;border-block:1px solid var(--hair)}
.c5-track{position:absolute;left:0;top:7px;height:64px;display:flex;gap:3px;will-change:transform}
.c5-t{height:64px;flex:none;opacity:.55;transition:opacity .2s}
.c5-t img{height:100%;width:auto;display:block}
.c5-t.on{opacity:1}
.c5-t.k-film img{outline:2px solid var(--coral);outline-offset:-2px}
.c5-head{position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--coral);translate:-50% 0}

/* ---------- 06 Social: a feed fills ---------- */
.c6-scene{display:grid;align-items:center}
.c6-feeds{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,36px);align-items:center}
.c6-phone{position:relative;background:#fff;border:1px solid var(--hair);border-radius:34px;padding:52px 8px 40px;box-shadow:0 30px 70px -40px rgba(23,24,22,.35)}
.c6-phone::after{content:"";position:absolute;left:50%;bottom:14px;width:34%;height:4px;border-radius:4px;background:#17181626;translate:-50% 0}
.c6-name{position:absolute;left:18px;top:16px;text-transform:uppercase;font-size:11px}
.c6-grid{position:relative;aspect-ratio:3/2.5;overflow:clip}
.c6-post{position:absolute;left:0;top:0;width:calc((100% - 4px)/3);aspect-ratio:4/5;padding:0;border:0;background:transparent;opacity:0;transform:translate(0,0) scale(.9);transition:transform .42s var(--m-move),opacity .36s var(--m-out),filter .3s;cursor:pointer}
.c6-post img{width:100%;height:100%;object-fit:cover;display:block}
.c6-post.in{opacity:1}
.c6-count{display:none}

/* ---------- interlude marquee, work, services, close ---------- */
.kinetic-message-track.m-js{animation:none!important;will-change:transform}
.concept-card-media{clip-path:inset(0)}
.svc-preview{position:fixed;left:0;top:0;width:300px;height:220px;z-index:40;pointer-events:none;clip-path:inset(50%);opacity:0;transition:clip-path .6s var(--m-move),opacity .2s}
.svc-preview.on{clip-path:inset(0);opacity:1}
.svc-preview-in{position:absolute;inset:0;background:var(--soft) center/cover no-repeat}
.svc-preview .ai-mini{position:absolute;inset:0;background:#fff;border:1px solid var(--hair)}
.service summary{position:relative}
.ai-circuit{position:relative;aspect-ratio:4/3;width:100%;background:#fff}
.ai-circuit .e{position:absolute;background:var(--coral);transform:scale(0)}
.ai-circuit .e0{left:18%;right:18%;top:22%;height:2px;margin-top:-1px;transform-origin:left}
.ai-circuit .e1{right:18%;top:22%;bottom:22%;width:2px;margin-right:-1px;transform-origin:top}
.ai-circuit .e2{left:18%;right:18%;bottom:22%;height:2px;margin-bottom:-1px;transform-origin:right}
.ai-circuit .e3{left:18%;top:22%;bottom:22%;width:2px;margin-left:-1px;transform-origin:bottom}
.ai-circuit::before{content:"";position:absolute;inset:22% 18%;border:1px solid #17181624}
.ai-circuit .nd{position:absolute;font-size:.6875rem;letter-spacing:.06em;text-transform:uppercase;line-height:1.25;width:40%;opacity:.32}
.ai-circuit.still .nd,.ai-circuit.still .e{opacity:1;transform:none}
.ai-circuit .n0{left:4%;top:4%}
.ai-circuit .n1{right:4%;top:4%;text-align:right}
.ai-circuit .n2{right:4%;bottom:4%;text-align:right}
.ai-circuit .n3{left:4%;bottom:4%}
.ai-circuit .pin{position:absolute;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border-radius:50%;border:1.5px solid var(--ink);background:#fff;z-index:1}
.ai-circuit .run{position:absolute;left:0;top:0;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--coral);z-index:2}
.ai-circuit.still .run{left:18%;top:22%}
/* service demos: each replays its chapter in miniature (demos.mjs) */
.demo{position:relative;aspect-ratio:4/3;width:100%;overflow:clip;border-radius:6px;background:#fff}
.svc-preview .demo{border-radius:0;height:100%;aspect-ratio:auto}
.d-brand{background:#F4F0E8;--cink:#141414;--cdot:#ED432B}
.d-sq{position:absolute;left:50%;top:50%;height:74%;aspect-ratio:1;translate:-50% -50%}
.d-l{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.d-l path,.d-l rect:not(.g-c){fill:var(--cink)}
.d-frame rect{fill:none!important;stroke:var(--cink);stroke-width:32.7}
.d-grid g{stroke:var(--cink);stroke-width:1;vector-effect:non-scaling-stroke;fill:none;opacity:.25}
.d-grid path{fill:none!important;stroke:currentColor;vector-effect:non-scaling-stroke}
.d-dot circle{fill:var(--cdot)}
.d-dot{transform-box:fill-box;transform-origin:85.2% 31.3%}
.d-board{position:absolute;inset:0;clip-path:inset(100% 0 0 0)}
.d-board img{width:100%;height:100%;object-fit:cover;display:block}
.d-web{background:#f3f2ee}
.d-ph{position:absolute;left:7%;top:7%;bottom:7%;aspect-ratio:9/19;background:#111;border-radius:16px;padding:4px;z-index:2;box-shadow:0 20px 40px -24px rgba(23,24,22,.5)}
.d-phv{position:relative;width:100%;height:100%;border-radius:12px;overflow:clip;background:#fff}
.d-page{display:block;width:100%;height:auto}
.d-br{position:absolute;right:6%;top:50%;width:56%;aspect-ratio:16/10;translate:0 -50%;background:#fff;border-radius:6px;overflow:clip;box-shadow:0 20px 40px -24px rgba(23,24,22,.4)}
.d-bar{display:block;height:12px;background:#fafaf8;border-bottom:1px solid var(--hair)}
.d-brv{position:absolute;inset:12px 0 0}
.d-fl{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;clip-path:inset(0 100% 0 0)}
.d-film{background:var(--ink2)}
.d-mon{position:absolute;left:0;right:0;top:0;bottom:22%}
.d-cut{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;display:block}
.d-strip{position:absolute;left:0;right:0;bottom:0;height:22%;overflow:clip;border-top:1px solid #ffffff22}
.d-track{position:absolute;left:0;top:10%;bottom:10%;display:flex;gap:2px}
.d-track img{height:100%;width:auto;display:block;opacity:.75}
.d-head{position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;background:var(--coral)}
.d-pack{background:#fff}
.d-flat{position:absolute;left:50%;top:6%;bottom:6%;aspect-ratio:940/1870;translate:-50% 0}
.d-flat svg{position:absolute;inset:0;width:100%;height:100%}
.d-flat .cut path{fill:none;stroke:#141010;stroke-width:5}
.d-flat .fold path{fill:none;stroke:var(--coral);stroke-width:5;stroke-dasharray:14 9}
.d-turn{position:absolute;inset:0;background:#141010;clip-path:inset(100% 0 0 0)}
.d-spr{position:absolute;left:50%;top:50%;height:100%;aspect-ratio:4/3;translate:-50% -50%;overflow:clip}
.d-spr i{position:absolute;left:0;top:0;width:600%;height:600%;background-size:100% 100%}
.d-social{background:#fff}
.d-feed{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);gap:2px}
.d-post{position:relative;overflow:clip;opacity:0}
.d-post img{width:100%;height:100%;object-fit:cover;display:block}
.site-footer.flood{clip-path:circle(var(--fr,0px) at var(--fx,50%) var(--fy,0px))}
.footer-brand-signature{overflow:clip}
.footer-brand-signature>*{transform:translateY(var(--wy,0%)) scaleY(var(--ws,1));transform-origin:50% 100%}

/* ---------- the dot actor ---------- */
.dot-actor{position:fixed;left:0;top:0;width:20px;height:20px;z-index:60;pointer-events:none;opacity:0;will-change:transform}
.dot-actor i{position:absolute;inset:0;border-radius:50%;background:var(--dot-c,var(--coral));transition:background .25s}
.dot-actor.live{opacity:1}
html.dot-lifted .title-period,html.hold-hero .title-period,html.hold-stop .closing-period{opacity:0}

/* ---------- desktop cursor ring (work + stages only) ---------- */
.cursor-ring{position:fixed;left:0;top:0;width:76px;height:76px;margin:-38px 0 0 -38px;z-index:70;pointer-events:none;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;opacity:0;transform:translate(-200px,-200px) scale(.6);will-change:transform}
.cursor-ring svg{position:absolute;inset:0;width:100%;height:100%}
.cursor-ring circle{fill:none;stroke:#ffffff55;stroke-width:1.5}
.cursor-ring .arrow-icon{width:22px;height:22px}
.cursor-ring .cursor-label{position:absolute;top:100%;margin-top:10px;white-space:nowrap;font-size:11px;letter-spacing:.065em;text-transform:uppercase;color:var(--ink);background:#fff;padding:3px 9px;border-radius:99px;opacity:0;transition:opacity .2s}
.cursor-ring.has-label .cursor-label{opacity:1}
.cursor-ring.drag .arrow-icon{display:none}
@media (hover:hover) and (pointer:fine) and (min-width:900px){
  html.cursor-on .concept-card-media,html.cursor-on [data-turn],html.cursor-on [data-lens],html.cursor-on .c5-monitor{cursor:none}
}

/* ---------- header on scroll + scroll-spy (M02) ---------- */
.site-header{transition:transform .2s var(--m-out),height .35s,background .35s;z-index:31}
html.hdr-hide .site-header{transform:translateY(-101%);transition:transform .16s var(--m-exit)}
.desktop-nav{position:relative}
.nav-spy{position:absolute;left:0;bottom:-6px;height:2px;width:100px;background:var(--ink);transform-origin:left;transform:translateX(var(--sx,0)) scaleX(var(--sw,0));transition:transform .3s var(--m-out)}

/* ---------- press feedback everywhere (M28) ---------- */
.start-pill:active,.dock-pill:active{transform:scale(.97)}
.round-link:active .round-icon,.round-button:active{transform:scale(.9)}
.concept-card-link:active .concept-card-media{transform:scale(.985)}
.round-icon,.round-button,.concept-card-media{transition:transform .16s var(--m-out)}
.is-press{transform:scale(.97);transition:transform .1s var(--m-out)!important}

/* ---------- route cut: both halves (M29) ---------- */
.route-cut{position:fixed;inset:0;pointer-events:none;display:grid;grid-template-columns:repeat(4,1fr);z-index:29;visibility:hidden}
.route-cut i{background:var(--coral);transform:translateY(101%);margin-left:-1px}
.route-cut.cover{visibility:visible}
.route-cut.cover i{transform:translateY(0);transition:transform .28s cubic-bezier(.7,0,.2,1)}
.route-cut.cover i:nth-child(2){transition-delay:20ms}.route-cut.cover i:nth-child(3){transition-delay:40ms}.route-cut.cover i:nth-child(4){transition-delay:60ms}
html.cut-in .route-cut{visibility:visible}
html.cut-in .route-cut i{transform:translateY(0)}
.route-cut.reveal{visibility:visible}
.route-cut.reveal i{transform:translateY(-101%);transition:transform .32s var(--m-punch)}
.route-cut.reveal i:nth-child(2){transition-delay:30ms}.route-cut.reveal i:nth-child(3){transition-delay:60ms}.route-cut.reveal i:nth-child(4){transition-delay:90ms}
html.leaving main{transform:scale(.985);opacity:.9;transition:transform .28s var(--m-out),opacity .28s}

/* ---------- phone chrome: hidden on desktop ---------- */
.dock,.touch-dot{display:none}
.index-sheet,.svc-sheet,.viewer{padding:0;border:0;max-width:none;max-height:none}

/* ---------- story viewer (both devices) ---------- */
.viewer{position:fixed;inset:0;width:100%;height:100%;margin:0;background:#0d0d0c;color:#fff;overflow:hidden;overscroll-behavior:contain;touch-action:none}
.viewer button{touch-action:none}
.viewer::backdrop{background:rgba(13,13,12,.6)}
.v-frames{position:absolute;inset:0;touch-action:none}
.v-frame{position:absolute;inset:0;display:grid;grid-template:100%/100%;place-items:center;clip-path:inset(0 0 0 100%)} /* round 3: a definite cell so the img max-height:100% contains 540x960 story frames (they overflowed 820 px and were cut at the bottom) */
.v-frame.on{clip-path:inset(0)}
.v-frame.anim{transition:clip-path .28s var(--m-punch)}
.v-frame.from-l{clip-path:inset(0 100% 0 0)}
.v-frame img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.v-chrome{position:absolute;left:0;right:0;top:0;padding:max(14px,env(safe-area-inset-top)) 16px 0;z-index:3;transition:opacity .2s;background:linear-gradient(#0d0d0c99,#0d0d0c00)}
.v-seg{display:flex;gap:4px}
.v-seg i{flex:1;height:2px;background:#ffffff40;overflow:clip;position:relative}
.v-seg b{position:absolute;inset:0;background:#fff;transform-origin:left;transform:scaleX(0)}
.v-seg i.done b{transform:none}
.v-meta{display:flex;justify-content:space-between;align-items:center;margin-top:10px;min-height:44px}
.v-title{text-transform:uppercase}
.v-x{color:#fff;border-color:#ffffff55}
.v-prev,.v-next{position:absolute;top:0;bottom:0;z-index:2;background:transparent;border:0;padding:0}
.v-prev{left:0;width:33%}.v-next{right:0;width:67%}
.v-more{position:absolute;left:50%;bottom:max(28px,env(safe-area-inset-bottom));translate:-50% 0;z-index:4;color:#fff;opacity:0;pointer-events:none;transition:opacity .2s}
.v-more.on{opacity:1;pointer-events:auto}
.viewer.hold .v-chrome{opacity:0}
.v-flyer{position:fixed;z-index:200;pointer-events:none;object-fit:cover;transform-origin:0 0}
@media (min-width:701px) and (pointer:fine),(min-width:701px) and (pointer:none),(min-width:701px) and (min-height:501px),(min-width:1001px){
  .viewer{inset:0;width:100%;height:100%;background:transparent}
  .viewer::backdrop{background:rgba(13,13,12,.82)}
  .v-frames{inset:40px calc(50% - min(28vw,340px));border-radius:6px;overflow:clip;background:#0d0d0c}
  .v-chrome{left:calc(50% - min(28vw,340px));right:calc(50% - min(28vw,340px));top:40px;padding:14px}
  .v-prev{left:calc(50% - min(28vw,340px));width:min(18.6vw,226px);top:40px;bottom:40px}
  .v-next{right:calc(50% - min(28vw,340px));width:min(37.3vw,453px);top:40px;bottom:40px}
}

/* ================= PHONE (≤700, and touch phones held sideways): full-screen chapters, thumb-led ================= */
@media (max-width:700px),(pointer:coarse) and (max-height:500px) and (max-width:1000px){
  /* text that scales with the reader's text size */
  .ch{height:calc(var(--track)*1svh)}
  #ch-02{--track:210}#ch-03{--track:215}#ch-04{--track:185}#ch-05{--track:180}#ch-06{--track:160}
  .ch-stage{height:100svh;display:block;padding:0}
  /* every chapter is a full-bleed screen; the caption sits in a band over it */
  .ch-scene{position:absolute;inset:0;z-index:1}
  .ch-stage::before,.ch-stage::after{content:"";position:absolute;left:0;right:0;z-index:2;pointer-events:none;transform-origin:50% 0;transition:transform .35s var(--m-out)}
  .ch-stage::before{top:0;height:230px;background:linear-gradient(var(--scrim,#fff) 0,var(--scrim-a,rgb(255 255 255/.82)) 42%,transparent)}
  .ch-stage::after{bottom:0;height:200px;transform-origin:50% 100%;background:linear-gradient(transparent,var(--scrim-a,rgb(255 255 255/.82)) 55%,var(--scrim,#fff))}
  .ch-stage:has(.ch-head.lift)::before{transform:scaleY(.56)}
  .ch-seg{top:62px;left:16px;right:16px}
  .ch-head{position:absolute;left:16px;right:16px;top:78px;gap:12px;align-self:auto;z-index:3}
  .ch-head h2{font-size:clamp(2.25rem,10.4vw,2.875rem);transition:opacity .3s var(--m-out),transform .35s var(--m-out)}
  .ch-head.lift h2{opacity:0;transform:translateY(-24px);transition:opacity .2s var(--m-exit),transform .28s var(--m-out)}
  .ch-cap{font-size:.6875rem}
  .ch-head .ch-steps{position:fixed;left:16px;right:16px;top:auto;bottom:calc(92px + env(safe-area-inset-bottom));height:1.5em;font-size:.75rem;z-index:5}
  .m-in.m-lines .ln>span{transition-duration:.55s}
  .m-in.m-lines .ln>em,.m-in .m-write{transition-duration:.45s,.45s;transition-delay:calc(var(--i,0)*40ms + 90ms)}

  /* 02: the screen is the brand's canvas; the colourway changes the whole screen */
  #ch-02 .ch-stage{color:var(--cink)}
  #ch-02 .ch-stage::before,#ch-02 .ch-stage::after{display:none}
  .c2-scene{display:block}
  .c2-square{position:absolute;inset:0;width:auto;height:auto;--sz:min(100vw,100svh)}
  .c2-bg{transition:background-color .25s}
  .c2-pattern img{object-fit:cover}
  .c2-mark{inset:auto;left:50%;top:50%;width:min(66vw,40svh);aspect-ratio:1;translate:-50% -56%}
  .c2-type{top:104%;bottom:auto;height:20%}
  .c2-type span{font-size:calc(min(66vw,40svh)*.24)}
  .c2-lens,.c2-edges{display:none}
  .c2-boards{left:0;right:0;top:50%;height:auto;aspect-ratio:4/3;translate:0 -50%}
  .c2-chips{position:absolute;left:0;right:0;bottom:calc(128px + env(safe-area-inset-bottom));justify-content:center;gap:0;z-index:4}
  .c2-chip.act i{box-shadow:0 0 0 1px #17181626,0 0 0 4px var(--cbg),0 0 0 5.5px var(--cink)}
  .c2-chip i{box-shadow:0 0 0 1px #17181633}

  /* 03: the dieline on white, then the box turns full-screen on black */
  #ch-03 .ch-stage::before,#ch-03 .ch-stage::after{display:none}
  #ch-03 .ch-stage{transition:color .3s}
  #ch-03.dk .ch-stage{color:#fff}
  .c3-flat{left:50%;translate:-50% 0;top:150px;bottom:150px;height:auto}
  .c3-box-wrap{left:50%;top:48%;width:min(80vw,44svh)}
  .c3-turn{inset:-160% -14%;border-radius:0;box-shadow:none}
  .c3-sprite{width:calc(100% / 1.28 * 1.22)}
  .c3-world{z-index:4}
  .c3-plate.p1{left:4%;right:auto;top:118px;width:54%}
  .c3-plate.p2{left:auto;right:4%;top:126px;width:30%}
  .c3-plate.p3{right:auto;left:5%;bottom:150px;width:24%}
  .c3-plate.p4{right:4%;bottom:150px;width:58%}
  .c3-reel{position:fixed;inset:0;height:100svh;width:100vw;aspect-ratio:auto;right:auto;top:0;z-index:6}
  .c3-hint{bottom:-16%;font-size:.6875rem}

  /* 04: the phone IS the device: their site fills the screen */
  .c4-browser{display:none}
  .c4-phone{inset:0;width:auto;aspect-ratio:auto;padding:0;background:#fff;border:0;border-radius:0;box-shadow:none}
  .c4-pview{border-radius:0}
  .c4-pfl{pointer-events:none}
  .c4-pfl.live{pointer-events:auto;touch-action:pan-x pan-y}
  .c4-ptp{left:0;right:0;width:auto;top:20%}
  .c4-pte{left:0;right:0;width:auto;top:47%}
  .c4-count{bottom:calc(128px + env(safe-area-inset-bottom));right:16px;font-size:.75rem}

  /* 05: a dark monitor, the cut in a 4:5 window, the timeline in the thumb band */
  #ch-05 .ch-stage{color:#fff;--scrim:#141414;--scrim-a:rgb(20 20 20/.7)}
  .c5-scene{display:block;background:var(--ink2)}
  .c5-monitor{position:absolute;left:0;right:0;top:50%;bottom:auto;width:auto;max-width:none;max-height:none;aspect-ratio:4/5;translate:0 -54%;border-radius:0;justify-self:stretch}
  .c5-f.k-shoot img{object-fit:cover}
  .c5-film video{object-fit:contain}
  .c5-tc{left:16px;bottom:auto;top:-28px}
  .c5-strip{position:absolute;left:0;right:0;bottom:calc(118px + env(safe-area-inset-bottom));height:64px;border:0;z-index:3}
  .c5-track{top:4px;height:56px}.c5-t{height:56px}

  /* 06: the feed fills the screen, two columns, swipe between brands */
  .c6-scene{display:block}
  .c6-feeds{position:absolute;inset:0;display:flex;gap:0;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;align-items:stretch;overscroll-behavior-x:contain;touch-action:pan-x pan-y}
  .c6-feeds::-webkit-scrollbar{display:none}
  .c6-phone{flex:0 0 100%;position:relative;scroll-snap-align:center;border:0;border-radius:0;box-shadow:none;padding:0;background:transparent}
  .c6-phone::after{display:none}
  .c6-grid{position:absolute;left:50%;top:50%;height:min(calc(100svh - 236px),calc((100vw - 24px) * 1.875));width:auto;aspect-ratio:2/3.75;translate:-50% -46%;margin:0}
  .c6-post{width:calc((100% - 2px)/2)}
  .c6-name{left:16px;top:100px;font-size:.6875rem;z-index:3;transition:opacity .25s}
  .c6-count{display:block;position:absolute;right:16px;top:100px;font-size:.6875rem;z-index:3;transition:opacity .25s}
  #ch-06 .ch-stage:has(.ch-head:not(.lift)) :is(.c6-name,.c6-count){opacity:0}

  /* top bar: the lockup only; Menu moves to the dock */
  .menu-trigger{display:none!important}
  /* thumb dock: the compass ring carries the chapter number, the name gets two lines */
  .dock{display:flex;position:fixed;left:12px;right:12px;bottom:max(12px,env(safe-area-inset-bottom));height:60px;z-index:50;align-items:center;justify-content:space-between;gap:8px;padding:6px 6px 6px 8px;border-radius:30px;background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid var(--hair);box-shadow:0 18px 40px -22px rgba(23,24,22,.45);transition:transform .42s var(--m-sheet)}
  html.dock-away .dock{transform:translateY(calc(100% + 30px));transition:transform .3s var(--m-exit)}
  .dock-compass{display:flex;align-items:center;gap:10px;min-width:0;flex:1;min-height:48px;background:transparent;border:0;padding:0 4px;color:var(--ink);text-align:left}
  .dock-text{display:grid;grid-template-columns:minmax(0,1fr);min-width:0;flex:1}
  .dock-name{display:block;min-width:0;max-width:100%;font-size:.8125rem;line-height:1.15;letter-spacing:-.01em}
  .dock-name span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:break-word}
  .dock-pill.start-pill{min-height:48px;padding-left:18px;gap:10px;font-size:.875rem;flex:none}
  .dock-pill .start-pill-icon{width:36px;height:36px}
  .ring{position:relative;width:44px;height:44px;flex:none}
  .ring-n{position:absolute;inset:0;display:grid;place-items:center;font-size:.6875rem;font-weight:500;letter-spacing:.02em;line-height:1}
  .ring-n .m-roll i{height:1.5em;line-height:1.5}
  .ring-track{position:absolute;inset:0;border-radius:50%;border:2px solid #17181622}
  .ring-half{position:absolute;inset:0;overflow:clip}
  .ring-half.a{clip-path:inset(0 0 0 50%)}.ring-half.b{clip-path:inset(0 50% 0 0)}
  .ring-half i{position:absolute;inset:0;border-radius:50%;border:2px solid var(--ink);transform:rotate(var(--r,0deg))}
  .ring-half.a i{clip-path:inset(0 50% 0 0)}.ring-half.b i{clip-path:inset(0 0 0 50%)}
  .ring-head{position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:var(--coral);transform:rotate(var(--a,0deg)) translateY(-21px)}
  .dock-compass:active .ring{transform:scale(.94);transition:transform .1s}
  /* coral touch dot */
  .touch-dot{display:block;position:fixed;left:0;top:0;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--coral);z-index:300;pointer-events:none;opacity:0}
  /* index sheet: vermilion flood from the thumb */
  .index-sheet{position:fixed;inset:0;width:100%;height:100%;margin:0;background:var(--coral);color:var(--ink);padding:max(18px,env(safe-area-inset-top)) 18px max(18px,env(safe-area-inset-bottom));overflow:auto;overscroll-behavior:contain}
  .index-sheet::backdrop{background:transparent}
  .is-top{display:flex;justify-content:space-between;align-items:center}
  .is-close{border-color:#17181640;color:var(--ink)}
  .is-chapters{list-style:none;margin:16px 0 0;padding:0;counter-reset:none}
  .is-chapters li{overflow:clip;border-bottom:1px solid #17181626}
  .is-chapters a{display:flex;align-items:center;gap:14px;min-height:52px;font-size:1.5rem;letter-spacing:-.04em}
  .is-chapters a:active{transform:scale(.98);transition:transform .1s}
  .is-chapters em{font-family:var(--serif)}
  .is-n{font-size:.6875rem;letter-spacing:.06em;width:22px}
  .is-dot{margin-left:auto;width:10px;height:10px;border-radius:50%;background:#fff;opacity:0;transform:scale(.4);transition:transform .3s var(--m-pop),opacity .2s}
  .is-chapters a[aria-current] .is-dot{opacity:1;transform:none}
  .is-pages{display:flex;gap:22px;margin-top:20px;font-size:.9375rem}
  .is-pages a{min-height:44px;display:flex;align-items:center}
  .is-pill{margin-top:14px}
  .is-mail{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;margin-top:18px;font-size:.875rem}
  .is-mail a{min-height:44px;display:flex;align-items:center}
  .is-copy,.motion-toggle.is-x{background:transparent;border:1px solid #17181640;border-radius:99px;padding:0 14px;min-height:44px;font-size:.8125rem;color:var(--ink)}
  .is-foot{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;margin-top:16px;font-size:.8125rem}
  .is-foot a,.is-foot button{min-height:44px;display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:0;color:var(--ink);font-size:.8125rem}
  .is-foot .arrow-icon{width:16px;height:16px}
  .is-anim .is-chapters a,.is-anim .is-pages,.is-anim .is-pill,.is-anim .is-mail,.is-anim .is-foot{transform:translateY(110%);opacity:0}
  .is-anim.is-in .is-chapters a,.is-anim.is-in .is-pages,.is-anim.is-in .is-pill,.is-anim.is-in .is-mail,.is-anim.is-in .is-foot{transform:none;opacity:1;transition:transform .65s var(--m-out) calc(200ms + var(--k,0)*50ms),opacity .3s calc(200ms + var(--k,0)*50ms)}
  /* services: six closed rows, each opens its sheet (one pattern) */
  .practice-content .service .service-detail,.practice-content .service .service-body{display:none}
  .practice-content .service summary:active{transform:scale(.985);transition:transform .1s}
  /* service bottom sheet */
  .svc-sheet{position:fixed;inset:0;width:100%;height:100%;margin:0;background:transparent;overflow:hidden}
  .svc-sheet::backdrop{background:rgba(23,24,22,var(--bd,.4))}
  .sheet-panel{position:absolute;left:0;right:0;bottom:0;height:92svh;background:#fff;border-radius:22px 22px 0 0;transform:translateY(100%);padding:10px 18px calc(24px + env(safe-area-inset-bottom));overflow:hidden;display:flex;flex-direction:column;touch-action:none}
  .sheet-panel.scrolly{overflow:auto;touch-action:pan-y}
  .sheet-grab{display:block;width:40px;height:4px;border-radius:4px;background:#17181630;margin:2px auto 12px}
  .sheet-head{display:flex;align-items:center;gap:12px}
  .sheet-head h3{font-size:1.75rem;letter-spacing:-.05em;flex:1;margin:0}
  .sheet-num{color:var(--coral)}
  .sheet-demo{margin-top:14px;position:relative;flex:none}
  .sheet-body{margin-top:16px;display:grid;gap:14px}
  .sheet-body p{margin:0;font-size:1rem}
  .sheet-tags{display:flex;flex-wrap:wrap;gap:8px}
  .sheet-tags span{border:1px solid var(--hair);border-radius:99px;padding:6px 12px;font-size:.8125rem}
  .sheet-body .eyebrow{text-transform:none}
  .sheet-jump{font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;min-height:44px;display:inline-flex;align-items:center}
  /* footer condensed */
  .site-footer{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
  /* story viewer, phone: frames fill the screen and pan */
  .viewer.pan .v-frame{display:block;overflow:clip}
  .viewer.pan .v-frame img{position:absolute;left:0;top:0;max-width:none;max-height:none;object-fit:fill;will-change:transform}
  .viewer.pan .v-chrome{padding-bottom:28px}
  .v-seg i.done b{transform:none}
}
/* phone held sideways: caption on the left third, the stage on the right, the dock to the right */
@media (pointer:coarse) and (max-height:500px) and (max-width:1000px) and (orientation:landscape){
  .ch-stage::before,.ch-stage::after{display:none}
  .ch-seg{top:14px}
  .ch-head{top:34px;right:auto;width:34%}
  .ch-head h2{font-size:clamp(1.75rem,4.4vw,2.25rem)}
  .ch-head .ch-steps{left:16px;right:auto;width:34%;bottom:22px}
  .ch-scene{left:38%}
  #ch-02 .ch-stage{color:#fff}
  .c2-mark{width:min(30vw,52svh);translate:-50% -54%}
  .c2-type span{font-size:calc(min(30vw,52svh)*.24)}
  .c2-chips{bottom:12px}
  .c3-flat{top:40px;bottom:16px}
  .c3-box-wrap{width:min(40vw,62svh);top:50%}
  .c3-plate.p1{top:16px;width:40%}.c3-plate.p2{top:20px;width:24%}.c3-plate.p3{bottom:16px;width:18%}.c3-plate.p4{bottom:16px;width:44%}
  .c3-reel{inset:0 0 0 38%;width:auto}
  .c4-ptp,.c4-pte{width:62%;left:auto;right:2%}
  .c5-monitor{aspect-ratio:16/9;left:4%;right:4%;translate:0 -60%}
  .c5-strip{bottom:14px}
  .c6-grid{height:calc(100svh - 48px);translate:-50% -50%}
  .c6-name,.c6-count{top:10px}
  .dock{left:auto;right:12px;width:min(440px,60vw);bottom:10px;height:56px}
  .site-footer{padding-bottom:84px}
}

/* ================= DESKTOP-only compositions (≥701) ================= */
@media (min-width:701px) and (pointer:fine),(min-width:701px) and (pointer:none),(min-width:701px) and (min-height:501px),(min-width:1001px){
  .c4-pfl{pointer-events:none}
}
@media (hover:hover) and (pointer:fine) and (min-width:900px){
  .c6-phone:hover .c6-post.in{opacity:.6}
  .c6-phone .c6-post.in:hover{opacity:1;translate:0 -4px;transition:translate .5s var(--m-out),opacity .2s}
}

/* ================= Pause motion / reduced motion: the story told with stills ================= */
html[data-motion="off"] .ch{height:auto}
html[data-motion="off"] .ch-stage{position:relative;height:auto;min-height:100vh}
html[data-motion="off"] .ch-step{position:static;opacity:1;transform:none;display:inline-block;margin-right:18px}
html[data-motion="off"] .ch-steps{height:auto;display:flex;flex-wrap:wrap;gap:6px}
html[data-motion="off"] .dot-actor,html[data-motion="off"] .cursor-ring,html[data-motion="off"] .touch-dot,html[data-motion="off"] .svc-preview{display:none}
html[data-motion="off"] *,html[data-motion="off"] *::before{transition-duration:.15s!important;transition-delay:0s!important}
html[data-motion="off"] .m-armed .ln>*,html[data-motion="off"] .m-armed .m-write{transform:none!important;clip-path:none!important}
html[data-motion="off"] .route-cut{display:none}
@media (max-width:700px),(pointer:coarse) and (max-height:500px) and (max-width:1000px){
  html[data-motion="off"] .ch-stage{display:flex;flex-direction:column;gap:18px;min-height:0;padding:72px 16px 48px}
  html[data-motion="off"] .ch-head{position:relative;top:auto;left:auto;right:auto}
  html[data-motion="off"] .ch-head .ch-steps{position:static}
  html[data-motion="off"] .ch-scene{position:relative;top:auto;bottom:auto;left:auto;right:auto;height:72svh;margin-inline:-16px}
  html[data-motion="off"] .ch-seg{display:none}
  html[data-motion="off"] .ch-stage::before,html[data-motion="off"] .ch-stage::after{display:none}
  html[data-motion="off"] #ch-03 .ch-stage{color:var(--ink)}
  html[data-motion="off"] #ch-02 .ch-stage{color:#fff}
  html[data-motion="off"] #ch-05 .ch-stage{color:var(--ink)}
  html[data-motion="off"] .ch-scene{overflow:clip}
  html[data-motion="off"] .c3-turn{inset:-4% -12%;border-radius:20px}
  html[data-motion="off"] .c3-world{z-index:2}
  html[data-motion="off"] .c3-reel{display:none}
}
@media (prefers-reduced-transparency:reduce){.dock{background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none}}

/* manifesto: the fill gets a coral nib (M07); the dot rides it */
.manifesto h2>span{background:linear-gradient(90deg,var(--ink) 0%,var(--ink) var(--fill,100%),var(--coral) var(--fill,100%),var(--coral) calc(var(--fill,100%) + var(--nib,0%)),#cfd0cb calc(var(--fill,100%) + var(--nib,0%)),#cfd0cb 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.brand-lockup{aspect-ratio:1642/494}

/* HERO MODULE styles: h4 "The studio table" (hero-options/h4 round 2, 4 Oct 2026), ported into site-main 5 Oct 2026.
   site-main: the in-hero pill row is an empty spacer that keeps the phone dock's 72 px clear; the docked pill is gone.
   Animates transform, opacity and clip-path only. Reads html[data-motion] (Pause + reduced motion).
   Layouts: desktop table >=1024 · tablet ring 701-1023 · phone ring <=700. Story: wide sheet >=1024, full screen below. */
@layer h4 {
.h4-hero,.h4-thumb,.h4-story,.h4-cursor{--h4-ease:cubic-bezier(.22,1,.36,1);--h4-sheet:cubic-bezier(.32,.72,0,1);--h4-wipe:cubic-bezier(.7,0,.16,1);--h4-lift-ease:cubic-bezier(.34,1.85,.64,1);--h4-ring-line:rgba(23,24,22,.08)}

/* The H1 is the LCP element: painted at the first frame, never clip-hidden or faded. */
.h4-title .title-row>span{animation:none}
.h4-word{position:relative;display:inline-block}
/* M2: "mark" gets made: a coral pen stroke wipes in under the word, then retracts toward the stop. */
.h4-stroke{position:absolute;left:.04em;right:.02em;bottom:.07em;height:max(4px,.045em);background:var(--red);border-radius:99px;clip-path:inset(0 100% 0 0);animation:h4-stroke .94s .38s both;pointer-events:none}
@keyframes h4-stroke{0%{clip-path:inset(0 100% 0 0);animation-timing-function:var(--h4-wipe)}68%{clip-path:inset(0 0 0 0);animation-timing-function:var(--h4-wipe)}100%{clip-path:inset(0 0 0 100%)}}
/* M3: the stop lands on a spring (f 3 Hz, damping .55, sampled), from .6, never from 0. */
.h4-stop{display:inline-block;transform-origin:50% 78%;animation:h4-stop .62s .52s linear both}
@keyframes h4-stop{0%{transform:scale(.6)}8%{transform:scale(.727)}17%{transform:scale(.918)}25%{transform:scale(1.027)}33%{transform:scale(1.05)}42%{transform:scale(1.031)}50%{transform:scale(1.008)}58%{transform:scale(.996)}67%{transform:scale(.994)}75%{transform:scale(.997)}100%{transform:scale(1)}}
/* M1: captions rise in, 60 ms apart. */
.h4-m1{animation:h4-rise .55s var(--h4-ease) backwards;animation-delay:calc(80ms + var(--m,0) * 60ms)}
@keyframes h4-rise{from{opacity:0;transform:translateY(16px)}}
@keyframes h4-tile-in{from{opacity:0;transform:scale(.94)}}

/* A late picture fades in over its own average colour (set by JS only on pictures not yet decoded). */
.h4-wait{opacity:0}
.h4-in{transition:opacity .3s ease}

/* ---------- The services list answers the work (desktop) ---------- */
.h4-hero .hero-services{position:relative}
.h4-hero .hero-services li{transition:opacity .3s var(--h4-ease)}
.h4-hero .hero-services.has-lit li:not(.is-lit):not(.h4-svc-dot){opacity:.32}
.h4-svc-dot{position:absolute;left:0;top:0;width:6px;height:6px;margin:-3px 0 0 -14px;border-radius:50%;background:var(--red);opacity:0;transform:translate3d(var(--dx,0px),var(--dy,0px),0) scale(.4);transition:transform .42s var(--h4-sheet),opacity .2s ease;pointer-events:none}
.hero-services.has-lit .h4-svc-dot{opacity:1;transform:translate3d(var(--dx,0px),var(--dy,0px),0) scale(1)}
.h4-svc-dot.is-jump{transition:opacity .2s ease}

/* ---------- Desktop: the studio table (>=1024) ---------- */
.h4-ring,.h4-thumb,.h4-now,.h4-cta{display:none}
.h4-table{position:absolute;inset:0 var(--gutter) 0 45%;z-index:2;pointer-events:none}
.h4-tile{position:absolute;left:var(--x);top:var(--y);width:var(--w);display:block;pointer-events:auto;color:var(--ink);text-decoration:none;border-radius:20px;transform:rotate(var(--r));transform-origin:50% 50%;-webkit-tap-highlight-color:transparent;-webkit-user-drag:none;user-select:none;touch-action:none;outline:0}
.h4-tile img{-webkit-user-drag:none}
/* Invisible halo: a scattered target is easy to miss (libraries.dev). */
.h4-tile::before{content:"";position:absolute;inset:-14px;border-radius:34px}
.h4-lift{display:block;position:relative;transition:transform 350ms var(--h4-lift-ease)}
.h4-card{display:block;position:relative;padding:8px;border-radius:20px;background:#fff;box-shadow:0 0 0 1px var(--h4-ring-line),0 1px 2px rgba(23,24,22,.05),0 calc(4px + 10px*var(--d)) calc(10px + 22px*var(--d)) calc(-6px - 4px*var(--d)) rgba(23,24,22,.13),0 calc(10px + 26px*var(--d)) calc(28px + 44px*var(--d)) -18px rgba(23,24,22,.16);animation:h4-tile-in .5s var(--h4-ease) backwards;animation-delay:calc(300ms + var(--i) * 60ms)}
/* Lifted shadow is a second layer that fades in: opacity only, no box-shadow animation. */
.h4-card::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 22px 44px -14px rgba(23,24,22,.30),0 44px 80px -30px rgba(23,24,22,.22);opacity:0;transition:opacity .3s var(--h4-ease);pointer-events:none}
.h4-media{display:block;position:relative;aspect-ratio:4/5;border-radius:12px;overflow:hidden;background:var(--g,#f3f3f1)}
.h4-media picture{display:contents}
.h4-media img,.h4-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.h4-media video{opacity:0;transition:opacity .2s ease}
.h4-media video.is-playing{opacity:1}
.h4-label{position:absolute;top:calc(100% + 12px);left:50%;display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px;border-radius:999px;background:#fff;color:var(--ink);font-size:10px;font-weight:500;letter-spacing:.1em;white-space:nowrap;box-shadow:0 0 0 1px var(--h4-ring-line),0 6px 16px -6px rgba(23,24,22,.18);transform:translateX(-50%) scale(.97);transform-origin:50% 0;opacity:0;pointer-events:none;transition:transform .15s var(--h4-ease),opacity .15s var(--h4-ease)}
.h4-label i{font-style:normal;color:var(--red)}
.h4-tile:focus-visible .h4-card{outline:2px solid var(--ink);outline-offset:4px}
@media (hover:hover) and (pointer:fine){
  .h4-tile{cursor:grab}
  .h4-tile:hover .h4-lift{transform:translateY(-6px)}
  .h4-tile:hover .h4-card::after,.h4-tile[data-dragging] .h4-card::after{opacity:1}
  .h4-tile:hover .h4-label{transform:translateX(-50%) scale(1);opacity:1;transition-duration:.25s}
  .h4-tile[data-dragging]{cursor:grabbing}
  .h4-tile[data-dragging] .h4-label{opacity:0}
}
.h4-tile:focus-visible .h4-lift{transform:translateY(-6px)}
.h4-tile:focus-visible .h4-label{transform:translateX(-50%) scale(1);opacity:1}
.h4-tile[data-dragging] .h4-lift{transition:none}
.h4-tile.is-away{opacity:0}
@media (max-width:1280px){.h4-thin{display:none}}
@media (min-width:1024px){.h4-hero .hero-side-note{z-index:5}}

/* M6: the coral cursor (desktop, inside the hero only). */
.h4-cursor{position:fixed;left:0;top:0;z-index:70;width:84px;height:84px;margin:-42px 0 0 -42px;pointer-events:none;opacity:0;transition:opacity .2s ease}
.h4-cursor.is-on{opacity:1}
.h4-cursor-disc{position:absolute;inset:0;display:grid;place-items:center;border-radius:50%;background:var(--red);color:#fff;font-size:9px;font-weight:600;letter-spacing:.12em;text-align:center;line-height:1.25;transform:scale(.143);transition:transform .35s var(--h4-ease)}
.h4-cursor-disc span{opacity:0;transition:opacity .15s ease}
.h4-cursor.is-work .h4-cursor-disc{transform:scale(1)}
.h4-cursor.is-work .h4-cursor-disc span{opacity:1;transition-delay:.08s}
.h4-cursor.is-drag .h4-cursor-disc{transform:scale(.1)}
.h4-cursor.is-text,.h4-cursor.is-gone{opacity:0}

/* ---------- Ring (phone and tablet, <=1023): a different journey ---------- */
@media (max-width:1023px){
  .h4-table{display:none}
  .h4-ring{display:block;position:absolute;left:50%;top:var(--cy);width:var(--box);height:var(--box);margin:calc(var(--box) / -2) 0 0 calc(var(--box) / -2);z-index:2;translate:0 var(--h4-lift,0px)}
  .h4-ring-tile{position:absolute;left:50%;top:50%;width:var(--t);height:var(--t);margin:calc(var(--t) / -2) 0 0 calc(var(--t) / -2);display:block;border-radius:12px;transform:rotate(var(--a)) translateY(calc(-1 * var(--R))) rotate(calc(-1 * var(--a)));touch-action:pan-y;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;user-select:none;-webkit-user-select:none;outline:0}
  .h4-ring-tile::before{content:"";position:absolute;inset:-6px;border-radius:16px}
  .h4-ring-card{display:block;position:relative;width:100%;height:100%;border-radius:12px;overflow:hidden;background:var(--g,#f3f3f1);box-shadow:0 0 0 1px var(--h4-ring-line),0 2px 4px rgba(23,24,22,.06),0 12px 22px -10px rgba(23,24,22,.28);animation:h4-tile-in .5s var(--h4-ease) backwards;animation-delay:calc(260ms + var(--i) * 60ms);transition:transform .26s cubic-bezier(.34,1.36,.64,1),opacity .2s ease}
  .h4-ring-card picture{display:contents}
  .h4-ring-card img{width:100%;height:100%;object-fit:cover;display:block;-webkit-user-drag:none}
  .h4-ring-tile.is-pressed .h4-ring-card{transform:scale(.96);transition:transform 90ms ease-out}
  .h4-ring-tile.is-away .h4-ring-card{opacity:0;transition:none}
  .h4-ring-tile:focus-visible .h4-ring-card{outline:2px solid var(--ink);outline-offset:3px}
  .h4-hero .h4-title{position:absolute;left:50%;top:var(--cy);width:max-content;max-width:none;margin:0;transform:translate(-50%,-50%);translate:0 var(--h4-lift,0px);text-align:center;font-size:var(--fs);line-height:.95;z-index:3}
  .h4-hero .h4-title .mark-row{position:relative;inset:auto;top:auto;left:auto;margin:0;font-size:1.92em;line-height:.9;padding-bottom:.08em}
  .h4-hero .h4-title .title-row{padding-right:0}
  /* The service at 12 o'clock, named under the headline: one caps line that rolls as the ring turns. */
  .h4-now{display:flex;position:absolute;left:0;right:0;top:calc(var(--cy) + var(--fs) * 1.42 + 12px);justify-content:center;align-items:center;gap:8px;margin:0;height:16px;overflow:hidden;font-size:10px;font-weight:500;letter-spacing:.1em;line-height:16px;color:var(--ink);z-index:3;translate:0 var(--h4-lift,0px);pointer-events:none}
  .h4-now-dot{width:6px;height:6px;border-radius:50%;background:var(--red);flex:none}
  .h4-now-text{display:block;white-space:nowrap}
}
/* Phone (<=700) */
@media (max-width:700px){
  .avant-hero.h4-hero{display:flex;flex-direction:column;min-height:calc(100svh - 75px);padding-bottom:96px} /* site-main: the bottom 96 px stay clear for the story's thumb dock (MOBILE-PLAN P12, §14) */
  .h4-stage{--R:min(40vw,170px,calc((100svh - 400px) / 2));--t:52px;--box:calc(var(--R) * 2 + var(--t));--below:64px;--cy:max(calc(var(--box) / 2 + 8px),calc(50% - var(--below) / 2));--fs:clamp(38px,12vw,54px);position:relative;display:flex;flex-direction:column;justify-content:flex-end;flex:1 0 auto;height:auto;min-height:calc(var(--box) + var(--below) + 24px);max-height:none;padding:0;margin:0}
  /* site-main: the one action is the dock's pill (fixed, thumb zone); the six names are carried by the chapters. */
  .h4-cta{display:none}
  .h4-hero .hero-services{display:none}
  .h4-hero .hero-side-note{position:relative;inset:auto;order:2;display:flex;align-items:center;justify-content:center;gap:11px;margin:0 var(--gutter);min-height:44px;font-size:12px;z-index:4}
  .h4-hero .hero-side-note .live-dot{align-self:center;margin:0}
  .h4-hero .avant-bottom{margin-top:6px}
}
/* Short phones (667 px class): the ring sits closer to the headline, so the 12 o'clock caption would touch the lower tiles. */
@media (max-width:700px) and (max-height:720px){.h4-now{display:none}}
/* Tablet portrait (701-1023): the ring, larger, around a centred headline; the nav keeps the pill. */
@media (min-width:701px) and (max-width:1023px){
  .avant-hero.h4-hero{min-height:auto}
  .h4-stage{--R:min(31vw,300px);--t:clamp(72px,9vw,92px);--box:calc(var(--R) * 2 + var(--t));--cy:calc(var(--box) / 2 + 24px);--fs:clamp(56px,8.4vw,84px);position:relative;height:calc(var(--box) + 64px);min-height:0;max-height:none}
  .h4-hero .hero-side-note{display:none}
  .h4-ring-tile,.h4-ring-card,.h4-ring-tile::before{border-radius:16px}
}

/* M4: the press ring (the story's coral dot, expanding from the touch point). */
.h4-press{position:fixed;left:0;top:0;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;border:1.5px solid var(--red);pointer-events:none;z-index:95}

/* ---------- The project story (shared) ---------- */
.h4-story{position:fixed;inset:0;z-index:80;display:none;color:var(--ink);overscroll-behavior:contain}
.h4-story.is-open{display:block}
.h4-story-bg{position:absolute;inset:0}
.h4-story-sheet{position:absolute;overflow:hidden}
.h4-story-slot{position:relative;overflow:hidden;background:#111}
.h4-layer{position:absolute;inset:0;overflow:hidden}
.h4-layer .amb{position:absolute;left:-6%;top:-6%;width:112%;height:112%;max-width:none;object-fit:cover;opacity:.9}
.h4-layer .fit{position:absolute;inset:0}
.h4-layer .main{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:contain;display:block}
.h4-layer[data-mode=bleed] .main{object-fit:cover}
.h4-layer[data-mode=bleed] .amb,.h4-layer[data-mode=video] .amb,.h4-layer[data-mode=scroll] .amb{display:none}
.h4-layer[data-mode=scroll] .main{height:auto;bottom:auto;object-fit:fill;will-change:transform}
.h4-story-progress{display:flex;gap:4px;height:2px}
.h4-story-progress span{flex:1;height:2px;border-radius:2px;overflow:hidden}
.h4-story-progress span i{display:block;height:100%;transform:scaleX(0);transform-origin:0 50%}
.h4-story-progress span.is-done i{transform:scaleX(1)}
.h4-story-top{display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:10px;letter-spacing:.1em}
.h4-story-count{font-variant-numeric:tabular-nums}
.h4-story-close{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font:300 24px/1 var(--sans);-webkit-tap-highlight-color:transparent;cursor:pointer}
.h4-story-close:active{transform:scale(.96)}
.h4-story-cap h2{font-weight:500;letter-spacing:-.06em;line-height:.95;margin:0}
.h4-story-cap small{display:block;font-size:10px;letter-spacing:.1em}
.h4-story-svc{display:flex;align-items:center;gap:8px;margin:0;font-size:10px;font-weight:500;letter-spacing:.1em;height:16px;line-height:16px;overflow:hidden}
.h4-story-svc::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--red);flex:none}
.h4-story-tap{position:absolute;inset:0;display:flex;z-index:3}
.h4-story-tap button{flex:1;border:0;background:transparent;padding:0;-webkit-tap-highlight-color:transparent;outline:0;cursor:pointer}
.h4-story-tap button:first-child{flex:0 0 33%}
.h4-story-tap button:focus-visible{outline:2px solid #fff;outline-offset:-6px}
.h4-story .round-link .round-icon{width:52px;height:52px}
.h4-story-nav{display:none}
.h4-flyer{position:fixed;z-index:85;overflow:hidden;pointer-events:none;transform-origin:0 0;background:#111;will-change:transform,clip-path}
.h4-flyer img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
html.h4-story-lock,html.h4-story-lock body{overflow:hidden}

/* Story, full screen (<=1023): the frame runs edge to edge; words sit on scrims, controls in the thumb zone. */
@media (max-width:1023px){
  .h4-story{touch-action:none;color:#fff}
  .h4-story-bg{background:#0d0d0c}
  .h4-story-sheet{inset:0}
  .h4-story-sheet.is-card{clip-path:inset(0 round 28px)}
  .h4-story-slot{position:absolute;inset:0}
  .h4-layer[data-mode=frame] .fit,.h4-layer[data-mode=video] .fit{inset:calc(64px + env(safe-area-inset-top)) 0 168px}
  .h4-story-ui{position:absolute;inset:0;pointer-events:none;z-index:4}
  .h4-story-ui::before,.h4-story-ui::after{content:"";position:absolute;left:0;right:0;pointer-events:none}
  .h4-story-ui::before{top:0;height:120px;background:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,0))}
  .h4-story-ui::after{bottom:0;height:300px;background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.66) 62%)}
  .h4-story-head{position:absolute;top:0;left:0;right:0;padding:max(12px,env(safe-area-inset-top)) 16px 0;z-index:1}
  .h4-story-progress span{background:rgba(255,255,255,.3)}
  .h4-story-progress span i{background:#fff}
  .h4-story-top{padding:10px 0 0}
  .h4-story-count{color:rgba(255,255,255,.8)}
  .h4-story-close{pointer-events:auto;margin-right:-6px;border:1px solid rgba(255,255,255,.4);background:rgba(0,0,0,.18);color:#fff}
  .h4-story-cap{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding:0 16px max(24px,calc(env(safe-area-inset-bottom) + 12px));z-index:1}
  .h4-story-cap h2{font-size:clamp(38px,11vw,56px);color:#fff}
  .h4-story-cap small{margin-top:10px;color:rgba(255,255,255,.75)}
  .h4-story-svc{margin-top:8px;color:#fff}
  .h4-story-svcs{display:none}
  .h4-story .round-link{pointer-events:auto}
  .h4-story .round-link .round-icon{background:#fff;color:var(--ink);border-color:#fff}
}
/* Story, wide sheet (>=1024): the frame on the left, the project and its services on the right. */
@media (min-width:1024px){
  .h4-story-bg{background:rgba(23,24,22,.46)}
  .h4-story-sheet{left:50%;top:50%;width:min(1200px,calc(100vw - 96px));height:min(780px,calc(100vh - 80px));transform:translate(-50%,-50%);display:grid;grid-template-columns:auto minmax(0,1fr);background:#fff;border-radius:28px;box-shadow:0 40px 90px -30px rgba(0,0,0,.45)}
  .h4-story-slot{height:100%;aspect-ratio:4/5;max-width:62vw;background:#f3f3f1}
  .h4-story-ui{display:flex;flex-direction:column;padding:36px 40px 36px 44px;min-width:0}
  .h4-story-progress span{background:rgba(23,24,22,.12)}
  .h4-story-progress span i{background:var(--ink)}
  .h4-story-top{padding-top:14px;color:var(--muted)}
  .h4-story-close{margin-right:-8px;border:1px solid rgba(23,24,22,.2);background:#fff;color:var(--ink);transition:transform .16s var(--ease-out),border-color .2s}
  .h4-story-close:hover{border-color:var(--ink)}
  .h4-story-cap{display:flex;flex-direction:column;flex:1;min-height:0;padding-top:clamp(24px,6vh,64px)}
  .h4-story-cap h2{font-size:clamp(56px,5.6vw,88px)}
  .h4-story-cap small{margin-top:14px;color:var(--muted)}
  .h4-story-svc{display:none}
  /* The project's services, the frame's one lit: the same coral dot as the hero list. */
  .h4-story-svcs{position:relative;list-style:none;margin:auto 0 0;padding:0 0 0 16px;font-size:11px;line-height:2;letter-spacing:.08em}
  .h4-story-svcs li{opacity:.32;transition:opacity .3s var(--h4-ease)}
  .h4-story-svcs li.is-lit{opacity:1}
  .h4-story-svcs .h4-svc-dot{opacity:1;margin:-3px 0 0 0;left:0;transform:translate3d(0,var(--dy,0px),0)}
  .h4-story-cap>.round-link{display:none}
  .h4-story-nav{display:flex;align-items:center;gap:12px;margin-top:28px}
  .h4-story-nav button{width:52px;height:52px;border-radius:50%;border:1px solid rgba(23,24,22,.32);background:#fff;color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:background .2s,color .2s,transform .16s var(--ease-out)}
  .h4-story-nav button:hover{background:var(--ink);color:#fff}
  .h4-story-nav button:active{transform:scale(.96)}
  .h4-story-nav button svg{width:20px;height:20px}
  .h4-story-nav .round-link{margin-left:auto}
  .h4-layer[data-mode=frame] .fit{inset:28px}
  .h4-layer[data-mode=frame] .amb{opacity:.3} /* desktop: the white ground stays; the frame's colour only tints it */
  .h4-story-tap button:focus-visible{outline-color:var(--ink)}
}

/* ---------- Pause / reduced motion: static, plain links; the story opens with a fade, frames step by tap ---------- */
html[data-motion=off] .h4-m1,html[data-motion=off] .h4-stop,html[data-motion=off] .h4-card,html[data-motion=off] .h4-ring-card{animation:none}
html[data-motion=off] .h4-stroke{animation:none;clip-path:inset(0 0 0 100%)}
html[data-motion=off] .h4-lift,html[data-motion=off] .h4-label{transition:opacity .2s ease}
html[data-motion=off] .h4-tile:hover .h4-lift,html[data-motion=off] .h4-tile:focus-visible .h4-lift{transform:none}
html[data-motion=off] .h4-tile{cursor:pointer}
html[data-motion=off] .h4-cursor{display:none}
html[data-motion=off] .h4-svc-dot{transition:opacity .2s ease}
@media (prefers-reduced-motion:reduce){
  .h4-m1,.h4-stop,.h4-card,.h4-ring-card,.h4-stroke{animation:none}
  .h4-lift,.h4-label{transition:opacity .2s ease}
  .h4-tile:hover .h4-lift{transform:none}
}
}

/* Shared inner-page shell (core builder, 5 Oct 2026). Used by /work/, /services/, /services/<slug>/, /contact/, 404.
   Page builders style their own page in src/pages/<group>.css; these shared classes stay here (OWNERSHIP.md).
   v5 grammar: caps caption, Manrope H1 with the Instrument Serif italic accent, coral stop, hairline rows. */
.shell-hero{padding-top:clamp(110px,14vw,190px);padding-bottom:clamp(40px,6vw,90px)}
.shell-hero>.eyebrow{display:block;margin:0 0 28px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-size:12px}
.shell-hero h1{margin:0;font-weight:500;letter-spacing:-.055em;line-height:.98;color:var(--ink)}
.shell-hero h1 em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.03em;color:var(--ink)}
.shell-count{margin-left:.12em;font-size:.62em;vertical-align:.62em;color:var(--red)!important}
.shell-line{margin:26px 0 0;max-width:22ch;font-size:clamp(26px,3.2vw,52px);line-height:1.08;letter-spacing:-.035em;font-weight:500;color:var(--ink)}
.shell-line em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em}
.shell-actions{display:flex;flex-wrap:wrap;align-items:center;gap:20px 28px;margin-top:40px}
.shell-actions .round-link{color:var(--ink)}
.shell-stop{display:inline-block;width:.16em;height:.16em;margin-left:.06em;border-radius:50%;background:var(--red);vertical-align:baseline}
.not-found h1{font-size:clamp(64px,11vw,190px)}
main:has(.shell-hero) .round-icon{color:var(--ink);border-color:rgba(23,24,22,.32)}
@media (max-width:700px){
  .shell-hero{padding-top:104px;padding-bottom:36px}
  .shell-hero h1{font-size:clamp(52px,16vw,84px)}
  .shell-actions{margin-top:28px}
  .shell-actions .start-pill{min-height:52px}
}
.concept-card-media picture{display:contents}

/* ---------- finisher fixes (5 Oct 2026, owner: "just fix the minor bugs"); no visual change ----------
   Touch targets: the 38 px round links, the 40 px service tabs and the 17 px breadcrumb links get an invisible
   44 px hit area on touch (REQUIREMENTS A13), so nothing on screen moves or resizes. */
@media (pointer:coarse),(max-width:700px){
  .round-link,.sv-next,.sv-crumb a{position:relative}
  .round-link::before,.sv-next::before{content:"";position:absolute;left:0;right:0;top:50%;height:44px;margin-top:-22px}
  .sv-crumb a::before{content:"";position:absolute;left:-4px;right:-4px;top:50%;height:44px;margin-top:-22px}
  .sv-tab::after{content:"";position:absolute;left:0;right:0;top:-2px;bottom:-2px}
}
/* keyboard: scroll strips that Chrome makes focusable (so arrow keys scroll them) show a ring too (REQUIREMENTS A03) */
:is(.c4-pfl,.mk-strip,.sv-strip,.sv-ph-view,.sv-xp-row,.concept-grid,.c6-feeds,.sv-rels,.wk-deck,video):focus-visible{outline:2px solid var(--red);outline-offset:-2px}

/* /work/ (OWNER: work builder, 5 Oct 2026). Prefix wk-. v5 grammar: caps captions, Manrope + Instrument Serif italic,
   coral stop, hairlines, ink band. Motion: transform / opacity / clip-path only. */
.wk-open{--wk-hdr:86px;--wk-out:cubic-bezier(.16,1,.3,1);--wk-fill:cubic-bezier(.23,1,.32,1);position:relative;background:#fff}
.wk-stage{position:relative;background:#fff}
.wk-wall,.wk-shadow,.wk-ellipse{display:none}
.wk-poster{position:relative;display:flex;flex-direction:column;background:#fff;padding:0 var(--gutter)}
.wk-poster-top{display:flex;justify-content:space-between;gap:24px;padding-top:26px}
.wk-poster-top .eyebrow{margin:0;color:var(--muted);font-size:12px;letter-spacing:.08em;text-transform:uppercase;max-width:none}
.wk-poster-main{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:clamp(26px,3.4vh,44px)}
.wk-title{margin:0;font-size:clamp(120px,17.5vw,268px);font-weight:500;letter-spacing:-.065em;line-height:.86;color:var(--ink)}
.wk-count{font-family:var(--serif);font-style:italic;font-weight:400;font-size:.3em;letter-spacing:-.02em;color:var(--red);vertical-align:1.66em;margin-left:.16em}
.wk-line{margin:clamp(20px,3vh,36px) 0 0;max-width:15em;font-size:clamp(26px,2.9vw,46px);line-height:1.06;letter-spacing:-.04em;font-weight:500;color:var(--ink)}
.wk-line em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.015em}
.wk-slot{position:absolute;right:clamp(0px,7vw,120px);top:22px;bottom:clamp(26px,3.4vh,44px);aspect-ratio:4/5}
.wk-window{display:block;width:100%;height:100%;border-radius:20px;overflow:hidden;background:#100f0e}
.wk-window img{display:block;width:100%;height:100%;object-fit:cover}
.wk-window:focus-visible{outline:2px solid var(--red);outline-offset:4px}
.wk-index{list-style:none;margin:0;padding:18px 0 20px;display:flex;flex-wrap:wrap;gap:8px 34px;border-top:1px solid var(--hair);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.wk-index a{display:inline-flex;gap:10px;align-items:baseline;min-height:28px;color:var(--ink);text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .4s var(--wk-out)}
.wk-index a span{color:var(--muted);font-variant-numeric:tabular-nums}
.wk-index a:hover,.wk-index a:focus-visible{background-size:100% 1px}

/* ---------- desktop / tablet: sticky stage, the poster over the wall ---------- */
@media (min-width:701px){
  .wk-open{height:220vh}
  .wk-stage{position:sticky;top:0;height:100vh;overflow:hidden;background:#11110f;isolation:isolate}
  .wk-poster{position:absolute;left:0;right:0;top:0;height:calc(100vh - var(--wk-hdr));min-height:520px;z-index:2;transform-origin:50% 50%;will-change:transform}
  .wk-wall{display:block;position:absolute;inset:-24px;z-index:0}
  .wk-wall-grid{position:absolute;inset:0 24px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .wk-col{display:flex;flex-direction:column;gap:12px;min-width:0}
  .wk-tile{flex:none;margin:0;height:44vh;min-height:288px;border-radius:14px;overflow:hidden;background:#24251f}
  .wk-tile img{display:block;width:100%;height:100%;object-fit:cover}
  .wk-tile-tall{height:92vh;min-height:600px}
  .wk-shadow{display:block;position:absolute;left:0;right:0;top:0;height:calc(100vh - var(--wk-hdr));z-index:1;border-radius:38px;box-shadow:0 46px 110px rgba(0,0,0,.5),0 10px 30px rgba(0,0,0,.28);opacity:0;pointer-events:none;transform-origin:50% 50%}
  .wk-ellipse{display:block;position:absolute;z-index:8;left:50%;bottom:-1px;width:145vw;height:28vh;margin-left:-72.5vw;background:#fff;border-radius:50% 50% 0 0/100% 100% 0 0;transform:translateY(110%);pointer-events:none}
  /* JS on: the window is a real hole in the poster (clip-path set by work.mjs), so the picture inside the slot steps out */
  .wk-open.is-live .wk-window,.wk-open.is-still .wk-window{visibility:hidden}
  .wk-open.is-still{height:auto}
  .wk-open.is-still .wk-stage{position:relative;height:calc(100vh - var(--wk-hdr));min-height:520px}
  .wk-open.is-still .wk-ellipse,.wk-open.is-still .wk-shadow{display:none}
  /* no JS: one screen, the window shows its picture */
  .wk-open:not(.is-live):not(.is-still){height:auto}
  .wk-open:not(.is-live):not(.is-still) .wk-stage{position:relative;height:calc(100vh - var(--wk-hdr));min-height:520px}
}
@media (min-width:701px) and (max-width:1000px){.wk-slot{right:0;top:22px;bottom:auto;height:46%}.wk-title{font-size:19vw}}
@media (min-width:701px) and (max-height:640px){.wk-line{display:none}}

/* ---------- the six rows (desktop) ---------- */
.wk-list{background:#fff;padding-bottom:clamp(60px,8vw,140px)}
.wk-rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--hair)}
.wk-row{position:relative;border-bottom:1px solid var(--hair);scroll-margin-top:90px}
.wk-link{position:relative;display:grid;grid-template-columns:3.4em minmax(0,1fr) auto minmax(9em,15em) 52px;align-items:center;column-gap:clamp(16px,2vw,32px);padding:clamp(20px,2.3vw,36px) var(--gutter);color:var(--ink);text-decoration:none;overflow:hidden;isolation:isolate}
.wk-link::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--ink);transform:scaleY(0);transform-origin:50% 100%;transition:transform .5s var(--wk-fill, cubic-bezier(.23,1,.32,1))}
.wk-contain .wk-link::before{background:var(--red)}
.wk-cover{display:none}
.wk-n{font-size:12px;letter-spacing:.08em;color:var(--muted);font-variant-numeric:tabular-nums;transition:color .3s}
.wk-n i{display:none;font-style:normal}
.wk-name{display:block;overflow:hidden;overflow:clip;overflow-clip-margin:.12em;font-size:clamp(44px,6.3vw,108px);font-weight:500;letter-spacing:-.058em;line-height:1;padding-block:.04em .1em;white-space:nowrap}
.wk-name>span{display:inline-block;transition:transform .6s cubic-bezier(.16,1,.3,1)}
.wk-thumbs{display:flex;gap:8px}
.wk-thumbs img{display:block;width:clamp(64px,7.2vw,112px);height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:6px;transition:transform .6s cubic-bezier(.16,1,.3,1)}
.wk-cat{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-align:right;transition:color .3s}
.wk-go{display:grid;place-items:center;width:52px;height:52px;border:1px solid rgba(23,24,22,.3);border-radius:50%;transition:transform .5s cubic-bezier(.16,1,.3,1),background .3s,border-color .3s,color .3s}
.wk-go svg{width:20px;height:20px}
.wk-link:focus-visible{outline:2px solid var(--red);outline-offset:-4px}
@media (hover:hover) and (pointer:fine){
  .wk-link:hover::before,.wk-link:focus-visible::before{transform:scaleY(1);transition-duration:.8s}
  .wk-link:hover,.wk-link:focus-visible{color:#fff}
  .wk-link:hover .wk-n,.wk-link:hover .wk-cat,.wk-link:focus-visible .wk-n,.wk-link:focus-visible .wk-cat{color:#ffffffb8}
  .wk-contain .wk-link:hover .wk-n,.wk-contain .wk-link:hover .wk-cat{color:#fff}
  .wk-link:hover .wk-name>span{transform:translateX(.16em)}
  .wk-link:hover .wk-go{transform:rotate(45deg);background:#fff;border-color:#fff;color:var(--ink)}
  .wk-link:hover .wk-thumbs img:nth-child(1){transform:translateX(-10px) rotate(-4deg)}
  .wk-link:hover .wk-thumbs img:nth-child(3){transform:translateX(10px) rotate(4deg)}
  .wk-link:hover .wk-thumbs img:nth-child(2){transform:translateY(-6px)}
  .wk-rows .wk-row{transition:opacity .35s}
  .wk-rows:hover .wk-row:not(:hover){opacity:.4}
}
/* entrance: the name rises through its mask, the thumbs deal in (only once the page script has armed the list) */
html[data-motion="on"] .wk-rows.is-armed .wk-row:not(.is-in) .wk-name>span{transform:translateY(108%)}
html[data-motion="on"] .wk-rows.is-armed .wk-row:not(.is-in) .wk-thumbs img{opacity:0;transform:translateY(18px)}
html[data-motion="on"] .wk-rows.is-armed .wk-row.is-in .wk-name>span{transition:transform .75s cubic-bezier(.16,1,.3,1) calc(var(--i,0)*70ms)}
html[data-motion="on"] .wk-rows.is-armed .wk-row .wk-thumbs img{transition:transform .6s cubic-bezier(.16,1,.3,1),opacity .4s}
html[data-motion="on"] .wk-rows.is-armed .wk-row.is-in .wk-thumbs img:nth-child(2){transition-delay:60ms}
html[data-motion="on"] .wk-rows.is-armed .wk-row.is-in .wk-thumbs img:nth-child(3){transition-delay:120ms}
@media (max-width:1100px) and (min-width:701px){.wk-link{grid-template-columns:3em minmax(0,1fr) auto 52px}.wk-cat{grid-column:2;grid-row:2;text-align:left;margin-top:6px}.wk-thumbs{grid-row:1/3;grid-column:3}.wk-go{grid-row:1/3;grid-column:4}.wk-n{grid-row:1/3}}

/* ---------- the preview that follows the pointer (desktop) ---------- */
.wk-preview{position:fixed;left:0;top:0;z-index:40;width:var(--pw,380px);aspect-ratio:var(--ar,1.333);pointer-events:none;visibility:hidden;will-change:transform}
.wk-preview.is-on{visibility:visible}
.wk-preview-in{position:absolute;inset:0;border-radius:14px;overflow:hidden;background:#11110f;clip-path:inset(0 round 14px);box-shadow:0 30px 60px -30px rgba(0,0,0,.55)}
.wk-preview-in img,.wk-preview-in video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.wk-preview-in video{opacity:0;transition:opacity .25s}
.wk-preview-in video.is-on{opacity:1}

/* ---------- the story viewer (phone) ---------- */
.wk-viewer{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:var(--wk-bg,#0d0d0c);color:#fff;overflow:hidden;overscroll-behavior:contain;touch-action:none;transform-origin:50% 60%}
.wk-viewer::backdrop{background:rgba(13,13,12,.7)}
.wk-viewer button{touch-action:none}
.wk-v-frames{position:absolute;inset:0}
.wk-v-frame{position:absolute;inset:0;display:grid;place-items:center;visibility:hidden;background:var(--wk-bg,#0d0d0c)}
.wk-v-frame.on{visibility:visible}
.wk-v-frame img,.wk-v-frame video{grid-area:1/1;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.wk-v-frame.tall img,.wk-v-frame.tall video{width:100%;height:100%;object-fit:cover}
.wk-v-frame video{opacity:0;transition:opacity .2s}
.wk-v-frame video.is-on{opacity:1}
.wk-v-chrome{position:absolute;left:0;right:0;top:0;z-index:3;padding:max(14px,env(safe-area-inset-top)) 16px 26px;background:linear-gradient(#0d0d0cb0,#0d0d0c00);transition:opacity .2s}
.wk-v-seg{display:flex;gap:4px}
.wk-v-seg i{flex:1;height:2px;background:#ffffff47;position:relative;overflow:hidden}
.wk-v-seg b{position:absolute;inset:0;background:#fff;transform:scaleX(0);transform-origin:0 50%}
.wk-v-seg i.done b{transform:none}
.wk-v-seg i.on b{transform:none;transition:transform .28s cubic-bezier(.7,0,.16,1)}
.wk-v-meta{display:flex;align-items:center;gap:12px;margin-top:10px;min-height:48px}
.wk-v-meta .eyebrow{margin:0;padding:0;max-width:none;color:#fff;font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.wk-v-title{flex:1;min-width:0}
.wk-v-count{color:#ffffffb0!important;font-variant-numeric:tabular-nums}
.wk-v-x{flex:none;color:#fff;border-color:#ffffff66;background:#0d0d0c40;line-height:1;cursor:pointer}
.wk-v-prev,.wk-v-next{position:absolute;top:0;bottom:0;z-index:2;background:transparent;border:0;padding:0}
.wk-v-prev{left:0;width:33%}.wk-v-next{right:0;width:67%}
.wk-v-more{position:absolute;left:50%;bottom:max(30px,env(safe-area-inset-bottom));translate:-50% 0;z-index:4;display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 20px;border-radius:999px;background:#fff;color:var(--ink);font-size:14px;font-weight:500;text-decoration:none;opacity:0;pointer-events:none;transform:translateY(10px);transition:opacity .2s,transform .35s cubic-bezier(.16,1,.3,1)}
.wk-v-more svg{width:16px;height:16px}
.wk-v-more.on{opacity:1;pointer-events:auto;transform:none}
.wk-viewer.hold .wk-v-chrome,.wk-viewer.hold .wk-v-more{opacity:0}

/* ---------- phone: its own journey (the window, then a scroll-stack deck of full-screen cards) ---------- */
@media (max-width:700px),(pointer:coarse) and (max-height:500px) and (max-width:1000px){
  .wk-poster{padding-bottom:28px}
  .wk-poster-top{padding-top:22px}
  .wk-cap-r{display:none}
  .wk-poster-main{display:block;padding:26px 0 0}
  .wk-title{font-size:clamp(84px,27vw,124px);line-height:.9}
  .wk-line{font-size:clamp(24px,7vw,32px);margin-top:16px;max-width:11em}
  .wk-slot{position:relative;right:auto;top:auto;bottom:auto;width:66%;margin:26px 0 0 auto;aspect-ratio:3/4}
  .wk-window{transform-origin:50% 0;will-change:transform;animation:wk-win .9s cubic-bezier(.16,1,.3,1) .15s backwards}
  .wk-window:active{opacity:.92}
  html[data-motion="off"] .wk-window{animation:none}
  .wk-index{display:none}
  .wk-list{padding-bottom:0}
  .wk-rows{border-top:0}
  .wk-row{position:sticky;top:0;height:100vh;height:100svh;border:0;background:#fff;scroll-margin-top:0}
  .wk-link{display:block;height:100%;padding:0;color:#fff;background:var(--wk-bg);transform-origin:50% 0;border-radius:0;will-change:transform}
  .wk-link::before{z-index:1;background:linear-gradient(180deg,rgba(0,0,0,.3) 0,rgba(0,0,0,0) 16%);transform:none;transition:none}
  .wk-contain .wk-link::before{background:none}
  .wk-link::after{content:"";position:absolute;inset:0;z-index:3;background:#0d0d0c;opacity:var(--dim,0);pointer-events:none}
  .wk-cover{display:block;position:absolute;left:0;right:0;top:0;z-index:0;aspect-ratio:4/5;max-height:calc(100svh - 300px)}
  .wk-cover img{display:block;width:100%;height:100%;object-fit:cover}
  .wk-cover::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:22%;background:linear-gradient(180deg,transparent,var(--wk-bg))}
  .wk-contain .wk-cover img{object-fit:contain;padding:0 0 4%}
  .wk-contain .wk-cover::after{display:none}
  .wk-n,.wk-name,.wk-cat,.wk-go{position:absolute;z-index:2}
  .wk-n{left:20px;top:22px;color:#fff;font-size:12px}
  .wk-n i{display:inline;color:#ffffffa8}
  .wk-name{left:20px;right:84px;bottom:128px;font-size:clamp(46px,14.5vw,68px);white-space:normal;line-height:.94;color:#fff;overflow:visible}
  .wk-cat{left:20px;right:84px;bottom:100px;text-align:left;color:#ffffffd9}
  .wk-go{right:20px;bottom:100px;border-color:#ffffff80;color:#fff}
  .wk-thumbs{display:none}
  .wk-link:active .wk-go{transform:scale(.92);background:#fff;color:var(--ink)}
  html[data-motion="on"] .wk-rows.is-armed .wk-row:not(.is-in) .wk-name>span{transform:translateY(40%);opacity:0}
  html[data-motion="on"] .wk-rows.is-armed .wk-row .wk-name>span{transition:transform .7s cubic-bezier(.16,1,.3,1) .12s,opacity .4s .12s}
  /* Pause / reduced motion: a plain list of covers */
  html[data-motion="off"] .wk-row{position:relative;height:78vh;height:78svh;margin-bottom:10px}
  html[data-motion="off"] .wk-name{bottom:54px}
  html[data-motion="off"] .wk-cat,html[data-motion="off"] .wk-go{bottom:26px}
}
@media (pointer:coarse) and (max-height:500px) and (max-width:1000px){.wk-name{bottom:64px}.wk-cat,.wk-go{bottom:36px}.wk-slot{width:34%}}
@keyframes wk-win{from{clip-path:inset(100% 0 0 0 round 20px)}to{clip-path:inset(0 0 0 0 round 20px)}}
.wk-v-prev:focus-visible,.wk-v-next:focus-visible{outline:2px solid #fff;outline-offset:-6px}
.wk-v-x:focus-visible,.wk-v-more:focus-visible{outline:2px solid var(--red);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.wk-window{animation:none!important}}

/* /services/ and /services/<slug>/ (OWNER: services builder). v5 grammar: caps captions, Manrope + Instrument Serif italic,
   the coral stop, hairlines. Animates transform, opacity and clip-path only. Hidden start states apply only with JS
   (body.js-ready) and motion on, so the static page and Pause / reduced motion always show the finished frame. */
body[data-page-module=services]{--sv-ease:cubic-bezier(.22,1,.36,1);--sv-punch:cubic-bezier(.7,0,.16,1);--sv-sheet:cubic-bezier(.32,.72,0,1);--sv-coral:var(--red,#ed432b);--sv-hdr:86px}
.sv-ln{display:block;overflow:hidden;padding:0 .08em .16em 0;margin-bottom:-.16em}
.sv-ln>*{display:inline-block}
html:not([data-motion=off]) .sv-ln>*{animation:sv-rise .8s var(--sv-ease) both}
html:not([data-motion=off]) .sv-ln+.sv-ln>*{animation-delay:70ms}
@keyframes sv-rise{from{transform:translateY(105%)}to{transform:none}}
@keyframes sv-up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.sv-press{position:absolute;z-index:6;width:72px;height:72px;margin:-36px 0 0 -36px;border:2px solid var(--sv-coral);border-radius:50%;pointer-events:none;opacity:0}

/* ---------------------------------------------------------------- index */
.sv-index-hero{padding-bottom:clamp(28px,4vw,56px)}
.sv-index-hero .sv-ln{overflow:visible}
html:not([data-motion=off]) .sv-index-hero .sv-ln>*{animation-name:sv-up}
.sv-rows{list-style:none;margin:0;padding:0}
.sv-row{position:relative;transition:opacity .25s var(--sv-ease)}
.sv-row::before,.sv-rows::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--hair);transform-origin:0 50%}
.sv-rows{position:relative}.sv-rows::after{top:auto;bottom:0}
.sv-link{display:grid;grid-template-columns:3.2em minmax(0,1fr) minmax(0,30ch) auto;align-items:center;gap:20px;padding:clamp(18px,2.1vw,30px) 0;color:var(--ink);text-decoration:none}
.sv-n{font-size:12px;letter-spacing:.08em;color:var(--muted);font-variant-numeric:tabular-nums}
.sv-name{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em;font-size:clamp(32px,5.4vw,92px);font-weight:500;letter-spacing:-.05em;line-height:1}
.sv-name>span{display:block;transition:transform .5s var(--sv-ease)}
.sv-intro{font-size:13px;line-height:1.45;color:var(--muted);transition:color .25s}
.sv-go{transition:background .3s,color .3s,transform .5s var(--sv-ease)}
.sv-list{position:relative;padding-bottom:clamp(60px,8vw,140px)}
html:not([data-motion=off]) body.js-ready .sv-list:not(.is-in) .sv-row::before,html:not([data-motion=off]) body.js-ready .sv-list:not(.is-in) .sv-rows::after{transform:scaleX(0)}
html:not([data-motion=off]) body.js-ready .sv-list:not(.is-in) .sv-name>span{transform:translateY(108%)}
html:not([data-motion=off]) body.js-ready .sv-list:not(.is-in) :is(.sv-n,.sv-intro,.sv-go){opacity:0}
.sv-list.is-in .sv-row::before,.sv-list.is-in .sv-rows::after{transition:transform .7s var(--sv-ease) calc(var(--i,6) * 70ms)}
.sv-list.is-in .sv-name>span{transition:transform .75s var(--sv-ease) calc(var(--i) * 70ms + 80ms)}
.sv-list.is-in :is(.sv-n,.sv-intro,.sv-go){transition:opacity .5s linear calc(var(--i) * 70ms + 260ms),background .3s,color .3s,transform .5s var(--sv-ease)}
.sv-peek{position:fixed;z-index:20;left:0;top:0;width:clamp(240px,23vw,340px);aspect-ratio:4/3;margin:calc(clamp(240px,23vw,340px) * -.86) 0 0 34px;pointer-events:none;overflow:hidden;border-radius:4px;background:#f3f3f1;clip-path:inset(50%);transition:clip-path .45s var(--sv-punch);will-change:transform}
.sv-peek.is-on{clip-path:inset(0);transition:clip-path .6s var(--sv-ease)}
.sv-peek img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.12);transition:opacity .2s linear,transform .7s var(--sv-ease)}
.sv-peek img.is-on{opacity:1;transform:none}
.sv-peek img[data-peek="4"]{object-fit:contain;background:#fff}
@media (hover:hover) and (pointer:fine){
  .sv-list.is-hover .sv-row:not(.is-cur){opacity:.32}
  .sv-row.is-cur .sv-name>span{transform:translateX(.22em)}
  .sv-row.is-cur .sv-intro{color:var(--ink)}
  .sv-row.is-cur .sv-go{background:var(--sv-coral);border-color:var(--sv-coral);color:#fff;transform:rotate(45deg)}
}
.sv-link:focus-visible{outline:2px solid var(--sv-coral);outline-offset:-2px}
.sv-tile{display:none}

/* ---------------------------------------------------------------- service page: the opening scene */
.sv-scene{position:relative}
.sv-copy.shell-hero{padding:0;display:flex;flex-direction:column;min-width:0}
.sv-crumb ol{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0;font-size:12px;letter-spacing:.02em;color:var(--muted)}
.sv-crumb a{color:inherit;text-decoration:none}.sv-crumb a:hover{color:var(--ink)}
.sv-crumb [aria-current]{color:var(--ink)}
.sv-copy .sv-num{display:block;margin:auto 0 18px;padding-top:28px;color:var(--muted);letter-spacing:.08em}
.sv-copy h1{font-size:clamp(46px,5.5vw,96px);line-height:1}
.sv-copy h1 em{font-size:1.06em}
.sv-line{margin:22px 0 0;max-width:36ch;font-size:clamp(16px,1.3vw,20px);line-height:1.4;letter-spacing:-.012em;color:var(--ink)}
.sv-line.is-short{font-size:clamp(24px,2.3vw,36px);line-height:1.1;letter-spacing:-.035em;font-weight:500}
.sv-line em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em}
.sv-actions{margin-top:auto;padding-top:28px}
.sv-prog{display:block;position:relative;height:1px;margin-bottom:26px;background:var(--hair)}
.sv-prog i{position:absolute;inset:0;background:var(--sv-coral);transform:scaleX(0);transform-origin:0 50%}
html[data-motion=off] .sv-prog,body:not(.js-ready) .sv-prog{display:none}
html:not([data-motion=off]) .sv-copy :is(.sv-crumb,.sv-num,.sv-line,.sv-actions){animation:sv-up .6s var(--sv-ease) both}
html:not([data-motion=off]) .sv-copy .sv-num{animation-delay:60ms}
html:not([data-motion=off]) .sv-copy .sv-line{animation-delay:160ms}
html:not([data-motion=off]) .sv-copy .sv-actions{animation-delay:240ms}
.sv-stage{min-width:0;display:flex;align-items:center;justify-content:center}
.sv-stage>.sv-fig{flex:none}
.sv-fig{position:relative;margin:0}
html:not([data-motion=off]) .sv-fig{animation:sv-up .7s var(--sv-ease) .12s both}
.sv-capt{display:grid;grid-template-columns:1fr auto 1fr;align-items:start;gap:12px;margin-top:14px;font-size:11px;line-height:1.3;letter-spacing:.09em;color:var(--ink);font-variant-numeric:tabular-nums}
.sv-capt.is-two{grid-template-columns:1fr 1fr}
.sv-capt-a,.sv-capt-b{display:grid}
.sv-capt-b{justify-items:end;text-align:right;color:var(--muted)}
.sv-capt-n{color:var(--muted)}.sv-capt-n b{font-weight:500;color:var(--ink)}
.sv-capt [data-cap]{grid-area:1/1;opacity:0;transform:translateY(4px);transition:opacity .12s linear,transform .35s var(--sv-ease)}
.sv-capt [data-cap].is-on{opacity:1;transform:none;transition-delay:.1s}
.sv-dots{display:none}
.sv-scene-text{padding-top:clamp(60px,7vw,110px);padding-bottom:clamp(20px,3vw,40px)}
.sv-scene-text .sv-copy{display:block}
.sv-scene-text .sv-copy h1{font-size:clamp(56px,10vw,170px);margin-top:18px}
.sv-scene-text .sv-num{padding-top:36px}
.sv-scene-text .sv-actions{padding-top:44px}
@media (min-width:701px){
  .sv-scene-text{padding-top:clamp(36px,4vw,64px)}
  .sv-scene-text .sv-copy h1 .sv-ln{display:inline-block;vertical-align:top}
  .sv-scene-text .sv-actions{padding-top:34px}
  .sv-scene-text+.sv-inc-block.is-big{padding-top:clamp(28px,3vw,48px)}
}

@media (min-width:701px){
  .sv-pin{display:grid;grid-template-columns:minmax(0,35fr) minmax(0,65fr);gap:clamp(28px,4vw,72px);padding-top:26px;padding-bottom:30px;min-height:calc(100svh - var(--sv-hdr))}
  html:not([data-motion=off]) body.js-ready .sv-scene[data-sv-scene]{height:var(--sv-len,280vh)}
  html:not([data-motion=off]) body.js-ready .sv-pin{position:sticky;top:var(--sv-hdr);height:calc(100svh - var(--sv-hdr));min-height:560px}
  .sv-scene-brand{--sv-len:330vh}.sv-scene-web{--sv-len:290vh}.sv-scene-film{--sv-len:300vh}.sv-scene-pack{--sv-len:340vh}.sv-scene-social{--sv-len:230vh}
  .sv-scene-social .sv-pin{grid-template-columns:minmax(0,31fr) minmax(0,69fr)}
}
@media (max-width:700px){
  .sv-pin{padding-top:34px}
  .sv-copy .sv-num{margin-top:26px;padding-top:0}
  .sv-copy h1{font-size:clamp(44px,13.4vw,72px)}
  .sv-line{margin-top:16px;font-size:15px}.sv-line.is-short{font-size:26px}
  .sv-actions{display:none}   /* the dock carries "Start a project" in the thumb zone */
  .sv-stage{display:block;margin-top:30px}
  .sv-scene-text{padding-top:34px}
  .sv-scene-text .sv-copy h1{font-size:clamp(52px,16vw,84px)}
}

/* ---------------------------------------------------------------- branding: h2 "Marks, drawn" */
.mk-sprite{position:absolute;width:0;height:0;overflow:hidden}
.sv-brand{--mk:min(560px,calc(100svh - var(--sv-hdr) - 210px),42vw);--mk-line:rgba(23,24,22,.08);width:var(--mk)}
@supports (width:round(down,10px,4px)){.sv-brand{--mk:round(down,min(560px,calc(100svh - var(--sv-hdr) - 210px),42vw),40px)}}
.mk-frame{position:relative}
.mk-strip{list-style:none;margin:0;padding:0}
.mk-cell{position:relative;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.mk-layer{position:absolute;inset:0}
.mk-art{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
.mk-ink{opacity:0}
.mk-guides{position:absolute;inset:0;pointer-events:none}
.mk-g{position:absolute;display:block;background:var(--sv-coral);opacity:.15}
.mk-h{left:0;right:0;top:var(--at);height:1px;transform-origin:0 50%}
.mk-v{top:0;bottom:0;left:var(--at);width:1px;transform-origin:50% 0}
.mk-h.is-dash{background:repeating-linear-gradient(90deg,var(--sv-coral) 0 5px,transparent 5px 9px)}
.mk-v.is-dash{background:repeating-linear-gradient(180deg,var(--sv-coral) 0 5px,transparent 5px 9px)}
.mk-nodes{position:absolute;inset:0}
.mk-n{position:absolute;width:15px;height:15px;margin:-7px 0 0 -7px}
.mk-n::before,.mk-n::after{content:"";position:absolute;background:var(--ink);opacity:.45}
.mk-n::before{left:7px;top:0;width:1px;height:15px}.mk-n::after{top:7px;left:0;height:1px;width:15px}
.mk-cell.is-peek .mk-g{opacity:.7!important;transition:opacity .14s var(--sv-ease)}
.mk-reg i{position:absolute;width:9px;height:9px;background:radial-gradient(circle,var(--sv-coral) 1.3px,transparent 1.7px) 0 0/4.5px 4.5px;pointer-events:none}
.mk-reg i:nth-child(1){left:-5px;top:-5px}.mk-reg i:nth-child(2){right:-5px;top:-5px}
.mk-reg i:nth-child(3){left:-5px;bottom:-5px}.mk-reg i:nth-child(4){right:-5px;bottom:-5px}
.mk-cross{position:absolute;left:0;top:0;width:15px;height:15px;margin:-7px 0 0 -7px;filter:drop-shadow(0 0 1px #fff);opacity:0;pointer-events:none;transition:opacity .14s var(--sv-ease),transform .16s var(--sv-ease);z-index:3}
.mk-cross::before,.mk-cross::after{content:"";position:absolute;background:var(--sv-coral)}
.mk-cross::before{left:7px;top:0;width:1px;height:15px}.mk-cross::after{top:7px;left:0;height:1px;width:15px}
.mk-cross i{position:absolute;left:4px;top:4px;width:7px;height:7px;border-radius:50%;background:var(--sv-coral);box-shadow:0 0 0 2px #fff}
.sv-brand.is-pointing .mk-cross{opacity:1}
.mk-edge{position:absolute;left:-12px;right:-12px;top:0;height:1px;margin-top:-1px;background:var(--sv-coral);opacity:0;pointer-events:none;z-index:2}
.mk-dots{display:none}
@media (min-width:701px){
  .sv-brand{margin-top:44px}
  .mk-frame{width:var(--mk);aspect-ratio:1;border:1px solid var(--mk-line);background:#fff radial-gradient(circle,rgba(23,24,22,.13) .75px,transparent 1.1px) calc(var(--mk) / -40) calc(var(--mk) / -40)/calc(var(--mk) / 20) calc(var(--mk) / 20)}
  .mk-strip,.mk-cell{position:absolute;inset:0}
  .mk-cell{visibility:hidden}.mk-cell.is-on{visibility:visible}
  .mk-cell>.mk-reg{display:none}
  .mk-ruler{position:absolute;pointer-events:none;--c:calc(var(--mk) / 40);--t:rgba(23,24,22,.22)}
  .mk-ruler-x{left:0;top:-23px;width:var(--mk);height:15px;
    background:repeating-linear-gradient(90deg,var(--t) 0 1px,transparent 1px var(--c)) 0 100%/100% 5px no-repeat,
      repeating-linear-gradient(90deg,var(--t) 0 1px,transparent 1px calc(var(--c) * 5)) 0 100%/100% 10px no-repeat,
      repeating-linear-gradient(90deg,var(--t) 0 1px,transparent 1px calc(var(--c) * 10)) 0 100%/calc(100% + 1px) 15px no-repeat}
  .mk-ruler-y{top:0;left:-23px;width:15px;height:var(--mk);
    background:repeating-linear-gradient(180deg,var(--t) 0 1px,transparent 1px var(--c)) 100% 0/5px 100% no-repeat,
      repeating-linear-gradient(180deg,var(--t) 0 1px,transparent 1px calc(var(--c) * 5)) 100% 0/10px 100% no-repeat,
      repeating-linear-gradient(180deg,var(--t) 0 1px,transparent 1px calc(var(--c) * 10)) 100% 0/15px calc(100% + 1px) no-repeat}
  .mk-ruler-mark{position:absolute;left:0;top:0;background:var(--sv-coral);opacity:0;transition:opacity .14s var(--sv-ease),transform .16s var(--sv-ease)}
  .mk-ruler-x .mk-ruler-mark{width:1px;height:100%}.mk-ruler-y .mk-ruler-mark{height:1px;width:100%}
  .sv-brand.is-pointing .mk-ruler-mark{opacity:1}
  .mk-ruler-progress{position:absolute;left:0;bottom:-1px;width:100%;height:1px;background:var(--sv-coral);transform:scaleX(0);transform-origin:0 50%}
  .mk-nums{position:absolute;left:0;top:-52px;width:var(--mk);display:grid;grid-template-columns:repeat(5,1fr)}
  .mk-num{justify-self:start;margin:0;padding:6px 0;border:0;background:none;font:inherit;font-size:12px;letter-spacing:.08em;font-variant-numeric:tabular-nums;color:var(--muted);cursor:pointer;transition:color .2s var(--sv-ease)}
  .mk-num.is-on{color:var(--ink)}.mk-num:hover{color:var(--ink)}
  .mk-num:focus-visible{outline:2px solid var(--sv-coral);outline-offset:3px}
  .mk-frame{cursor:crosshair}
}
@media (max-width:700px){
  .sv-brand{--mk:calc(100vw - 2 * var(--gutter));width:auto}
  .mk-ruler,.mk-nums,.mk-furniture{display:none}
  .mk-frame{margin-inline:calc(var(--gutter) * -1)}
  .mk-strip{display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);padding:6px var(--gutter);scrollbar-width:none}
  .mk-strip::-webkit-scrollbar{display:none}
  .mk-cell{flex:0 0 calc(var(--mk) - 26px);aspect-ratio:1;scroll-snap-align:start;scroll-snap-stop:always;border:1px solid var(--mk-line);background:#fff radial-gradient(circle,rgba(23,24,22,.13) .75px,transparent 1.1px) -9px -9px/18px 18px}
  .mk-cell>.mk-reg i:nth-child(odd){left:3px}.mk-cell>.mk-reg i:nth-child(even){right:3px}
  .mk-cell>.mk-reg i:nth-child(-n+2){top:3px}.mk-cell>.mk-reg i:nth-child(n+3){bottom:3px}
  .sv-brand .sv-capt{margin-top:8px}
  .mk-dots{position:absolute;left:50%;bottom:-13px;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;gap:7px;height:44px;min-width:72px;margin:0;padding:0 8px;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .mk-dot{width:5px;height:5px;border-radius:50%;background:rgba(23,24,22,.22);transition:background .2s var(--sv-ease),transform .3s var(--sv-ease)}
  .mk-dot.is-on{background:var(--sv-coral);transform:scale(1.3)}
}

/* ---------------------------------------------------------------- website: a page assembling */
.sv-web{width:min(100%,calc((100svh - var(--sv-hdr) - 190px) * 1.62))}
.sv-web-row{display:grid;grid-template-columns:minmax(0,1fr) 22.5%;gap:clamp(16px,2vw,30px);align-items:end}
.sv-br{border:1px solid var(--hair);border-radius:10px;overflow:hidden;background:#fff;box-shadow:0 30px 60px -44px rgba(23,24,22,.5)}
.sv-br-bar{display:flex;gap:6px;align-items:center;height:28px;padding:0 12px;border-bottom:1px solid var(--hair)}
.sv-br-bar i{width:7px;height:7px;border-radius:50%;background:rgba(23,24,22,.16)}
.sv-br-bar i:first-child{background:var(--sv-coral)}
.sv-br-view{position:relative;aspect-ratio:720/520;overflow:hidden;background:#141010}
.sv-br-page{will-change:transform}
.sv-band{position:relative;overflow:hidden}
.sv-band img,.sv-ph-page img{display:block;width:100%;height:auto}
.sv-band img{transition:transform .35s var(--sv-ease),outline-color .2s;outline:1px solid transparent;outline-offset:-1px}
html:not([data-motion=off]) body.js-ready .sv-band{clip-path:inset(0 0 100% 0);transform:translateY(24px);transition:clip-path .55s var(--sv-punch),transform .7s var(--sv-ease)}
html:not([data-motion=off]) body.js-ready .sv-band.is-in{clip-path:inset(0);transform:none}
html:not([data-motion=off]) body.js-ready .sv-band:nth-child(-n+3){transition-delay:calc(var(--i) * 140ms + 250ms)}
@media (hover:hover) and (pointer:fine){.sv-band:hover{z-index:1;overflow:visible}.sv-band:hover img{transform:translateY(-4px);outline-color:var(--sv-coral)}}
.sv-br-fl{position:absolute;inset:0;pointer-events:none}
.sv-fl{position:absolute;inset:0;clip-path:inset(0 100% 0 0);transition:clip-path .5s var(--sv-punch)}
.sv-fl.is-in{clip-path:inset(0)}
.sv-fl img{width:100%;height:100%;object-fit:cover;display:block}
.sv-ph-view{position:relative;aspect-ratio:390/844;overflow:hidden;border:1px solid var(--hair);border-radius:clamp(14px,1.6vw,24px);background:#141010;box-shadow:0 30px 60px -44px rgba(23,24,22,.5)}
.sv-ph-slide{position:absolute;inset:0}
.sv-ph-page{will-change:transform}
html[data-motion=off] .sv-fl{transition:none}
@media (max-width:700px){
  .sv-web{width:auto}
  .sv-web-row{display:block}
  .sv-br{display:none}
  .sv-ph-view{display:flex;gap:12px;aspect-ratio:auto;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;margin-inline:calc(var(--gutter) * -1);padding:4px calc(var(--gutter) + 7vw) 4px;border:0;border-radius:0;background:none;box-shadow:none;scrollbar-width:none}
  .sv-ph-view::-webkit-scrollbar{display:none}
  .sv-ph-slide,.sv-ph-slide.sv-fl{position:relative;inset:auto;flex:0 0 100%;aspect-ratio:390/800;overflow:hidden;clip-path:none;border:1px solid var(--hair);border-radius:30px;background:#141010;scroll-snap-align:center;scroll-snap-stop:always}
  .sv-ph-slide.sv-fl img{object-position:50% 0}
  .sv-web .sv-capt{margin-top:12px}
  .sv-dots{display:flex;justify-content:center;gap:7px;margin-top:12px}
  .sv-dots i{width:5px;height:5px;border-radius:50%;background:rgba(23,24,22,.22);transition:background .2s,transform .3s var(--sv-ease)}
  .sv-dots i.is-on{background:var(--sv-coral);transform:scale(1.3)}
}

/* ---------------------------------------------------------------- content: a film cutting */
.sv-film{width:min(100%,calc((100svh - var(--sv-hdr) - 250px) * 1.7778))}
.sv-mon{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:8px;background:#0d0d0c}
.sv-cut{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0}
.sv-cut.is-on{opacity:1}
video.sv-cut{object-fit:contain}
.sv-tc{position:absolute;right:14px;bottom:12px;padding:3px 8px;border-radius:99px;background:rgba(13,13,12,.55);font-size:11px;letter-spacing:.09em;color:#ffffffb3;font-variant-numeric:tabular-nums}
.sv-tc b{font-weight:500;color:#fff}
.sv-play{position:absolute;inset:0;margin:0;padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.sv-play i{position:absolute;left:14px;bottom:12px;width:28px;height:28px;border-radius:50%;background:var(--sv-coral);opacity:0;transform:scale(.6);transition:opacity .2s,transform .3s var(--sv-ease)}
.sv-play i::after{content:"";position:absolute;left:11px;top:8px;border:6px solid transparent;border-left:9px solid #fff;border-right:0}
.sv-film.is-paused .sv-play i,.sv-film:not(.is-film) .sv-play:hover i{opacity:1;transform:none}
.sv-play:focus-visible{outline:2px solid var(--sv-coral);outline-offset:-4px}
.sv-strip{position:relative;margin-top:14px;height:66px;overflow:hidden}
.sv-track{display:flex;gap:6px;height:56px;margin-top:10px;width:max-content;will-change:transform}
.sv-th{flex:none;height:100%;margin:0;padding:0;border:0;border-radius:3px;overflow:hidden;background:#0d0d0c;opacity:.38;cursor:pointer;transition:opacity .2s linear,transform .3s var(--sv-ease)}
.sv-th img{display:block;height:100%;width:auto}
.sv-th.is-on{opacity:1}
.sv-th.k-film{outline:1px solid var(--sv-coral);outline-offset:-1px}
.sv-head{position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;background:var(--sv-coral);pointer-events:none}
.sv-head::before{content:"";position:absolute;left:-4px;top:0;width:10px;height:10px;border-radius:50%;background:var(--sv-coral)}
@media (hover:hover) and (pointer:fine){.sv-th:hover{opacity:1;transform:translateY(-3px)}}
@media (max-width:700px){
  .sv-film{width:auto}
  .sv-mon{margin-inline:calc(var(--gutter) * -1);border-radius:0;aspect-ratio:4/3}
  .sv-strip{margin-inline:calc(var(--gutter) * -1);height:86px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;scrollbar-width:none;overscroll-behavior-x:contain}
  .sv-strip::-webkit-scrollbar{display:none}
  .sv-track{height:72px;padding-inline:50vw}
  .sv-th{scroll-snap-align:center}
  .sv-head{position:sticky;display:block;left:50%;height:86px;margin-top:-82px}
}

/* ---------------------------------------------------------------- packaging: h6 "Keynote frames" */
.sv-pack{--kf:min(600px,calc(100svh - var(--sv-hdr) - 150px),44vw);width:var(--kf)}
.kf-box{position:relative;aspect-ratio:1;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.kf-pack{position:absolute;inset:0;background:#fff;isolation:isolate;transform-origin:50% calc(var(--sy) * 100%)}
.kf-pack+.kf-pack{clip-path:inset(0 0 0 100%)}
.sv-pack.is-spread .kf-pack,.sv-pack.is-row .kf-pack{background:transparent}
.kf-pack picture,.kf-pack img,.kf-pack canvas{position:absolute;inset:0;width:100%;height:100%;display:block;mix-blend-mode:multiply;-webkit-user-drag:none}
.kf-pack img{object-fit:contain}
.kf-pack canvas{opacity:0}
.kf-pack.has-canvas canvas{opacity:1}.kf-pack.has-canvas picture{opacity:0}
.kf-shadow{position:absolute;z-index:-1;left:50%;top:calc(var(--sy) * 100%);width:calc(var(--sw) * 100%);aspect-ratio:6/1;translate:-50% -50%;border-radius:50%;background:radial-gradient(closest-side,rgba(23,24,22,.2),rgba(23,24,22,.07) 60%,rgba(23,24,22,0))}
.kf-pal{position:absolute;left:21%;right:21%;top:calc(var(--sy) * 100% + 8%);height:max(5px,1.05%);display:flex;gap:2px;pointer-events:none}
.kf-pal i{display:block;min-width:0;border-radius:1px;transform-origin:0 50%;transform:scaleX(clamp(0,calc(var(--pal,1) * var(--n) - var(--k)),1))}
.sv-pack.is-row .kf-pal{opacity:0}
.kf-label{position:absolute;left:50%;top:calc(var(--sy) * 100% + 11% / var(--rs,1));translate:-50% 0;white-space:nowrap;font-size:calc(29px / var(--rs,1));line-height:1;letter-spacing:.1em;color:var(--ink);opacity:0;transition:opacity .25s linear}
.sv-pack.is-row .kf-label{opacity:1}
.kf-blade{position:absolute;z-index:5;left:0;top:7%;bottom:7%;width:2px;margin-left:-1px;border-radius:2px;background:var(--sv-coral);opacity:0;pointer-events:none}
.kf-hint,.kf-segs{display:none}
.kf-keys{position:absolute;right:0;top:0;z-index:5;display:flex;gap:8px;opacity:0;pointer-events:none}
.kf-keys:focus-within{opacity:1;pointer-events:auto}
.kf-keys button{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--hair);background:#fff;color:var(--ink);font-size:16px;cursor:pointer}
.kf-keys button:focus-visible{outline:2px solid var(--sv-coral);outline-offset:3px}
.sv-pack.is-row .sv-capt{opacity:0}.sv-pack .sv-capt{transition:opacity .2s linear}
@media (max-width:700px){
  .sv-pack{--kf:100vw;width:auto}
  .kf-box{margin:-10px calc(var(--gutter) * -1) 0;cursor:grab}
  .kf-hint{display:block;position:absolute;right:10px;top:50%;font-size:10px;letter-spacing:.14em;color:var(--muted);writing-mode:vertical-rl;translate:0 -50%}
  .kf-segs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:-6px}
  .kf-segs i{height:2px;background:rgba(23,24,22,.14);transition:background .3s}
  .kf-segs i.is-on{background:var(--ink)}
  .sv-pack.is-dragging .kf-hint{opacity:0}
}
/* the experience pieces */
.sv-xp{padding:clamp(40px,6vw,96px) 0 clamp(10px,2vw,30px);overflow:hidden}
.sv-xp-row{display:flex;align-items:flex-end;justify-content:center;gap:clamp(12px,1.6vw,26px);padding-inline:var(--gutter)}
.sv-xp-item{margin:0;flex:none}
.sv-xp-item :is(img,video){display:block;height:clamp(150px,15.2vw,300px);width:auto;border-radius:4px;background:#141010}
.sv-xp-item figcaption{margin-top:10px;font-size:11px;letter-spacing:.09em;color:var(--muted)}
html:not([data-motion=off]) body.js-ready .sv-xp-row .sv-xp-item{clip-path:inset(100% 0 0 0);transform:translateY(40px);transition:clip-path .8s var(--sv-punch),transform .9s var(--sv-ease)}
html:not([data-motion=off]) body.js-ready .sv-xp-row.is-in .sv-xp-item{clip-path:inset(-2% -2% -30% -2%);transform:none}
.sv-xp-item:nth-child(2){transition-delay:80ms!important}.sv-xp-item:nth-child(3){transition-delay:160ms!important}.sv-xp-item:nth-child(4){transition-delay:240ms!important}.sv-xp-item:nth-child(5){transition-delay:320ms!important}
@media (max-width:700px){
  .sv-xp-row{justify-content:flex-start;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;overscroll-behavior-x:contain;gap:12px}
  .sv-xp-row::-webkit-scrollbar{display:none}
  .sv-xp-item{scroll-snap-align:center}
  .sv-xp-item :is(img,video){height:250px}
}

/* ---------------------------------------------------------------- social: h5 "The feed fills" */
.sv-social{width:100%}
.sv-feeds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,32px);align-items:start;max-width:calc((100svh - var(--sv-hdr) - 200px) * 2.2);margin-inline:auto}
.sv-feed{min-width:0;will-change:transform}
.sv-feed-name{display:flex;justify-content:space-between;gap:10px;margin-bottom:10px;padding-bottom:9px;border-bottom:1px solid var(--hair);font-size:11px;letter-spacing:.09em;white-space:nowrap}
.sv-feed-name span:last-child{color:var(--muted);overflow:hidden;text-overflow:ellipsis}
.sv-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px}
.sv-post{position:relative;display:block;aspect-ratio:4/5;margin:0;padding:0;border:0;border-radius:0;background:var(--plate);overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .35s var(--sv-ease),opacity .2s linear}
.sv-post-in{position:absolute;inset:0;display:block}
.sv-post img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
html:not([data-motion=off]) body.js-ready .sv-post-in{clip-path:inset(0 0 100% 0);transform:scale(1.06);transition:clip-path .48s var(--sv-ease),transform .6s var(--sv-ease)}
html:not([data-motion=off]) body.js-ready .sv-post.is-in .sv-post-in{clip-path:inset(0);transform:none}
.sv-post:focus-visible{outline:2px solid var(--sv-coral);outline-offset:-2px;z-index:4}
.sv-post:active{transform:scale(.96);transition-duration:90ms}
.sv-tabs{display:none}
@media (min-width:701px){
  .sv-feed[data-feed="3"]{display:none}
  @media (hover:hover) and (pointer:fine){
    .sv-feeds:hover .sv-post{opacity:.4}
    .sv-feeds .sv-post:hover{opacity:1;transform:scale(1.7);z-index:3;box-shadow:0 24px 50px -24px rgba(23,24,22,.6)}
  }
}
@media (max-width:700px){
  .sv-feeds{display:block;max-width:none;margin-inline:calc(var(--gutter) * -1)}
  .sv-feed{display:none}.sv-feed.is-on{display:block}
  .sv-feed-name{margin:0 var(--gutter) 10px}
  .sv-tabs{position:sticky;bottom:calc(84px + env(safe-area-inset-bottom));z-index:30;display:flex;width:max-content;max-width:100%;margin:14px auto 0;padding:4px;border-radius:999px;border:1px solid var(--hair);background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 14px 34px -20px rgba(23,24,22,.5)}
  .sv-tab{position:relative;z-index:1;min-height:40px;margin:0;padding:0 13px;border:0;border-radius:999px;background:none;font:inherit;font-size:13px;font-weight:500;letter-spacing:-.01em;color:var(--ink);white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:color .25s}
  .sv-tab.is-on{color:#fff}
  .sv-tab-ind{position:absolute;left:0;right:0;top:4px;bottom:4px;background:var(--ink);clip-path:inset(0 100% 0 0 round 999px);transition:clip-path .42s var(--sv-sheet)}
  html[data-motion=off] .sv-tab-ind{transition:none}
}

/* ---------------------------------------------------------------- blocks under the scene */
.sv-block{display:grid;grid-template-columns:minmax(160px,1fr) 3fr;gap:24px;margin-inline:var(--gutter);padding:clamp(36px,5vw,80px) 0 clamp(28px,4vw,60px);border-top:1px solid var(--hair)}
.sv-block.page-gutter{padding-inline:0}
.sv-block>h2.eyebrow{margin:0;font-size:12px;font-weight:500;line-height:1.5;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.sv-scene[data-sv-scene]+.sv-block,.sv-xp+.sv-block{margin-top:clamp(24px,4vw,60px)}
.sv-inc{position:relative;list-style:none;margin:0;padding:0 0 0 44px}
.sv-inc>ol{list-style:none;margin:0;padding:0}
.sv-rail{position:absolute;left:7px;top:0;bottom:0;width:1px;background:repeating-linear-gradient(180deg,rgba(23,24,22,.3) 0 2px,transparent 2px 7px)}
.sv-rail-line{position:absolute;inset:0;background:var(--sv-coral);transform-origin:50% 0}
.sv-bead{position:absolute;left:-5px;top:-5px;width:11px;height:11px;border-radius:50%;background:var(--sv-coral);box-shadow:0 0 0 4px #fff}
body:not(.js-ready) .sv-bead{display:none}
.sv-inc li{display:grid;grid-template-columns:2.6em 1fr;align-items:baseline;padding:clamp(11px,1.2vw,18px) 0;border-bottom:1px solid var(--hair);font-size:clamp(22px,2.5vw,40px);font-weight:500;letter-spacing:-.035em;line-height:1.12}
.sv-inc-n{font-size:12px;font-weight:400;letter-spacing:.08em;color:var(--muted);font-variant-numeric:tabular-nums}
.sv-inc-t{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
.sv-inc-t>span{display:block}
html:not([data-motion=off]) body.js-ready .sv-inc li .sv-inc-t>span{transform:translateY(110%);transition:transform .7s var(--sv-ease)}
html:not([data-motion=off]) body.js-ready .sv-inc li.is-in .sv-inc-t>span{transform:none}
html:not([data-motion=off]) body.js-ready .sv-inc li .sv-inc-n{opacity:.3;transition:opacity .3s linear}
html:not([data-motion=off]) body.js-ready .sv-inc li.is-in .sv-inc-n{opacity:1}
.sv-inc-block.is-big{grid-template-columns:1fr;border-top:0;padding-top:clamp(10px,2vw,30px)}
.sv-inc-block.is-big .sv-inc li{grid-template-columns:clamp(44px,5vw,88px) 1fr;font-size:clamp(34px,6.4vw,104px);letter-spacing:-.05em;line-height:1;padding:clamp(16px,2vw,30px) 0}
/* related work */
.sv-rel-block{display:block;margin-inline:0;border-top:0;padding-top:0}
.sv-rel-block>h2.eyebrow{display:flex;gap:.5em;margin-inline:var(--gutter);padding:clamp(36px,5vw,80px) 0 clamp(22px,2.6vw,40px);border-top:1px solid var(--hair)}
.sv-rel-count{font-family:var(--serif);font-style:italic;font-size:1.5em;line-height:1;letter-spacing:0;color:var(--sv-coral);text-transform:none}
.sv-rels{list-style:none;margin:0;padding:0 var(--gutter);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,3.4vw,56px) clamp(16px,1.8vw,28px);perspective:1400px}
/* position:relative keeps each card's sr-only text inside the phone scroller (without it, Pause / reduced motion / no JS
   widened the phone layout viewport to ~1430 px: sideways scroll; finisher fix 5 Oct) */
.sv-rel{position:relative}
.sv-rel a{display:block;color:var(--ink);text-decoration:none}
.sv-rel-media{display:block;position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:4px;background:#f3f3f1}
.sv-rel-media :is(img,video){position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s var(--sv-ease)}
.sv-rel-film .sv-rel-media{background:#0d0d0c}
.sv-rel-meta{display:flex;justify-content:space-between;align-items:baseline;gap:14px;margin-top:14px}
.sv-rel-name{font-size:clamp(20px,1.9vw,30px);font-weight:500;letter-spacing:-.04em;line-height:1.1}
.sv-rel-cat{font-size:11px;letter-spacing:.09em;color:var(--muted);text-align:right}
@media (hover:hover) and (pointer:fine){.sv-rel a:hover img{transform:scale(1.045)}}
.sv-rel a:focus-visible{outline:2px solid var(--sv-coral);outline-offset:4px}
html:not([data-motion=off]) body.js-ready .sv-rel{opacity:0;transform:rotateX(22deg) translateY(48px);transform-origin:50% 100%;transition:opacity .5s linear,transform .9s var(--sv-ease)}
html:not([data-motion=off]) body.js-ready .sv-rel.is-in{opacity:1;transform:none}
html:not([data-motion=off]) body.js-ready .sv-rel .sv-rel-media img{transform:scale(1.25)}
html:not([data-motion=off]) body.js-ready .sv-rel.is-in .sv-rel-media img{transform:none;transition:transform 1.2s var(--sv-ease)}
@media (hover:hover) and (pointer:fine){html:not([data-motion=off]) body.js-ready .sv-rel.is-in a:hover img{transform:scale(1.045);transition-duration:.8s}}
.sv-rel:nth-child(3n+2){transition-delay:90ms}.sv-rel:nth-child(3n){transition-delay:180ms}
/* questions */
.sv-q{border-bottom:1px solid var(--hair)}
.sv-q summary{display:flex;justify-content:space-between;align-items:center;gap:20px;list-style:none;cursor:pointer;padding:6px 0 18px;font-size:clamp(22px,2.5vw,40px);font-weight:500;letter-spacing:-.035em;line-height:1.12}
.sv-q summary::-webkit-details-marker{display:none}
.sv-q-x{position:relative;flex:none;width:44px;height:44px;border:1px solid rgba(23,24,22,.32);border-radius:50%;transition:transform .4s var(--sv-ease),background .3s}
.sv-q-x::before,.sv-q-x::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:1.5px;margin:-.75px 0 0 -7px;background:var(--ink)}
.sv-q-x::after{transform:rotate(90deg);transition:transform .4s var(--sv-ease)}
.sv-q[open] .sv-q-x::after{transform:none}
.sv-q summary:focus-visible{outline:2px solid var(--sv-coral);outline-offset:4px}
.sv-q p{margin:0;padding:0 64px 26px 0;max-width:46ch;font-size:clamp(17px,1.5vw,22px);line-height:1.45;color:var(--muted)}
/* end: back to the index, on to the next service */
.sv-end{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;padding-top:clamp(36px,5vw,70px);padding-bottom:clamp(60px,8vw,120px)}
.sv-next{display:flex;align-items:center;gap:18px;color:var(--ink);text-decoration:none}
.sv-next-n{font-size:12px;letter-spacing:.08em;color:var(--muted)}
.sv-next-name{font-size:clamp(24px,3vw,48px);font-weight:500;letter-spacing:-.045em;line-height:1}
.sv-next .round-icon{transition:background .3s,color .3s,transform .5s var(--sv-ease)}
@media (hover:hover) and (pointer:fine){.sv-next:hover .round-icon{background:var(--sv-coral);border-color:var(--sv-coral);color:#fff;transform:rotate(45deg)}}
.sv-next:focus-visible{outline:2px solid var(--sv-coral);outline-offset:6px}

@media (max-width:700px){
  .sv-link{grid-template-columns:2.2em minmax(0,1fr) auto;gap:10px;padding:20px 0}
  .sv-intro,.sv-peek{display:none}
  .sv-name{font-size:clamp(30px,9.2vw,44px);letter-spacing:-.045em}
  .sv-link:active .sv-go{background:var(--sv-coral);border-color:var(--sv-coral);color:#fff}
  /* phone: each row carries a still of its real work in the thumb's reach (AI automation keeps the arrow: no work yet) */
  .sv-tile{display:block;position:relative;width:64px;height:64px;border-radius:6px;overflow:hidden;background:#f3f3f1;transition:transform .2s var(--sv-ease)}
  .sv-tile img{display:block;width:100%;height:100%;object-fit:cover}
  .sv-link:has(.sv-tile) .sv-go{display:none}
  .sv-link:active .sv-tile{transform:scale(.94)}
  html:not([data-motion=off]) body.js-ready .sv-list:not(.is-in) .sv-tile{clip-path:inset(0 0 100% 0)}
  html:not([data-motion=off]) body.js-ready .sv-list:not(.is-in) .sv-tile img{transform:scale(1.25)}
  .sv-list.is-in .sv-tile{clip-path:inset(0);transition:clip-path .7s var(--sv-ease) calc(var(--i) * 70ms + 180ms),transform .2s var(--sv-ease)}
  .sv-list.is-in .sv-tile img{transition:transform 1s var(--sv-ease) calc(var(--i) * 70ms + 180ms)}
  .sv-row:active{opacity:.6}
  .sv-block{grid-template-columns:1fr;gap:18px}
  .sv-inc{padding-left:30px}
  .sv-inc li{grid-template-columns:2.2em 1fr}
  .sv-rels{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scroll-padding-inline:var(--gutter);scrollbar-width:none;perspective:none}
  .sv-rels::-webkit-scrollbar{display:none}
  .sv-rel{flex:0 0 78%;scroll-snap-align:start}
  html:not([data-motion=off]) body.js-ready .sv-rel{transform:translateY(28px)}
  .sv-rel:nth-child(n){transition-delay:0ms}
  .sv-q p{padding-right:0}
  .sv-end{flex-direction:column;align-items:flex-start;padding-bottom:60px}
}

/* ---------------------------------------------------------------- sheet (phone: bottom sheet; desktop: centred card) */
.sv-sheet{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;overflow:hidden;color:var(--ink)}
.sv-sheet[open]{display:grid;place-items:center}
.sv-sheet::backdrop{background:rgba(23,24,22,.46);animation:sv-fade .3s linear both}
.sv-sheet.is-leaving::backdrop{animation:sv-fade .24s linear reverse both}
@keyframes sv-fade{from{opacity:0}to{opacity:1}}
.sv-sheet-panel{position:relative;width:min(92vw,460px);max-height:90vh;display:flex;flex-direction:column;background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 40px 90px -40px rgba(23,24,22,.6)}
.sv-sheet-grab{display:none}
.sv-sheet-x{position:absolute;right:12px;top:12px;z-index:3;width:40px;height:40px;border-radius:50%;border:1px solid var(--hair);background:#fff;color:var(--ink);font-size:20px;line-height:1;cursor:pointer}
.sv-sheet-body{min-height:0;overflow:auto;padding:0 0 22px}
.sv-sh-head{display:flex;justify-content:space-between;gap:12px;padding:25px 64px 16px 20px;font-size:11px;letter-spacing:.09em;font-variant-numeric:tabular-nums;white-space:nowrap}
.sv-sh-head i{font-style:normal;color:var(--muted)}.sv-sh-head span:last-child{color:var(--muted)}.sv-sh-head b{font-weight:500;color:var(--ink)}
.sv-sheet-strip{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior:contain;padding-inline:20px;scrollbar-width:none;outline:0}
.sv-sheet-strip::-webkit-scrollbar{display:none}
.sv-sh-post{flex:0 0 100%;aspect-ratio:4/5;scroll-snap-align:center;background:var(--plate)}
.sv-sh-post img{display:block;width:100%;height:100%;object-fit:cover}
.sv-sh-media{aspect-ratio:16/10;overflow:hidden;background:#f3f3f1}
.sv-sh-media img{display:block;width:100%;height:100%;object-fit:cover}
.sv-sh-n{display:block;margin:22px 20px 8px;color:var(--muted)}
.sv-sh-t{margin:0 20px;font-size:38px;font-weight:500;letter-spacing:-.05em;line-height:1}
.sv-sh-p{margin:14px 20px 0;font-size:15px;line-height:1.45;color:var(--muted)}
.sv-sh-go{margin:22px 20px 0;min-height:52px}
@media (max-width:700px){
  .sv-sheet[open]{place-items:end stretch}
  .sv-sheet-panel{width:100%;max-height:88svh;border-radius:20px 20px 0 0;padding-bottom:max(10px,env(safe-area-inset-bottom));touch-action:none;will-change:transform}
  .sv-sheet-grab{display:block;flex:none;align-self:center;width:36px;height:4px;margin:9px 0 0;border-radius:2px;background:rgba(23,24,22,.22)}
  .sv-sheet.is-svc .sv-sheet-grab{position:absolute;top:0;z-index:3;background:rgba(255,255,255,.8)}
  .sv-sheet.is-svc .sv-sheet-body:not(:has(.sv-sh-media)) {padding-top:20px}
  .sv-sh-head{padding-top:16px}
  .sv-sh-post{flex-basis:86%}
  .sv-sheet-strip{touch-action:pan-x}
  .sv-sh-go{display:flex;justify-content:space-between}
}
/* guard: nothing on these pages may widen the phone layout viewport */
body[data-page-module=services] main{overflow-x:clip}
@media (max-width:700px){.sv-stage>.sv-fig{width:100%;max-width:100%;min-width:0}}
@media (max-width:700px){html:not([data-motion=off]) body.js-ready .sv-feed[data-feed="0"] .sv-post:nth-child(-n+3):not(.was-in) .sv-post-in{clip-path:none;transform:none}}

/* /contact/ (OWNER: contact builder, 5 Oct 2026). Prefix ct-. Also the 404's motion (.not-found; markup in src/pages.mjs).
   v5 grammar: caps captions, Manrope + Instrument Serif italic, coral stop, hairlines. transform / opacity / clip-path only. */
.ct-open{--ct-hdr:86px;--ct-out:cubic-bezier(.16,1,.3,1);position:relative;background:#fff}
.ct-stage{position:relative;display:flex;flex-direction:column;background:#fff;height:calc(100vh - var(--ct-hdr));min-height:560px;overflow:hidden;overflow:clip}
.ct-top{display:flex;justify-content:space-between;gap:24px;padding-top:26px}
.ct-top .eyebrow{margin:0;max-width:none;color:var(--muted);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.ct-head{position:relative;flex:1;min-height:0;display:flex;align-items:center}
.ct-title{position:relative;z-index:2;margin:0;width:100%;color:var(--ink);font-weight:500;line-height:1;pointer-events:none}
.ct-l1,.ct-l2{display:block;white-space:nowrap;will-change:transform}
.ct-l1{font-size:clamp(84px,12.4vw,214px);letter-spacing:-.066em;line-height:.9}
.ct-l2{margin-left:clamp(0px,19vw,330px);font-size:clamp(100px,15.2vw,262px);line-height:.92}
.ct-mark{display:inline-block;font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.03em;pointer-events:auto;cursor:pointer;-webkit-tap-highlight-color:transparent}
.ct-ch{display:inline-block;transform-origin:50% 80%;transition:transform .5s var(--ct-out)}
.ct-stop{color:var(--red)}
.ct-hair{display:block;height:1px;margin:clamp(8px,1.2vh,16px) 0 clamp(2px,.6vh,8px);background:var(--red);transform-origin:0 50%;animation:ct-hair 1s var(--ct-out) .1s backwards}
.ct-film{position:absolute;z-index:1;left:60%;top:50%;width:min(62vw,calc((100vh - var(--ct-hdr) - 250px) * 1.7778));aspect-ratio:16/9;transform:translate(-50%,-50%) scale(.9);clip-path:inset(47.4% 43.5% round 200px);background:#11110f;overflow:hidden;opacity:0;will-change:clip-path,transform}
.ct-film img,.ct-film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ct-film video{opacity:0;transition:opacity .3s}
.ct-film video.is-on{opacity:1}
.ct-foot{position:relative;z-index:3;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:18px 32px;margin-inline:var(--gutter);padding:20px 0 24px;border-top:1px solid var(--hair);background:#fff}
.ct-mail{display:flex;align-items:center;flex-wrap:wrap;gap:10px 22px;min-width:0}
.ct-mail-l{margin:0!important;color:var(--muted);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.ct-email{font-size:clamp(20px,2.5vw,40px);font-weight:500;letter-spacing:-.035em;line-height:1.1;color:var(--ink);user-select:all;-webkit-user-select:all;cursor:text;overflow-wrap:anywhere}
.ct-copy{position:relative;display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 16px 0 20px;border:1px solid rgba(23,24,22,.32);border-radius:999px;background:transparent;color:var(--ink);font:inherit;font-size:14px;font-weight:500;cursor:pointer;overflow:hidden;transition:background .25s,color .25s,border-color .25s,transform .16s var(--ct-out)}
.ct-copy-l{display:inline-block;min-width:6.4em;text-align:left}
.ct-copy-i{display:grid;place-items:center;width:20px;height:20px}
.ct-copy-i svg{width:20px;height:20px;overflow:visible}
.ct-copy-i .b{stroke-dasharray:22;stroke-dashoffset:22}
.ct-copy:hover{border-color:var(--ink)}
.ct-copy:active{transform:scale(.96)}
.ct-copy:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.ct-copy[data-state="ok"]{background:var(--ink);border-color:var(--ink);color:#fff}
.ct-copy[data-state="ok"] .a{opacity:0}
.ct-copy[data-state="ok"] .b{stroke-dashoffset:0;transition:stroke-dashoffset .35s var(--ct-out) .08s}
.ct-copy[data-state="fail"]{border-color:var(--red);color:var(--red);animation:ct-no .4s cubic-bezier(.36,.07,.19,.97)}
.ct-actions{display:flex;align-items:center;gap:26px}
.ct-actions .round-link{color:var(--ink)}
.ct-actions .round-icon{color:var(--ink);border-color:rgba(23,24,22,.32)}

/* the split needs the script and motion: only then is there a scroll track */
@media (min-width:701px){
  html[data-motion="on"] .ct-open.is-live{height:185vh}
  html[data-motion="on"] .ct-open.is-live .ct-stage{position:sticky;top:0}
}
/* Pause / reduced motion (desktop): the film is a still band beside the headline's second line */
html[data-motion="off"] .ct-film{opacity:1;clip-path:inset(0 round 22px);transform:translate(-50%,-50%);left:auto;right:var(--gutter);top:calc(50% - 12%);width:min(30vw,420px);translate:50% 0}
html[data-motion="off"] .ct-hair{animation:none}
@media (min-width:701px) and (max-height:680px){.ct-l1{font-size:min(12.4vw,22vh)}.ct-l2{font-size:min(15.2vw,27vh)}}

/* ---------- six mailto rows ---------- */
.ct-list{display:grid;grid-template-columns:minmax(150px,1fr) 3fr;gap:24px;padding-top:clamp(40px,6vw,96px);padding-bottom:clamp(64px,8vw,130px);background:#fff}
.ct-list-h{margin:0;display:flex;align-items:baseline;gap:12px;font:inherit;align-self:start;position:sticky;top:110px}
.ct-list-h .eyebrow{margin:0;color:var(--muted);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.ct-list-h em{font-family:var(--serif);font-style:italic;font-size:22px;color:var(--red);line-height:1}
.ct-rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--hair)}
.ct-row{position:relative;display:grid;grid-template-columns:3em minmax(0,1fr) 48px;align-items:center;gap:14px;padding:clamp(14px,1.6vw,24px) 0;border-bottom:1px solid var(--hair);color:var(--ink);text-decoration:none}
.ct-row::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--red);transform:scaleX(0);transform-origin:0 50%;transition:transform .7s var(--ct-out)}
.ct-n{font-size:12px;letter-spacing:.08em;color:var(--muted);font-variant-numeric:tabular-nums}
.ct-name{display:block;overflow:hidden;overflow:clip;overflow-clip-margin:.14em;font-size:clamp(28px,4.4vw,74px);font-weight:500;letter-spacing:-.052em;line-height:1.04;padding-bottom:.06em}
.ct-name>span{display:inline-block;transition:transform .55s var(--ct-out)}
.ct-go{display:grid;place-items:center;width:48px;height:48px;border:1px solid rgba(23,24,22,.3);border-radius:50%;transition:transform .5s var(--ct-out),background .3s,border-color .3s,color .3s}
.ct-go svg{width:18px;height:18px}
.ct-row:focus-visible{outline:2px solid var(--red);outline-offset:4px}
.ct-row:active .ct-go{transform:scale(.92)}
@media (hover:hover) and (pointer:fine){
  .ct-row:hover::after{transform:scaleX(1)}
  .ct-row:hover .ct-name>span{transform:translateX(.18em)}
  .ct-row:hover .ct-go{transform:rotate(45deg);background:var(--red);border-color:var(--red);color:#fff}
  .ct-rows li{transition:opacity .35s}
  .ct-rows:hover li:not(:hover){opacity:.45}
}
html[data-motion="on"] .ct-rows.is-armed .ct-row:not(.is-in) .ct-name>span{transform:translateY(108%)}
html[data-motion="on"] .ct-rows.is-armed .ct-row.is-in .ct-name>span{transition:transform .75s var(--ct-out) calc(var(--i,0)*70ms)}

/* ---------- the sheet (phone) ---------- */
.ct-sheet{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;overflow:hidden;overscroll-behavior:contain}
.ct-sheet::backdrop{background:rgba(13,13,12,.46);animation:ct-bd .35s both}
.ct-sheet-panel{position:absolute;left:0;right:0;bottom:0;max-height:88vh;max-height:88svh;overflow-y:auto;padding:10px 20px calc(22px + env(safe-area-inset-bottom));border-radius:26px 26px 0 0;background:#fff;color:var(--ink);box-shadow:0 -24px 60px -30px rgba(13,13,12,.5);touch-action:pan-y;will-change:transform}
.ct-grab{display:block;width:36px;height:4px;margin:0 auto 14px;border-radius:4px;background:rgba(23,24,22,.22)}
.ct-sheet-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
.ct-sheet-head h2{margin:0;font-size:34px;font-weight:500;letter-spacing:-.05em;line-height:1}
.ct-sheet-head h2 em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.02em}
.ct-sheet-x{flex:none;color:var(--ink);border-color:rgba(23,24,22,.3);line-height:1;cursor:pointer}
.ct-chips{position:relative;display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.ct-chip{position:relative;z-index:1;min-height:48px;padding:0 16px;border:1px solid var(--hair);border-radius:999px;background:transparent;color:var(--ink);font:inherit;font-size:15px;font-weight:500;letter-spacing:-.01em;cursor:pointer;transition:color .2s,border-color .2s,transform .16s var(--ct-out)}
.ct-chip:active{transform:scale(.96)}
.ct-chip[aria-checked="true"]{color:#fff;border-color:transparent}
.ct-chip:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.ct-chip-ind{position:absolute;left:0;top:0;z-index:0;width:0;height:48px;border-radius:999px;background:var(--ink);opacity:0;transition:opacity .2s;pointer-events:none}
.ct-sheet-pill.start-pill{display:flex;justify-content:space-between;width:100%;min-height:60px;padding-left:26px;font-size:17px}
.ct-sheet-pill .start-pill-icon{width:48px;height:48px}
.ct-sheet-mail{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-top:16px;padding-top:14px;border-top:1px solid var(--hair)}
.ct-sheet-mail .ct-email{font-size:16px;letter-spacing:-.02em}

/* ---------- phone: its own journey (lines part vertically, film opens under the thumb, dock pill opens the sheet) ---------- */
@media (max-width:700px),(pointer:coarse) and (max-height:500px) and (max-width:1000px){
  .ct-open{--band:calc((100vw - 2 * var(--gutter)) * .5625)}
  .ct-stage{height:auto;min-height:0;overflow:visible;padding-bottom:26px}
  .ct-top{padding-top:22px}
  .ct-cap-r{display:none}
  .ct-head{display:block;padding-top:26px}
  .ct-l1{font-size:21.4vw;line-height:.9}
  .ct-l2{margin:calc(var(--band) + 22px) 0 0 0;font-size:25vw;line-height:.86;text-align:right;transform:translate3d(0,calc(var(--band) * -1),0)}
  .ct-hair{position:absolute;left:0;right:0;top:calc(19.3vw + 10px);margin:0}
  .ct-film{left:var(--gutter);right:var(--gutter);top:calc(26px + 19.3vw + 11px);width:auto;height:var(--band);aspect-ratio:auto;transform:none;clip-path:inset(0 0 100% 0 round 2px)}
  .ct-foot{display:block;margin-top:26px;padding:20px 0 0;transform:translate3d(0,calc(var(--band) * -1),0);background:transparent}
  .ct-mail{display:grid;grid-template-columns:1fr;gap:10px}
  .ct-email{font-size:clamp(19px,5.6vw,26px)}
  .ct-copy{justify-content:space-between;width:100%;min-height:56px;padding:0 20px 0 22px;font-size:16px}
  .ct-actions{margin-top:18px}
  .ct-actions .ct-pill{display:none}
  html[data-motion="off"] .ct-l1,html[data-motion="off"] .ct-l2,html[data-motion="off"] .ct-foot{transform:none}
  html[data-motion="off"] .ct-film{opacity:1;clip-path:inset(0 round 16px);transform:none;translate:none;left:var(--gutter);right:var(--gutter);top:calc(26px + 19.3vw + 11px);width:auto}
  html[data-motion="off"] .ct-hair{display:none}
  .ct-list{grid-template-columns:1fr;gap:18px;padding-top:34px;padding-bottom:120px}
  .ct-list-h{position:static}
  .ct-row{grid-template-columns:2.2em minmax(0,1fr) 44px;min-height:64px}
  .ct-go{width:44px;height:44px}
}
@media (pointer:coarse) and (max-height:500px) and (max-width:1000px){.ct-open{--band:calc((100vw - 2 * var(--gutter)) * .3)}.ct-l1{font-size:12vw}.ct-l2{font-size:14vw}.ct-hair{top:calc(10.8vw + 10px)}.ct-film{top:calc(26px + 10.8vw + 11px)}}
@keyframes ct-hair{from{transform:scaleX(0)}}
@keyframes ct-no{20%,60%{transform:translateX(-4px)}40%,80%{transform:translateX(4px)}}
@keyframes ct-bd{from{opacity:0}}

/* ---------- 404: the stop has rolled off the line, and hops home (PAGES-PLAN §5; CSS only, markup in src/pages.mjs) ---------- */
.not-found.shell-hero{display:flex;flex-direction:column;justify-content:center;min-height:calc(100vh - 86px - 150px);min-height:calc(100svh - 86px - 150px);padding-top:clamp(40px,6vw,90px)}
.not-found.shell-hero>.eyebrow{font-family:var(--serif);font-style:italic;font-size:clamp(40px,5vw,72px);letter-spacing:-.02em;line-height:1;color:var(--red);text-transform:none;margin-bottom:10px}
.not-found.shell-hero h1{white-space:nowrap}
.not-found.shell-hero{overflow-x:clip} /* the stop rolls in from 5.2em right of the line: no sideways scroll while it does */
.not-found .shell-stop{position:relative;transform-origin:50% 100%}
.not-found .shell-actions{margin-top:clamp(36px,5vw,64px)}
@media (prefers-reduced-motion:no-preference){
  .not-found .shell-stop{animation:nf-roll 1.5s linear .35s backwards}
  .not-found h1:hover .shell-stop,.not-found h1:active .shell-stop{animation:nf-hop .9s linear}
  .not-found h1 em{display:inline-block;animation:nf-nudge .5s cubic-bezier(.16,1,.3,1) 1.62s backwards}
  .not-found .shell-actions>*{animation:nf-rise .7s cubic-bezier(.16,1,.3,1) 1.7s backwards}
  .not-found .shell-actions>*+*{animation-delay:1.78s}
  html[data-motion="off"] .not-found .shell-stop,html[data-motion="off"] .not-found h1 em,html[data-motion="off"] .not-found .shell-actions>*{animation:none}
}
/* three bounces along the baseline, each shorter and lower, landing as the full stop */
@keyframes nf-roll{
  0%{transform:translate(5.2em,-2.4em);animation-timing-function:cubic-bezier(.5,0,1,.6)}
  26%{transform:translate(3.4em,0) scale(1.18,.8);animation-timing-function:cubic-bezier(0,.5,.5,1)}
  30%{transform:translate(3.2em,-.1em) scale(.94,1.06);animation-timing-function:cubic-bezier(0,.5,.5,1)}
  44%{transform:translate(2.2em,-1em);animation-timing-function:cubic-bezier(.5,0,1,.6)}
  58%{transform:translate(1.3em,0) scale(1.14,.84);animation-timing-function:cubic-bezier(0,.5,.5,1)}
  70%{transform:translate(.7em,-.42em);animation-timing-function:cubic-bezier(.5,0,1,.6)}
  82%{transform:translate(.25em,0) scale(1.1,.88);animation-timing-function:cubic-bezier(0,.5,.5,1)}
  90%{transform:translate(.1em,-.12em);animation-timing-function:cubic-bezier(.5,0,1,.6)}
  100%{transform:none}
}
@keyframes nf-hop{
  0%{transform:none;animation-timing-function:cubic-bezier(0,.5,.5,1)}
  30%{transform:translateY(-1.5em);animation-timing-function:cubic-bezier(.5,0,1,.6)}
  58%{transform:scale(1.2,.78);animation-timing-function:cubic-bezier(0,.5,.5,1)}
  76%{transform:translateY(-.4em);animation-timing-function:cubic-bezier(.5,0,1,.6)}
  90%{transform:scale(1.1,.9)}
  100%{transform:none}
}
@keyframes nf-nudge{0%{transform:none}40%{transform:translateX(-.03em) skewX(-4deg)}100%{transform:none}}
@keyframes nf-rise{from{transform:translateY(18px);opacity:0}}
@media (max-width:700px){
  .not-found.shell-hero{min-height:calc(100svh - 75px - 230px);justify-content:flex-end;padding-bottom:120px}
  .not-found.shell-hero h1{font-size:clamp(40px,12.9vw,64px)}
}
.ct-sheet-x:focus-visible{outline:2px solid var(--red);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.ct-hair,.ct-sheet::backdrop{animation:none}}

/* Phone polish, loaded last (owner, 5 Oct 04:00: "check mobile version for issues in alignment and spacing
   and other bugs as well, in scrolling"). Bug fixes only; the approved design is unchanged.
   Evidence: evidence/mobile-audit-0400/report.md */
@media (max-width: 700px) {
  /* One gutter: story chapter heads line up with every other block (page gutter, 22px at 390). */
  .ch-head { left: var(--gutter); right: var(--gutter); }

  /* Tap targets of 44px or more; the visual size stays the same. */
  .sv-crumb a { display: inline-flex; align-items: center; min-height: 44px; }
  a.round-link { min-height: 44px; }
  .sv-tab { min-height: 44px; }
  button.sv-th { min-width: 44px; }

  /* Minimum phone sizes: 11px for tracked caps captions, 12px for everything else. */
  .hero-meta span,
  .h4-now-text,
  .h4-label,
  .hero-services li,
  .manifesto-label .eyebrow,
  .footer-line,
  .kf-hint,
  .sv-feed-name span { font-size: 11px; }
  .footer-bottom span { font-size: 12px; }

  /* Social media page: the brand switcher sits in the flow, never as a second pill stacked on the dock. */
  .sv-tabs { position: relative; bottom: auto; margin: 16px auto 0; }

  /* Work: the "04 / 06" counter gets a small clear zone so it never collides with an artwork's own wordmark. */
  .wk-link .wk-n { background: rgba(255, 255, 255, .88); color: var(--ink); padding: 3px 7px; border-radius: 4px; }

  /* Second pass (04:25): last small targets and labels. */
  a.sv-next { display: inline-flex; align-items: center; min-height: 44px; }
  a.round-link span { font-size: 12px; }
  button.motion-toggle { font-size: 12px; min-height: 44px; }
  .hero-meta span { white-space: nowrap; }
}