/* ============================================================
   undressed.socials — STUDIO
   KOTA-scale structure, quiet CI application:
   · large headlines in Space Grotesk (light, tight) — NOT Gluten
   · Gluten Black is a rare accent only (.gl on one word / small marks)
   · the "fancy" comes from colour: CI hues bleeding into each other,
     scroll-driven surface morphs, soft blend fields, kinetic reveals
   depends on colors_and_type.css for CI tokens + fonts.
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: var(--font-body); }
.st { min-height: 100svh; background: var(--surface); color: var(--text); position: relative; overflow-x: clip; }
.st a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
::selection { background: var(--text); color: var(--surface); }

/* per-page colour pairs (from the CI) */
.pair-1 { --surface: var(--blood); --text: var(--sun); }
.pair-2 { --surface: var(--sky); --text: var(--blood); }
.pair-3 { --surface: var(--candy); --text: var(--flame); }
.pair-4 { --surface: var(--olive); --text: var(--blush); }
.pair-5 { --surface: var(--teal); --text: var(--mint); }

.wrap { width: 100%; max-width: 1340px; margin: 0 auto; padding: 0 clamp(24px, 5vw, 88px); position: relative; z-index: 2; }
.band { padding: clamp(88px, 15vh, 210px) 0; position: relative; }
.band.circle-band { padding-top: clamp(48px, 7vh, 96px); }
.mark { background: linear-gradient(var(--text), var(--text)) center/100% 1.12em no-repeat; background-size: 100% 1lh; color: var(--surface); padding: 0 .12em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
/* the inline background box is font-derived (~1.2em) — so any heading carrying a
   .mark needs a line-height above that, or the box bleeds into the line above. */
.st .display, .st h1.display, .st h2.display { line-height: 1.18; }
.st .display .mark, .st .sheet-h .mark, .st .quote .mark, .st .ct-hero-h .mark { padding: 0 .12em; }
/* Gluten sits tighter in its box, so it needs more trailing air */
/* Gluten's bowls are far taller than the line box, so its band is sized from the
   FONT (em), not the line, and the line gets extra leading to hold it. */
.st .mark.gl { padding: 0 .24em; background-size: 100% 1lh; background-position: center; }
.st .display:has(.mark.gl), .st .statement-h:has(.mark.gl), .st .ct-hero-h:has(.mark.gl) { line-height: 1.34; }
/* hero headlines only: slightly tighter than the rest */
.st .display.fs-hero:has(.mark.gl), .st .ct-hero-h:has(.mark.gl) { line-height: 1.24; }
.st .sheet-h, .st .quote p, .st .ct-hero-h { line-height: 1.18; }
.st .st-foot-big .mark { padding: 0 .14em; }
em.accent, .accent { font-family: var(--font-accent); font-style: italic; font-weight: 400; }
/* subpage heroes go FULL Gluten — they are short enough to carry it.
   the homepage hero stays quiet (it is a long two-line sentence). */
.st .display.gl-hero { font-family: var(--font-display); font-weight: 900; letter-spacing: -.035em; line-height: 1.06; }
.st .display.gl-hero .mark { padding: 0 .24em; }
/* Gluten Black — used punctually, only where it has room to land:
   the hero hot word, the standalone result numbers, the centred closing
   headline, and the footer wordmark. everything else stays quiet. */
.st .gl { font-family: var(--font-display); font-weight: 900; letter-spacing: -.03em; }
.st .result-num { font-family: var(--font-display); font-weight: 900; letter-spacing: -.04em; }
.st .st-close .display { font-family: var(--font-display); font-weight: 900; letter-spacing: -.035em; line-height: 1.15; }
.st .st-foot-word { font-family: var(--font-display); font-weight: 900; letter-spacing: -.035em; }

/* ---------- COLOUR BLEED FIELDS (the fancy part) ----------
   soft radial fields in sibling CI hues drift behind the content and blend
   into the surface — colour-on-colour, but breathing. */
.bleed { position: absolute; inset: -10% -10% 0; pointer-events: none; z-index: 0; overflow: hidden; }
.bleed i { position: absolute; display: block; border-radius: 50%; filter: blur(70px); opacity: .5; mix-blend-mode: soft-light; will-change: transform; }
.bleed i:nth-child(1) { width: 52vw; height: 52vw; left: -8vw; top: -6vw; animation: drift1 26s ease-in-out infinite alternate; }
.bleed i:nth-child(2) { width: 44vw; height: 44vw; right: -6vw; top: 18vh; animation: drift2 32s ease-in-out infinite alternate; }
.bleed i:nth-child(3) { width: 38vw; height: 38vw; left: 32vw; bottom: -12vw; animation: drift3 29s ease-in-out infinite alternate; }
@keyframes drift1 { to { transform: translate3d(8vw, 6vh, 0) scale(1.15); } }
@keyframes drift2 { to { transform: translate3d(-7vw, -5vh, 0) scale(1.1); } }
@keyframes drift3 { to { transform: translate3d(5vw, -7vh, 0) scale(1.2); } }
.anim-off .bleed i { animation: none; }
@media (prefers-reduced-motion: reduce) { .bleed i { animation: none; } }
/* a hard colour seam where two CI pairs meet — the gradient runs between hues */
.seam { height: clamp(120px, 22vh, 260px); position: relative; z-index: 1; }

/* ---------- TYPE ----------
   headline voice = Space Grotesk 400, huge, very tight. quiet but confident. */
.kick { font-family: var(--font-body); font-weight: 300; text-transform: uppercase; letter-spacing: .24em; font-size: clamp(11px, .95vw, 13px); display: inline-flex; align-items: center; gap: .8em; opacity: .68; margin-bottom: clamp(20px, 3.4vh, 44px); }
.kick::before { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .55; }
.st .display, .st h1.display, .st h2.display { font-family: var(--font-body); font-weight: 400; text-transform: none; letter-spacing: -.035em; margin: 0; text-wrap: balance; }
.st .display.fs-hero, .st h1.display.fs-hero { font-size: clamp(32px, min(8.2vw, 9.2vh), 148px); line-height: 0.98; }
.st .display.fs-h1, .st h1.display.fs-h1 { font-size: clamp(30px, min(6.4vw, 8.4vh), 112px); }
.st .display.fs-h2, .st h2.display.fs-h2 { font-size: clamp(32px, 4.6vw, 78px); }
.fs-h3 { font-size: clamp(23px, 2.4vw, 38px); line-height: 1.02; }
.lead { font-family: var(--font-body); font-weight: 400; font-size: clamp(17px, 1.5vw, 23px); line-height: 1.55; max-width: 42ch; text-wrap: pretty; margin: 0; opacity: .9; }
.body { font-family: var(--font-body); font-size: clamp(15px, 1.15vw, 17px); line-height: 1.6; }
.label { font-family: var(--font-body); font-weight: 300; text-transform: uppercase; letter-spacing: .18em; font-size: 12px; opacity: .55; }

/* ---------- BUTTON ---------- */
.btn { font-family: var(--font-body); font-weight: 500; text-transform: none; letter-spacing: -.005em; font-size: clamp(15px, 1.05vw, 17px); padding: 15px 30px; border-radius: 999px; border: 1px solid color-mix(in srgb, currentColor 55%, transparent); background: transparent; color: var(--text); cursor: pointer; display: inline-flex; align-items: center; gap: .5em; transition: background .45s cubic-bezier(.4,0,.2,1), color .45s cubic-bezier(.4,0,.2,1), border-color .45s ease, transform .3s cubic-bezier(.2,.8,.2,1); white-space: nowrap; }
.btn:hover { background: var(--text); color: var(--surface); border-color: var(--text); }
.btn:active { transform: scale(.97); }
.btn.solid { background: var(--text); color: var(--surface); border-color: var(--text); }
.btn.solid:hover { background: transparent; color: var(--text); }
.btn.lg { padding: 19px 40px; font-size: clamp(16px, 1.2vw, 19px); }

/* ---------- CURSOR (the cherry, tinted; shifts hue over interactive things) ---------- */
.st-cursor { position: fixed; top: 0; left: 0; width: 26px; height: 26px; pointer-events: none; z-index: 9000; transform: translate(-50%,-50%) rotate(0deg); background-color: var(--text); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; transition: width .35s cubic-bezier(.4,0,.2,1), height .35s cubic-bezier(.4,0,.2,1), background-color .35s ease, opacity .3s ease, transform .35s cubic-bezier(.4,0,.2,1); }
.st-cursor.big { width: 62px; height: 62px; transform: translate(-50%,-50%) rotate(-12deg); }
.st-cursor.hidden { opacity: 0; }
@media (hover: none) { .st-cursor { display: none; } }

/* ---------- NAV ---------- */
.st-nav { position: absolute; top: 0; left: 0; right: 0; z-index: 120; display: flex; align-items: center; justify-content: space-between; padding: clamp(16px, 2.2vw, 26px) clamp(24px, 5vw, 88px); color: var(--text); }
.st-nav a, .st-nav button { color: var(--text); }
/* the mark is masked, not filtered — so it is always exactly ONE colour from the
   active pair, and follows the scroll colour morph. */
.st-logo { width: clamp(168px, 15vw, 224px); aspect-ratio: 974 / 243; height: auto; cursor: pointer; background-color: var(--text); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; display: block; transform: translateX(-6.708%); }
.st-nav-links { display: flex; align-items: center; gap: clamp(20px, 2.2vw, 38px); }
.st-nav-links a { font-family: var(--font-body); font-weight: 400; text-transform: none; font-size: 16px; position: relative; opacity: .8; transition: opacity .3s ease; cursor: pointer; }
.st-nav-links a:hover, .st-nav-links a.on { opacity: 1; }
.st-nav-links a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -6px; height: 1px; background: currentColor; transition: right .4s cubic-bezier(.4,0,.2,1); }
.st-nav-links a:hover::after, .st-nav-links a.on::after { right: 0; }
.st-nav .btn { border-color: color-mix(in srgb, currentColor 55%, transparent); color: var(--text); }
.st-nav .btn:hover { background: var(--text); color: var(--surface); border-color: var(--text); }
.st-lang { display: flex; align-items: center; gap: 2px; font-family: var(--font-body); font-weight: 500; font-size: 13px; letter-spacing: .1em; }
/* the slash is not a button, so it never inherited the buttons' padding and
   min-height: without this it hangs above the EN / DE baseline */
.st-lang span { display: inline-flex; align-items: center; align-self: center; line-height: 1; }
.st-lang button { background: none; border: 0; cursor: pointer; opacity: .5; padding: 4px; text-transform: uppercase; }
.st-lang button.on { opacity: 1; }
.st-burger { display: none; background: none; border: 0; cursor: pointer; flex-direction: column; gap: 5px; }
.st-burger span { width: 25px; height: 1.5px; background: currentColor; display: block; }

/* ---------- ROUTE TRANSITION (colour bleeds across) ---------- */
/* idle it is a zero-height fixed layer pinned to the bottom edge. iOS tints its
   browser chrome from layers like that, which framed the page in a stray colour,
   so the wipe only exists while it actually animates. */
.st-wipe { position: fixed; inset: 0; z-index: 8000; transform: scaleY(0); transform-origin: bottom; pointer-events: none; visibility: hidden; }
.st-wipe.in, .st-wipe.out { visibility: visible; }
.st-wipe.in { animation: wipeIn .55s cubic-bezier(.72,0,.28,1) forwards; }
.st-wipe.out { transform: scaleY(1); transform-origin: top; animation: wipeOut .55s cubic-bezier(.72,0,.28,1) forwards; }
@keyframes wipeIn { from { transform: scaleY(0); transform-origin: bottom; } to { transform: scaleY(1); transform-origin: bottom; } }
@keyframes wipeOut { from { transform: scaleY(1); transform-origin: top; } to { transform: scaleY(0); transform-origin: top; } }

/* ---------- REVEAL ----------
   Everything here starts VISIBLE. The hidden/offset starting state only exists
   under html.js, i.e. once the inline head script has confirmed that JavaScript
   is running and will therefore be able to add .in again. Without JS (and for
   non-JS crawlers) the prerendered copy simply stays on screen. */
.js .rv { opacity: 0; transform: translateY(30px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
.rv.in { opacity: 1; transform: none; }
.rv-line { display: block; }
.js .rv-line { overflow: hidden; }
/* the mask slot needs vertical room: .mark's inline background box is taller than
   a sub-1 line box, and would otherwise be clipped by the reveal mask. */
.st .rv-line { padding-bottom: .18em; margin-bottom: -.18em; }
.rv-line > span { display: block; }
.js .rv-line > span { transform: translateY(108%); transition: transform 1s cubic-bezier(.16,.84,.28,1); }
.rv-line.in > span { transform: none; }
/* word-by-word colour fill on scroll */
.sf-w { transition: opacity .5s ease; }
.anim-off .rv, .anim-off .rv-line > span { opacity: 1 !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) { .rv, .rv-line > span { opacity: 1 !important; transform: none !important; } }

/* ---------- MARQUEE (quiet: body type, not Gluten) ---------- */
.marq { overflow: hidden; white-space: nowrap; display: flex; padding: clamp(18px,3vh,40px) 0; border-top: 1px solid color-mix(in srgb, currentColor 20%, transparent); border-bottom: 1px solid color-mix(in srgb, currentColor 20%, transparent); position: relative; z-index: 2; }
.marq-in { display: inline-flex; gap: clamp(28px, 3.4vw, 66px); padding-right: clamp(28px, 3.4vw, 66px); animation: marq 34s linear infinite; will-change: transform; }
.marq:hover .marq-in { animation-play-state: paused; }
.anim-off .marq-in { animation: none; }
@keyframes marq { from { transform: translateX(0); } to { transform: translateX(-100%); } }
.marq-item { font-family: var(--font-body); font-weight: 400; text-transform: none; letter-spacing: -.02em; font-size: clamp(22px, 3vw, 52px); display: inline-flex; align-items: center; gap: clamp(28px, 3.4vw, 66px); opacity: .85; }
.marq-item::after { content: "·"; opacity: .5; }

/* ---------- HERO ---------- */
.st-hero { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: clamp(104px, 17vh, 200px) 0 clamp(40px, 7vh, 96px); position: relative; }
/* sub pages share the contact hero's top edge and stay inside one viewport */
/* sub heroes are standalone: exactly one screen tall on every size, content
   pinned to the same top edge as contact, next section starts below the fold */
.st-hero.sub { min-height: 100svh; justify-content: center; padding: clamp(104px, 17vh, 200px) 0 clamp(40px, 7vh, 96px); }
.st-hero.sub .fs-hero, .st-hero.sub .display.fs-hero, .st-hero.sub h1.display.fs-hero { font-size: clamp(30px, min(6.4vw, 8.4vh), 104px); }
.st-hero.sub .lead { margin-top: clamp(20px, 3vh, 36px); }

.st-hero .h { max-width: 17ch; }
.st-hero .h .dim { color: color-mix(in srgb, var(--text) 52%, var(--surface)); }
.st-hero-cta { display: flex; align-items: center; gap: clamp(20px, 3vw, 44px); margin-top: clamp(24px, 4vh, 56px); flex-wrap: wrap; }
.st-cue { font-family: var(--font-body); font-weight: 300; text-transform: uppercase; letter-spacing: .24em; font-size: 12px; opacity: .55; animation: cue 2s ease-in-out infinite; }
@keyframes cue { 0%,100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(5px); opacity: .95; } }
.anim-off .st-cue { animation: none; }
.st-hero-foot { display: flex; flex-wrap: wrap; gap: 10px clamp(22px, 3vw, 50px); margin-top: clamp(28px, 5vh, 72px); }
.st-hero-foot span { font-family: var(--font-body); font-weight: 300; text-transform: uppercase; letter-spacing: .2em; font-size: clamp(10px, .9vw, 12px); opacity: .55; }

.sec-head { display: flex; flex-direction: column; gap: var(--gap-4); }

/* ---------- POSITIONING TRIPLE ---------- */
.triple { margin-top: clamp(48px, 8vh, 104px); display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 4vw, 68px); }
.triple-cell { border-top: 1px solid color-mix(in srgb, currentColor 28%, transparent); padding-top: var(--gap-3); }
.triple-k { font-family: var(--font-body); font-weight: 300; letter-spacing: .14em; font-size: 12px; opacity: .5; }
.triple-h { font-family: var(--font-body); font-weight: 400; text-transform: none; letter-spacing: -.025em; font-size: clamp(24px, 2.5vw, 38px); line-height: 1.06; margin: var(--gap-3) 0; }
.triple-d { font-family: var(--font-body); font-size: clamp(15px, 1.3vw, 18px); line-height: 1.55; opacity: .8; }

/* ---------- STACKING DECK ---------- */
.deck { margin-top: clamp(40px, 6vh, 88px); }
.deck-card { position: sticky; min-height: clamp(470px, 78vh, 700px); height: auto; margin: 0 0 clamp(28px, 5vh, 60px); background: var(--surface); color: var(--text); will-change: transform, filter; transform-origin: center top; overflow: hidden; }
.deck-card .bleed { inset: 0; }
.deck-in { min-height: 100%; display: flex; flex-direction: column; padding: clamp(32px, 4.4vw, 80px); position: relative; z-index: 2; }
.deck-head { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; font-family: var(--font-body); font-weight: 300; text-transform: uppercase; letter-spacing: .22em; font-size: clamp(11px, .95vw, 13px); opacity: .68; }
.deck-body { margin-top: auto; }
.deck-head + .deck-body .deck-name, .deck-name { margin-top: 0; }
.deck-head { margin-bottom: clamp(28px, 4vh, 52px); }
.deck-name { font-family: var(--font-body); font-weight: 400; text-transform: none; letter-spacing: -.035em; line-height: .98; margin: 0; font-size: clamp(36px, 5.4vw, 90px); }
.deck-who { font-family: var(--font-body); font-weight: 300; text-transform: uppercase; letter-spacing: .16em; font-size: 12px; margin: var(--gap-3) 0 0; opacity: .8; }
.deck-desc { font-family: var(--font-body); font-size: clamp(16px, 1.4vw, 21px); line-height: 1.55; max-width: 64ch; margin: var(--gap-4) 0 0; opacity: .85; }
.deck-foot { margin-top: clamp(28px, 4vh, 48px); display: flex; flex-direction: column; align-items: flex-start; gap: clamp(20px, 3vh, 32px); }
.deck-deliv { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 10px; }
.deck-deliv li { font-family: var(--font-body); font-size: clamp(12px, 1vw, 14px); padding: 8px 14px; border: 1px solid color-mix(in srgb, currentColor 30%, transparent); border-radius: 999px; }
@media (prefers-reduced-motion: reduce) { .deck-card { transform: none !important; filter: none !important; } }

/* ---------- FRAMEWORK ---------- */
.fw { display: grid; grid-template-columns: .78fr 1.22fr; gap: clamp(32px, 6vw, 120px); align-items: start; margin-top: clamp(40px, 6vh, 88px); }
.fw-index { position: sticky; top: 38vh; align-self: start; margin-top: clamp(120px, 19vh, 240px); }
.fw-index-label { font-family: var(--font-body); font-weight: 300; text-transform: uppercase; letter-spacing: .18em; font-size: 12px; opacity: .5; }
.fw-index-list { list-style: none; margin: var(--gap-4) 0 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.fw-index-list li { display: flex; gap: 14px; align-items: baseline; opacity: .28; transition: opacity .55s ease, transform .55s cubic-bezier(.2,.8,.2,1); }
.fw-index-list li.on { opacity: 1; transform: translateX(9px); }
.fw-index-k { font-family: var(--font-body); font-weight: 500; font-variant-numeric: tabular-nums; font-size: 13px; }
.fw-index-t { font-family: var(--font-body); font-weight: 400; text-transform: none; letter-spacing: -.025em; font-size: clamp(18px, 1.7vw, 25px); line-height: 1.1; }
.fw-steps { display: flex; flex-direction: column; }
.fw-step { min-height: 68vh; display: flex; flex-direction: column; justify-content: center; padding: clamp(24px, 5vh, 60px) 0; opacity: .22; transition: opacity .6s ease; }
.fw-step.on { opacity: 1; }
.fw-step-k { font-family: var(--font-body); font-weight: 300; letter-spacing: .16em; font-size: 12px; opacity: .55; }
.fw-step-t { font-family: var(--font-body); font-weight: 400; text-transform: none; letter-spacing: -.035em; line-height: 1.14; font-size: clamp(32px, 4.6vw, 74px); margin: var(--gap-3) 0 0; }
.fw-step-d { font-family: var(--font-body); font-size: clamp(16px, 1.5vw, 21px); line-height: 1.55; max-width: 44ch; margin: var(--gap-4) 0 0; opacity: .82; }
.anim-off .fw-step { opacity: 1; }

/* ---------- WORK ---------- */
.work-list { margin-top: clamp(40px, 6vh, 88px); display: flex; flex-direction: column; }
.work-row { display: grid; grid-template-columns: minmax(0,.9fr) 1.4fr minmax(0,.6fr); gap: clamp(20px, 4vw, 60px); align-items: center; padding: clamp(26px, 3.4vw, 52px) 0; border-top: 1px solid color-mix(in srgb, currentColor 24%, transparent); transition: padding-left .55s cubic-bezier(.2,.8,.2,1); position: relative; }
.work-row:last-child { border-bottom: 1px solid color-mix(in srgb, currentColor 24%, transparent); }
.work-row:hover { padding-left: clamp(10px, 2vw, 42px); }
.work-client { font-family: var(--font-body); font-weight: 400; text-transform: none; letter-spacing: -.03em; font-size: clamp(28px, 3.6vw, 58px); line-height: 1.02; }
.work-tags { display: flex; flex-wrap: wrap; gap: 6px 8px; margin-top: 12px; }
.work-tags span { font-family: var(--font-body); font-weight: 300; font-size: 11px; text-transform: uppercase; letter-spacing: .14em; opacity: .5; padding: 4px 11px; border: 1px solid color-mix(in srgb, currentColor 22%, transparent); border-radius: 999px; }
.work-detail { font-family: var(--font-body); font-size: clamp(15px, 1.35vw, 19px); line-height: 1.55; opacity: .8; }
.work-num { text-align: right; }
.work-num strong { font-family: var(--font-body); font-weight: 400; font-size: clamp(28px, 3.2vw, 52px); letter-spacing: -.03em; display: block; line-height: 1; }
.work-num span { font-family: var(--font-body); font-size: 12px; opacity: .55; }

/* ---------- RESULTS ---------- */
.results { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 4vw, 70px); margin-top: clamp(36px, 5vh, 68px); }
.result { display: flex; flex-direction: column; gap: 10px; }
.result-num { font-family: var(--font-body); font-weight: 400; letter-spacing: -.045em; line-height: .9; font-size: clamp(52px, 7.6vw, 128px); }
.result-cap { font-family: var(--font-body); font-size: clamp(15px, 1.3vw, 18px); line-height: 1.45; opacity: .8; }
.result-client { font-family: var(--font-body); font-weight: 300; text-transform: uppercase; letter-spacing: .18em; font-size: 11px; opacity: .45; }

/* ---------- QUOTE ---------- */
.quote p { font-family: var(--font-body); font-weight: 400; text-transform: none; letter-spacing: -.03em; line-height: 1.14; font-size: clamp(26px, 3.8vw, 62px); margin: 0; max-width: 22ch; }
/* the story quote breaks over three lines so it sits with the taller portrait */
@media (min-width: 861px) { .story-top .quote p { max-width: 15ch; } }
.quote footer { font-family: var(--font-body); font-weight: 300; text-transform: uppercase; letter-spacing: .2em; font-size: 12px; opacity: .55; margin-top: var(--gap-4); }

/* ---------- FAQ ---------- */
.faq-wrap { display: grid; grid-template-columns: .7fr 1.3fr; gap: clamp(32px, 6vw, 100px); align-items: start; }
.faq-head { position: sticky; top: clamp(110px, 18vh, 210px); }
.faq-list { display: flex; flex-direction: column; }
.faq-row { border-top: 1px solid color-mix(in srgb, currentColor 24%, transparent); }
.faq-row:last-child { border-bottom: 1px solid color-mix(in srgb, currentColor 24%, transparent); }
.faq-q { width: 100%; background: none; border: 0; cursor: pointer; color: inherit; display: flex; justify-content: space-between; align-items: center; gap: 20px; text-align: left; padding: clamp(20px, 2.6vw, 34px) 0; font-family: var(--font-body); font-weight: 400; font-size: clamp(18px, 1.8vw, 26px); letter-spacing: -.02em; }
.faq-mk { font-weight: 300; font-size: 1.4em; opacity: .5; flex: none; transition: transform .45s cubic-bezier(.4,0,.2,1); }
.faq-row.open .faq-mk { transform: rotate(135deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .55s cubic-bezier(.4,0,.2,1); }
.faq-row.open .faq-a { max-height: 340px; }
.faq-a p { font-family: var(--font-body); font-size: clamp(15px, 1.4vw, 19px); line-height: 1.65; max-width: 58ch; margin: 0 0 clamp(20px, 2.6vw, 34px); opacity: .82; }

/* ---------- CLOSE / CTA ---------- */
.st-close { text-align: center; }
.st-close .wrap { display: flex; flex-direction: column; align-items: center; }
.st-close .display { max-width: 15ch; }
.st-mail { font-family: var(--font-body); font-size: clamp(16px, 1.4vw, 20px); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; opacity: .85; }

/* ---------- CONTACT (KOTA-structure: light field + corner colour bleed) ---------- */
/* light inverse pair — blush surface, olive text: the quiet near-white field */
.st.ct-page { --surface: var(--blush); --text: var(--olive); }
.ct-glow { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.ct-glow i { position: absolute; display: block; border-radius: 50%; filter: blur(90px); will-change: transform; }
.ct-glow i:nth-child(1) { width: 90vw; height: 90vw; right: -26vw; bottom: -44vw; background: var(--candy); opacity: .95; animation: ctG1 30s ease-in-out infinite alternate; }
.ct-glow i:nth-child(2) { width: 62vw; height: 62vw; right: -8vw; bottom: -20vw; background: var(--flame); opacity: .72; animation: ctG2 26s ease-in-out infinite alternate; }
.ct-glow i:nth-child(3) { width: 34vw; height: 34vw; right: -6vw; bottom: 4vw; background: var(--sky); opacity: .6; animation: ctG3 34s ease-in-out infinite alternate; }
@keyframes ctG1 { to { transform: translate3d(-6vw, -5vh, 0) scale(1.12); } }
@keyframes ctG2 { to { transform: translate3d(-9vw, -8vh, 0) scale(1.18); } }
@keyframes ctG3 { to { transform: translate3d(-7vw, 6vh, 0) scale(1.25); } }
.anim-off .ct-glow i { animation: none; }
@media (prefers-reduced-motion: reduce) { .ct-glow i { animation: none; } }

.ct-hero { min-height: 100svh; display: flex; flex-direction: column; justify-content: space-between; gap: clamp(24px, 4vh, 64px); padding: clamp(104px, 17vh, 200px) 0 clamp(40px, 7vh, 96px); }
/* the chips must always be in view: cap the headline block and let the gap flex */
.ct-hero > .wrap:first-of-type { flex: 0 1 auto; }
.ct-hero > .wrap:last-of-type { flex: 0 0 auto; }
.st .ct-hero-h, .st h1.ct-hero-h { font-family: var(--font-body); font-weight: 300; text-transform: none; letter-spacing: -.03em; line-height: 1.02; margin: 0; font-size: clamp(30px, min(6.6vw, 7.4vh), 116px); max-width: 15ch; }
.ct-ask { font-family: var(--font-body); font-weight: 300; letter-spacing: -.02em; font-size: clamp(20px, min(3.2vw, 4.4vh), 52px); margin: 0 0 clamp(14px, 2.4vh, 30px); }
.ct-chips { display: flex; flex-wrap: wrap; gap: 12px; }
.ct-chip { font-family: var(--font-body); font-weight: 400; font-size: clamp(13px, 1.15vw, 17px); padding: 13px 26px; border-radius: 999px; border: 1px solid currentColor; background: transparent; color: inherit; cursor: pointer; transition: background .35s cubic-bezier(.4,0,.2,1), color .35s ease; white-space: nowrap; }
.ct-chip:hover { background: color-mix(in srgb, currentColor 12%, transparent); }
.ct-chip.on { background: var(--text); color: var(--surface); }
.ct-arrow { position: absolute; right: clamp(24px, 5vw, 88px); bottom: clamp(40px, 7vh, 80px); width: clamp(48px, 6vw, 92px); height: clamp(48px, 6vw, 92px); opacity: .9; }
.ct-arrow svg { width: 100%; height: 100%; }

/* the form grid — three columns, underline fields, exactly like the reference */
.ct-form { margin-top: clamp(24px, 4vh, 48px); display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 3.2vw, 52px) clamp(24px, 3vw, 48px); align-items: end; }
.ct-f { display: flex; flex-direction: column; }
.ct-f.span2 { grid-column: span 2; }
.ct-f.span3 { grid-column: span 3; }
.ct-f input, .ct-f textarea { background: transparent; border: 0; border-bottom: 1px solid currentColor; color: inherit; font-family: var(--font-body); font-weight: 300; font-size: clamp(19px, 1.9vw, 30px); letter-spacing: -.02em; padding: 6px 0 14px; outline: none; resize: vertical; }
.ct-f input::placeholder, .ct-f textarea::placeholder { color: currentColor; opacity: 1; }
.ct-f input:focus, .ct-f textarea:focus { border-bottom-width: 2px; }
.ct-hint { font-family: var(--font-body); font-size: clamp(12px, 1vw, 14px); opacity: 1; margin: 12px 0 0; }
.ct-hint a { text-decoration: underline; text-underline-offset: 3px; }
.ct-consent { grid-column: span 2; display: flex; flex-direction: column; gap: 12px; margin-top: clamp(12px, 2vh, 24px); }
.ct-consent label { display: flex; align-items: flex-start; gap: 12px; font-family: var(--font-body); font-size: clamp(13px, 1.1vw, 15px); line-height: 1.45; cursor: pointer; }
.ct-consent input { appearance: none; -webkit-appearance: none; width: 16px; height: 16px; border: 1px solid currentColor; border-radius: 50%; margin: 2px 0 0; flex: none; cursor: pointer; transition: background .3s ease; }
.ct-consent input:checked { background: currentColor; box-shadow: inset 0 0 0 3px var(--surface); }
.ct-consent a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.ct-submit { display: flex; justify-content: flex-end; align-items: flex-end; }
.ct-submit .btn { background: var(--text); color: var(--surface); border-color: var(--text); padding: 19px 44px; font-size: clamp(16px, 1.4vw, 21px); }
.ct-submit .btn:hover { background: transparent; color: var(--text); }
.ct-submit .btn[disabled] { opacity: .55; cursor: default; pointer-events: none; }
.ct-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ct-err { font-family: var(--font-body); font-size: clamp(13px, 1.1vw, 15px); line-height: 1.45; margin: 0; }
.ct-done { margin-top: clamp(24px, 4vh, 48px); }
.ct-done h3 { max-width: 22ch; }
.ct-done p { font-family: var(--font-body); font-weight: 300; font-size: clamp(16px, 1.4vw, 21px); line-height: 1.5; max-width: 52ch; margin: var(--gap-4, 20px) 0 0; }
@media (max-width: 860px) {
  .ct-form { grid-template-columns: 1fr; }
  .ct-f.span2, .ct-f.span3, .ct-consent { grid-column: span 1; }
  .ct-submit { justify-content: flex-start; }
  .ct-arrow { display: none; }
}

/* ---------- MANIFESTO STATEMENT (the long "what we do" description) ---------- */
.st-statement { font-family: var(--font-body); font-weight: 400; font-size: clamp(19px, 2vw, 32px); line-height: 1.42; letter-spacing: -.015em; max-width: 34ch; margin: clamp(32px, 5vh, 60px) 0 0; text-wrap: pretty; }
.st-statement .op { font-family: var(--font-accent); font-style: italic; }

/* ---------- TEAM / HELPING HANDS ---------- */
.team { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(24px, 3.4vw, 56px); margin-top: clamp(44px, 7vh, 90px); }
.team-card { display: flex; flex-direction: column; }
.team-photo { aspect-ratio: 4 / 5; background: color-mix(in srgb, currentColor 9%, transparent); display: flex; align-items: flex-end; justify-content: flex-start; padding: clamp(16px, 2vw, 26px); margin-bottom: var(--gap-4); position: relative; overflow: hidden; }
.team-photo::after { content: attr(data-ph); font-family: var(--font-body); font-weight: 300; font-size: 12px; text-transform: uppercase; letter-spacing: .18em; opacity: 1; }
.team-name { font-family: var(--font-body); font-weight: 400; text-transform: none; letter-spacing: -.03em; font-size: clamp(26px, 2.8vw, 44px); line-height: 1.04; margin: 0; }
.team-role { font-family: var(--font-body); font-weight: 300; text-transform: uppercase; letter-spacing: .18em; font-size: 12px; opacity: 1; margin: var(--gap-3) 0 0; }
.team-bio { font-family: var(--font-body); font-size: clamp(15px, 1.3vw, 18px); line-height: 1.6; opacity: .92; margin: var(--gap-3) 0 0; max-width: 34ch; }
.team-tags { display: flex; flex-wrap: wrap; gap: 6px 8px; margin-top: clamp(20px, 3vh, 32px); }
.team-tags span { font-family: var(--font-body); font-weight: 300; font-size: 12px; text-transform: uppercase; letter-spacing: .14em; opacity: 1; padding: 5px 12px; border: 1px solid color-mix(in srgb, currentColor 40%, transparent); border-radius: 999px; }
@media (max-width: 760px) { .team { grid-template-columns: 1fr; } }

/* ---------- STORY QUOTE (founder storytelling) ---------- */
.story { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(28px, 4vw, 80px); margin-top: clamp(40px, 6vh, 80px); }
.story p { font-family: var(--font-body); font-weight: 400; font-size: clamp(17px, 1.6vw, 23px); line-height: 1.5; letter-spacing: -.01em; margin: 0; opacity: .9; }
@media (max-width: 760px) { .story { grid-template-columns: 1fr; } }

/* ---------- WHAT WE DO (reference layout: headline left, short note right, 3 cards) ---------- */
.wd { margin-top: clamp(28px, 4vh, 56px); display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(24px, 4vw, 72px); align-items: start; }
.wd > .display { margin-top: 0; }
.wd-note { font-family: var(--font-body); font-size: clamp(15px, 1.2vw, 18px); line-height: 1.6; margin: 0; max-width: 52ch; }
@media (max-width: 900px) { .wd { grid-template-columns: 1fr; } .wd-note { justify-self: start; } }

/* ---------- USP CARDS (numbered, two-word name, one line) ---------- */
.usp { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: clamp(12px, 1.6vw, 28px); align-items: stretch; margin-top: clamp(44px, 7vh, 96px); }
.usp-x { align-self: center; font-family: var(--font-body); font-weight: 300; font-size: clamp(18px, 1.8vw, 28px); opacity: .5; }
.usp-cell { background: color-mix(in srgb, var(--text) 8%, transparent); padding: clamp(24px, 2.6vw, 44px); display: flex; flex-direction: column; min-height: clamp(300px, 38vh, 420px); transition: background .5s cubic-bezier(.4,0,.2,1); }
.usp-cell:hover { background: color-mix(in srgb, var(--text) 14%, transparent); }
.usp-k { font-family: var(--font-body); font-weight: 300; letter-spacing: .1em; font-size: 13px; opacity: .7; }
/* the description is pushed to the cell's foot by margin-top:auto, which becomes
   0 as soon as the copy fills the cell and leaves the heading sitting straight on
   the text. The heading carries its own bottom margin so the gap always holds. */
.usp-h { font-family: var(--font-body); font-weight: 400; text-transform: none; letter-spacing: -.03em; font-size: clamp(30px, 3.4vw, 54px); line-height: 1.02; margin: var(--gap-4) 0 var(--gap-3); max-width: 9ch; }
.usp-h .mark { background: none; color: inherit; padding: 0; }
.usp-d { font-family: var(--font-body); font-size: clamp(14px, 1.15vw, 17px); line-height: 1.5; opacity: .85; margin: auto 0 0; max-width: 30ch; }
/* stacked, every cell still takes the height of the tallest one: three rows of
   1fr instead of three rows sized to their own copy */
@media (max-width: 900px) { .usp { grid-template-columns: 1fr; grid-auto-rows: 1fr; } .usp-x { display: none; } .usp-h { max-width: none; } }
/* contact rows: keep the number on one line */
.triple-h.one-line { font-size: clamp(19px, 1.75vw, 27px); white-space: nowrap; }

/* ---------- FOOTER ---------- */
/* ---------- AGENCY SHEET (sticky card that rides up over the story, like the deck) ---------- */
/* the story pins while the sheet scrolls up over it and covers it.
   NOTE: sticky travel comes from real content-box height in the shared parent —
   padding on the stage would NOT create any runway. */
.agency-stack { position: relative; padding-bottom: clamp(24px, 4vh, 56px); }
.story-pin { position: sticky; top: clamp(96px, 14vh, 150px); z-index: 1; }
.sheet-stage { position: relative; z-index: 2; margin-top: clamp(40px, 7vh, 90px); height: 180vh; }
.sheet { position: sticky; top: clamp(88px, 12vh, 130px); min-height: clamp(460px, 72vh, 660px); background: var(--surface); color: var(--text); border-radius: clamp(18px, 2.4vw, 40px); overflow: hidden; box-shadow: 0 -30px 60px -30px rgba(0,0,0,.28); }
.sheet-in { min-height: 100%; display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(28px, 4vw, 72px); padding: clamp(32px, 4.4vw, 76px); position: relative; z-index: 2; align-items: center; }
.sheet-h { font-family: var(--font-body); font-weight: 400; letter-spacing: -.035em; line-height: 1.02; font-size: clamp(34px, 4.8vw, 78px); margin: 0; }
.sheet-d { font-family: var(--font-body); font-size: clamp(16px, 1.4vw, 21px); line-height: 1.55; margin: clamp(20px, 3vh, 36px) 0 0; max-width: 44ch; opacity: .9; }
.sheet-photo { aspect-ratio: 4 / 5; width: 100%; background: color-mix(in srgb, currentColor 10%, transparent); border-radius: clamp(12px, 1.6vw, 24px); display: flex; align-items: flex-end; padding: clamp(16px, 2vw, 26px); }
.sheet-photo::after { content: attr(data-ph); font-family: var(--font-body); font-weight: 300; font-size: 12px; text-transform: uppercase; letter-spacing: .18em; }
@media (max-width: 860px) { .sheet-in { grid-template-columns: 1fr; } .sheet-photo { max-width: 320px; } }
@media (max-width: 860px) { .story-pin { position: static; } .sheet-stage { height: auto; } }
@media (prefers-reduced-motion: reduce) { .story-pin { position: static; } .sheet-stage { height: auto; } }

/* ---------- COMPACT PACKAGE LIST (home: brief, precise) ---------- */
.pk-list { margin-top: clamp(40px, 6vh, 80px); display: flex; flex-direction: column; }
.pk-row { display: grid; grid-template-columns: 48px minmax(0, .8fr) 1.4fr; gap: clamp(16px, 3vw, 48px); align-items: baseline; padding: clamp(22px, 2.8vw, 38px) 0; border-top: 1px solid color-mix(in srgb, currentColor 24%, transparent); transition: padding-left .5s cubic-bezier(.2,.8,.2,1); }
.pk-row:last-child { border-bottom: 1px solid color-mix(in srgb, currentColor 24%, transparent); }
.pk-row:hover { padding-left: clamp(8px, 1.6vw, 28px); }
.pk-n { font-family: var(--font-body); font-weight: 300; font-variant-numeric: tabular-nums; font-size: 13px; opacity: .6; }
.pk-name { font-family: var(--font-body); font-weight: 400; letter-spacing: -.03em; font-size: clamp(22px, 2.4vw, 38px); line-height: 1.04; }
.pk-short { font-family: var(--font-body); font-size: clamp(15px, 1.3vw, 18px); line-height: 1.55; opacity: .85; }
@media (max-width: 760px) { .pk-row { grid-template-columns: 40px 1fr; } .pk-short { grid-column: 2; } }

/* ---------- SIGNATURE SHAPE (one oversized corner, like the reference) ---------- */
.shape, .usp-cell, .pkx-panel, .deck-card, .sheet, .team-photo, .sheet-photo {
  border-radius: 4px clamp(40px, 6vw, 104px) 4px 4px;
}

/* ---------- PACKAGE EXPLORER (click-through tabs, KOTA-style) ---------- */
.pkx { margin-top: clamp(36px, 5vh, 68px); }
.pkx-tabs { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(8px, 1vw, 14px); }
.pkx-tab { text-align: center; }
@media (max-width: 860px) { .pkx-tabs { grid-template-columns: 1fr 1fr; } }
.pkx-tab { font-family: var(--font-body); font-weight: 400; font-size: clamp(13px, 1.1vw, 16px); padding: 12px 24px; border-radius: 999px; border: 1px solid color-mix(in srgb, currentColor 40%, transparent); background: transparent; color: inherit; cursor: pointer; transition: background .4s cubic-bezier(.4,0,.2,1), color .4s ease, border-color .4s ease; white-space: nowrap; }
.pkx-tab:hover { border-color: currentColor; }
.pkx-tab.on { background: var(--text); color: var(--surface); border-color: var(--text); }
.pkx-stage { position: relative; margin-top: clamp(28px, 4vh, 52px); }
.pkx-nav { display: flex; gap: clamp(14px, 2vw, 26px); justify-content: flex-end; margin-bottom: clamp(14px, 2vh, 22px); }
.pkx-arrow { border: 0; background: none; color: inherit; cursor: pointer; padding: 4px 8px; font-family: var(--font-body); font-weight: 300; font-size: clamp(24px, 2.6vw, 38px); line-height: 1; opacity: .55; transition: opacity .3s ease, transform .3s cubic-bezier(.2,.8,.2,1); }
.pkx-arrow:hover { opacity: 1; }
.pkx-arrow.prev:hover { transform: translateX(-4px); }
.pkx-arrow.next:hover { transform: translateX(4px); }
.pkx-panel { position: relative; overflow: hidden; min-height: clamp(400px, 56vh, 560px); display: flex; flex-direction: column; }
.pkx-in { position: relative; z-index: 2; display: flex; flex-direction: column; height: 100%; min-height: inherit; padding: clamp(30px, 3.6vw, 64px); }
.pkx-top { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; }
.pkx-idx, .pkx-tag { font-family: var(--font-body); font-weight: 300; text-transform: uppercase; letter-spacing: .2em; font-size: 12px; margin: 0; }
.pkx-name { font-family: var(--font-body); font-weight: 400; letter-spacing: -.035em; line-height: 1.02; font-size: clamp(34px, 4.4vw, 74px); margin: clamp(28px, 4vh, 52px) 0 0; max-width: 22ch; }
.pkx-desc { font-family: var(--font-body); font-size: clamp(15px, 1.3vw, 19px); line-height: 1.55; margin: auto 0 0; max-width: 52ch; opacity: .9; }
.pkx-cta { margin-top: clamp(24px, 3.4vh, 40px); }
.pkx-dots { display: flex; gap: 8px; justify-content: center; margin-top: clamp(20px, 3vh, 32px); }
.pkx-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .25; border: 0; padding: 0; cursor: pointer; transition: opacity .3s ease, transform .3s ease; }
.pkx-dot.on { opacity: 1; transform: scale(1.35); }
.pkx-fade { animation: pkxIn .5s cubic-bezier(.2,.7,.2,1); }
@keyframes pkxIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.anim-off .pkx-fade { animation: none; }
@media (max-width: 860px) {
  .pkx-stage { grid-template-columns: 1fr; }
  .pkx-arrow { display: none; }
}

/* ---------- FOOTER (bold, catchy: a big statement + tight meta row) ---------- */
.st-foot { background: var(--text); color: var(--surface); padding: clamp(56px, 8vw, 120px) clamp(24px, 5vw, 88px) clamp(24px, 2.6vw, 40px); position: relative; z-index: 2; overflow: hidden; }
.st-foot-cta { display: block; text-decoration: none; color: inherit; }
.st-foot-big { font-family: var(--font-display); font-weight: 900; letter-spacing: -.04em; line-height: .86; font-size: clamp(44px, 10vw, 168px); margin: 0; display: flex; align-items: baseline; gap: .12em; flex-wrap: wrap; }
.st-foot-big .ar { display: inline-block; transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.st-foot-cta:hover .ar { transform: translateX(.18em); }
.st-foot-sub { font-family: var(--font-accent); font-style: italic; font-size: clamp(16px, 1.5vw, 22px); opacity: .85; margin: 0; max-width: 26ch; }
.st-foot-rule { height: 1px; background: color-mix(in srgb, currentColor 28%, transparent); margin: clamp(40px, 6vw, 80px) 0 clamp(28px, 4vw, 48px); }
.st-foot-grid { display: grid; grid-template-columns: .85fr .95fr .9fr 1.3fr; gap: clamp(24px, 3vw, 56px); align-items: start; }
.st-foot-brand { display: flex; justify-content: flex-start; margin: 0 0 clamp(64px, 11vh, 150px); }
.st-foot-brand .st-foot-mark { transform: translateX(-6.708%); margin-inline: 0; }

.st-foot-mark { margin-inline: auto; width: min(100%, 30ch); aspect-ratio: 974 / 243; height: auto; background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; display: block; transform: translateX(-6.708%); }
.st-foot-col { display: flex; flex-direction: column; gap: 10px; align-items: start; }
.st-foot-col .h { font-family: var(--font-body); font-weight: 300; text-transform: uppercase; letter-spacing: .2em; font-size: 11px; opacity: .65; margin-bottom: 6px; }
.st-foot-col a, .st-foot-col span.v { font-family: var(--font-body); font-size: clamp(14px, 1.15vw, 16px); opacity: .95; white-space: nowrap; }
.st-foot-col a:hover { text-decoration: underline; text-underline-offset: 4px; }
.st-foot-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 20px; font-size: 12px; opacity: .6; padding-top: clamp(22px, 3vw, 34px); margin-top: clamp(32px, 4.5vw, 60px); border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent); }
@media (max-width: 1000px) { .st-foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .st-foot-grid { grid-template-columns: 1fr; } }

/* ---------- SITE SWITCH ---------- */
.st-switch { position: fixed; right: clamp(16px, 3vw, 34px); bottom: clamp(16px, 3vw, 34px); z-index: 300; font-family: var(--font-body); font-weight: 500; font-size: 13px; letter-spacing: .03em; padding: 12px 18px; border-radius: 999px; background: var(--text); color: var(--surface); box-shadow: 0 8px 30px rgba(0,0,0,.16); display: inline-flex; align-items: center; gap: 8px; transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.st-switch:hover { transform: translateY(-3px); }

/* ---------- DRAWER ---------- */
.st-drawer { position: fixed; inset: 0; z-index: 190; background: var(--surface); color: var(--text); transform: translateY(-100%); transition: transform .6s cubic-bezier(.72,0,.28,1); display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 0 clamp(24px, 6vw, 60px); }
.st-drawer.open { transform: none; }
.st-drawer a { font-family: var(--font-body); font-weight: 400; text-transform: none; letter-spacing: -.035em; font-size: clamp(38px, 10vw, 78px); line-height: 1.04; cursor: pointer; }

/* contact */
.st-form { display: grid; gap: var(--gap-4); margin-top: clamp(36px, 5vh, 70px); max-width: 640px; }
.st-field { display: flex; flex-direction: column; gap: 8px; }
.st-field label { font-family: var(--font-body); font-weight: 300; text-transform: uppercase; letter-spacing: .16em; font-size: 11px; opacity: .55; }
.st-field input, .st-field textarea { background: color-mix(in srgb, var(--text) 7%, transparent); border: 0; border-bottom: 1px solid color-mix(in srgb, currentColor 25%, transparent); color: inherit; font-family: var(--font-body); font-size: clamp(16px, 1.4vw, 20px); padding: 15px 16px; outline: none; transition: background .3s ease, border-color .3s ease; }
.st-field input:focus, .st-field textarea:focus { background: color-mix(in srgb, var(--text) 13%, transparent); border-color: currentColor; }
.contact-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 6vw, 100px); align-items: start; }
.contact-meta { display: flex; flex-direction: column; gap: var(--gap-4); margin-top: clamp(36px, 5vh, 70px); }
.contact-meta .row .h { font-family: var(--font-body); font-weight: 300; text-transform: uppercase; letter-spacing: .18em; font-size: 11px; opacity: .5; }
.contact-meta .row a, .contact-meta .row span.v { font-family: var(--font-body); font-weight: 400; text-transform: none; letter-spacing: -.03em; font-size: clamp(21px, 2.2vw, 34px); display: block; margin-top: 6px; }

@media (max-width: 1000px) { .contact-grid { grid-template-columns: 1fr; } }
@media (max-width: 900px) {
  .fw { grid-template-columns: 1fr; } .fw-index { position: static; } .fw-index-list { display: none; }
  .fw-step { min-height: 0; opacity: 1; padding: clamp(28px,6vh,56px) 0; }
  .faq-wrap { grid-template-columns: 1fr; } .faq-head { position: static; }
}
@media (max-width: 760px) {
  .st-nav-links { display: none; } .st-burger { display: flex; }
  .triple, .results { grid-template-columns: 1fr; }
  .work-row { grid-template-columns: 1fr; gap: 10px; } .work-num { text-align: left; }
  .deck-foot { flex-direction: column; align-items: flex-start; }
}

/* ---------- PLAYGROUND (knockable pills + cherry, like the reference) ---------- */
.pg { position: relative; height: 100svh; min-height: 620px; overflow: hidden; cursor: default; margin: 0 0 clamp(48px, 8vh, 110px); padding: clamp(24px, 4vh, 56px) 0; }
.pg-item { position: absolute; top: 0; left: 0; will-change: transform; user-select: none; display: block; }
.pg-pill { display: inline-flex; align-items: center; padding: 14px 26px; border-radius: 999px; background: var(--surface); color: var(--text); border: 1px solid currentColor; font-family: var(--font-body); font-weight: 400; font-size: clamp(14px, 1.3vw, 19px); white-space: nowrap; }
.pg-pill.alt { background: var(--text); color: var(--surface); border-color: var(--text); }
.pg-cherry { display: block; width: clamp(90px, 11vw, 168px); height: clamp(90px, 11vw, 168px); background-color: var(--text); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; }
.pg-hint { position: absolute; left: 50%; bottom: clamp(18px, 3vh, 34px); transform: translateX(-50%); font-family: var(--font-body); font-weight: 300; text-transform: uppercase; letter-spacing: .22em; font-size: 11px; opacity: .5; z-index: 3; }
@media (prefers-reduced-motion: reduce) { .pg { height: auto; } }

/* ---------- AGENCY: me + photo ---------- */
.me-row { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(28px, 5vw, 90px); align-items: center; }
.me-photo { aspect-ratio: 4 / 5; width: 100%; background: color-mix(in srgb, currentColor 10%, transparent); border-radius: 4px clamp(40px, 6vw, 104px) 4px 4px; display: flex; align-items: flex-end; padding: clamp(16px, 2vw, 26px); }
.me-photo::after { content: attr(data-ph); font-family: var(--font-body); font-weight: 300; font-size: 12px; text-transform: uppercase; letter-spacing: .18em; }
@media (max-width: 860px) { .me-row { grid-template-columns: 1fr; } .me-photo { max-width: 340px; } }

/* playground copy sits in the middle; pills fly around it */
.pg-copy { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; pointer-events: none; padding: 0 clamp(24px, 5vw, 88px); }
.pg-copy > * { width: 100%; max-width: 1340px; }
.st .pg-copy .display, .st .pg-copy h2.display { max-width: 20ch; margin-inline: auto; }
.pg-copy .display { max-width: 18ch; }

/* ---------- LEGAL PAGES ---------- */
.legal { display: flex; flex-direction: column; }
.legal-row { display: grid; grid-template-columns: minmax(0, .7fr) 1.3fr; gap: clamp(20px, 4vw, 64px); padding: clamp(24px, 3.2vw, 44px) 0; border-top: 1px solid color-mix(in srgb, currentColor 24%, transparent); }
.legal-row:last-child { border-bottom: 1px solid color-mix(in srgb, currentColor 24%, transparent); }
.legal-t { font-family: var(--font-body); font-weight: 400; letter-spacing: -.025em; font-size: clamp(20px, 2vw, 30px); line-height: 1.15; margin: 0; }
.legal-v p { font-family: var(--font-body); font-size: clamp(15px, 1.3vw, 18px); line-height: 1.6; margin: 0 0 10px; opacity: .9; max-width: 60ch; }
.legal-v p:last-child { margin-bottom: 0; }
@media (max-width: 760px) { .legal-row { grid-template-columns: 1fr; gap: 10px; } }

/* the hero colour fields bleed past their section and dissolve as you scroll */
.st-hero .bleed { position: absolute; inset: -10% -10% -60vh; -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 100%); }
.st-hero { overflow: visible; }
.pg-copy .kick { pointer-events: none; }

/* "The circle" slides up as it scrolls in */
.js .circle-band .rv { transform: translateY(56px) scale(.98); transform-origin: left top; }
.circle-band .rv.in { transform: none; }
.anim-off .circle-band .rv { transform: none !important; }
@media (prefers-reduced-motion: reduce) { .circle-band .rv { transform: none !important; } }

/* ---------- AGENCY: quote + portrait, then the full bleed statement ---------- */
.story-top { display: grid; grid-template-columns: 1.25fr .75fr; column-gap: clamp(28px, 5vw, 88px); row-gap: var(--gap-4); align-items: start; }
/* the portrait spans the quote and the story text, so no dead space builds up */
.story-portrait { grid-column: 2; grid-row: 1 / span 2; align-self: stretch; display: flex; flex-direction: column; position: relative; margin-top: calc(-1 * clamp(28px, 4.5vh, 62px)); }
.story-top > .story { grid-column: 1; grid-row: 2; }
.me-photo.tall { aspect-ratio: auto; height: auto; flex: 1 1 auto; min-height: clamp(420px, 66vh, 780px); }
/* the portrait uncovers itself as it scrolls in (the undress gesture) */
.story-portrait .me-photo { clip-path: inset(0 0 100% 0); transition: clip-path .9s cubic-bezier(.4,0,.2,1); }
.story-portrait.in .me-photo { clip-path: inset(0 0 0 0); }
.anim-off .story-portrait .me-photo { clip-path: none !important; }
@media (prefers-reduced-motion: reduce) { .story-portrait .me-photo { clip-path: none !important; } }
@media (max-width: 860px) { .story-top { grid-template-columns: 1fr; } .story-portrait, .story-top > .story { grid-column: 1; grid-row: auto; } .story-portrait .me-photo { max-width: 340px; } .me-photo.tall { aspect-ratio: 3 / 4; height: auto; min-height: 0; } }

/* full bleed statement band between the story and the helping hands */
.statement { position: relative; overflow: hidden; padding: clamp(40px, 7vh, 96px) 0; margin: 0; }
.statement-in { position: relative; z-index: 2; }
.statement-h { font-family: var(--font-body); font-weight: 400; letter-spacing: -.05em; line-height: 1.2; font-size: clamp(52px, 14vw, 280px); margin: 0; }

.statement-d { font-family: var(--font-body); font-size: clamp(16px, 1.5vw, 22px); line-height: 1.55; margin: clamp(28px, 4vh, 52px) 0 0; max-width: 46ch; opacity: .9; }

/* agency story reads as one column beneath the quote */
.story.one-col { grid-template-columns: 1fr; margin-top: 0; }
.story.one-col p { max-width: 42ch; }
.story.one-col p + p { margin-top: var(--gap-4); }

.anim-off @media (max-width: 860px) { }
@media (prefers-reduced-motion: reduce) { }

/* filled photo slots */
.has-img { background-size: cover; background-position: center 22%; background-repeat: no-repeat; }
.me-photo.tall.has-img { background-position: center 28%; background-size: cover; }
.has-img::after { content: none; }

/* photo credit, deliberately tiny */
.credit { display: block; margin-top: var(--gap-2); font-family: var(--font-body); font-weight: 300; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; opacity: .45; }
.story-portrait .credit { position: absolute; top: 100%; left: 0; margin-top: var(--gap-2); }
.story-portrait { flex-direction: column; }

/* ---------- CURTAIN WIPE: the statement pins, the team panel covers it ---------- */
.curtain { position: relative; }
.statement-pin { position: sticky; top: 0; min-height: 100svh; display: grid; align-content: center; margin: 0; z-index: 0; }
.curtain-panel { position: relative; z-index: 1; background: var(--surface); }
@media (max-width: 860px) {
  .statement-pin { position: static; min-height: auto; padding: clamp(96px, 17vh, 230px) 0; }
  .curtain-panel { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .statement-pin { position: static; min-height: auto; padding: clamp(96px, 17vh, 230px) 0; }
}
.anim-off .statement-pin { position: static; min-height: auto; padding: clamp(96px, 17vh, 230px) 0; }

/* short laptop screens: keep the whole hero (kicker, headline, intro, button) in view.
   Phones are this short too, but there the hero is meant to be the biggest type on
   the page, so the mobile sheet owns that end and this stays above it. */
@media (max-height: 820px) and (min-width: 761px) {
  .st .display.fs-hero, .st h1.display.fs-hero, .st-hero.sub .display.fs-hero { font-size: clamp(28px, min(6vw, 8.2vh), 96px); }
  .st-hero, .st-hero.sub, .ct-hero { padding-top: clamp(92px, 14vh, 150px); }
  .st-hero .lead, .st-hero.sub .lead { font-size: clamp(15px, 1.3vw, 18px); }
  .st-hero-foot { margin-top: clamp(20px, 3.5vh, 44px); }
}

/* once the mask reveal has run, stop clipping so a highlight band can breathe */
.rv-line.in { overflow: visible; }
.anim-off .rv-line { overflow: visible; }
/* no JS at all: nothing ever clips, nothing ever hides */
html:not(.js) .rv-line { overflow: visible; }

/* ---------- GERMAN: longer words need wider measures (+10%) ---------- */
html[lang="de"] .lead { max-width: 58ch; }
html[lang="de"] .pkx-desc { max-width: 58ch; }
html[lang="de"] .pkx-name { max-width: 24ch; }
html[lang="de"] .triple-d { max-width: 44ch; }
html[lang="de"] .usp-d { max-width: 40ch; }
html[lang="de"] .usp-h { max-width: 11ch; }
html[lang="de"] .fw-step-d { max-width: 52ch; }
html[lang="de"] .deck-desc { max-width: 70ch; }
html[lang="de"] .team-bio { max-width: 46ch; }
html[lang="de"] .story.one-col p { max-width: 46ch; }
html[lang="de"] .st-foot-sub { max-width: 29ch; }
html[lang="de"] .ct-hero-h { max-width: 17ch; }
html[lang="de"] .faq-a { max-width: 68ch; }
html[lang="de"] .st .display, html[lang="de"] .st .fs-hero { text-wrap: balance; }
/* long German compounds must never overflow their box */
.st .display, .st .fs-hero, .pkx-name, .usp-h, .triple-h, .fw-step-t, .team-name, .deck-name, .statement-h, .ct-hero-h { overflow-wrap: break-word; hyphens: manual; }

/* ---------- FOOTER: oversized statement across the base (Wickside-style) ---------- */
/* rendered as SVG text so it fits the footer edge to edge at ANY width,
   with no viewport-unit guesswork and no clipping. */
.st-foot-huge { display: block; width: 100%; height: auto; overflow: hidden; margin: 0 0 -1px; }
.st-foot-huge text {
  font-family: var(--font-display); font-weight: 900;
  font-size: 150px; letter-spacing: -.04em; fill: currentColor;
}
@media (max-width: 1000px) { .st-foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .st-foot-grid { grid-template-columns: 1fr; } }

/* ---------- FOOTER: grouped columns + signup + social line (Wickside structure) ---------- */
.st-foot-col .v { line-height: 1.5; }
.st-foot-note { font-family: var(--font-body); font-size: 13px; line-height: 1.5; opacity: .7; margin: 0 0 var(--gap-2); max-width: 34ch; }
.st-foot-form { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid color-mix(in srgb, currentColor 45%, transparent); padding-bottom: 8px; max-width: 340px; }
.st-foot-form input { flex: 1; min-width: 0; background: none; border: 0; color: inherit; font-family: var(--font-body); font-size: 15px; padding: 4px 0; outline: none; }
.st-foot-form input::placeholder { color: currentColor; opacity: .5; }
.st-foot-form button { background: none; border: 0; color: inherit; cursor: pointer; font-size: 20px; line-height: 1; padding: 0 2px; transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.st-foot-form button:hover { transform: translateX(4px); }
.st-foot-social {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 18px; cursor: pointer;
  font-family: var(--font-body);
  transition: opacity .3s ease;
}
.st-foot-social:hover { opacity: .62; }
.st-foot-social span { font-weight: 300; text-transform: uppercase; letter-spacing: .2em; font-size: 11px; opacity: .6; }
.st-foot-social strong { font-weight: 400; letter-spacing: -.02em; font-size: clamp(20px, 2.4vw, 34px); }

.st-foot-legal { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.st-foot-legal a { cursor: pointer; }
.st-foot-legal a:hover { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 1000px) { .st-foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .st-foot-grid { grid-template-columns: 1fr; } .st-foot-bar { flex-direction: column; align-items: flex-start; gap: 12px; } }

/* brand row above the columns */
.st-foot-brand { display: flex; flex-direction: column; gap: var(--gap-4); margin-bottom: clamp(40px, 6vh, 88px); }

/* ---------- FOOTER END: the word bleeds into a filled bar (Wickside) ---------- */
.st-foot-end { position: relative; margin: clamp(48px, 8vh, 120px) calc(-1 * clamp(24px, 5vw, 88px)) calc(-1 * clamp(24px, 2.6vw, 40px)); }
.st-foot-huge { display: block; width: 100%; height: auto; overflow: visible; margin: 0; }
.st-foot-huge text { font-family: var(--font-display); font-weight: 900; font-size: 150px; letter-spacing: -.04em; fill: currentColor; }
/* the bar under the word carries the TEXT colour; its links flip to the surface */
.st-foot-end .st-foot-bar { opacity: 1;
  box-sizing: border-box; width: 100%;
  margin: 0; padding: clamp(16px, 2.4vh, 26px) clamp(24px, 5vw, 88px) clamp(18px, 2.6vh, 30px);
  background: var(--surface); color: var(--text); border-top: 0;
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 24px;
}
.st-foot-end .st-foot-bar a { color: var(--text); }
/* reference request button */
.st-foot-req { display: inline-flex; align-items: center; gap: 12px; margin-top: var(--gap-2); padding: 13px 24px; border-radius: 999px; border: 1px solid currentColor; font-family: var(--font-body); font-size: 15px; cursor: pointer; transition: background .35s cubic-bezier(.4,0,.2,1), color .35s ease; }
.st-foot-req:hover { background: var(--text); color: var(--surface); }
.st-foot-req .ar { transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.st-foot-req:hover .ar { transform: translateX(4px); }

/* each glyph lifts as the cursor passes */
.bia-l { transition: none; }

/* the footer never scrolls sideways */
.st-foot { overflow-x: clip; }

/* pull the social line up close under the wordmark */

/* Instrument Serif italic must keep its natural tracking */
.st em, .st .accent, .st i, .st .quote em { letter-spacing: 0; font-style: italic; }
/* the cherry is the only cursor on desktop */
@media (hover: hover) and (pointer: fine) {
  .st, .st a, .st button, .st [data-mag], .st input, .st textarea, .st label { cursor: none; }
}

/* cursor flips to the opposite pair colour over interactive elements */
.st-cursor.big { background-color: var(--surface); }

/* 14 — every package card on services keeps the same height */
.deck-card { min-height: 640px; display: flex; flex-direction: column; }
.deck-in { display: flex; flex-direction: column; flex: 1; }

/* ---------- FLOATING MENU TOGGLE (replaces the sticky nav) ---------- */
.st-menu-toggle {
  position: fixed; top: clamp(14px, 2vw, 24px); right: clamp(20px, 5vw, 84px); z-index: 210;
  width: 54px; height: 54px; border-radius: 999px; cursor: pointer;
  background: var(--text); color: var(--surface); border: 0;
  display: grid; place-content: center; gap: 6px;
  opacity: 0; transform: scale(.7); pointer-events: none;
  transition: opacity .35s ease, transform .35s cubic-bezier(.4,0,.2,1), background .4s ease;
}
.st-menu-toggle.show, .st-menu-toggle.open { opacity: 1; transform: none; pointer-events: auto; }
.st-menu-toggle span { display: block; width: 20px; height: 1.5px; background: currentColor; transition: transform .35s cubic-bezier(.4,0,.2,1); }
.st-menu-toggle.open span:first-child { transform: translateY(3.75px) rotate(45deg); }
.st-menu-toggle.open span:last-child { transform: translateY(-3.75px) rotate(-45deg); }
.st-menu-toggle:hover { transform: scale(1.06); }
.st-drawer { z-index: 205; }
.st-drawer a.on { opacity: .45; }
.st-drawer-foot { display: flex; align-items: center; gap: clamp(20px, 3vw, 40px); margin-top: clamp(32px, 5vh, 64px); }
@media (max-width: 900px) { .st-burger { display: none; } }

/* ---------- QUIET PINNED CTA ---------- */
.st-cta-pin {
  position: fixed; left: clamp(20px, 5vw, 84px); bottom: calc(clamp(18px, 3vh, 32px) + var(--float-lift, 0px)); z-index: 210;
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 12px 22px; border-radius: 999px;
  background: var(--text); color: var(--surface);
  font-family: var(--font-body); font-weight: 400; font-size: 15px; letter-spacing: -.01em;
  opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity .4s ease, transform .4s cubic-bezier(.4,0,.2,1);
}
.st-cta-pin.show { opacity: 1; transform: none; pointer-events: auto; }
.st-cta-pin { transition: opacity .4s ease, transform .4s cubic-bezier(.4,0,.2,1), bottom .12s linear; }
.st .st-cta-pin, .st a.st-cta-pin, .st a.st-cta-pin:hover { color: var(--surface); }
.st-cta-pin .ar { transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.st-cta-pin:hover .ar { transform: translateX(4px); }

/* team portraits: responsive fill with a per-image focal point */
.team-photo.has-img { background-size: cover; background-repeat: no-repeat; }
.team-card:nth-child(1) .team-photo.has-img { background-position: center 18%; }
.team-card:nth-child(2) .team-photo.has-img { background-position: center 30%; background-size: cover; }

/* photo credits under each team portrait */
.team-photo + .credit { margin: calc(-1 * var(--gap-3)) 0 var(--gap-4); }

/* buttons do not inherit color (UA default is buttontext/white), which breaks every
   currentColor fill on a button-based mark. Anchor them to the active pair. */
.pkx-dot, .pkx-tab, .pkx-arrow, .st-burger, .st-lang button { color: inherit; }

/* the accordion trigger is a plain heading row on desktop */
.deck-tap { display: none; }
.deck-plus { display: none; }
.deck-reveal { display: contents; }

/* image frames always fill: never leave a bare strip of the panel showing */
.has-img, .team-photo.has-img, .me-photo.has-img { background-size: cover !important; background-repeat: no-repeat; }