/* Ezencia · Horizonte. The sea carries the page; chalk holds the reading.
   One family (Geist), weight is the hierarchy, one action colour per ground. */
@font-face { font-family: "Geist"; src: url("fonts/geist-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Geist"; src: url("fonts/geist-latin-ext.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --night: #0B1420;     /* the sea before the canvas draws, and the footer */
  --abyss: #050A10;
  --chalk: #F2F3F1;     /* reading ground */
  --chalk-2: #E7EAE8;
  --ink: #0E1A24;       /* deep-sea ink */
  --ink-2: #44525E;
  --line: #D3D8DB;
  --sea: #0B4A6F;       /* links and marks on chalk */
  --foam: #FFFFFF;
  --foam-2: rgba(255, 255, 255, .86);
  --foam-3: rgba(255, 255, 255, .66);
  --hair: rgba(255, 255, 255, .22);
  --wa: #0E1A24;
  --font: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --pad: clamp(20px, 5vw, 64px);
  --max: 1240px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--night); scroll-padding-top: 84px; }
body { margin: 0; font-family: var(--font); color: var(--foam); background: var(--night); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
p, li { text-wrap: pretty; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 4px; text-decoration-thickness: 1px; }
button { font: inherit; color: inherit; }
.num { font-variant-numeric: tabular-nums; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
::selection { background: #BFE0F2; color: var(--ink); }
:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 8px; }
.pill:focus-visible, .chip input:focus-visible + label { outline: 2px solid var(--foam); outline-offset: 3px; box-shadow: 0 0 0 5px rgba(14, 26, 36, .55); }
.chalk .pill:focus-visible, .bar.on-light .pill:focus-visible { outline-color: var(--ink); box-shadow: 0 0 0 5px rgba(242, 243, 241, .9); }
.skip { position: absolute; left: 12px; top: -60px; z-index: 30; background: var(--foam); color: var(--ink); padding: 10px 14px; border-radius: 999px; font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }

/* ---------- the sea ---------- */
#sea { position: fixed; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; background: linear-gradient(#1E2C4A 0, #6E5C74 34%, #E7B39C 58%, #2A3E58 62%, #0C1D2E 100%); }
.wrap { max-width: var(--max); margin: 0 auto; padding-left: max(var(--pad), env(safe-area-inset-left, 0px)); padding-right: max(var(--pad), env(safe-area-inset-right, 0px)); }

/* ---------- bar ---------- */
.bar { position: fixed; inset: 0 0 auto 0; z-index: 20; color: var(--foam); transition: color .5s var(--ease), background-color .5s var(--ease), box-shadow .5s var(--ease); }
.bar-in { max-width: calc(var(--max) + 2 * var(--pad)); margin: 0 auto; display: flex; align-items: center; gap: 16px; padding: max(12px, env(safe-area-inset-top, 0px)) max(var(--pad), env(safe-area-inset-right, 0px)) 12px max(var(--pad), env(safe-area-inset-left, 0px)); }
.bar.on-light { color: var(--ink); background: color-mix(in srgb, var(--chalk) 84%, transparent); backdrop-filter: saturate(1.5) blur(20px); -webkit-backdrop-filter: saturate(1.5) blur(20px); box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 8%, transparent); }
.mark { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 600; font-size: 17px; letter-spacing: -.01em; margin-right: auto; }
.mark img { width: 28px; height: 28px; }
.mark .ink, .bar.on-light .mark .bone { display: none; }
.bar.on-light .mark .ink { display: block; }
.nav { display: none; gap: 4px; font-size: 15px; }
.nav a { text-decoration: none; padding: 8px 12px; border-radius: 999px; color: inherit; opacity: .82; transition: opacity .3s, background-color .3s; }
.nav a:hover, .nav a[aria-current="page"] { opacity: 1; background: color-mix(in srgb, currentColor 12%, transparent); }
@media (min-width: 980px) { .nav { display: flex; } .bar .menu { display: none; } }
.menu { display: inline-grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 999px; background: none; cursor: pointer; margin-left: -6px; }
.menu svg { width: 22px; height: 22px; }
.menu .x, .bar.open .menu .m { display: none; } .bar.open .menu .x { display: block; }
@media (max-width: 979px) {
  .bar.open { color: var(--ink); background: var(--chalk); }
  .bar.open .mark .ink { display: block; } .bar.open .mark .bone { display: none; }
  .bar.open .pill.small { background: var(--ink); color: var(--foam); }
  .bar.open .nav { display: grid; position: absolute; left: 0; right: 0; top: 100%; padding: 8px max(var(--pad), env(safe-area-inset-left, 0px)) 22px; background: var(--chalk); box-shadow: 0 24px 40px -24px rgba(5, 10, 16, .45); gap: 0; font-size: 1.35rem; font-weight: 620; letter-spacing: -.02em; }
  .bar.open .nav a { padding: 14px 0; border-radius: 0; border-top: 1px solid var(--line); opacity: 1; background: none; }
}
@media (max-width: 430px) { .bar-in { gap: 6px; } .lang button { padding: 8px 4px; font-size: 13px; } .menu { margin-left: 0; width: 36px; } .bar .pill.small { padding: 0 12px; gap: 6px; } .bar .pill.small svg { width: 16px; height: 16px; } }
.lang { display: flex; gap: 0; font-size: 14px; }
.lang button { background: none; border: 0; padding: 8px 7px; cursor: pointer; opacity: .6; border-radius: 999px; }
.lang button[aria-pressed="true"] { opacity: 1; font-weight: 600; }

/* ---------- buttons ---------- */
.pill { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 50px; padding: 0 24px; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: 16.5px; letter-spacing: -.005em; border: 0; cursor: pointer; transition: transform .5s var(--ease), box-shadow .5s var(--ease), background-color .3s; }
.pill svg { width: 19px; height: 19px; flex: none; }
.pill:hover { transform: translateY(-1px); box-shadow: 0 14px 28px -16px rgba(5, 10, 16, .6); }
.pill:active { transform: translateY(0) scale(.99); }
.pill.foam { background: var(--foam); color: var(--ink); }
.pill.ink { background: var(--ink); color: var(--foam); }
.pill.small { min-height: 38px; padding: 0 15px; font-size: 14.5px; }
.bar .pill.small { background: var(--foam); color: var(--ink); }
.bar.on-light .pill.small { background: var(--ink); color: var(--foam); }
.pill.block { width: 100%; }
.link { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.link svg { width: 17px; height: 17px; transition: transform .4s var(--ease); }
.link:hover svg { transform: translateX(3px); }

/* ---------- hero over the sea ---------- */
.hero { position: relative; z-index: 1; min-height: 100svh; display: flex; flex-direction: column; padding-top: clamp(112px, 17vh, 188px); padding-bottom: 28px; }
.hero::before, .stage::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(50% - 50vw); width: 100vw; background: linear-gradient(180deg, rgba(6, 10, 20, .42) 0%, rgba(6, 10, 20, .28) 46%, rgba(6, 10, 20, .26) 66%, rgba(6, 10, 20, 0) 92%); pointer-events: none; z-index: -1; }
@media (min-width: 900px) { .hero::before, .stage::before { background: linear-gradient(90deg, rgba(6, 10, 20, .38) 0%, rgba(6, 10, 20, .22) 34%, rgba(6, 10, 20, 0) 58%), linear-gradient(180deg, rgba(6, 10, 20, .22) 0%, rgba(6, 10, 20, 0) 30%); } }
.hero.short { min-height: 0; padding-bottom: clamp(96px, 16vh, 180px); }
.hero h1 { font-size: clamp(3rem, 10.2vw, 6rem); line-height: .96; font-weight: 650; letter-spacing: -.04em; max-width: 12ch; }
.hero h1.long { font-size: clamp(2.6rem, 7.4vw, 5.2rem); max-width: 15ch; }
.lede { margin-top: clamp(18px, 3vh, 28px); font-size: clamp(1.15rem, 1.6vw, 1.45rem); line-height: 1.45; max-width: 32ch; font-weight: 420; color: var(--foam-2); }
.offer { margin-top: 18px; font-size: 1.02rem; line-height: 1.5; color: var(--foam); max-width: 40ch; }
.offer b { font-weight: 650; }
.offer .t { color: var(--foam-2); }
.acts { margin-top: clamp(22px, 3.6vh, 36px); display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.acts small, .acts .note { font-size: 14px; color: var(--foam); opacity: .9; }
.hero .link { color: var(--foam); }
.cue { margin-top: auto; align-self: center; display: inline-flex; flex-direction: column; align-items: center; gap: 10px; font-size: 13px; color: var(--foam-2); text-decoration: none; padding-top: 40px; }
.cue i { width: 1px; height: 44px; background: linear-gradient(currentColor, transparent); animation: drip 2.6s var(--ease) infinite; transform-origin: top; }
@keyframes drip { 0% { transform: scaleY(0); opacity: 0; } 30% { opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

/* ---------- the day: the sea carries the four phases ---------- */
.day { position: relative; z-index: 1; height: 470vh; }
.stage { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.stage::before { z-index: 0; } .stage > * { z-index: 1; }
.phase { position: absolute; left: max(var(--pad), env(safe-area-inset-left, 0px), calc((100% - var(--max)) / 2 + var(--pad))); right: max(var(--pad), env(safe-area-inset-right, 0px)); top: clamp(96px, 15vh, 160px); max-width: 42rem; will-change: opacity, transform, filter; }
.js .phase { opacity: 0; }
.js .phase:first-child { opacity: 1; }
.phase h2 { font-size: clamp(2.6rem, 8.4vw, 5.6rem); line-height: .98; font-weight: 650; letter-spacing: -.04em; }
.phase h2 span { display: block; font-weight: 300; }
.phase p { margin-top: 18px; font-size: clamp(1.1rem, 1.5vw, 1.35rem); line-height: 1.45; max-width: 32ch; color: var(--foam-2); }
.phase .price { margin-top: 22px; color: var(--foam); }
.phase .price b { font-size: clamp(2rem, 4vw, 3rem); font-weight: 600; letter-spacing: -.03em; margin-right: .3em; }
.phase .acts { margin-top: 20px; }
.timeline { position: absolute; left: max(var(--pad), env(safe-area-inset-left, 0px), calc((100% - var(--max)) / 2 + var(--pad))); right: max(var(--pad), env(safe-area-inset-right, 0px)); bottom: max(26px, env(safe-area-inset-bottom, 0px)); display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; font-size: 13px; color: var(--foam-3); max-width: 44rem; }
.timeline span { position: relative; padding-top: 14px; transition: color .6s var(--ease); }
.timeline span::before { content: ""; position: absolute; top: 0; left: 0; width: 7px; height: 7px; border-radius: 50%; border: 1px solid currentColor; transition: background-color .6s var(--ease); }
.timeline span.on { color: var(--foam); }
.timeline span.on::before { background: currentColor; }
@media (prefers-reduced-motion: reduce) { .day { height: auto; } .stage { position: relative; height: auto; overflow: visible; padding-block: 96px 40px; } .js .phase, .phase { position: relative; opacity: 1 !important; filter: none !important; transform: none !important; top: auto; left: auto; right: auto; padding: 0 var(--pad); margin-bottom: 72px; } .timeline { display: none; } }

/* the problem toggles: taps assemble the WhatsApp message */
.ask { margin-top: 22px; max-width: 34rem; }
.ask fieldset { border: 0; padding: 0; margin: 0; }
.ask legend { font-size: 15px; font-weight: 600; margin-bottom: 10px; padding: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip label { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px 0 12px; border-radius: 999px; border: 1px solid currentColor; cursor: pointer; font-size: 15px; font-weight: 520; transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s; }
.chip label i { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid currentColor; display: grid; place-items: center; }
.chip label i svg { width: 11px; height: 11px; opacity: 0; }
.chip input:checked + label { background: var(--foam); color: var(--ink); border-color: var(--foam); }
.chip input:checked + label i svg { opacity: 1; }

.msg { margin-top: 12px; font-size: 13.5px; line-height: 1.45; color: var(--foam-3); }
.msg q { color: var(--foam-2); }
.on-chalk .chip label { border-color: var(--line); }
.on-chalk .chip input:checked + label { background: var(--ink); color: var(--foam); border-color: var(--ink); }
.on-chalk .msg { color: var(--ink-2); } .on-chalk .msg q { color: var(--ink); }

/* ---------- chalk: the reading ground ---------- */
.chalk { position: relative; z-index: 2; background: var(--chalk); color: var(--ink); }
.sec { padding-block: clamp(96px, 13vw, 176px); }
.sec + .sec, .sec.tight { padding-top: 0; }
.big { font-size: clamp(2.4rem, 6vw, 4.9rem); line-height: 1; font-weight: 650; letter-spacing: -.038em; max-width: 16ch; }
.big .soft { font-weight: 300; }
.sub { margin-top: 22px; font-size: clamp(1.1rem, 1.5vw, 1.32rem); line-height: 1.5; color: var(--ink-2); max-width: 46ch; }
.chalk .link { color: var(--sea); }

/* spectrum: one line from consulting to your own system */
.spectrum { margin-top: clamp(56px, 8vw, 96px); position: relative; display: grid; gap: 40px; }
.spectrum li { position: relative; padding-left: 28px; }
.spectrum li::before { content: ""; position: absolute; left: 0; top: 7px; width: 11px; height: 11px; border-radius: 50%; background: var(--chalk); border: 1.5px solid var(--sea); }
.spectrum li:last-child::before { background: var(--sea); }
.spectrum::after { content: ""; position: absolute; left: 5px; top: 14px; bottom: 30px; width: 1px; background: linear-gradient(var(--sea), #8DBBD3); }
.spectrum h3 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); font-weight: 620; letter-spacing: -.03em; line-height: 1.05; }
.spectrum p { margin-top: 10px; font-size: 1.06rem; line-height: 1.5; color: var(--ink-2); max-width: 30ch; }
@media (min-width: 900px) {
  .spectrum { grid-template-columns: repeat(4, 1fr); gap: 32px; }
  .spectrum::after { left: 0; right: 0; top: 7px; bottom: auto; width: auto; height: 1px; background: linear-gradient(90deg, var(--sea), #8DBBD3); }
  .spectrum li { padding: 34px 0 0; }
  .spectrum li::before { top: 2px; z-index: 1; }
}

/* the portrait chapter: the lines light up as they pass */
.read { display: grid; gap: clamp(32px, 6vw, 96px); align-items: start; }
.read figure { border-radius: 30px; overflow: hidden; aspect-ratio: 4 / 5; max-width: 100%; background: #D9D2C6; }
.read figure img { width: 100%; height: 100%; object-fit: cover; }
.lines .l { font-size: clamp(1.9rem, 4.2vw, 3.4rem); line-height: 1.08; font-weight: 620; letter-spacing: -.035em; margin-bottom: .55em; transition: opacity .8s var(--ease); }
.js .lines .l { opacity: .18; }
.js .lines .l.lit { opacity: 1; }
.lines .note { margin-top: 1.2rem; font-size: clamp(1.05rem, 1.4vw, 1.25rem); line-height: 1.55; color: var(--ink-2); max-width: 42ch; }
.lines .acts { margin-top: 28px; }
@media (min-width: 900px) { .read { grid-template-columns: 5fr 6fr; } .read figure { position: sticky; top: 96px; } }
@media (prefers-reduced-motion: reduce) { .js .lines .l { opacity: 1; } }

/* proof */
.proof { display: grid; gap: clamp(28px, 4vw, 64px); align-items: center; }
.shot { border-radius: 22px; overflow: hidden; box-shadow: 0 30px 60px -30px rgba(14, 26, 36, .38), 0 8px 18px -10px rgba(14, 26, 36, .22); }
.proof blockquote { font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.12; font-weight: 580; letter-spacing: -.028em; max-width: 20ch; }
.stars { margin-top: 18px; display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; }
.stars svg { width: 15px; height: 15px; color: var(--ink); }
.proof .who { margin-top: 14px; color: var(--ink-2); font-size: 1.04rem; line-height: 1.55; max-width: 42ch; }
.built { margin-top: 22px; display: grid; gap: 10px; color: var(--ink-2); font-size: 1rem; line-height: 1.5; }
.built li { padding-left: 22px; position: relative; }
.built li::before { content: ""; position: absolute; left: 0; top: .62em; width: 10px; height: 1px; background: var(--sea); }
.proof .link { margin-top: 22px; }
@media (min-width: 900px) { .proof { grid-template-columns: 7fr 5fr; } }

/* the staircase: rows, the day in ink */
.rows { margin-top: clamp(48px, 6vw, 80px); border-top: 1px solid var(--line); }
.rows .label { padding: 30px 0 10px; font-size: 15px; font-weight: 600; color: var(--ink); }
.rows .label span { display: block; margin-top: 4px; font-weight: 400; color: var(--ink-2); }
.row { display: grid; grid-template-columns: 1fr auto; gap: 6px 24px; padding: 22px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.row h3 { font-size: clamp(1.15rem, 1.6vw, 1.4rem); font-weight: 620; letter-spacing: -.02em; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; }
.row .p { font-size: clamp(1.15rem, 1.6vw, 1.4rem); font-weight: 620; letter-spacing: -.02em; text-align: right; white-space: nowrap; }
.row .what, .row .terms { grid-column: 1 / -1; color: var(--ink-2); font-size: .99rem; line-height: 1.45; }
.row .terms { font-size: .92rem; }
.row .mini { grid-column: 1 / -1; display: grid; gap: 6px; margin-top: 8px; font-size: .97rem; line-height: 1.45; color: var(--ink); }
.row .mini li { padding-left: 20px; position: relative; }
.row .mini li::before { content: ""; position: absolute; left: 0; top: .62em; width: 9px; height: 1px; background: var(--sea); }
.row .go { grid-column: 1 / -1; margin-top: 8px; justify-self: start; color: var(--sea); }
.badge { font-size: 12.5px; font-weight: 600; letter-spacing: .01em; padding: 3px 10px; border-radius: 999px; background: var(--chalk-2); color: var(--ink); }
.row.core { background: var(--ink); color: var(--foam); border-radius: 22px; padding: 28px clamp(18px, 3vw, 34px); margin: 16px 0; border: 0; }
.row.core .what, .row.core .terms { color: var(--foam-2); }
.row.core .mini { color: var(--foam); }
.row.core .mini li::before { background: var(--foam-3); }
.row.core .go { color: var(--foam); }
.fine { margin-top: 22px; color: var(--ink-2); font-size: .92rem; line-height: 1.55; max-width: 70ch; }

/* pieces */
.pieces { margin-top: clamp(40px, 5vw, 64px); display: grid; gap: 0; border-top: 1px solid var(--line); }
.piece { display: grid; grid-template-columns: 1fr auto; gap: 4px 20px; padding: 20px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.piece h3 { font-size: 1.15rem; font-weight: 620; letter-spacing: -.015em; }
.piece b { font-size: 1.15rem; font-weight: 620; }
.piece p { grid-column: 1 / -1; color: var(--ink-2); line-height: 1.45; }
.piece .go { grid-column: 1 / -1; margin-top: 6px; justify-self: start; font-size: .98rem; color: var(--sea); }
@media (min-width: 900px) { .pieces { grid-template-columns: 1fr 1fr; column-gap: 56px; } }

/* doors and stance */
.doors { margin-top: clamp(48px, 6vw, 80px); display: grid; gap: 16px; }
.door { padding: 26px 26px 28px; border-radius: 22px; background: var(--chalk-2); display: grid; gap: 10px; align-content: start; }
.door h3 { font-size: 1.35rem; font-weight: 620; letter-spacing: -.02em; }
.door p { color: var(--ink-2); line-height: 1.5; }
.door .link { margin-top: 4px; }
@media (min-width: 900px) { .doors { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); } }
.stance { display: grid; gap: 26px; }
.stance li { display: grid; gap: 6px; padding-top: 18px; border-top: 1px solid var(--line); }
.stance q { quotes: none; font-size: clamp(1.3rem, 2vw, 1.6rem); font-weight: 620; letter-spacing: -.022em; line-height: 1.15; }
.stance span { color: var(--ink-2); line-height: 1.5; }
@media (min-width: 900px) { .stance { grid-template-columns: repeat(3, 1fr); column-gap: 40px; } }

/* the day page: includes, promise, rules */
.includes { display: grid; gap: clamp(36px, 5vw, 72px); }
.ticks { display: grid; gap: 14px; margin-top: 26px; }
.ticks li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; font-size: 1.06rem; line-height: 1.45; }
.ticks svg { width: 20px; height: 20px; color: var(--sea); margin-top: 2px; }
.price-big { display: grid; gap: 8px; }
.price-big b { font-size: clamp(3.4rem, 8vw, 6rem); font-weight: 600; letter-spacing: -.045em; line-height: 1; }
.price-big span { color: var(--ink-2); line-height: 1.5; max-width: 32ch; }
.promise { margin-top: 26px; padding: 26px; border-radius: 22px; background: var(--ink); color: var(--foam); display: grid; gap: 12px; }
.promise h3 { font-size: 1.3rem; font-weight: 620; letter-spacing: -.02em; }
.promise p { color: var(--foam-2); line-height: 1.55; }
.promise .pill { margin-top: 8px; justify-self: start; }
@media (min-width: 900px) { .includes { grid-template-columns: 7fr 5fr; } }
.rules { margin-top: clamp(64px, 8vw, 110px); display: grid; gap: 36px; }
.rules h3 { font-size: 1.2rem; font-weight: 620; letter-spacing: -.015em; margin-bottom: 12px; }
.rules li { color: var(--ink-2); line-height: 1.5; padding: 10px 0; border-top: 1px solid var(--line); }
@media (min-width: 900px) { .rules { grid-template-columns: repeat(3, 1fr); gap: 40px; } }

/* diff: outside in vs inside out */
.diff { margin-top: clamp(48px, 6vw, 80px); display: grid; gap: 40px; }
.diff > div { padding: 22px 0 0; display: grid; gap: 14px; align-content: start; border-top: 1px solid var(--ink); }
.diff .usual { border-top: 1px dashed var(--ink-2); }
.diff h3 { font-size: 1.3rem; font-weight: 620; }
.chain { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-weight: 600; }
.chain svg { width: 16px; height: 16px; opacity: .6; }
.diff p.q { color: var(--ink-2); line-height: 1.55; }
.diff .ours p { color: var(--ink-2); line-height: 1.55; }
@media (min-width: 900px) { .diff { grid-template-columns: 1fr 1fr; } }
.name { margin-top: clamp(56px, 7vw, 96px); padding: 34px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: grid; gap: 14px; }
.name .w { font-size: clamp(3rem, 8vw, 5.5rem); font-weight: 650; letter-spacing: -.045em; line-height: 1; }
.name .w i { font-style: normal; color: var(--sea); }
.name p { color: var(--ink-2); line-height: 1.55; max-width: 56ch; }
.steps { margin-top: clamp(40px, 5vw, 64px); display: grid; gap: 28px; counter-reset: s; }
.steps li { counter-increment: s; padding-top: 18px; border-top: 1px solid var(--line); display: grid; gap: 8px; }
.steps li::before { content: counter(s); font-weight: 600; color: var(--sea); }
.steps h3 { font-size: 1.3rem; font-weight: 620; letter-spacing: -.02em; }
.steps p { color: var(--ink-2); line-height: 1.5; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 40px; } }

/* fokus: the second door */
.mirada { display: grid; gap: 22px 64px; padding-top: 36px; border-top: 1px solid var(--ink); }
.mirada h2 { font-size: clamp(1.9rem, 3.6vw, 3rem); line-height: 1.05; font-weight: 650; letter-spacing: -.032em; max-width: 16ch; text-wrap: balance; }
.mg-b { display: grid; gap: 22px; justify-items: start; align-content: start; }
.mg-b > p:first-child { font-size: clamp(1.1rem, 1.5vw, 1.32rem); line-height: 1.5; color: var(--ink-2); max-width: 40ch; }
.mg-b .fine { margin-top: 0; }
@media (min-width: 900px) { .mirada { grid-template-columns: 1fr 1fr; } .mg-b { padding-top: 6px; } }
.fokus { text-align: center; }
.fokus h2 { margin: 0 auto; font-size: clamp(2.3rem, 6vw, 5rem); line-height: 1.02; font-weight: 300; letter-spacing: -.035em; max-width: 18ch; }
.fokus h2 b { font-weight: 650; }
.fokus p { margin: 24px auto 0; font-size: clamp(1.08rem, 1.4vw, 1.3rem); line-height: 1.55; color: var(--ink-2); max-width: 46ch; }
.fokus .rest { margin-top: 30px; color: var(--ink); }
.fokus .rest b { font-weight: 620; }
.fokus .fine { margin: 18px auto 0; }
.fokus .link { margin-top: 26px; }

/* fit */
.fit { margin-top: clamp(40px, 5vw, 64px); display: grid; gap: 40px; }
.fit > div { padding: 22px 0 0; border-top: 1px solid var(--ink); display: grid; gap: 14px; align-content: start; }
.fit .no { border-top-color: var(--line); }
.fit h3 { font-size: 1.2rem; font-weight: 620; }
.fit li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; line-height: 1.45; color: var(--ink-2); }
.fit svg { width: 18px; height: 18px; margin-top: 2px; color: var(--ink); }
@media (min-width: 900px) { .fit { grid-template-columns: 1fr 1fr; } }

/* faq */
.faq { margin-top: clamp(32px, 4vw, 56px); border-top: 1px solid var(--line); max-width: 56rem; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; padding: 22px 0; font-size: clamp(1.08rem, 1.5vw, 1.25rem); font-weight: 600; letter-spacing: -.015em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { width: 20px; height: 20px; flex: none; transition: transform .4s var(--ease); margin-top: 3px; }
.faq details[open] summary svg { transform: rotate(45deg); }
.faq details p { padding: 0 0 24px; color: var(--ink-2); line-height: 1.6; max-width: 62ch; }

/* close: the sea at night */
.close { position: relative; z-index: 1; min-height: 100svh; display: grid; place-items: center; text-align: center; padding-block: 120px; }
.close h2 { font-size: clamp(2.6rem, 8vw, 6rem); line-height: .98; font-weight: 650; letter-spacing: -.04em; max-width: 13ch; margin: 0 auto; }
.close p { margin: 22px auto 0; font-size: clamp(1.1rem, 1.5vw, 1.35rem); line-height: 1.5; color: var(--foam-2); max-width: 38ch; }
.close .pill { margin-top: 34px; }
.close .alt { margin-top: 18px; font-size: 14px; color: var(--foam-2); }
/* the sun's reflection can sit right behind the close: keep its words legible */
.close p, .close h2 { text-shadow: 0 1px 18px rgba(5, 10, 16, .55); }
.close .alt a { color: var(--foam-2); }

/* footer */
.foot { position: relative; z-index: 2; background: var(--abyss); color: var(--foam-3); font-size: 14px; padding-block: 48px max(96px, env(safe-area-inset-bottom, 0px)); }
.foot-in { display: grid; gap: 28px; }
.foot .mark { color: var(--foam); }
.foot p { margin-top: 10px; line-height: 1.6; }
.foot a { color: var(--foam-2); }
.foot nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.foot nav a { text-decoration: none; }
.foot nav a:hover { text-decoration: underline; }
.foot a.ig { text-decoration: none; border-bottom: 1px solid color-mix(in srgb, currentColor 35%, transparent); padding-block: 6px 1px; }
.foot a.ig:hover, .foot a.ig:focus-visible { border-bottom-color: currentColor; }
@media (min-width: 900px) { .foot-in { grid-template-columns: 1fr auto; align-items: end; } .foot { padding-bottom: 48px; } }

/* sticky WhatsApp on phones, once the hero has passed */
.sticky { position: fixed; z-index: 15; left: max(12px, env(safe-area-inset-left, 0px)); right: max(12px, env(safe-area-inset-right, 0px)); bottom: max(12px, env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 10px 10px 18px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 90%, transparent); color: var(--foam); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 18px 40px -20px rgba(5, 10, 16, .7); transform: translateY(140%); transition: transform .6s var(--ease); }
.sticky.show { transform: none; }
.sticky p { font-size: 14px; line-height: 1.3; }
.sticky p b { display: block; font-weight: 620; }
.sticky p span { color: var(--foam-3); }
.sticky .pill { min-height: 44px; padding: 0 18px; font-size: 15px; }
@media (min-width: 900px) { .sticky { display: none; } }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }
.phase h2 b { font-weight: 650; }
.phase h2 > span { display: block; font-weight: 300; }
.phase h2 > span span { display: inline; font-weight: inherit; }
.hero .acts small { flex-basis: 100%; }
@media (max-width: 979px) { .menu { order: 5; } }
.lang-m { display: none; }
@media (max-width: 979px) {
  .bar .lang-d { display: none; }
  .bar.open .lang-m { display: flex; gap: 6px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 15px; font-weight: 500; letter-spacing: 0; }
  .bar.open .lang-m button { padding: 8px 14px; border: 1px solid var(--line); opacity: 1; }
  .bar.open .lang-m button[aria-pressed="true"] { background: var(--ink); color: var(--foam); border-color: var(--ink); }
}
/* small labels that sit over the glitter on phones */
.stage::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 22%; background: linear-gradient(0deg, rgba(6, 10, 20, .55), rgba(6, 10, 20, 0)); pointer-events: none; z-index: 0; }
.timeline { color: var(--foam-2); }
.cue { color: var(--foam); text-shadow: 0 1px 14px rgba(6, 10, 20, .7); }
@media (max-width: 899px) { .hero .acts small, .hero .acts .note, .hero p.note { text-shadow: 0 1px 16px rgba(6, 10, 20, .75); } }

/* ---------- Ezencia Fokus: the five questions, the screen, the canvas ---------- */
.fk-hero .acts small { flex-basis: 100%; max-width: 46ch; }
.fq { height: 560vh; }
.fq .phase { max-width: 36rem; }
.fq .phase h2 { font-size: clamp(2rem, 5.4vw, 4rem); line-height: 1.02; font-weight: 650; letter-spacing: -.035em; }
.qn { font-size: 14px; font-weight: 600; color: var(--foam-2); margin-bottom: 14px; }
.fq .phase p:not(.qn) { margin-top: 16px; }

.app { color: var(--ink); background: color-mix(in srgb, var(--chalk) 93%, transparent); border-radius: 28px; padding: 18px 18px 20px; box-shadow: 0 50px 90px -50px rgba(5, 10, 16, .85), 0 12px 30px -18px rgba(5, 10, 16, .5); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); }
.app-in { display: grid; gap: 10px; }
.app-top { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 620; letter-spacing: -.01em; padding-bottom: 4px; }
.app-z img { width: 22px; height: 22px; }
.app-ex { margin-left: auto; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--chalk-2); color: var(--ink-2); }
.app small { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-2); margin-bottom: 4px; }
.app-mod { border-top: 1px solid var(--line); padding-top: 10px; }
.app-start { border-top: 0; padding-block: 34px; text-align: center; }
.app-start p { font-size: 1.35rem; font-weight: 620; letter-spacing: -.02em; line-height: 1.2; }
.app-start p span { display: block; font-weight: 300; }
.app-north p { font-size: 1.15rem; font-weight: 620; letter-spacing: -.015em; line-height: 1.25; }
.app-why p { font-size: 1rem; line-height: 1.35; }
.app-one { border-top: 0; background: var(--ink); color: var(--foam); border-radius: 16px; padding: 14px 14px 15px; }
.app-one small, .app-one .app-sub { color: var(--foam-3); }
.app-one b { font-size: 1.08rem; font-weight: 620; letter-spacing: -.015em; line-height: 1.25; display: block; }
.app-sub { display: block; font-size: 12.5px; color: var(--ink-2); margin-top: 4px; }
.app-flow ul { display: grid; gap: 7px; }
.app-flow li { display: grid; grid-template-columns: 16px 1fr; gap: 8px; font-size: 13.5px; line-height: 1.35; }
.app-flow svg { width: 15px; height: 15px; color: var(--sea); margin-top: 2px; }
.app-time p { font-size: 13.5px; color: var(--ink-2); }
.app-time b { font-size: 1.55rem; font-weight: 650; letter-spacing: -.03em; color: var(--ink); margin-right: 4px; }
.app-bar { display: block; height: 6px; border-radius: 999px; background: var(--chalk-2); margin-top: 8px; overflow: hidden; }
.app-bar i { display: block; height: 100%; border-radius: inherit; background: var(--sea); }
.app-kern { display: flex; align-items: center; gap: 12px; }
.app-kern p { font-size: 13.5px; line-height: 1.4; }
.kern-z { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--ink); display: grid; place-items: center; cursor: pointer; }
.kern-z img { width: 22px; height: 22px; }
/* the screen builds itself as the questions pass */
.app.build .app-mod[data-at] { opacity: 0; transform: translateY(10px); max-height: 0; padding-top: 0; border-top-width: 0; overflow: hidden; transition: opacity .7s var(--ease), transform .7s var(--ease), max-height .8s var(--ease), padding .6s var(--ease); }
.app.build .app-mod[data-at].on { opacity: 1; transform: none; max-height: 220px; padding-top: 10px; border-top-width: 1px; }
.app.build .app-one.on { padding: 14px 14px 15px; border-top-width: 0; }
.app.build .app-start.off { display: none; }
.app.live .app-start { display: none; }
.app-canvas, .app-speak { display: none; }
.app.mode-canvas .app-mod, .app.mode-speak .app-mod { display: none; }
.app.mode-canvas .app-canvas { display: grid; gap: 14px; align-content: center; text-align: center; min-height: 380px; animation: settle 1.2s var(--ease); }
.app.mode-speak .app-speak { display: grid; gap: 22px; place-items: center; text-align: center; min-height: 380px; }
@keyframes settle { from { opacity: 0; filter: blur(6px); } to { opacity: 1; filter: none; } }
.cv-h { font-size: 1.7rem; font-weight: 300; letter-spacing: -.025em; line-height: 1.15; max-width: 14ch; margin: 0 auto; }
.cv-s { color: var(--ink-2); font-size: 14px; }
.cv-f { display: grid; gap: 6px; font-size: 13px; color: var(--ink-2); max-width: 260px; width: 100%; margin: 8px auto 0; text-align: left; }
.cv-f input { font: inherit; font-size: 15px; color: var(--ink); padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--chalk); }
.cv-f input:focus-visible { outline: 2px solid var(--sea); outline-offset: 2px; }
.cv-c { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; color: var(--ink-2); flex-wrap: wrap; }
.cv-c i { width: 20px; height: 20px; border-radius: 50%; background: var(--c); border: 1px solid var(--line); cursor: pointer; }
.speak-z { width: 112px; height: 112px; border-radius: 50%; border: 0; cursor: pointer; background: var(--chalk-2); display: grid; place-items: center; animation: breath 5s ease-in-out infinite; }
.speak-z img { width: 52px; height: 52px; }
.speak-z.talking { animation-duration: 1.4s; }
@keyframes breath { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
.speak-line { font-size: 1.1rem; line-height: 1.45; max-width: 28ch; min-height: 3em; }

/* the stage on phones: question on top, the screen below */
.fq .app { position: absolute; z-index: 1; left: max(var(--pad), env(safe-area-inset-left, 0px)); right: max(var(--pad), env(safe-area-inset-right, 0px)); bottom: max(22px, env(safe-area-inset-bottom, 0px)); max-width: 420px; margin: 0 auto; }
@media (max-width: 899px) { .fq .phase { top: clamp(86px, 12vh, 120px); } .fq .phase h2 { font-size: clamp(1.75rem, 7.4vw, 2.4rem); } .fq .phase p:not(.qn) { font-size: 1rem; margin-top: 10px; } .fq .app { padding: 14px; } .fq .app-start { padding-block: 18px; } .fq .app-flow li:nth-child(3) { display: none; } }
@media (max-height: 760px) and (max-width: 899px) { .fq .app-why, .fq .app-flow { display: none; } }
@media (min-width: 900px) { .fq .app { left: auto; right: max(var(--pad), calc((100% - var(--max)) / 2 + var(--pad))); top: 50%; bottom: auto; width: min(420px, 36vw); transform: translateY(-50%); } .fq .phase { top: 50%; transform: translateY(-50%); } }
@media (prefers-reduced-motion: reduce) { .fq .app { position: relative; left: auto; right: auto; top: auto; bottom: auto; transform: none; margin: 0 var(--pad) 64px; } .app.build .app-mod[data-at] { opacity: 1; transform: none; max-height: none; padding-top: 10px; border-top-width: 1px; } .app.build .app-start { display: none; } }

/* the demo over the sea */
.fk-demo { position: relative; z-index: 1; }
.demo-grid { display: grid; gap: 40px; align-items: center; }
.fk-demo .big { color: var(--foam); }
.fk-demo .sub { color: var(--foam-2); }
.modes { margin-top: 30px; display: inline-flex; padding: 4px; gap: 2px; border-radius: 999px; border: 1px solid var(--hair); background: rgba(6, 10, 20, .25); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.modes button { border: 0; background: none; padding: 10px 18px; border-radius: 999px; font-weight: 600; font-size: 15px; cursor: pointer; color: var(--foam); transition: background-color .4s var(--ease), color .4s var(--ease); }
.modes button[aria-pressed="true"] { background: var(--foam); color: var(--ink); }
.mode-note { margin-top: 18px; color: var(--foam-2); line-height: 1.5; max-width: 40ch; min-height: 4.5em; }
.fk-demo .app { max-width: 420px; width: 100%; justify-self: center; }
@media (min-width: 900px) { .demo-grid { grid-template-columns: 1fr 420px; gap: 72px; } .fk-demo .app { justify-self: end; } }

/* never, connections, calculator */
.never-grid { display: grid; gap: 32px; }
.never { display: grid; }
.never li { display: grid; grid-template-columns: 22px 1fr; gap: 14px; padding: 18px 0; border-top: 1px solid var(--line); font-size: clamp(1.08rem, 1.5vw, 1.3rem); line-height: 1.4; font-weight: 520; }
.never li:last-child { border-bottom: 1px solid var(--line); }
.never svg { width: 20px; height: 20px; color: var(--ink-2); margin-top: 4px; }
@media (min-width: 900px) { .never-grid { grid-template-columns: 5fr 7fr; align-items: start; } }
.conn { margin-top: clamp(40px, 5vw, 64px); display: grid; gap: 28px; }
.conn div { border-top: 1px solid var(--ink); padding-top: 16px; display: grid; gap: 8px; }
.conn h3 { font-size: 1.1rem; font-weight: 620; }
.conn p { color: var(--ink-2); line-height: 1.55; }
@media (min-width: 900px) { .conn { grid-template-columns: repeat(4, 1fr); gap: 32px; } }
.calc { display: grid; gap: 40px; align-items: end; }
.calc-box { border-top: 1px solid var(--ink); padding-top: 22px; display: grid; gap: 18px; }
.calc-l { display: flex; justify-content: space-between; align-items: baseline; font-weight: 600; font-size: 1.05rem; }
.calc-l output { font-size: 1.6rem; font-weight: 650; letter-spacing: -.03em; }
.calc input[type="range"] { width: 100%; accent-color: var(--sea); height: 28px; }
.calc-r { font-size: 1.15rem; line-height: 1.5; color: var(--ink-2); }
.calc-r b { display: block; font-size: clamp(2.6rem, 6vw, 4.4rem); font-weight: 650; letter-spacing: -.045em; line-height: 1.05; color: var(--ink); margin: 4px 0; }
@media (min-width: 900px) { .calc { grid-template-columns: 1fr 1fr; gap: 80px; } }
.app.tinted .app-canvas { background: color-mix(in srgb, var(--tint) 22%, transparent); border-radius: 18px; transition: background-color 1.2s var(--ease); }
@media (max-width: 899px) { .fq .app-why, .fq .app-kern, .fq .app-time .app-sub { display: none !important; } .fq .app-in { gap: 8px; } }
[data-page="dashboard"] .sticky, [data-page="presskit"] .sticky, [data-page="artists"] .sticky { display: none; }

/* ---------- press kit: an artist's one-pager in the Horizonte world, at night ---------- */
.sv-mark { font-size: 18px; font-weight: 650; letter-spacing: -.02em; }
.sv-bar .lang { margin-left: 4px; }
@media (max-width: 979px) { .sv-bar .lang { display: flex; } }
.sv-hero { padding-bottom: clamp(40px, 6vh, 64px); }
.sv-hero-grid { display: grid; gap: 36px; align-items: center; }
.sv-roles { font-size: 15px; font-weight: 600; color: var(--foam-2); margin-bottom: 14px; }
.sv-hero h1 { font-size: clamp(3.6rem, 15vw, 6rem); line-height: .9; font-weight: 700; letter-spacing: -.05em; max-width: none; }
.sv-hero h1 span { display: block; font-weight: 300; }
.sv-genres { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 20px; }
.sv-genres li { font-size: 13px; font-weight: 520; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--hair); color: var(--foam-2); }
.sv-shot { border-radius: 28px; overflow: hidden; aspect-ratio: 4 / 5; max-width: 100%; box-shadow: 0 50px 90px -50px rgba(5, 10, 16, .9); }
.sv-shot img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) { .sv-hero-grid { grid-template-columns: 7fr 5fr; gap: 64px; } }
.sv-stats { margin-top: clamp(40px, 6vw, 72px); display: grid; grid-template-columns: 1fr 1fr; gap: 26px 24px; }
.sv-stats li { display: grid; gap: 6px; border-top: 1px solid var(--hair); padding-top: 14px; }
.sv-stats b { font-size: clamp(2rem, 4.6vw, 3.4rem); font-weight: 650; letter-spacing: -.04em; line-height: 1; }
.sv-stats span { font-size: 14px; color: var(--foam-2); line-height: 1.4; }
.sv-stats.on-chalk li { border-top-color: var(--line); }
.sv-stats.on-chalk span { color: var(--ink-2); }
@media (min-width: 900px) { .sv-stats { grid-template-columns: repeat(4, 1fr); } .sv-stats.on-chalk { grid-template-columns: repeat(2, 1fr); max-width: 720px; } }
.sv-bio p { margin-top: 18px; font-size: clamp(1.05rem, 1.35vw, 1.2rem); line-height: 1.6; color: var(--ink-2); max-width: 60ch; }
.sv-bio p b { color: var(--ink); font-weight: 620; }
.sv-bio .big { margin-bottom: 8px; }
.sv-bio blockquote { margin: 32px 0 14px; font-size: clamp(1.5rem, 2.8vw, 2.2rem); line-height: 1.14; font-weight: 600; letter-spacing: -.028em; max-width: 22ch; }
.sv-facts { margin: 36px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
.sv-facts div { border-top: 1px solid var(--line); padding: 12px 0; }
.sv-facts dt { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.sv-facts dd { margin: 4px 0 0; font-weight: 560; line-height: 1.4; }
.sv-roles3 { margin-top: clamp(48px, 6vw, 80px); display: grid; gap: 40px; }
.sv-roles3 > div { border-top: 1px solid var(--ink); padding-top: 18px; display: grid; gap: 12px; align-content: start; }
.sv-roles3 h3 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); font-weight: 650; letter-spacing: -.03em; }
.sv-roles3 .k { font-weight: 600; color: var(--sea); }
.sv-roles3 ul { display: grid; gap: 12px; }
.sv-roles3 li { display: grid; gap: 3px; line-height: 1.45; }
.sv-roles3 li b { font-weight: 620; }
.sv-roles3 li span { color: var(--ink-2); }
.sv-roles3 .f { color: var(--ink-2); font-size: .95rem; line-height: 1.5; border-top: 1px solid var(--line); padding-top: 12px; }
@media (min-width: 900px) { .sv-roles3 { grid-template-columns: repeat(3, 1fr); gap: 40px; } }
.sv-rt-h { margin-top: 10px; font-size: clamp(3rem, 10vw, 7.5rem); font-weight: 700; letter-spacing: -.05em; line-height: .92; }
.sv-rt .link { margin-top: 28px; }
.sv-gal { display: grid; grid-auto-flow: column; grid-auto-columns: 72%; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 max(var(--pad), env(safe-area-inset-left, 0px)) 8px; scrollbar-width: none; }
.sv-gal::-webkit-scrollbar { display: none; }
.sv-gal img { width: 100%; height: clamp(320px, 52vw, 640px); object-fit: cover; border-radius: 22px; scroll-snap-align: center; }
@media (min-width: 900px) { .sv-gal { grid-auto-flow: initial; grid-template-columns: 1.1fr 1fr 1.2fr .9fr; overflow: visible; max-width: calc(var(--max) + 2 * var(--pad)); margin: 0 auto; } }
.sv-journey { margin-top: clamp(48px, 6vw, 80px); display: grid; gap: 48px; }
.sv-tl li { display: grid; grid-template-columns: 6.5rem 1fr; gap: 16px; padding: 16px 0; border-top: 1px solid var(--line); line-height: 1.45; }
.sv-tl li b { font-weight: 650; }
.sv-tl em { font-style: normal; font-weight: 600; display: block; }
.sv-tl li > span > span { color: var(--ink-2); }
.sv-side { display: grid; gap: 14px; align-content: start; }
.sv-side h3 { font-size: 1.2rem; font-weight: 620; margin-top: 10px; }
.sv-countries { display: flex; flex-wrap: wrap; gap: 6px; }
.sv-countries li { font-size: 14px; padding: 5px 11px; border-radius: 999px; background: var(--chalk-2); }
.sv-countries li.far { background: var(--ink); color: var(--foam); }
.sv-side .f { color: var(--ink-2); font-size: .95rem; line-height: 1.5; }
.sv-beyond li { display: grid; gap: 2px; padding: 10px 0; border-top: 1px solid var(--line); }
.sv-beyond b { font-weight: 620; }
.sv-beyond span { color: var(--ink-2); font-size: .95rem; }
@media (min-width: 900px) { .sv-journey { grid-template-columns: 7fr 5fr; gap: 72px; } }
.sv-wm { margin-top: clamp(40px, 5vw, 64px); display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--ink); }
.sv-wm li { padding: 20px 12px 20px 0; border-bottom: 1px solid var(--line); font-size: clamp(1.1rem, 1.8vw, 1.5rem); font-weight: 650; letter-spacing: -.025em; line-height: 1.15; }
.sv-wm small { display: block; margin-top: 4px; font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--ink-2); }
@media (min-width: 900px) { .sv-wm { grid-template-columns: repeat(4, 1fr); } }
.sv-bills-h { margin-top: 40px; font-size: 1.05rem; font-weight: 620; }
.sv-bills { margin-top: 10px; font-size: clamp(1.1rem, 1.8vw, 1.45rem); line-height: 1.5; color: var(--ink-2); max-width: 60ch; }
.sv-listen { margin-top: clamp(40px, 5vw, 64px); display: grid; gap: 12px; }
.sv-listen > * { display: grid; gap: 4px; padding: 22px; border-radius: 22px; background: var(--chalk-2); text-decoration: none; transition: background-color .3s; }
.sv-listen a:hover { background: color-mix(in srgb, var(--sea) 10%, var(--chalk-2)); }
.sv-listen b { font-size: 1.25rem; font-weight: 650; letter-spacing: -.02em; }
.sv-listen span { color: var(--ink); line-height: 1.4; }
.sv-listen small { color: var(--ink-2); font-size: 13.5px; line-height: 1.4; }
@media (min-width: 900px) { .sv-listen { grid-template-columns: repeat(4, 1fr); } }
.sv-rules .link { color: var(--sea); }
.sv-rules li { color: var(--ink); }

/* ---------- package details and artists ---------- */
.pd-price { margin-top: 22px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; }
.pd-price b { font-size: clamp(2.6rem, 6vw, 4.2rem); font-weight: 650; letter-spacing: -.045em; line-height: 1; }
.pd-price span { color: var(--foam-2); font-size: 14.5px; line-height: 1.45; max-width: 36ch; }
.pd-notes { display: grid; margin-top: 14px; }
.pd-notes li { padding: 12px 0; border-top: 1px solid var(--line); color: var(--ink-2); line-height: 1.5; }
.hero h1 .badge { vertical-align: middle; font-size: 13px; letter-spacing: 0; background: var(--foam); color: var(--ink); }
.hero h1 .soft { display: block; font-weight: 300; }
.steps4 { counter-reset: s; }
@media (min-width: 900px) { .steps4 { grid-template-columns: repeat(4, 1fr); } .spectrum:has(> li:nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); } }
.hero .sv-roles .link { color: var(--foam-2); font-weight: 600; text-decoration: none; }
.row .go.more { margin-top: 0; color: var(--ink-2); }
.row .go + .go.more { margin-left: 0; }

/* ---------- review fixes, round 1 (subpages) ---------- */
.bar.scrolled:not(.on-light):not(.open) { background: rgba(6, 10, 20, .62); backdrop-filter: saturate(1.4) blur(18px); -webkit-backdrop-filter: saturate(1.4) blur(18px); }
.app.build .app-mod[data-at]:not(.on) { margin-top: -10px; }
.sv-hero .sv-roles { margin: 16px 0 0; }
.hero h1 + .sv-roles { margin-top: 16px; margin-bottom: 0; }
.sv-roles.back { margin-bottom: 18px; }
.sv-roles.back .link { display: inline-flex; gap: 8px; text-decoration: none; }
.sv-roles.back svg { width: 16px; height: 16px; }
.sv-rt { position: relative; z-index: 1; }
.sv-rt .sub { color: var(--foam-2); }
.sv-rt .link { color: var(--foam); }
.sv-rt-h { font-size: clamp(3.2rem, 12vw, 9rem); }
.sv-bills { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; max-width: none; color: var(--ink); }
.sv-bills span { font-weight: 650; letter-spacing: -.03em; line-height: 1.05; }
.sv-bills span:nth-child(1), .sv-bills span:nth-child(2) { font-size: clamp(2rem, 5vw, 4rem); }
.sv-bills span:nth-child(3), .sv-bills span:nth-child(4) { font-size: clamp(1.6rem, 3.6vw, 2.9rem); }
.sv-bills span:nth-child(5), .sv-bills span:nth-child(6) { font-size: clamp(1.3rem, 2.6vw, 2.1rem); color: var(--ink-2); }
.sv-bills span:nth-child(n+7) { font-size: clamp(1.1rem, 1.9vw, 1.5rem); font-weight: 560; color: var(--ink-2); }
/* talk: the Z rings while Kern speaks, the words arrive with the voice */
.speak-z { position: relative; }
.speak-z::before, .speak-z::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 1px solid rgba(14, 26, 36, .16); opacity: 0; }
.speak-z.talking::before { animation: ring 1.6s ease-out infinite; }
.speak-z.talking::after { animation: ring 1.6s ease-out .8s infinite; }
@keyframes ring { from { transform: scale(.9); opacity: .9; } to { transform: scale(1.45); opacity: 0; } }
.speak-line .w { opacity: .22; transition: opacity .25s ease; }
.speak-line .w.on { opacity: 1; }
@media (max-width: 899px) { .close { place-items: start center; padding-top: clamp(110px, 18vh, 160px); } }
.app.build .app-mod[data-at]:not(.on) { padding: 0; }
.sv-rt-h .soft { display: block; font-size: .28em; font-weight: 400; letter-spacing: -.01em; margin-top: .5em; color: var(--foam-2); }
.speak-hint { display: block; margin-top: 12px; font-size: 13px; color: var(--ink-2); }

/* ---------- landing pages, work, CV (26.10.2026) ---------- */
.piece .go { grid-column: 1; }
.piece .go.more { grid-column: 2; justify-self: end; color: var(--ink-2); }
a.shot { display: block; }
a.shot img { display: block; width: 100%; height: auto; }
.wk-h { font-size: clamp(1.9rem, 3.6vw, 2.8rem); line-height: 1.06; font-weight: 650; letter-spacing: -.03em; max-width: 18ch; text-wrap: balance; }
.wk-h .soft { display: block; font-weight: 300; }
.wk-k { margin-top: 10px; font-size: 15px; font-weight: 600; color: var(--ink-2); }
.proof .acts { display: flex; flex-wrap: wrap; gap: 10px 24px; }
.proof .acts .link { margin-top: 0; }
@media (min-width: 900px) { .proof.rev { grid-template-columns: 5fr 7fr; } .proof.rev > .shot { order: 2; } }
[data-page="cv"] .sticky { display: none; }
/* product pages carry their own conversation: no The Day bar (review 26.10.2026) */
[data-page^="pkg-"] .sticky { display: none; }
@media (min-width: 900px) { .cv-rules { grid-template-columns: repeat(3, 1fr); } }
.cv-rules p { color: var(--ink-2); line-height: 1.55; }
/* cv: the path, label first (a year or a place), then what happened */
.cv-path { list-style: none; padding: 0; }
.cv-stop { grid-template-columns: 1fr; gap: 6px; padding: 24px 0; }
.cv-stop .p { order: -1; text-align: left; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--sea); white-space: normal; }
.cv-stop .what { max-width: 62ch; color: var(--ink-2); line-height: 1.55; }
@media (min-width: 900px) {
  .cv-stop { grid-template-columns: 11rem minmax(0, 1fr); column-gap: 32px; }
  .cv-stop .p { grid-column: 1; grid-row: 1 / span 2; padding-top: .35em; }
  .cv-stop h3, .cv-stop .what { grid-column: 2; }
}
.cv-lang { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--ink-2); line-height: 1.55; max-width: 52ch; }
.cv-lang b { color: var(--ink); font-weight: 620; margin-right: 6px; }
/* home: check it yourself (Google reviews, LinkedIn), quiet on purpose */
.check .doors { margin-top: clamp(28px, 4vw, 44px); }
@media (min-width: 900px) { .check .doors { grid-template-columns: 1fr 1fr; max-width: 920px; } }
.link.quiet { font-weight: 500; color: var(--ink-2); }
/* home: Karla, the whole kit (brand, web, Google, menu), each piece something to ask for */
.kl-kit { margin-top: clamp(48px, 6vw, 80px); }
.kl-h { font-size: clamp(1.35rem, 2vw, 1.6rem); font-weight: 620; letter-spacing: -.02em; margin-bottom: 22px; }
.kl-grid { display: grid; gap: 16px; }
.kl-card { padding: 26px 26px 28px; border-radius: 22px; background: var(--chalk-2); display: grid; gap: 12px; align-content: start; }
.kl-card h3 { font-size: 1.35rem; font-weight: 620; letter-spacing: -.02em; }
.kl-card p { color: var(--ink-2); line-height: 1.5; }
.kl-card .acts { margin-top: 4px; gap: 10px 22px; }
.kl-card .fine { margin-top: 0; font-size: .85rem; }
.kl-fan { display: block; margin: -10px -10px 6px; border-radius: 16px; overflow: hidden; }
.kl-fan img { display: block; width: 100%; height: auto; transition: transform .9s var(--ease); }
.kl-fan:hover img { transform: scale(1.025); }
.kl-card .kl-score { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; color: var(--ink); }
.kl-score b { font-size: clamp(2.4rem, 4vw, 3.2rem); font-weight: 650; letter-spacing: -.04em; line-height: 1; }
.kl-score .stars { margin: 0; display: inline-flex; gap: 2px; color: var(--sea); }
.kl-score span:last-child { font-size: .95rem; color: var(--ink-2); }
@media (min-width: 900px) {
  .kl-grid { grid-template-columns: 1.2fr 1fr; grid-template-rows: auto auto auto; }
  .kl-menu { grid-row: 1 / span 3; }
}
@media (prefers-reduced-motion: reduce) { .kl-fan img { transition: none; } }
/* touch targets: text links and the mark keep their look but answer a 44px finger (WCAG 2.2 target size) */
.link, .mark { position: relative; }
.link::after { content: ""; position: absolute; inset: -10px -6px; }
.mark::after { content: ""; position: absolute; inset: -9px -8px; }
/* home: Fares Chahrour, the coach door leads into his reference; status says honestly what is live */
.fc-proof .who { max-width: 46ch; }
.fc-lg { margin-top: 26px; font-size: clamp(1.15rem, 1.6vw, 1.35rem); font-weight: 620; letter-spacing: -.02em; color: var(--ink); }
.fc-log { list-style: none; margin-top: 12px; padding: 0; border-top: 1px solid var(--line); max-width: 46ch; }
.fc-log li { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); color: var(--ink-2); line-height: 1.5; font-size: .98rem; }
.fc-log .d { font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--sea); padding-top: .15em; }
.fc-note { margin-top: 0; font-size: .85rem; color: var(--ink-2); }
.fc-grid { display: grid; gap: 16px; }
.fc-st { justify-self: start; font-size: 12.5px; font-weight: 600; letter-spacing: .02em; color: var(--sea); padding: 4px 10px; border-radius: 999px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sea) 35%, transparent); }
.fc-next { margin-top: 22px; color: var(--ink-2); line-height: 1.55; max-width: 70ch; }
.fc-next b { color: var(--ink); font-weight: 620; }
/* the composite carries its own devices and shadow: no second frame */
.fc-shot { display: block; }
.fc-shot img { display: block; width: 100%; height: auto; }
@media (min-width: 900px) {
  .fc-proof { grid-template-columns: 1.15fr 1fr; align-items: start; }
  .fc-proof .fc-shot { position: sticky; top: 96px; }
  .fc-grid { grid-template-columns: repeat(6, 1fr); }
  .fc-grid > :nth-child(-n+3) { grid-column: span 2; }
  .fc-grid > :nth-child(n+4) { grid-column: span 3; }
}
/* Karla's menu on a phone: the eight pages in a swipe strip, as they arrive on WhatsApp; the fan stays on wide screens */
.kl-pages, .kl-swipe { display: none; }
@media (max-width: 899px) {
  .kl-menu .kl-fan { display: none; }
  .kl-pages { display: grid; grid-auto-flow: column; grid-auto-columns: 62%; gap: 12px; margin: -6px -26px 0; padding: 6px 26px 16px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 26px; scrollbar-width: none; }
  .kl-pages::-webkit-scrollbar { display: none; }
  .kl-pages img { display: block; width: 100%; height: auto; border-radius: 10px; scroll-snap-align: start; background: var(--chalk); box-shadow: 0 18px 30px -20px rgba(14, 26, 36, .5), 0 2px 6px -2px rgba(14, 26, 36, .16); }
  .kl-pages:focus-visible { outline-offset: -2px; }
  .kl-swipe { display: block; margin-top: -2px; }
}
/* the client area: a quiet door in the nav, a lock and a short word; the full name in the phone menu */
.nav .nav-client { display: inline-flex; align-items: center; gap: 6px; }
.nav .nav-client svg { width: 15px; height: 15px; flex: none; }
.nav .nav-client .l { display: none; }
@media (max-width: 979px) {
  .bar.open .nav .nav-client { gap: 10px; }
  .bar.open .nav .nav-client svg { width: 20px; height: 20px; }
  .bar.open .nav .nav-client .s { display: none; }
  .bar.open .nav .nav-client .l { display: inline; }
}
/* narrow desktop (980–1179 px): one line per link; the client area keeps only its lock, named for screen readers */
.nav a { white-space: nowrap; }
@media (min-width: 980px) and (max-width: 1179px) {
  .nav a { padding: 8px 9px; }
  .nav .nav-client { padding-inline: 10px; }
  .nav .nav-client .s { display: none; }
  .nav .nav-client svg { width: 17px; height: 17px; }
}

/* ---------- social showcase (content every month, 31.10.2026): the work leads, in its real ratios ---------- */
.sc .sc-l { margin-top: 22px; color: var(--ink-2); font-size: 1.12rem; line-height: 1.55; max-width: 46ch; }
.sc-case { margin-top: clamp(56px, 8vw, 96px); }
.feed { --g: 14px; --h: min(64svh, calc((100vw - 2 * var(--pad) - 32px) * 1.25)); display: flex; align-items: flex-start; gap: var(--g); margin-top: clamp(28px, 4vw, 44px); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; padding-inline: max(var(--pad), env(safe-area-inset-left, 0px)) max(var(--pad), env(safe-area-inset-right, 0px)); scroll-padding-inline: max(var(--pad), env(safe-area-inset-left, 0px)); padding-bottom: 8px; }
.feed::-webkit-scrollbar { display: none; }
.feed:focus-visible { outline-offset: -2px; border-radius: 0; }
.feed > :first-child { margin-left: auto; }
.feed > :last-child { margin-right: auto; }
.cut { flex: none; width: calc(var(--h) * var(--r)); margin: 0; scroll-snap-align: start; }
.cut .media { position: relative; height: var(--h); border-radius: 18px; overflow: hidden; background: var(--ink); box-shadow: 0 30px 60px -30px rgba(14, 26, 36, .38), 0 8px 18px -10px rgba(14, 26, 36, .22); }
.cut img, .cut video { display: block; width: 100%; height: 100%; object-fit: cover; }
.pp { position: absolute; right: 10px; bottom: 10px; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 999px; background: rgba(14, 26, 36, .62); color: var(--foam); cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: transform .4s var(--ease); }
.pp:hover { transform: scale(1.06); }
.pp svg { width: 18px; height: 18px; grid-area: 1 / 1; }
.pp .i-pause, .playing > .pp .i-play { display: none; }
.playing > .pp .i-pause { display: block; }
.pp:focus-visible { outline: 2px solid var(--foam); outline-offset: 2px; }
.cut figcaption { padding-top: 16px; }
.cut-l { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 15px; }
.cut-l b { font-weight: 620; color: var(--ink); }
.cut-l .num { color: var(--ink-2); }
.cut .cap, .cut .cap-s { margin-top: 8px; color: var(--ink-2); font-size: 14.5px; line-height: 1.5; }
.cut .cap { max-height: 6em; overflow: hidden; }
.cut .cap.open { max-height: none; }
.cut .cap p { white-space: pre-line; overflow-wrap: anywhere; }
.more { margin-top: 6px; padding: 6px 0; border: 0; background: none; font: inherit; font-size: 14.5px; font-weight: 600; color: var(--sea); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.more .m2, .more[aria-expanded="true"] .m1 { display: none; }
.more[aria-expanded="true"] .m2 { display: inline; }
.sc-asis { margin-top: 6px; font-size: 13.5px; }
.sc-asis:empty { display: none; }
.sc-more { display: grid; gap: clamp(40px, 6vw, 72px); margin-top: clamp(56px, 8vw, 96px); }
.sc-more .who { margin-top: 12px; color: var(--ink-2); font-size: 1.04rem; line-height: 1.55; max-width: 46ch; }
.sc-studio { align-self: start; border-top: 1px solid var(--line); padding-top: 22px; }
.sc-studio h3 { margin-top: 10px; font-size: clamp(1.15rem, 1.6vw, 1.4rem); font-weight: 620; letter-spacing: -.02em; }
.sc-studio > p:not(.fc-st):not(.fine) { margin-top: 10px; color: var(--ink-2); font-size: 1.04rem; line-height: 1.55; max-width: 46ch; }
.shot.tall { max-width: 440px; justify-self: center; width: 100%; }
@media (min-width: 900px) {
  .feed { --g: 20px; --h: clamp(380px, calc((100vw - 2 * var(--pad) - 60px) / 2.725), 560px); }
  .sc-more { grid-template-columns: 7fr 5fr; max-width: var(--max); }
}
.sc-studio .fc-st { display: inline-block; }
.sc-more .fc-lg { margin-top: 0; }
.pp { box-shadow: inset 0 0 0 1px var(--hair); }

/* ---------- social as material (01.11.2026): the stack, the jobs, the formats, the campaign week ---------- */
.stack { position: relative; width: 100%; max-width: 620px; aspect-ratio: 1 / 1.04; margin-inline: auto; }
.st { position: absolute; margin: 0; transition: transform .9s var(--ease), translate .9s var(--ease), rotate .9s var(--ease); }
.st-m { position: relative; border-radius: 14px; overflow: hidden; background: var(--ink); box-shadow: 0 30px 60px -28px rgba(5, 10, 16, .5), 0 8px 18px -10px rgba(5, 10, 16, .3); }
.st-m img, .st-m video { display: block; width: 100%; height: auto; aspect-ratio: var(--ar); object-fit: cover; }
.st-story { --ar: 9 / 16; left: 0; top: 7%; width: 36%; rotate: -6deg; z-index: 1; }
.st-post { --ar: 4 / 5; right: 0; top: 0; width: 50%; rotate: 4deg; z-index: 2; }
.st-reel { --ar: 4 / 5; left: 21%; bottom: 0; width: 55%; z-index: 3; }
.st-t { position: absolute; left: 10px; top: 10px; z-index: 2; padding: 4px 9px; border-radius: 999px; background: rgba(14, 26, 36, .74); color: var(--foam); font-size: 12px; font-weight: 600; letter-spacing: .01em; pointer-events: none; }
.st .pp { width: 40px; height: 40px; right: 8px; bottom: 8px; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .stack:hover .st-story { rotate: -9deg; translate: -4% 2%; }
  .stack:hover .st-post { rotate: 7deg; translate: 4% -2%; }
  .stack:hover .st-reel { translate: 0 -2%; }
}
/* content page hero: the promise beside the material */
.hero.pd-media .pd-st { margin-top: clamp(44px, 8vw, 64px); }
@media (min-width: 900px) {
  .hero.pd-media { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
  .hero.pd-media .pd-st { margin-top: 0; }
}
/* the jobs: what the client never does again */
.jobs { margin-top: clamp(40px, 6vw, 64px); display: grid; gap: 0 clamp(28px, 4vw, 56px); counter-reset: jb; }
.jobs li { display: grid; grid-template-columns: 2.4em 1fr; gap: 2px 0; padding-block: 18px; border-top: 1px solid var(--line); counter-increment: jb; }
.jobs li::before { content: counter(jb, decimal-leading-zero); grid-row: span 2; font-size: 14px; font-weight: 600; color: var(--sea); font-variant-numeric: tabular-nums; padding-top: .28em; }
.jobs h3 { font-size: clamp(1.15rem, 1.6vw, 1.35rem); font-weight: 620; letter-spacing: -.02em; }
.jobs p { color: var(--ink-2); font-size: 1rem; line-height: 1.5; max-width: 44ch; }
@media (min-width: 900px) { .jobs { grid-template-columns: 1fr 1fr; } }
.you { margin-top: 26px; font-size: clamp(1.15rem, 1.6vw, 1.35rem); font-weight: 620; letter-spacing: -.02em; color: var(--ink); }
.cut-w { margin-top: 6px; color: var(--ink); font-size: 14.5px; line-height: 1.45; }
/* formats, each frame drawn in its true ratio */
.fmts { margin-top: 26px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; }
.fmts li { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto; column-gap: 12px; align-items: start; }
.fmts i { grid-row: span 3; width: calc(34px * var(--r)); height: 34px; border: 1.5px solid var(--ink); border-radius: 5px; margin-top: 3px; }
.fmts b { font-size: 15px; font-weight: 620; }
.fmts .num { font-size: 14px; color: var(--ink-2); }
.fmts .w { font-size: 14px; color: var(--sea); font-weight: 600; }
@media (min-width: 1100px) { .fmts { grid-template-columns: repeat(4, minmax(0, 1fr)); } .fmts li { grid-template-columns: 1fr; } .fmts i { grid-row: auto; margin-bottom: 8px; } }
/* home and packages section */
.so-grid { margin-top: clamp(40px, 6vw, 72px); display: grid; gap: clamp(44px, 6vw, 80px); align-items: center; }
.so-t .who { color: var(--ink-2); font-size: 1.08rem; line-height: 1.55; max-width: 46ch; }
.so-t .acts { margin-top: 26px; }
@media (min-width: 900px) { .so-grid { grid-template-columns: 1fr 1fr; } }
/* the campaign week */
.sc-studio h3 { margin-top: 12px; }
.pl-l { margin-top: 8px; color: var(--ink-2); font-size: 1rem; line-height: 1.5; }
.plan { margin-top: 16px; display: grid; }
.plan li { display: grid; grid-template-columns: minmax(8.5em, auto) 1fr; gap: 4px 16px; padding-block: 12px; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.45; color: var(--ink); }
.plan .d { color: var(--sea); font-weight: 600; white-space: nowrap; }
@media (max-width: 480px) { .plan li { grid-template-columns: 1fr; } }
.pl-p { margin-top: 18px; color: var(--ink-2); font-size: 1.04rem; line-height: 1.55; max-width: 46ch; }
.jobs li { align-content: start; }
/* labels sit beside the work, never on it */
.stack { margin-block: 30px; }
.st-t { left: 2px; top: auto; bottom: calc(100% + 8px); padding: 0; background: none; color: var(--ink-2); font-size: 13px; white-space: nowrap; }
.st-post .st-t { left: auto; right: 2px; }
.st-reel .st-t { bottom: auto; top: calc(100% + 10px); }
.hero .st-t { color: var(--foam-2); }
.fmts li { align-content: start; }
/* the Black Beats page, linked inside running text (press kit bio, social note) */
.sv-bio p a.bb-link, .so-t .fine a { color: inherit; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }