/* SYNK homepages: one stylesheet for /, /lab/, /shift/, /pulse/, /path/ and their English pages.
   2026-09-30 redesign. White paper, one ink, hairlines, felt objects on soft plates, and glass only where
   something is chosen (the header dock, tabs). Nothing moves by itself. The first screen of / keeps its own
   stylesheet (cosmic-entry.css). The older layered stylesheets stay in dist for the detail pages. */

/* ── Fonts ─────────────────────────────────────────────────────────────── */
@font-face{font-family:'SUIT Variable';src:url('/assets/suit.woff2') format('woff2');font-weight:100 900;font-display:swap}
/* 'Inter Tight' keeps the older mapping (the first screen of / was set with it). The new pages use
   'SYNK Latin', which has true regular, medium and bold cuts of the same typeface. */
@font-face{font-family:'Inter Tight';src:url('/assets/inter-tight.woff2') format('woff2'),url('/assets/inter-tight.ttf') format('truetype');font-weight:400 599;font-display:swap}
@font-face{font-family:'Inter Tight';src:url('/assets/inter-tight-bold.woff2') format('woff2'),url('/assets/inter-tight-bold.ttf') format('truetype');font-weight:600 900;font-display:swap}
@font-face{font-family:'SYNK Latin';src:url('/assets/inter-tight.woff2') format('woff2'),url('/assets/inter-tight.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'SYNK Latin';src:url('/assets/inter-tight-medium.woff2') format('woff2'),url('/assets/inter-tight-medium.ttf') format('truetype');font-weight:500;font-display:swap}
@font-face{font-family:'SYNK Latin';src:url('/assets/inter-tight-bold.woff2') format('woff2'),url('/assets/inter-tight-bold.ttf') format('truetype');font-weight:700;font-display:swap}
/* 'SYNK Letters' is the same Inter Tight, limited to letters, digits, the middle dot, dashes, quotes and
   arrows. With it first in the text stack, spaces and other punctuation come from SUIT with the Hangul around
   them: a Korean sentence is shaped as one run instead of being cut at every space, which made the first
   layout of a long page three times slower (2026-10-01, qa/perf-20261001). */
@font-face{font-family:'SYNK Letters';src:url('/assets/inter-tight.woff2') format('woff2');font-weight:400;font-display:swap;unicode-range:U+0030-0039,U+0041-005A,U+0061-007A,U+00B7,U+00D7,U+2010-2027,U+2190-21FF}
@font-face{font-family:'SYNK Letters';src:url('/assets/inter-tight-medium.woff2') format('woff2');font-weight:500;font-display:swap;unicode-range:U+0030-0039,U+0041-005A,U+0061-007A,U+00B7,U+00D7,U+2010-2027,U+2190-21FF}
@font-face{font-family:'SYNK Letters';src:url('/assets/inter-tight-bold.woff2') format('woff2');font-weight:700;font-display:swap;unicode-range:U+0030-0039,U+0041-005A,U+0061-007A,U+00B7,U+00D7,U+2010-2027,U+2190-21FF}
@font-face{font-family:'DM Mono';src:url('/assets/dm-mono.woff2') format('woff2'),url('/assets/dm-mono.ttf') format('truetype');font-weight:400;font-display:swap}

/* ── Tokens ────────────────────────────────────────────────────────────── */
:root{
 --ink:#0a0a0a;--ink-2:rgba(10,10,10,.68);--ink-3:rgba(10,10,10,.62);--ink-4:rgba(10,10,10,.3);
 --line:rgba(10,10,10,.14);--line-soft:rgba(10,10,10,.08);
 --paper:#fff;--plate:#f4f4f5;--plate-deep:#ececee;
 --accent:#0a0a0a;--accent-ink:#0a0a0a;--accent-wash:#f4f4f5;
 --sans:'SYNK Bracket','SYNK Letters','SUIT Variable','Apple SD Gothic Neo','Malgun Gothic',system-ui,-apple-system,sans-serif;
 /* Large titles: the full Inter Tight first, so their spaces and commas are drawn as they were designed. */
 --display:'SYNK Bracket','SYNK Latin','SUIT Variable','Apple SD Gothic Neo','Malgun Gothic',system-ui,-apple-system,sans-serif;
 --mono:'DM Mono','SYNK Latin','SUIT Variable',ui-monospace,monospace;
 --gutter:clamp(20px,3.4vw,48px);--max:1440px;--gap:clamp(16px,1.8vw,24px);
 --section:clamp(88px,8.6vw,124px);
 --radius:28px;--radius-s:18px;
 --ease:cubic-bezier(.2,.7,.2,1);--fast:160ms;
 /* The thinnest line a screen can draw: one device pixel, two on very dense phones. */
 --hair:1px;
 /* Colour fields: one inset, one radius and one light for every business field. */
 --field-inset:clamp(8px,.8vw,12px);--field-radius:clamp(20px,2vw,30px);--field-gap:clamp(8px,.8vw,12px);
 --field-light:radial-gradient(1100px 560px at 16% -220px,rgba(255,255,255,.1),rgba(255,255,255,0) 70%),radial-gradient(1300px 900px at 92% calc(100% + 260px),rgba(0,0,0,.18),rgba(0,0,0,0) 62%);
 /* A still grain on every colour field, like print on felt (qa/homepage-v9-20260930/make-grain.py). */
 --field-grain:url('/assets/field-grain-20260930.webp') 0 0/192px 192px repeat;
}
@media (min-resolution:2dppx){:root{--hair:.5px}}
@media (min-resolution:2.42dppx){:root{--hair:.84px}}
body[data-site="lab"]{--accent:#f96859;--accent-ink:#ae322a;--accent-wash:#fdf2ee}
body[data-site="shift"]{--accent:#3d6bc9;--accent-ink:#24448c;--accent-wash:#eff3fb}
body[data-site="pulse"]{--accent:#99295d;--accent-ink:#99295d;--accent-wash:#f9eff4}
body[data-site="path"]{--accent:#526956;--accent-ink:#3b503e;--accent-wash:#eff3ef}
/* Each business on its own colour. Text on coral is black; on lapis, berry and green it is white
   (docs/디자인_토큰.json: coral 2.94 with white, lapis 5.07 with white, so every word on lapis is white).
   The company closes its page on black. --wash is the 7% tint for working panels and tab rails. */
body{--wash:color-mix(in srgb,var(--accent) 7%,#fff);--wash-2:color-mix(in srgb,var(--accent) 11%,#fff)}
body[data-site="synk"]{--wash:var(--plate);--wash-2:var(--plate-deep)}
/* A link to one business carries that business's colour wherever it appears. */
[data-destination="lab"]{--link-field:#f96859;--link-on:#2a120d}
[data-destination="shift"]{--link-field:#3d6bc9;--link-on:#fff}
[data-destination="pulse"]{--link-field:#99295d;--link-on:#fff}
[data-destination="path"]{--link-field:#526956;--link-on:#fff}
body[data-site="synk"]{--orb-light:#fff;--field:#0a0a0a;--on-field:#fff;--on-field-2:rgba(255,255,255,.82);--on-field-3:rgba(255,255,255,.7);--on-field-line:rgba(255,255,255,.22);--field-shadow:rgba(0,0,0,.5);--field-button:#fff;--field-button-ink:#0a0a0a;--orb-dark:#18181a}
:is(body[data-site="lab"],[data-field="lab"]){--field-light:radial-gradient(1100px 620px at 16% -200px,rgba(255,255,255,.24),rgba(255,255,255,0) 70%);--field:#f96859;--on-field:#2a120d;--on-field-2:#2a120d;--on-field-3:#2a120d;--on-field-line:rgba(42,18,13,.24);--field-shadow:rgba(120,22,12,.42);--field-button:#2a120d;--field-button-ink:#fef0e9}
:is(body[data-site="shift"],[data-field="shift"]){--field:#3d6bc9;--on-field:#fff;--on-field-2:#fff;--on-field-3:#fff;--on-field-line:rgba(255,255,255,.34);--field-shadow:rgba(10,24,70,.45);--field-button:#fff;--field-button-ink:#24448c}
:is(body[data-site="pulse"],[data-field="pulse"]){--field:#99295d;--on-field:#fff;--on-field-2:rgba(255,255,255,.92);--on-field-3:rgba(255,255,255,.88);--on-field-line:rgba(255,255,255,.3);--field-shadow:rgba(50,6,24,.5);--field-button:#fff;--field-button-ink:#99295d}
:is(body[data-site="path"],[data-field="path"]){--field:#526956;--on-field:#fff;--on-field-2:#fff;--on-field-3:#fff;--on-field-line:rgba(255,255,255,.34);--field-shadow:rgba(16,28,18,.5);--field-button:#fff;--field-button-ink:#3b503e}

/* ── Base ──────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--site-header-height,76px) + 16px)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.72 var(--sans);letter-spacing:-.012em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;word-break:keep-all;overflow-wrap:break-word}
main{display:block}
:where(main,footer,dialog,.site-family) :where(h1,h2,h3,h4,h5,p,figure,ol,ul,dl,dd,blockquote){margin:0}
:where(main,footer,dialog,.site-family) :where(ol,ul){padding:0;list-style:none}
:where(main,footer,dialog,.site-family,.site-header-wrap) :where(h1,h2,h3,h4){font-weight:700;color:var(--ink);text-wrap:balance}
:where(main,footer,dialog) p{text-wrap:pretty}
img,svg,video,canvas{display:block;max-width:100%}
img{height:auto}
/* An icon drawn inline beside a label is sized by the label. */
:where(a,button,summary,span)>svg:not([width]){width:1.05em;height:1.05em;flex:none}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit;letter-spacing:inherit}
button{cursor:pointer}
:where(button){background:none;border:0;padding:0;border-radius:0}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:6px}
#top:focus,[tabindex="-1"]:focus{outline:none}
::selection{background:rgba(10,10,10,.12)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:12px;top:12px;z-index:200;padding:10px 16px;border-radius:999px;background:var(--ink);color:#fff;font-size:15px;transform:translateY(-200%)}
.skip:focus{transform:none}
.shell{width:min(var(--max),calc(100% - 2 * var(--gutter)));margin-inline:auto}

/* The first screen of / keeps the base it was designed on; its own look lives in cosmic-entry.css.
   These repeat the older element rules that reached it, at no specificity, so cosmic-entry.css still wins. */
:where(.cosmic-entry){font:400 16px/1.75 var(--synk-font);letter-spacing:-.015em;color:#0a0a0a}
:where(.cosmic-entry) :where(img){display:block;max-width:100%;height:auto}
:where(.cosmic-entry) :where(h1,h2,h3,h4,p,figure,dl,dd){margin:0}
:where(.cosmic-entry) :where(h1,h2,h3,h4){font-weight:800;line-height:1.25;letter-spacing:-.045em;text-wrap:balance;word-break:keep-all}
:where(.cosmic-entry) :where(svg){display:block;width:24px;height:24px}
:where(.cosmic-entry) :where(p){text-wrap:pretty;word-break:keep-all}
:where(.cosmic-entry) :where(h2){font-size:clamp(32px,3.5vw,54px)}
:where(.cosmic-entry) :where(a){color:inherit;text-decoration:none}
:where(.cosmic-entry) :where(button,a,summary){-webkit-tap-highlight-color:transparent;touch-action:manipulation}
:where(.cosmic-entry) :where(button,a){transition:opacity .18s ease,transform .18s cubic-bezier(.23,1,.32,1)}

/* Older scripts still fade and lift blocks as they scroll into view, and lift the entrance on /.
   The new pages stay still: whatever those scripts write inline is overruled here. */
[data-reveal],[data-enter],.entry-pending [data-enter]{opacity:1!important;translate:none!important}
.learning-scene>[data-felt],.pulse-scene>[data-felt]{transform:none!important}
@media (prefers-reduced-motion:reduce){*,::before,::after{animation:none!important;transition:none!important}}

/* ── Type ──────────────────────────────────────────────────────────────── */
/* Two-line titles: the first line bold, what follows light, as on the first screen. */
:where(#top) :is(h1,h2){font-family:var(--display)}
:where(#top) h1{font-size:clamp(44px,7.6vw,112px);line-height:1.02;letter-spacing:-.05em;font-weight:700}
:where(#top) h2{font-size:clamp(34px,5vw,76px);line-height:1.1;letter-spacing:-.045em;font-weight:700}
/* The words before the break are marked at build time (mark-title-leads.mjs), so a first line that wraps
   on a narrow window stays bold as a whole phrase. ::first-line is the fallback for unmarked titles. */
:where(#top) :is(h1,h2):has(> .title-lead){font-weight:300}
:where(#top) :is(h1,h2) > .title-lead{font-weight:700}
:where(#top) :is(h1,h2):has(br):not(:has(> span,> em)){font-weight:300}
:where(#top) :is(h1,h2):has(br):not(:has(> span,> em))::first-line{font-weight:700}
:where(#top) :is(h1,h2) :is(span,em){font-style:normal;font-weight:300}
:where(#top) h3{font-size:clamp(19px,1.5vw,22px);line-height:1.35;letter-spacing:-.025em;font-weight:650}
:where(#top) h4{font-size:16px;line-height:1.45;letter-spacing:-.02em;font-weight:650}
:where(#top) p{font-size:clamp(16px,1.2vw,18px);line-height:1.72;color:var(--ink-2)}
:where(#top) strong{font-weight:650;color:var(--ink)}

/* Small labels: an English micro label in mono capitals, a Korean one in the text face.
   A label that opens a section carries a hairline to the right, as on the first screen. */
.eyebrow,.orb-eyebrow,.stage-label,.visual-scene-number,.story-index,.atlas-engine-index,.lab-card__meta .eyebrow,.section-kicker .eyebrow{font:400 11px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.small-label{font:600 13px/1.4 var(--sans);letter-spacing:-.01em;color:var(--ink-3)}
html[lang="en"] .small-label{font:400 11px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase}

/* ── Controls ──────────────────────────────────────────────────────────── */
/* One filled action per view, in the site's ink; everything else is a quiet text link. */
.primary-link{display:inline-flex;align-items:center;gap:10px;max-width:100%;min-height:48px;padding:11px 22px 11px 24px;border-radius:999px;background:var(--accent-ink);color:#fff;font:600 15px/1.25 var(--sans);letter-spacing:-.01em;text-wrap:balance;transition:background-color var(--fast) var(--ease),box-shadow var(--fast) var(--ease)}
body[data-site="synk"] .primary-link{background:var(--ink)}
.primary-link:hover{box-shadow:0 10px 24px -14px rgba(10,10,10,.55)}
.primary-link span,.quiet-link span,.line-link span,.text-button span{font-family:var(--sans);font-weight:400;font-size:.95em;opacity:.8}
.quiet-link,.line-link,.text-button{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--ink);font:600 15px/1 var(--sans);letter-spacing:-.01em;text-decoration:underline;text-decoration-thickness:var(--hair);text-underline-offset:7px;text-decoration-color:var(--ink-4);transition:text-decoration-color var(--fast) var(--ease)}
.quiet-link:hover,.line-link:hover,.text-button:hover{text-decoration-color:var(--ink)}

/* site-bar:start. compose-atlas.mjs copies this part into site-bar.css, so /atlas/ wears the same bar. */
/* ── Header: the glass dock ────────────────────────────────────────────── */
/* A frosted capsule holding the felt logo, this site's sections, the five brands and the language.
   It stays where it is while the page moves under it; the page shows through its edge. */
.site-header-wrap{position:sticky;top:0;z-index:60;padding:14px var(--gutter) 0;pointer-events:none}
.site-header-wrap .header{pointer-events:auto}
.header.bar{position:relative;display:flex;align-items:center;gap:4px;width:fit-content;max-width:100%;height:62px;margin:0 auto;padding:0 10px 0 7px;border-radius:999px;isolation:isolate;
 background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(250,250,251,.84));
 -webkit-backdrop-filter:saturate(1.1) blur(20px);backdrop-filter:var(--dock-rim,) saturate(1.1) blur(20px);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(10,10,10,.035),0 0 0 .5px rgba(10,10,10,.12),0 1px 2px rgba(10,10,10,.05),0 14px 34px -18px rgba(10,10,10,.28)}
/* Sunlight from the upper left along the rim, and a little colour where the light leaves the glass. */
.header.bar::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:-1;
 background:radial-gradient(160px 60px at var(--glass-x,16%) var(--glass-y,0%),#fff,rgba(255,255,255,0) 70%),linear-gradient(118deg,rgba(255,255,255,1) 0%,rgba(255,255,255,.2) 22%,rgba(255,255,255,0) 50%,rgba(255,255,255,.15) 78%,rgba(255,255,255,.75) 100%);
 -webkit-mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
/* Where the browser bends light (see glass-controls.js), one backdrop filter bends the page at the rim and
   frosts it inside, so the words stay easy to read. The white tint of the frost sits inside the rim only. */
.header.bar.has-rim{background:rgba(255,255,255,.14);-webkit-backdrop-filter:saturate(1.1);backdrop-filter:var(--dock-rim,) saturate(1.1)}
.header.bar.has-rim::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-2;-webkit-mask:var(--dock-frost) center/100% 100% no-repeat;mask:var(--dock-frost) center/100% 100% no-repeat;
 background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(250,250,251,.84))}
/* The felt logo sits in a bead of clearer glass at the head of the dock. */
.bar-logo{display:flex;align-items:center;height:48px;padding:0 20px;margin-right:10px;border-radius:999px;
 background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,255,255,.62));
 box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(10,10,10,.04),0 0 0 .5px rgba(10,10,10,.1),0 4px 12px -6px rgba(10,10,10,.3);
 transition:box-shadow var(--fast) var(--ease)}
.bar-logo:hover{box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(10,10,10,.04),0 0 0 .5px rgba(10,10,10,.14),0 6px 16px -6px rgba(10,10,10,.34)}
.bar-logo img{width:auto;height:28px}
body[data-site="synk"] .bar-logo img{height:26px}
.bar-menu{display:flex;align-items:center;gap:2px}
.bar-menu a,.bar-brands a,.header-language a{display:inline-flex;align-items:center;height:40px;padding:0 13px;border-radius:999px;font:500 15px/1 var(--sans);letter-spacing:-.015em;color:var(--ink-2);white-space:nowrap;transition:color var(--fast) var(--ease),background-color var(--fast) var(--ease)}
.bar-menu a:hover,.bar-brands a:hover,.header-language a:hover{color:var(--ink);background:rgba(10,10,10,.045)}
.bar-menu a:is([aria-current="location"],[aria-current="page"]){color:var(--ink);text-decoration:underline;text-decoration-thickness:var(--hair);text-underline-offset:6px;transition:none}
.bar-brands{display:flex;align-items:center;gap:0;margin-left:8px;padding-left:8px;border-left:var(--hair) solid var(--line);height:28px}
.bar-brands a{height:34px;padding:0 10px;font:500 11px/1 'SYNK Latin',var(--sans);letter-spacing:.07em;color:var(--ink-3)}
.bar-brands a[aria-current="page"]{color:var(--ink);background:rgba(255,255,255,.95);box-shadow:0 0 0 .5px rgba(10,10,10,.12),0 2px 6px -2px rgba(10,10,10,.18)}
.header-language{display:flex;align-items:center;gap:0;margin-left:4px;padding-left:8px;border-left:var(--hair) solid var(--line);height:28px}
.header-language>span{display:none}
.header-language a{height:34px;padding:0 9px;font:500 11px/1 'SYNK Latin',var(--sans);letter-spacing:.07em;color:var(--ink-3)}
.header-language a[aria-current="page"]{color:var(--ink)}
.menu-toggle{display:none}

@media (prefers-reduced-transparency:reduce){.header.bar{background:rgba(250,250,251,.97);-webkit-backdrop-filter:none;backdrop-filter:none}}
/* Narrower windows keep the logo, the five brands and the language in the dock; this site's sections
   fold into a list that opens under it. Phones fold the brands into that list too. */
@media (max-width:1180px){
 .header.bar{flex-wrap:wrap;align-content:flex-start;padding-right:6px}
 .bar-menu{display:none}
 .bar-brands{margin-left:0;padding-left:0;border-left:0}
 .menu-toggle{order:9;display:inline-grid;place-items:center;width:44px;height:44px;margin-left:2px;border-radius:999px;color:var(--ink)}
 .menu-toggle:hover{background:rgba(10,10,10,.05)}
 .menu-icon,.menu-icon::before{display:block;width:18px;height:var(--hair);min-height:1px;background:currentColor;transition:transform var(--fast) var(--ease)}
 .menu-icon{position:relative;transform:translateY(-3.5px)}
 .menu-icon::before{content:"";position:absolute;left:0;top:7px}
 .header.menu-open{height:auto;padding-bottom:10px;border-radius:28px}
 .header.menu-open .menu-icon{transform:translateY(0) rotate(45deg)}
 .header.menu-open .menu-icon::before{top:0;transform:rotate(-90deg)}
 .header.menu-open .bar-menu{order:10;display:flex;flex-direction:column;align-items:stretch;flex-basis:100%;gap:0;padding:6px 6px 8px 0;border-top:var(--hair) solid var(--line)}
 .header.menu-open .bar-menu a{height:48px;padding:0 4px;border-radius:0;font-size:17px;color:var(--ink);border-bottom:var(--hair) solid var(--line-soft)}
 .header.menu-open .bar-menu a:last-child{border-bottom:0}
 .header.menu-open .bar-menu a:hover{background:none}
}
@media (max-width:900px){
 .site-header-wrap{padding:10px 12px 0}
 .header.bar{width:100%;height:54px;padding:0 6px;border-radius:27px}
 .header.bar.menu-open{height:auto;padding-bottom:10px;border-radius:24px}
 .bar-logo{margin-right:auto;height:42px;padding:0 16px}
 .bar-logo img{height:23px}
 body[data-site="synk"] .bar-logo img{height:21px}
 .bar-brands{display:none}
 .header-language{order:2;margin-left:0;border-left:0;padding-left:0}
 .header-language a{height:44px;padding:0 10px}
 .header.menu-open .bar-brands{order:11;display:flex;flex-wrap:wrap;flex-basis:100%;height:auto;margin:0;padding:8px 6px 4px 0;border-left:0;border-top:var(--hair) solid var(--line);gap:4px}
 .header.menu-open .bar-brands a{height:36px;padding:0 12px}
}
/* site-bar:end */

/* ── Company page (/#top) ──────────────────────────────────────────────── */
.hero{padding-top:clamp(56px,7vw,104px)}
.hero-meta{margin-bottom:clamp(20px,2.4vw,32px)}
.hero-meta .eyebrow{display:flex;align-items:center;gap:16px}
.hero-meta .eyebrow::after{content:"";flex:1;border-top:var(--hair) solid var(--line)}
.introduction{display:grid;gap:clamp(40px,5vw,72px)}
.hero-copy{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:28px;align-items:end}
.hero-copy h1{grid-column:1/-1}
.hero-copy h1 span{display:block}
.hero-copy>p{grid-column:1/span 6;font-size:clamp(18px,1.4vw,20px);line-height:1.62;color:var(--ink-2);max-width:32em}
.hero-actions{grid-column:8/-1;justify-self:end;display:flex;flex-wrap:wrap;align-items:center;gap:10px 26px}
.companions{position:relative}
.companions-scene{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:50% 58%;border-radius:var(--radius);background:var(--plate)}
.companions figcaption{display:flex;justify-content:space-between;gap:16px;margin-top:16px;font-size:13px;color:var(--ink-3)}
/* The four businesses side by side: the brand colour is the wall behind the felt object (top 58%), a shared
   light floor carries the logo and the line, in ink. The object stands on the seam, its shadow on the floor.
   The colour appears once per business and at half the area of a full colour tile. */
.world-directory{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.4vw,20px);margin-top:clamp(72px,8vw,120px)}
.world-directory>a{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:58% minmax(0,1fr);height:clamp(380px,32vw,460px);border-radius:var(--field-radius);overflow:hidden;isolation:isolate;color:var(--ink);background:var(--plate);transition:background-color var(--fast) var(--ease)}
.world-directory>a::before{content:"";grid-area:1/1/2/-1;z-index:-2;background:var(--field-grain),var(--field-light),var(--field)}
.world-directory>a:hover{background:var(--plate-deep)}
.world-directory>a>div{grid-area:2/1/3/-1;display:grid;align-content:end;justify-items:start;gap:12px;padding:0 clamp(16px,1.4vw,22px) clamp(16px,1.4vw,22px)}
.directory-logo{width:auto;height:22px}
/* The PATH artwork carries more space above and below its letters (467px against 360px). */
svg.directory-logo{height:28.5px;margin-block:-3.25px}
.world-directory strong{font-size:clamp(15px,1.2vw,18px);font-weight:600;line-height:1.35;letter-spacing:-.02em;color:var(--ink)}
.directory-arrow{grid-area:1/2;align-self:start;margin:clamp(12px,1.1vw,16px) clamp(12px,1.1vw,16px) 0 0;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;font-size:16px;line-height:1;color:#000;background:rgba(255,255,255,.94);box-shadow:inset 0 1px 0 #fff,0 8px 18px -10px rgba(0,0,0,.5);transition:background-color var(--fast) var(--ease),color var(--fast) var(--ease)}
.world-directory>a:hover .directory-arrow{background:#000;color:#fff}
.world-directory>a:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.directory-object{grid-area:1/1/2/-1;align-self:end;justify-self:center;width:66%;margin-bottom:-7%;z-index:-1}
.directory-object img{display:block;width:100%;height:auto}
/* The LAB tile is cut out without its floor, so it gets its own shadow. */
[data-field="lab"] .directory-object{width:62%;margin-bottom:-4%}
[data-field="lab"] .directory-object img{filter:drop-shadow(0 16px 16px rgba(60,30,20,.28)) drop-shadow(0 4px 6px rgba(60,30,20,.2))}

/* Atlas on the company page is one screen (2026-10-01, qa/flow-fix-20261001): what it is, a still picture of
   the map on /atlas/ in the same ink, and the way there. The engines, the goal examples and the letter preview
   are told once, on /atlas/. */
.atlas-brief{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:clamp(36px,4vw,56px);align-items:start;padding-top:var(--section)}
.atlas-brief-head{grid-column:1/-1;display:grid;gap:22px;max-width:980px}
.atlas-brief-head .small-label{display:flex;align-items:center;gap:16px}
.atlas-brief-head .small-label::after{content:"";flex:1;border-top:var(--hair) solid var(--line)}
.atlas-brief-copy{grid-column:1/span 5;display:grid;gap:26px;justify-items:start;align-self:center}
.atlas-brief-copy>p:first-child{font-size:clamp(18px,1.4vw,20px);line-height:1.66}
.atlas-scope{font-size:13px;line-height:1.6;color:var(--ink-3)}
.atlas-scope br{display:none}
.atlas-brief-map{grid-column:7/-1;position:relative;container-type:inline-size;margin:0;padding:clamp(28px,3vw,44px) clamp(20px,2.4vw,36px);border-radius:var(--radius);background:var(--plate)}
.atlas-brief-map svg{display:block;width:100%;max-width:520px;height:auto;margin:0 auto;overflow:visible}
.atlas-brief-caption{position:absolute;left:clamp(20px,2vw,28px);top:clamp(18px,1.8vw,26px);font:400 11px/1.3 var(--mono);letter-spacing:.1em;color:var(--ink-3)}
.atlas-brief-orbit{fill:none;stroke:rgba(10,10,10,.28);stroke-width:var(--hair);vector-effect:non-scaling-stroke}
.atlas-brief-marks path{fill:none;stroke:var(--ink);stroke-width:var(--hair);vector-effect:non-scaling-stroke}
/* Names are set in the units of the 600-wide picture, so they read at about 11px on a wide plate and 10px on a phone. */
.atlas-brief-marks text{font:500 13px 'SYNK Latin',var(--sans);letter-spacing:.1em;fill:rgba(10,10,10,.86);dominant-baseline:central}
@container (max-width:440px){.atlas-brief-marks text{font-size:18px}}

.company-note{padding-top:var(--section)}
.company-note-inner{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:48px;align-items:start}
.company-intro-text{grid-column:1/span 6;display:grid;gap:28px}
.company-note-copy{display:grid;gap:18px}
.company-note-copy .line-link{justify-self:start;margin-top:6px}
.company-process{grid-column:8/-1;padding:26px 28px 22px;border-radius:var(--radius);border:var(--hair) solid var(--line)}
.company-process figcaption{font:600 13px/1.4 var(--sans);letter-spacing:-.01em;color:var(--ink-3);margin-bottom:10px}
.company-process ol{display:grid}
.company-process li{display:grid;grid-template-columns:48px 1fr;gap:16px;align-items:center;padding:16px 0;border-bottom:var(--hair) solid var(--line)}
.company-process li:last-child{border-bottom:0}
.company-process .loom-illustration{width:48px;height:48px;object-fit:contain}
.company-process li strong{display:block;font-size:clamp(16px,1.2vw,17px);letter-spacing:-.02em}
.company-process li p{font-size:15px;line-height:1.55}
.process-note{margin-top:12px;font-size:13px;color:var(--ink-3)}
.principles{margin-top:clamp(72px,8vw,120px);border-top:var(--hair) solid var(--ink);counter-reset:principle}
.principle-row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:start;padding:28px 0 30px;border-bottom:var(--hair) solid var(--line);counter-increment:principle}
.principle-row::before{content:"0" counter(principle);grid-column:1/span 1;font:400 11px/1.4 var(--mono);letter-spacing:.1em;color:var(--ink-3);padding-top:7px}
.principle-row .loom-illustration{display:none}
.principle-row h3{grid-column:2/span 4;font-size:clamp(18px,1.4vw,20px)}
.principle-row p{grid-column:7/-1}
.company-scope-note{padding-top:24px;font-size:13px;color:var(--ink-3);max-width:52em}

/* ── Question chamber ──────────────────────────────────────────────────── */
.help-section{padding-top:var(--section)}
/* Every page closes on its colour: the question sphere printed in a deep tone of it. When the desk opens,
   the conversation and the enquiry sit on a white sheet inside the field. The company closes on black. */
#contact.orb-help{width:auto;max-width:none;margin-inline:0}
.orb-chamber{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);margin-inline:var(--field-inset);padding:clamp(48px,6vw,96px) calc(max(var(--gutter),(100% - var(--max)) / 2) - var(--field-inset));border-radius:var(--field-radius);color:var(--on-field);background:var(--field-grain),var(--field-light),var(--field)}
.orb-chamber .orb-eyebrow{color:var(--on-field-3)}
.orb-chamber .orb-heading h2{color:var(--on-field)}
/* White pills on the field keep the ink of the page. */
.orb-chamber :is(.orb-invite,.orb-switch button){color:var(--ink)}
.orb-chamber .orb-eyebrow i{border-color:var(--on-field-line)}
.orb-surface{color:var(--orb-dark,color-mix(in srgb,var(--field) 30%,#000));caret-color:var(--orb-light,color-mix(in srgb,var(--field) 16%,#fff))}
.orb-help.is-open .orb-workspace,.orb-help:not(.orb-ready) .orb-workspace{position:relative;padding:clamp(22px,3vw,44px);border-radius:var(--radius-s);background:var(--paper);color:var(--ink)}
.orb-presence{grid-column:1/-1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:center}
.orb-heading{grid-column:1/span 6;display:grid;gap:22px}
.orb-eyebrow{display:flex;align-items:center;gap:10px}
.orb-eyebrow i{display:block;width:28px;border-top:var(--hair) solid var(--ink-4)}
.orb-stage{grid-column:8/-1;display:grid;justify-items:center}
.orb-launch{position:relative;display:grid;justify-items:center;gap:20px;width:min(340px,100%)}
.orb-surface{position:relative;display:block;width:100%;aspect-ratio:1;border-radius:50%}
.orb-canvas{position:absolute;inset:0;width:100%;height:100%}
.orb-surface:not(.orb-rendered){background:radial-gradient(circle at 34% 30%,color-mix(in srgb,var(--field) 45%,#fff) 0,color-mix(in srgb,var(--field) 40%,#000) 100%)}
.orb-invite{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 20px;border-radius:999px;background:var(--paper);box-shadow:0 0 0 .5px rgba(10,10,10,.12),0 6px 16px -10px rgba(10,10,10,.35);font:600 15px/1 var(--sans)}
.orb-invite svg{width:16px;height:16px}
.orb-launch:hover .orb-invite{box-shadow:0 0 0 .5px rgba(10,10,10,.2),0 10px 22px -12px rgba(10,10,10,.45)}
.orb-workspace{grid-column:1/-1}
.orb-help:not(.orb-ready) .orb-stage,.orb-help:not(.orb-ready) .orb-switch{display:none}
.orb-help.is-open .orb-presence{margin-bottom:clamp(32px,4vw,48px)}
.orb-help.is-open .orb-stage{display:none}
.orb-close{position:absolute;right:16px;top:16px;display:grid;place-items:center;width:44px;height:44px;border-radius:999px;background:var(--plate);font-size:22px;line-height:1;box-shadow:0 0 0 .5px rgba(10,10,10,.12)}
.help-panel{display:grid;gap:18px}
.orb-introduction h3,.help-panel-intro h3{font-size:20px}
.help-panel-intro{display:grid;gap:8px}
.question-desk form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:end}
.question-label{grid-column:1/-1;font-size:13px;color:var(--ink-3)}
.question-entry{display:flex;align-items:center;min-height:60px;padding:8px 20px;border-radius:30px;background:var(--paper);box-shadow:0 0 0 .5px rgba(10,10,10,.14),0 8px 20px -14px rgba(10,10,10,.3)}
.question-entry:focus-within{box-shadow:0 0 0 1.5px var(--ink),0 8px 20px -14px rgba(10,10,10,.3)}
.question-entry textarea{flex:1;min-height:44px;max-height:160px;padding:11px 0;border:0;background:transparent;resize:none;font-size:16px;line-height:1.5;outline:none}
.send{display:inline-flex;align-items:center;gap:8px;min-height:60px;padding:0 24px;border-radius:30px;background:var(--ink);color:#fff;font:600 14.5px/1 var(--sans);white-space:nowrap}
.send:disabled{opacity:.4;cursor:default}
form[aria-busy="true"] .send{opacity:.55}
.desk-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 20px;align-items:center}
.desk-bottom p{font-size:13px;color:var(--ink-3)}
.desk-bottom button{font-size:13px;color:var(--ink-2);text-decoration:underline;text-decoration-thickness:var(--hair);text-underline-offset:5px}
.orb-faq-label{margin-top:10px;font:400 11px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.suggestions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.suggestions button{display:grid;grid-template-columns:32px 1fr auto;align-items:center;gap:14px;min-height:72px;padding:14px 16px;border-radius:16px;background:var(--paper);text-align:left;box-shadow:0 0 0 .5px rgba(10,10,10,.1);transition:box-shadow var(--fast) var(--ease)}
.suggestions button:hover{box-shadow:0 0 0 .5px rgba(10,10,10,.2),0 10px 22px -16px rgba(10,10,10,.4)}
.faq-icon{width:32px;height:32px;object-fit:contain}
.faq-copy{display:grid;gap:2px}
.faq-topic{font-size:12px;color:var(--ink-3)}
.faq-question{font-size:14.5px;font-weight:600;letter-spacing:-.02em;line-height:1.35}
.faq-arrow{width:16px;height:16px;color:var(--ink-3)}
.orb-help .is-chatting :is(.orb-faq-label,.suggestions){display:none}
.chat-heading{display:flex;justify-content:space-between;align-items:center;gap:16px}
.chat-heading h2{font-size:18px;font-weight:650;letter-spacing:-.02em}
.messages{display:grid;gap:16px;max-height:min(62vh,640px);overflow:auto;padding:4px 2px 8px}
.message-user{justify-self:end;max-width:min(80%,560px);padding:12px 18px;border-radius:20px 20px 6px 20px;background:var(--ink);color:#fff;font-size:15px}
.message-user p{color:#fff;font-size:15px}
.message-assistant{display:grid;gap:12px;max-width:760px;padding:22px 24px;border-radius:20px 20px 20px 6px;background:var(--paper);box-shadow:0 0 0 .5px rgba(10,10,10,.1)}
.message-label{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink-3)}
.answer-wordmark{width:38px;height:auto}
.answer-text{display:grid;gap:10px}
.answer-text p,.answer-more p{font-size:15px;line-height:1.7;color:var(--ink)}
.answer-more summary,.orb-history summary{cursor:pointer;font-size:13.5px;font-weight:600;color:var(--ink-2)}
.answer-reviewed,.answer-sources{font-size:12.5px;color:var(--ink-3)}
.answer-sources{display:flex;flex-wrap:wrap;gap:6px}
.source-button,.copy-answer,.answer-action{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 14px;border-radius:999px;background:var(--plate);font-size:13px;font-weight:500;color:var(--ink)}
.source-button:hover,.copy-answer:hover,.answer-action:hover{background:var(--plate-deep)}
.answer-actions{display:flex;flex-wrap:wrap;gap:6px}
.related-questions{display:flex;flex-wrap:wrap;gap:6px}
.related-questions button{min-height:34px;padding:0 14px;border-radius:999px;font-size:13px;box-shadow:0 0 0 .5px rgba(10,10,10,.16)}
.help-enquiry{max-width:760px}
.email-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px}
.contact-email{font:600 clamp(22px,2.2vw,30px)/1.2 'SYNK Latin',var(--sans);letter-spacing:-.03em}
.contact-email span{font-size:.6em;color:var(--ink-3)}
#copy-email{min-height:36px;padding:0 16px;border-radius:999px;background:var(--paper);font-size:13px;box-shadow:0 0 0 .5px rgba(10,10,10,.14)}
.help-form-note{font-size:13.5px}
.contact-web-panel{border-top:var(--hair) solid var(--line);border-bottom:var(--hair) solid var(--line)}
.contact-web-panel summary{display:flex;justify-content:space-between;align-items:center;min-height:56px;cursor:pointer;list-style:none;font-weight:600;font-size:15px}
.contact-web-panel summary::-webkit-details-marker{display:none}
.contact-web-panel[open] summary span{transform:rotate(45deg)}
.contact-web-panel iframe{width:100%;border:0;border-radius:16px;background:var(--paper);margin-block:12px}
.contact-provider{font-size:13px}
.help-privacy{font-size:13px;color:var(--ink-3);text-decoration:underline;text-decoration-thickness:var(--hair);text-underline-offset:5px}
.orb-switch{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.orb-switch button{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 20px;border-radius:999px;background:var(--paper);font-size:15px;font-weight:600;box-shadow:0 0 0 .5px rgba(10,10,10,.12)}
.orb-help.orb-ready:not(.is-open) .orb-workspace{display:none}
.help-anchor{position:relative;top:calc(-1 * var(--site-header-height,76px))}

/* ── Brand row and footer ──────────────────────────────────────────────── */
.site-family{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin-top:var(--section);border-top:var(--hair) solid var(--ink)}
.site-family a{display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:64px;padding:0 16px 0 0;font:600 13px/1 'SYNK Latin',var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);border-bottom:var(--hair) solid var(--line);transition:color var(--fast) var(--ease)}
.site-family a+a{padding-left:16px;border-left:var(--hair) solid var(--line)}
.site-family a:hover{color:var(--ink)}
.site-family a[aria-current="page"]{color:var(--ink)}
.site-family a span{font-weight:400;letter-spacing:0}
.footer{display:grid;gap:28px;padding:40px 0 48px}
.footer-bottom{display:flex;flex-wrap:wrap;align-items:center;gap:16px 32px}
.footer-bottom .wordmark img{width:auto;height:22px}
.footer-links{display:flex;flex-wrap:wrap;gap:4px 22px;margin-left:auto}
.footer-links a,.back-chat{font-size:13px;color:var(--ink-2)}
.footer-links a:hover,.back-chat:hover{color:var(--ink)}
.back-chat span{margin-left:6px}
.footer-info{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;font-size:13px;color:var(--ink-3)}
.footer-info p{font-size:13px;color:var(--ink-3)}
.footer-info button{margin-left:6px;font-size:13px;color:var(--ink-2);text-decoration:underline;text-decoration-thickness:var(--hair);text-underline-offset:4px}

/* ── Document dialog and toast ─────────────────────────────────────────── */
dialog#document-dialog{width:min(720px,calc(100% - 32px));max-height:min(86vh,900px);overflow:auto;padding:0;border:0;border-radius:24px;background:var(--paper);color:var(--ink);box-shadow:0 30px 80px -30px rgba(10,10,10,.5)}
dialog#document-dialog::backdrop{background:rgba(10,10,10,.28);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
#document-body>section{scroll-margin-top:96px}
.document-top{position:sticky;top:0;display:flex;justify-content:space-between;align-items:center;padding:18px 20px 12px 32px;background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.icon-button{display:grid;place-items:center;width:40px;height:40px;border-radius:999px;background:var(--plate);font-size:20px}
.document-content{display:grid;gap:14px;padding:8px 32px 28px}
.document-brand{font-size:12px;color:var(--ink-3)}
.document-content h2{font-size:clamp(24px,2.4vw,30px);letter-spacing:-.035em;line-height:1.25}
#document-body{display:grid;gap:12px;font-size:15.5px;line-height:1.75;color:var(--ink-2)}
#document-body :is(h3,h4){font-size:16px;color:var(--ink);margin-top:10px}
#document-body :is(ul,ol){padding-left:1.2em;list-style:disc}
.document-footer{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 32px 24px;border-top:var(--hair) solid var(--line);font-size:13px;color:var(--ink-3)}
.document-footer button{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 18px;border-radius:999px;background:var(--ink);color:#fff;font-size:13.5px;font-weight:600}
.toast{position:fixed;left:50%;bottom:28px;z-index:300;transform:translateX(-50%);padding:12px 20px;border-radius:999px;background:var(--ink);color:#fff;font-size:14px;box-shadow:0 14px 36px -16px rgba(10,10,10,.6)}

/* ── Business pages: shared rhythm ─────────────────────────────────────── */
/* Every chapter opens the same way: a small label with a hairline, a two-line title, a lead.
   Pictures stand on the soft plate; the first one of a page on a plate touched by the business colour. */
.story-purpose,.story-section,.lab-personalization-wrap,.lab-curriculum-wrap,.brand-process,.selected-work,.work-design-note{padding-top:var(--section)}
.story-purpose{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:22px}
.story-purpose>*{grid-column:1/span 8}
.story-purpose>h2{font-size:clamp(36px,5.8vw,88px)}
.story-purpose>p{grid-column:1/span 7;font-size:clamp(17px,1.4vw,20px);line-height:1.72}
.story-purpose>.small-label,.story-heading>.small-label,.lab-overview-heading>.small-label,.lab-try-heading>.small-label,.story-evidence>header>.small-label{display:flex;align-items:center;gap:16px}
.story-purpose>.small-label::after,.story-heading>.small-label::after,.lab-overview-heading>.small-label::after{content:"";flex:1;border-top:var(--hair) solid var(--line)}
:is(.story-purpose,.story-heading,.lab-overview-heading,.lab-try-heading,.story-evidence>header)>.small-label{color:var(--accent-ink)}
.story-heading{display:grid;gap:20px;align-content:start}
.story-heading>p{max-width:38em}
.story-heading>p+p{margin-top:-6px}
.stage-label{font:600 13px/1.4 var(--sans);letter-spacing:-.01em;color:var(--ink-3);text-transform:none}
html[lang="en"] .stage-label{font:400 11px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase}

.story-introduction{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:40px;align-items:center}
.story-introduction>.story-heading{grid-column:1/span 7}
.story-section--visual .story-introduction>.story-heading{grid-column:1/span 6}
.story-visual{grid-column:8/-1;margin:0}
/* Studio photographs have white grounds, the same white as the page: they stand on it without a plate. */
:is(.story-visual,.pulse-scene,.path-hero-visual,.shift-hero-visual,.pulse-advertising-visual){display:grid;grid-template-rows:auto auto;row-gap:14px;isolation:isolate}
:is(.story-visual,.pulse-scene,.path-hero-visual,.shift-hero-visual,.pulse-advertising-visual)>img{grid-area:1/1;position:relative;width:100%;aspect-ratio:1;object-fit:contain;padding:2%}
.pulse-advertising-visual>img{aspect-ratio:4/3;padding:0}
:is(.story-visual,.pulse-scene,.path-hero-visual,.shift-hero-visual,.pulse-advertising-visual)>figcaption{grid-row:2;font-size:13px;color:var(--ink-3)}
.story-feature{display:grid;gap:clamp(40px,4.4vw,64px)}

/* Numbered points: three or two columns under an ink rule. */
.story-items{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gap);margin-top:clamp(48px,5vw,72px);border-top:var(--hair) solid var(--ink)}
.story-items--three{grid-template-columns:repeat(3,minmax(0,1fr))}
.story-items>article{display:grid;align-content:start;gap:10px;padding:24px 24px 30px 0;border-bottom:var(--hair) solid var(--line)}
.story-items>article+article{padding-left:24px;border-left:var(--hair) solid var(--line)}
.story-items--three>article:nth-child(3n+1){padding-left:0;border-left:0}
.story-items:not(.story-items--three,.story-items--four)>article:nth-child(2n+1){padding-left:0;border-left:0}
/* LAB's short sections (2026-10-01): four points in a row, a line that matters, two or four pictured cards. */
.story-items--four{grid-template-columns:repeat(4,minmax(0,1fr))}
.story-items--four>article:nth-child(4n+1){padding-left:0;border-left:0}
.story-promise{margin:clamp(28px,3vw,40px) 0 0;max-width:46em;font:600 clamp(17px,1.35vw,19px)/1.55 var(--sans);letter-spacing:-.012em;color:var(--ink)}
.visual-explainer--compact{margin-top:clamp(40px,4.4vw,64px)}
.story-section--compact>.class-time-block{margin-top:clamp(36px,4vw,56px)}
@media (min-width:1101px){.visual-explainer--compact[data-count="2"] .visual-scene-panels{grid-template-columns:repeat(2,minmax(0,1fr))}.visual-explainer--compact[data-count="4"] .visual-scene-panels{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:761px) and (max-width:1100px){.story-items--four{grid-template-columns:repeat(2,minmax(0,1fr))}.story-items--four>article:nth-child(2n+1){padding-left:0;border-left:0}}
.story-items>article h3{font-size:20px}
.story-items>article p{font-size:16px}
.story-item-detail summary,.story-details summary,.lab-benefit summary,.lab-curriculum-fold>summary,.lab-feedback-preview>summary,.work-design-note summary,.brand-story>summary,.visual-scene-detail>summary,.story-evidence details>summary{display:flex;justify-content:space-between;align-items:center;gap:16px;cursor:pointer;list-style:none}
:is(.story-item-detail,.story-details details,.lab-benefit details,.lab-curriculum-fold,.lab-feedback-preview,.work-design-note details,.brand-story,.visual-scene-detail,.story-evidence details)>summary::-webkit-details-marker{display:none}
:is(.story-item-detail,.story-details details,.lab-benefit details,.lab-curriculum-fold,.lab-feedback-preview,.brand-story,.visual-scene-detail,.story-evidence details,.contact-web-panel)>summary>span:first-child:not(:last-child){flex:1;display:grid;gap:4px;min-width:0;width:auto;height:auto;background:none;place-items:initial;font-size:inherit;color:inherit;transform:none}
:is(.story-item-detail,.story-details details,.lab-benefit details,.lab-curriculum-fold,.lab-feedback-preview,.brand-story,.visual-scene-detail,.story-evidence details,.contact-web-panel)>summary>span:last-child{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:999px;background:var(--plate);font-size:15px;line-height:1;color:var(--ink-2);transition:transform var(--fast) var(--ease),background-color var(--fast) var(--ease)}
:is(.story-item-detail,.story-details details,.lab-benefit details,.lab-curriculum-fold,.lab-feedback-preview,.brand-story,.visual-scene-detail,.story-evidence details,.contact-web-panel)[open]>summary>span:last-child{transform:rotate(45deg);background:var(--ink);color:#fff}
.story-item-detail summary{align-items:flex-start;padding-top:2px}
.story-item-detail summary h3{font-size:19px}
.story-preview{font-size:15px;color:var(--ink-2)}
.story-item-detail>:not(summary){padding-top:12px;font-size:15px}

/* Questions that open in place: one hairline between them, nothing else. */
.story-details{margin-top:clamp(40px,4vw,56px);border-top:var(--hair) solid var(--line)}
.story-comparison-detail+.story-details{margin-top:0;border-top:0}
.story-details details{border-bottom:var(--hair) solid var(--line)}
.story-details summary{min-height:68px;font-size:clamp(16px,1.25vw,18px);font-weight:600;letter-spacing:-.02em}
.story-detail-body,.story-comparison{display:grid;gap:14px;max-width:56em;padding:0 0 28px}
.story-detail-body p{font-size:16px}
.story-comparison{max-width:none}
.story-comparison table{width:100%;border-collapse:collapse;font-size:14.5px;font-variant-numeric:tabular-nums}
.story-comparison caption{text-align:left;padding-bottom:12px;font-size:13px;color:var(--ink-3)}
.story-comparison :is(th,td){padding:14px 16px 14px 0;text-align:left;vertical-align:top;border-bottom:var(--hair) solid var(--line)}
.story-comparison thead th{font-size:12px;font-weight:600;color:var(--ink-3)}
.story-comparison tbody th{font-weight:600;width:32%}
.story-sources{display:flex;flex-wrap:wrap;gap:6px 18px}
.story-sources a{display:inline-flex;align-items:center;min-height:36px;font-size:13px;color:var(--ink-3);text-decoration:underline;text-decoration-thickness:var(--hair);text-underline-offset:4px}
.story-sources a:hover{color:var(--ink)}
.story-sources a span{margin-left:4px;text-decoration:none}
.story-note{margin-top:22px;max-width:60em;font-size:13px;color:var(--ink-3);line-height:1.65}

/* A link to the chapter that continues this one. */
.story-continuation{display:grid;grid-template-columns:48px 1fr auto;align-items:center;gap:18px;max-width:640px;margin-top:40px;padding:16px 22px 16px 16px;border-radius:var(--radius-s);background:var(--wash);transition:background-color var(--fast) var(--ease)}
.story-continuation:hover{background:var(--wash-2)}
.story-continuation[data-destination]{color:var(--link-on);background:var(--field-grain),var(--field-light),var(--link-field)}
.story-continuation[data-destination]:hover{background:var(--link-field)}
.story-continuation[data-destination] :is(.continuation-brand,.continuation-arrow){color:inherit}
.story-continuation[data-destination] .continuation-icon{filter:drop-shadow(0 4px 6px rgba(0,0,0,.25))}
.continuation-icon{width:48px;height:48px;object-fit:contain}
.continuation-copy{display:grid;gap:2px}
.continuation-brand{font:400 11px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.continuation-title{font-size:15.5px;font-weight:600;letter-spacing:-.02em}
.continuation-arrow{color:var(--ink-3);font-size:16px}
.story-continuation svg{width:18px;height:18px}
.story-toggle,.story-preview{font-size:14px}

/* ── Scene explorer: glass tabs over one scene at a time ───────────────── */
.visual-explainer{display:grid;gap:22px}
.visual-explainer-guide{font-size:13.5px;color:var(--ink-3)}
.visual-scene-nav{display:inline-flex;flex-wrap:wrap;justify-self:start;gap:2px;padding:4px;border-radius:999px;background:var(--wash)}
.visual-scene-nav button{min-height:40px;padding:0 18px;border-radius:999px;font:600 14px/1 var(--sans);letter-spacing:-.015em;color:var(--ink-2);transition:color var(--fast) var(--ease),background-color var(--fast) var(--ease),box-shadow var(--fast) var(--ease)}
.visual-scene-nav button:hover{color:var(--ink)}
.visual-scene-nav button[aria-selected="true"]{color:var(--ink);background:linear-gradient(180deg,#fff,rgba(255,255,255,.86));box-shadow:inset 0 1px 0 #fff,0 0 0 .5px rgba(10,10,10,.12),0 3px 10px -4px rgba(10,10,10,.28)}
.visual-scene-panels{display:grid;gap:clamp(48px,5vw,72px)}
.visual-scene{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:28px;align-items:center}
.visual-scene-art{grid-column:1/span 6;display:grid;place-items:center;aspect-ratio:5/4;border-radius:var(--radius);overflow:hidden}
.visual-scene-art img{width:92%;height:auto}
.visual-scene-art--landscape img{width:100%;height:100%;object-fit:cover;mix-blend-mode:normal}
.visual-scene-copy{grid-column:8/-1;display:grid;gap:14px;align-content:center}
.visual-scene-copy h3{font-size:clamp(24px,2.3vw,32px);letter-spacing:-.035em;line-height:1.25}
.visual-scene-summary{font-size:clamp(15.5px,1.15vw,17px);color:var(--ink)}
.visual-scene-example{display:grid;gap:10px;margin-top:6px;padding:20px 0 4px;border-top:var(--hair) solid var(--line)}
.visual-scene-example h4{font-size:15px}
.visual-scene-example ol{display:grid;gap:0;counter-reset:scene}
.visual-scene-example li{display:grid;grid-template-columns:28px 1fr;align-items:baseline;padding:9px 0;border-bottom:var(--hair) solid var(--line-soft);font-size:14.5px;color:var(--ink-2);counter-increment:scene}
.visual-scene-example li::before{content:counter(scene,decimal-leading-zero);font:400 11px/1 var(--mono);letter-spacing:.06em;color:var(--ink-3)}
.visual-scene-detail{border-bottom:var(--hair) solid var(--line)}
.visual-scene-detail>summary{min-height:48px;font-size:14.5px;font-weight:600}
.visual-scene-detail>p{padding-bottom:18px;font-size:15px}
.visual-scene-link{font-size:14px;font-weight:600;text-decoration:underline;text-decoration-thickness:var(--hair);text-underline-offset:6px}
.scene-check,.scene-draft,.scene-local-note,.scene-scope{font-size:13.5px;color:var(--ink-3)}

/* LAB: 60 + 30 minutes, set as figures. */
.class-time-block{display:grid;gap:14px;max-width:640px}
.class-time{display:grid;grid-template-columns:2fr 1fr;border-top:var(--hair) solid var(--ink)}
.class-time>div{display:grid;gap:6px;padding:18px 20px 20px 0;border-bottom:var(--hair) solid var(--line)}
.class-time>div+div{padding-left:20px;border-left:var(--hair) solid var(--line)}
.class-time span{font-size:13.5px;color:var(--ink-2)}
.class-time strong{font:300 clamp(48px,5vw,72px)/1 'SYNK Latin',var(--sans);letter-spacing:-.05em;color:var(--ink)}
.class-time>div:last-child strong{color:var(--accent)}
.class-time small{margin-left:4px;font:500 16px/1 var(--sans);letter-spacing:0;color:var(--ink-3)}
.class-time-note{font-size:13px;color:var(--ink-3)}

/* Evidence: three sources under one rule. */
.story-evidence{display:grid;gap:36px;margin-top:clamp(56px,6vw,88px)}
.story-evidence>header{display:grid;gap:14px;max-width:760px}
.story-evidence h3{font-size:clamp(22px,2vw,28px);letter-spacing:-.035em}
.story-evidence-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--gap);border-top:var(--hair) solid var(--ink)}
.story-evidence-grid>article{display:grid;align-content:start;gap:10px;padding:22px 24px 26px 0;border-bottom:var(--hair) solid var(--line)}
.story-evidence-grid>article+article{padding-left:24px;border-left:var(--hair) solid var(--line)}
.evidence-kind{font-size:12px;font-weight:600;color:var(--ink-3)}
.story-evidence-grid p{font-size:14.5px}
.story-evidence details{border-top:var(--hair) solid var(--line-soft);border-bottom:var(--hair) solid var(--line-soft)}
.story-evidence details>summary{min-height:44px;font-size:14px;font-weight:600}
.evidence-body{display:grid;gap:10px;padding-bottom:14px}
.evidence-body p{font-size:14px}

/* ── Business heroes ───────────────────────────────────────────────────── */
.worlds.site-worlds,#worlds:has(.shift-hero){padding-top:clamp(40px,5vw,80px)}
.lab-layout,.pulse-layout,.shift-hero,.path-hero{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:28px;align-items:center}
.lab-card--direction,.pulse-layout>.world-copy,.path-hero-copy,.shift-hero-heading{grid-column:1/span 6;display:grid;gap:24px;align-content:center}
.lab-card--direction h1,.pulse-layout h1,.path-hero-copy h1,.shift-hero-heading h1{font-size:clamp(40px,4.9vw,72px)}
.lab-card--direction>p,.pulse-layout .world-copy>p,.path-hero-copy>p,.shift-hero-details>p{font-size:clamp(16px,1.25vw,18px);max-width:34em}
.world-links{display:flex;flex-wrap:wrap;align-items:center;gap:10px 26px;margin-top:6px}
.lab-card__meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}
.lab-card__meta .eyebrow{display:flex;align-items:center;gap:16px}
.lab-patent-note a{display:inline-flex;flex-wrap:wrap;gap:4px 10px;font-size:13px;color:var(--ink-2)}
.lab-patent-note a span{color:var(--ink-3)}
.lab-patent-note a:hover{color:var(--ink)}
/* The first picture of a business page stands on a plate touched by that business's colour. */
.learning-scene,.pulse-scene,.path-hero-visual,.shift-hero-visual{grid-column:7/-1;margin:0}
.learning-scene{display:grid;gap:14px}
.learning-scene>button{display:grid;place-items:center;width:100%;aspect-ratio:1;border-radius:var(--radius);background:color-mix(in srgb,var(--accent) 7%,var(--plate))}
.learning-scene>button img{width:64%;height:auto}
.learning-scene figcaption{display:grid;gap:4px;font-size:13px;color:var(--ink-3)}
.learning-scene figcaption p{font-size:15px;color:var(--ink);line-height:1.5}
.learning-scene figcaption p br{display:none}
.learning-scene figcaption p strong{margin-left:4px}
.felt-interaction-feedback{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.shift-hero{grid-template-rows:auto auto}
/* Each business opens on its own colour. The field starts under the dock, so the dock is glass over it.
   The headline runs across the top, the words and buttons follow, and the felt object stands at the lower
   right as on a studio backdrop. The four pages keep their own markup: the wrappers step aside
   (display:contents) so every piece sits on one grid. */
#worlds:has(> :is(#lab,#shift,#pulse)){padding-top:0}
:is(#lab.lab-bento,#shift.shift-hero,#pulse.world-pulse,#path.path-hero){display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto auto clamp(28px,4.4vh,56px) auto auto minmax(28px,1fr) auto auto;column-gap:var(--gap);row-gap:0;align-items:start;width:auto;max-width:none;margin:calc(var(--field-inset) - var(--site-header-height,76px)) var(--field-inset) 0;padding:calc(var(--site-header-height,76px) + clamp(28px,4.4vh,64px)) calc(max(var(--gutter),(100% - var(--max)) / 2) - var(--field-inset)) clamp(24px,2.8vw,44px);border-radius:var(--field-radius);color:var(--on-field);background:var(--field-grain),var(--field-light),var(--field)}
/* On a landscape screen the field fills the window, less its inset above and below. */
@media (min-width:761px) and (min-aspect-ratio:1/1){:is(#lab.lab-bento,#shift.shift-hero,#pulse.world-pulse,#path.path-hero){min-height:clamp(600px,calc(100svh - 2 * var(--field-inset)),1000px)}}
:is(#lab .lab-layout,#lab .lab-card--direction,#shift .shift-hero-heading,#shift .shift-hero-details,#pulse .pulse-layout,#pulse .world-copy,#path .path-hero-copy){display:contents}
:is(#lab .lab-card__meta,#shift .stage-label,#pulse .world-heading,#path .stage-label){grid-column:1/-1;grid-row:1;margin:0 0 clamp(18px,2vw,28px)}
#pulse .world-heading{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px}
:is(#lab,#shift,#pulse,#path) :is(.eyebrow,.stage-label){color:var(--on-field-3)}
:is(#lab,#shift,#pulse,#path) .eyebrow::after{border-color:var(--on-field-line)}
/* Where each headline breaks: after 교육을, 위한, 이야기로 and 취업까지 (and after the matching words in English). */
#lab-title{--hero-measure:12.4em}
#shift-title{--hero-measure:9.4em}
#pulse-title{--hero-measure:9.6em}
#path-title{--hero-measure:10.4em}
html[lang="en"] #shift-title{--hero-measure:14.6em;--hero-size:clamp(38px,6vw,96px)}
html[lang="en"] #pulse-title{--hero-measure:11.6em}
html[lang="en"] #path-title{--hero-measure:12.6em}
:is(#lab-title,#shift-title,#pulse-title,#path-title){grid-column:1/-1;grid-row:2;max-width:var(--hero-measure);font-size:var(--hero-size,clamp(40px,7.4vw,120px));line-height:.98;letter-spacing:-.05em;font-weight:300;color:var(--on-field)}
:is(#lab-title,#shift-title,#pulse-title,#path-title)::first-line{font-weight:700}
:is(#lab,#shift,#pulse,#path) [data-vision-subtext]{grid-column:1/span 5;grid-row:4;max-width:30em;font-size:clamp(16px,1.2vw,18px);line-height:1.66;color:var(--on-field-2)}
/* The first sentence reads as the lead under the headline; the rest waits at the foot of the field, smaller. */
:is(#lab,#shift,#pulse,#path) [data-vision-subtext]:has(> .hero-lead){display:contents}
:is(#lab,#shift,#pulse,#path) .hero-lead{grid-column:1/span 5;grid-row:4;display:block;max-width:24em;font-size:clamp(18px,1.55vw,22px);line-height:1.45;font-weight:500;letter-spacing:-.02em;color:var(--on-field)}
:is(#lab,#shift,#pulse,#path) .hero-more{grid-column:1/span 5;grid-row:7;align-self:end;display:block;max-width:31em;margin-top:18px;font-size:15px;line-height:1.65;color:var(--on-field-2)}
:is(#lab,#shift,#pulse,#path) .world-links{grid-column:1/span 5;grid-row:5;margin-top:26px}
#lab .lab-patent-note{grid-column:1/span 5;grid-row:8;align-self:end;margin-top:12px}
:is(#lab .learning-scene,#shift .shift-hero-visual,#pulse .pulse-scene,#path .path-hero-visual){grid-column:7/-1;grid-row:4/-1;align-self:end;justify-self:end;display:grid;grid-template-rows:none;justify-items:end;gap:16px;margin:0}
/* The object's height follows the window, so the buttons stay on the first screen of a laptop. */
:is(#shift .shift-hero-visual,#pulse .pulse-scene,#path .path-hero-visual)>img{grid-area:auto;width:auto;height:auto;max-width:min(100%,640px);max-height:max(240px,var(--hero-object,42svh));aspect-ratio:auto;padding:0;object-fit:contain}
#shift{--hero-object:46svh}
#lab .learning-scene>button{width:auto;max-width:100%;aspect-ratio:auto;justify-items:end;border-radius:0;background:none}
#lab .learning-scene{gap:30px}
#lab .learning-scene>button img{width:auto;height:auto;max-width:min(100%,640px);max-height:max(240px,40svh);filter:drop-shadow(0 22px 24px rgba(120,22,12,.3)) drop-shadow(0 6px 10px rgba(90,14,8,.2))}
:is(#lab .learning-scene,#pulse .pulse-scene,#path .path-hero-visual) figcaption{grid-row:auto;justify-items:end;text-align:right;font-size:13px;color:var(--on-field-3)}
#lab .learning-scene figcaption :is(p,strong){color:var(--on-field)}
:is(#lab,#shift,#pulse,#path) .primary-link{background:var(--field-button);color:var(--field-button-ink)}
:is(#lab,#shift,#pulse,#path) .quiet-link{color:var(--on-field);text-decoration-color:var(--on-field-line)}
:is(#lab,#shift,#pulse,#path) .quiet-link:hover{text-decoration-color:var(--on-field)}
:is(#lab,#shift,#pulse,#path,.orb-chamber) :is(.primary-link,.quiet-link) span{opacity:1}
#lab .lab-patent-note a{color:var(--on-field-2)}
#lab .lab-patent-note a span{color:var(--on-field-3)}
.shift-hero-heading{grid-row:1;align-self:end}
.shift-hero-visual{grid-row:1/span 2}
.shift-hero-details{grid-column:1/span 6;grid-row:2;align-self:start;display:grid;gap:22px;align-content:start}
.world-pulse>.world-heading{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin-bottom:clamp(20px,2.4vw,32px)}
.world-pulse>.world-heading::after{content:"";flex:1;min-width:40px;border-top:var(--hair) solid var(--line)}
.pulse-layout>.pulse-scene{grid-column:7/-1;grid-row:1}
.pulse-layout>.world-copy{grid-row:1}

/* ── LAB: personalisation, practice, curriculum, patent ────────────────── */
.lab-personalization{display:grid;gap:clamp(40px,4.4vw,64px)}
.lab-overview-heading{display:grid;gap:20px;max-width:840px}
.lab-overview-heading h2{font-size:clamp(28px,3vw,44px)}
.lab-benefits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--gap);border-top:var(--hair) solid var(--ink)}
.lab-benefit{display:grid;align-content:start;gap:10px;padding:24px 24px 26px 0;border-bottom:var(--hair) solid var(--line)}
.lab-benefit+.lab-benefit{padding-left:24px;border-left:var(--hair) solid var(--line)}
.lab-step{font:400 11px/1.4 var(--mono);letter-spacing:.08em;color:var(--ink-3)}
.lab-benefit h3{font-size:19px}
.lab-benefit p{font-size:15px}
.lab-benefit details{margin-top:4px;border-top:var(--hair) solid var(--line-soft)}
.lab-benefit summary{min-height:48px;font-size:14px;font-weight:600}
.lab-benefit details ul{display:grid;gap:8px;padding-bottom:6px}
.lab-benefit details li{position:relative;padding-left:14px;font-size:14px;line-height:1.65;color:var(--ink-2)}
.lab-benefit details li::before{content:"";position:absolute;left:0;top:.8em;width:5px;border-top:var(--hair) solid var(--ink-3)}
.lab-try{display:grid;gap:32px;padding:clamp(32px,4.4vw,64px);border-radius:var(--radius);background:var(--wash)}
.lab-try-heading{display:grid;gap:16px;max-width:760px}
.lab-try-heading h3{font-size:clamp(26px,2.6vw,38px);letter-spacing:-.04em;line-height:1.2}
.lab-try-layout{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:28px;align-items:end}
.lab-try-guide{grid-column:1/span 7;display:grid;gap:16px}
.lab-try-guide ol{display:grid;counter-reset:try;border-top:var(--hair) solid var(--line)}
.lab-try-guide li{display:grid;grid-template-columns:36px 1fr;column-gap:8px;padding:14px 0;border-bottom:var(--hair) solid var(--line);counter-increment:try}
.lab-try-guide li::before{content:counter(try,decimal-leading-zero);grid-row:1/span 2;font:400 11px/1.9 var(--mono);color:var(--ink-3)}
.lab-try-guide li strong{font-size:15.5px}
.lab-try-guide li p{font-size:14px}
.lab-try-scope{font-size:13px;color:var(--ink-3)}
.lab-try-launch{grid-column:9/-1;display:grid;gap:12px;justify-items:start}
.lab-try-launch p{font-size:13px;color:var(--ink-3)}
.lab-try-layout:has(.lab-try-screen){align-items:start}
.lab-try-layout:has(.lab-try-screen)>.lab-try-guide{grid-column:1/span 4;position:sticky;top:calc(var(--site-header-height,76px) + 24px)}
.lab-try-screen{grid-column:5/-1;display:grid;gap:12px}
.lab-try-screen iframe{display:block;width:100%;border:0;border-radius:22px;background:#fff;box-shadow:0 0 0 .5px rgba(10,10,10,.1)}
.lab-try-status{font-size:13px;color:var(--ink-3)}
.lab-try-footer{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 20px;font-size:13px;color:var(--ink-3)}
.lab-try-footer p{font-size:13px}
.lab-try-footer a{display:inline-flex;align-items:center;min-height:40px;font-weight:600;color:var(--ink);text-decoration:underline;text-decoration-thickness:var(--hair);text-underline-offset:5px}
.lab-feedback-preview{border-top:var(--hair) solid var(--line);border-bottom:var(--hair) solid var(--line)}
.lab-feedback-preview>summary{min-height:64px;font-size:16px;font-weight:600}
.lab-feedback-preview[open]>summary{border-bottom:var(--hair) solid var(--line-soft)}
.lab-tracking-wrap{padding:28px 0 36px}
.lab-patent{display:grid;grid-template-columns:auto 1fr;align-items:baseline;gap:6px 18px;padding:18px 22px;border-radius:var(--radius-s);background:var(--wash)}
.lab-patent h3{font-size:15px}
.lab-patent p{font-size:13.5px}

.lab-card--curriculum{display:grid;gap:28px}
.lab-curriculum__intro{display:grid;gap:18px;max-width:840px}
.lab-card__status{font-size:12px;font-weight:600;color:var(--accent-ink)}
.lab-card__title{font-size:clamp(30px,3.5vw,52px)}
.lab-card__description{font-size:clamp(16px,1.25vw,18px)}
.lab-card__description br{display:none}
.lab-curriculum-fold{border-top:var(--hair) solid var(--line);border-bottom:var(--hair) solid var(--line)}
.lab-curriculum-fold>summary{min-height:64px;font-size:16px;font-weight:600}
.lab-curriculum__steps{display:grid;gap:18px;padding:12px 0 32px}
.roadmap-nav{display:inline-flex;flex-wrap:wrap;justify-self:start;gap:2px;padding:4px;border-radius:999px;background:var(--wash)}
.roadmap-nav a{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border-radius:999px;font-size:13.5px;font-weight:600;color:var(--ink-2)}
.roadmap-nav a[aria-current]{color:var(--ink);background:#fff;box-shadow:0 0 0 .5px rgba(10,10,10,.12),0 2px 8px -3px rgba(10,10,10,.25)}
.roadmap-context{display:grid;gap:4px;padding:16px 18px;border-radius:14px;background:var(--wash);max-width:520px}
.roadmap-context p{font-size:14px}
.roadmap-context small{font-size:12px;color:var(--ink-3)}
.lab-curriculum__heading{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px}
.lab-curriculum__heading strong{font-size:18px}
.lab-curriculum__count{margin-left:6px;font:400 12px/1 var(--mono);color:var(--ink-3)}
.lab-curriculum__heading>span{font-size:13.5px;color:var(--ink-3)}
.lab-curriculum__instruction,.lab-curriculum__note{font-size:14.5px}
.lab-volumes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--gap);border-top:var(--hair) solid var(--ink)}
.lab-volume{display:grid;gap:8px;padding:18px 18px 20px 0;border-bottom:var(--hair) solid var(--line)}
.lab-volume.is-roadmap-current{background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 8%,transparent),transparent 70%)}
/* The conversation book that goes with the chosen core volume. */
.lab-talks>li.is-talk-paired{background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 8%,transparent),transparent 70%)}
.lab-talks>li.is-talk-paired strong{color:var(--accent-ink)}
.lab-volume__heading{display:flex;align-items:baseline;gap:12px}
.lab-volume__number{font:400 11px/1 var(--mono);letter-spacing:.06em;color:var(--ink-3)}
.lab-volume__level{font-size:13px;font-weight:600;color:var(--accent-ink)}
.lab-volume__body p{font-size:15px;color:var(--ink-2)}
.lab-volume__body strong{display:block;font-size:16px}
.lab-talks{display:grid;gap:10px;margin-top:10px}

/* The tracker preview inside the fold keeps its tabs readable and its hidden parts hidden. */
.lab-card--tracking{display:grid;gap:22px}
.lab-tracking__intro{display:grid;gap:12px;max-width:760px}
.lab-card--tracking .lab-card__title{font-size:clamp(22px,2.2vw,30px)}
.lab-card--tracking .lab-card__title br{display:none}
.lab-tracker{display:grid;gap:18px;padding:clamp(20px,3vw,36px);border-radius:var(--radius);background:var(--wash)}
.lab-tracker__tabs{display:inline-flex;flex-wrap:wrap;justify-self:start;gap:2px;padding:4px;border-radius:999px;background:#fff}
.lab-tracker__tabs button{min-height:38px;padding:0 16px;border-radius:999px;font-size:13.5px;font-weight:600;color:var(--ink-2)}
.lab-tracker__tabs button[aria-selected="true"]{color:#fff;background:var(--ink)}
.lab-tracker__journey{display:none}
[data-learning-enhanced] .lab-tracker__journey{display:block;position:relative}
.lab-tracker__line{fill:none;stroke:var(--accent-ink);stroke-width:1.5;stroke-dasharray:1;stroke-dashoffset:1}
.lab-tracker__rail{fill:none;stroke:var(--line);stroke-width:1}
.lab-tracker__panel{display:grid;gap:12px;padding:20px;border-radius:18px;background:#fff}
.lab-tracker__summary,.lab-tracker__caption,.lab-tracker__footnote,.lab-tracker__explanation,.lab-tracker__situation{font-size:14px;color:var(--ink-2)}
.lab-tracker__seal{font-size:12px;color:var(--ink-3)}
.lab-data-record,.lab-data-instruction{font-size:14px;color:var(--ink-2)}
.next-choice button{min-height:36px;padding:0 14px;border-radius:999px;background:#fff;font-size:13.5px;box-shadow:0 0 0 .5px rgba(10,10,10,.14)}
.next-choice button[aria-pressed="true"]{background:var(--ink);color:#fff}
[data-learning-node].is-current{color:var(--accent-ink);font-weight:700}
[data-learning-node].is-complete{color:var(--ink)}

/* ── SHIFT: the four-step workshop ─────────────────────────────────────── */
.shift-workflow{display:grid;gap:clamp(32px,3.6vw,48px)}
.shift-workflow__heading{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:18px;align-items:end}
.shift-workflow__heading>div{grid-column:1/span 7;display:grid;gap:20px}
.shift-workflow__heading>p{grid-column:8/-1;font-size:15.5px}
.shift-workflow__heading .eyebrow{font:600 13px/1.4 var(--sans);letter-spacing:-.01em;text-transform:none;color:var(--ink-3);display:flex;align-items:center;gap:16px}
.shift-workflow__heading .eyebrow::after{content:"";flex:1;border-top:var(--hair) solid var(--line)}
html[lang="en"] .shift-workflow__heading .eyebrow{font:400 11px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.shift-workflow__steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;padding:4px;border-radius:22px;background:var(--wash)}
.shift-workflow__steps a{display:flex;align-items:center;gap:12px;min-height:56px;padding:0 18px;border-radius:18px;font-size:15px;font-weight:600;letter-spacing:-.015em;color:var(--ink-2);transition:color var(--fast) var(--ease),background-color var(--fast) var(--ease),box-shadow var(--fast) var(--ease)}
.shift-workflow__steps a:hover{color:var(--ink)}
.shift-workflow__steps a[aria-selected="true"]{color:var(--ink);background:linear-gradient(180deg,#fff,rgba(255,255,255,.88));box-shadow:inset 0 1px 0 #fff,0 0 0 .5px rgba(10,10,10,.12),0 4px 12px -5px rgba(10,10,10,.3)}
.shift-workflow__number{font:400 11px/1 var(--mono);letter-spacing:.06em;color:var(--ink-3)}
.shift-workflow__steps a[aria-selected="true"] .shift-workflow__number{color:var(--accent-ink)}
.shift-workflow__panels{display:grid}
[data-workflow-ready] .shift-workflow__panels>.shift-workflow__panel{grid-area:1/1}
@media (min-width:761px){[data-workflow-ready] .shift-workflow__panels>.shift-workflow__panel[hidden]{display:grid!important;visibility:hidden}}
.shift-workflow__panel{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:28px;align-items:start}
.shift-workflow__explanation{grid-column:1/span 5;display:grid;gap:16px;padding-top:12px}
.shift-workflow__kicker{font-size:13px;font-weight:600;color:var(--accent-ink)}
.shift-workflow__explanation h3{font-size:clamp(24px,2.3vw,32px);letter-spacing:-.04em;line-height:1.22}
.shift-workflow__task{padding:14px 16px;border-radius:14px;background:var(--wash);font-size:14px;color:var(--ink)}
.shift-workflow__artifact{grid-column:7/-1;display:grid;gap:16px;padding:22px;border-radius:var(--radius);background:var(--wash)}
.shift-workflow__artifact-heading{display:flex;align-items:baseline;gap:12px}
.shift-workflow__artifact-index{font:400 11px/1 var(--mono);color:var(--ink-3)}
.shift-workflow__artifact-heading :is(h4,label){font-size:15px;font-weight:650}
.shift-workflow__stage{position:relative;display:grid;place-items:center;border-radius:18px;background:#fff;overflow:hidden}
.shift-workflow__stage :is(img,canvas){width:min(100%,420px);height:auto}
.shift-workflow__facts{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0}
.shift-workflow__facts div{display:grid;gap:2px}
.shift-workflow__facts dt{font-size:12px;color:var(--ink-3)}
.shift-workflow__facts dd{margin:0;font-size:14.5px;font-weight:600}
.shift-workflow__controls{display:flex;flex-wrap:wrap;gap:4px 18px}
.shift-workflow__controls button{min-height:36px;font-size:13.5px}
.shift-workflow__controls button[aria-pressed="true"]{text-decoration-color:var(--ink)}
.shift-workflow__artifact [role="status"]{font-size:12.5px;color:var(--ink-3)}
.shift-workflow__request textarea{width:100%;min-height:220px;padding:18px;border:0;border-radius:16px;background:#fff;font-size:15px;line-height:1.7;resize:vertical;box-shadow:inset 0 0 0 .5px rgba(10,10,10,.14)}
.shift-workflow__request textarea:focus{outline:2px solid var(--ink);outline-offset:2px}
.shift-workflow__request-footer{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px}
.shift-workflow__request-footer p{font-size:13px}
.shift-workflow__request-footer p br{display:none}
.shift-workflow__comparison{grid-template-columns:1fr 1fr}
.shift-workflow__comparison>.shift-workflow__artifact-heading,.shift-workflow__comparison>p,.shift-workflow__comparison-note{grid-column:1/-1}
.shift-workflow__comparison figure{display:grid;gap:8px;margin:0}
.shift-workflow__comparison figure img{width:100%;border-radius:14px;background:#fff}
.shift-workflow__comparison figcaption{font-size:12.5px;color:var(--ink-3)}
.shift-workflow__comparison-note,.shift-workflow__note{font-size:13px;color:var(--ink-3)}
.shift-workflow__revision{display:grid;gap:10px}
.shift-workflow__revision p{font-size:14.5px;color:var(--ink)}
.practice-link{margin-top:32px}
.brand-proof,.brand-proof-divisions,.brand-proof-parent{display:grid;gap:12px}
.work-design-note{padding-top:48px}
.brand-story{border-top:var(--hair) solid var(--line);border-bottom:var(--hair) solid var(--line)}
.brand-story>summary{min-height:72px;font-size:15px;font-weight:600}
.brand-story>summary strong{font-size:17px;letter-spacing:-.02em}
.brand-proof{grid-template-columns:1fr 3fr;align-items:center;gap:24px;padding:24px;border-radius:var(--radius-s);background:var(--wash)}
.brand-proof-parent img{width:100%;max-width:220px}
.brand-proof-divisions{grid-template-columns:repeat(3,1fr);gap:16px}
.brand-proof-divisions img{width:100%;height:auto}
.brand-story-layout>div:not(.brand-proof){display:grid;gap:12px}
.brand-story-layout{display:grid;gap:14px;padding-bottom:28px;max-width:60em}
.details-plus{display:grid;place-items:center;width:28px;height:28px;border-radius:999px;background:var(--plate)}

/* ── PULSE ─────────────────────────────────────────────────────────────── */
.pulse-content-heading,.pulse-advertising-heading{max-width:840px}
.pulse-content-gallery{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--gap);row-gap:40px;margin-top:clamp(40px,4.4vw,64px)}
.pulse-content-piece{display:grid;gap:22px;align-content:start}
.pulse-content-media{margin:0;border-radius:var(--radius);overflow:hidden}
.pulse-content-radio{display:grid}
.pulse-content-radio img{width:100%;aspect-ratio:4/3;object-fit:cover}
.pulse-content-radio figcaption{padding:12px 18px 14px;font-size:12.5px;color:var(--ink-3);background:var(--paper)}
.pulse-content-cast{display:grid;grid-template-columns:repeat(3,1fr);align-items:end;aspect-ratio:4/3;padding:8% 6% 6%}
.pulse-content-cast figure{display:grid;justify-items:center;gap:10px;margin:0}
.pulse-content-cast img{width:88%;height:auto}
.pulse-content-cast figcaption{font-size:12.5px;color:var(--ink-3)}
.pulse-content-copy{display:grid;gap:10px}
.pulse-content-category{font:400 11px/1.4 var(--mono);letter-spacing:.1em;color:var(--ink-3)}
.pulse-content-copy h3{font-size:clamp(22px,2vw,28px);letter-spacing:-.035em}
.pulse-content-link{justify-self:start}
.pulse-advertising{display:grid;row-gap:clamp(40px,4.4vw,64px)}
.pulse-advertising-intro{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:40px;align-items:center}
.pulse-advertising-intro>.story-heading{grid-column:1/span 6}
.pulse-advertising-visual{grid-column:7/-1;margin:0}
.pulse-advertising-options{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--gap);border-top:var(--hair) solid var(--ink)}
.pulse-advertising-option{display:grid;align-content:start;gap:10px;padding:24px 24px 26px 0;border-bottom:var(--hair) solid var(--line)}
.pulse-advertising-option+.pulse-advertising-option{padding-left:24px;border-left:var(--hair) solid var(--line)}
.pulse-advertising-brand{font:400 11px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.pulse-advertising-option h3{font-size:19px}
.pulse-advertising-link{justify-self:start;font-size:14px;font-weight:600;text-decoration:underline;text-decoration-thickness:var(--hair);text-underline-offset:6px}
.pulse-advertising-note,.pulse-advertising-intro{font-size:13px;color:var(--ink-3)}
.selected-work{display:grid;gap:28px}
.section-kicker .eyebrow{display:flex;align-items:center;gap:16px}
.section-kicker .eyebrow::after{content:"";flex:1;border-top:var(--hair) solid var(--line)}
.section-intro{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:12px 32px}
.section-intro p{font-size:15.5px}
.work-grid{display:grid}
.work-card{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:center;padding:clamp(20px,2.4vw,32px);border-radius:var(--radius);background:var(--wash);transition:background-color var(--fast) var(--ease)}
.work-card:hover{background:var(--wash-2)}
.work-visual{grid-column:1/span 5;display:grid;place-items:center;aspect-ratio:4/3;border-radius:20px;background:#fff}
.work-visual img{width:62%;height:auto;mix-blend-mode:multiply}
.work-body{grid-column:7/-1;display:grid;gap:14px}
.work-meta{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center}
.service-state{padding:5px 10px;border-radius:999px;background:#fff;font-size:12px;font-weight:600}
.work-body h3{font-size:clamp(22px,2vw,28px);letter-spacing:-.035em}
.work-action{display:inline-flex;align-items:center;gap:8px;justify-self:start;min-height:44px;padding:0 20px;border-radius:999px;background:var(--accent-ink);color:#fff;font-size:14.5px;font-weight:600}
.world-copy .quiet-link{background:none}

@media (max-width:1100px){
 .story-purpose>*,.story-purpose>p{grid-column:1/-1}
 .story-introduction>.story-heading,.story-section--visual .story-introduction>.story-heading{grid-column:1/-1}
 .story-visual{grid-column:1/-1;max-width:560px}
 .visual-scene-art{grid-column:1/span 6}
 .visual-scene-copy{grid-column:7/-1}
 .lab-card--direction,.pulse-layout>.world-copy,.path-hero-copy,.shift-hero-heading,.shift-hero-details{grid-column:1/span 7}
 .learning-scene,.pulse-scene,.path-hero-visual,.shift-hero-visual,.pulse-layout>.pulse-scene{grid-column:8/-1}
 .lab-try-guide,.lab-try-layout:has(.lab-try-screen)>.lab-try-guide{grid-column:1/-1;position:static}
 .lab-try-launch,.lab-try-screen{grid-column:1/-1}
 .lab-volumes{grid-template-columns:repeat(2,minmax(0,1fr))}
 .shift-workflow__heading>div,.shift-workflow__heading>p{grid-column:1/-1}
 .shift-workflow__explanation{grid-column:1/-1}
 .shift-workflow__artifact{grid-column:1/-1}
 .pulse-advertising-intro>.story-heading,.pulse-advertising-visual{grid-column:1/-1}
 .pulse-advertising-visual{max-width:640px}
}
@media (max-width:760px){
 .story-items,.story-items--three,.story-items--four,.story-evidence-grid,.lab-benefits,.pulse-advertising-options{grid-template-columns:1fr}
 .story-items>article,.story-items>article+article,.story-evidence-grid>article,.story-evidence-grid>article+article,.lab-benefit,.lab-benefit+.lab-benefit,.pulse-advertising-option,.pulse-advertising-option+.pulse-advertising-option{padding-left:0;padding-right:0;border-left:0}
 .visual-scene-art,.visual-scene-copy{grid-column:1/-1}
 .lab-layout,.pulse-layout,.shift-hero,.path-hero{row-gap:24px}
 .lab-card--direction,.pulse-layout>.world-copy,.path-hero-copy,.shift-hero-heading,.shift-hero-details,.learning-scene,.pulse-scene,.path-hero-visual,.shift-hero-visual,.pulse-layout>.pulse-scene{grid-column:1/-1;grid-row:auto}
 .pulse-layout>.pulse-scene{order:2}
 .shift-hero-visual{order:2}
 .shift-hero-details{order:3}
 .shift-workflow__steps{grid-template-columns:1fr 1fr}
 [data-workflow-ready] .shift-workflow__panels>.shift-workflow__panel[hidden]{display:none!important}
 .shift-workflow__comparison{grid-template-columns:1fr}
 .pulse-content-gallery{grid-template-columns:1fr}
 .work-visual,.work-body{grid-column:1/-1}
 .work-body{margin-top:20px}
 .lab-volumes{grid-template-columns:1fr}
 .class-time strong{font-size:52px}
 .lab-patent{grid-template-columns:1fr}
 .visual-scene-nav{border-radius:22px}
}

/* ── Wide to narrow ────────────────────────────────────────────────────── */
@media (max-width:1100px){
 .hero-copy>p{grid-column:1/span 7}
 .hero-actions{grid-column:1/-1;justify-self:start}
 .atlas-brief-copy,.atlas-brief-map{grid-column:1/-1}
 .atlas-brief-map svg{max-width:460px}
 .company-intro-text,.company-process{grid-column:1/-1}
 .principle-row h3{grid-column:2/span 11}
 .principle-row p{grid-column:2/span 11;margin-top:10px}
 .orb-heading{grid-column:1/span 7}
 .orb-stage{grid-column:8/-1}
 .suggestions{grid-template-columns:repeat(2,minmax(0,1fr))}
 .site-family{grid-template-columns:repeat(3,minmax(0,1fr))}
 .site-family a:nth-child(4){padding-left:0;border-left:0}
}
@media (max-width:640px){
 :root{--radius:22px;--radius-s:16px}
 .hero-copy>p{grid-column:1/-1}
 .hero-copy{row-gap:22px}
 .atlas-brief-map{padding:40px 12px 20px}
 .principle-row{grid-template-columns:32px 1fr;column-gap:12px;padding:22px 0 24px}
 .principle-row::before{grid-column:1}
 .principle-row h3,.principle-row p{grid-column:2}
 .orb-chamber{padding:32px 20px 24px}
 .orb-heading,.orb-stage{grid-column:1/-1}
 .orb-stage{margin-top:32px}
 .orb-launch{width:min(240px,72vw)}
 .suggestions{grid-template-columns:1fr}
 .site-family{grid-template-columns:1fr 1fr}
 .site-family a,.site-family a+a{padding:0 12px 0 0;border-left:0}
 .site-family a:nth-child(even){padding-left:14px;border-left:var(--hair) solid var(--line)}
 .footer-links{margin-left:0}
 .document-content,.document-top,.document-footer{padding-inline:20px}
}

/* ── Chapter bands, scene cards, rhythm (v9) ───────────────────────────── */
/* Once or twice in the middle of a page a whole section stands on the business colour, as the first screen
   does: its heading on the colour, its working parts on white paper. LAB's AI chapter uses the 7% wash. */
:is(#lab-class,#lab-ai,#shift-delivery,#pulse-studio,#pulse-content,#path-journey).story-section{width:auto;max-width:none;margin:calc(var(--section) + 40px) var(--field-inset) 0;padding:clamp(56px,6.4vw,104px) calc(max(var(--gutter),(100% - var(--max)) / 2) - var(--field-inset));border-radius:var(--field-radius)}
:is(#lab-class,#lab-ai,#shift-delivery,#pulse-studio,#pulse-content,#path-journey).story-section{color:var(--on-field);background:var(--field-grain),var(--field-light),var(--field)}
:is(#lab-class,#lab-ai,#shift-delivery,#pulse-studio,#pulse-content,#path-journey)+:is(section,div){padding-top:calc(var(--section) + 40px)}
:is(#lab-class,#lab-ai,#shift-delivery,#pulse-studio,#pulse-content,#path-journey) .story-heading>.small-label{color:var(--on-field-3)}
:is(#lab-class,#lab-ai,#shift-delivery,#pulse-studio,#pulse-content,#path-journey) .story-heading>.small-label::after{border-color:var(--on-field-line)}
:is(#lab-class,#lab-ai,#shift-delivery,#pulse-studio,#pulse-content,#path-journey) .story-heading :is(h2,p){color:var(--on-field)}
:is(#lab-class,#lab-ai,#shift-delivery,#pulse-studio,#pulse-content,#path-journey) .story-heading>p{color:var(--on-field-2)}
:is(#lab-class,#lab-ai,#shift-delivery,#pulse-studio,#pulse-content,#path-journey)>.story-note,:is(#lab-class,#lab-ai,#shift-delivery,#pulse-studio,#pulse-content,#path-journey) .story-feature>.story-note{color:var(--on-field-3)}
/* Working parts on paper inside a band. */
:is(#lab-class,#lab-ai,#path-journey) :is(.story-details,.visual-explainer:not(.visual-explainer--cards)){padding:clamp(18px,2.2vw,32px);border-radius:var(--radius);background:var(--paper);color:var(--ink)}
:is(#lab-class,#lab-ai,#path-journey) .story-details{padding-block:4px;border-top:0}
:is(#lab-class,#lab-ai,#path-journey) .story-details details:last-child{border-bottom:0}
#lab-ai .story-continuation{background:var(--paper);color:var(--ink)}
/* SHIFT: the three steps on lapis. */
:is(#shift-delivery,#lab-ai) .story-items{border-top-color:var(--on-field-line)}
:is(#shift-delivery,#lab-ai) .story-items>article{border-color:var(--on-field-line)}
:is(#shift-delivery,#lab-ai) .story-items :is(h3,p,summary){color:var(--on-field)}
:is(#shift-delivery,#lab-ai) .story-items p{color:var(--on-field-2)}
:is(#shift-delivery,#lab-ai) .story-index{color:var(--on-field-3)}
#lab-ai .story-items .story-preview{color:var(--on-field-2)}
#lab-ai .story-items details[open] :is(p,li){color:var(--on-field)}
/* PULSE content on berry: the radio scene and the three friends standing on the colour. */
#pulse-content .pulse-content-copy :is(h3,p,a,span){color:var(--on-field)}
#pulse-content .pulse-content-copy p{color:var(--on-field-2)}
#pulse-content .pulse-content-category{color:var(--on-field-3)}
#pulse-content .quiet-link{text-decoration-color:var(--on-field-line)}
#pulse-content .pulse-content-media figcaption{color:var(--on-field-3)}
#pulse-content .pulse-content-cast{aspect-ratio:auto;padding:0;column-gap:4%}
#pulse-content .pulse-content-cast img{width:100%;filter:drop-shadow(0 18px 22px var(--field-shadow))}
/* LAB 90 minutes: the grouped half hour is the one big number of the page. */
#lab-class .class-time-block{max-width:none}
#lab-class .class-time{grid-template-columns:auto auto;justify-content:start;align-items:end;border-top:var(--hair) solid var(--on-field-line)}
#lab-class .class-time>div{padding:18px 0 0;border-bottom:0}
#lab-class .class-time>div+div{padding-left:clamp(32px,5vw,88px);margin-left:clamp(32px,5vw,88px);border-left:var(--hair) solid var(--on-field-line)}
#lab-class .class-time span,#lab-class .class-time small,#lab-class .class-time-note{color:var(--on-field-2)}
#lab-class .class-time strong{font-size:clamp(56px,6.6vw,96px);color:var(--on-field)}
#lab-class .class-time>div:last-child strong{font-size:clamp(112px,15.2vw,220px);line-height:.84;letter-spacing:-.06em;color:var(--on-field)}
#lab-class .class-time>div:last-child small{font-size:clamp(20px,2vw,30px)}

/* Scene cards: every scene of an explorer side by side instead of one behind tabs. */
.visual-explainer--cards .visual-scene-panels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);align-items:stretch}
.visual-explainer--cards .visual-scene{display:flex;flex-direction:column;gap:0;border-radius:var(--radius);background:var(--paper);box-shadow:inset 0 0 0 var(--hair) var(--line);overflow:hidden;color:var(--ink)}
.visual-explainer--cards .visual-scene-art{width:100%;aspect-ratio:4/3;border-radius:0}
.visual-explainer--cards .visual-scene-art img{width:74%}
.visual-explainer--cards .visual-scene-art--landscape img{width:100%}
.visual-explainer--cards .visual-scene-copy{display:grid;gap:12px;align-content:start;padding:6px clamp(18px,1.7vw,28px) clamp(20px,1.9vw,30px)}
.visual-explainer--cards .visual-scene-copy{grid-template-columns:auto 1fr;column-gap:12px}
.visual-explainer--cards .visual-scene-copy>:not(.visual-scene-number,.visual-scene-name){grid-column:1/-1}
.visual-explainer--cards .visual-scene-name{align-self:center;font:600 13px/1.4 var(--sans);letter-spacing:-.01em;color:var(--accent-ink)}
html[lang="en"] .visual-explainer--cards .visual-scene-name{font:400 11px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.visual-explainer--cards>.visual-explainer-guide{margin-bottom:-6px}
#lab-class .visual-explainer--cards>.visual-explainer-guide{margin-top:clamp(28px,3.4vw,52px);color:var(--on-field-2)}
#lab-class .visual-explainer--cards .visual-scene-panels{margin-top:18px}
.visual-explainer--cards .visual-scene-copy h3{font-size:clamp(20px,1.7vw,25px)}
.visual-explainer--cards .visual-scene-summary{font-size:15.5px}
.visual-explainer--cards .visual-scene-example{margin-top:2px}
#lab-class .visual-explainer--cards .visual-scene{box-shadow:none}

/* LAB scene sections as a split: the reading column on the left, the felt object on the right. */
@media (min-width:1101px){
 :is(#lab-year,#lab-languages,#lab-culture,#lab-ai-practice):has(.visual-explainer.is-interactive){display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:start}
 :is(#lab-year,#lab-languages,#lab-culture,#lab-ai-practice):has(.visual-explainer.is-interactive) :is(.story-feature,.visual-explainer,.visual-scene-panels,.visual-scene){display:contents}
 :is(#lab-year,#lab-languages,#lab-culture,#lab-ai-practice):has(.visual-explainer.is-interactive) .section-alias{position:absolute}
 :is(#lab-year,#lab-languages,#lab-culture,#lab-ai-practice):has(.visual-explainer.is-interactive)>.story-feature>.story-introduction{display:block;grid-column:1/span 6;grid-row:1}
 :is(#lab-year,#lab-languages,#lab-culture,#lab-ai-practice):has(.visual-explainer.is-interactive)>.story-feature>.visual-explainer>.visual-explainer-guide{grid-column:1/span 6;grid-row:2;margin-top:36px}
 :is(#lab-year,#lab-languages,#lab-culture,#lab-ai-practice):has(.visual-explainer.is-interactive)>.story-feature>.visual-explainer>.visual-scene-nav{grid-column:1/span 6;grid-row:3;justify-self:start;margin-top:12px}
 :is(#lab-year,#lab-languages,#lab-culture,#lab-ai-practice):has(.visual-explainer.is-interactive)>.story-feature .visual-scene>.visual-scene-copy{grid-column:1/span 6;grid-row:4;margin-top:36px}
 :is(#lab-year,#lab-languages,#lab-culture,#lab-ai-practice):has(.visual-explainer.is-interactive)>.story-details{grid-column:1/span 6;grid-row:5;display:block;margin-top:44px}
 :is(#lab-year,#lab-languages,#lab-culture,#lab-ai-practice):has(.visual-explainer.is-interactive)>.story-note{grid-column:1/span 6;grid-row:6;margin-top:18px}
 :is(#lab-year,#lab-languages,#lab-culture,#lab-ai-practice):has(.visual-explainer.is-interactive)>.story-evidence{grid-column:1/-1;grid-row:7;margin-top:72px}
 :is(#lab-year,#lab-languages,#lab-culture,#lab-ai-practice):has(.visual-explainer.is-interactive)>.story-continuation{grid-column:1/span 6;grid-row:8}
 :is(#lab-year,#lab-languages,#lab-culture,#lab-ai-practice):has(.visual-explainer.is-interactive)>.story-feature .visual-scene>.visual-scene-art{grid-column:8/-1;grid-row:1/7;position:sticky;top:calc(var(--site-header-height,76px) + 32px);width:100%;aspect-ratio:1}
 :is(#lab-year,#lab-languages,#lab-culture,#lab-ai-practice):has(.visual-explainer.is-interactive)>.story-feature .visual-scene>.visual-scene-art img{width:96%}
}
#pulse-content .pulse-content-radio figcaption{padding:12px 2px 0;background:none}
/* PULSE ad & model video: the AI models on berry, the formats under them, the client brief on white. */
#pulse-studio .story-items{border-top-color:var(--on-field-line)}
#pulse-studio .story-items>article{border-color:var(--on-field-line)}
#pulse-studio .story-items :is(h3,p){color:var(--on-field)}
#pulse-studio .story-items p{color:var(--on-field-2)}
#pulse-studio .story-index{color:var(--on-field-3)}
.pulse-models{display:grid;gap:24px;margin-top:clamp(48px,5.4vw,84px)}
.pulse-models-heading{display:grid;gap:12px;max-width:780px}
.pulse-models-heading>.small-label{display:flex;align-items:center;gap:16px;color:var(--on-field-3)}
.pulse-models-heading h3{font-size:clamp(24px,2.3vw,32px);line-height:1.25;letter-spacing:-.035em;color:var(--on-field)}
.pulse-models-heading p{max-width:46em;color:var(--on-field-2)}
.pulse-model-list{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--field-gap);margin:6px 0 0;padding:0;list-style:none}
.pulse-model figure{display:grid;gap:12px;margin:0}
.pulse-model img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--radius-s);background:rgba(0,0,0,.12);box-shadow:0 20px 34px -22px rgba(30,4,16,.6)}
.pulse-model figcaption{display:grid;gap:3px;padding:0 2px;font-size:13px;line-height:1.45;color:var(--on-field-2)}
.pulse-model figcaption strong{font-size:18px;font-weight:650;letter-spacing:-.02em;color:var(--on-field)}
.pulse-models-note{font-size:13px;color:var(--on-field-3)}
.pulse-studio-formats{margin-top:clamp(48px,5vw,72px)}
.pulse-brief-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--gap);margin:clamp(40px,4.4vw,64px) 0 0;padding:0;list-style:none;border-top:var(--hair) solid var(--ink)}
.pulse-brief-steps>li{display:grid;align-content:start;gap:10px;padding:24px 24px 28px 0;border-bottom:var(--hair) solid var(--line)}
.pulse-brief-steps>li:not(:nth-child(3n+1)){padding-left:24px;border-left:var(--hair) solid var(--line)}
.pulse-brief-steps h3{font-size:20px}
.pulse-brief-steps p{font-size:16px}
.pulse-brief>.story-note{margin-top:22px}
.pulse-brief>.world-links{margin-top:28px}

/* Long question lists: two columns on wide windows. */
@media (min-width:1101px){
 .story-details:has(>details:nth-of-type(4)){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gap);align-items:start}
}

/* Company values: five in one row. */
@media (min-width:1101px){
 .principles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-bottom:var(--hair) solid var(--line)}
 .principle-row{display:grid;grid-template-columns:none;align-content:start;gap:14px;padding:24px 20px 30px 0;border-bottom:0}
 .principle-row+.principle-row{padding-left:20px;border-left:var(--hair) solid var(--line)}
 .principle-row::before,.principle-row h3,.principle-row p{grid-column:auto}
 .principle-row::before{padding-top:0}
 .principle-row h3{font-size:clamp(18px,1.4vw,20px)}
 .principle-row p{font-size:15px}
}

/* ── Colour fields on narrower windows ─────────────────────────────────── */
@media (max-width:1100px){
 .pulse-model-list{grid-template-columns:repeat(3,minmax(0,1fr))}
 .visual-explainer--cards .visual-scene-panels{grid-template-columns:repeat(2,minmax(0,1fr))}
 .world-directory{grid-template-columns:repeat(2,minmax(0,1fr))}
 .world-directory>a{height:clamp(380px,48vw,460px)}
 :is(#lab-title,#shift-title,#pulse-title,#path-title){font-size:var(--hero-size-m,clamp(40px,8.2vw,90px))}
 html[lang="en"] #shift-title{--hero-size-m:clamp(34px,6.2vw,68px)}
 :is(#lab,#shift,#pulse,#path) :is([data-vision-subtext],.world-links,.hero-lead,.hero-more),#lab .lab-patent-note{grid-column:1/span 6}
}
@media (max-width:760px){
 :is(#lab.lab-bento,#shift.shift-hero,#pulse.world-pulse,#path.path-hero){grid-template-rows:none;min-height:0;padding:calc(var(--site-header-height,64px) + 26px) calc(var(--gutter) - var(--field-inset)) 28px}
 :is(#lab .lab-card__meta,#shift .stage-label,#pulse .world-heading,#path .stage-label){grid-row:auto;order:1}
 :is(#lab-title,#shift-title,#pulse-title,#path-title){grid-row:auto;order:2;max-width:none;font-size:clamp(34px,10.4vw,48px);font-weight:700}
 :is(#lab-title,#shift-title,#pulse-title,#path-title)::first-line{font-weight:inherit}
 :is(#lab .learning-scene,#shift .shift-hero-visual,#pulse .pulse-scene,#path .path-hero-visual){grid-column:1/-1;grid-row:auto;order:5;justify-self:center;justify-items:center;margin:30px 0 22px}
 :is(#lab .learning-scene,#pulse .pulse-scene,#path .path-hero-visual) figcaption{justify-items:center;text-align:center}
 :is(#shift .shift-hero-visual,#pulse .pulse-scene,#path .path-hero-visual)>img,#lab .learning-scene>button img{max-height:none;max-width:min(100%,520px)}
 :is(#lab,#shift,#pulse,#path) [data-vision-subtext]{grid-column:1/-1;grid-row:auto;order:4}
 :is(#lab,#shift,#pulse,#path) .hero-lead{grid-column:1/-1;grid-row:auto;order:3;margin-top:18px;font-size:18px;line-height:1.5}
 :is(#lab,#shift,#pulse,#path) .hero-more{grid-column:1/-1;grid-row:auto;order:6;margin-top:0}
 :is(#lab,#shift,#pulse,#path) .world-links{grid-column:1/-1;grid-row:auto;order:4}
 #lab .lab-patent-note{grid-column:1/-1;grid-row:auto;order:7}
 .orb-chamber{padding:40px 18px 28px}
 :is(#lab-class,#lab-ai,#shift-delivery,#pulse-studio,#pulse-content,#path-journey).story-section{padding:44px calc(var(--gutter) - var(--field-inset)) 36px}
 .pulse-model-list{grid-template-columns:repeat(2,minmax(0,1fr))}
 .pulse-brief-steps{grid-template-columns:1fr}
 .pulse-brief-steps>li,.pulse-brief-steps>li:not(:nth-child(3n+1)){padding:20px 0 22px;border-left:0}
 #lab-class .class-time>div+div{padding-left:24px;margin-left:24px}
 /* Scenes and evidence: one row the visitor swipes through (no automatic turning). */
 :is(.visual-explainer--cards .visual-scene-panels,.story-evidence-grid){display:grid;grid-auto-flow:column;grid-auto-columns:86%;grid-template-columns:none;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;border-top:0}
 :is(.visual-explainer--cards .visual-scene-panels,.story-evidence-grid)::-webkit-scrollbar{display:none}
 :is(.visual-explainer--cards .visual-scene,.story-evidence-grid>article){scroll-snap-align:start}
 .story-evidence-grid>article,.story-evidence-grid>article+article{padding:18px;border:var(--hair) solid var(--line);border-radius:var(--radius-s)}
 /* On a phone the label sits at the very top of the field, under the light: the white-text fields drop it there. */
 :is(body[data-site="shift"],body[data-site="pulse"],body[data-site="path"]) .orb-chamber{background:var(--field-grain),radial-gradient(110% 90% at 88% 108%,rgba(0,0,0,.17),rgba(0,0,0,0) 58%),var(--field)}
}
}
@media (max-width:640px){
 .world-directory{gap:10px}
 .world-directory>a{height:clamp(250px,74vw,300px);grid-template-rows:56% minmax(0,1fr)}
 .world-directory>a>div{gap:8px;padding:0 12px 12px}
 .directory-logo{height:15px}
 svg.directory-logo{height:19.5px;margin-block:-2.25px}
 .directory-arrow{width:34px;height:34px;margin:10px 10px 0 0;font-size:14px}
 .directory-object{width:76%}
 [data-field="lab"] .directory-object{width:70%}
 .world-directory strong{font-size:15px;line-height:1.35}
}

/* ── Forced colours ────────────────────────────────────────────────────── */
@media (forced-colors:active){
 .header.bar,.header.bar.has-rim,.orb-chamber,.world-directory>a,.company-process,.atlas-brief-map{border:1px solid CanvasText;background:Canvas;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
 .header.bar::before,.header.bar::after{display:none}
 .primary-link,.send,.toast{border:1px solid ButtonText}
 .question-entry:focus-within{outline:2px solid Highlight;outline-offset:2px}
 .lab-talks>li.is-talk-paired{outline:2px solid Highlight;outline-offset:-2px}
 /* The chosen tab, step, volume or brand keeps a visible mark when the system paints its own colours. */
 :is(.visual-scene-nav button,.shift-workflow__steps a,.lab-tracker__tabs button)[aria-selected="true"],.bar-brands a[aria-current="page"],.roadmap-nav a[aria-current]{outline:2px solid Highlight;outline-offset:-2px}
 .story-items,.story-evidence-grid,.lab-benefits{border-top-color:CanvasText}
 .story-continuation[data-destination]{border:1px solid CanvasText;background:Canvas;color:CanvasText}
 .world-directory>a::before{background:Canvas;border-bottom:1px solid CanvasText}
 :is(#lab.lab-bento,#shift.shift-hero,#pulse.world-pulse,#path.path-hero){border:1px solid CanvasText;background:Canvas}
}