/* Shared pieces of the site design that are not in studio-two.css: the SEED container shape on the site's components and the still-with-loop frame (DxMedia). */
.dx-media{position:relative;aspect-ratio:var(--dx-ratio,16/9);background:var(--d-plate);overflow:hidden}
.dx-media :is(img,video){position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:var(--dx-fit,cover);object-position:var(--dx-pos,center);display:block}
.dx-media video{opacity:0}
.dx-media video[data-preview-playing]{opacity:1}
@media(prefers-reduced-motion:no-preference){
.dx-media video{transition:opacity .2s linear}
}
html{--shape-flat:0px;--shape-max:999px;--shape-edge:0 solid transparent;
--shape-r-l:min(clamp(20px,3vw,44px),var(--shape-flat)) min(clamp(20px,3vw,44px),var(--shape-max)) min(clamp(20px,3vw,44px),var(--shape-flat)) min(clamp(20px,3vw,44px),var(--shape-max));
--shape-r-s:min(14px,var(--shape-flat)) min(14px,var(--shape-max)) min(14px,var(--shape-flat)) min(14px,var(--shape-max))}
/* pages that still use the earlier page components (Insights, FAQ, archive, legal, the gaming service page) take the design's colours and type, without the old reveals and shadows */
html[data-design=studio-two]:not([data-design=current]) :is(.hover-caption,.growth-field,[data-seed-theme-control]){display:none!important}
html[data-design=studio-two]:not([data-design=current]) body{--paper:var(--d-bg);--ink:var(--d-ink);--panel:var(--d-accent);--line:var(--d-line);--muted:var(--d-mute);--accent:var(--d-accent);--focus:var(--d-ink);--active:var(--d-ink);--font-body:var(--d-sans);--font-display:var(--d-display);--font-label:var(--d-label);--font-mono:var(--d-label);background:var(--d-bg);color:var(--d-ink);font-family:var(--d-sans);letter-spacing:0}
html[data-design=studio-two]:not([data-design=current]) main :is([data-reveal],[data-reveal-image],[data-motion-type],[data-motion-item]){opacity:1!important;transform:none!important;clip-path:none!important}
html[data-design=studio-two]:not([data-design=current]) main *{box-shadow:none!important}
html[data-design=studio-two]:not([data-design=current]) main{padding-top:0}
/* Studio Two (design switcher option `studio-two`, review build only: linked when PUBLIC_DESIGN_SWITCHER=1).
   One display size for every title, two surfaces (the page and its inverse), pictures carry the colour, 24px margins,
   the SEED container shape on every picture and control. SEED tokens and faces only. Follows the light and dark themes. */

/* ---------- which markup shows ---------- */
html:not([data-design=studio-two]) .s2{display:none!important}
html[data-design=studio-two] :is(.dx,.dx-header,.dx-footer){display:none!important}
html[data-design=studio-two] body[data-has-s2] main>:not(.s2){display:none!important}
/* designs.css hides everything in main that is not one of its own alternates; this design's markup is `.s2`, so it is let back in */
html[data-design=studio-two]:not([data-design=current]) body[data-has-s2] main>.s2:not(.dx){display:block!important}
html[data-design=studio-two] body:not([data-has-s2]) main{padding-top:calc(var(--s2-bar) + var(--s2-head))}
html[data-design=studio-two] .s2-header [data-seed-theme-control]:not([hidden]){display:inline-flex!important}
.s2 [hidden]{display:none!important}

/* ---------- tokens ---------- */
html[data-design=studio-two] body{--d-bg:var(--seed-surface-page);--d-ink:var(--seed-text-primary);--d-mute:var(--seed-text-secondary);--d-line:var(--seed-border-subtle);--d-plate:var(--seed-surface-panel);--d-accent:var(--seed-surface-panel);
 --d-sans:'DM Sans',Arial,sans-serif;--d-display:var(--d-sans);--d-label:'Optician Sans','DM Sans',monospace;--d-m:24px;
 --s2-m:24px;--s2-bar:0px;--s2-head:72px;--s2-display:clamp(52px,12vw,232px);--s2-statement:clamp(26px,3vw,56px);--s2-pad:clamp(72px,10vw,176px);
 --s2-out:var(--seed-motion-ease-out,cubic-bezier(.16,1,.3,1));letter-spacing:-.015em}
@media(max-width:760px){html[data-design=studio-two] body{--d-m:16px;--s2-m:16px;--s2-head:56px;--s2-display:clamp(44px,15.5vw,96px)}}
/* the inverse surface: dark green on the light theme, paper on the dark theme */
.s2-inv{--d-bg:var(--seed-color-dark-page);--d-ink:var(--seed-color-dark-text);--d-mute:var(--seed-color-dark-muted);--d-line:var(--seed-color-dark-line);--d-plate:var(--seed-color-dark-panel);background:var(--d-bg);color:var(--d-ink)}
html[data-color-scheme=dark] .s2-inv{--d-bg:var(--seed-color-paper);--d-ink:var(--seed-color-ink);--d-mute:var(--seed-color-muted);--d-line:var(--seed-color-line);--d-plate:var(--seed-color-mineral)}
html:not([data-color-scheme=dark]) .s2-inv .seed-wordmark{filter:invert(1)}
html[data-color-scheme=dark] .s2-inv .seed-wordmark{filter:none}

/* ---------- base ---------- */
main>.s2{font-kerning:normal;font-family:var(--d-sans);color:var(--d-ink);font-size:18px;line-height:1.56;letter-spacing:-.015em}
.s2 :where(h1,h2,h3,p,ul,ol,dl,dd,dt,figure,address){margin:0;padding:0;font-style:normal}.s2 :where(ul,ol){list-style:none}
.s2 a{color:inherit}
.s2 :is(a,button,summary,video,input,textarea):focus-visible{outline:2px solid var(--d-ink);outline-offset:3px}
.s2 .dx-media,.s2 :is(.s2-two,.s2-plate) img,.s2-plate>video,.s2-plate-film{border-radius:var(--shape-r-l)}
.s2-plate-film{position:relative;overflow:hidden}
.s2-plate-film>video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#000}
.s2 .dx-media{background:var(--d-plate);outline:1px solid color-mix(in srgb,var(--d-ink) 14%,transparent);outline-offset:-1px}
.s2-sec{padding:var(--s2-pad) var(--s2-m)}
.s2-chip{display:inline-flex;align-items:center;gap:.6em;width:fit-content;min-height:28px;padding:4px 12px;border:1px solid currentColor;border-radius:var(--shape-r-s);font:400 13px/1.2 var(--d-label);letter-spacing:.04em;text-transform:uppercase}
/* two heading sizes only: display for short lines, statement for sentences */
.s2-statement{font-size:var(--s2-display);font-weight:600;line-height:.92;letter-spacing:var(--seed-tracking-display,-.03em);text-wrap:balance}
.s2-statement--xl{font-size:calc(var(--s2-display)*.72)}
.s2-statement--long{font-size:var(--s2-statement);line-height:1.08;letter-spacing:var(--seed-tracking-heading,-.025em)}
.s2-side-title{font-size:var(--s2-statement);font-weight:600;line-height:1.04;letter-spacing:var(--seed-tracking-heading,-.025em);text-wrap:balance}
.s2-link{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em}.s2-link:hover{text-decoration-thickness:2px}
.s2-btn{display:inline-flex;align-items:center;justify-content:space-between;gap:40px;min-width:220px;min-height:60px;padding:0 20px 0 24px;border:1px solid var(--d-ink);border-radius:var(--seed-shape-control,0 22px 0 22px);background:var(--d-ink);color:var(--d-bg)!important;font:400 13px/1 var(--d-label);letter-spacing:.04em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:background .22s var(--s2-out),color .22s var(--s2-out)}
.s2-btn:hover{background:transparent;color:var(--d-ink)!important}
.s2-btn .seed-arrow{width:28px;height:auto;flex:none;transition:transform .22s var(--s2-out)}@media(hover:hover) and (pointer:fine){.s2-btn:hover .seed-arrow{transform:translateX(4px)}}
.s2-split{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:32px}
.s2-split>p:not(.s2-statement){max-width:62ch;color:var(--d-mute)}
.s2-two{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2-m)}
.s2-two img{display:block;width:100%;height:auto}
.s2 figcaption{margin-top:12px;font-size:15px;line-height:1.4;color:var(--d-mute)}.s2 figcaption b{color:var(--d-ink);font-weight:600}
.s2-source{margin-top:24px;font-size:14px;color:var(--d-mute)}

/* ---------- header ---------- */
.s2-header{position:fixed;inset:var(--s2-bar) 0 auto;z-index:60;display:flex;align-items:center;gap:40px;height:var(--s2-head);padding-inline:var(--s2-m);background:var(--d-bg);color:var(--d-ink);border-bottom:1px solid var(--d-line);font:500 15px/1 var(--d-sans);letter-spacing:-.01em;transition:transform .22s var(--s2-out),background-color .22s,color .22s,border-color .22s}
.s2-header::before{content:'';position:absolute;inset:0 0 -40px;z-index:-1;background:linear-gradient(rgba(7,10,7,.5),rgba(7,10,7,0));opacity:0;transition:opacity .22s;pointer-events:none}
.s2-header[data-hidden]{transform:translateY(calc(-100% - var(--s2-bar)));transition-duration:.42s}
.s2-header:focus-within{transform:none}
/* at the top of a page that opens on a film the header sits on the picture */
body[data-has-s2]:has(main .page-hero) .s2-header[data-top]:not(:has(.s2-menu[open])){background-color:transparent;border-color:transparent;color:#f5f5f1}
body[data-has-s2]:has(main .page-hero) .s2-header[data-top]:not(:has(.s2-menu[open]))::before{opacity:1}
html:not([data-color-scheme=dark]) body[data-has-s2]:has(main .page-hero) .s2-header[data-top]:not(:has(.s2-menu[open])) .seed-wordmark{filter:invert(1)}
.s2-brand,.s2-footer-legal a{display:inline-flex;align-items:center;min-height:44px;line-height:0;flex:none}.s2-brand img{height:18px;width:auto}
.s2-nav{display:flex;gap:clamp(20px,2.4vw,40px)}
.s2-nav a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none}
.s2-nav a:hover,.s2-nav a[aria-current]{text-decoration:underline;text-underline-offset:7px;text-decoration-thickness:1.5px}
.s2-header-end{display:flex;align-items:center;gap:12px;margin-left:auto}
.s2-header .theme-switch{background:transparent;color:inherit;border-color:currentColor}
.s2-menu{display:none}
.s2-menu summary{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid currentColor;border-radius:var(--shape-r-s);list-style:none;cursor:pointer;font:400 13px/1 var(--d-label);letter-spacing:.04em;text-transform:uppercase}
.s2-menu summary::-webkit-details-marker{display:none}
.s2-menu[open] summary span{display:none}.s2-menu[open] summary::after{content:'Close'}
.s2-menu nav{position:fixed;inset:calc(var(--s2-bar) + var(--s2-head)) 0 0;display:flex;flex-direction:column;justify-content:center;gap:4px;padding:24px var(--s2-m);background:var(--d-bg);color:var(--d-ink);overflow:auto}
.s2-menu nav a{font-size:clamp(40px,13vw,88px);font-weight:600;line-height:1.02;letter-spacing:var(--seed-tracking-display,-.03em);text-decoration:none}
.s2-menu nav a[aria-current]{text-decoration:underline;text-underline-offset:.12em;text-decoration-thickness:.06em}
html[data-s2-menu-open]{overflow:hidden}
@media(max-width:900px){.s2-nav{display:none}.s2-menu{display:block}}
/* Gaming has an extra mode switch. The header fits every phone from 320 to 430 px (David, 22 Oct 2026: "the top menu is clipping on
   mobile on gaming page"; scripts/s2-menu.e2e.mjs): up to 440 px the toggles tighten (the light/dark switch shows its current icon
   only), under 380 px Menu is its icon only (the aria-label stays "Menu"), and under 341 px every page's light/dark switch tightens.
   Every control stays 44 px. */
@media(max-width:440px){
 .s2-header:has(.mode-switch) .s2-header-end{gap:8px}
 .s2-header:has(.mode-switch) .mode-switch{gap:4px;padding-inline:8px}
 .s2-header:has(.mode-switch) .mode-switch-icon:first-of-type{display:none}
 .s2-header:has(.mode-switch) .theme-switch{width:44px;min-width:44px;padding:8px;gap:0}
 .s2-header:has(.mode-switch) .theme-switch-track,
 .s2-header:has(.mode-switch) .theme-switch[aria-checked=false] .theme-switch-icon:last-child,
 .s2-header:has(.mode-switch) .theme-switch[aria-checked=true] .theme-switch-icon:first-child{display:none}
}
@media(max-width:379.98px){
 .s2-header:has(.mode-switch) .s2-menu summary{min-width:44px;padding:0 12px;justify-content:center}
 .s2-header:has(.mode-switch) .s2-menu summary span:not(.s2-menu-ico){display:none}
 .s2-header:has(.mode-switch) .s2-menu summary::after{content:none}
}
@media(max-width:340px){
 .s2-header .theme-switch{width:44px;min-width:44px;padding:8px;gap:0}
 .s2-header .theme-switch-track,
 .s2-header .theme-switch[aria-checked=false] .theme-switch-icon:last-child,
 .s2-header .theme-switch[aria-checked=true] .theme-switch-icon:first-child{display:none}
}

/* ---------- hero: the page title at display size on the film ---------- */
html[data-design=studio-two] .s2 .page-hero{height:100svh;min-height:560px;margin-top:0;padding:calc(var(--s2-bar) + var(--s2-head) + 16px) var(--s2-m) var(--seed-hero-end,64px);gap:clamp(16px,2vw,28px)}
/* Tighten (28 Oct 2026): inner-page heroes stop at 86% of the screen, so the first section shows above the fold; they grow with their copy
   instead of clipping it. The home film and the Vuse live room stay full screen (the film is the point there). */
html[data-design=studio-two] .s2:not(.s2-home):not(.s2-project--live) > .page-hero:not(.page-hero--compact):not(.page-hero--artwork){height:auto;min-height:max(560px,86svh)}
html[data-design=studio-two] .s2 .page-hero--compact{height:82svh}
html[data-design=studio-two] .s2 .page-hero--compact{height:76svh}
html[data-design=studio-two] .s2 .page-hero__content{max-width:100%;gap:clamp(14px,1.6vw,24px)}
html[data-design=studio-two] .s2 .page-hero__title{max-width:100%;font-size:var(--s2-display);font-weight:600;line-height:.9;letter-spacing:var(--seed-tracking-display,-.03em);text-wrap:balance}
html[data-design=studio-two] .s2 .page-hero[data-size=l] .page-hero__title{font-size:calc(var(--s2-display)*.9)}
html[data-design=studio-two] .s2 .page-hero[data-size=xl] .page-hero__title{font-size:calc(var(--s2-display)*.72)}
html[data-design=studio-two] .s2 .page-hero__eyebrow{display:inline-flex;align-items:center;width:fit-content;min-height:28px;padding:4px 12px;border:1px solid currentColor;border-radius:var(--shape-r-s);font:400 13px/1.2 var(--d-label);letter-spacing:.04em;text-transform:uppercase;color:#f5f5f1}
html[data-design=studio-two] .s2 .page-hero__back{font:400 13px/1.2 var(--d-label);letter-spacing:.04em;text-transform:uppercase;min-height:24px;display:inline-flex;align-items:center}
html[data-design=studio-two] .s2 .page-hero__intro{font-size:clamp(17px,1.5vw,24px);max-width:48ch;text-wrap:balance}
@media(prefers-reduced-motion:no-preference){
 html[data-design=studio-two] .s2 .page-hero__title{animation:s2-title .76s var(--s2-out) both}
 html[data-design=studio-two] .s2 .page-hero__foot{animation:s2-title .76s .12s var(--s2-out) both}
}
/* movement only: a title that fades in is painted late and counts as a slow largest paint */
@keyframes s2-title{from{transform:translateY(.22em)}}

/* ---------- statements and pairs ---------- */
.s2-lede{display:grid;gap:32px}.s2-lede .s2-statement--xl{font-size:calc(var(--s2-display)*.72)}
.s2-statement--long{max-width:34ch}
.s2-studio{display:grid;gap:40px}
.s2-pair-text{display:grid;gap:28px;align-content:start;justify-items:start}
.s2-studio .s2-two{align-items:start}
/* Our story: launch photographs. The wide room shot leads and the caption spans the row. */
.s2-launch{margin:0}
.s2-launch>img:first-child,.s2-launch>figcaption{grid-column:1/-1}
.s2-launch>img:first-child{aspect-ratio:21/9;object-fit:cover}
.s2-launch>figcaption{margin-top:0}
@media(max-width:900px){.s2-launch>img:first-child{aspect-ratio:auto}}
.s2-pair-text>p{max-width:30ch;font-size:var(--s2-statement);font-weight:600;line-height:1.08;letter-spacing:var(--seed-tracking-heading,-.025em)}
.s2-process{display:grid;gap:40px}

/* ---------- services as large lines ---------- */
.s2-words{display:grid;gap:40px}
.s2-words li{border-top:1px solid var(--d-line)}.s2-words li:last-child{border-bottom:1px solid var(--d-line)}
.s2-words li a{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(220px,1fr) 48px;gap:clamp(24px,4vw,64px);align-items:center;padding-block:clamp(24px,3vw,44px);text-decoration:none}
.s2-word{font-size:clamp(30px,4vw,64px);font-weight:500;line-height:1.08;letter-spacing:var(--seed-tracking-heading,-.02em);white-space:normal}
.s2-word-for{max-width:32ch;font-size:clamp(17px,1.5vw,22px);line-height:1.5;color:var(--d-mute);text-wrap:pretty}
.s2-words .seed-arrow{width:clamp(32px,3vw,48px);height:auto;align-self:center;transition:transform .22s var(--s2-out)}
@media(hover:hover) and (pointer:fine){
 .s2-words ul:hover a:not(:hover){opacity:.5}.s2-words li a{transition:opacity .22s var(--s2-out)}
 .s2-words li a:hover .seed-arrow{transform:translateX(12px)}
}
.s2-services-list>li{border-top:1px solid var(--d-line);padding:0 var(--s2-m) clamp(40px,6vw,96px)}
.s2-service-line{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:clamp(20px,3vw,48px);text-decoration:none}
.s2-service-line h2{font-size:var(--s2-display);font-weight:600;line-height:.95;letter-spacing:var(--seed-tracking-display,-.03em)}
.s2-service-line .seed-arrow{width:clamp(40px,6vw,112px);height:auto;flex:none;transition:transform .22s var(--s2-out)}
/* Keep the full service name and directional cue inside a phone viewport. */
@media(max-width:760px){.s2-services .s2-service-line{gap:12px}.s2-services .s2-service-line h2{min-width:0;font-size:clamp(40px,12.5vw,96px);overflow-wrap:anywhere}}
@media(hover:hover) and (pointer:fine){.s2-service-line:hover .seed-arrow{transform:translateX(12px)}}
.s2-service-body{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2-m);align-items:start}
.s2-service-body>div:first-child{display:grid;gap:24px;max-width:56ch}
.s2-service-body ul li,.s2-lines li{padding:10px 0;border-top:1px solid var(--d-line);font-size:16px}
.s2-service-media p{margin-top:12px;font-size:15px;color:var(--d-mute)}
.s2-service{position:relative}
/* Feedback 07e03068 (26 Oct 2026): each service box is one click target (the service line's link stretched over the box; the picture keeps
   its own link above it) and, with a mouse, the hovered box takes a plate and opens out: the picture column widens, the other boxes step back.
   No lightbox (Cam, 20 Oct 2026). Static with reduced motion. */
.s2-services-list>li{position:relative;transition:background-color .35s var(--s2-out),opacity .35s var(--s2-out)}
.s2-services-list .s2-service-line::after{content:'';position:absolute;inset:0}
.s2-services-list .s2-service-media{position:relative;z-index:1}
@media(hover:hover) and (pointer:fine){
 .s2-services-list .s2-service-body{transition:grid-template-columns .5s var(--s2-out)}
 .s2-services-list>li:hover{background:var(--d-plate)}
 .s2-services-list>li:hover .s2-service-body{grid-template-columns:1fr 1.6fr}
 .s2-services-list:hover>li:not(:hover){opacity:.6}
 .s2-services-list>li:hover .s2-service-line .seed-arrow{transform:translateX(12px)}
}
@media(prefers-reduced-motion:reduce){.s2-services-list>li,.s2-services-list .s2-service-body{transition:none}}

/* ---------- work: pictures with the caption underneath ---------- */
.s2-rows{position:relative;z-index:1;display:flex;flex-direction:column;gap:clamp(40px,6vh,64px);padding-inline:var(--s2-m)}
.s2-row{width:100%}
.s2-row>a{display:block;text-decoration:none}
.s2-row .dx-media{max-height:84svh;width:100%}
.s2-row .dx-media :is(img,video){transition:transform .42s var(--s2-out)}
@media(hover:hover) and (pointer:fine){.s2-row>a:hover .dx-media :is(img,video){transform:scale(1.04);transition-duration:.76s}}
.s2-row-cap{display:grid;gap:4px;padding:16px 0 14px}
.s2-row-title{font-size:clamp(20px,1.7vw,30px);font-weight:600;line-height:1.1;letter-spacing:var(--seed-tracking-title,-.02em)}
.s2-row-title span:not(.k-rt){font-weight:400;color:var(--d-mute)}
.s2-row-desc{max-width:64ch;font-size:18px;line-height:1.45;color:var(--d-ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.s2-row>a:focus-visible .dx-media :is(img,video){transform:scale(1.04)}
:is(.s2-btn,.s2-service-line,.s2-next-link,.s2-words li a):focus-visible .seed-arrow{transform:translateX(8px)}
.s2-row>a:is(:hover,:focus-visible) .s2-row-title{text-decoration:underline;text-underline-offset:.16em;text-decoration-thickness:1.5px}
.s2-row-meta{display:none}
.s2-three{display:grid;grid-template-columns:repeat(3,1fr);gap:40px var(--s2-m);margin-top:40px}
.s2-three .s2-row,.s2-three .s2-row[data-place]{width:100%;margin:0}
.s2-three .s2-row .dx-media{aspect-ratio:16/10}
/* home Selected work: two columns (one on phones), feedback 15a */
.s2-pair{grid-template-columns:1fr 1fr;row-gap:clamp(32px,4vw,64px)}
/* work index (David, 26 Oct 2026): a card grid, three columns on desktop, two on tablet, one on phones; no full-width cards */
.s2-grid .s2-rows{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(40px,5vw,80px) var(--s2-m);padding-block:clamp(40px,5vw,80px) var(--s2-pad)}
.s2-grid .s2-row .dx-media{aspect-ratio:16/10;max-height:none}
.s2-grid .s2-row-desc{font-size:16px;-webkit-line-clamp:3}
.s2-grid .s2-row-title{font-size:clamp(20px,1.6vw,26px)}
@media(max-width:1100px){.s2-grid .s2-rows{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.s2-grid .s2-rows{grid-template-columns:1fr}}
/* filter and layout: a plain row above the list */
.s2-tools{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;padding:20px var(--s2-m);border-bottom:1px solid var(--d-line);background:var(--d-bg)}
.s2-filters,.s2-views{display:flex;flex-wrap:wrap;gap:4px}
.s2-tools button{min-height:44px;padding:0 16px;border:1px solid transparent;border-radius:var(--shape-r-s);background:none;color:var(--d-ink);font:400 13px/1 var(--d-label);letter-spacing:.04em;text-transform:uppercase;cursor:pointer;transition:background .22s var(--s2-out),color .22s var(--s2-out)}
.s2-tools button:hover{border-color:var(--d-line)}
.s2-tools button[aria-pressed=true]{background:var(--d-ink);color:var(--d-bg)}
.s2-count{margin-left:auto;font:400 13px/1 var(--d-label);letter-spacing:.04em;text-transform:uppercase;color:var(--d-mute);white-space:nowrap}
/* list view: plain rows */

/* Cam review 20 Oct 2026 (L5, G11): a work card that is not one big link. The picture links, the title links, and an explicit
   View project button follows; tags (platform only) are plain chips. Markup (opt-in on S2Row or any card grid):
   <li class="s2-row s2-row--split"><a class="s2-row-media" href tabindex="-1" aria-hidden="true">picture</a>
   <div class="s2-row-cap"><h3 class="s2-row-title"><a href>Client<span> Project</span></a></h3><p class="s2-row-desc">...</p><ul class="s2-row-tags"><li class="s2-chip">Roblox</li></ul></div>
   <a class="s2-btn s2-btn--compact s2-row-action" href><span>View project</span>arrow</a></li> */
.s2-row--split{display:flex;flex-direction:column;align-items:flex-start}
.s2-row--split>.s2-row-media{display:block;width:100%;text-decoration:none}
@media(hover:hover) and (pointer:fine){.s2-row--split>.s2-row-media:hover .dx-media :is(img,video){transform:scale(1.04);transition-duration:.76s}}
.s2-row--split .s2-row-cap{width:100%}
.s2-row--split .s2-row-title a{text-decoration:none}
.s2-row--split .s2-row-title a:is(:hover,:focus-visible){text-decoration:underline;text-underline-offset:.16em;text-decoration-thickness:1.5px}
.s2-row-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.s2-btn--compact{min-width:0;min-height:48px;gap:24px;padding:0 16px 0 20px}
.s2-row-action{margin-top:4px}
[data-view=list] .s2-row--split{position:relative;display:block;padding-block:0}
[data-view=list] .s2-row--split>.s2-row-media,[data-view=list] .s2-row--split .s2-row-tags,[data-view=list] .s2-row--split .s2-row-desc,[data-view=list] .s2-row-actions{display:none}
[data-view=list] .s2-row--split .s2-row-cap{padding:18px 0}
[data-view=list] .s2-row--split .s2-row-title a::after{content:"";position:absolute;inset:0}
[data-view=list] .s2-rows{display:block;padding-top:0}
[data-view=list] .s2-row{border-bottom:1px solid var(--d-line)}
/* Cam review 20 Oct 2026 (W4): the list is a plain list of links, client in bold and project in medium on one line; no year or category */
[data-view=list] .s2-row>a{display:block;padding-block:18px;transform:none}
[data-view=list] .s2-row .dx-media,[data-view=list] .s2-row-desc{display:none}
[data-view=list] .s2-row-cap{padding:0;background:none}
[data-view=list] .s2-row-title{font-size:clamp(24px,3vw,52px);font-weight:700}
[data-view=list] .s2-row-title span:not(.k-rt){font-weight:500;color:var(--d-ink)}
[data-view=list] .s2-row-meta{display:none}

/* ---------- project ---------- */
.s2-film video{display:block;width:100%;aspect-ratio:16/9;background:#000}
.s2-account{display:grid;grid-template-columns:1fr 1fr;gap:48px var(--s2-m);align-items:start}
.s2-account>div:first-child{display:grid;gap:20px;justify-items:start;max-width:52ch}.s2-account>div:first-child>p{color:var(--d-mute)}
.s2-facts dl,.s2-facts-list{display:grid;max-width:640px;width:100%}
.s2-facts dl>div,.s2-facts-list>div{display:grid;grid-template-columns:minmax(120px,1fr) 2fr;gap:16px;padding:12px 0;border-top:1px solid var(--d-line);font-size:16px;line-height:1.45}
.s2-facts dt,.s2-facts-list dt{font:400 13px/1.6 var(--d-label);letter-spacing:.04em;text-transform:uppercase;color:var(--d-mute)}
.s2-story{display:grid;gap:40px;max-width:68ch}
.s2-story section{display:grid;gap:14px}
.s2-story h2{font:400 13px/1.2 var(--d-label);letter-spacing:.04em;text-transform:uppercase;color:var(--d-mute)}
/* How we work, cut back (David, 28 Oct 2026; style reference found.co.uk): one short lead at a reading measure, then one-line proof rows (name over what it is), then the deliverables. */
.s2-story--brief{max-width:58ch;gap:44px}
.s2-brief-intro p{font-size:clamp(19px,1.5vw,24px);line-height:1.4;max-width:38ch;text-wrap:pretty}
.s2-proof li{display:grid;gap:2px;padding:14px 0;line-height:1.4}
.s2-proof strong{font-weight:600}
.s2-proof span{color:var(--d-mute)}
.s2-results dl{margin-top:32px}
.s2-results dl>div{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2-m);align-items:baseline;padding:clamp(12px,1.6vw,24px) 0;border-top:1px solid var(--d-line)}
.s2-results dl>div:last-child{border-bottom:1px solid var(--d-line)}
.s2-results dd{font-size:calc(var(--s2-display)*.72);font-weight:600;line-height:.95;letter-spacing:var(--seed-tracking-display,-.03em)}
.s2-results dt{font-size:var(--s2-statement);font-weight:600;line-height:1.08;letter-spacing:var(--seed-tracking-heading,-.025em)}
.s2-plates{columns:2;column-gap:var(--s2-m);padding:0 var(--s2-m) var(--s2-pad)}
.s2-plate{break-inside:avoid;margin-bottom:clamp(40px,5vw,80px)}
.s2-plate:nth-child(3n+1),.s2-plate:last-child,.s2-plate--set{column-span:all}
.s2-plate>img,.s2-plate>video{display:block;width:100%;height:auto}.s2-plate>video{aspect-ratio:16/9;background:#000}
.s2-plate--phone{max-width:420px;margin-inline:auto}
.s2-plate-set{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--s2-m)}.s2-plate-set img{display:block;width:100%;height:auto;border-radius:var(--shape-r-l)}
.s2-plate figcaption{display:grid;gap:4px;max-width:60ch}.s2-plate h3{font-size:18px;font-weight:600;letter-spacing:-.02em;color:var(--d-ink)}
/* next project: one slim link row (feedback 15a); the More work row below carries the pictures */
.s2-next{margin-inline:var(--s2-m);border-block:1px solid var(--d-line)}
.s2-next-link{display:flex;align-items:center;flex-wrap:wrap;gap:12px 24px;min-height:44px;padding-block:clamp(16px,2vw,28px);text-decoration:none}
.s2-next-title{flex:1;min-width:0;font-size:clamp(20px,1.7vw,30px);font-weight:600;line-height:1.15;letter-spacing:var(--seed-tracking-title,-.02em)}
.s2-next-title span{font-weight:400;color:var(--d-mute)}
.s2-next-link .seed-arrow{width:clamp(28px,3vw,48px);height:auto;flex:none;transition:transform .22s var(--s2-out)}
@media(max-width:760px){.s2-next-title{flex-basis:calc(100% - 80px)}}   /* phones: the chip on its own line, the name beside the arrow */
@media(hover:hover) and (pointer:fine){.s2-next-link:hover .seed-arrow{transform:translateX(8px)}.s2-next-link:hover .s2-next-title{text-decoration:underline;text-underline-offset:.16em;text-decoration-thickness:1.5px}}
.s2-more{padding-top:clamp(48px,6vw,96px)}

/* ---------- studio ---------- */
.s2-pillars dl{margin-top:40px}
.s2-pillars dl>div{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2-m);align-items:baseline;padding:clamp(14px,1.8vw,28px) 0;border-top:1px solid var(--d-line)}
.s2-pillars dt{font-size:var(--s2-statement);font-weight:600;line-height:1.08;letter-spacing:var(--seed-tracking-heading,-.025em)}
.s2-pillars dd{color:var(--d-mute);max-width:52ch}
/* Our team (/about/team/, Cam 26 Oct 2026): no photographs; one text row per person, ruled like the pillars: name, role and bio, LinkedIn */
.s2-people{margin-top:40px;list-style:none;padding:0}
.s2-people>li{display:grid;grid-template-columns:1fr 1fr 140px;gap:var(--s2-m);align-items:baseline;padding:clamp(14px,1.8vw,28px) 0;border-top:1px solid var(--d-line)}
.s2-people>li:last-child{border-bottom:1px solid var(--d-line)}
.s2-people h3{font-size:var(--s2-statement);font-weight:600;line-height:1.08;letter-spacing:var(--seed-tracking-heading,-.025em)}
.s2-people .s2-bio{max-width:52ch}
.s2-people .s2-in{margin-top:0;justify-self:end}
.s2-bts-loops{margin-top:var(--s2-m)}
.s2-bts-loops figure{margin:0}
.s2-bts-loops video{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--shape-r-l);background:var(--d-plate)}
.s2-about-next{padding-top:0}
/* Related-page rows share one readable title / description scale across every page. */
.s2-role{font:400 13px/1.4 var(--d-label);letter-spacing:.04em;text-transform:uppercase;color:var(--d-mute)}
.s2-bio{margin-top:8px;font-size:15px;line-height:1.5;color:var(--d-mute)}
.s2-answers details{border-top:1px solid var(--d-line)}.s2-answers details:last-child{border-bottom:1px solid var(--d-line)}
.s2-answers summary{display:flex;justify-content:space-between;gap:24px;padding:18px 0;min-height:44px;cursor:pointer;font-weight:500;list-style:none}
.s2-answers summary::-webkit-details-marker{display:none}.s2-answers summary::after{content:'+';font-weight:400}.s2-answers details[open] summary::after{content:'−'}
.s2-answers details p{padding:0 0 20px;max-width:60ch;color:var(--d-mute)}

/* ---------- contact ---------- */
.s2-mail{display:grid;gap:28px;justify-items:start}
.s2-mail-line{font-size:calc(var(--s2-display)*.72);font-weight:600;line-height:.95;letter-spacing:var(--seed-tracking-display,-.03em);text-decoration:none;overflow-wrap:anywhere}
.s2-mail-line:hover{text-decoration:underline;text-decoration-thickness:.05em;text-underline-offset:.1em}

/* ---------- footer ---------- */
.s2-footer{display:flex;flex-direction:column;gap:clamp(24px,3vw,48px);min-height:100svh;padding:clamp(40px,5vw,80px) var(--s2-m) var(--s2-m);font-size:16px;line-height:1.5}
/* the whole CTA is the target: the huge glyphs overhang the line box, so a hit area covers the full text height and the gap to the next row */
.s2-footer-grid{display:grid;grid-template-columns:2fr 2fr 1fr;gap:32px var(--s2-m);margin-top:auto;padding-top:32px;border-top:1px solid var(--d-line)}
.s2-footer-grid address{margin-top:16px;color:var(--d-mute)}
.s2-footer-grid nav>div{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--s2-m);justify-items:start;width:100%}
.s2-footer h2{margin-bottom:10px;font:400 13px/1.2 var(--d-label);letter-spacing:.04em;text-transform:uppercase;color:var(--d-mute)}
.s2-footer nav{display:grid;align-content:start;justify-items:start}
.s2-footer nav a{display:inline-flex;align-items:center;min-height:32px;text-decoration:none}.s2-footer nav a:hover{text-decoration:underline;text-underline-offset:.22em}
.s2-footer .s2-link{font-size:clamp(20px,1.9vw,32px);font-weight:600;letter-spacing:var(--seed-tracking-title,-.02em)}
.s2-footer-legal{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:var(--s2-m);border-top:1px solid var(--d-line);font-size:14px;color:var(--d-mute)}
.s2-footer-legal img{height:16px;width:auto;display:block}
/* a page that already ends on the brief form (service, landing and contact pages) does not repeat the footer line (feedback 15a) */

/* ---------- sections arrive as they scroll in (scroll-driven; nothing moves with reduced motion or without support) ---------- */
@media(prefers-reduced-motion:no-preference){@supports (animation-timeline:view()){
 .s2-sec>.s2-statement,.s2-lede>.s2-statement,.s2-words li,.s2-results dl>div,.s2-pillars dl>div{animation:s2-arrive linear both;animation-timeline:view();animation-range:entry 0% entry 45%}
}}
@keyframes s2-arrive{from{opacity:.6;transform:translateY(32px)}}

/* page change: the blueprint transition (src/components/BlueprintTransition.astro, docs/TRANSITION.md) is the one page transition */

/* ---------- phone ---------- */
@media(max-width:900px){
 main>.s2{font-size:16px;line-height:1.5}
 .s2-two,.s2-account,.s2-service-body,.s2-results dl>div,.s2-pillars dl>div{grid-template-columns:1fr}
 .s2-results dl>div,.s2-pillars dl>div{gap:6px}
 .s2-row-desc{display:block;-webkit-line-clamp:none;font-size:16px}
 .s2-grid .s2-row-desc{display:block;-webkit-line-clamp:none}
 .s2-word{white-space:normal}
 .s2-words li a{grid-template-columns:minmax(0,1fr) 32px;gap:12px 20px}.s2-words .s2-word-for{grid-column:1;grid-row:2;font-size:17px}.s2-words .seed-arrow{grid-column:2;grid-row:1;width:32px}
 .s2-header{gap:12px}.s2-header-end{gap:8px}.s2-menu summary{padding:0 12px}
 .s2-three,.s2-pair{grid-template-columns:1fr}
 .s2-plates{columns:1}
 .s2-people>li{grid-template-columns:1fr;gap:6px}.s2-people .s2-in{justify-self:start;margin-top:4px}
 .s2-footer-grid{grid-template-columns:1fr}
 .s2-footer{min-height:0}
 .s2-btn{min-width:0;width:100%;max-width:360px}
 .s2-count{margin-left:0}
 .s2-filters{flex-wrap:nowrap;overflow-x:auto;width:100%;scrollbar-width:none}.s2-tools button{flex:none}
 .s2-studio{padding-bottom:48px}
}
@media(prefers-reduced-motion:reduce){.s2-header[data-hidden]{transform:none}.s2 *,.s2-header{transition:none!important}.s2 :is(.seed-arrow,.dx-media img,.dx-media video){transform:none!important}}
@media print{.s2-header,.s2-tools{position:static}}

/* the review strip (?strip=1) sits above the header */
html[data-strip][data-design=studio-two] body{--s2-bar:26px}
/* keyboard focus never lands under the fixed header (WCAG 2.4.11) */
html[data-design=studio-two]{scroll-padding-top:112px}
@media(max-width:760px){html[data-design=studio-two]{scroll-padding-top:96px}}

/* ---------- full-screen fills (14 Oct 2026): one idea per screen, picture edge to edge, copy on the picture ---------- */
.s2-fill{--d-ink:var(--seed-text-on-media,#f5f5f1);--d-bg:#0d100d;--d-mute:rgba(245,245,241,.84);--d-line:rgba(245,245,241,.3);position:relative;isolation:isolate;display:grid;align-content:end;gap:clamp(20px,3vh,36px);min-height:100vh;min-height:100svh;padding:calc(var(--s2-head) + 48px) var(--s2-m) clamp(32px,7vh,80px);overflow:clip;color:var(--d-ink);background:var(--d-bg)}
.s2-fill[data-align=center]{align-content:center}
.s2-fill>.dx-media{position:absolute;inset:0;z-index:-2;aspect-ratio:auto;max-height:none;border-radius:0!important;outline:0}
.s2-fill-scrim{position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(0deg,rgba(7,10,7,.9) 0%,rgba(7,10,7,.8) 18%,rgba(7,10,7,.6) 36%,rgba(7,10,7,.36) 56%,rgba(7,10,7,.16) 76%,rgba(7,10,7,.22) 100%),linear-gradient(90deg,rgba(7,10,7,.5) 0%,rgba(7,10,7,.2) 45%,rgba(7,10,7,0) 75%)}
.s2-fill-body{display:grid;gap:clamp(20px,3vh,40px);justify-items:start;max-width:1600px}
.s2-fill-lines{font-size:clamp(40px,6.4vw,124px);font-weight:600;line-height:.98;letter-spacing:var(--seed-tracking-display,-.03em);text-wrap:balance}
.s2-fill-lines span{display:block}
.s2-fill-figure{display:grid;gap:8px}
.s2-fig{font-size:var(--s2-display);font-weight:600;line-height:.86;letter-spacing:var(--seed-tracking-display,-.03em);font-variant-numeric:tabular-nums}
.s2-fig-label{font-size:var(--s2-statement);font-weight:600;line-height:1.08;letter-spacing:var(--seed-tracking-heading,-.025em)}
.s2-fill-quote p{max-width:22ch;font-size:clamp(34px,4.8vw,92px);font-weight:600;line-height:1;letter-spacing:var(--seed-tracking-display,-.03em);text-wrap:balance}
.s2-fill-foot{display:grid;grid-template-columns:minmax(0,52ch) auto;gap:20px var(--s2-m);align-items:end;width:100%;justify-content:space-between}
.s2-fill-foot p{font-size:clamp(16px,1.25vw,20px);line-height:1.45;color:var(--d-mute)}
.s2-fill-src{display:block;margin-top:8px;font:400 14px/1.4 var(--d-label);letter-spacing:.02em;color:var(--d-mute)}
.s2-fill+.s2-fill{border-top:1px solid #0d100d}
.s2-visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media(max-width:760px){.s2-fill{padding-top:calc(var(--s2-head) + 32px)}
 .s2-fill-foot{grid-template-columns:1fr}
 .s2-fill-lines{font-size:clamp(34px,10.4vw,64px)}
 .s2-fill-quote p{font-size:clamp(30px,9vw,52px)}}
@media(prefers-reduced-motion:no-preference){@supports (animation-timeline:view()){
 .s2-fill-lines span,.s2-fill-figure,.s2-fill-quote{animation:s2-rise linear both;animation-timeline:view();animation-range:entry 10% entry 60%}
 .s2-fill-lines span:nth-child(2){animation-range:entry 20% entry 70%}
 .s2-fill-lines span:nth-child(3){animation-range:entry 30% entry 80%}
 /* QA 28 Oct 2026: the copy under a rising heading rises with it, so the last line never lands on the paragraph mid-scroll (home Studio block, phones). */
 .s2-fill-lines+.s2-fill-foot{animation:s2-rise linear both;animation-timeline:view();animation-range:entry 30% entry 80%}}}
@keyframes s2-rise{from{transform:translateY(32px)}}
/* home proof (David, 26 Oct 2026): three contained cards, not full-screen fills. Picture inside the card, copy underneath; no zoom or reveal. */
.s2-stats{padding-top:0}
.s2-stats>ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2-m)}
.s2-stat{display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding:var(--s2-m);border:1px solid var(--d-line);border-radius:var(--shape-r-l)}
.s2-stat .dx-media{width:100%;aspect-ratio:16/10;max-height:none}
.s2-stat-figure{display:grid;gap:8px}
.s2-stat .s2-fig{font-size:clamp(56px,6vw,96px)}
.s2-stat .s2-fig-label{font-size:clamp(20px,1.7vw,28px)}
.s2-stat-quote{margin:0}
.s2-stat-quote p{font-size:clamp(24px,2.3vw,38px);font-weight:600;line-height:1.08;letter-spacing:var(--seed-tracking-heading,-.025em);text-wrap:balance}
.s2-stat-text{max-width:52ch;font-size:16px;line-height:1.45;color:var(--d-mute)}
.s2-stat .s2-btn{margin-top:auto}
@media(max-width:1199px){.s2-stats>ul{gap:clamp(16px,2vw,24px)}.s2-stat{padding:clamp(16px,2vw,24px)}.s2-stat-quote p{font-size:clamp(20px,2.3vw,38px)}}
@media(max-width:899px){.s2-stats>ul{grid-template-columns:1fr}}
/* service pages: the introduction gets a screen to itself; projects run as fills */
.s2-lede--screen{align-content:center} /* was a full-screen statement (100svh), which left ~300px empty above and below it: tightened 28 Oct 2026 */
.s2-lede--screen .s2-statement--long{max-width:24ch;font-size:clamp(30px,3.8vw,72px);line-height:1.04}
/* intro with in-situ footage: the footage fills what was empty screen, so the section sizes to its content (phone: footage under the text, 4:3; desktop: beside it) */
.s2-lede--media{min-height:0;padding-block:clamp(40px,6vw,96px)}
.s2-lede--media .s2-statement--long{max-width:none;font-size:clamp(24px,6.6vw,34px)}
.s2-lede-media{margin:0;display:grid;gap:12px}
.s2-lede-media .dx-media{aspect-ratio:4/3}
.s2-lede-media figcaption{font:400 14px/1.4 var(--d-label);letter-spacing:.02em;color:var(--d-mute)}
@media(min-width:900px){.s2-lede--media{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);column-gap:clamp(32px,5vw,96px);align-items:center}
 .s2-lede--media>.s2-chip{grid-column:1}.s2-lede--media>.s2-statement{grid-column:1;font-size:clamp(28px,2.9vw,52px)}
 .s2-lede--media>.s2-lede-media{grid-column:2;grid-row:1/span 2}.s2-lede-media .dx-media{aspect-ratio:16/10}}
.s2-practice>.s2-split{padding-block:clamp(40px,5vw,72px)}
.s2-practice>.s2-split .s2-statement{font-size:calc(var(--s2-display)*.5)}
@media(max-width:760px){.s2-lede--screen .s2-statement--long{font-size:clamp(24px,6.6vw,80px)}
 .s2-open>.dx-media :is(img,video){object-position:30% 50%}
 .s2-open>.dx-media{bottom:auto;height:56%}
 .s2-open .s2-fill-scrim{background:linear-gradient(0deg,#0d100d 0%,#0d100d 44%,rgba(13,16,13,.7) 52%,rgba(13,16,13,.25) 66%,rgba(13,16,13,.1) 85%,rgba(13,16,13,.3) 100%)}}
/* Narrative guide (David, 19 Oct 2026, work in progress): the operating-model line, About's full statement, the four-beat payoff, the footer strapline. */
.s2-model{font-size:calc(var(--s2-statement)*.72);font-weight:600;line-height:1.1;letter-spacing:var(--seed-tracking-title,-.02em);color:var(--d-mute)}
.s2-statement-more{display:grid;gap:16px;max-width:62ch;font-size:18px;line-height:1.5}.s2-statement-more p:last-child{color:var(--d-mute)}
.s2-kicker{font:400 14px/1.3 var(--d-label);letter-spacing:.04em;text-transform:uppercase}
.s2-in{display:inline-flex;align-items:center;gap:8px;margin-top:12px;min-height:28px;font:400 13px/1.2 var(--d-label);letter-spacing:.04em;text-transform:uppercase;color:inherit;text-decoration:underline;text-underline-offset:3px}
.s2-in:is(:hover,:focus-visible){text-decoration-thickness:2px}
@media(pointer:coarse){.s2-in{min-height:44px}.s2-people .s2-in{margin-top:0}}
.s2-sec>.s2-chip+.s2-bts{margin-top:var(--seed-layout-section,var(--s2-pad))}
.s2-beats-inline{font-size:var(--s2-statement);font-weight:600;line-height:1.04;letter-spacing:var(--seed-tracking-heading,-.025em);text-transform:uppercase}
.s2-payoff .s2-word{font-size:min(var(--s2-display),11vw);line-height:.9;text-transform:uppercase}
.s2-payoff .s2-word-for{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.s2-footer-legal{flex-wrap:wrap}
/* each beat wipes in through the SEED container shape as it scrolls into view; static with reduced motion or without scroll timelines */
@media(prefers-reduced-motion:no-preference){@supports (animation-timeline:view()){
 .s2-payoff .s2-word{animation:s2-beat linear both;animation-timeline:view();animation-range:entry 20% entry 80%}}}
@keyframes s2-beat{from{clip-path:inset(0 100% 0 0 round 0 .3em 0 .3em)}to{clip-path:inset(0 0 0 0 round 0 0 0 0)}}
html[data-motion=paused] .s2-payoff .s2-word{animation:none}
@media(max-width:760px){.s2-payoff .s2-word{font-size:16vw}}

/* David, 26 Oct: Services and the closing contact section are authored dark canvases in both preferences. */
.s2 .s2-dark,.s2.s2-footer{--d-bg:var(--seed-color-dark-page);--d-ink:var(--seed-color-dark-text);--d-mute:var(--seed-color-dark-muted);--d-line:var(--seed-color-dark-line);--d-plate:var(--seed-color-dark-panel);background:var(--d-bg);color:var(--d-ink)}
html .s2.s2-footer .seed-wordmark{filter:brightness(0) invert(1)}

/* Closing invitation, 26 Oct: whole type, baseline rails and a measured directional control. */
.s2-footer{gap:clamp(22px,3vw,44px);padding-top:clamp(48px,7vw,112px)}
/* 28 Oct 2026 (David): "standardise everything to just a button click through to contact us page". The footer opens on the one
   "Get in touch" button (components/GetInTouch.astro): no chip, no large title row, no brief line. The button row keeps the
   footer rhythm: footer top padding above, a rule and the link grid below. */
.s2-footer{min-height:0}
.s2-footer-cta{padding-bottom:clamp(16px,2.4vw,40px)}
@media(max-width:760px){.s2-footer-grid{gap:32px}}