:root {
  --ink: #1f2733;
  --ink-deep: #111821;
  --black: #000;
  --mist: #8e9da8;
  --ice: #bbe5ff;
  --paper: #f4f5f4;
  --white: #fff;
  --line: rgba(31, 39, 51, .16);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --gutter: clamp(22px, 5vw, 84px);
  --radius: 24px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: 96px; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-weight: 400;
  line-height: 1.5;
  overflow-x: hidden;
}
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
img { display: block; max-width: 100%; }
a { color: inherit; }
::selection { color: var(--ink); background: var(--ice); }

.skip-link {
  position: fixed; z-index: 200; top: 12px; left: 12px;
  padding: 10px 14px; color: var(--ink); background: var(--white);
  transform: translateY(-150%); transition: transform .2s;
}
.skip-link:focus { transform: none; }

.ambient { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: var(--ink-deep); }
.ambient__orb { position: absolute; width: 65vw; aspect-ratio: 1; border-radius: 50%; filter: blur(90px); opacity: .28; }
.ambient__orb--one { top: -28vw; right: -15vw; background: var(--ice); animation: drift 18s ease-in-out infinite alternate; }
.ambient__orb--two { bottom: -40vw; left: -25vw; background: var(--mist); animation: drift 24s ease-in-out infinite alternate-reverse; }
.ambient__grid { position: absolute; inset: 0; opacity: .06; background-image: linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.3) 1px, transparent 1px); background-size: 64px 64px; }
@keyframes drift { to { transform: translate3d(8vw, 5vw, 0) scale(1.1); } }

.topbar {
  position: fixed; z-index: 100; top: 0; left: 0; right: 0;
  min-height: 76px; padding: 12px var(--gutter); display: flex; align-items: center; justify-content: space-between;
  color: var(--white); background: rgba(17, 24, 33, .58); border-bottom: 1px solid rgba(255,255,255,.1);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
.topbar__brand { width: 142px; }
.topbar__brand img { filter: brightness(0) invert(1); }
.topbar__nav { display: flex; align-items: center; gap: clamp(18px, 3vw, 42px); }
.topbar__nav a { position: relative; font-size: 13px; text-decoration: none; letter-spacing: .04em; opacity: .72; transition: opacity .25s; }
.topbar__nav a:hover, .topbar__nav a:focus-visible { opacity: 1; }
.topbar__questions { padding: 9px 13px; border: 1px solid rgba(255,255,255,.25); border-radius: 99px; }
.topbar__questions span { display: inline-grid; place-items: center; width: 21px; height: 21px; margin-left: 5px; color: var(--ink); background: var(--ice); border-radius: 50%; font-size: 10px; }
.menu-toggle { display: none; color: var(--white); border: 0; background: transparent; cursor: pointer; }
.mobile-menu { position: fixed; z-index: 99; inset: 76px 0 auto; padding: 22px var(--gutter); color: var(--white); background: var(--ink); border-bottom: 1px solid rgba(255,255,255,.1); }
.mobile-menu a { display: block; padding: 12px 0; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.1); }

.section-dark { color: var(--white); background: transparent; }
.section-light { color: var(--ink); background: var(--paper); }
.eyebrow { margin: 0 0 18px; text-transform: uppercase; letter-spacing: .18em; font-size: 11px; font-weight: 500; }
.section-heading { display: grid; grid-template-columns: 1fr 1.2fr; column-gap: 5vw; align-items: end; margin-bottom: clamp(48px, 8vw, 112px); }
.section-heading .eyebrow { grid-column: 1 / -1; }
.section-heading h2 { margin: 0; font-size: clamp(40px, 6.5vw, 92px); line-height: .95; letter-spacing: -.055em; font-weight: 400; }
.section-heading > p:last-child { max-width: 580px; margin: 0 0 6px auto; font-size: clamp(16px, 1.5vw, 21px); color: #68737c; }
.section-heading--dark > p:last-child { color: rgba(255,255,255,.65); }

.hero { min-height: 100svh; padding: clamp(128px, 16vh, 180px) var(--gutter) 60px; display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: 8vw; position: relative; overflow: hidden; }
.hero::after { content: ""; position: absolute; right: -4vw; top: 18%; width: 24vw; height: 38vw; min-width: 220px; min-height: 360px; border: 1px solid rgba(187,229,255,.14); clip-path: polygon(0 0,100% 0,100% 82%,72% 100%,0 100%); transform: rotate(-8deg); }
.hero__copy { position: relative; z-index: 2; }
.hero h1 { margin: 0; font-size: clamp(57px, 8.6vw, 132px); line-height: .82; letter-spacing: -.07em; font-weight: 300; }
.hero h1 em { color: var(--ice); font-style: normal; }
.hero__lead { max-width: 660px; margin: 38px 0; color: rgba(255,255,255,.66); font-size: clamp(17px, 1.6vw, 22px); }
.hero__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 26px; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; text-decoration: none; border: 0; border-radius: 3px 3px 16px 3px; cursor: pointer; transition: transform .3s var(--ease), box-shadow .3s; }
.button:hover { transform: translateY(-3px); }
.button--light { color: var(--ink); background: var(--ice); box-shadow: 0 12px 40px rgba(187,229,255,.12); }
.button--dark { color: var(--white); background: var(--ink); }
.text-link { text-decoration: none; font-size: 14px; }
.text-link span { display: inline-block; margin-left: 8px; transition: transform .3s; }
.text-link:hover span { transform: translate(4px,4px); }
.hero__mark { position: relative; z-index: 2; width: min(35vw, 500px); margin: auto; transform-style: preserve-3d; will-change: transform; }
.hero__mark img { position: relative; z-index: 2; filter: brightness(0) invert(1); }
.hero__mark > p { position: absolute; right: -4vw; bottom: -50px; z-index: 2; color: var(--ice); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.hero__halo { position: absolute; inset: 12%; border-radius: 50%; background: var(--ice); filter: blur(80px); opacity: .18; }
.hero__scroll { position: absolute; bottom: 32px; left: var(--gutter); display: flex; align-items: center; gap: 10px; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.42); }
.hero__scroll span { width: 46px; height: 1px; background: currentColor; animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { width: 70px; } }

.intro, .architecture, .voice, .applications, .questions { padding: clamp(100px, 13vw, 190px) var(--gutter); }
.strategy-map { display: grid; grid-template-columns: repeat(3,1fr); }
.strategy-card { min-height: 420px; padding: clamp(25px,3.4vw,52px); display: flex; flex-direction: column; border: 1px solid var(--line); background: #fff; transition: transform .5s var(--ease), box-shadow .5s; outline: none; }
.strategy-card:first-child { border-radius: 4px 0 0 36px; }
.strategy-card:last-child { border-radius: 0 36px 4px 0; }
.strategy-card:hover, .strategy-card:focus-visible { position: relative; z-index: 2; transform: translateY(-14px); box-shadow: 0 30px 80px rgba(31,39,51,.14); }
.strategy-card--dark { color: var(--white); background: var(--ink); }
.strategy-card--blue { background: var(--ice); }
.strategy-card__index { font-size: 11px; text-transform: uppercase; letter-spacing: .15em; opacity: .55; }
.strategy-card h3 { margin: auto 0 20px; font-size: clamp(30px, 3vw, 52px); letter-spacing: -.05em; font-weight: 400; }
.strategy-card p { margin: 0 0 28px; font-size: 18px; }
.strategy-card small { display: block; padding-top: 20px; border-top: 1px solid currentColor; opacity: .55; }
.promise-band { margin-top: 90px; padding: 40px 0; display: grid; grid-template-columns: .3fr 1fr; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.promise-band > p { text-transform: uppercase; letter-spacing: .15em; font-size: 11px; }
.promise-band blockquote { margin: 0; max-width: 980px; font-size: clamp(27px,4vw,58px); line-height: 1.08; letter-spacing: -.04em; }

.architecture { border-top: 1px solid var(--line); }
.brand-architecture { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line); }
.brand-role { min-height:330px;padding:clamp(24px,3vw,44px);display:flex;flex-direction:column;background:var(--white); }
.brand-role--master { color:var(--white);background:var(--ink); }
.brand-role span { text-transform:uppercase;letter-spacing:.14em;font-size:10px;opacity:.58; }
.brand-role h3 { margin:auto 0 20px;font-size:clamp(31px,3.4vw,52px);line-height:.95;letter-spacing:-.055em;font-weight:400;overflow-wrap:anywhere; }
.brand-role p { margin:0;color:#68737c;font-size:15px; }
.brand-role--master p { color:rgba(255,255,255,.65); }
.experience-stack { margin-top:clamp(80px,11vw,150px);padding-top:70px;display:grid;grid-template-columns:.8fr 1.2fr;gap:8vw;border-top:1px solid var(--line); }
.experience-stack__copy h3,.apple-language h3 { margin:0 0 24px;font-size:clamp(42px,6vw,82px);line-height:.92;letter-spacing:-.06em;font-weight:400; }
.experience-stack__copy > p:last-child { color:#68737c;font-size:18px; }
.experience-stack__layers { display:grid;gap:12px; }
.experience-stack__layers article { padding:26px 28px;display:grid;gap:9px;background:var(--white);border:1px solid var(--line);border-radius:4px 4px 24px 4px; }
.experience-stack__layers article:first-child { background:var(--ice); }
.experience-stack__layers article:last-child { color:var(--white);background:var(--ink); }
.experience-stack__layers span { text-transform:uppercase;letter-spacing:.12em;font-size:10px;opacity:.6; }
.experience-stack__layers strong { font-size:clamp(21px,2.4vw,34px);font-weight:400;letter-spacing:-.035em; }
.experience-stack__layers small { opacity:.64; }
.apple-language { margin-top:clamp(80px,11vw,150px);padding:70px 0;display:grid;grid-template-columns:.8fr 1.2fr;gap:8vw;border-top:1px solid var(--line);border-bottom:1px solid var(--line); }
.apple-language__rules p { margin:0;padding:22px 0;border-bottom:1px solid var(--line);color:#68737c;font-size:17px; }
.apple-language__rules p:first-child { padding-top:0; }
.apple-language__rules strong { color:var(--ink);font-weight:500; }

.manifesto { padding: 15vh var(--gutter); display: grid; grid-template-columns: .65fr 1.35fr; gap: 7vw; }
.manifesto__sticky { position: sticky; top: 130px; height: fit-content; }
.manifesto__sticky h2 { margin: 0; color: var(--ice); font-size: clamp(80px,14vw,220px); line-height: .8; letter-spacing: -.08em; font-weight: 300; }
.manifesto__text p { margin: 0 0 1.1em; font-size: clamp(25px,3.4vw,54px); line-height: 1.12; letter-spacing: -.04em; color: rgba(255,255,255,.25); transition: color .7s; }
.manifesto__text p.is-visible { color: rgba(255,255,255,.9); }
.manifesto__text strong { color: var(--ice); font-weight: 400; }
.manifesto__final { padding-top: 80px; }

.voice-lab { display: grid; grid-template-columns: .28fr 1fr; gap: 5vw; }
.voice-tabs { display: flex; flex-direction: column; align-items: stretch; }
.voice-tabs button { padding: 22px 0; color: #6f7981; background: transparent; border: 0; border-bottom: 1px solid var(--line); text-align: left; cursor: pointer; font-size: 17px; }
.voice-tabs button[aria-selected="true"] { color: var(--ink); font-weight: 500; }
.voice-panel { min-height: 560px; padding: clamp(30px,5vw,76px); display: grid; grid-template-columns: 1fr 1fr; gap: 40px; color: var(--white); background: var(--ink); border-radius: 4px 4px 52px 4px; transition: background .5s; }
.voice-panel h3 { margin: 0; font-size: clamp(52px,7vw,108px); line-height: .9; letter-spacing: -.07em; font-weight: 300; }
.voice-panel > div > p:last-child { max-width: 460px; color: rgba(255,255,255,.65); font-size: 18px; }
.voice-panel__rules h4 { margin: 0 0 15px; font-size: 12px; text-transform: uppercase; letter-spacing: .15em; }
.voice-panel__rules ul { padding-left: 18px; color: rgba(255,255,255,.65); }
.voice-panel blockquote { grid-column: 1/-1; align-self: end; margin: 0; padding-top: 30px; border-top: 1px solid rgba(255,255,255,.2); color: var(--ice); font-size: clamp(26px,3.5vw,52px); letter-spacing: -.04em; }
.voice-panel__verbs { grid-column: 1/-1; display: flex; flex-wrap: wrap; gap: 8px; }
.voice-panel__verbs span { padding: 7px 12px; border: 1px solid rgba(255,255,255,.18); border-radius: 99px; font-size: 12px; }
.brand-words { margin-top: 140px; }
.brand-words__orbit { position: relative; min-height: 520px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; overflow: hidden; }
.brand-words__orbit::before, .brand-words__orbit::after { content:""; position:absolute; border: 1px solid var(--line); border-radius: 50%; }
.brand-words__orbit::before { width: 65%; height: 65%; }
.brand-words__orbit::after { width: 35%; height: 35%; }
.word { position: absolute; padding: 8px 13px; background: var(--paper); border: 1px solid var(--line); border-radius: 99px; font-size: clamp(11px,1vw,14px); }
.word--hero { z-index: 2; padding: 15px 22px; color: var(--white); background: var(--ink); font-size: clamp(17px,2vw,28px); }
.word:nth-child(2){top:10%;left:47%}.word:nth-child(3){top:22%;left:20%}.word:nth-child(4){top:25%;right:16%}.word:nth-child(5){bottom:14%;left:45%}.word:nth-child(6){bottom:28%;left:11%}.word:nth-child(7){bottom:25%;right:12%}.word:nth-child(8){top:9%;right:14%}.word:nth-child(9){top:50%;left:7%}.word:nth-child(10){top:51%;right:8%}.word:nth-child(11){bottom:7%;left:24%}.word:nth-child(12){bottom:8%;right:23%}
.jargon-list { margin-top: 28px; display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--line); }
.jargon-list span { padding: 30px; background: var(--paper); font-size: 17px; }

.visual { padding: clamp(100px,13vw,190px) var(--gutter); }
.logo-lab { display: grid; grid-template-columns: 1.25fr .75fr; min-height: 680px; }
.logo-stage { position: relative; min-height: 620px; display: grid; place-items: center; overflow: hidden; background: #fff; border-radius: 4px 0 0 44px; transition: background .5s; }
.logo-stage[data-bg="dark"] { background: #000; }
.logo-stage[data-bg="blue"] { background: var(--ice); }
.logo-stage img { width: min(58%, 430px); transition: filter .5s, width .5s; }
.logo-stage[data-bg="dark"] img { filter: brightness(0) invert(1); }
.logo-stage.is-horizontal img { width: min(75%, 620px); }
.hotspot { position: absolute; width: 26px; height: 26px; padding: 0; border: 1px solid var(--ink); border-radius: 50%; background: var(--ice); cursor: pointer; box-shadow: 0 0 0 7px rgba(187,229,255,.25); animation: ping 2.1s infinite; }
.hotspot span { position:absolute; inset:8px; border-radius:50%; background:var(--ink); }
.hotspot--frame{top:24%;left:38%}.hotspot--roof{top:37%;left:48%}.hotspot--core{top:46%;left:50%}.hotspot--word{top:65%;left:55%}.hotspot--tagline{top:75%;left:51%}
.logo-stage.is-horizontal .hotspot { display:none; }
@keyframes ping { 50% { box-shadow: 0 0 0 12px rgba(187,229,255,0); } }
.logo-detail { padding: clamp(32px,4vw,64px); display:flex; flex-direction:column; color:var(--ink); background:var(--ice); border-radius:0 36px 4px 0; }
.logo-detail h3 { margin:auto 0 18px; font-size:clamp(38px,5vw,72px); line-height:.95; letter-spacing:-.06em; font-weight:400; }
.logo-detail > p:not(.eyebrow) { font-size:19px; }
.logo-detail > small { display:block; padding-top:22px; margin-top:20px; border-top:1px solid rgba(31,39,51,.25); }
.logo-controls { display:flex; flex-wrap:wrap; gap:7px; margin-top:38px; }
.logo-controls button { padding:7px 11px; border:1px solid rgba(31,39,51,.25); border-radius:99px; background:transparent; cursor:pointer; font-size:11px; }
.logo-controls button.is-active { color:var(--white); background:var(--ink); }
.spacing-lab, .reduction-lab, .palette, .type-lab { margin-top: 140px; padding-top: 70px; border-top: 1px solid rgba(255,255,255,.16); }
.spacing-lab { display:grid; grid-template-columns:.7fr 1.3fr; gap:7vw; }
.spacing-copy h3, .reduction-lab h3, .palette h3, .type-lab h3, .donts h3 { margin:0 0 24px; font-size:clamp(39px,5.5vw,76px); line-height:.95; letter-spacing:-.055em; font-weight:300; }
.spacing-copy > p:not(.eyebrow), .reduction-lab > div > p, .palette__copy > p:last-child, .type-lab > div > p:last-child { color:rgba(255,255,255,.62); font-size:17px; }
.spacing-copy label { display:flex; justify-content:space-between; margin:45px 0 12px; font-size:12px; text-transform:uppercase; letter-spacing:.12em; }
input[type="range"] { width:100%; accent-color:var(--ice); }
.spacing-demo { position:relative; min-height:520px; display:grid; place-items:center; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14); overflow:hidden; }
.spacing-demo__safe { width:65%; padding:var(--safe-space,62px); border:1px dashed var(--ice); transition:padding .2s; }
.spacing-demo__safe img { filter:brightness(0) invert(1); }
.spacing-demo__label { position:absolute; top:15px; left:15px; color:var(--ice); font-size:11px; }
.intruder { position:absolute; padding:7px 11px; color:var(--ink); background:var(--mist); font-size:11px; transition:transform .2s; }
.intruder--one { top:19%; right:6%; transform:translateX(calc((100 - var(--space-value,62)) * -1px)); }
.intruder--two { bottom:17%; left:7%; transform:translateX(calc((100 - var(--space-value,62)) * 1px)); }
.reduction-lab { display:grid; grid-template-columns:.55fr 1.45fr; gap:7vw; }
.reduction-samples { display:flex; align-items:end; gap:clamp(20px,4vw,70px); }
.reduction-samples figure { margin:0; text-align:center; }
.reduction-samples img { margin:auto; filter:brightness(0) invert(1); }
.reduction-samples figure:nth-child(1) img{width:90px}.reduction-samples figure:nth-child(2) img{width:180px}.reduction-samples figure:nth-child(3) img{width:260px}
.reduction-samples figcaption { margin-top:18px; color:rgba(255,255,255,.5); font-size:11px; }
.palette { display:grid; grid-template-columns:.48fr 1fr; gap:6vw; }
.swatches { display:grid; grid-template-columns:repeat(5,1fr); min-height:380px; }
.swatch { padding:18px 12px; display:flex; flex-direction:column; justify-content:end; align-items:start; border:0; cursor:pointer; transition:transform .35s var(--ease); }
.swatch:hover { transform:translateY(-12px); }
.swatch span { font-size:13px; font-weight:500; }
.swatch small { margin-top:5px; opacity:.7; font-size:9px; text-align:left; }
.swatch--black{color:#fff;background:#000}.swatch--navy{color:#fff;background:#1f2733}.swatch--gray{color:#1f2733;background:#8e9da8}.swatch--blue{color:#1f2733;background:#bbe5ff}.swatch--white{color:#1f2733;background:#fff}
.copy-feedback { grid-column:2; min-height:24px; color:var(--ice); font-size:12px; }
.type-lab { display:grid; grid-template-columns:.48fr 1fr; gap:6vw; }
.type-lab__canvas { padding:clamp(30px,5vw,76px); color:var(--ink); background:var(--ice); border-radius:4px 4px 40px 4px; }
.type-lab__canvas > p { margin:0; outline:none; font-size:clamp(48px,7vw,110px); line-height:.85; letter-spacing:-.07em; font-weight:300; }
.type-lab__weights { margin-top:60px; display:flex; gap:26px; border-top:1px solid rgba(31,39,51,.2); padding-top:18px; font-size:11px; }
.visual-system { margin-top:140px; display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:rgba(255,255,255,.12); }
.visual-system article { min-height:440px; padding:clamp(25px,4vw,58px); background:var(--ink-deep); }
.visual-system article > p:last-child { max-width:550px; color:rgba(255,255,255,.58); }
.pattern-demo { min-height:210px; display:grid; grid-template-columns:repeat(4,1fr); place-items:center; }
.pattern-demo i { width:14px;height:14px;border:1px solid var(--ice);border-radius:50%;position:relative; }
.pattern-demo i:nth-child(3n){border-radius:2px}.pattern-demo i:nth-child(4n)::after{content:"";position:absolute;top:50%;left:100%;width:80px;height:1px;background:linear-gradient(90deg,var(--ice),transparent);}
.gradient-demo { height:210px; background:radial-gradient(circle at 20% 20%,#bbe5ff,transparent 35%),linear-gradient(125deg,#fff 0%,#8e9da8 36%,#1f2733 70%,#000 100%); }
.shape-demo { height:210px;display:flex;align-items:center;justify-content:center;gap:20px; }
.shape-demo span{width:95px;height:95px;border:1px solid var(--ice)}.shape-demo span:nth-child(1){border-radius:2px 2px 28px 2px}.shape-demo span:nth-child(2){clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);background:var(--ice)}.shape-demo span:nth-child(3){clip-path:polygon(0 0,100% 0,100% 70%,70% 100%,0 100%);background:var(--mist)}
.emoji-demo { min-height:210px;display:grid;place-items:center;font-size:clamp(30px,5vw,72px);letter-spacing:.2em; }
.donts { margin-top:140px;padding:70px 0 0;border-top:1px solid rgba(255,255,255,.16);display:grid;grid-template-columns:.35fr 1fr;column-gap:6vw; }
.donts .eyebrow { grid-column:1/-1; }
.donts ul { list-style:none;margin:0;padding:0; }
.donts li { padding:18px 0;border-bottom:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.7); }
.donts li::before { content:"×";margin-right:18px;color:var(--ice); }

.application-grid { display:grid;grid-template-columns:repeat(2,1fr);gap:18px; }
.application-card { margin:0;position:relative;overflow:hidden;background:#e5e8e8;border-radius:3px 3px 26px 3px; }
.application-card img { width:100%;height:100%;min-height:350px;object-fit:cover;transition:transform .7s var(--ease); }
.application-card:hover img { transform:scale(1.025); }
.application-card figcaption { position:absolute;left:18px;bottom:18px;padding:9px 13px;color:var(--white);background:rgba(17,24,33,.76);backdrop-filter:blur(12px);font-size:11px; }
.application-card--wide { grid-column:1/-1; }
.photo-direction { margin-top:110px;padding:70px 0;display:grid;grid-template-columns:1fr 1fr;gap:6vw;border-top:1px solid var(--line);border-bottom:1px solid var(--line); }
.photo-direction h3 { margin:0;font-size:clamp(38px,5vw,72px);line-height:.97;letter-spacing:-.055em;font-weight:400; }
.photo-direction__rules p { margin:0 0 25px;font-size:18px;color:#68737c; }

.questions__header { display:grid;grid-template-columns:1fr auto;gap:40px;align-items:end; }
.questions__header h2 { margin:0;font-size:clamp(54px,8vw,118px);line-height:.9;letter-spacing:-.065em;font-weight:300; }
.questions__header > div > p:last-child { max-width:620px;color:rgba(255,255,255,.58);font-size:18px; }
.question-actions { display:flex;align-items:center;gap:18px; }
.text-button { color:rgba(255,255,255,.65);background:transparent;border:0;text-decoration:underline;cursor:pointer;font-size:12px; }
.question-filters { margin:80px 0 34px;display:flex;gap:8px;flex-wrap:wrap; }
.question-filters button { padding:8px 13px;color:rgba(255,255,255,.6);background:transparent;border:1px solid rgba(255,255,255,.18);border-radius:99px;cursor:pointer;font-size:11px; }
.question-filters button.is-active { color:var(--ink);background:var(--ice);border-color:var(--ice); }
.question-list { list-style:none;margin:0;padding:0;border-top:1px solid rgba(255,255,255,.18); }
.question-list li { border-bottom:1px solid rgba(255,255,255,.14);transition:opacity .3s; }
.question-list li[hidden] { display:none; }
.question-list label { padding:26px 0;display:grid;grid-template-columns:28px 1fr auto;gap:18px;align-items:start;cursor:pointer; }
.question-list input { width:18px;height:18px;margin:3px 0 0;accent-color:var(--ice); }
.question-list span { color:rgba(255,255,255,.62); }
.question-list b { display:block;margin-bottom:7px;color:var(--white);font-size:18px;font-weight:400; }
.question-list em { color:var(--ice);font-size:10px;text-transform:uppercase;letter-spacing:.1em;font-style:normal;white-space:nowrap; }
.question-list li:has(input:checked) { opacity:.4; }
.question-list li:has(input:checked) b { text-decoration:line-through; }
.question-status { color:var(--ice);font-size:12px; }
.next-step { padding:clamp(110px,16vw,230px) var(--gutter);text-align:center; }
.next-step h2 { margin:0 0 30px;font-size:clamp(58px,10vw,150px);line-height:.82;letter-spacing:-.075em;font-weight:300; }
.next-step > p:not(.eyebrow) { margin:0 auto 40px;max-width:580px;color:#68737c;font-size:18px; }
footer { padding:45px var(--gutter);display:grid;grid-template-columns:.7fr 1.3fr auto;align-items:end;gap:35px;color:rgba(255,255,255,.55);background:var(--ink-deep);font-size:11px; }
footer img { width:170px;filter:brightness(0) invert(1); }
footer a { color:var(--white);text-decoration:none; }
.footer-links { display:flex;flex-direction:column;align-items:flex-end;gap:10px; }

.reveal { opacity:0;transform:translateY(40px);transition:opacity .9s var(--ease),transform .9s var(--ease); }
.reveal.is-revealed { opacity:1;transform:none; }
:focus-visible { outline:2px solid var(--ice);outline-offset:4px; }

@media (max-width: 900px) {
  .topbar__nav { display:none; }.menu-toggle{display:block}
  .hero { grid-template-columns:1fr;padding-top:130px;align-content:center; }
  .hero__mark { position:relative;right:auto;bottom:auto;width:min(62vw,430px);margin:45px auto 0;opacity:.95; }
  .hero__mark > p { position:static;margin:28px 0 0;text-align:center; }
  .section-heading { grid-template-columns:1fr;gap:28px; }
  .section-heading > p:last-child { margin:0; }
  .strategy-map { grid-template-columns:1fr; }
  .brand-architecture { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .strategy-card { min-height:330px;border-radius:0!important; }
  .promise-band,.experience-stack,.apple-language,.manifesto,.voice-lab,.logo-lab,.spacing-lab,.reduction-lab,.palette,.type-lab,.donts,.photo-direction { grid-template-columns:1fr; }
  .manifesto__sticky { position:relative;top:auto;margin-bottom:60px; }
  .voice-tabs { flex-direction:row;overflow:auto; }.voice-tabs button{min-width:max-content;padding:15px 22px 15px 0;margin-right:22px}
  .logo-stage { border-radius:4px 4px 0 0;min-height:520px; }.logo-detail{border-radius:0 0 30px 4px;min-height:400px}
  .spacing-demo { min-height:430px; }
  .reduction-samples { margin-top:40px;overflow:auto;padding-bottom:20px; }
  .palette,.type-lab { gap:40px; }.copy-feedback{grid-column:1}
  .swatches { min-height:300px; }.swatch{padding:12px 7px}.swatch small{display:none}
  .donts h3 { margin-bottom:45px; }
  .questions__header { grid-template-columns:1fr; }.question-actions{justify-content:flex-start}
}

@media (max-width: 600px) {
  .topbar { min-height:68px; }.topbar__brand{width:126px}.mobile-menu{top:68px}
  .hero { min-height:auto;padding-top:112px;padding-bottom:82px;gap:22px; }.hero h1{font-size:clamp(50px,16vw,78px);line-height:.86}.hero__lead{margin:26px 0;font-size:17px}.hero__scroll{display:none}
  .hero__actions { align-items:flex-start;flex-direction:column;gap:16px; }
  .section-heading h2 { font-size:46px; }
  .brand-architecture { grid-template-columns:1fr; }
  .brand-role { min-height:270px; }
  .experience-stack,.apple-language { margin-top:80px;padding-top:50px;gap:40px; }
  .experience-stack__copy h3,.apple-language h3 { font-size:44px; }
  .experience-stack__layers article { padding:22px; }
  .strategy-map,.strategy-card,.apple-language > *,.voice-lab,.voice-panel,.voice-tabs{min-width:0;max-width:100%}
  .strategy-card{padding:28px}.strategy-card h3{font-size:38px;overflow-wrap:anywhere}
  .promise-band { grid-template-columns:1fr;gap:15px;margin-top:55px }.promise-band blockquote{font-size:29px}
  .manifesto { padding-top:100px;padding-bottom:100px}.manifesto__text p{font-size:29px}.manifesto__sticky h2{font-size:100px}
  .voice-panel { grid-template-columns:1fr;min-height:620px;padding:30px }.voice-panel blockquote,.voice-panel__verbs{grid-column:1}.voice-panel h3{font-size:57px}
  .brand-words{margin-top:90px}.brand-words__orbit{min-height:430px;border-radius:30px}.brand-words__orbit::before{width:85%}.brand-words__orbit::after{width:48%}
  .word:nth-child(5),.word:nth-child(8),.word:nth-child(11),.word:nth-child(12){display:none}.jargon-list{grid-template-columns:1fr}
  .logo-stage{min-height:430px}.logo-stage img{width:68%}.hotspot--frame{top:22%;left:30%}.hotspot--roof{top:36%;left:48%}.hotspot--core{top:46%;left:50%}.hotspot--word{top:65%;left:60%}.hotspot--tagline{top:74%;left:50%}
  .spacing-lab,.reduction-lab,.palette,.type-lab,.visual-system,.donts { margin-top:90px;padding-top:50px }
  .reduction-samples{gap:30px}.reduction-samples figure:nth-child(3) img{width:220px}
  .visual-system { grid-template-columns:minmax(0,1fr);width:100%;overflow:hidden }.visual-system article{min-width:0;min-height:370px;overflow:hidden}.pattern-demo{width:100%;overflow:hidden}
  .emoji-demo{letter-spacing:.05em}
  .application-grid{grid-template-columns:1fr}.application-card--wide{grid-column:auto}.application-card img{min-height:250px}
  .question-list label{grid-template-columns:25px 1fr}.question-list em{grid-column:2;white-space:normal}.question-list b{font-size:16px}
  .next-step h2{font-size:60px}
  footer{grid-template-columns:1fr;align-items:start}.footer-links{align-items:flex-start;margin-top:12px}
}

@media (max-width: 420px) {
  :root { --gutter:20px; }
  .topbar__brand { width:116px; }
  .hero h1 { font-size:clamp(46px,15.2vw,66px); }
  .hero__lead { max-width:32ch; }
  .logo-stage { min-height:370px; }
  .logo-detail { min-height:auto;padding:28px 22px; }
  .logo-detail h3 { margin:38px 0 16px;font-size:40px; }
  .swatches { grid-template-columns:repeat(2,1fr);min-height:auto; }
  .swatch { min-height:130px; }
  .swatch:last-child { grid-column:1/-1; }
  .type-lab__weights { flex-direction:column;gap:8px; }
  .question-actions { align-items:flex-start;flex-direction:column; }
  .voice-lab { grid-template-columns:minmax(0,1fr); }
  .voice-tabs { width:100%;max-width:100%; }
  .voice-panel > * { min-width:0;max-width:100%; }
  .voice-panel h3 { overflow-wrap:anywhere; }
  .spacing-lab,.spacing-copy,.spacing-demo { min-width:0;max-width:100%; }
}

@media (max-width: 350px) {
  .hero h1 { font-size:44px; }
  .strategy-card h3 { font-size:34px; }
  .experience-stack__copy h3,.apple-language h3 { font-size:38px;overflow-wrap:anywhere; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important; }
  .reveal { opacity:1;transform:none; }
}
