/* HOP. home page, V2 (Figma "Homepage — V2"). Mobile first, fluid between 390 and 1440.
   --t runs from 0px at 390px wide to 1px at 1440px wide, so calc(M + (D - M) * var(--t))
   gives the mobile value M at 390 and the desktop value D at 1440, fluid in between. */

/* ---------- Fonts (self-hosted, Latin + Polish) ---------- */
@font-face { font-family: "Newsreader"; src: url("/assets/fonts/Newsreader-V.woff2") format("woff2"); font-weight: 300 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("/assets/fonts/Newsreader-Italic-V.woff2") format("woff2"); font-weight: 300 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("/assets/fonts/InstrumentSans.woff2") format("woff2"); font-weight: 400 500; font-style: normal; font-display: swap; }
/* Metric-matched fallbacks so the swap doesn't move the layout */
@font-face { font-family: "Newsreader Fallback"; src: local("Georgia"), local("Times New Roman"), local("Liberation Serif"), local("DejaVu Serif"); size-adjust: 96%; ascent-override: 76%; descent-override: 26%; line-gap-override: 0%; }
@font-face { font-family: "Instrument Fallback"; src: local("Arial"), local("Helvetica"), local("Liberation Sans"), local("DejaVu Sans"); size-adjust: 97%; ascent-override: 93%; descent-override: 24%; }

/* ---------- Tokens ---------- */
:root {
  --ink: #0A0A0A; --ink-2: #201F1D; --ink-3: #201F1D;
  --ivory: #E8DECE; --paper: #F6F5F0;
  --red: #E60001; --red-ui: #E60001; --red-on-light: #E60001; --red-on-dark: #E8DECE; /* on-dark: a lighter tint of #E60001 for small text on ink (5.4:1) */
  --muted-d: rgba(232, 222, 206, .62); --muted-l: rgba(10, 10, 10, .62); --dim-d: rgba(232, 222, 206, .55); --dim-d-text: rgba(232, 222, 206, .58); --next-l: rgba(10, 10, 10, .5);
  --serif: "Newsreader", "Newsreader Fallback", Georgia, serif;
  --sans: "Instrument Sans", "Instrument Fallback", Arial, sans-serif;
  --t: clamp(0px, calc((100vw - 390px) / 1050), 1px);
  --pad: clamp(24px, calc(24px + (100vw - 390px) * .0915), 120px);
  --content: min(1920px, 100vw - 2 * var(--pad));
  --nav-h: 60px;
  --expo: cubic-bezier(.16, 1, .3, 1);
  --ease-in: cubic-bezier(.55, 0, 1, .45);
  --spring: cubic-bezier(.34, 1.4, .64, 1);
}
@media (min-width: 1024px) { :root { --nav-h: 78px; } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: var(--nav-h); background: var(--ink); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--ivory); color: var(--ink); font-family: var(--serif); font-weight: 400; font-size: 17px; line-height: 1.55; font-optical-sizing: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: clip; }
body.menu-open { overflow: hidden; }
* { touch-action: manipulation; }
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; padding: 0; }
ul[role="list"], ol[role="list"], .menu-links, .stepper { list-style: none; }
img, picture, svg { display: block; max-width: 100%; }
.clip picture, .case-img picture, .founder-img picture, .model-img picture { height: 100%; }
em { font-style: italic; font-weight: 300; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; border-radius: 0; }
cite { font-style: normal; }
.sr-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip { position: fixed; left: 16px; top: -100px; z-index: 200; background: var(--ivory); color: var(--ink); padding: 12px 16px; font-family: var(--sans); font-size: 14px; }
.skip:focus { top: 16px; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.ink :focus-visible, .nav :focus-visible, .menu :focus-visible, .foot :focus-visible, .sticky-cta :focus-visible, .consent-bar :focus-visible { outline-color: var(--ivory); }
.red { color: var(--red); }

/* Responsive helpers: authored line breaks per breakpoint */
br.d, .d-only { display: none; }
@media (min-width: 600px) { br.m, .m-only { display: none; } br.d { display: inline; } .d-only { display: inline; } p.d-only, li.d-only { display: block; } }

/* ---------- Layout ---------- */
.wrap { width: var(--content); margin-inline: auto; }
.s { position: relative; }
.ink { background: var(--ink); color: var(--ivory); }

/* ---------- Type ---------- */
.lbl { font-family: var(--sans); font-weight: 400; font-size: calc(10px + 2 * var(--t)); line-height: 1.25; letter-spacing: .09em; text-transform: uppercase; color: var(--muted-l); font-variant-numeric: lining-nums; }
.ink .lbl { color: var(--muted-d); }
/* Instrument Sans Medium isn't available as a file here, so medium is drawn with a hairline stroke */
.lbl--m { font-weight: 500; -webkit-text-stroke: .3px currentColor; }
.lbl--red { color: var(--red-on-light) !important; }
.lbl--red-d { color: var(--red-on-dark) !important; }
.rh { font-style: italic; font-size: calc(18px + 4 * var(--t)); line-height: 1.5; color: var(--muted-l); margin-bottom: calc(20px + 12 * var(--t)); }
.ink .rh { color: var(--muted-d); }

/* Headlines: Figma size at 390 (--fm) and 1440 (--fd), and never wider than the content.
   --lw is the longest authored desktop line in em, --lwm the longest phone line. */
.h1, .h2, .fit { font-weight: 400; text-wrap: balance; font-variant-numeric: lining-nums; }
.h2 em, .h1 em { font-weight: 300; }
.h1, .h2, .fit {
  font-size: min(calc(var(--fm) * 1px), calc((100vw - 2 * var(--pad) - 4px) / var(--lwm, 6)));
  line-height: var(--lhm, 1); letter-spacing: var(--trm, -0.02em);
}
@media (min-width: 600px) {
  .h1, .h2, .fit {
    font-size: min(calc(var(--fd) * 1px), calc(var(--fm) * 1px + (var(--fd) - var(--fm)) * var(--t) * 1.15), calc((var(--content) - 12px) / var(--lw, 10)));
    line-height: var(--lhd, 1); letter-spacing: var(--trd, -0.035em);
  }
}
.h1 { --fm: 60; --fd: 136; --lhm: .96; --trm: -0.025em; --trd: -0.035em; }
.hero .h1 { font-size: min(calc(var(--fm) * 1px), calc((100vw - 2 * var(--pad) - 4px) / var(--lwm, 5.4))); }
@media (min-width: 600px) { .hero .h1 { font-size: min(136px, calc((var(--content) - 8px) / var(--lw, 8.8))); line-height: 1.1; text-align: left; letter-spacing: -0.035em; } }

/* ---------- Buttons and links ---------- */
.btn { display: inline-flex; align-items: center; justify-content: space-between; background: var(--red-ui); color: #E8DECE; font-style: italic; line-height: 1.2; white-space: nowrap; transition: background-color .2s ease; }
.btn:hover { background: #C92A18; }
.btn-i { width: 20px; height: 20px; flex: none; transition: transform .25s var(--expo); }
.btn:hover .btn-i, .btn:focus-visible .btn-i { transform: translateX(4px); }
.btn--s { gap: 14px; padding: 13px 20px; font-size: 15px; min-height: 44px; }
.btn--s .btn-i { width: 16px; height: 16px; }
.btn--l { gap: 40px; padding: calc(22px + 4 * var(--t)) 36px; font-size: calc(20px + 4 * var(--t)); min-height: 64px; }
.btn--l .btn-i { width: 24px; height: 24px; }
.btn--full { display: flex; width: 100%; }
.alink { display: inline-flex; align-items: center; gap: 10px; font-style: italic; font-size: calc(18px + 2 * var(--t)); line-height: 1.3; padding-bottom: 6px; border-bottom: 1px solid rgba(10, 10, 10, .6); min-height: 44px; }
.ink .alink { border-bottom-color: rgba(232, 222, 206, .6); }
.alink svg { width: 18px; height: 18px; transition: transform .25s var(--expo); }
.alink:hover svg, .alink:focus-visible svg { transform: translateX(4px); }
.alink--plain { border-bottom: 0; }
.linkbtn { font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; text-decoration: none; }
.linkbtn:hover, .foot-legal a:hover { color: var(--ivory); }

/* ---------- Nav ---------- */
.nav { position: fixed; inset: 0 0 auto; z-index: 50; color: var(--ivory); padding-top: max(8px, env(safe-area-inset-top)); transition: background-color .22s ease, padding .22s ease, border-color .22s ease, -webkit-backdrop-filter .22s, backdrop-filter .22s; border-bottom: 1px solid transparent; }
.nav-row { width: var(--content); margin-inline: auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 44px; }
.nav.is-scrolled { background: var(--ink); border-bottom-color: rgba(232, 222, 206, .08); }
.nav-menu { width: 44px; height: 44px; display: grid; place-items: center start; justify-self: start; }
.nav-menu-icon { display: grid; gap: 6px; }
.nav-menu-icon i { display: block; height: 1.5px; width: 22px; background: currentColor; }
.nav-menu-icon i + i { width: 14px; }
.nav-links { display: none; }
.nav-logo { justify-self: center; display: block; padding: 6px 4px; }
.nav-logo svg { width: 64px; height: auto; fill: #E8DECE; transition: transform .22s ease; transform-origin: 50% 40%; }
.logo-o { fill: var(--ivory); }
.nav-right { justify-self: end; display: flex; align-items: center; gap: 28px; }
.nav-cta { display: none; }
.lang { display: flex; align-items: center; gap: 6px; font-family: var(--serif); font-size: 15px; letter-spacing: .02em; }
.lang button { min-width: 24px; min-height: 44px; opacity: .7; font-weight: 400; }
.lang button[aria-pressed="true"] { opacity: 1; font-weight: 500; -webkit-text-stroke: .3px currentColor; }
.lang-sep { opacity: .4; }
.lang.has-dot { position: relative; gap: 14px; padding-right: 8px; }
.nav .lang.has-dot .lang-sep, .lang.has-dot .lang-sep { display: none !important; }
.lang-dot { position: absolute; left: 0; top: 0; width: 4px; height: 4px; border-radius: 50%; background: var(--red); pointer-events: none; transform-origin: 50% 100%; }
.nav .lang button[data-lang="pl"], .nav .lang .lang-sep { display: none; }
.nav .lang button[aria-pressed="false"][data-lang="en"] { display: none; }
.nav .lang button[aria-pressed="true"][data-lang="pl"] { display: inline-block; }
.lang-note { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--ink-3); color: var(--muted-d); font-family: var(--sans); font-size: 11px; letter-spacing: .06em; padding: 8px 16px calc(8px + env(safe-area-inset-bottom)); text-align: center; }
html[lang="pl"] .lang-note { display: block; }

@media (min-width: 1024px) {
  .nav { padding-top: 36px; }
  .nav.is-scrolled { padding-top: 0; }
  .nav-row { width: var(--content); min-height: 49px; }
  .nav.is-scrolled .nav-row { padding-block: 14px; }
  .nav-menu { display: none; }
  .nav-links { display: flex; gap: 32px; justify-self: start; font-family: var(--serif); font-size: 18px; letter-spacing: 0; }
  .nav-links a { position: relative; padding-block: 10px; color: rgba(232, 222, 206, .72); transition: color .2s ease; }
  .nav-links a:hover, .nav-links a:focus-visible, .nav-links a[aria-current="true"] { color: var(--ivory); }
  .nav-links a::after { content: ""; position: absolute; left: 50%; top: 32px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--red); transform: scale(0); transition: transform .25s var(--expo); }
  .nav.is-scrolled .nav-links a[aria-current="true"]::after { transform: scale(1); }
  .nav-logo svg { width: 83px; }
  .nav.is-scrolled .nav-logo svg { transform: scale(.8); }
  .nav-cta { display: inline-flex; }
  .lang { font-size: 13px; }
  .nav .lang button, .nav .lang .lang-sep { display: inline-block !important; }
  .lang button { min-width: 24px; }
}

/* ---------- Mobile menu ---------- */
.menu { position: fixed; inset: 0; z-index: 60; background: var(--ink); color: var(--ivory); display: flex; flex-direction: column; justify-content: space-between; padding: max(8px, env(safe-area-inset-top)) 24px calc(32px + env(safe-area-inset-bottom)); overflow-y: auto; }
.menu[hidden] { display: none; }
.menu-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.menu-close { width: 44px; height: 44px; display: grid; place-items: center start; }
.menu-close svg { width: 20px; height: 20px; }
.menu-logo svg { width: 64px; fill: #E8DECE; }
.lang--menu { justify-self: end; }
.lang--menu button { color: var(--ivory); }
.menu-links { margin-block: 32px; }
.menu-links a { display: flex; align-items: baseline; gap: 16px; padding-block: 14px; border-top: 1px solid rgba(232, 222, 206, .12); font-size: clamp(36px, 11.3vw, 44px); line-height: 1.1; letter-spacing: -.012em; }
.mnum { font-family: var(--sans); font-size: 10px; letter-spacing: .09em; color: var(--muted-d); width: 14px; flex: none; }
.menu-links a[aria-current="true"] .mtxt { font-style: italic; font-weight: 300; }
.menu-links a[aria-current="true"] .mnum { color: var(--red-on-dark); }
.menu-bottom { display: grid; gap: 20px; }
.menu-mail { font-style: italic; font-size: 15px; color: var(--muted-d); }
.menu-mail a { display: inline-block; padding-block: 10px; }

/* ---------- Sticky mobile CTA ---------- */
.sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: flex; align-items: center; gap: 12px; padding: 12px 16px calc(12px + max(16px, env(safe-area-inset-bottom))); background: rgba(10, 10, 10, .92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transform: translateY(105%); transition: transform .3s var(--expo); }
.sticky-cta.is-on { transform: none; }
.sticky-logo { width: 48px; fill: var(--ivory); flex: none; }
.btn--sticky { flex: 1; padding: 16px 24px; min-height: 56px; font-size: 18px; }
@media (min-width: 1024px) { .sticky-cta { display: none; } }

/* ---------- Trajectory and dot ---------- */
.traj { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.traj-line, .leap-ghost, .leap-solid { fill: none; vector-effect: non-scaling-stroke; stroke-width: 1px; }
.dot { position: absolute; border-radius: 50%; background: var(--red); }
.traj--d { display: none; }
@media (min-width: 600px) { .traj--d { display: block; } .traj--m { display: none; } }

/* ---------- 01 Hero ---------- */
.hero { min-height: 100svh; display: flex; flex-direction: column; justify-content: space-between; padding: calc(var(--nav-h) + 8px) 0 32px; overflow: clip; }
.hero-body { position: relative; z-index: 1; padding-block: 40px; margin-block: auto; }
.hero-h { color: var(--ivory); --lwm: 5.45; --lw: 8.78; }
.hero-h .ln { display: inline; }
/* The full stop after "waiting" is the red dot, hopping on the spot as if it can't wait */
.wait-dot { display: inline-block; color: var(--red); font-style: normal; font-size: 1.3em; line-height: 0; transform-origin: 50% 85%; }
html.js.intro.intro-done .hero .ln, html.js.intro-done .hero .ln { overflow: visible; }
@media (prefers-reduced-motion: no-preference) {
  .wait-dot { animation: wait-hop 1.9s cubic-bezier(.3, .6, .4, 1) 1.8s infinite; }
}
@keyframes wait-hop {
  0%, 52%, 100% { transform: translateY(0) scale(1, 1); }
  58% { transform: translateY(0) scale(1.2, .8); }
  70% { transform: translateY(-.2em) scale(.92, 1.1); }
  80% { transform: translateY(0) scale(1.18, .82); }
  86% { transform: translateY(-.05em) scale(.97, 1.03); }
  92% { transform: translateY(0) scale(1, 1); }
}


.hero-bar { position: relative; display: grid; gap: 20px; padding-top: 20px; border-top: 1px solid rgba(232, 222, 206, .14); }
.hero-pos { font-style: italic; font-size: calc(20px + 4 * var(--t)); line-height: 1.3; }
.hero-actions { display: flex; align-items: center; gap: 32px; }
.cue { display: none; }
@media (min-width: 600px) {
  .hero { padding-bottom: 56px; }
  .hero-bar { display: flex; align-items: center; justify-content: space-between; border-top: 0; padding-top: 0; min-height: 40px; }
  .cue { display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid rgba(232, 222, 206, .35); border-radius: 50%; transition: border-color .2s; }
  .cue:hover { border-color: var(--ivory); }
  .cue svg { width: 16px; height: 16px; }
}

/* ---------- 02 The Moment ---------- */
.moment { background: color-mix(in srgb, var(--ivory) calc(var(--mix, 1) * 100%), var(--ink)); padding-block: calc(88px + 62 * var(--t)); }
.moment-h { --fm: 52; --fd: 112; --lhm: .98; --trm: -0.02em; --trd: -0.035em; --lwm: 5.6; --lw: 10.6; }
.moment-name { margin-top: calc(48px + 32 * var(--t)); }
.moment-lead { font-style: italic; font-size: calc(20px + 8 * var(--t)); line-height: 1.35; margin-bottom: calc(16px + 12 * var(--t)); }
.brands { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.brand { border: 1px solid rgba(10, 10, 10, .16); padding: 16px 12px; display: flex; flex-direction: column; justify-content: space-between; gap: 28px; min-width: 0; }
.brand .lbl { font-size: 10px; letter-spacing: .06em; }
.brand-n { font-size: clamp(20px, 6.2vw, 24px); line-height: 1.1; letter-spacing: -.005em; }
.brand--pl { grid-column: 1 / -1; background: var(--red-ui); border-color: var(--red-ui); color: #E8DECE; padding: 24px 20px; gap: 24px; }
.brand--pl .lbl { color: #E8DECE; font-size: 11px; letter-spacing: .09em; }
.pl-top { display: grid; gap: 24px; }
.facts { display: grid; gap: 8px; line-height: 1.3; }
.facts > div { display: grid; grid-template-columns: 130px 1fr; gap: 12px; align-items: baseline; }
.fact-k { font-size: 24px; }
.facts dd { font-size: 14px; }
.brand-q { font-size: 44px; line-height: 1; letter-spacing: -.01em; }
.src { margin-top: 0; font-size: 10px; letter-spacing: .06em; }
.moment-name .src { margin-top: calc(16px + 12 * var(--t)); }
@media (min-width: 600px) {
  .brands { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.82fr); gap: 16px; }
  .brand { min-height: calc(200px + 80 * var(--t)); padding: calc(20px + 8 * var(--t)); }
  .brand .lbl, .brand--pl .lbl { font-size: 12px; letter-spacing: .09em; }
  .brand-n { font-size: calc(28px + 28 * var(--t)); line-height: 1; letter-spacing: -.015em; }
  .brand--pl { grid-column: auto; padding: calc(20px + 8 * var(--t)); }
  .pl-top { gap: 18px; }
  .facts { grid-auto-flow: column; justify-content: start; gap: 28px; }
  .facts > div { display: flex; flex-direction: column; gap: 2px; }
  .fact-k { font-size: calc(20px + 6 * var(--t)); line-height: 1.1; }
  .facts dd { font-size: 15px; line-height: 1.4; white-space: nowrap; }
  .brand-q { font-size: calc(36px + 20 * var(--t)); letter-spacing: -.015em; }
  .src { font-size: 11px; letter-spacing: .09em; }
}
@media (min-width: 600px) and (max-width: 1099px) {
  .brands { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .brand--pl { grid-column: 1 / -1; min-height: 0; }
}

/* ---------- 03 The Problem ---------- */
.problem { padding-block: 112px; }
.problem-h { display: grid; gap: 0; font-weight: 400; }
.p1 { display: block; color: var(--muted-d); font-weight: 300; --fm: 44; --fd: 125; --lhm: 1; --lhd: 1.2; --trm: -0.015em; --trd: -0.035em; --lwm: 6.3; --lw: 9.6; }
.p2 { display: block; color: var(--ivory); --fm: 44; --fd: 125; --lhm: 1; --lhd: 1.2; --trm: -0.025em; --trd: -0.05em; --lwm: 5.2; --lw: 9.6; }
.p1, .p2 { font-size: min(calc(var(--fm) * 1px), calc((100vw - 2 * var(--pad) - 4px) / var(--lwm))); line-height: var(--lhm); letter-spacing: var(--trm); }
.p2-brand { color: var(--red); font-weight: 400; transition: color .5s ease; }
.problem-aside { margin-top: calc(32px + 20 * var(--t)); display: grid; gap: 6px; }
.problem-aside p { font-size: calc(20px + 12 * var(--t)); line-height: 1.4; }
.problem-aside .pa-1 { font-style: italic; color: var(--ivory); }
.problem-aside .pa-2 { color: var(--muted-d); }
@media (min-width: 600px) {
  .p1, .p2 { font-size: min(calc(var(--fd) * 1px), calc(var(--fm) * 1px + (var(--fd) - var(--fm)) * var(--t) * 1.15), calc((var(--content) - 12px) / var(--lw))); line-height: var(--lhd); letter-spacing: var(--trd); }
  .problem { padding: calc(112px + 68 * var(--t)) 0; }
}

/* ---------- 04 Who we are ---------- */
.who { padding-block: calc(88px + 92 * var(--t)); }
.who-h { --fm: 44; --fd: 96; --lhm: 1; --lhd: 1.2; --trm: -0.015em; --trd: -0.025em; --lwm: 6.6; --lw: 12.4; }
.who-h .red { font-weight: 300; }
.founders { display: grid; gap: 48px; margin-top: calc(48px + 48 * var(--t)); }
.founder { display: grid; gap: 12px; align-content: start; }
.founder-img { height: 300px; background: var(--ink-3); margin-bottom: 8px; }
.founder-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; max-width: none; }
/* Iris reveal (v2.js adds .can-iris): the red dot widens into the portrait as it scrolls in */
.founder-img { position: relative; overflow: hidden; cursor: default; }
/* The bio sits on the portrait: hidden until hover, focus or tap, over a near-black wash */
.founder-over { position: absolute; inset: 0; z-index: 1; display: flex; align-items: flex-end; padding: calc(20px + 12 * var(--t)); background: rgba(21, 21, 21, .86); opacity: 0; transition: opacity .35s ease; }
.founder-over .founder-bio { color: var(--ivory); max-width: 46ch; transform: translateY(12px); transition: transform .45s var(--expo); }
.founder-img:hover .founder-over, .founder-img:focus-visible .founder-over, .founder-img.is-open .founder-over { opacity: 1; }
.founder-img:hover .founder-bio, .founder-img:focus-visible .founder-bio, .founder-img.is-open .founder-bio { transform: none; }
.founder-img:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.iris-dot { display: none; }
html.can-iris .founder-img { clip-path: circle(var(--iris, 14px) at 50% 42%); background: transparent; }
html.can-iris .founder-img img { transform: scale(var(--iz, 1.22)); transform-origin: 50% 42%; will-change: transform; }
html.can-iris .iris-dot { display: block; position: absolute; z-index: 2; left: 50%; top: 42%; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; background: var(--red); transform: scale(var(--ids, 1)); pointer-events: none; }
.founder-n { font-weight: 400; font-size: calc(32px + 16 * var(--t)); line-height: 1.05; letter-spacing: -.01em; }
.founder-bio { color: var(--muted-l); font-size: calc(17px + 1 * var(--t)); line-height: 1.55; max-width: 62ch; }
.awards { margin-top: 48px; border-top: 1px solid rgba(10, 10, 10, .2); padding-top: 20px; color: var(--muted-l); font-style: italic; font-size: calc(16px + 1 * var(--t)); line-height: 1.5; }
@media (min-width: 768px) {
  .founders { grid-template-columns: 1fr 1fr; gap: calc(32px + 48 * var(--t)); }
  .founder { gap: 16px; }
  .founder-img { height: auto; width: min(100%, 400px); aspect-ratio: 560 / 562; margin-bottom: 12px; position: relative; overflow: hidden; }
  .founder-img picture { position: absolute; max-width: none; width: var(--zw, 128%); height: var(--zh, 137%); left: var(--zx, -14%); top: var(--zy, -22.5%); }
  .founder:nth-child(2) .founder-img { --zw: 129.5%; --zh: 137%; --zx: -7.5%; --zy: -25.2%; }
  .founder:nth-child(2) .founder-img { aspect-ratio: 560 / 569; }
  .awards { margin-top: calc(48px + 48 * var(--t)); padding-top: 24px; }
}

/* ---------- 05 Proof ---------- */
.proof { padding-block: calc(88px + 92 * var(--t)); }
.proof-h { --fm: 40; --fd: 88; --lhm: 1.4; --lhd: 1.4; --trm: -0.012em; --trd: -0.025em; --lwm: 7.2; --lw: 11.6; }
.proof-h em { font-weight: 300; }
.cases-wrap { margin-top: calc(40px + 40 * var(--t)); }
.cases { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad); padding-inline: var(--pad); scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.cases::-webkit-scrollbar { display: none; }
.cases:focus-visible { outline-offset: -2px; }
.case { flex: 0 0 min(300px, calc(100vw - 2 * var(--pad) - 42px - 16px)); scroll-snap-align: start; display: grid; gap: 14px; align-content: start; }
.case-img { height: 240px; background: var(--ink-3); overflow: hidden; margin-bottom: 6px; }
.case-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--expo); }
.case-img--ph { display: flex; align-items: flex-start; padding: 24px; }
.ph-note { font-size: 12px !important; }
.case-n { color: var(--ivory) !important; font-size: 11px; }
.case-h { font-weight: 400; font-size: calc(22px + 4 * var(--t)); line-height: 1.25; }
.results { display: grid; gap: 8px; padding-top: 0; }
.results > div { display: grid; grid-template-columns: 80px 1fr; gap: 14px; align-items: baseline; }
.results dt { font-size: 20px; letter-spacing: -.005em; }
.results dt em { font-weight: 400; }
.results dd { color: var(--muted-d); font-size: 15px; line-height: 1.4; transition: color .3s; }
.pager { display: flex; align-items: center; gap: 12px; margin-top: 32px; }
.pager-bars { display: flex; gap: 8px; }
.pager-bars i { display: block; height: 2px; width: 8px; background: var(--dim-d); transition: width .3s var(--expo), background-color .3s; }
.pager-bars i.on { width: 24px; background: var(--ivory); }
.pager-n { font-size: 10px; letter-spacing: .09em; font-variant-numeric: tabular-nums; }
@media (min-width: 900px) {
  .cases { width: var(--content); margin-inline: auto; padding-inline: 0; overflow: visible; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .case { gap: 20px; }
  .case-img { height: calc(220px + 80 * var(--t)); margin-bottom: 8px; }
  .case-n { font-size: 12px; }
  .results { gap: 10px; padding-top: 8px; }
  .results > div { grid-template-columns: 96px 1fr; gap: 16px; }
  .results dt { font-size: 24px; }
  .pager, #cases-ctrl { display: none; }
  .case:hover .case-img img { transform: scale(1.03); }
  .case:hover .results dd { color: rgba(232, 222, 206, .75); }
}

/* ---------- 06 Burning platform ---------- */
.burn { padding-block: calc(88px + 92 * var(--t)); }
.burn-h { --fm: 44; --fd: 120; --lhm: 1.4; --lhd: 1.4; --trm: -0.015em; --trd: -0.035em; --lwm: 6.6; --lw: 9.9; }
.burn-h .red { font-weight: 300; }
.burn-body { display: grid; margin-top: 40px; }
.burn-prompt { display: contents; }
.burn-risk { order: 0; font-style: italic; font-size: calc(18px + 4 * var(--t)); color: var(--muted-d); }
.burn-q { order: 1; font-size: calc(28px + 20 * var(--t)); line-height: 1.15; margin-top: 6px; margin-bottom: 40px; }
.burn-cta { order: 3; display: grid; gap: 12px; margin-top: 40px; }
.burn-cta .btn { width: 100%; }
.micro { font-size: 15px; color: var(--muted-d); line-height: 1.5; }
.plats { order: 2; border-bottom: 1px solid rgba(232, 222, 206, .14); }
.plat { border-top: 1px solid rgba(232, 222, 206, .14); transition: border-color .3s; }
.plat h3 { font: inherit; }
.plat-b { width: 100%; display: flex; align-items: baseline; gap: 16px; text-align: left; padding-block: 16px; min-height: 56px; }
.plat-num { font-family: var(--sans); font-weight: 500; -webkit-text-stroke: .3px currentColor; font-size: 11px; letter-spacing: .09em; color: var(--dim-d-text); width: 20px; flex: none; transition: color .3s; }
.plat-t { flex: 1; font-weight: 300; font-size: calc(24px + 12 * var(--t)); line-height: 1.12; letter-spacing: -.008em; color: var(--dim-d); transition: color .3s; }
.plat-ind { position: relative; width: 12px; height: 12px; flex: none; align-self: center; }
.plat-ind::before, .plat-ind::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--dim-d); transition: transform .3s var(--expo), background-color .3s, opacity .3s; }
.plat-ind::after { transform: rotate(90deg); }
.plat-p { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--expo); }
.plat-p > p { overflow: hidden; padding-left: 36px; color: var(--muted-d); font-size: calc(17px + 3 * var(--t)); line-height: 1.45; }
.plat.is-open { border-top-color: rgba(232, 222, 206, .5); }
.plat.is-open .plat-num { color: var(--red-on-dark); }
.plat.is-open .plat-t { color: var(--ivory); font-style: italic; font-weight: 400; }
.plat.is-open .plat-p { grid-template-rows: 1fr; }
.plat.is-open .plat-p > p { padding-bottom: 22px; }
.plat.is-open .plat-ind::before { background: var(--red); }
.plat.is-open .plat-ind::after { transform: rotate(0); opacity: 0; }
.plat:hover .plat-t { color: rgba(232, 222, 206, .62); }
.plat.is-open:hover .plat-t { color: var(--ivory); }
html:not(.js) .plat-p { grid-template-rows: 1fr; }
html:not(.js) .plat-p > p { padding-bottom: 16px; }
@media (min-width: 1024px) {
  .burn-body { grid-template-columns: 320px 1fr; gap: 120px; margin-top: 96px; align-items: start; }
  /* The prompt stays a quiet sidebar next to the list: smaller than the list items, and it follows you down */
  .burn-prompt { display: grid; gap: 20px; align-content: start; border-top: 1px solid rgba(232, 222, 206, .2); padding-top: 28px; position: sticky; top: calc(var(--nav-h) + 40px); }
  .burn-risk { font-size: 18px; }
  .burn-q { margin: 0; font-size: 32px; line-height: 1.15; letter-spacing: -.01em; }
  .burn-cta { margin-top: 12px; gap: 12px; }
  .burn-cta .btn { width: auto; justify-self: start; gap: 28px; padding: 15px 24px; min-height: 52px; font-size: 18px; }
  .burn-cta .btn .btn-i { width: 18px; height: 18px; }
  .burn-cta .micro { font-size: 15px; }
  .micro { font-size: 16px; }
  .plats { border-bottom: 0; }
  .plats::after { content: ""; display: block; height: 1px; background: rgba(232, 222, 206, .14); }
  .plat-b { gap: 32px; padding-block: 22px; }
  .plat.is-open .plat-b { padding-top: 28px; padding-bottom: 10px; }
  .plat-num { font-size: 12px; width: 24px; }
  .plat-p > p { padding-left: 56px; }
  .plat.is-open .plat-p > p { padding-bottom: 32px; }
  /* Desktop: a 12px red dot instead of the +/− */
  .plat-ind { width: 12px; height: 12px; border-radius: 50%; background: var(--red); transform: scale(0); transition: transform .3s var(--expo); }
  .plat-ind::before, .plat-ind::after { display: none; }
  .plat.is-open .plat-ind { transform: scale(1); }
}

/* ---------- 07 How we work: the leap ---------- */
.how { background: var(--ivory); padding-block: 0 calc(88px + 92 * var(--t)); } /* no heading: the pinned stage starts the section */
.how-h { --fm: 56; --fd: 120; --lhm: .98; --trm: -0.02em; --trd: -0.035em; --lwm: 3.9; --lw: 9.2; }
.how-h .red { font-weight: 300; }
.leap { margin-top: calc(40px + 32 * var(--t)); }
.stepper { display: flex; flex-wrap: wrap; gap: 0 20px; font-family: var(--sans); font-size: 10px; letter-spacing: .09em; text-transform: uppercase; color: var(--muted-l); margin-bottom: 24px; }
.stepper li { display: flex; }
.stepper button { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; text-transform: inherit; letter-spacing: inherit; }
.stepper li[data-state="next"] { color: var(--muted-l); }
.stepper li[data-state="active"] { color: var(--ink); font-weight: 500; -webkit-text-stroke: .3px currentColor; }
.st-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--red); display: none; }
.stepper li[data-state="active"] .st-dot { display: block; }

/* Phone and tablet: vertical rail */
.stage { position: relative; padding-left: 80px; display: grid; gap: 0; }
.stage-svg { position: absolute; top: 0; left: 0; overflow: visible; }
.stage-svg--d { display: none; }
.stage-svg--m { width: 64px; height: 100%; }
.leap-ghost { stroke: rgba(10, 10, 10, .16); }
.leap-solid { stroke: var(--ink); stroke-dasharray: 1 1; stroke-dashoffset: var(--draw, 0); }
.wp { position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; border: 1px solid var(--next-l); background: var(--ivory); transition: background-color .3s, border-color .3s; }
.wp.is-past { background: var(--ink); border-color: var(--ink); }
.wp[data-wp="0"] { left: 8px; top: 0; }
.wp[data-wp="1"] { left: 8px; top: calc(200 / 760 * 100%); }
.wp[data-wp="2"] { left: 8px; top: calc(460 / 760 * 100%); }
.halo { position: absolute; width: 44px; height: 44px; margin: -22px 0 0 -22px; left: 56px; top: calc(330 / 760 * 100%); border-radius: 50%; background: rgba(230, 0, 1, .12); border: 1px solid rgba(230, 0, 1, .25); opacity: 0; transform: scale(.5); }
.halo.is-pulse { animation: halo 1.1s var(--expo) 1 both; }
.halo.is-on { opacity: 1; transform: none; }
@keyframes halo { 0% { opacity: 0; transform: scale(.4); } 35% { opacity: 1; transform: scale(1.15); } 100% { opacity: 1; transform: scale(1); } }
.leap-dot { width: 20px; height: 20px; left: 0; top: 0; margin: -10px 0 0 -10px; transform: translate(var(--dx, 56px), var(--dy, 0px)); will-change: transform; z-index: 2; }
.phase { display: grid; gap: 8px; color: var(--muted-l); padding-bottom: 8px; transition: color .4s; }
.phase + .phase { padding-top: 64px; }
.phase[data-phase="1"] { padding-top: 72px; }
.ph-num { font-size: 11px; color: inherit; }
.ph-t { font-weight: 300; font-size: 40px; line-height: 1; letter-spacing: -.015em; transition: font-weight .3s; }
.ph-line { font-style: italic; font-size: 18px; line-height: 1.4; }
.ph-list { font-size: 15px; line-height: 1.5; }
.phase[data-state="active"] { color: var(--ink); }
.phase[data-state="active"] .ph-num { font-weight: 500; -webkit-text-stroke: .3px currentColor; }
.phase[data-state="active"] .ph-t { font-style: italic; font-weight: 400; font-size: 64px; letter-spacing: -.015em; }
.phase[data-state="active"] .ph-list { color: var(--muted-l); }
.phase[data-state="next"] { color: var(--muted-l); }
.phase[data-state="next"] .ph-t { color: var(--next-l); }
.footnote { margin-top: calc(48px + 24 * var(--t)); border-top: 1px solid rgba(10, 10, 10, .15); padding-top: calc(24px + 4 * var(--t)); display: grid; gap: 20px; }
.footnote-t { font-size: calc(24px + 8 * var(--t)); line-height: 1.25; }
.footnote-t em { font-weight: 400; }
.footnote .alink { justify-self: start; }

/* Mobile pin is a sticky stepper under the nav; the dot follows the reading line */
@media (max-width: 899px) {
  .stepper { position: sticky; top: var(--nav-h); z-index: 3; background: var(--ivory); margin-inline: -4px; padding-inline: 4px; }
}

/* Desktop: the horizontal arc, pinned */
@media (min-width: 900px) {
  .leap-wrap { position: relative; }
  .leap-box { position: relative; }
  .stepper { position: absolute; top: 0; right: 0; z-index: 3; margin: 0; gap: 32px; font-size: 12px; }
  .stepper button { min-height: 24px; gap: 8px; }
  .stage { container-type: inline-size; padding-left: 0; width: min(100%, calc((100svh - var(--nav-h) - 160px) * 1200 / 780)); margin-inline: auto; aspect-ratio: 1200 / 780; display: block; }
  .stage-svg--m { display: none; }
  .stage-svg--d { display: block; width: 100%; height: calc(760 / 780 * 100%); }
  .wp[data-wp="0"] { left: 0; top: calc(720 / 780 * 100%); }
  .wp[data-wp="1"] { left: 30%; top: calc(720 / 780 * 100%); }
  .wp[data-wp="2"] { left: calc(980 / 1200 * 100%); top: calc(530 / 780 * 100%); }
  .halo { width: 64px; height: 64px; margin: -32px 0 0 -32px; left: 60%; top: calc(260 / 780 * 100%); }
  .leap-dot { width: 26px; height: 26px; margin: -13px 0 0 -13px; }
  .phase { position: absolute; padding: 0; gap: 10px; }
  .phase + .phase, .phase[data-phase="1"] { padding-top: 0; }
  .phase[data-phase="0"] { left: 0; top: auto; bottom: calc(96 / 780 * 100%); width: 30%; }
  .phase[data-phase="1"] { --w: max(calc(340 / 1200 * 100%), 340px); left: calc(60% - var(--w) / 2); top: 0; width: var(--w); text-align: center; justify-items: center; }
  .phase[data-phase="2"] { left: calc(980 / 1200 * 100%); top: auto; bottom: calc(282 / 780 * 100%); width: calc(220 / 1200 * 100%); }
  .ph-num { font-size: 12px; }
  .ph-t { font-size: min(64px, 5.33cqw); letter-spacing: -.02em; }
  .ph-line { font-size: min(20px, max(16px, 1.67cqw)); }
  .ph-list { font-size: min(15px, max(13px, 1.25cqw)); }
  .phase[data-state="active"] .ph-t { font-size: min(64px, 5.33cqw); }
  .phase[data-phase="1"] .ph-t { font-size: min(112px, 9.33cqw); font-weight: 300; }
  .phase[data-phase="1"][data-state="active"] .ph-t { font-size: min(112px, 9.33cqw); font-weight: 400; }
  .footnote { grid-template-columns: 1fr auto; align-items: center; gap: 32px; }
  html.js.can-pin .leap { height: calc(100svh + 200svh); margin-top: 32px; }
  html.js.can-pin .leap-sticky { position: sticky; top: 0; height: 100svh; display: flex; align-items: center; padding-top: calc(var(--nav-h) + 40px); padding-bottom: 40px; }
  html.js.can-pin .leap-wrap { width: var(--content); }
}

/* ---------- 08 The HOP model ---------- */
.model { padding-block: calc(88px + 92 * var(--t)); }
.model-h { --fm: 52; --fd: 132; --lhm: .98; --trm: -0.02em; --trd: -0.035em; --lwm: 5.4; --lw: 8.9; }
.model-h .red { font-weight: 300; }
@media (min-width: 600px) { .model-h, .burn-h, .proof-h { text-wrap: wrap; } }
.model-body { display: grid; gap: 40px; margin-top: 40px; }
.model-img { height: 400px; overflow: hidden; background: var(--ink-3); }
.model-img img { width: 100%; height: 115%; object-fit: cover; object-position: 50% 40%; transform: translateY(var(--par, -6%)); will-change: transform; }
.stmt { border-top: 1px solid rgba(232, 222, 206, .2); padding: 20px 0 24px; display: grid; gap: 6px; }
.stmt-lead { font-style: italic; font-size: calc(18px + 4 * var(--t)); color: var(--muted-d); }
.stmt-t { font-size: calc(32px + 16 * var(--t)); line-height: 1.12; letter-spacing: -.008em; }
.stmt-t em { font-weight: 400; }
.team { border-top: 1px solid rgba(232, 222, 206, .2); padding-top: 20px; display: grid; gap: 10px; }
.team-h { color: var(--ivory) !important; font-size: 11px; }
.team-l { color: var(--muted-d); font-size: calc(16px + 2 * var(--t)); line-height: 1.5; }
.principles { display: grid; margin-top: 40px; }
.principles li { display: flex; gap: 16px; align-items: baseline; border-top: 1px solid rgba(232, 222, 206, .2); padding-block: 18px; }
.principles .lbl { font-size: 11px; flex: none; }
.principles h3 { font-weight: 400; font-size: calc(24px + 8 * var(--t)); line-height: 1.15; letter-spacing: -.005em; }
.principles div p { color: var(--muted-d); font-size: calc(16px + 2 * var(--t)); line-height: 1.5; margin-top: 4px; }
@media (min-width: 768px) {
  .principles { grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: calc(48px + 48 * var(--t)); }
  .principles li { display: grid; gap: 14px; padding: 28px 0 0; align-content: start; }
  .principles .lbl { font-size: 12px; }
  .principles div p { margin-top: 14px; }
}
@media (min-width: 900px) {
  .model-body { grid-template-columns: minmax(0, 480px) minmax(0, 1fr); gap: calc(48px + 48 * var(--t)); align-items: end; margin-top: 96px; }
  .model-img { height: auto; aspect-ratio: 480 / 560; }
  .stmt { padding: 28px 0 36px; }
  .team { padding-top: 28px; gap: 12px; }
  .team-h { font-size: 12px; }
}

/* ---------- 08b House of Poland letter ---------- */
.letter { background: var(--paper); color: #0A0A0A; padding-block: calc(72px + 88 * var(--t)); }
.letter-meta { display: flex; justify-content: space-between; gap: 16px; font-size: calc(10px + 2 * var(--t)); letter-spacing: .12em; }
.letter-h { display: inline-flex; align-items: flex-end; gap: calc(6px + 4 * var(--t)); margin-top: calc(24px + 24 * var(--t)); padding-bottom: calc(14px + 20 * var(--t)); font-weight: 400; line-height: 1; white-space: nowrap; font-size: min(calc(84px + 156 * var(--t)), calc((100vw - 2 * var(--pad)) / 3.75)); letter-spacing: -.04em; }
.letter-dot { display: block; width: .233em; height: .233em; border-radius: 50%; background: var(--red); flex: none; }
.letter-row { border-top: 1px solid rgba(10, 10, 10, .9); margin-top: calc(24px + 24 * var(--t)); }
.letter-toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; text-align: left; padding-top: calc(20px + 8 * var(--t)); color: var(--muted-l); }
.lt-t { font-size: calc(20px + 14 * var(--t)); line-height: 1.35; transition: color .2s; }
.letter-toggle:hover .lt-t { color: #0A0A0A; }
.lt-b { width: calc(56px + 16 * var(--t)); height: calc(56px + 16 * var(--t)); flex: none; border-radius: 50%; background: #0A0A0A; color: var(--ivory); display: grid; place-items: center; transition: transform .5s var(--expo); }
.lt-b svg { width: 18px; height: 18px; }
.letter-toggle[aria-expanded="true"] .lt-b { transform: rotate(180deg); }
.letter-panel { overflow: hidden; }
html.js .letter-panel { transition: height .5s cubic-bezier(.25, .8, .25, 1); }
html.js .letter-panel.is-closed { height: 0; visibility: hidden; }
.letter-in { padding-top: calc(40px + 48 * var(--t)); }
html.js .letter-in { transition: opacity .5s ease, transform .5s var(--expo); }
html.js .letter-panel.is-closed .letter-in { opacity: 0; transform: translateY(40px); }
.letter-grid { display: grid; gap: 40px; }
.byline { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 20px 28px; align-content: start; }
.byline > div { display: grid; gap: 6px; }
.byline dt { font-size: 11px; letter-spacing: .12em; }
.byline dd { font-size: 18px; line-height: 1.45; color: var(--ink); }
.letter-body { max-width: 720px; color: var(--muted-l); font-size: calc(18px + 2 * var(--t)); line-height: 1.6; }
.letter-body > * + * { margin-top: 1.4em; }
.letter-stand { font-style: italic; font-size: calc(20px + 2 * var(--t)); color: var(--muted-l); line-height: 1.3; }
.letter-body .lede { font-size: calc(32px + 16 * var(--t)); line-height: 1.1; letter-spacing: -.01em; color: var(--ink); margin-top: 28px; }
.letter-body h3 { font-weight: 400; color: var(--ink); font-size: calc(24px + 6 * var(--t)); line-height: 1.2; letter-spacing: -.005em; margin-top: 2em; }
.letter-body .pull { font-style: italic; font-weight: 300; color: var(--ink); font-size: calc(30px + 14 * var(--t)); line-height: 1.15; padding-block: .4em; border-top: 1px solid rgba(10, 10, 10, .15); border-bottom: 1px solid rgba(10, 10, 10, .15); margin-block: 1.6em; }
.letter-body ol { list-style: none; counter-reset: l; display: grid; gap: 16px; }
.letter-body ol li { counter-increment: l; display: grid; grid-template-columns: 32px 1fr; gap: 12px; }
.letter-body ol li::before { content: counter(l, decimal-leading-zero); font-family: var(--sans); font-size: 12px; letter-spacing: .09em; color: var(--red-on-light); padding-top: .45em; }
.letter-body ol strong { display: block; font-weight: 400; color: var(--ink); }
.letter-body .strong-line { color: var(--ink); font-size: calc(22px + 6 * var(--t)); line-height: 1.3; }
.letter-body .closer { font-style: italic; color: var(--ink); font-size: calc(24px + 8 * var(--t)); line-height: 1.25; }
.letter-body .sign { display: flex; align-items: center; gap: 12px; color: var(--ink); font-size: 16px; }
.letter-body .sign .wordmark { font-style: italic; font-weight: 400; font-size: 28px; display: inline-flex; align-items: flex-end; gap: 3px; }
.letter-body .sign .wm-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--red); margin-bottom: 6px; }
.letter-foot { margin-top: calc(40px + 40 * var(--t)); border-top: 1px solid rgba(10, 10, 10, .15); padding-top: 28px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; color: var(--ink); }
.letter-close { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--ink) !important; font-size: 12px; letter-spacing: .12em; }
.letter-close svg { width: 16px; height: 16px; }
html:not(.js) .letter-close { display: none; }
@media (min-width: 900px) {
  .letter-grid { grid-template-columns: 280px minmax(0, 720px); gap: calc(48px + 72 * var(--t)); }
  .byline { grid-template-columns: 1fr; gap: 28px; position: sticky; top: calc(var(--nav-h) + 24px); }
}

/* ---------- 09 Contact ---------- */
.contact { padding-block: calc(88px + 92 * var(--t)) 0; overflow: clip; }
/* The sprint offer is its own section (Figma 2:123); on phones it runs on from the headline */
.contact-offer { padding-block: 36px calc(88px + 72 * var(--t)); }
@media (min-width: 1024px) { .contact { padding-bottom: calc(88px + 72 * var(--t)); } .contact-offer { padding-top: calc(88px + 92 * var(--t)); } }
.contact-traj { position: absolute; left: var(--pad); width: min(342px, calc(100vw - 2 * var(--pad))); top: 60px; aspect-ratio: 342 / 300; pointer-events: none; }
.contact-traj .traj-line { stroke: rgba(232, 222, 206, .1); }
.contact-dot { width: 18px; height: 18px; margin: -9px 0 0 -9px; left: 100%; top: calc(62 / 300 * 100%); }
.contact .wrap { position: relative; }
.contact-h { --fm: 52; --fd: 132; --lhm: .96; --trm: -0.02em; --trd: -0.035em; --lwm: 5.45; --lw: 8.75; }
.contact-h .ln { display: inline; }
.offer-row { display: grid; gap: 36px; }
.offer { display: grid; gap: 14px; border-top: 1px solid rgba(232, 222, 206, .14); padding-top: 28px; }
.offer .lbl { font-size: 11px; }
.offer-t { font-size: calc(26px + 10 * var(--t)); line-height: 1.22; letter-spacing: -.005em; }
.offer-s { font-style: italic; font-size: calc(18px + 4 * var(--t)); color: var(--muted-d); line-height: 1.4; margin-bottom: 22px; }
.offer .btn { width: 100%; }
.direct { display: grid; gap: 16px; }
.direct-lead { font-style: italic; font-size: 17px; color: var(--muted-d); }
.people { display: grid; }
.person { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 16px; border-top: 1px solid rgba(232, 222, 206, .2); padding-block: 16px; min-height: 64px; }
.person-n { grid-column: 1; font-size: 22px; line-height: 1.2; }
.person-e { grid-column: 1; font-style: italic; font-size: 16px; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; justify-self: start; padding-block: 2px; }
.copy { grid-column: 2; grid-row: 1 / span 2; min-width: 44px; min-height: 44px; font-size: 10px !important; color: var(--muted-d); }
.copy:hover { color: var(--ivory); }
@media (min-width: 600px) {
  .contact-traj { left: var(--pad); right: auto; width: var(--content); left: calc((100vw - var(--content)) / 2); top: calc(60px + 60 * var(--t)); aspect-ratio: 1200 / 520; }
  .contact-dot { width: 26px; height: 26px; margin: -13px 0 0 -13px; top: calc(120 / 520 * 100%); }
  .contact-h .ln--indent { display: inline-block; padding-left: calc(120 / 1200 * var(--content)); }
  .offer .btn { width: auto; justify-self: start; }
}
@media (min-width: 1024px) { .people { grid-template-columns: repeat(2, minmax(0, 260px)); gap: 24px; } }
@media (min-width: 1200px) {
  .offer-row { grid-template-columns: minmax(0, 1fr) auto; gap: 80px; align-items: start; }}
@media (min-width: 1024px) {
  .offer { border-top: 0; padding-top: 0; gap: 24px; }
  .offer .lbl { font-size: 12px; }
  .offer-t { letter-spacing: -.005em; line-height: 1.2; }
  .offer-s { margin-bottom: 0; line-height: 1.5; }
  .direct { gap: 20px; }
  .direct-lead { font-size: 18px; }
  .people { grid-template-columns: repeat(2, 260px); gap: 24px; }
  .person { grid-template-columns: 1fr; align-content: start; gap: 10px; padding: 24px 0 0; min-height: 0; }
  .person .lbl { font-size: 12px; }
  .person-n { font-size: 26px; }
  .person-e { font-size: 18px; }
  .copy { grid-column: 1; grid-row: auto; justify-self: start; min-height: 32px; font-size: 12px !important; text-align: left; }
}

/* ---------- 10 Footer ---------- */
.foot { padding: 48px 0 calc(40px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(232, 222, 206, .12); }
html[lang="pl"] .foot { padding-bottom: 72px; }
.foot-top { display: grid; gap: 40px; }
.foot-logo { display: inline-block; }
.foot-logo svg { fill: var(--ivory); }
.foot-logo--d { display: none; }
.foot-logo--m { width: 130px; }
.logo-dot { fill: var(--red); }
.foot-say { font-style: italic; font-size: calc(20px + 2 * var(--t)); color: var(--muted-d); margin-top: 32px; line-height: 1.5; }
.foot-links { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.fcol-h { font-style: italic; font-size: 14px; color: var(--muted-d); margin-bottom: 4px; }
.fcol ul { display: grid; gap: 4px; }
.fcol a, .fcol li > span { display: flex; align-items: center; min-height: 40px; font-size: 17px; }
.fcol a:hover { color: #E8DECE; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.fcol--hop { display: none; }
.foot-bottom { margin-top: 40px; border-top: 1px solid rgba(232, 222, 206, .12); padding-top: 20px; display: grid; gap: 10px; }
.foot-legal { font-size: 10px; }
.foot-legal a, .foot-legal button { display: inline-block; padding-block: 12px; }
.foot-end { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.foot-thanks { font-style: italic; font-size: 18px; }
.to-top { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--muted-d) !important; }
.to-top:hover { color: var(--ivory) !important; }
.to-top svg { width: 14px; height: 14px; }
@media (min-width: 900px) {
  .foot { border-top: 0; padding-top: 0; padding-bottom: 48px; }
  .foot > .wrap { border-top: 1px solid rgba(232, 222, 206, .12); padding-top: 80px; }
  .foot-top { grid-template-columns: auto auto; justify-content: space-between; align-items: start; }
  .foot-logo--m { display: none; }
  .foot-logo--d { display: block; width: 227px; }
  .foot-say { margin-top: 20px; }
  .foot-links { display: flex; gap: 72px; }
  .fcol--hop { display: block; }
  .fcol-h { font-size: 17px; margin-bottom: 12px; line-height: 1.5; }
  .fcol ul { gap: 12px; }
  .fcol a, .fcol li > span { min-height: 0; line-height: 1.5; }
  .fcol li { line-height: 1.5; }
  .foot-bottom { margin-top: 80px; border-top: 0; padding-top: 0; display: flex; justify-content: space-between; align-items: center; }
  .foot-legal { font-size: 12px; }
  .foot-legal a, .foot-legal button { padding-block: 6px; }
  .foot-end { gap: 32px; }
}
@media (max-width: 1023px) { .foot { padding-bottom: calc(112px + env(safe-area-inset-bottom)); } }

/* ---------- Cookie consent (same behaviour as the other pages) ---------- */
.consent-bar { position: fixed; z-index: 70; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); max-width: 520px; background: var(--ink-2); color: var(--ivory); border: 1px solid rgba(232, 222, 206, .14); padding: 20px; display: grid; gap: 10px; box-shadow: 0 20px 60px rgba(0, 0, 0, .35); }
.consent-bar[hidden] { display: none; }
.cb-title { font-size: 22px; line-height: 1.2; }
.cb-text { color: var(--muted-d); font-size: 15px; line-height: 1.5; }
.cb-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 6px; }
.cbtn { min-height: 44px; padding: 10px 18px; background: var(--red-ui); color: #E8DECE; font-style: italic; font-size: 16px; }
.cbtn:hover { background: #C92A18; }
.consent-bar .cbtn { background: transparent; border: 1px solid rgba(232, 222, 206, .5); }
.consent-bar .cbtn:hover { border-color: var(--ivory); background: transparent; }
.cb-more { min-height: 44px; padding-inline: 8px; font-style: italic; text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 600px) { .consent-bar { left: auto; right: 24px; bottom: 24px; } }
html.consent-pending .sticky-cta { visibility: hidden; }
.consent-dialog { border: 0; padding: 0; background: var(--paper); color: var(--ink); width: min(560px, calc(100vw - 32px)); max-height: calc(100svh - 32px); }
.consent-dialog::backdrop { background: rgba(10, 10, 10, .6); }
.cd-inner { padding: 28px; display: grid; gap: 16px; }
.cd-inner h2 { font-weight: 400; font-size: 32px; line-height: 1.1; outline: none; }
.cd-intro { color: var(--muted-l); font-size: 16px; line-height: 1.5; }
.cd-intro a { text-decoration: underline; text-underline-offset: 3px; color: var(--ink); }
.cd-list { display: grid; }
.cd-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; border-top: 1px solid rgba(10, 10, 10, .15); padding-block: 14px; }
.cd-name { font-size: 18px; }
.cd-desc { font-size: 14px; color: var(--muted-l); line-height: 1.45; }
.toggle { position: relative; width: 44px; height: 26px; flex: none; }
.toggle input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.toggle span { position: absolute; inset: 0; border-radius: 13px; background: rgba(232, 222, 206, .8); transition: background-color .2s; }
.toggle span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #F6F5F0; transition: transform .2s var(--expo); }
.toggle input:checked + span { background: var(--ink); }
.toggle input:checked + span::after { transform: translateX(18px); }
.toggle input:disabled + span { opacity: .5; }
.toggle input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.cd-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.cbtn--ghost { background: transparent; color: var(--ink); border: 1px solid rgba(10, 10, 10, .4); }
.cbtn--ghost:hover { background: transparent; border-color: var(--ink); }

/* ---------- Toast ---------- */
.toast { position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); z-index: 80; transform: translate(-50%, 16px); background: var(--ivory); color: var(--ink); font-family: var(--sans); font-size: 13px; letter-spacing: .06em; padding: 10px 16px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .3s var(--expo); }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }
@media (min-width: 1024px) { .toast { bottom: 32px; } }

/* ---------- Motion (only with JS, only without reduced motion) ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* Hero intro: ink → logo → line 1 → line 2 → bottom bar */
  html.js.intro .nav-logo svg { opacity: 0; }
  html.js.intro .hero .ln { display: inline-block; overflow: clip; overflow-clip-margin: .2em; vertical-align: bottom; padding-bottom: .08em; margin-bottom: -.08em; }
  html.js.intro .hero .ln-i { display: inline-block; transform: translateY(105%); }
  html.js.intro .hero-bar > * { opacity: 0; }
  html.js.intro-run .nav-logo svg { opacity: 1; transition: opacity .5s ease .05s, transform .22s ease; }
  html.js.intro-run .hero .ln-i { transform: none; transition: transform .9s var(--expo) var(--d, .08s); }
  html.js.intro-run .hero .ln:nth-of-type(2) .ln-i { --d: .2s; }
  html.js.intro-run .hero-bar > * { opacity: 1; transition: opacity .6s ease 1s; }
  @media (max-width: 599px) {
    html.js.intro-run .hero .ln-i { transition-duration: .6s; --d: .05s; }
    html.js.intro-run .hero .ln:nth-of-type(2) .ln-i { --d: .15s; }
    html.js.intro-run .hero-bar > * { transition-delay: .3s; }
  }
  html.js .hero-body { transform: translateY(var(--drift, 0px)); }

  /* Scroll reveals */
  html.js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .7s ease var(--rd, 0s), transform .9s var(--expo) var(--rd, 0s); }
  html.js [data-reveal].in { opacity: 1; transform: none; }
  html.js .clip { clip-path: inset(100% 0 0 0); transition: clip-path 1s var(--expo) var(--rd, 0s); }
  html.js .clip img { transform: scale(1.06); transition: transform 1.2s var(--expo) var(--rd, 0s); }
  html.js .in .clip, html.js .clip.in { clip-path: inset(0 0 0 0); }
  html.js .in .clip img, html.js .clip.in img { transform: none; }
  html.js .model-img.in img { transform: translateY(var(--par, -6%)); }
  html.js .founder:nth-child(2) { --rd: .12s; }
  html.js .case:nth-child(2) { --rd: .08s; }
  html.js .case:nth-child(3) { --rd: .16s; }
  html.js .brand:nth-child(2) { --rd: .1s; }
  html.js .brand:nth-child(3) { --rd: .2s; }
  html.js .brand--pl { --rd: .65s; }
  html.js .stmt { transform: translateX(-24px); }
  html.js .stmt--2 { --rd: .15s; transform: translateX(-24px); }
  html.js .stmt.in { transform: translateX(0); }
  html.js .stmt--2.in { transform: translateX(40px); }
  html.js .team { --rd: .3s; }
  html.js .principles li:nth-child(2) { --rd: .08s; }
  html.js .principles li:nth-child(3) { --rd: .16s; }
  @media (max-width: 899px) { html.js .stmt--2.in { transform: none; } }

  /* Word-by-word headline */
  html.js [data-words] .w { display: inline-block; opacity: 0; transform: translateY(.25em); transition: opacity .6s ease, transform .8s var(--expo); transition-delay: calc(var(--i) * 70ms); }
  html.js [data-words].in .w { opacity: 1; transform: none; }

  /* The Problem, pinned on desktop */
  @media (min-width: 1024px) {
    html.js.can-pin .problem { padding: 0; }
    html.js.can-pin .problem .pin { height: 220svh; }
    html.js.can-pin .problem .pin-in { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; justify-content: center; }
    html.js.can-pin .problem .p1 { transition: opacity .6s ease, transform .8s var(--expo); }
    html.js.can-pin .problem .p2 { opacity: 0; transform: translateX(8%); transition: opacity .6s ease, transform .9s var(--expo); }
    html.js.can-pin .problem .p2-brand { color: var(--ivory); }
    html.js.can-pin .problem .problem-aside { opacity: 0; transition: opacity .8s ease; }
    html.js.can-pin .problem[data-step="1"] .p1, html.js.can-pin .problem[data-step="2"] .p1, html.js.can-pin .problem[data-step="3"] .p1 { opacity: 1; }
    html.js.can-pin .problem[data-step="1"] .p2, html.js.can-pin .problem[data-step="2"] .p2, html.js.can-pin .problem[data-step="3"] .p2 { opacity: 1; transform: none; }
    html.js.can-pin .problem[data-step="2"] .p2-brand, html.js.can-pin .problem[data-step="3"] .p2-brand { color: var(--red); }
    html.js.can-pin .problem[data-step="3"] .problem-aside { opacity: 1; }
  }
  /* Phones and tablets: a simple sequence on enter */
  @media (max-width: 1023px) {
    html.js .problem .p1, html.js .problem .p2, html.js .problem .problem-aside { opacity: 0; transform: translateY(16px); transition: opacity .7s ease, transform .9s var(--expo); }
    html.js .problem .p2 { transition-delay: .25s; }
    html.js .problem .problem-aside { transition-delay: .55s; }
    html.js .problem.in .p1 { opacity: .4; transform: none; transition-delay: .5s, 0s; }
    html.js .problem.in .p1 { opacity: 1; }
    html.js .problem.in .p2, html.js .problem.in .problem-aside { opacity: 1; transform: none; }
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .15s !important; animation: none !important; scroll-behavior: auto !important; }
  .leap-dot { transition: none !important; }
  .model-img img { transform: none; height: 100%; }
}
@media (prefers-contrast: more) {
  .lbl, .rh, .ink .lbl, .ink .rh { color: inherit; }
  .plat-t, .plat-num { color: var(--muted-d); }
  .phase[data-state="next"], .stepper li[data-state="next"] { color: var(--muted-l); }
}
@media print { .nav, .menu, .sticky-cta, .consent-bar, .toast, .contact-traj { display: none !important; } .ink { background: #F6F5F0; color: #000; } }
html:not(.js) .nav-menu { visibility: hidden; }

/* ======================================================================
   Contact page (V2): same shell, tokens and type as the home page
   ====================================================================== */
.chead { padding: calc(var(--nav-h) + 72px + 48 * var(--t)) 0 calc(56px + 64 * var(--t)); overflow: clip; }
.chead .wrap { position: relative; }
.chead-h { --fm: 52; --fd: 120; --lhm: .98; --trm: -0.02em; --trd: -0.035em; --lwm: 5.2; --lw: 10.4; }
.chead-h .red { font-weight: 300; }
.chead-lead { margin-top: calc(20px + 12 * var(--t)); font-style: italic; font-size: calc(20px + 8 * var(--t)); line-height: 1.35; color: var(--muted-d); max-width: 36ch; }
.chead .contact-traj { top: calc(40px + 40 * var(--t)); }

.cbody { padding-block: calc(56px + 84 * var(--t)) calc(88px + 72 * var(--t)); }
.cgrid { display: grid; gap: 64px; }
@media (min-width: 1024px) { .cgrid { grid-template-columns: minmax(0, 1fr) 360px; gap: calc(48px + 48 * var(--t)); align-items: start; } }

/* Form */
.form { display: grid; gap: calc(48px + 16 * var(--t)); }
.fset { border: 0; margin: 0; padding: 0; min-width: 0; }
.fset-legend { display: flex; align-items: baseline; gap: 14px; padding: 0; margin-bottom: 20px; }
.fset-legend .enum { color: var(--muted-l); font-size: 11px; }
.fset-t { font-style: italic; font-size: calc(22px + 6 * var(--t)); line-height: 1.3; color: var(--ink); }
.group { display: grid; }
@media (min-width: 600px) { .group--grid { grid-template-columns: 1fr 1fr; column-gap: 24px; } .group--grid .cell--wide { grid-column: span 1; } }
.fld { position: relative; display: grid; gap: 8px; align-content: start; padding: 0 0 22px; }
.fld > label:not(.check), .flabel { font-family: var(--sans); font-size: 14px; font-weight: 500; letter-spacing: .01em; color: var(--ink); }
.req { color: var(--red-on-light); }
.opt { text-transform: none; letter-spacing: .01em; font-family: var(--serif); font-weight: 400; font-style: italic; font-size: 14px; color: var(--muted-l); margin-left: 4px; }
/* Standard boxed fields: a clear white box with a visible border, a stronger border on focus */
.fld input:not([type="checkbox"]):not([type="radio"]), .fld textarea { width: 100%; min-height: 52px; border: 1px solid rgba(10, 10, 10, .38); border-radius: 0; background: #F6F5F0; color: var(--ink); font-family: var(--serif); font-size: 18px; line-height: 1.4; padding: 12px 14px; outline: none; -webkit-appearance: none; appearance: none; transition: border-color .15s, box-shadow .15s; }
.fld input:not([type="checkbox"]):not([type="radio"]):hover, .fld textarea:hover { border-color: rgba(10, 10, 10, .65); }
.fld input:not([type="checkbox"]):not([type="radio"]):focus, .fld textarea:focus { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.fld.invalid input:not([type="checkbox"]):not([type="radio"]), .fld.invalid textarea { border-color: var(--red-on-light); box-shadow: 0 0 0 1px var(--red-on-light); }
.fld textarea { min-height: 140px; resize: vertical; }
.fld input:not([type="checkbox"]):not([type="radio"])::placeholder, .fld textarea::placeholder { color: var(--next-l); }
.err { font-style: italic; font-size: 15px; line-height: 1.4; color: var(--red-on-light); min-height: 0; }
.err:empty { display: none; }
.field-foot { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; }
.counter { margin-left: auto; font-variant-numeric: tabular-nums; }
.counter.near { color: var(--red-on-light); }
.sub { margin-top: 32px; display: grid; gap: 12px; }
.sub--inline { grid-template-columns: auto 1fr; align-items: center; gap: 12px 20px; }
/* Options as standard checkboxes (square, any) and radio buttons (round, one) */
.picks { display: grid; grid-template-columns: 1fr; gap: 0 32px; }
@media (min-width: 600px) { .picks { grid-template-columns: 1fr 1fr; } }
.seg { display: flex; flex-wrap: wrap; gap: 0 32px; }
.pick, .seg label { position: relative; display: flex; }
.pick input, .seg input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pick span, .seg span { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 44px; padding: 6px 0; font-size: 17px; line-height: 1.3; color: var(--ink); }
.pick span::before, .seg span::before { content: ""; flex: none; width: 20px; height: 20px; border: 1.5px solid rgba(10, 10, 10, .55); background: transparent; transition: background-color .15s, border-color .15s, box-shadow .15s; }
.pick input[type="radio"] + span::before, .seg span::before { border-radius: 50%; }
.pick:hover span::before, .seg label:hover span::before { border-color: var(--ink); }
.pick input[type="checkbox"]:checked + span::before { background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3.2L15 7' fill='none' stroke='%23EFEBE4' stroke-width='2'/%3E%3C/svg%3E") center / 18px no-repeat; border-color: var(--ink); }
.pick input[type="radio"]:checked + span::before, .seg input:checked + span::before { border-color: var(--ink); box-shadow: inset 0 0 0 4px var(--ivory), inset 0 0 0 10px var(--ink); }
.pick input:focus-visible + span::before, .seg input:focus-visible + span::before { outline: 2px solid var(--ink); outline-offset: 3px; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.submit-row { border-top: 1px solid rgba(10, 10, 10, .9); padding-top: 28px; display: grid; gap: 24px; justify-items: start; }
.consent { border-top: 0; padding: 0; }
.consent:focus-within { box-shadow: none; }
.check { position: relative; display: flex; gap: 12px; align-items: flex-start; font-size: 17px; line-height: 1.45; color: var(--ink); cursor: pointer; }
.check input { position: absolute; left: 0; top: 2px; width: 22px; height: 22px; margin: 0; opacity: 0; cursor: pointer; }
.check .box { flex: none; width: 22px; height: 22px; margin-top: 2px; border: 1.5px solid var(--ink); position: relative; transition: background-color .2s; }
.check input:checked + .box { background: var(--ink); }
.check input:checked + .box::after { content: ""; position: absolute; left: 6px; top: 2px; width: 6px; height: 11px; border: solid var(--ivory); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.check input:focus-visible + .box { outline: 2px solid var(--ink); outline-offset: 3px; }
.consent.invalid .box { border-color: var(--red-on-light); }
.check a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
#c-submit { gap: 40px; }
#c-submit .spinner { display: none; width: 18px; height: 18px; border: 2px solid rgba(246, 245, 240, .4); border-top-color: #E8DECE; border-radius: 50%; }
#c-submit.busy .spinner { display: block; animation: spin .8s linear infinite; }
#c-submit.busy .btn-i { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.hint { font-size: 15px; color: var(--muted-l); }
.ulink { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; color: var(--ink); min-height: 44px; }
.form-alert { border-top: 2px solid var(--red-on-light); padding: 16px 0 4px; color: var(--ink); font-size: 17px; line-height: 1.5; outline: none; }
.form-alert strong { font-weight: 400; font-style: italic; color: var(--red-on-light); }
.form-alert ul { margin: 8px 0 0; padding-left: 20px; }
.form-alert a { text-decoration: underline; text-underline-offset: 3px; }
.sent { padding-top: 8px; outline: none; display: grid; gap: 20px; justify-items: start; }
.sent[hidden] { display: none; }
.sent-dot { position: relative; width: 26px; height: 26px; }
.sent-h { font-weight: 400; font-size: calc(48px + 48 * var(--t)); line-height: 1; letter-spacing: -.03em; }
.sent .lead { font-size: calc(20px + 4 * var(--t)); color: var(--muted-l); }
.sent .lead strong { font-weight: 400; color: var(--ink); font-style: italic; }
.sent-demo { color: var(--muted-l); font-size: 15px; }
.sent-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 24px 32px; margin-top: 12px; }

/* Aside */
.caside { display: grid; gap: 16px; align-content: start; }
@media (min-width: 1024px) { .caside { position: sticky; top: calc(var(--nav-h) + 24px); } }
.caside-h { font-style: italic; font-size: calc(17px + 1 * var(--t)); color: var(--muted-l); }
.cpeople { display: grid; }
.cperson { border-top: 1px solid rgba(10, 10, 10, .2); padding: 20px 0 12px; display: grid; gap: 6px; }
.cperson-n { font-size: calc(22px + 4 * var(--t)); line-height: 1.2; margin-bottom: 4px; }
.crows li { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 44px; }
.crows a { font-style: italic; font-size: 17px; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; padding-block: 8px; }
.crows a[href^="tel"] { text-decoration: none; font-style: normal; font-variant-numeric: lining-nums tabular-nums; }
.caside .copy { min-width: 44px; min-height: 44px; font-size: 10px; color: var(--muted-l); text-align: right; }
.caside .copy:hover { color: var(--ink); }
.csprint { margin-top: 16px; border-top: 1px solid rgba(10, 10, 10, .9); padding-top: 24px; display: grid; gap: 10px; }
.csprint .lbl { font-size: 11px; }
.csprint-t { font-size: calc(22px + 4 * var(--t)); line-height: 1.25; }
.csprint-s { font-style: italic; color: var(--muted-l); font-size: 17px; }
.consent.invalid { box-shadow: none; }
.counter { white-space: nowrap; }
.sent, .form-alert { scroll-margin-top: calc(var(--nav-h) + 40px); }

/* Logo: burgundy full stop that gives a small hop in the nav (every few seconds, and on hover/focus) */
.logo-dot { fill: var(--red); }
.nav-dot { transform-box: fill-box; transform-origin: 50% 100%; }
@media (prefers-reduced-motion: no-preference) {
  .nav-logo .nav-dot, .menu-logo .nav-dot { animation: logo-hop-now 1.9s cubic-bezier(.3, .6, .4, 1) .6s infinite; }
  }
@keyframes logo-hop {
  0%, 82%, 100% { transform: none; }
  85% { transform: scale(1.22, .78); }
  90% { transform: translateY(-70%) scale(.9, 1.12); }
  95% { transform: translateY(0) scale(1.16, .84); }
  98% { transform: translateY(-12%) scale(.98, 1.02); }
}
@keyframes logo-hop-now {
  0%, 100% { transform: none; }
  15% { transform: scale(1.22, .78); }
  45% { transform: translateY(-70%) scale(.9, 1.12); }
  72% { transform: translateY(0) scale(1.16, .84); }
  88% { transform: translateY(-12%) scale(.98, 1.02); }
}

/* ---------- 01b Intro + manifesto film ---------- */
.manifesto { background: var(--ink-3); padding-block: calc(72px + 108 * var(--t)) calc(88px + 92 * var(--t)); }
.intro-h { text-wrap: balance; }
.intro-l { display: block; }
.intro-h em { font-weight: 300; }
.mv { margin: calc(32px + 32 * var(--t)) 0 0; }
.mv-frame { position: relative; aspect-ratio: 16 / 9; background: #201F1D; display: grid; place-items: center; overflow: hidden; }
.mv-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #201F1D; }
.mv-play { position: relative; z-index: 1; width: calc(64px + 32 * var(--t)); aspect-ratio: 1; border-radius: 50%; background: var(--red); display: grid; place-items: center; cursor: pointer; border: 0; transition: transform .5s cubic-bezier(.22, 1, .36, 1), background-color .3s ease; }
.mv-play:hover { transform: scale(1.06); }
.mv-play:focus-visible { outline: 2px solid var(--ivory); outline-offset: 4px; }
.mv.is-playing .mv-play, .mv.is-playing .mv-cap { opacity: 0; pointer-events: none; transition: opacity .4s ease; }
.mv-play svg { width: 34%; height: auto; fill: var(--ivory); margin-left: 8%; }
.mv-cap { position: absolute; z-index: 1; left: calc(16px + 16 * var(--t)); bottom: calc(14px + 14 * var(--t)); color: var(--muted-d); }


.tl { display: block; text-wrap: balance; }

/* 04 Who we are: intro under the title */
.who-intro { max-width: 760px; margin-top: calc(24px + 8 * var(--t)); font-size: calc(18px + 6 * var(--t)); line-height: 1.5; color: var(--muted-l); text-wrap: pretty; }

/* ---------- 07b How we do it: nine service cards (hover on desktop, tap on touch) ---------- */
.howdo { --svc-e: cubic-bezier(.22, 1, .36, 1); background: var(--ivory); padding-block: calc(8px + 92 * var(--t)) calc(88px + 12 * var(--t)); }
.howdo-h { text-wrap: balance; }
.howdo-h em { display: block; }
.svc-grid { list-style: none; margin: calc(32px + 16 * var(--t)) 0 0; padding: 0; display: grid; gap: 12px; }
.svc { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: var(--svc-min, 0px); background: #F6F5F0; color: var(--ink); transition: background-color .6s var(--svc-e), color .6s var(--svc-e); }
.svc-btn { display: flex; flex-direction: column; gap: 28px; flex: 1 0 auto; width: 100%; padding: 22px 22px 0; text-align: left; font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.svc-btn:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.svc-top { display: flex; align-items: center; gap: 12px; width: 100%; }
.svc-n { font-family: var(--sans); font-size: 12px; letter-spacing: .04em; color: var(--muted-l); -webkit-text-stroke: .3px currentColor; font-variant-numeric: lining-nums tabular-nums; transition: color .6s var(--svc-e); }
.svc-s { flex: 1; font-family: var(--sans); font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--muted-l); transition: color .6s var(--svc-e); }
.svc-i { position: relative; width: 14px; height: 14px; flex: none; }
.svc-i::before, .svc-i::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--ink); transition: width .6s var(--svc-e), height .6s var(--svc-e), border-radius .6s var(--svc-e), background-color .6s var(--svc-e), transform .6s var(--svc-e); }
.svc-i::before { width: 14px; height: 1.5px; transform: translate(-50%, -50%); }
.svc-i::after { width: 1.5px; height: 14px; transform: translate(-50%, -50%); }
.svc-h { font-size: 22px; line-height: 1.25; letter-spacing: -0.01em; text-wrap: balance; padding-bottom: 22px; transition: padding .6s var(--svc-e), color .6s var(--svc-e); }
/* Description: rows 0fr → 1fr gives a true, smooth height animation */
.svc-b { flex: none; display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--svc-e); }
.svc-bi { min-height: 0; overflow: hidden; }
.svc-bi p { margin: 0; padding: 0 22px 22px; font-size: 15px; line-height: 1.5; color: var(--muted-d); opacity: 0; transform: translateY(10px); transition: opacity .35s ease, transform .6s var(--svc-e); }
/* Open state (tap, hover, keyboard focus) */
.svc.is-open, .svc:has(.svc-btn:focus-visible) { background: var(--ink); color: var(--ivory); }
.svc.is-open .svc-n, .svc:has(.svc-btn:focus-visible) .svc-n { color: var(--red-on-dark); }
.svc.is-open .svc-s, .svc:has(.svc-btn:focus-visible) .svc-s { color: var(--muted-d); }
.svc.is-open .svc-h, .svc:has(.svc-btn:focus-visible) .svc-h { font-style: italic; padding-bottom: 10px; }
.svc.is-open .svc-b, .svc:has(.svc-btn:focus-visible) .svc-b { grid-template-rows: 1fr; }
.svc.is-open .svc-bi p, .svc:has(.svc-btn:focus-visible) .svc-bi p { opacity: 1; transform: none; transition: opacity .5s ease .12s, transform .7s var(--svc-e) .06s; }
.svc.is-open .svc-i::before, .svc.is-open .svc-i::after, .svc:has(.svc-btn:focus-visible) .svc-i::before, .svc:has(.svc-btn:focus-visible) .svc-i::after { width: 10px; height: 10px; border-radius: 50%; background: var(--red); }
@media (hover: hover) {
  .svc:hover { background: var(--ink); color: var(--ivory); }
  .svc:hover .svc-n { color: var(--red-on-dark); }
  .svc:hover .svc-s { color: var(--muted-d); }
  .svc:hover .svc-h { font-style: italic; padding-bottom: 10px; }
  .svc:hover .svc-b { grid-template-rows: 1fr; }
  .svc:hover .svc-bi p { opacity: 1; transform: none; transition: opacity .5s ease .12s, transform .7s var(--svc-e) .06s; }
  .svc:hover .svc-i::before, .svc:hover .svc-i::after { width: 10px; height: 10px; border-radius: 50%; background: var(--red); }
}
@media (min-width: 700px) { .svc-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
@media (min-width: 1280px) { .svc-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) {
  .svc-grid { gap: 24px; }
  .svc { aspect-ratio: 384 / 200; }
  .svc-btn { padding: 24px 24px 0; gap: 16px; justify-content: space-between; }
  .svc-h { font-size: calc(20px + 6 * var(--t)); padding-bottom: 24px; }
  .svc-bi p { padding: 0 24px 24px; font-size: 14px; }
}
/* Measuring pass (JS): open, unanimated, natural height */
.svc.measure, .svc.measure * { transition: none !important; }
.svc.measure { aspect-ratio: auto !important; min-height: 0 !important; }
.svc.measure .svc-h { font-style: italic; padding-bottom: 10px; }
.svc.measure .svc-b { grid-template-rows: 1fr; }
@media (prefers-reduced-motion: reduce) { .svc, .svc *, .svc-i::before, .svc-i::after { transition: none !important; } }

/* One title style for every main section (matches "Poland has gone global."); the hero keeps its own */
.moment-h, .who-h, .proof-h, .burn-h, .model-h, .contact-h, .intro-h, .howdo-h, .p1, .p2 { --fm: 52; --fd: 120; --lhm: 1.08; --lhd: 1.2; --trm: -0.02em; --trd: -0.035em; }
/* Every title that ends in a full stop ends in burgundy */
.tdot { color: var(--red); font-style: inherit; }
@media (min-width: 600px) {
  .moment-h, .who-h, .proof-h, .burn-h, .model-h, .contact-h, .intro-h, .howdo-h, .p1, .p2 { --lw: 10.6; }
}

/* Moment: subtle hover on the country cards */
@media (hover: hover) {
  .brand { transition: transform .6s cubic-bezier(.22, 1, .36, 1), border-color .5s ease, background-color .5s ease, box-shadow .6s cubic-bezier(.22, 1, .36, 1); }
  .brand:hover { transform: translateY(-4px); border-color: rgba(10, 10, 10, .36); background-color: rgba(246, 245, 240, .35); box-shadow: 0 14px 30px -20px rgba(10, 10, 10, .35); }
  .brand--pl:hover { background-color: #A8203A; border-color: #A8203A; box-shadow: 0 18px 36px -22px rgba(230, 0, 1, .7); }
  .brand .brand-n { transition: transform .6s cubic-bezier(.22, 1, .36, 1); }
  .brand:hover .brand-n { transform: translateX(3px); }
}
@media (prefers-reduced-motion: reduce) { .brand, .brand .brand-n { transition: none !important; } .brand:hover, .brand:hover .brand-n { transform: none !important; } }

/* Footer: the sprint offer as the footer's call-to-action band */
.foot-cta { display: grid; gap: 24px; padding: calc(16px + 40 * var(--t)) 0 calc(48px + 32 * var(--t)); margin-bottom: calc(48px + 24 * var(--t)); border-bottom: 1px solid rgba(232, 222, 206, .12); }
.foot-cta-h { margin: 12px 0 0; max-width: 18ch; font-weight: 400; font-size: calc(32px + 24 * var(--t)); line-height: 1.15; letter-spacing: -0.02em; text-wrap: balance; color: var(--ivory); }
.foot-cta-s { margin-top: 12px; font-style: italic; font-size: calc(18px + 4 * var(--t)); color: var(--muted-d); }
.foot-cta-b { justify-self: start; }
@media (min-width: 900px) {
  .foot-cta { grid-template-columns: 1fr auto; align-items: end; gap: 48px; }
}

/* ---------- Nav: the Articles pill (stands out from the section links) ---------- */
.nav-links .nav-art { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 12px; margin-left: 4px; border: 1px solid rgba(232, 222, 206, .28); border-radius: 999px; font-style: italic; color: var(--ivory); transition: border-color .3s ease, background-color .3s ease; }
.nav-links .nav-art::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--red); flex: none; }
.nav-links .nav-art::after { display: none !important; }
.nav-links .nav-art small { font-family: var(--sans); font-style: normal; font-size: 10px; letter-spacing: .09em; text-transform: uppercase; color: var(--muted-d); }
.nav-links .nav-art:hover, .nav-links .nav-art:focus-visible { border-color: rgba(232, 222, 206, .6); }
.nav-links .nav-art[aria-current="page"] { background: rgba(232, 222, 206, .08); border-color: rgba(232, 222, 206, .5); }
.nav-menu { position: relative; }
.nav-menu::after { content: ""; position: absolute; top: 8px; right: 4px; width: 7px; height: 7px; border-radius: 50%; background: var(--red); }
.menu-badge { margin-left: 12px; align-self: center; font-family: var(--sans); font-style: normal; font-size: 10px; letter-spacing: .09em; text-transform: uppercase; color: var(--ivory); background: var(--red); border-radius: 999px; padding: 3px 8px; }

/* ---------- Articles hub ---------- */
.kdot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--red); margin-right: 10px; vertical-align: middle; }
.ahub-head { padding: calc(var(--nav-h) + 64px + 76 * var(--t)) 0 calc(48px + 48 * var(--t)); }
.ahub-k { margin-bottom: calc(16px + 12 * var(--t)); }
.ahub-lead { margin-top: calc(16px + 12 * var(--t)); max-width: 30ch; font-style: italic; font-size: calc(20px + 8 * var(--t)); line-height: 1.4; color: var(--muted-d); }
.ahub-list { background: var(--paper); padding: calc(40px + 56 * var(--t)) 0 calc(72px + 68 * var(--t)); }
.acards { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
@media (min-width: 760px) { .acards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }
.acard { display: flex; }
.acard-a { --e: cubic-bezier(.22, 1, .36, 1); display: flex; flex-direction: column; width: 100%; background: #F6F5F0; color: var(--ink); text-decoration: none; transition: background-color .6s var(--e), color .6s var(--e), transform .6s var(--e); }
.acard-img { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--ink-3); }
.acard-img::before { content: ""; position: absolute; inset: -20%; background: radial-gradient(45% 55% at var(--gx, 30%) 35%, rgba(230, 0, 1, .55), transparent 70%); transition: transform 1.2s var(--e), opacity .6s ease; }
.acard-img--02::before { --gx: 48%; } .acard-img--03::before { --gx: 66%; }
.acard-no { position: absolute; left: 24px; bottom: 18px; font-style: italic; font-weight: 300; font-size: calc(44px + 20 * var(--t)); line-height: 1; color: var(--ivory); opacity: .9; }
.acard-t { flex: 1; display: flex; flex-direction: column; gap: 14px; padding: 24px 24px 26px; }
.acard-topic { color: var(--red-on-light); }
.acard-h { font-size: calc(26px + 6 * var(--t)); line-height: 1.2; letter-spacing: -0.01em; text-wrap: balance; }
.acard-h em { font-weight: 300; }
.acard-ex { font-size: 16px; line-height: 1.5; color: var(--muted-l); transition: color .6s var(--e); }
.acard-f { margin-top: auto; padding-top: 16px; border-top: 1px solid rgba(10, 10, 10, .14); display: flex; justify-content: space-between; align-items: center; gap: 12px; transition: border-color .6s var(--e); }
.acard-read { font-style: italic; font-size: 17px; white-space: nowrap; }
.acard-read span { display: inline-block; transition: transform .6s var(--e); }
.acard-a:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
@media (hover: hover) {
  .acard-a:hover { background: var(--ink); color: var(--ivory); }
  .acard-a:hover .acard-h { font-style: italic; }
  .acard-a:hover .acard-ex, .acard-a:hover .acard-f .lbl { color: var(--muted-d); }
  .acard-a:hover .acard-topic { color: var(--red-on-dark); }
  .acard-a:hover .acard-f { border-color: rgba(232, 222, 206, .16); }
  .acard-a:hover .acard-img::before { transform: scale(1.12); opacity: 1; }
  .acard-a:hover .acard-read span { transform: translateX(4px); }
}

/* ---------- Article template ---------- */
.art-cover { padding: calc(var(--nav-h) + 56px + 84 * var(--t)) 0 calc(48px + 72 * var(--t)); }
.art-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-bottom: calc(20px + 20 * var(--t)); }
.art-crumbs a { color: var(--muted-d); }
.art-crumbs .kdot { margin: 0; }
.art-h { text-wrap: balance; }
.art-h em { font-weight: 300; }
.art-dek { margin-top: calc(16px + 12 * var(--t)); font-size: calc(22px + 14 * var(--t)); line-height: 1.3; color: var(--muted-d); max-width: 34ch; }
.art-meta { margin-top: calc(28px + 20 * var(--t)); padding-top: 20px; border-top: 1px solid rgba(232, 222, 206, .14); display: flex; flex-wrap: wrap; gap: 16px 24px; justify-content: space-between; align-items: center; }
.art-meta .lbl { color: var(--muted-d); }
.art-share { font: inherit; font-style: italic; font-size: 15px; color: var(--ivory); background: none; border: 1px solid rgba(232, 222, 206, .4); padding: 9px 16px; cursor: pointer; transition: border-color .3s ease; }
.art-share:hover { border-color: var(--ivory); }
.art-body { background: var(--paper); padding: calc(48px + 72 * var(--t)) 0 calc(72px + 68 * var(--t)); }
.art-grid { display: grid; gap: 32px; }
.art-toc > .lbl { margin-bottom: 12px; }
.art-toc ol { list-style: none; margin: 0; padding: 0; }
.art-toc li a { display: flex; gap: 10px; padding: 10px 0; border-top: 1px solid rgba(10, 10, 10, .12); font-size: 15px; line-height: 1.35; color: var(--muted-l); text-decoration: none; transition: color .3s ease; }
.art-toc li a .lbl { padding-top: 2px; }
.art-toc li a[aria-current="true"] { color: var(--ink); font-style: italic; }
.art-toc li a[aria-current="true"] .lbl { color: var(--red); }
.art-prog { margin-top: 18px; height: 2px; background: rgba(10, 10, 10, .12); }
.art-prog span { display: block; height: 100%; width: 0; background: var(--red); transition: width .2s linear; }
@media (max-width: 1023px) { .art-prog { display: none; } .art-toc { border-bottom: 1px solid rgba(10, 10, 10, .12); padding-bottom: 8px; } }
@media (min-width: 1024px) {
  .art-grid { grid-template-columns: 280px minmax(0, 720px); gap: calc(48px + 72 * var(--t)); align-items: start; }
  .art-toc { position: sticky; top: calc(var(--nav-h) + 32px); }
}
.art-col { display: grid; gap: 22px; font-size: calc(18px + 3 * var(--t)); line-height: 1.65; color: rgba(10, 10, 10, .86); }
.art-col p { margin: 0; }
.art-lede { border-left: 2px solid var(--red); padding: 0 0 12px calc(18px + 10 * var(--t)); font-style: italic; font-size: calc(28px + 12 * var(--t)); line-height: 1.25; letter-spacing: -0.01em; color: var(--ink); }
.art-sub { display: grid; gap: 12px; margin: calc(28px + 16 * var(--t)) 0 0; font-weight: 400; font-size: calc(28px + 12 * var(--t)); line-height: 1.2; letter-spacing: -0.015em; color: var(--ink); scroll-margin-top: calc(var(--nav-h) + 24px); }
.art-pull { margin: calc(12px + 12 * var(--t)) 0; padding: calc(32px + 16 * var(--t)) 0; border-block: 1px solid rgba(10, 10, 10, .18); }
.art-pull p { font-style: italic; font-weight: 300; font-size: calc(36px + 28 * var(--t)); line-height: 1.15; letter-spacing: -0.02em; color: var(--ink); }
.art-list { list-style: none; margin: 8px 0; padding: 0; }
.art-list li { display: grid; grid-template-columns: auto 1fr; gap: 16px 24px; padding: 18px 0; border-top: 1px solid rgba(10, 10, 10, .14); }
.art-list li:last-child { border-bottom: 1px solid rgba(10, 10, 10, .14); }
.art-list li .lbl { padding-top: 6px; }
.art-list strong { display: block; font-weight: 400; font-size: calc(20px + 4 * var(--t)); line-height: 1.25; color: var(--ink); margin-bottom: 4px; }
.art-list li > span:last-child { font-size: calc(15px + 2 * var(--t)); line-height: 1.5; color: var(--muted-l); }
.art-strong { font-style: italic; font-size: calc(24px + 8 * var(--t)); line-height: 1.3; color: var(--ink); }
.art-close { padding: calc(88px + 72 * var(--t)) 0; }
.art-close .lbl { margin-bottom: 20px; }
.art-close-h { margin: 0; --fm: 52; --fd: 112; --lhm: 1.08; --lhd: 1.2; --lwm: 6; --lw: 10.6; }
.art-close-h em { font-weight: 300; }
.art-by { background: var(--paper); padding: calc(64px + 56 * var(--t)) 0 calc(72px + 48 * var(--t)); }
.art-authors { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 32px; }
@media (min-width: 900px) { .art-authors { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 80px; } }
.art-author { display: flex; gap: 20px; align-items: flex-start; }
.art-author img { width: calc(80px + 40 * var(--t)); height: calc(80px + 40 * var(--t)); border-radius: 50%; object-fit: cover; object-position: 50% 25%; flex: none; filter: grayscale(1); }
.art-author > span { display: grid; gap: 6px; }
.art-an { font-size: calc(24px + 8 * var(--t)); line-height: 1.1; }
.art-ab { font-size: 16px; line-height: 1.5; color: var(--muted-l); }
.art-next { margin-top: calc(56px + 32 * var(--t)); padding-top: 28px; border-top: 1px solid rgba(10, 10, 10, .14); display: grid; gap: 24px; }
@media (min-width: 900px) { .art-next { grid-template-columns: 1fr auto; align-items: center; } }
.art-share-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.art-share-row > span { font-style: italic; font-size: 22px; }
.art-share-row .lbl { color: var(--muted-l); }
.art-share-row a.lbl:hover, .art-share-row .linkbtn:hover { color: var(--ink); }
.art-nextlink { display: grid; gap: 6px; text-decoration: none; color: var(--ink); }
.art-nt { font-size: calc(22px + 6 * var(--t)); line-height: 1.2; }
.art-nt em { font-weight: 300; }
.art-nextlink:hover .art-nt { font-style: italic; }

.ahub-h { --fm: 52; --fd: 120; --lhm: 1.08; --lhd: 1.2; --trm: -0.02em; --trd: -0.035em; --lwm: 6; --lw: 10.6; }
.ahub-h em { font-weight: 300; }
.art-share-row .linkbtn.lbl { font-family: var(--sans); font-style: normal; font-size: calc(10px + 2 * var(--t)); letter-spacing: .09em; text-transform: uppercase; text-decoration: none; }

/* Desktop line control (+8px over the fit size): who / proof in two balanced lines, How we do it in three */
@media (min-width: 1024px) {
  .who-h { font-size: calc(min(120px, (var(--content) - 12px) / 20.2) + 8px); }
  .who-h .tl, .who-h em.tl { display: inline; }
  .proof-h { font-size: min(128px, calc((var(--content) - 12px) / 11.3)); letter-spacing: -0.045em; white-space: nowrap; }
  .proof-h .tl { display: block; }
  .howdo-h { font-size: calc(min(120px, (var(--content) - 12px) / 20.6) + 8px); }
  .howdo-h em { display: inline; }
}

/* 04 Who we are: partner photos run full width, edge to edge, on a black band */
.founders { width: 100vw; margin-left: calc(50% - 50vw); gap: 0; background: var(--ink); }
.founder { gap: 0; }
.founder-img { width: 100%; height: auto; aspect-ratio: 4 / 5; margin: 0; background: var(--ink-3); }
.founder-img picture { position: absolute; inset: 0; width: 100%; height: 100%; left: 0; top: 0; }
.founder-img img { object-position: 50% 28%; }
.founder > .lbl, .founder-n { padding-inline: var(--pad); }
.founder > .lbl { padding-top: 24px; color: var(--red-on-dark) !important; }
.founder-n { color: var(--ivory); padding-bottom: calc(32px + 16 * var(--t)); margin-top: 6px; }
@media (min-width: 768px) {
  .founders { grid-template-columns: 1fr 1fr; gap: 0; }
  .founder-img, .founder:nth-child(2) .founder-img { width: 100%; aspect-ratio: 720 / 620; margin: 0; }
  .founder-img picture, .founder:nth-child(2) .founder-img picture { width: 100%; height: 100%; left: 0; top: 0; }
  .founder:nth-child(2) > .lbl, .founder:nth-child(2) .founder-n { padding-left: calc(24px + 8 * var(--t)); }
  .founder:first-child > .lbl, .founder:first-child .founder-n { padding-left: var(--pad); }
}

/* 05b Letter: minimal — the title and one dropdown row */
.letter { padding-block: calc(72px + 48 * var(--t)); }
.letter-h { margin-top: 0; padding-bottom: calc(20px + 28 * var(--t)); font-size: min(calc(96px + 80 * var(--t)), calc((100vw - 2 * var(--pad)) / 3.6)); }
.letter-h em { font-style: italic; font-weight: 300; margin-left: .22em; }
.letter-row { margin-top: 0; border-top: 1px solid rgba(10, 10, 10, .9); border-bottom: 1px solid rgba(10, 10, 10, .9); }
.letter-toggle { padding-block: calc(18px + 6 * var(--t)); color: var(--ink); }
.lt-t { font-style: italic; font-size: calc(20px + 10 * var(--t)); display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 20px; }
.lt-m { font-style: normal; color: var(--muted-l); }
.lt-b { width: calc(44px + 12 * var(--t)); height: calc(44px + 12 * var(--t)); background: var(--red); color: #E8DECE; transition: transform .6s cubic-bezier(.22, 1, .36, 1), background-color .3s ease; }
.letter-toggle:hover .lt-b { background: #B0233C; }
.lt-b svg { width: 18px; height: 18px; }
.letter-panel { border-bottom: 0; }

/* Intro statement: a step below the section titles */
.intro-h { --fm: 44; --fd: 96; }
@media (min-width: 600px) { .intro-h { --lw: 12.4; } }

/* Article cards: plain black image, no gradient */
.acard-img { background: var(--ink); }
.acard-img::before { display: none; }

/* ---------- Black surfaces: the HOP rug (credentials cover texture) instead of flat black ---------- */
:root { --rug-c: #201F1D; --rug-i: url("/assets/tex/rug.webp"); }
html { background: var(--rug-c) var(--rug-i) 0 0 / 800px 800px repeat; }
.ink, .nav.is-scrolled, .menu, .founders, .acard-img,
.svc.is-open, .svc:has(.svc-btn:focus-visible) { background-color: var(--rug-c); background-image: var(--rug-i); background-size: 800px 800px; background-repeat: repeat; }
@media (hover: hover) {
  .svc:hover, .acard-a:hover { background-color: var(--rug-c); background-image: var(--rug-i); background-size: 800px 800px; }
}
/* the intro keeps a lighter step on the same rug */
.manifesto { background-image: linear-gradient(rgba(232, 222, 206, .045), rgba(232, 222, 206, .045)), var(--rug-i); background-size: auto, 800px 800px; }

/* Nav, menu and footer: solid dark, no texture */
:root { --chrome: #201F1D; }
.nav.is-scrolled, .menu, #site-foot, #site-foot.ink { background: var(--chrome) !important; }

/* ---------- Rug v3: the supplied pile photo on section backgrounds only; cards and chrome solid ---------- */
:root { --rug-c: #151515; --rug-i: url("/assets/tex/rug.webp"); --rug-s: 1024px 1024px; }
html { background: var(--rug-c) var(--rug-i) 0 0 / var(--rug-s) repeat; }
.ink, .manifesto { background-color: var(--rug-c); background-image: var(--rug-i); background-size: var(--rug-s); background-repeat: repeat; }
.founders, .acard-img, .svc.is-open, .svc:has(.svc-btn:focus-visible) { background: var(--chrome); background-image: none; }
@media (hover: hover) { .svc:hover, .acard-a:hover { background: var(--chrome); background-image: none; } }

/* Intro: a still image instead of the film */
.mv-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- 07 How we work: the leap (credentials slide) ---------- */
.jump { background: var(--paper); color: #0A0A0A; padding-block: calc(72px + 88 * var(--t)) calc(80px + 80 * var(--t)); overflow: hidden; }
.jump-svg { display: none; }
.jump-cols { list-style: none; margin: 0; padding: 0 0 0 28px; position: relative; display: grid; gap: 48px; }
.jump-cols::before { content: ""; position: absolute; left: 5px; top: 18px; bottom: 6px; width: 1px; background: #0A0A0A; }
.jump-col { position: relative; }
.jump-col::before { content: ""; position: absolute; left: -28px; top: 16px; width: 11px; height: 11px; border-radius: 50%; background: var(--paper); border: 1px solid #0A0A0A; box-sizing: border-box; }
.jump-col--3::before { background: var(--red); border-color: var(--red); width: 13px; height: 13px; left: -29px; }
.jump-h { margin: 0; font-family: var(--serif); font-weight: 400; font-size: calc(52px + 20 * var(--t)); line-height: 1; letter-spacing: -0.02em; }
.jump-sub { margin: 10px 0 0; font-family: var(--serif); font-size: 20px; line-height: 1.3; color: var(--muted-l); }
.jump-list { list-style: none; margin: 20px 0 0; padding: 0; font-family: var(--sans); font-size: 16px; line-height: 1.3; }
.jump-list li { padding: 12px 0; border-top: 1px solid rgba(10, 10, 10, .14); }
.jump-list li:first-child { border-top-color: rgba(10, 10, 10, .2); }

@media (min-width: 1024px) {
  .jump-wrap { position: relative; --u: calc(var(--content) / 1940); }
  .jump-svg { display: block; position: absolute; left: 0; top: 0; width: 100%; height: auto; overflow: visible; }
  .jump-path, .jump-land { fill: none; stroke: #0A0A0A; stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
  .jump-dot { fill: var(--red); }
  .jump-cols { padding: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: calc(var(--u) * 47); align-items: start; }
  .jump-cols::before, .jump-col::before { display: none; }
  .jump-col--1 { margin-top: calc(var(--u) * 448); }
  .jump-col--2 { margin-top: calc(var(--u) * 322); }
  .jump-col--3 { margin-top: calc(var(--u) * 194); }
  .jump-h { font-size: calc(var(--u) * 122); }
  .jump-sub { margin-top: calc(var(--u) * 10); font-size: max(18px, calc(var(--u) * 38)); }
  .jump-list { margin-top: calc(var(--u) * 26); font-size: max(16px, calc(var(--u) * 27)); }
  .jump-list li { padding-block: calc(var(--u) * 15); }
  .jump-list li:first-child { border-top-color: rgba(10, 10, 10, .14); }
}

/* scroll-driven leap: the ball travels the line as you scroll */
.jump-rail { display: none; }
html.js.jump-live .jump-rail { display: block; position: absolute; left: 0; top: 0; bottom: 0; width: 11px; pointer-events: none; }
.jump-rail b { position: absolute; left: -2px; top: 13px; width: 15px; height: 15px; border-radius: 50%; background: var(--red); transform: translateY(calc(var(--rp, 0) * 1px)); }
html.js.jump-live .jump-col--3::before { background: var(--paper); border-color: #0A0A0A; width: 11px; height: 11px; left: -28px; }
@media (min-width: 1024px) {
  .jump-rail, html.js.jump-live .jump-rail { display: none; }
}
@media (min-width: 1024px) and (min-height: 820px) {
  html.js.jump-pinned .jump { height: 200vh; padding-block: 0; overflow: visible; }
  html.js.jump-pinned .jump-pin { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; padding-top: var(--nav-h); box-sizing: border-box; overflow: hidden; }
  html.js.jump-pinned .jump-pin > .wrap { width: 100%; }
}
.jump-wrap { position: relative; }

/* ---------- Letter dropdown inside the intro (dark), per Figma V4 01b ---------- */
.mletter { margin-top: calc(32px + 32 * var(--t)); color: var(--ivory); }
.mletter .letter-row { margin-top: 0; border-top: 1px solid rgba(232, 222, 206, .28); border-bottom: 1px solid rgba(232, 222, 206, .28); }
.mletter .letter-toggle, .mletter .lt-t, .mletter .letter-toggle:hover .lt-t { color: var(--ivory); }
.mletter .lt-m { color: var(--dim-d-text); }
.mletter .letter-body, .mletter .letter-stand { color: var(--muted-d); }
.mletter .byline dd, .mletter .letter-body .lede, .mletter .letter-body h3, .mletter .letter-body .pull, .mletter .letter-body ol strong,
.mletter .letter-body .strong-line, .mletter .letter-body .closer, .mletter .letter-body .sign, .mletter .letter-foot, .mletter .letter-close { color: var(--ivory) !important; }
.mletter .byline dt { color: var(--dim-d-text); }
.mletter .letter-body .pull, .mletter .letter-foot { border-color: rgba(232, 222, 206, .15); }
.mletter .letter-body ol li::before { color: var(--red-on-dark); }
.mletter :focus-visible { outline-color: var(--ivory); }

/* ---------- 04 Who we are (Figma V4): one photo, a dot on each partner, bio modal ---------- */
.who { padding-block: calc(88px + 52 * var(--t)); }
.who + .howdo { padding-top: 0; }
.who-h .red { font-weight: 400; }
@media (min-width: 1024px) {
  .who-h { font-size: min(96px, calc((var(--content) - 12px) / 12.4)); line-height: 1.2; letter-spacing: -0.025em; }
  .who-h .tl, .who-h em.tl { display: block; }
}
.duo { position: relative; margin: calc(48px + 48 * var(--t)) 0 0; aspect-ratio: 1374 / 733; background: var(--ink-3); }
.duo picture, .duo img { display: block; width: 100%; height: 100%; }
.duo img { object-fit: cover; }
.pdot { position: absolute; left: var(--x); top: var(--y); width: 56px; height: 56px; margin: -28px 0 0 -28px; padding: 0; border: 0; background: none; border-radius: 50%; cursor: pointer; z-index: 2; -webkit-tap-highlight-color: transparent; }
.pdot--david { --x: 32%; --y: 45.4%; }
.pdot--philip { --x: 64.4%; --y: 47.9%; }
.pdot::before { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 1.5px solid rgba(232, 222, 206, .45); transition: inset .45s var(--expo), border-color .3s ease; }
.pdot-c { position: absolute; inset: 0; border-radius: 50%; background: var(--red); display: grid; place-items: center; transition: transform .45s var(--expo), box-shadow .3s ease; }
.pdot-c svg { width: 16px; height: 16px; fill: none; stroke: var(--ivory); stroke-width: 1.6; transition: transform .45s var(--expo); }
.pdot-chip { position: absolute; left: calc(100% + 22px); top: 50%; display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: var(--chrome); color: var(--ivory); white-space: nowrap; pointer-events: none; opacity: 0; transform: translate(-8px, -50%); transition: opacity .3s ease, transform .45s var(--expo); }
.pdot-n { font-family: var(--serif); font-size: 17px; line-height: 1.2; }
.pdot-cue { font-family: var(--sans); font-weight: 500; font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--red-on-dark); }
@media (hover: hover) {
  .pdot:hover::before { inset: -14px; border-color: rgba(232, 222, 206, .8); }
  .pdot:hover .pdot-c { transform: scale(1.14); box-shadow: 0 8px 24px rgba(0, 0, 0, .3); }
  .pdot:hover .pdot-c svg { transform: scale(1.2); }
  .pdot:hover .pdot-chip { opacity: 1; transform: translate(0, -50%); }
}
.pdot:focus-visible { outline: none; }
.pdot:focus-visible::before { inset: -14px; border-color: var(--ivory); border-width: 2px; }
.pdot:focus-visible .pdot-chip { opacity: 1; transform: translate(0, -50%); }
@media (prefers-reduced-motion: no-preference) {
  .pdot::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 1.5px solid rgba(232, 222, 206, .5); animation: pdot-pulse 2.4s ease-out infinite; pointer-events: none; }
  .pdot--philip::after { animation-delay: 1.2s; }
  .pdot:hover::after, .pdot:focus-visible::after { animation: none; opacity: 0; }
}
@keyframes pdot-pulse { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.45); opacity: 0; } }
@media (max-width: 599px) {
  .pdot { width: 44px; height: 44px; margin: -22px 0 0 -22px; }
  .pdot::before, .pdot::after { inset: -7px; }
  .pdot-c svg { width: 14px; height: 14px; }
  .pdot-chip { display: none; }
}
.who-statement { margin-top: calc(48px + 48 * var(--t)); max-width: 1200px; font-size: calc(28px + 16 * var(--t)); line-height: 1.25; letter-spacing: -0.02em; color: var(--ink); text-wrap: balance; }
.who-statement em { font-style: italic; }

/* Partner modal: centred dialog on desktop, bottom sheet on phones */
.pmodal { border: 0; padding: 0; margin: auto; background: var(--paper); color: #0A0A0A; width: min(680px, calc(100vw - 32px)); max-width: none; max-height: calc(100svh - 32px); overflow: auto; box-shadow: 0 24px 64px rgba(0, 0, 0, .28); }
.pmodal::backdrop { background: rgba(19, 19, 22, .72); }
.pm-in { padding: 48px 56px; }
.pm-handle { display: none; }
.pm-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.pm-role { font-family: var(--sans); font-weight: 500; font-size: 12px; letter-spacing: .09em; text-transform: uppercase; color: var(--red); }
.pm-x { width: 44px; height: 44px; flex: none; border-radius: 50%; border: 1px solid rgba(10, 10, 10, .2); display: grid; place-items: center; cursor: pointer; transition: border-color .2s ease, background-color .2s ease; }
.pm-x:hover { border-color: #0A0A0A; }
.pm-x svg { width: 16px; height: 16px; fill: none; stroke: #0A0A0A; stroke-width: 1.4; }
.pm-name { margin-top: 32px; font-weight: 400; font-size: calc(40px + 16 * var(--t)); line-height: 1.05; letter-spacing: -0.02em; }
.pm-name .tdot { color: var(--red); }
.pm-bio { margin-top: 24px; font-size: calc(18px + 3 * var(--t)); line-height: 1.5; color: rgba(10, 10, 10, .75); }
.pm-contact { list-style: none; margin: 32px 0 0; padding: 0 0 32px; display: flex; flex-wrap: wrap; gap: 10px 24px; font-family: var(--sans); font-size: 15px; border-bottom: 1px solid rgba(10, 10, 10, .14); }
.pm-contact a { color: #0A0A0A; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.pm-contact a:hover { color: var(--red); }
.pm-act { margin-top: 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; }
.pm-next { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-family: var(--sans); font-size: 15px; color: #0A0A0A; cursor: pointer; }
.pm-next svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; transition: transform .25s var(--expo); }
.pm-next:hover svg { transform: translateX(4px); }
.pmodal :focus-visible { outline: 2px solid #0A0A0A; outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) {
  .pmodal[open] { animation: pm-in .45s var(--expo); }
  .pmodal[open]::backdrop { animation: pm-fade .3s ease; }
}
@keyframes pm-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes pm-fade { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 599px) {
  .pmodal { margin: auto 0 0; width: 100%; max-height: 92svh; box-shadow: 0 -12px 40px rgba(0, 0, 0, .25); }
  .pm-in { padding: 16px 24px calc(32px + env(safe-area-inset-bottom)); }
  .pm-handle { display: block; width: 36px; height: 4px; border-radius: 2px; background: rgba(10, 10, 10, .2); margin: 0 auto 16px; }
  .pm-name { margin-top: 24px; }
  .pm-bio { margin-top: 16px; }
  .pm-contact { flex-direction: column; margin-top: 24px; padding-bottom: 24px; }
  .pm-act { flex-direction: column-reverse; align-items: stretch; margin-top: 20px; }
  .pm-act .btn { justify-content: space-between; }
  .pm-next { justify-content: flex-start; }
  @media (prefers-reduced-motion: no-preference) { .pmodal[open] { animation: pm-up .45s var(--expo); } }
}
@keyframes pm-up { from { transform: translateY(100%); } to { transform: none; } }
html.pm-open { overflow: hidden; }
@media (max-width: 599px) {
  .pdot-c { inset: 9px; }
  .pdot-c svg { width: 11px; height: 11px; }
  .pdot::before, .pdot::after { inset: 3px; border-width: 1px; }
}

/* Intro statement: exactly two lines from tablet up (one sentence per line); image 1200x620 at 1440 */
@media (min-width: 600px) {
  .intro-h { font-size: calc((var(--content) - 8px) / 15.5); line-height: 1.15; }
  .intro-l { white-space: nowrap; }
}
@media (min-width: 1024px) {
  .mv-frame { aspect-ratio: 1200 / 620; }
}
/* Who we are on phones: one sentence per line block, and a taller, tighter crop of the photo (dots re-mapped to the crop) */
.who-h .tl { display: block; }
@media (max-width: 599px) {
  .duo { aspect-ratio: 4 / 3; }
  .pdot--david { --x: 24.7%; }
  .pdot--philip { --x: 70.2%; }
}

/* ---------- 07 How we work (Figma V4): title, clickable service lines, service modal ---------- */
.jump-inner { width: 100%; }
.jump-title { font-size: calc(40px + 56 * var(--t)); line-height: 1.2; letter-spacing: -0.025em; font-weight: 400; margin-bottom: calc(48px + 32 * var(--t)); color: var(--ink); text-wrap: balance; }
.jump-title em { font-style: italic; font-weight: 400; }
@media (min-width: 1024px) { .jump-title { font-size: min(96px, calc((var(--content) - 12px) / 12.4)); } }
.jump-list li { padding: 0; }
.jump-item { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; min-height: 44px; text-align: left; font: inherit; color: inherit; cursor: pointer; background: none; border: 0; }
.jump-item-t { transition: color .25s ease; }
.jump-plus { width: 26px; height: 26px; flex: none; border-radius: 50%; border: 1px solid rgba(10, 10, 10, .25); display: grid; place-items: center; transition: background-color .25s ease, border-color .25s ease, transform .4s var(--expo); }
.jump-plus svg { width: 14px; height: 14px; fill: none; stroke: #0A0A0A; stroke-width: 1.4; transition: stroke .25s ease; }
.jump-list li { transition: border-color .25s ease; }
@media (hover: hover) {
  .jump-list li:hover { border-top-color: rgba(10, 10, 10, .5); }
  .jump-item:hover .jump-item-t { color: var(--red); }
  .jump-item:hover .jump-plus { background: var(--red); border-color: var(--red); transform: rotate(90deg); }
  .jump-item:hover .jump-plus svg { stroke: var(--ivory); }
}
.jump-item:focus-visible { outline: 2px solid #0A0A0A; outline-offset: 2px; }
.jump-item:focus-visible .jump-item-t { color: var(--red); }
@media (min-width: 1024px) { .jump-item { padding-block: max(8px, calc(var(--u) * 13)); min-height: 0; } }
.sm-step { color: var(--muted-l); }
.sm-svc { margin-top: 40px; font-family: var(--sans); font-weight: 500; font-size: 12px; letter-spacing: .09em; text-transform: uppercase; color: var(--red); }
.smodal .sm-title { margin-top: 14px; font-size: calc(36px + 16 * var(--t)); line-height: 1.08; }
.smodal .sm-body { margin-top: 24px; }
.sm-act { margin-top: 40px; padding-top: 24px; border-top: 1px solid rgba(10, 10, 10, .14); }
@media (max-width: 599px) {
  .sm-svc { margin-top: 28px; }
  .smodal .sm-body { margin-top: 16px; }
  .sm-act { margin-top: 28px; padding-top: 20px; }
}

/* How we work spacing: 180px above and below at 1440 (88px on phones); on tall desktop screens the content pins just under the nav for one screen of scrolling */
.jump { padding-block: calc(88px + 92 * var(--t)); overflow: visible; }
.jump-pin { --jump-top: 128px; }
html.js.jump-pinned .jump { height: auto; padding-block: calc(88px + 92 * var(--t)); overflow: visible; }
html.js.jump-pinned .jump-track { padding-bottom: 100vh; }
html.js.jump-pinned .jump-pin { position: sticky; top: var(--jump-top); height: auto; display: block; padding-top: 0; overflow: visible; }
.sm-spacer { flex: 1; }
.smodal .sm-svc { margin-top: 8px; }

/* ---------- Nav refinements ---------- */
.nav-links .nav-art::before { content: none; display: none; }
.nav-links .nav-art { margin-left: 0; }
/* Newsreader ships 300–400 here, so a hairline stroke gives a medium weight without going bold */
.nav-links .nav-art, .btn .btn-t { -webkit-text-stroke: .35px currentColor; paint-order: stroke fill; }
/* Language flags */
.flag { display: inline-block; width: 16px; height: 11px; margin-right: 6px; vertical-align: -1px; border-radius: 1px; box-shadow: 0 0 0 .5px rgba(232, 222, 206, .35); flex: none; }
.lang button { display: inline-flex; align-items: center; }
.nav .lang button[aria-pressed="true"][data-lang="pl"] { display: inline-flex; }
@media (min-width: 1024px) { .nav .lang button { display: inline-flex !important; } }
/* Intro image */
.mv-frame picture { position: absolute; inset: 0; }
.mv-frame .mv-img { width: 100%; height: 100%; object-fit: cover; }
.sm-act { justify-content: flex-end; } @media (max-width: 599px) { .sm-act { align-items: flex-start; } }
html.js.jump-pinned .jump-track { padding-bottom: 0; }
html.js.jump-pinned .jump-track::after { content: ""; display: block; height: 100vh; }
.pmodal:not(.smodal) .pm-name { margin-top: 8px; }
/* Article cards: Kraków photo as the thumbnail */
.acard-img picture { position: absolute; inset: 0; }
.acard-pic { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s var(--e, cubic-bezier(.22, 1, .36, 1)); }
@media (hover: hover) { .acard-a:hover .acard-pic { transform: scale(1.05); } }
.acard-no { z-index: 1; }
.who-statement em { font-weight: 400; -webkit-text-stroke: .6px currentColor; paint-order: stroke fill; }
.acard-img::after { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(to top, rgba(19, 19, 22, .62), transparent); z-index: 0; pointer-events: none; }
/* Nav pill: House of Poland, more room inside */
.nav-links .nav-art { padding: 10px 22px; }

/* ---------- Body copy in Instrument Sans (headlines and display lines stay Newsreader) ---------- */
.who-intro, .pm-bio, .letter-body p:not(.lede):not(.strong-line):not(.closer):not(.letter-stand):not(.pull):not(.sign), .letter-body ol li,
.art-col p, .art-col li, .acard-ex, .lead, .cd-intro, .cb-text, .cd-desc {
  font-family: var(--sans); font-weight: 400; letter-spacing: 0;
}
.who-intro { font-size: calc(16px + 4 * var(--t)); line-height: 1.6; }
.letter-body p:not(.lede):not(.strong-line):not(.closer):not(.letter-stand):not(.pull):not(.sign), .letter-body ol li { font-size: calc(16px + 1 * var(--t)); line-height: 1.7; }
.art-col p, .art-col li { font-size: calc(16px + 2 * var(--t)); line-height: 1.7; }
.acard-ex { font-size: 16px; line-height: 1.6; }
/* Modals: a touch heavier overall, body in Instrument Sans */
.pm-bio { font-size: calc(16px + 2 * var(--t)); line-height: 1.65; color: #201F1D; }
.pm-name { -webkit-text-stroke: .3px currentColor; paint-order: stroke fill; }
.sm-svc, .pm-role { font-weight: 500; letter-spacing: .1em; }
.pm-next, .pm-contact { font-weight: 500; }

/* Copy from the brief: intro support lines, Who intro paragraphs, photo caption */
.intro-copy { max-width: 720px; margin-top: calc(24px + 8 * var(--t)); display: grid; gap: 12px; font-family: var(--sans); font-size: calc(16px + 4 * var(--t)); line-height: 1.6; color: var(--muted-d); }
.who-intro { display: grid; gap: 14px; }
.who-intro p { margin: 0; }
.duo-cap { position: absolute; left: 0; top: calc(100% + 16px); font-family: var(--serif); font-style: italic; font-size: calc(17px + 3 * var(--t)); color: var(--muted-l); }
.duo { margin-bottom: calc(40px + 8 * var(--t)); }
/* CTAs in the body font */
.btn, .btn .btn-t { font-family: var(--sans); font-style: normal; font-weight: 500; -webkit-text-stroke: 0; letter-spacing: .01em; }
.lang, .lang button { font-family: var(--sans); font-weight: 500; letter-spacing: .04em; -webkit-text-stroke: 0; }
.cbtn { font-family: var(--sans); font-style: normal; font-weight: 500; }
.hero-pos, .alink { font-family: var(--sans); font-style: normal; font-weight: 500; letter-spacing: .005em; }
.who-intro { color: var(--ink); }
.hero-h { --lw: 9.05; }
.hero-h { --lwm: 5.9; }
.hero-h { --lwm: 6.5; }
/* Who we are title: lines reveal with scroll */
html.who-reveal .who-h .tl { opacity: calc(.14 + .86 * var(--wr, 0)); transform: translateY(calc((1 - var(--wr, 0)) * 18px)); transition: opacity .25s linear, transform .35s var(--expo); }

/* ---------- Motion pass: quiet, elegant micro-animations ---------- */
.intro-l, .rl-w { display: block; overflow: hidden; padding-bottom: .14em; margin-bottom: -.14em; }
.rl { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  /* headline masks, like the hero */
  html.can-rise [data-rise] .rl { transform: translateY(110%); transition: transform 1.1s var(--expo); }
  html.can-rise [data-rise] .intro-l:nth-of-type(2) .rl { transition-delay: .12s; }
  html.can-rise [data-rise].is-in .rl { transform: none; }
  /* body copy follows its headline */
  .intro-copy[data-reveal] { --rd: .25s; }
  .who-intro[data-reveal] { --rd: .1s; }
  /* images open from a soft crop and settle */
  html.js .mv[data-reveal] { opacity: 1; transform: none; }
  html.js .mv[data-reveal] .mv-frame { clip-path: inset(6% 4% 6% 4%); transition: clip-path 1.4s var(--expo); }
  html.js .mv[data-reveal] .mv-img { transform: scale(1.08); transition: transform 1.8s var(--expo); }
  html.js .mv[data-reveal].in .mv-frame { clip-path: inset(0); }
  html.js .mv[data-reveal].in .mv-img { transform: none; }
  html.js .duo[data-reveal] { opacity: 1; transform: none; }
  html.js .duo[data-reveal] picture { clip-path: inset(6% 4% 6% 4%); transition: clip-path 1.4s var(--expo); overflow: hidden; }
  html.js .duo[data-reveal] img { transform: scale(1.08); transition: transform 1.8s var(--expo); }
  html.js .duo[data-reveal].in picture { clip-path: inset(0); }
  html.js .duo[data-reveal].in img { transform: none; }
  html.js .duo[data-reveal] .pdot { opacity: 0; transform: scale(.4); transition: opacity .5s ease, transform .7s var(--spring); }
  html.js .duo[data-reveal].in .pdot { opacity: 1; transform: none; transition-delay: .9s; }
  html.js .duo[data-reveal].in .pdot--philip { transition-delay: 1.05s; }
  html.js .duo-cap { opacity: 0; transition: opacity .8s ease 1.1s; }
  html.js .duo.in .duo-cap { opacity: 1; }
}
/* micro-interactions */
.nav-links .nav-art { transition: border-color .35s ease, background-color .35s ease; }
.nav-links .nav-art:hover, .nav-links .nav-art:focus-visible { border-color: rgba(232, 222, 206, .6); background: rgba(232, 222, 206, .06); }
.mletter .lt-b { transition: transform .6s var(--expo), background-color .3s ease; }
@media (hover: hover) { .mletter .letter-toggle:hover .lt-b { transform: scale(1.06); } .mletter .letter-toggle[aria-expanded="true"]:hover .lt-b { transform: rotate(180deg) scale(1.06); } }
.intro-copy { display: block; max-width: 1000px; margin-top: calc(28px + 12 * var(--t)); font-size: calc(17px + 5 * var(--t)); line-height: 1.6; color: var(--ivory); text-wrap: pretty; }

/* ---------- Contact page: body font for everything that isn't a heading ---------- */
.chead-lead { font-family: var(--sans); font-style: normal; font-size: calc(17px + 3 * var(--t)); line-height: 1.6; color: var(--ivory); max-width: 640px; }
.chead .rh { font-family: var(--sans); font-style: normal; font-weight: 500; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--red-on-dark); }
.cbody .pick span, .cbody .seg span { font-family: var(--sans); font-size: 16px; }
.cbody .opt { font-family: var(--sans); font-style: normal; font-size: 13px; letter-spacing: 0; color: var(--muted-l); }
.cbody input, .cbody textarea, .cbody select { font-family: var(--sans); font-size: 16px; }
.cbody .consent, .cbody .consent label, .cbody .check { font-family: var(--sans); font-size: 15px; }
.cbody .crows a { font-family: var(--sans); font-style: normal; font-size: 15px; }
.cbody .csprint-s, .cbody .cside-intro, .cbody .hint { font-family: var(--sans); font-style: normal; font-size: 14px; }
.cbody .flabel, .cbody label { font-family: var(--sans); }
.cbody .caside-h { font-family: var(--sans); font-style: normal; font-size: 15px; color: var(--muted-l); }
/* Who we are: title and intro side by side on desktop */
@media (min-width: 1024px) {
  .who-head { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); column-gap: calc(48px + 32 * var(--t)); align-items: end; }
  .who-head .who-h { font-size: min(84px, calc((var(--content) - 80px) * .59 / 9.2)); line-height: 1.12; }
  .who-head .who-intro { margin-top: 0; padding-bottom: .55em; max-width: none; font-size: calc(15px + 3 * var(--t)); line-height: 1.6; }
}

/* Mobile pass fixes */
.art-pull p { font-family: var(--serif); font-style: italic; font-weight: 300; }
.art-share { font-family: var(--sans); font-style: normal; font-weight: 500; font-size: 15px; }
.art-crumbs a.lbl { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 599px) {
  .duo { margin-bottom: 64px; }
  .duo-cap { top: calc(100% + 14px); font-size: 16px; }
  .who-statement { margin-top: 0; }
}
/* Footer Instagram link */
.foot-social { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-top: 24px; border: 1px solid rgba(232, 222, 206, .28); border-radius: 50%; color: var(--ivory); transition: border-color .3s ease, background-color .3s ease; }
.foot-social svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.foot-social .ig-dot { fill: currentColor; stroke: none; }
.foot-social:hover, .foot-social:focus-visible { border-color: rgba(232, 222, 206, .7); background: rgba(232, 222, 206, .06); }
/* House of Poland pill: a tiny pulsing dot, like the partner dots */
.nav-links .nav-art { gap: 10px; padding-left: 18px; }
.nav-art-dot { position: relative; width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--red); transition: transform .45s var(--expo); }
.nav-art-dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid rgba(230, 0, 1, .7); opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .nav-art-dot::after { animation: art-pulse 2.6s ease-out infinite; }
}
@keyframes art-pulse { 0% { transform: scale(.6); opacity: .9; } 70%, 100% { transform: scale(1.9); opacity: 0; } }
.nav-links .nav-art:hover .nav-art-dot, .nav-links .nav-art:focus-visible .nav-art-dot { transform: scale(1.35); }