/* =====================================================================
   HOP. V5 — client design feedback (4 Nov 2026), round 2 (5 Nov)
   Loaded after v2.css. Nav, footer, the rug and the light backgrounds
   stay exactly as production; everything here is content + motion.
   ===================================================================== */

:root {
  --glass-d: rgba(21, 21, 21, .38);
  --glass-l: rgba(246, 245, 240, .74);
  --hold: 3s;
}

/* ---------- 1 · Surfaces: the production rug, one run for hero + letter ---------- */
.inkrun { position: relative; color: var(--ivory); background-color: var(--rug-c); background-image: var(--rug-i); background-size: var(--rug-s); background-repeat: repeat; }
.inkrun > .s { background: none; }
.inkrun :focus-visible { outline-color: var(--ivory); }

/* ---------- 4 · Hero: six statements — kinetic type, punctuated by the dot ----------
   Choreography per change (≈1.3s):
   0ms      old statement exhales: words lift .16em, letters blur out in reading order
   60ms     the dot crouches, then leaps a long arc with a 3-dot motion trail
   240ms    new statement writes itself: words rise on a soft spring, letters
            resolve from blur left→right, timed so the last letter lands with the dot
   ~1040ms  the dot lands as the full stop: squash, a ripple, the line takes the hit
   Pointer: the type and the dot sit on two depths (subtle parallax).
   Scroll:  the statement pulls out of focus as you leave; the dot stays sharp.
   Click/tap the statement to leap to the next one. */
.hero5 { --px: 0; --py: 0; --sp: 0; min-height: 100svh; display: flex; flex-direction: column; justify-content: space-between; padding: calc(var(--nav-h) + 24px) 0 calc(24px + 20 * var(--t)); overflow: clip; }
.hero5-body { margin-block: auto; padding-block: calc(32px + 24 * var(--t)); }
.hs { position: relative; display: grid; font-family: var(--serif); font-size: calc(46px + 58 * var(--t)); }
@media (min-width: 1441px) { .hs { font-size: min(128px, calc((100vw - 2 * var(--pad)) / 11.6)); } }
.hs-i { grid-area: 1 / 1; margin: 0; max-width: 12.4em; font-size: 1em; font-weight: 400; line-height: 1.02; letter-spacing: -0.018em; color: var(--ivory); text-wrap: balance; font-optical-sizing: auto; }
.hs-i em { font-style: italic; font-weight: 300; letter-spacing: -0.01em; }
.hs-i:not(.is-on) { visibility: hidden; }
.hs-v { display: block; }
.hs .w { display: inline-block; white-space: nowrap; }
.hs-stop { color: var(--red); }
.hs-base { display: inline-block; width: 0; height: 0; vertical-align: baseline; }
html.hs-live .hs-stop { color: transparent; }
html.hs-live .hs-i.is-on { cursor: pointer; }
.hs-fx { position: absolute; inset: 0; pointer-events: none; }
.hs-dot, .hs-ghost, .hs-ring { position: absolute; left: 0; top: 0; width: .155em; height: .155em; border-radius: 50%; opacity: 0; will-change: transform, opacity; }
.hs-dot, .hs-ghost { background: var(--red); }
.hs-ring { border: 1.5px solid var(--red-on-dark); box-sizing: border-box; }
html.hs-live .hs-dot.is-placed { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  /* depth: type and dot on two planes; the type pulls out of focus on scroll */
  html.hs-live .hs-v { transform: translate3d(calc(var(--px) * -6px), calc(var(--py) * -4px + var(--sp) * -48px), 0); opacity: calc(1 - var(--sp) * .7); filter: blur(calc(var(--sp) * 6px)); }
  html.hs-live .hs-fx { transform: translate3d(calc(var(--px) * 12px), calc(var(--py) * 9px + var(--sp) * -84px), 0); }
  /* resting (hidden) state */
  html.hs-live .hs-i .w { transform: translateY(.24em); }
  html.hs-live .hs-i .c { opacity: 0; filter: blur(.16em); }
  /* write in */
  html.hs-live .hs-i.is-in .w { transform: none; transition: transform 1.1s cubic-bezier(.16, 1, .3, 1) var(--wd, 0ms); transition-timing-function: linear(0, .22 5%, .52 11%, .76 18%, .91 26%, 1.004 35%, 1.028 43%, 1.02 54%, 1.004 70%, 1); }
  html.hs-live .hs-i.is-in .c { opacity: 1; filter: blur(0); transition: opacity .5s ease var(--cd, 0ms), filter .62s cubic-bezier(.16, 1, .3, 1) var(--cd, 0ms); }
  /* exhale */
  html.hs-live .hs-i.is-out .w { transform: translateY(-.16em); transition: transform .5s cubic-bezier(.55, 0, .75, .25) var(--wo, 0ms); }
  html.hs-live .hs-i.is-out .c { opacity: 0; filter: blur(.12em); transition: opacity .3s ease var(--co, 0ms), filter .36s ease var(--co, 0ms); }
}
@media (prefers-reduced-motion: reduce) {
  html.hs-live .hs-i { opacity: 0; transition: opacity .6s ease; }
  html.hs-live .hs-i.is-in { opacity: 1; }
}

.hero5-bar { position: relative; display: grid; grid-template-columns: 1fr; gap: 18px; align-items: center; }
.hs-ctl { display: flex; align-items: center; gap: 14px; color: var(--ivory); }
.hs-n { font-family: var(--sans); font-weight: 500; font-size: 12px; letter-spacing: .1em; font-variant-numeric: tabular-nums; }
.hs-n--t { opacity: .5; }
.hs-segs { display: flex; align-items: center; gap: 6px; }
.hs-seg { display: grid; place-items: center; width: 22px; height: 24px; padding: 0; transition: width .55s var(--expo); }
.hs-seg i { position: relative; display: block; width: 100%; height: 2px; border-radius: 2px; overflow: hidden; background: rgba(232, 222, 206, .24); transition: background-color .25s ease; }
.hs-seg i::after { content: ""; position: absolute; inset: 0; background: var(--red); transform: scaleX(0); transform-origin: left center; }
.hs-seg[aria-current="true"] { width: 44px; }
.hs-seg[aria-current="true"] i::after { transform: scaleX(1); }
html.hs-live .hs-seg[aria-current="true"] i::after { transform: scaleX(0); }
.hero5[data-run] .hs-seg[aria-current="true"] i::after { animation: segfill var(--hold) linear .9s forwards; }
.hero5.is-paused .hs-seg i::after { animation-play-state: paused !important; }
@media (hover: hover) { .hs-seg:hover i { background: rgba(232, 222, 206, .55); } }
.hs-seg:focus-visible { outline: 2px solid var(--ivory); outline-offset: 2px; border-radius: 2px; }
@keyframes segfill { to { transform: scaleX(1); } }
.hs-pause { display: grid; place-items: center; width: 32px; height: 32px; margin-left: 4px; border-radius: 50%; border: 1px solid rgba(232, 222, 206, .28); color: var(--ivory); transition: border-color .25s ease, background-color .25s ease; }
.hs-pause svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.hs-pause .i-play { display: none; fill: currentColor; stroke: none; }
.hs-pause[aria-pressed="true"] .i-pause { display: none; }
.hs-pause[aria-pressed="true"] .i-play { display: inline; }
@media (hover: hover) { .hs-pause:hover { border-color: rgba(232, 222, 206, .7); background: rgba(232, 222, 206, .06); } }
.hs-pause:focus-visible { outline: 2px solid var(--ivory); outline-offset: 2px; }
html:not(.hs-live) .hs-ctl { display: none; }
.hero5-tag { order: -1; margin: 0; font-family: var(--sans); font-weight: 500; font-size: 10px; line-height: 1.6; letter-spacing: .2em; text-transform: uppercase; color: rgba(232, 222, 206, .6); text-wrap: balance; }
.cue5 { display: none; }
@media (min-width: 1024px) {
  .hero5-bar { grid-template-columns: 1fr auto 1fr; gap: 24px; min-height: 40px; }
  .hero5-tag { letter-spacing: .34em; }
  .cue5 { display: inline-flex; justify-self: end; align-items: center; gap: 14px; min-height: 44px; font-family: var(--sans); font-weight: 500; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: rgba(232, 222, 206, .65); transition: color .25s ease; }
  .cue5 i { position: relative; width: 1px; height: 30px; overflow: hidden; background: rgba(232, 222, 206, .25); }
  .cue5 i::after { content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 12px; background: var(--ivory); transform: translateY(-14px); }
  .cue5:hover { color: var(--ivory); }
}
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) { .cue5 i::after { animation: cue-run 2.4s var(--expo) 1.6s infinite; } }
@keyframes cue-run { 0% { transform: translateY(-14px); } 60%, 100% { transform: translateY(32px); } }

/* ---------- 5 · The letter: collapsed row; image + manifesto open inside ---------- */
.letter5 { padding: 0 0 calc(72px + 56 * var(--t)); }
.letter5 .mletter { margin-top: 0; }
.letter5 .letter-row { border-color: rgba(232, 222, 206, .16); }
.l5 { display: grid; gap: 28px; padding: 32px 0 8px; }
.l5-fig { margin: 0; overflow: hidden; background: #201F1D; aspect-ratio: 16 / 10; }
.l5-fig picture, .l5-fig img { display: block; width: 100%; height: 100%; }
.l5-fig img { object-fit: cover; }
.l5-by { color: var(--dim-d-text); letter-spacing: .12em; }
.l5-h { margin: 14px 0 0; font-family: var(--serif); font-weight: 400; font-size: calc(30px + 12 * var(--t)); line-height: 1.12; letter-spacing: -0.012em; color: var(--ivory); text-wrap: balance; }
.l5-h em { font-style: italic; font-weight: 300; }
.l5-h .tdot { color: var(--red); }
.l5-p { margin: 22px 0 0; max-width: 34em; font-family: var(--sans); font-size: calc(16px + 1 * var(--t)); line-height: 1.62; color: rgba(232, 222, 206, .86); }
.mletter .l5-foot { margin-top: 32px; padding-top: 0; border-top: 0; justify-content: flex-start; gap: 18px 32px; }
@media (min-width: 1024px) {
  .l5 { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: calc(48px + 32 * var(--t)); align-items: center; padding-top: 56px; }
  .l5-fig { aspect-ratio: 6 / 5; }
}
@media (prefers-reduced-motion: no-preference) {
  html.js .letter-panel:not(.is-closed) .l5-fig img { animation: l5-img 1.2s var(--expo) both; }
  html.js .letter-panel:not(.is-closed) .l5-col > * { animation: l5-rise .9s var(--expo) both; }
  html.js .letter-panel:not(.is-closed) .l5-col > :nth-child(2) { animation-delay: .08s; }
  html.js .letter-panel:not(.is-closed) .l5-col > :nth-child(3) { animation-delay: .16s; }
  html.js .letter-panel:not(.is-closed) .l5-col > :nth-child(4) { animation-delay: .24s; }
}
@keyframes l5-img { from { clip-path: inset(0 0 100% 0); transform: scale(1.08); } to { clip-path: inset(0); transform: none; } }
@keyframes l5-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

/* ---------- 6 · Signposts (credentials corner): rule + dot + label ---------- */
.sign { display: flex; align-items: center; gap: 18px; margin: 0 0 calc(48px + 40 * var(--t)); color: var(--ink); }
.sign-rule { flex: 1; height: 1px; background: currentColor; opacity: .18; transform-origin: right center; }
.sign-l { display: inline-flex; align-items: center; gap: 10px; flex: none; font-family: var(--sans); font-weight: 600; font-size: 10px; line-height: 1; letter-spacing: .28em; text-transform: uppercase; }
.sign-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--red); }
.sign--d { margin-bottom: calc(20px + 12 * var(--t)); color: var(--ivory); }
@media (prefers-reduced-motion: no-preference) {
  html.js .sign:not(.sign--d) .sign-rule { transform: scaleX(0); transition: transform 1.2s var(--expo); }
  html.js .sign:not(.sign--d) .sign-dot { transform: translateY(-10px) scale(.3); opacity: 0; transition: transform .7s var(--expo) .5s, opacity .3s ease .5s; }
  html.js .sign.in .sign-rule { transform: none; }
  html.js .sign.in .sign-dot { transform: none; opacity: 1; }
}

/* ---------- 7 · Who we are ---------- */
.who .sign { margin-bottom: calc(48px + 32 * var(--t)); }
@media (min-width: 1024px) {
  .who-head { grid-template-columns: minmax(0, 2.25fr) minmax(0, 1fr); column-gap: calc(40px + 24 * var(--t)); }
  .who-head .who-h { font-size: min(70px, calc(var(--content) * .0565)); line-height: 1.08; letter-spacing: -0.022em; }
  .who-head .who-intro { padding-bottom: .4em; }
}
/* the photo dims behind an open bio; the other partner steps back */
.duo img { transition: filter .6s var(--expo); }
.duo.is-focus img { filter: brightness(.72); }
.duo .pdot { transition: opacity .4s ease, transform .7s var(--spring); }
.duo .pdot.is-dim { opacity: .38 !important; }
.duo .pdot.is-active .pdot-chip { opacity: 0 !important; }

/* ---------- 8 · How we do it ---------- */
.jump-pre { margin-bottom: 0; }
.jump-post { margin-top: calc(48px + 40 * var(--t)); }
.how-st { margin: 0; max-width: 23.5em; font-family: var(--serif); font-weight: 400; font-size: calc(26px + 14 * var(--t)); line-height: 1.22; letter-spacing: -0.01em; color: var(--ink); text-wrap: pretty; }
.how-st em { font-style: italic; font-weight: 400; }
.lhls { display: grid; gap: 14px; margin: 0 0 40px; }
.lhl { margin: 0; font-family: var(--serif); font-style: italic; font-weight: 300; font-size: calc(24px + 6 * var(--t)); line-height: 1.18; letter-spacing: -0.005em; color: var(--ink); text-wrap: balance; }
.lhl .tdot { color: var(--red); font-style: normal; font-weight: 400; }
@media (min-width: 1024px) {
  .lhls { position: absolute; inset: 0; margin: 0; display: block; pointer-events: none; z-index: 1; }
  .lhl { position: absolute; font-size: max(22px, calc(var(--u) * 54)); }
  .lhl--l { left: 0; top: calc(var(--u) * 252); max-width: calc(var(--u) * 700); transform: translateY(-100%); }
  .lhl--r { right: 0; top: calc(var(--u) * 143 - 48px); max-width: calc(var(--u) * 640); text-align: right; transform: translateY(-100%); }
}
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  html.js.jump-live .lhl { opacity: 0; transform: translateY(calc(-100% + 16px)); transition: opacity .8s ease, transform 1.1s var(--expo); }
  html.js.jump-live .lhl.is-on { opacity: 1; transform: translateY(-100%); }
}
.jump-item.is-active .jump-item-t { color: var(--red); }
.jump-item.is-active .jump-plus { background: var(--red); border-color: var(--red); }
.jump-item.is-active .jump-plus svg { stroke: var(--ivory); }

/* ---------- 9 · Glass overlays ---------- */
/* partner bio: dark glass, anchored beside the dot on desktop */
.pmodal.glass-d {
  background: rgba(21, 21, 21, .8); color: var(--ivory);
  border: 1px solid rgba(232, 222, 206, .2); border-radius: 10px;
  -webkit-backdrop-filter: blur(28px) saturate(1.15); backdrop-filter: blur(28px) saturate(1.15);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .pmodal.glass-d { background: rgba(21, 21, 21, .84); } }
@media (min-width: 1024px) { @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .pmodal.glass-d.is-anchored { background: var(--glass-d); } } }
.pmodal.glass-d::backdrop { background: rgba(19, 19, 22, .38); }
.glass-d .pm-x { border-color: rgba(232, 222, 206, .35); }
.glass-d .pm-x:hover { border-color: var(--ivory); background: rgba(232, 222, 206, .08); }
.glass-d .pm-x svg { stroke: var(--ivory); }
.glass-d .pm-name { color: var(--ivory); }
.glass-d .pm-name .tdot { color: var(--red-on-dark); }
.glass-d .pm-bio { color: rgba(232, 222, 206, .9); }
.glass-d .pm-contact { border-bottom-color: rgba(232, 222, 206, .16); }
.glass-d .pm-contact a { color: var(--ivory); }
.glass-d .pm-contact a:hover { color: var(--red-on-dark); }
.glass-d .pm-next { color: rgba(232, 222, 206, .78); }
.glass-d .pm-next:hover { color: var(--ivory); }
.glass-d .pm-handle { background: rgba(232, 222, 206, .3); }
.glass-d :focus-visible { outline-color: var(--ivory); }
.glass-d .pm-act { justify-content: flex-start; margin-top: 18px; }
@media (min-width: 1024px) {
  html.js .pmodal.glass-d.is-anchored { position: fixed; inset: auto; margin: 0; width: 380px; max-height: calc(100vh - 32px); }
  html.js .pmodal.glass-d.is-anchored::backdrop { background: transparent; }
  .glass-d .pm-in { padding: 30px 32px 26px; }
  .glass-d .pm-name { margin-top: 0; font-size: 34px; }
  .glass-d .pm-bio { margin-top: 16px; font-size: 15px; line-height: 1.62; }
  .glass-d .pm-contact { margin-top: 20px; padding-bottom: 18px; font-size: 13px; gap: 8px 20px; }
  .glass-d .pm-next { font-size: 13px; }
  .glass-d .pm-x { width: 40px; height: 40px; }
  .glass-d .pm-top { position: absolute; top: 24px; right: 24px; }
  .glass-d .pm-name { padding-right: 52px; }
}
/* service detail: light glass over the graph */
.pmodal.glass-l {
  background: rgba(246, 245, 240, .94); color: var(--ink);
  border: 1px solid rgba(246, 245, 240, .85); border-radius: 10px;
  -webkit-backdrop-filter: blur(30px) saturate(1.1); backdrop-filter: blur(30px) saturate(1.1);
  box-shadow: 0 30px 80px rgba(26, 20, 15, .16), inset 0 1px 0 rgba(246, 245, 240, .7);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .pmodal.glass-l { background: var(--glass-l); } }
.pmodal.glass-l::backdrop { background: rgba(23, 22, 21, .2); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.glass-l.smodal .sm-title { font-size: calc(32px + 10 * var(--t)); line-height: 1.1; }
.glass-l .sm-svc { letter-spacing: .14em; }
@media (min-width: 600px) {
  .pmodal.glass-l { width: min(580px, calc(100vw - 48px)); }
  .glass-l .pm-in { padding: 40px 44px 34px; }
  .glass-l .sm-act { margin-top: 28px; padding-top: 18px; justify-content: flex-start; }
}
.glass-l .sm-act { border-top-color: rgba(10, 10, 10, .12); }
@media (prefers-reduced-motion: no-preference) {
  .pmodal.glass-d[open], .pmodal.glass-l[open] { animation: glass-in .5s var(--expo); }
  .pmodal.glass-d.is-anchored[open] { animation: glass-anchor .55s var(--expo); }
}
@keyframes glass-in { from { opacity: 0; transform: translateY(16px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes glass-anchor { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
@media (max-width: 599px) {
  .pmodal.glass-d, .pmodal.glass-l { margin: auto 8px 8px; width: calc(100% - 16px); border-radius: 16px; max-height: calc(100svh - 24px); }
  @media (prefers-reduced-motion: no-preference) { .pmodal.glass-d[open], .pmodal.glass-l[open] { animation: pm-up .5s var(--expo); } }
}

/* ---------- 11 · Contact ---------- */
.chead .sign--d .sign-l { color: var(--ivory); }
.chead-h em { font-style: italic; font-weight: 300; color: var(--ivory); }
.chead-h .tdot { color: var(--red); }
.jump-inner > .lhls { width: var(--content); margin-inline: auto; }

/* ---------- 12 · Client elements in the production nav + footer (styles stay production) ---------- */
@media (min-width: 1024px) {
  .nav-links .nav-sec { -webkit-text-stroke: .35px currentColor; paint-order: stroke fill; }
}
.foot-socials { display: flex; gap: 12px; margin-top: 24px; }
.foot-socials .foot-social { margin-top: 0; }
.foot-social .li-f { fill: currentColor; stroke: none; }

/* ---------- 13 · Intro: “House of Poland.” → hop. → into the nav ----------
   Shown only when the head gate adds html.i5-on (homepage, once per visit, never
   with reduced motion). Failsafe: whatever happens, it clears itself at 6s. */
.i5 { display: none; }
html.i5-on { overflow: hidden; animation: i5-unlock 0s 6s forwards; }
html.i5-on .i5 { display: block; position: fixed; inset: 0; z-index: 1000; pointer-events: auto; animation: i5-failsafe .4s ease 6s forwards; }
@keyframes i5-unlock { to { overflow: visible; } }
@keyframes i5-failsafe { to { opacity: 0; visibility: hidden; pointer-events: none; } }
.i5-bg { position: absolute; inset: 0; background-color: var(--rug-c); background-image: var(--rug-i); background-size: var(--rug-s); }
.i5-stage { position: absolute; left: 50%; top: 50%; transform-origin: 0 0; }
.i5-word { position: absolute; left: 0; top: 0; margin: 0; transform: translate(-50%, -50%); white-space: nowrap;
  font-family: var(--serif); font-weight: 400; font-size: clamp(44px, 9.4vw, 152px); line-height: 1; letter-spacing: -0.02em; color: var(--ivory); opacity: 0; }
.i5-word em { font-style: italic; font-weight: 300; }
.i5-k, .i5-x { display: inline-block; vertical-align: top; }
.i5-x { overflow: hidden; white-space: pre; }
.i5-stop { display: inline-block; vertical-align: top; color: var(--red); }
.i5-logo { position: absolute; left: 0; top: 0; display: block; max-width: none; overflow: visible; fill: #E8DECE; opacity: 0; }
.i5-dot { position: absolute; left: 0; top: 0; border-radius: 50%; background: var(--red); opacity: 0; will-change: transform; }

/* ---------- 14 · Privacy + 404 on the site shell ---------- */
.legal-col { max-width: 760px; }
.legal-col .art-sub { margin-top: 24px; }
.legal-col .table-wrap { overflow-x: auto; margin-block: 8px; -webkit-overflow-scrolling: touch; }
.legal-col .store-table { width: 100%; min-width: 560px; border-collapse: collapse; font-family: var(--sans); font-size: 15px; line-height: 1.45; color: var(--ink); }
.legal-col .store-table th { text-align: left; font-weight: 500; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-l); padding: 0 16px 10px 0; border-bottom: 1px solid rgba(10, 10, 10, .2); }
.legal-col .store-table td { padding: 12px 16px 12px 0; border-bottom: 1px solid rgba(10, 10, 10, .1); vertical-align: top; }
.legal-col code { font-size: 13px; }
.nf { min-height: 100svh; display: flex; align-items: center; }
.nf .wrap { width: var(--content); }
.nf-act { margin-top: calc(32px + 16 * var(--t)); }

/* ---------- 15 · Round 5 (5 Nov): hero without the bottom bar, How we do it per Figma ---------- */
/* hero: 110% leading on desktop; the cover line sits under the statement */
@media (min-width: 1024px) { .hs-i { line-height: 1.1; } }
.hero5-tag { margin: calc(28px + 14 * var(--t)) 0 0; text-align: left; }
/* auto-advance timer (no visible bar) and a pause control that appears on keyboard focus (WCAG 2.2.2) */
.hs-clock { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.hero5[data-run] .hs-clock { animation: segfill var(--hold) linear .9s forwards; }
.hero5.is-paused .hs-clock { animation-play-state: paused !important; }
.hero5-body { position: relative; }
.hs-pause { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.hs-pause:focus-visible { position: static; width: auto; height: 36px; margin: 20px 0 0; padding: 0 16px 0 12px; clip-path: none; display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; font-family: var(--sans); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.hs-pause-t { font-weight: 500; }
/* How we do it: label gets its second line; headlines get their eyebrows */
.sign-c { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 8px; flex: none; }
.sign-s { font-family: var(--sans); font-weight: 500; font-size: 10px; line-height: 1; letter-spacing: .28em; text-transform: uppercase; opacity: .45; }
.lhl-e { display: block; margin-bottom: 10px; font-family: var(--sans); font-style: normal; font-weight: 600; font-size: 10px; line-height: 1.2; letter-spacing: .28em; text-transform: uppercase; color: var(--red); }

/* ---------- 16 · Service card 1:1 with Figma (State — How we do it · glass service detail) ----------
   560 wide · padding 36/44 · 22 gap · paper #F6F5F0 62% + blur 30 · white 80% hairline · r6 ·
   shadow 0 30 70 rgba(26,20,15,.12) · veil paper 40% · rises 16px + fades in, 450ms expo.
   Desktop: sits beside the tapped service, so the red item stays visible. */
.pmodal.glass-l { width: min(560px, calc(100vw - 32px)); background: rgba(246, 245, 240, .92); border: 1px solid rgba(246, 245, 240, .8); border-radius: 6px; box-shadow: 0 30px 70px rgba(26, 20, 15, .12); }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .pmodal.glass-l { background: rgba(246, 245, 240, .9); } }
.pmodal.glass-l::backdrop { background: rgba(19, 19, 22, .55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.glass-l .pm-in { display: flex; flex-direction: column; gap: 22px; padding: 36px 44px; }
.glass-l .pm-handle { display: none; }
.glass-l .pm-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.glass-l .sm-svc { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-family: var(--sans); font-weight: 600; font-size: 11px; line-height: 1.2; letter-spacing: .2em; text-transform: uppercase; color: rgba(10, 10, 10, .75); }
.glass-l .sm-svc::before { content: ""; width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--red); }
.glass-l .pm-x { width: 40px; height: 40px; border: 1px solid rgba(10, 10, 10, .25); }
.glass-l .pm-x svg { width: 14px; height: 14px; stroke: var(--ink); stroke-width: 1.4; }
.glass-l.smodal .sm-title { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 40px; line-height: 1.08; letter-spacing: -0.006em; color: var(--ink); -webkit-text-stroke: 0; }
.glass-l.smodal .sm-title .tdot { color: var(--red); }
.glass-l.smodal .sm-body { margin: 0; font-family: var(--sans); font-size: 16px; line-height: 1.6; color: rgba(10, 10, 10, .85); }
.glass-l .sm-act { margin: 0; padding-top: 16px; border-top: 1px solid rgba(10, 10, 10, .12); justify-content: flex-start; }
.glass-l .pm-next { min-height: 0; gap: 10px; font-family: var(--sans); font-weight: 500; font-size: 14px; color: var(--ink); }
.glass-l .pm-next svg { width: 14px; height: 14px; stroke-width: 1.3; }
@media (min-width: 1024px) {
  html.js .pmodal.glass-l.is-anchored { position: fixed; inset: auto; margin: 0; max-height: calc(100vh - 32px); }
}
@media (prefers-reduced-motion: no-preference) {
  .pmodal.glass-l[open], .pmodal.glass-l.is-anchored[open] { animation: glass-rise .45s cubic-bezier(.16, 1, .3, 1); }
}
@keyframes glass-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
/* phones: the same card as a glass sheet (Figma M State): 12px from the edges, r14, grabber */
@media (max-width: 599px) {
  .pmodal.glass-l { margin: auto 12px; width: calc(100% - 24px); max-height: calc(100svh - 32px); border-radius: 14px; border-color: rgba(246, 245, 240, .85); box-shadow: 0 30px 60px rgba(26, 20, 15, .18); }
  .pmodal.glass-l::backdrop { background: rgba(19, 19, 22, .55); }
  .glass-l .pm-in { gap: 16px; padding: 24px 24px 26px; }
  .glass-l .sm-svc { font-size: 10px; letter-spacing: .18em; }
  .glass-l.smodal .sm-title { font-size: 30px; }
  .glass-l.smodal .sm-body { font-size: 14px; line-height: 1.58; }
  .glass-l .pm-next { font-size: 13px; }
  @media (prefers-reduced-motion: no-preference) { .pmodal.glass-l[open] { animation: glass-rise .45s cubic-bezier(.16, 1, .3, 1); } }
}

/* ---------- 17 · Hero cover line follows the statement's last line ---------- */
.hs-i { align-self: center; }
.hero5-tag { transform: translateY(calc(var(--lift, 0px) * -1)); }
@media (prefers-reduced-motion: no-preference) {
  .hero5-tag { transition: transform .9s cubic-bezier(.16, 1, .3, 1); }
  .hero5.tag-still .hero5-tag { transition: none; }
}

/* ---------- 18 · How we do it: 4px more between Run-up · Leap · Land ---------- */
@media (min-width: 1024px) { .jump-cols { column-gap: calc(var(--u) * 47 + 4px); } }

/* ---------- 19 · Nav: the three links identical — Instrument Sans caps, no pill, no stroke, no dot ---------- */
@media (min-width: 1024px) {
  .nav-links { gap: 34px; align-items: center; }
  .nav-links .nav-sec, .nav-links .nav-art {
    display: inline-block; margin: 0; padding: 10px 0; border: 0; border-radius: 0; background: none;
    font-family: var(--sans); font-style: normal; font-weight: 500; font-size: 12px; line-height: 1.5; letter-spacing: .14em; text-transform: uppercase;
    -webkit-text-stroke: 0; color: rgba(232, 222, 206, .78); transition: color .2s ease;
  }
  .nav-links .nav-art:hover, .nav-links .nav-art:focus-visible, .nav-links .nav-art[aria-current], .nav-links .nav-art[aria-current="page"],
  .nav-links .nav-sec:hover, .nav-links .nav-sec:focus-visible, .nav-links .nav-sec[aria-current] { background: none; border: 0; color: var(--ivory); }
  .nav-art-dot { display: none; }
  /* same "you are here" marker for all three */
  .nav-links .nav-art::after { display: block !important; }
  .nav-links .nav-sec::after, .nav-links .nav-art::after { top: auto; bottom: 0; }
  .nav-links a[aria-current="page"]::after { transform: scale(1); }
}

/* =====================================================================
   20 · V6 mobile UX pass (5 Nov) — approved in Figma. Phones/tablets only;
   desktop is untouched. The rug stays as production.
   ===================================================================== */
/* desktop: mobile-only pieces stay out of the way */
.hs-pg, .lt-e, .duo-hint, .mmap, .pm-av, .sm-prog, .pm-prev, .pm-s { display: none; }

@media (max-width: 1023px) {
  /* header: logo left · language + menu right (thumb reach) */
  .nav-row { grid-template-columns: auto 1fr auto auto; column-gap: 4px; }
  .nav-logo { grid-column: 1; grid-row: 1; justify-self: start; padding-left: 0; }
  .nav-right { grid-column: 3; grid-row: 1; }
  .nav-right .lang { min-height: 44px; display: inline-flex; align-items: center; padding-inline: 8px; }
  .nav-menu { grid-column: 4; grid-row: 1; width: 44px; height: 44px; place-items: center; justify-self: end; border: 1px solid rgba(232, 222, 206, .28); border-radius: 50%; }
  .nav-menu::after { display: none; }
  .nav-menu-icon { gap: 5px; }
  .nav-menu-icon i, .nav-menu-icon i + i { width: 16px; }

  /* menu: full screen, 72px rows, language + CTA in the thumb zone */
  .menu-top { grid-template-columns: 1fr auto; }
  .menu-logo { order: -1; justify-self: start; }
  .menu-close { justify-self: end; width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid rgba(232, 222, 206, .3); border-radius: 50%; }
  .menu-close svg { width: 14px; height: 14px; }
  .menu-links a { min-height: 72px; padding-block: 0; align-items: center; border-top: 0; border-bottom: 1px solid rgba(232, 222, 206, .14); font-size: 36px; }
  .menu-links a[aria-current="true"] .mtxt::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 12px; border-radius: 50%; background: var(--red); vertical-align: middle; }
  .lang--seg { display: inline-grid; grid-auto-flow: column; justify-self: start; width: max-content; border: 1px solid rgba(232, 222, 206, .25); border-radius: 22px; padding: 0; }
  .lang--seg .lang-dot { display: none; }
  .lang--seg button { width: 100px; height: 44px; border-radius: 22px; font-family: var(--sans); font-weight: 500; font-size: 13px; letter-spacing: 0; color: rgba(232, 222, 206, .7); }
  .lang--seg button[aria-pressed="true"] { background: var(--ivory); color: var(--ink); }
  .menu-bottom { gap: 16px; }

  /* opening: statement anchored low, story pager, tap to advance */
  .hero5 { padding-bottom: 44px; }
  .hero5-body { margin-top: auto; margin-bottom: 0; padding-block: 24px 0; }
  .hs-i { align-self: end; line-height: 1.04; }
  .hero5-tag { margin-top: 20px; letter-spacing: .15em; }
  .hs-pg { display: flex; align-items: center; justify-content: space-between; margin-top: 24px; }
  .hs-pg-d { display: flex; gap: 6px; }
  .hs-pg-d i { width: 6px; height: 6px; border-radius: 3px; background: rgba(232, 222, 206, .28); transition: width .45s var(--expo), background-color .3s ease; }
  .hs-pg-d i.is-on { width: 20px; background: var(--red); }
  .hs-hint { font-family: var(--sans); font-weight: 500; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: rgba(232, 222, 206, .45); transition: opacity .5s ease; }
  .hero5.is-tapped .hs-hint { opacity: 0; }

  /* letter: one 96px row; opens to a full-bleed image + one clear next step */
  .letter5 .letter-toggle { min-height: 96px; padding-block: 24px; }
  .mletter .lt-t { display: block; font-size: 22px; line-height: 1.2; }
  .lt-e { display: block; margin-bottom: 8px; font-family: var(--sans); font-style: normal; font-weight: 600; font-size: 10px; line-height: 1.2; letter-spacing: .24em; text-transform: uppercase; color: var(--red-on-dark); }
  .letter5 .lt-b { width: 48px; height: 48px; }
  .l5 { padding-top: 24px; gap: 24px; }
  .l5-fig { margin-inline: calc(-1 * var(--pad)); aspect-ratio: 390 / 240; }
  .l5-h { font-size: 28px; }
  .l5-p { font-size: 15px; line-height: 1.6; }
  .mletter .l5-foot { flex-direction: column; align-items: stretch; gap: 14px; margin-top: 28px; }
  .l5-foot .alink { display: flex; justify-content: space-between; align-items: center; height: 52px; padding: 0 18px 0 20px; border: 1px solid rgba(232, 222, 206, .4); font-family: var(--sans); font-size: 15px; font-weight: 500; text-decoration: none; }
  .l5-foot .letter-close { align-self: flex-start; min-height: 44px; }

  /* who we are: full-bleed photo, labelled glass chips instead of bare dots */
  .duo { margin: calc(32px + 8 * var(--t)) calc(-1 * var(--pad)) 0; aspect-ratio: 390 / 330; }
  .duo img { object-position: 50% 40%; }
  .duo::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 45%; background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .55)); pointer-events: none; z-index: 1; }
  .duo .pdot { top: auto; bottom: 16px; width: auto; height: 44px; margin: 0; display: inline-flex; align-items: center; gap: 10px; padding: 0 8px 0 14px; border-radius: 22px; background: rgba(21, 21, 21, .5); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid rgba(232, 222, 206, .28); }
  .duo .pdot--david { left: 16px; right: auto; }
  .duo .pdot--philip { left: auto; right: 16px; }
  .duo .pdot::before, .duo .pdot::after { display: none !important; animation: none !important; }
  .duo .pdot .pdot-c { position: relative; inset: auto; order: 2; width: 28px; height: 28px; flex: none; }
  .duo .pdot .pdot-c svg { width: 12px; height: 12px; }
  .duo .pdot .pdot-chip { display: flex !important; position: static; order: 1; opacity: 1 !important; transform: none !important; padding: 0; background: none; pointer-events: none; }
  .duo .pdot .pdot-n { font-family: var(--sans); font-size: 13px; font-weight: 500; color: var(--ivory); }
  .duo .pdot .pdot-cue { display: none; }
  .duo-hint { display: block; margin-top: 14px; font-family: var(--sans); font-size: 13px; line-height: 1.5; color: var(--muted-l); }

  /* how we do it: sticky mini-map, stacked phases, leaps between them, 56px rows */
  .lhls { display: none; }
  .jump-wrap { position: relative; }
  .mmap { display: block; position: sticky; top: var(--nav-h); z-index: 5; margin: 0 calc(-1 * var(--pad)) 40px; padding: 14px var(--pad) 0; background: rgba(244, 242, 239, .94); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-block: 1px solid rgba(10, 10, 10, .1); }
  .mmap-svg { display: block; width: 100%; height: auto; overflow: visible; }
  .mmap-path { fill: none; stroke: var(--ink); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
  .mmap-dot { fill: var(--red); }
  .mmap-l { display: flex; justify-content: space-between; }
  .mmap-l a { display: flex; align-items: center; min-height: 44px; font-family: var(--sans); font-weight: 500; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: rgba(10, 10, 10, .45); transition: color .25s ease; }
  .mmap-l a[aria-current] { color: var(--ink); font-weight: 600; }
  .jump-col { scroll-margin-top: calc(var(--nav-h) + 110px); }
  .jump-rail, html.js.jump-live .jump-rail { display: none; }
  .jump-cols { padding-left: 0; gap: 0; }
  .jump-cols::before { display: none; }
  html.js .jump .jump-cols > .jump-col::before, .jump .jump-cols > .jump-col::before { position: static; display: block; width: auto; height: auto; margin-bottom: 6px; border: 0; background: none; font-family: var(--sans); font-weight: 500; font-size: 11px; letter-spacing: .18em; color: var(--muted-l); }
  .jump .jump-cols > .jump-col--1::before { content: "01"; }
  .jump .jump-cols > .jump-col--2::before { content: "02"; }
  .jump .jump-cols > .jump-col--3::before { content: "03"; }
  .jump-h { font-size: 52px; }
  .jump-sub { font-size: 19px; margin-top: 8px; }
  .jump-list { margin-top: 20px; border-bottom: 1px solid rgba(10, 10, 10, .14); }
  .jump-item { min-height: 56px; font-size: 16px; }
  .jump-plus { width: 32px; height: 32px; }
  .jump-plus svg { display: none; }
  .jump-plus::before { content: ""; width: 14px; height: 14px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M5 2.5L9.5 7 5 11.5' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M5 2.5L9.5 7 5 11.5' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
  .jump-item.is-active .jump-plus::before { background: var(--ivory); }
  .jump-col .lhl { position: static; transform: none !important; opacity: 1 !important; max-width: none; padding-block: 48px; margin: 0; font-size: 28px; line-height: 1.18; text-align: left; }
  .jump-col .lhl::before { content: ""; display: block; width: 120px; height: 34px; margin-bottom: 12px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 34'%3E%3Cpath d='M2 32C30 32 40 2 70 2C92 2 104 14 114 24' fill='none' stroke='%239E1B32' stroke-width='1.2' stroke-dasharray='3 5'/%3E%3Ccircle cx='114' cy='24' r='4' fill='%239E1B32'/%3E%3C/svg%3E") left center / contain no-repeat; }
  .jump-col .lhl .lhl-e { margin-bottom: 10px; }
  .jump-post { margin-top: 56px; }

  /* sticky CTA: full width, no logo, steps aside over the footer and under sheets */
  .sticky-logo { display: none; }
  .sticky-cta { background: rgba(19, 19, 22, .92); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
  .btn--sticky { min-height: 52px; padding: 0 20px 0 22px; font-size: 16px; }
  html.pm-open .sticky-cta.is-on { transform: translateY(110%); }

  /* footer: 44px link rows */
  .fcol a, .fcol li > span { min-height: 44px; }
}

/* sheets on phones: bottom sheets with a grabber, one-thumb actions, drag to close */
@media (max-width: 599px) {
  .pmodal.glass-d, .pmodal.glass-l { margin: auto 0 0; width: 100%; max-width: 100%; max-height: 88svh; border: 0; border-radius: 20px 20px 0 0; }
  @media (prefers-reduced-motion: no-preference) { .pmodal.glass-d[open], .pmodal.glass-l[open] { animation: pm-up .45s cubic-bezier(.16, 1, .3, 1); } }
  .pmodal .pm-f { display: none; }
  .pmodal .pm-s { display: inline; }
  /* partner bio — dark sheet */
  .pmodal.glass-d { background: rgba(10, 10, 10, .97); box-shadow: 0 -12px 40px rgba(0, 0, 0, .35); }
  .glass-d .pm-in { display: grid; grid-template-columns: 56px 1fr 44px; column-gap: 14px; row-gap: 18px; align-items: center; padding: 10px 24px calc(28px + env(safe-area-inset-bottom)); }
  .glass-d .pm-handle { grid-column: 1 / -1; display: block; justify-self: center; width: 36px; height: 4px; margin: 0; border-radius: 2px; background: rgba(232, 222, 206, .3); }
  .glass-d .pm-top { display: contents; }
  .glass-d .sm-spacer { display: none; }
  .glass-d .pm-x { grid-column: 3; grid-row: 2; }
  .pmodal .pm-av { display: block; grid-column: 1; grid-row: 2; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
  .glass-d .pm-name { grid-column: 2; grid-row: 2; margin: 0; padding: 0; font-size: 28px; }
  .glass-d .pm-bio, .glass-d .pm-contact, .glass-d .pm-act { grid-column: 1 / -1; margin: 0; }
  .glass-d .pm-bio { font-size: 15px; line-height: 1.6; }
  .glass-d .pm-contact { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 0; border: 0; }
  .glass-d .pm-contact li:first-child { order: 3; }
  .glass-d .pm-contact a { display: flex; align-items: center; justify-content: center; height: 48px; border: 1px solid rgba(232, 222, 206, .3); border-radius: 24px; font-size: 14px; font-weight: 500; text-decoration: none; }
  .glass-d .pm-li span[aria-hidden] { display: none; }
  .glass-d .pm-act { padding-top: 16px; border-top: 1px solid rgba(232, 222, 206, .14); }
  .glass-d .pm-next { width: 100%; justify-content: space-between; }
  /* service detail — paper sheet, progress, previous / next, swipe */
  .pmodal.glass-l { background: #F6F5F0; box-shadow: 0 -12px 40px rgba(0, 0, 0, .25); }
  .glass-l .pm-in { gap: 18px; padding: 10px 24px calc(28px + env(safe-area-inset-bottom)); }
  .glass-l .pm-handle { display: block; margin: 0 auto; width: 36px; height: 4px; border-radius: 2px; background: rgba(10, 10, 10, .3); }
  .glass-l.smodal .sm-title { font-size: 32px; }
  .glass-l.smodal .sm-body { font-size: 15px; }
  .sm-prog { display: flex; gap: 4px; }
  .sm-prog i { width: 16px; height: 3px; border-radius: 2px; background: rgba(10, 10, 10, .15); transition: width .35s var(--expo), background-color .25s ease; }
  .sm-prog i.is-on { width: 28px; background: var(--red); }
  .glass-l .sm-act { display: flex; gap: 10px; padding-top: 0; border-top: 0; }
  .pm-prev { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 120px; height: 48px; flex: none; border: 1px solid rgba(10, 10, 10, .3); border-radius: 24px; font-family: var(--sans); font-size: 14px; font-weight: 500; color: var(--ink); }
  .pm-prev svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.4; }
  .pm-prev:disabled { opacity: .35; cursor: default; }
  .glass-l .pm-next { flex: 1; justify-content: center; height: 48px; border-radius: 24px; background: var(--ink); color: var(--ivory); }
  .glass-l .pm-next svg { stroke: var(--ivory); }
}
@media (max-width: 1023px) {
  html.js .duo[data-reveal].in .pdot, html.js .duo[data-reveal].in .pdot--philip { transition-delay: .25s; }
  .lang--seg button { display: grid; place-items: center; padding: 0; text-align: center; }
}
@media (max-width: 599px) {
  .glass-l .sm-act { flex-direction: row; align-items: center; justify-content: flex-start; }
  .glass-l .sm-act .pm-prev { order: 1; }
  .glass-l .sm-act .pm-next { order: 2; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 20px; }
}

/* ---------- 21 · Mobile tweaks from Figma (5 Nov, node 130:1106) ---------- */
@media (max-width: 1023px) {
  /* opening: shorter, so the letter row shows on first load; bigger statement; no tap hint */
  .hero5 { min-height: 0; height: auto; padding-top: calc(var(--nav-h) + 24px); padding-bottom: 28px; }
  .hero5-body { min-height: calc(72svh - var(--nav-h) - 52px); display: flex; flex-direction: column; justify-content: flex-end; }
  .hs { font-size: calc(54px + 50 * var(--t)); }
  .hs-i { line-height: 1.1; letter-spacing: -0.012em; }
  .hs-pg { margin-top: 44px; }
  .hs-hint { display: none; }
  /* who we are: no hint under the photo; 40px to the next section */
  .duo-hint { display: none; }
  .who { padding-bottom: 40px; }
  /* how we do it: no sticky mini-map */
  .mmap { display: none; }
}
@media (max-width: 1023px) { .hero5-body .hero5-tag { order: 0; } }

/* ---------- 22 · Mobile: 60px header (Figma margins 20 / 12), hero placement, a bottom that stays put ---------- */
@media (max-width: 1023px) {
  .nav { padding-top: env(safe-area-inset-top); }
  .nav .nav-row { width: auto; min-height: 59px; margin: 0; padding: 0 12px 0 20px; }
  .nav-logo svg { width: 68px; }
  .hero5 { padding-top: var(--nav-h); }
  html, body { overscroll-behavior-y: none; }
}

/* ---------- 23 · Mobile (5 Nov): full-screen opening, no sticky CTA ---------- */
@media (max-width: 1023px) {
  .hero5 { min-height: 100svh; }
  .hero5-body { min-height: 0; }
  .sticky-cta { display: none !important; }
  .foot { padding-bottom: calc(40px + env(safe-area-inset-bottom)); }
}

/* ---------- 24. Client round: phrases that must hold together on one line ---------- */
.hs-i .nb { white-space: nowrap; }
/* the type scales down just enough for the longest held phrase (11.5em) to fit the column */
@media (min-width: 600px) and (max-width: 1023px) { .hs { font-size: min(calc(54px + 50 * var(--t)), calc(var(--content) / 11.6)); } }
@media (min-width: 1024px) and (max-width: 1440px) { .hs { font-size: min(calc(46px + 58 * var(--t)), calc(var(--content) / 11.6)); } }
/* phones: at the approved 54px no phrase of that length fits a 390px screen, so it wraps as a unit */
@media (max-width: 599px) { .hs-i .nb { white-space: normal; } }
@media (max-width: 599px) {
  /* the italic answer starts its own line, so each held phrase reads as one unit */
  .hs-i .hs-v > em { display: block; }
  /* the one four-sentence statement steps down a size so it never crowds the header */
  .hs-i--long { font-size: .8em; }
}

/* ---------- 25. Client round: lighter profile glass; service cards in the same dark glass ---------- */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .pmodal.glass-d { background: rgba(21, 21, 21, .74); } }

/* service detail: the profile card's material, type and entrance; still centred */
.pmodal.smodal.glass-l {
  width: min(420px, calc(100vw - 48px)); color: var(--ivory);
  background: rgba(21, 21, 21, .86); border: 1px solid rgba(232, 222, 206, .2); border-radius: 10px;
  -webkit-backdrop-filter: blur(28px) saturate(1.15); backdrop-filter: blur(28px) saturate(1.15);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .pmodal.smodal.glass-l { background: rgba(21, 21, 21, .74); } }
.pmodal.smodal.glass-l::backdrop { background: rgba(19, 19, 22, .5); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.smodal.glass-l .pm-in { gap: 0; padding: 30px 32px 26px; }
.smodal.glass-l .sm-svc { font-size: 10px; letter-spacing: .2em; color: rgba(232, 222, 206, .66); }
.smodal.glass-l .sm-svc::before { background: var(--red-on-dark); }
.smodal.glass-l .pm-x { border-color: rgba(232, 222, 206, .35); }
.smodal.glass-l .pm-x:hover { border-color: var(--ivory); background: rgba(232, 222, 206, .08); }
.smodal.glass-l .pm-x svg { stroke: var(--ivory); }
.smodal.glass-l .sm-title { margin-top: 18px; font-size: 34px; line-height: 1.08; color: var(--ivory); }
.smodal.glass-l .sm-title .tdot { color: var(--red-on-dark); }
.smodal.glass-l .sm-body { margin-top: 16px; font-size: 15px; line-height: 1.62; color: rgba(232, 222, 206, .9); }
.smodal.glass-l .sm-act { margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(232, 222, 206, .16); }
.smodal.glass-l .pm-next { font-size: 13px; font-weight: 400; color: rgba(232, 222, 206, .78); }
.smodal.glass-l .pm-next:hover { color: var(--ivory); }
.smodal.glass-l .pm-next svg { stroke: currentColor; }
.smodal.glass-l :focus-visible { outline-color: var(--ivory); }
@media (prefers-reduced-motion: no-preference) {
  .pmodal.smodal.glass-l[open] { animation: glass-anchor .55s var(--expo); }
}
/* phones: the profile's dark sheet */
@media (max-width: 599px) {
  .pmodal.glass-d { background: rgba(10, 10, 10, .9); -webkit-backdrop-filter: blur(24px) saturate(1.15); backdrop-filter: blur(24px) saturate(1.15); }
  .pmodal.smodal.glass-l { width: 100%; margin: auto 0 0; border: 0; border-radius: 20px 20px 0 0; background: rgba(10, 10, 10, .9); box-shadow: 0 -12px 40px rgba(0, 0, 0, .35); }
  .smodal.glass-l .pm-in { gap: 0; padding: 10px 24px calc(28px + env(safe-area-inset-bottom)); }
  .smodal.glass-l .pm-handle { margin-bottom: 18px; background: rgba(232, 222, 206, .3); }
  .smodal.glass-l .sm-title { margin-top: 14px; font-size: 30px; }
  .smodal.glass-l .sm-body { margin-top: 12px; }
  .smodal.glass-l .sm-prog { margin-top: 20px; }
  .smodal.glass-l .sm-prog i { background: rgba(232, 222, 206, .18); }
  .smodal.glass-l .sm-prog i.is-on { background: var(--red-on-dark); }
  .smodal.glass-l .sm-act { margin-top: 18px; padding-top: 0; border-top: 0; }
  .smodal.glass-l .pm-prev { border-color: rgba(232, 222, 206, .3); color: var(--ivory); }
  .smodal.glass-l .pm-next { font-size: 14px; font-weight: 500; background: var(--ivory); color: var(--ink); }
  .smodal.glass-l .pm-next:hover { color: var(--ink); }
  @media (prefers-reduced-motion: no-preference) { .pmodal.smodal.glass-l[open] { animation: pm-up .45s cubic-bezier(.16, 1, .3, 1); } }
}

/* ---------- 26. How we do it: title and statement lead into the graph ---------- */
.jump-pre .jump-title { margin-top: calc(48px + 32 * var(--t)); margin-bottom: 0; }
.jump-pre .how-st { margin-top: calc(24px + 16 * var(--t)); max-width: 26em; }
.jump-pre { margin-bottom: calc(56px + 48 * var(--t)); }

/* ---------- 27. Footer: upright type throughout; House of Poland column holds long titles ---------- */
#site-foot, #site-foot * { font-style: normal; }
#site-foot .fcol a { white-space: nowrap; }
#site-foot .fcol--hop { flex: 0 1 300px; min-width: 0; }
#site-foot .fcol--hop a { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; white-space: normal; text-wrap: balance; max-width: 30ch; }
#site-foot .fcol-note { margin: 18px 0 0; max-width: 34ch; font-size: 14px; line-height: 1.6; color: var(--muted-d); text-wrap: pretty; }

/* ---------- 28. CTA: deep burgundy. Hover: the colour deepens in a soft fade, the label rolls up to an
   identical copy, the arrow glides 4px. One curve, transform/opacity only. ---------- */
.btn {
  --cta: #7A1527; --cta-deep: #5A0F1D; --cta-ease: cubic-bezier(.65, 0, .35, 1);
  position: relative; isolation: isolate; overflow: hidden; background: var(--cta);
  transition: none; -webkit-tap-highlight-color: transparent;
}
.btn:hover, .btn:focus-visible { background: var(--cta); }
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--cta-deep); opacity: 0; transition: opacity .5s ease; }
.btn::after { content: none; }
.btn:hover::before, .btn:focus-visible::before { opacity: 1; }
.btn-t { display: inline-block; overflow: hidden; vertical-align: top; padding-block: .1em; margin-block: -.1em; }
.btn-r { display: inline-block; text-shadow: 0 1.7em 0 currentColor; }
.btn .btn-i { transition: transform .55s var(--cta-ease); }
.btn:hover .btn-i, .btn:focus-visible .btn-i { transform: translate3d(4px, 0, 0); animation: none; }
@media (prefers-reduced-motion: no-preference) {
  .btn-r { transition: transform .55s var(--cta-ease); }
  .btn:hover .btn-r, .btn:focus-visible .btn-r { transform: translate3d(0, -1.7em, 0); }
}
/* the header CTA reads as the primary action: a touch larger, more air */
@media (min-width: 1024px) {
  .nav-cta.btn--s { gap: 18px; min-height: 48px; padding: 14px 24px; font-size: 16px; letter-spacing: .005em; }
}
.cbtn { background: #7A1527; transition: background-color .45s cubic-bezier(.19, 1, .22, 1); }
.cbtn:hover { background: #520C19; }
@media (min-width: 1024px) { .pmodal.glass-d.is-anchored { -webkit-backdrop-filter: blur(20px) saturate(1.15); backdrop-filter: blur(20px) saturate(1.15); } }

/* ---------- 29. House of Poland cards: no number over the photo; a quiet, paper-light hover ---------- */
.acard-no, .acard-img::after { display: none; }
.acard-a { position: relative; transition: transform .7s cubic-bezier(.22, 1, .36, 1); }
.acard-a::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; box-shadow: 0 28px 56px -30px rgba(26, 20, 15, .38); opacity: 0; transition: opacity .7s cubic-bezier(.22, 1, .36, 1); }
.acard { position: relative; z-index: 0; }
.acard-h { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .16em; text-decoration-color: transparent; transition: text-decoration-color .5s ease; }
.acard-f { position: relative; }
.acard-f::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--red); transform: scaleX(0); transform-origin: left center; transition: transform .8s cubic-bezier(.22, 1, .36, 1); }
@media (hover: hover) {
  .acard-a:hover { background: #F6F5F0; background-image: none; color: var(--ink); transform: translate3d(0, -4px, 0); }
  .acard-a:hover::after { opacity: 1; }
  .acard-a:hover .acard-h { font-style: normal; text-decoration-color: rgba(10, 10, 10, .25); }
  .acard-a:hover .acard-ex, .acard-a:hover .acard-f .lbl { color: var(--muted-l); }
  .acard-a:hover .acard-topic { color: var(--red-on-light); }
  .acard-a:hover .acard-f { border-color: rgba(10, 10, 10, .14); }
  .acard-a:hover .acard-f::before { transform: scaleX(1); }
  .acard-a:hover .acard-read { color: var(--red-on-light); }
  .acard-a:hover .acard-read span { transform: translate3d(6px, 0, 0); }
  .acard-a:hover .acard-pic { transform: scale(1.04); }
}
@media (prefers-reduced-motion: reduce) { .acard-a, .acard-a:hover { transform: none; } }

/* ---------- 30. Run-up / Leap / Land: 2px smaller at every size ---------- */
.jump-h { font-size: calc(50px + 20 * var(--t)); }
@media (min-width: 1024px) { .jump-h { font-size: calc(var(--u) * 122 - 2px); } }
@media (max-width: 1023px) { .jump-h { font-size: 50px; } }

/* ---------- 31. Letter actions: one type system — an outlined primary, a quiet text secondary ---------- */
.mletter .l5-foot { align-items: center; gap: 14px 32px; }
.l5-foot .alink {
  position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 18px;
  min-height: 52px; padding: 0 22px 0 24px; border: 1px solid rgba(232, 222, 206, .32); border-radius: 0;
  font-family: var(--sans); font-style: normal; font-weight: 500; font-size: 15px; letter-spacing: .01em; color: var(--ivory);
  transition: border-color .5s ease;
}
.l5-foot .alink::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(232, 222, 206, .07); opacity: 0; transition: opacity .5s ease; }
.l5-foot .alink svg { width: 16px; height: 16px; transition: transform .55s cubic-bezier(.65, 0, .35, 1); }
.l5-foot .letter-close {
  display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 4px;
  font-family: var(--sans); font-weight: 400; font-size: 15px; letter-spacing: .01em; text-transform: none; color: rgba(232, 222, 206, .66);
  transition: color .4s ease;
}
.l5-foot .letter-close svg { width: 14px; height: 14px; transition: transform .55s cubic-bezier(.65, 0, .35, 1); }
@media (hover: hover) {
  .l5-foot .alink:hover { border-color: rgba(232, 222, 206, .8); }
  .l5-foot .alink:hover::before { opacity: 1; }
  .l5-foot .alink:hover svg { transform: translate3d(4px, 0, 0); }
  .l5-foot .letter-close:hover { color: var(--ivory); }
  .l5-foot .letter-close:hover svg { transform: translate3d(0, -3px, 0); }
}
.l5-foot .alink:focus-visible, .l5-foot .letter-close:focus-visible { outline: 1px solid var(--ivory); outline-offset: 4px; }
@media (max-width: 599px) {
  .mletter .l5-foot { align-items: stretch; }
  .l5-foot .alink { justify-content: space-between; width: 100%; }
  .l5-foot .letter-close { align-self: flex-start; min-height: 44px; }
}

/* ---------- 32. Card body copy one step up (15 → 16px) ---------- */
.smodal.glass-l .sm-body, .glass-d .pm-bio { font-size: 16px; line-height: 1.62; }
@media (min-width: 1024px) { .glass-d .pm-bio { font-size: 16px; } .pmodal.smodal.glass-l { width: min(440px, calc(100vw - 48px)); } }
@media (max-width: 599px) { .smodal.glass-l .sm-body, .glass-d .pm-bio { font-size: 16px; line-height: 1.6; } }
.l5-foot .letter-close, .l5-foot .alink { -webkit-text-stroke: 0; }
.l5-foot .alink { font-weight: 400; }

/* ---------- 33. Hero tagline 4px bigger (10 → 14px) ---------- */
.hero5-tag { font-size: 14px; }

/* ---------- 34. Cards square, like every other surface on the site ---------- */
.pmodal.glass-d, .pmodal.glass-l, .pmodal.smodal.glass-l { border-radius: 0; }
@media (max-width: 599px) { .pmodal.glass-d, .pmodal.glass-l, .pmodal.smodal.glass-l { border-radius: 0; } }

/* ---------- 35. How we do it: more air in each phase; a Hugeicon (free, MIT) per service ---------- */
.jump-ico { flex: none; display: grid; place-items: center; width: 20px; height: 20px; color: rgba(10, 10, 10, .55); transition: color .25s ease; }
.jump-ico svg { width: 20px; height: 20px; }
.jump-item { justify-content: flex-start; gap: 14px; }
.jump-item-t { flex: 1; min-width: 0; }
.jump-item .jump-plus { margin-left: auto; }
.jump-item:hover .jump-ico, .jump-item:focus-visible .jump-ico, .jump-item.is-active .jump-ico { color: var(--red); }
@media (min-width: 1024px) {
  .jump-sub { margin-top: max(12px, calc(var(--u) * 18)); }
  .jump-list { margin-top: max(28px, calc(var(--u) * 44)); }
  .jump-item { gap: 16px; padding-block: max(14px, calc(var(--u) * 20)); }
}
@media (max-width: 1023px) {
  .jump-sub { margin-top: 12px; }
  .jump-list { margin-top: 28px; }
  .jump-item { min-height: 60px; }
}

/* ---------- 36. Service card carries its service's icon: a square hairline tile that mirrors the close button ---------- */
.smodal .sm-ico { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid rgba(232, 222, 206, .28); color: var(--ivory); }
.smodal .sm-ico svg { width: 20px; height: 20px; }
.smodal .sm-ico:empty { display: none; }
.smodal.glass-l .pm-top { justify-content: flex-start; gap: 14px; }
.smodal.glass-l .pm-top .pm-x { margin-left: auto; }
.smodal.glass-l .sm-svc::before { content: none; }
@media (min-width: 1024px) { .smodal.glass-l .sm-title { margin-top: 22px; } }

/* ---------- 37. Letter heading 4px bigger ---------- */
.l5-h { font-size: calc(34px + 12 * var(--t)); }
@media (max-width: 1023px) { .l5-h { font-size: 32px; } }

/* ---------- 38. Contact form: a guiding line under each section title ---------- */
.fset-legend { margin-bottom: 8px; }
.fset-sub { margin: 0 0 24px; max-width: 52ch; font-family: var(--sans); font-size: 15px; line-height: 1.55; color: var(--muted-l); text-wrap: pretty; }

/* ---------- 39. Pinned graph keeps clear of the header: room for the creative-leap headline that sits above the curve ---------- */
@media (min-width: 1024px) {
  .jump-inner { padding-top: 48px; }
  .jump-pre { margin-bottom: calc(8px + 48 * var(--t)); }
}

/* ---------- 40. Service card: black, larger ---------- */
.pmodal.smodal.glass-l { background: rgba(21, 21, 21, .96); border-color: rgba(232, 222, 206, .14); }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .pmodal.smodal.glass-l { background: rgba(21, 21, 21, .94); } }
@media (min-width: 600px) {
  .pmodal.smodal.glass-l { width: min(560px, calc(100vw - 48px)); }
  .smodal.glass-l .pm-in { padding: 40px 44px 34px; }
  .smodal.glass-l .sm-title { margin-top: 26px; font-size: 40px; line-height: 1.08; }
  .smodal.glass-l .sm-body { margin-top: 18px; font-size: 17px; line-height: 1.62; }
  .smodal.glass-l .sm-act { margin-top: 28px; padding-top: 20px; }
  .smodal.glass-l .pm-next { font-size: 14px; }
}
@media (max-width: 599px) { .pmodal.smodal.glass-l { background: rgba(21, 21, 21, .97); } }

/* ---------- 41. Contact form, editorial: open underline fields, eyebrow labels, a red line that draws on focus ---------- */
.cbody .form { gap: calc(56px + 16 * var(--t)); }
.cbody .fset-legend .enum { display: none; }
.cbody .fset-t { font-family: var(--serif); font-style: normal; font-weight: 400; font-size: calc(28px + 8 * var(--t)); line-height: 1.15; letter-spacing: -0.01em; color: var(--ink); }
.cbody .fset-t::after { content: "."; color: var(--red); }
.cbody .fset-sub { margin-bottom: 32px; }
@media (min-width: 600px) { .cbody .group--grid { column-gap: 40px; } }
.cbody .fld { gap: 4px; padding-bottom: 28px; }
.cbody .fld > label:not(.check) { font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: rgba(10, 10, 10, .62); }
.cbody .fld > label .req { margin-left: 2px; }
.cbody .opt { margin-left: 6px; font-size: 11px; letter-spacing: .08em; text-transform: none; color: rgba(10, 10, 10, .45); }
.cbody .fld input:not([type="checkbox"]):not([type="radio"]), .cbody .fld textarea {
  min-height: 48px; padding: 10px 0 12px; border: 0; border-bottom: 1px solid rgba(10, 10, 10, .26); border-radius: 0;
  background-color: transparent; background-image: linear-gradient(var(--red), var(--red)); background-repeat: no-repeat;
  background-position: 0 100%; background-size: 0 2px;
  font-family: var(--sans); font-size: 18px; line-height: 1.4; color: var(--ink); box-shadow: none; outline: none;
  transition: border-color .3s ease, background-size .6s cubic-bezier(.65, 0, .35, 1);
}
.cbody .fld input:not([type="checkbox"]):not([type="radio"]):hover, .cbody .fld textarea:hover { border-color: rgba(10, 10, 10, .55); }
.cbody .fld input:not([type="checkbox"]):not([type="radio"]):focus, .cbody .fld textarea:focus { border-color: rgba(10, 10, 10, .55); box-shadow: none; background-size: 100% 2px; }
.cbody .fld.invalid input:not([type="checkbox"]):not([type="radio"]), .cbody .fld.invalid textarea { border-color: var(--red-on-light); box-shadow: none; background-size: 100% 2px; }
.cbody .fld textarea { min-height: 120px; resize: vertical; }
.cbody .fld input:-webkit-autofill { -webkit-text-fill-color: var(--ink); transition: background-color 9999s ease 0s; }
.cbody .err { font-family: var(--sans); font-style: normal; font-size: 13px; letter-spacing: .01em; }
.cbody .counter { font-size: 11px; letter-spacing: .12em; color: rgba(10, 10, 10, .45); }
.cbody .submit-row { border-top: 1px solid rgba(10, 10, 10, .14); padding-top: 32px; gap: 28px; }
.cbody .check { gap: 14px; color: rgba(10, 10, 10, .8); }
.cbody .check .box { width: 20px; height: 20px; border-width: 1px; border-color: rgba(10, 10, 10, .5); }
.cbody .check input:checked + .box { background: var(--ink); border-color: var(--ink); }
.cbody .check input:checked + .box::after { left: 6px; top: 2px; width: 5px; height: 10px; border-width: 0 1.5px 1.5px 0; }
.cbody .form-alert { border-top-width: 1px; font-family: var(--sans); font-size: 15px; }
.cbody .form-alert strong { font-family: var(--serif); font-size: 19px; }
@media (prefers-reduced-motion: reduce) { .cbody .fld input, .cbody .fld textarea { transition: none; } }
.cbody .form > .hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); margin: 0; }
.cbody .form { position: relative; }
.cbody .submit-row { margin-top: calc(-24px - 16 * var(--t)); }
.cbody .fld[data-field="message"] { padding-bottom: 0; }

/* ---------- 42. How we do it: each service opens in place (accordion), one at a time ---------- */
.jump-acc { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s cubic-bezier(.65, 0, .35, 1); }
.jump-acc.is-open { grid-template-rows: 1fr; }
.jump-acc-in { min-height: 0; overflow: hidden; }
.jump-acc-h, .jump-acc-p { opacity: 0; transform: translate3d(0, -6px, 0); transition: opacity .25s ease, transform .4s cubic-bezier(.22, 1, .36, 1); }
.jump-acc.is-open .jump-acc-h, .jump-acc.is-open .jump-acc-p { opacity: 1; transform: none; transition-delay: .14s; }
.jump-acc.is-open .jump-acc-p { transition-delay: .2s; }
.jump-acc-h { margin: 2px 0 8px 36px; font-family: var(--serif); font-weight: 400; font-size: 21px; line-height: 1.22; letter-spacing: -0.005em; color: var(--ink); text-wrap: balance; }
.jump-acc-h .tdot { color: var(--red); }
.jump-acc-p { margin: 0 0 22px 36px; max-width: 42ch; font-family: var(--sans); font-size: 15px; line-height: 1.6; color: var(--muted-l); text-wrap: pretty; }
.jump-item[aria-expanded="true"] .jump-plus { transform: rotate(45deg); }
@media (hover: hover) { .jump-item[aria-expanded="true"]:hover .jump-plus { transform: rotate(45deg); } }
@media (max-width: 1023px) {
  .jump-acc-h { margin-left: 34px; font-size: 20px; }
  .jump-acc-p { margin-left: 34px; margin-bottom: 20px; }
  .jump-plus::before { transform: rotate(90deg); transition: transform .4s cubic-bezier(.65, 0, .35, 1); }
  .jump-item[aria-expanded="true"] .jump-plus { transform: none; }
  .jump-item[aria-expanded="true"] .jump-plus::before { transform: rotate(-90deg); }
}
@media (prefers-reduced-motion: reduce) { .jump-acc, .jump-acc-h, .jump-acc-p { transition: none; } }
@media (min-width: 1024px) { .jump-acc-p { max-width: none; } }

/* ---------- 43. Footer: House of Poland heading is the link; closing statement above the bottom bar ---------- */
#site-foot .fcol--hop { display: block; }
#site-foot .fcol--hop .fcol-hl { display: inline-flex; align-items: center; gap: 10px; overflow: visible; -webkit-line-clamp: none; max-width: none; white-space: nowrap; color: var(--ivory); text-decoration: none; transition: color .3s ease; }
#site-foot .fcol-hl svg { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .45s cubic-bezier(.65, 0, .35, 1); }
@media (hover: hover) {
  #site-foot .fcol-hl:hover { color: #E8DECE; }
  #site-foot .fcol-hl:hover svg { transform: translate3d(4px, 0, 0); }
}
#site-foot .fcol--hop .fcol-note { margin-top: 10px; }
#site-foot .foot-score {
  margin: calc(56px + 32 * var(--t)) 0 0; padding-top: calc(32px + 16 * var(--t)); border-top: 1px solid rgba(232, 222, 206, .12);
  max-width: 24em; font-family: var(--serif); font-style: normal; font-weight: 400;
  font-size: calc(30px + 22 * var(--t)); line-height: 1.12; letter-spacing: -0.012em; color: var(--ivory); text-wrap: balance;
}
#site-foot .foot-score .tdot { color: var(--red); }
#site-foot .foot-score + .foot-bottom { margin-top: calc(40px + 24 * var(--t)); border-top: 0; padding-top: 0; }
@media (max-width: 1023px) {
  #site-foot .fcol--hop { margin-top: 8px; }
  #site-foot .fcol--hop .fcol-h { font-size: 17px; }
}

/* ---------- 44. Contact: each partner's city beside their name ---------- */
.cperson-n { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.cperson-c { flex: none; font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: rgba(10, 10, 10, .55); }
@media (max-width: 1023px) { #site-foot .fcol--hop { grid-column: 1 / -1; } #site-foot .fcol--hop .fcol-note { max-width: 40ch; } }
#site-foot .fc-city { display: block; margin-top: 2px; font-family: var(--sans); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-d); }

/* ---------- 45. Letter: one full-width image, linking to the letter ---------- */
.l5 { display: block; }
.l5-link { display: block; position: relative; overflow: hidden; }
.l5-link img { transition: transform 1.2s cubic-bezier(.22, 1, .36, 1); }
@media (hover: hover) { .l5-link:hover img { transform: scale(1.025); } }
.l5-link:focus-visible { outline: 1px solid var(--ivory); outline-offset: 6px; }
@media (min-width: 1024px) { .l5 { padding-top: 48px; } .l5-fig { aspect-ratio: 21 / 9; } }

/* ---------- 46. Solid modern black replaces the rug texture everywhere ---------- */
:root { --rug-c: #151515; --rug-i: none; --black: #151515; }
html { background: var(--black); }
.nav.is-scrolled { background: var(--black); }

/* ---------- 47. Articles: a full-width image under the title; cards without categories ---------- */
.art-hero-w { padding-top: calc(32px + 24 * var(--t)); }
.art-hero { margin: 0; overflow: hidden; background: #201F1D; aspect-ratio: 16 / 10; }
.art-hero picture, .art-hero img { display: block; width: 100%; height: 100%; }
.art-hero img { object-fit: cover; }
@media (min-width: 1024px) { .art-hero { aspect-ratio: 21 / 9; } }
.acard-topic { display: none; }

/* ---------- 48. Contact: a square headshot leads each partner's name ---------- */
.cperson-n { justify-content: flex-start; align-items: center; gap: 16px; }
.cperson-av { flex: none; width: 56px; height: 56px; object-fit: cover; background: #E8DECE; filter: grayscale(.15); }
.cperson-nm { flex: 1; min-width: 0; }
.cperson-c { align-self: center; }
@media (max-width: 599px) { .cperson-av { width: 48px; height: 48px; } .cperson-n { gap: 14px; } }
html .letter-panel .l5, html.js .letter-panel:not(.is-closed) .l5 { display: block; grid-template-columns: none; }

/* ---------- 49. Pinned graph glides when a service row opens or closes ---------- */
@media (prefers-reduced-motion: no-preference) { html.js.jump-pinned .jump-pin { transition: top .55s cubic-bezier(.65, 0, .35, 1); } }
.hs, .hs-i, .hs-v { --px: 0; --py: 0; }

/* ---------- 50. Contact: partner cards led by a portrait ---------- */
.cperson-n {
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: 1fr auto; grid-template-areas: "av city" "av name";
  column-gap: 20px; row-gap: 6px; align-items: end; margin-bottom: 20px;
}
.cperson-av { grid-area: av; width: 104px; height: 130px; object-fit: cover; object-position: 50% 20%; filter: none; background: #E8DECE; }
.cperson-nm { grid-area: name; font-size: calc(24px + 4 * var(--t)); line-height: 1.1; }
.cperson-c { grid-area: city; align-self: end; justify-self: start; }
@media (max-width: 599px) {
  .cperson-n { column-gap: 16px; }
  .cperson-av { width: 88px; height: 110px; }
}

/* ---------- 51. New partners photo (3:2, shown whole on desktop); dots on each partner ---------- */
@media (min-width: 1024px) {
  .duo { aspect-ratio: 3 / 2; }
  .pdot--david { --x: 34.5%; --y: 57%; }
  .pdot--philip { --x: 63%; --y: 59.5%; }
}
@media (max-width: 1023px) { .duo img { object-position: 50% 45%; } }

/* ---------- 52. The globe: three turning globes on black ---------- */
.globes { position: relative; padding-block: calc(96px + 72 * var(--t)); color: var(--ivory); overflow: hidden; }
.globes-h { margin: 0 0 calc(56px + 40 * var(--t)); max-width: 18em; font-family: var(--serif); font-weight: 400; font-size: calc(40px + 32 * var(--t)); line-height: 1.06; letter-spacing: -0.015em; color: var(--ivory); text-wrap: balance; }
.globes-h em { font-style: italic; }
.globes-h .tdot { color: var(--red); }
.globes-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(24px + 40 * var(--t)); }
.globe { display: flex; flex-direction: column; align-items: center; text-align: center; }
.globe-stage { position: relative; width: min(100%, 360px); aspect-ratio: 1; transition: transform .7s cubic-bezier(.22, 1, .36, 1); }
.globe-stage::after { /* contact shadow */
  content: ""; position: absolute; left: 14%; right: 14%; bottom: -9%; height: 9%; border-radius: 50%; z-index: -1;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0)); transition: transform .7s cubic-bezier(.22, 1, .36, 1), opacity .7s ease;
}
.globe-c { display: block; width: 100%; height: 100%; border-radius: 50%; touch-action: pan-y; cursor: grab; -webkit-tap-highlight-color: transparent; }
.globes.is-dragging .globe-c { cursor: grabbing; }
.globe-c:focus-visible { outline: 1px solid var(--ivory); outline-offset: 8px; }
.globe-l { margin-top: calc(28px + 8 * var(--t)); font-size: 11px; letter-spacing: .2em; color: rgba(232, 222, 206, .6); transition: color .4s ease; }
@media (hover: hover) {
  .globe:hover .globe-stage { transform: translate3d(0, -6px, 0); }
  .globe:hover .globe-stage::after { transform: scale(.92); opacity: .7; }
  .globe:hover .globe-l { color: var(--ivory); }
}
.globes-hint { margin: calc(40px + 16 * var(--t)) 0 0; text-align: center; font-size: 11px; letter-spacing: .16em; color: rgba(232, 222, 206, .4); }
.globes-hint .d-only { display: inline; } .globes-hint .m-only { display: none; }
@media (hover: none) { .globes-hint .d-only { display: none; } .globes-hint .m-only { display: inline; } }
/* entrance: the globes rise in, one after another (they spin in from the script) */
html.js .globe { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity .9s ease, transform 1.1s cubic-bezier(.22, 1, .36, 1); }
html.js .globes.is-in .globe { opacity: 1; transform: none; }
html.js .globes.is-in .globe:nth-child(2) { transition-delay: .12s; }
html.js .globes.is-in .globe:nth-child(3) { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) { html.js .globe { opacity: 1; transform: none; transition: none; } }
@media (max-width: 1023px) {
  .globes-row { grid-template-columns: minmax(0, 1fr); gap: 56px; }
  .globe-stage { width: min(78vw, 340px); }
  .globes-h { font-size: 40px; }
}
.globe-tip {
  position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none; display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px 8px 10px; white-space: nowrap; background: rgba(21, 21, 21, .94); border: 1px solid rgba(232, 222, 206, .16);
  color: var(--ivory); font-family: var(--serif); font-size: 15px; line-height: 1; box-shadow: 0 10px 24px rgba(0, 0, 0, .35);
  opacity: 0; transition: opacity .2s ease;
}
.globe-tip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--red); flex: none; }
.globe-tip::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 8px; height: 8px; margin-left: -4px; background: inherit; border-right: inherit; border-bottom: inherit; transform: rotate(45deg); }
.globe-tip.is-on { opacity: 1; }
.globe-c.is-pointing { cursor: pointer; }

/* ---------- 53. Brands marquee under the partners photo ---------- */
.logos { --k0: 22px; --k1: 1px; --gap: 72px; position: relative; margin: calc(8px + 8 * var(--t)) 0 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.logos-list, .logos-track { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; height: calc(var(--k0) + 36 * var(--k1) + 24px); }
.logo { flex: none; display: flex; align-items: center; justify-content: center; padding-inline: calc(var(--gap) / 2); }
.logo img { display: block; width: auto; max-width: none; height: calc(var(--k0) + (var(--h) - 22) * var(--k1)); opacity: .82; }
.logos-track { width: max-content; will-change: transform; }
/* JS live: the list stays for screen readers only, the track is what you see */
.logos.is-live .logos-list { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* no JS / reduced motion: a still row you can scroll */
.logos:not(.is-live) .logos-list { overflow-x: auto; scrollbar-width: none; -webkit-mask-image: none; }
.logos:not(.is-live) .logos-list::-webkit-scrollbar { display: none; }
.logos.is-still { -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
@media (max-width: 1023px) { .logos { --k0: 16px; --k1: .55px; --gap: 44px; margin-inline: calc(-1 * var(--pad)); } }
.lg-nike { --h: 40.0; }
.lg-autry { --h: 24.4; }
.lg-chillys { --h: 35.7; }
.lg-birchall { --h: 34.7; }
.lg-boodles { --h: 36.6; }
.lg-chivas { --h: 25.5; }
.lg-cocacola { --h: 35.6; }
.lg-hsbc { --h: 32.2; }
.lg-maserati { --h: 45.1; }
.lg-mastercard { --h: 26.2; }
.lg-meta { --h: 28.7; }
.lg-netflix { --h: 30.8; }
.lg-samsung { --h: 22.2; }
.lg-tylko { --h: 38.6; }
.lg-yoobra { --h: 36.4; }
.lg-ea { --h: 54.5; }
.lg-heineken { --h: 25.8; }
.lg-mcdonalds { --h: 22; }
.lg-sony { --h: 25.2; }
.lg-vimergy { --h: 48.7; }
.lg-xbox { --h: 35.8; }
.logos-tag { margin: calc(40px + 16 * var(--t)) 0 0; text-align: center; font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: rgba(10, 10, 10, .55); }
.logos-tag + .logos { margin-top: calc(4px + 4 * var(--t)); }

/* ==========================================================================
   54. BRAND PALETTE (Nov 2026) — only these six colours.
   Charcoal #151515 main background · Warm charcoal #201F1D hero, cover, footer ·
   Paper #F6F5F0 light sections · Ivory #E8DECE logo, text on dark ·
   Ink #0A0A0A text on paper · HOP red #E60001 the dot, nothing else.
   ========================================================================== */
:root, #site-foot {
  --charcoal: #151515; --warm: #201F1D; --paper: #F6F5F0; --ivory: #E8DECE; --ink: #0A0A0A; --red: #E60001;
  --red-ui: var(--ink); --red-on-light: var(--ink); --red-on-dark: var(--ivory);
  --ink-2: var(--warm); --ink-3: var(--warm); --chrome: var(--warm); --rug-c: var(--warm); --black: var(--charcoal);
  --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);
  --glass-d: rgba(21, 21, 21, .38); --glass-l: rgba(246, 245, 240, .74);
}
html { background: var(--charcoal); }
body { background: var(--paper); color: var(--ink); }
.skip, .toast, .how, .wp, .stepper, .howdo { background: var(--paper); }
html .nav.is-scrolled, html .menu { background: var(--charcoal) !important; }
.globes.ink, .globes { background: var(--charcoal); }
.i5-bg { background-color: var(--warm); }
.nav-logo svg, .menu-logo svg, .i5-logo, .foot-logo svg, #site-foot .foot-logo svg, .sticky-logo, .logo-o { fill: var(--ivory); }

/* red appears only as a dot: everything else that was red becomes ink (on paper) or ivory (on dark) */
.red { color: inherit; }
.jump-item:hover .jump-item-t, .jump-item:focus-visible .jump-item-t, .jump-item.is-active .jump-item-t { color: var(--ink); }
.jump-item:hover .jump-plus, .jump-item.is-active .jump-plus { background: var(--ink); border-color: var(--ink); }
.jump-item:hover .jump-ico, .jump-item:focus-visible .jump-ico, .jump-item.is-active .jump-ico { color: var(--ink); }
.lhl-e, .pm-role, .sm-svc, .acard-a:hover .acard-topic { color: var(--muted-l); }
.acard-a:hover .acard-read, .art-toc li a[aria-current="true"] .lbl, .pm-contact a:hover { color: var(--ink); }
.glass-d .pm-contact a:hover { color: var(--ivory); }
.acard-f::before, .art-prog span { background: var(--ink); }
.art-lede { border-left-color: var(--ink); }
.acard-a:focus-visible, .svc-btn:focus-visible { outline-color: var(--ink); }
.halo { background: transparent; border-color: rgba(10, 10, 10, .2); }
.acard-img::before { display: none; }
.cbody .fld input:not([type="checkbox"]):not([type="radio"]), .cbody .fld textarea { background-image: linear-gradient(var(--ink), var(--ink)); }
.menu-links a[aria-current="true"] .mtxt::after, .hs-seg i::after, .hs-pg-d i.is-on { background: var(--ivory); }
.hs-ring { border-color: rgba(232, 222, 206, .6); }
.p2-brand, .wait-dot { color: inherit; }
.brand--pl, .brand--pl:hover { background: var(--ink); border-color: var(--ink); box-shadow: none; }
/* letter toggle: an ivory disc on dark, not a red one */
.lt-b { background: var(--ivory); color: var(--charcoal); }
.letter-toggle:hover .lt-b { background: var(--paper); }
/* the dots keep the red */
.tdot, .hs-stop, .i5-stop, .glass-d .pm-name .tdot, .smodal.glass-l .sm-title .tdot, .jump-acc-h .tdot, .cbody .fset-t::after { color: var(--red); }
.logo-dot, .jump-dot, .mmap-dot { fill: var(--red); }

/* CTA: ivory on dark, ink on paper; the hover deepens to paper / warm charcoal */
.btn { --cta: var(--ivory); --cta-deep: var(--paper); color: var(--charcoal); }
.btn:hover, .btn:focus-visible { color: var(--charcoal); }
.btn .btn-i { color: inherit; stroke: currentColor; }
.cbtn { background: var(--ink); color: var(--paper); }
.cbtn:hover { background: var(--warm); }
#c-submit .spinner { border-color: rgba(246, 245, 240, .4); border-top-color: var(--paper); }

/* ---------- 55. Logo: the dot leaps (≈1s), then rests (≈3.5s). Letters never move. ---------- */
.nav-logo .nav-dot, .menu-logo .nav-dot { transform-box: fill-box; transform-origin: 50% 100%; animation: none; }
@media (prefers-reduced-motion: no-preference) {
  .nav-logo .nav-dot, .menu-logo .nav-dot { animation: hop-leap 4.5s linear 1.2s infinite both; }
}
@keyframes hop-leap {
  /* 1s of 4.5s = 22.2% */
  0%     { transform: translate3d(0, 0, 0) scale(1, 1);          animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  4%     { transform: translate3d(0, 0, 0) scale(1.18, .82);     animation-timing-function: cubic-bezier(.2, .7, .3, 1); }   /* anticipation */
  6.2%   { transform: translate3d(0, -18%, 0) scale(.86, 1.16);  animation-timing-function: cubic-bezier(.25, .6, .4, 1); }  /* takeoff stretch */
  11.1%  { transform: translate3d(0, -95%, 0) scale(.97, 1.03);  animation-timing-function: cubic-bezier(.55, 0, .85, .4); } /* apex */
  16.4%  { transform: translate3d(0, 0, 0) scale(1.22, .78);     animation-timing-function: cubic-bezier(.3, .7, .4, 1); }   /* landing squash */
  19.1%  { transform: translate3d(0, -9%, 0) scale(.96, 1.05);   animation-timing-function: cubic-bezier(.5, 0, .5, 1); }   /* recovery bounce */
  22.2%, 100% { transform: translate3d(0, 0, 0) scale(1, 1); }
}

/* ---------- 56. Palette roles, refined: charcoal frames the page (nav, menu, footer), warm charcoal carries dark content ---------- */
html #site-foot, html #site-foot.ink { background: var(--charcoal) !important; }
.globes.ink, .globes { background: var(--warm); }
.globe-tip { background: rgba(21, 21, 21, .96); }
::selection { background: var(--ivory); color: var(--ink); }
.ink ::selection, .inkrun ::selection, #site-foot ::selection, .globes ::selection, .nav ::selection, .menu ::selection { background: var(--ivory); color: var(--charcoal); }

/* ---------- 57. Tighter hand-off from the logos into How we do it ---------- */
.who { padding-bottom: calc(24px + 16 * var(--t)); }
#approach.jump { padding-top: calc(72px + 48 * var(--t)); }

/* ---------- 58. Hero, covers and intro in charcoal (one black with the nav and footer); globe labels a step larger ---------- */
:root { --rug-c: var(--charcoal); }
.inkrun, .ink { background-color: var(--charcoal); }
.i5-bg { background-color: var(--charcoal); }
.globes.ink, .globes { background: var(--warm); }
.globe-l { font-size: 13px; letter-spacing: .18em; color: rgba(232, 222, 206, .7); }
@media (max-width: 1023px) { .globe-l { font-size: 12px; } }

/* ---------- 59. Nav CTA — "Let's make the leap (premium)", from Figma 109:961, in the brand palette ----------
   Glass pill: ivory 4% fill, ivory 30% hairline, 16px backdrop blur, 14/22/14/20 padding, 12px gap,
   7px HOP-red dot, Instrument Sans Medium 14 (+1%), 14px arrow at 1.3 stroke. */
.pcta {
  display: none; align-items: center; gap: 12px; padding: 14px 22px 14px 20px; border-radius: 999px;
  background: rgba(232, 222, 206, .04); border: 1px solid rgba(232, 222, 206, .3);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  color: var(--ivory); font-family: var(--sans); font-style: normal; font-weight: 500; font-size: 14px; line-height: 1.2; letter-spacing: .01em;
  text-decoration: none; white-space: nowrap; -webkit-tap-highlight-color: transparent;
  transition: background-color .45s ease, border-color .45s ease;
}
@media (min-width: 1024px) { .pcta.nav-cta { display: inline-flex; } }
.pcta-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--red); transform-origin: 50% 100%; }
.pcta-t { display: block; }
.pcta-i { flex: none; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; transition: transform .5s cubic-bezier(.65, 0, .35, 1); }
.pcta:hover, .pcta:focus-visible { background: rgba(232, 222, 206, .09); border-color: rgba(232, 222, 206, .6); }
.pcta:hover .pcta-i, .pcta:focus-visible .pcta-i { transform: translate3d(3px, 0, 0); }
.pcta:focus-visible { outline: 1px solid var(--ivory); outline-offset: 4px; }
.pcta:active { background: rgba(232, 222, 206, .14); }
@media (prefers-reduced-motion: no-preference) {
  /* the dot answers the logo: a tiny hop half a second after the logo's dot lands, on the same 4.5s beat */
  .pcta-dot { animation: pcta-hop 4.5s linear 1.95s infinite both; }
  /* and hops right away on hover */
  .pcta:hover .pcta-dot, .pcta:focus-visible .pcta-dot { animation: pcta-hop-now .75s linear both; }
}
@keyframes pcta-hop {
  0%    { transform: translate3d(0, 0, 0) scale(1, 1);        animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  3%    { transform: translate3d(0, 0, 0) scale(1.25, .78);   animation-timing-function: cubic-bezier(.2, .7, .3, 1); }
  8%    { transform: translate3d(0, -130%, 0) scale(.9, 1.1); animation-timing-function: cubic-bezier(.55, 0, .85, .4); }
  12.5% { transform: translate3d(0, 0, 0) scale(1.25, .78);   animation-timing-function: cubic-bezier(.3, .7, .4, 1); }
  15%   { transform: translate3d(0, -12%, 0) scale(.96, 1.04); animation-timing-function: cubic-bezier(.5, 0, .5, 1); }
  17%, 100% { transform: translate3d(0, 0, 0) scale(1, 1); }
}
@keyframes pcta-hop-now {
  0%   { transform: translate3d(0, 0, 0) scale(1, 1);        animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  18%  { transform: translate3d(0, 0, 0) scale(1.25, .78);   animation-timing-function: cubic-bezier(.2, .7, .3, 1); }
  48%  { transform: translate3d(0, -130%, 0) scale(.9, 1.1); animation-timing-function: cubic-bezier(.55, 0, .85, .4); }
  74%  { transform: translate3d(0, 0, 0) scale(1.25, .78);   animation-timing-function: cubic-bezier(.3, .7, .4, 1); }
  88%  { transform: translate3d(0, -12%, 0) scale(.96, 1.04); animation-timing-function: cubic-bezier(.5, 0, .5, 1); }
  100% { transform: translate3d(0, 0, 0) scale(1, 1); }
}

/* ==========================================================================
   60. Footer, modernised: statement + CTA first, a quiet sans grid, the wordmark as the closing image
   ========================================================================== */
#site-foot { padding-top: calc(72px + 56 * var(--t)); padding-bottom: 0; overflow: hidden; }
#site-foot .f-statement { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px 48px; flex-wrap: wrap; padding-bottom: calc(48px + 32 * var(--t)); border-bottom: 1px solid rgba(232, 222, 206, .12); }
#site-foot .f-statement .foot-score { margin: 0; padding: 0; border: 0; max-width: 15em; font-size: calc(34px + 30 * var(--t)); line-height: 1.04; letter-spacing: -0.02em; }
#site-foot .f-cta { display: inline-flex; flex: none; }
/* the grid */
#site-foot .foot-top { display: grid; grid-template-columns: 1.3fr 2.7fr; gap: 48px; margin: 0; padding: calc(40px + 24 * var(--t)) 0; }
#site-foot .foot-brand { display: flex; flex-direction: column; gap: 24px; }
#site-foot .foot-say { margin: 0; max-width: 18em; font-family: var(--sans); font-size: 15px; line-height: 1.5; color: var(--muted-d); }
#site-foot .foot-socials { gap: 10px; }
#site-foot .foot-social { width: 40px; height: 40px; border-color: rgba(232, 222, 206, .2); transition: border-color .3s ease, background-color .3s ease; }
#site-foot .foot-social svg { width: 16px; height: 16px; }
#site-foot .foot-social:hover, #site-foot .foot-social:focus-visible { border-color: rgba(232, 222, 206, .6); background: rgba(232, 222, 206, .06); }
#site-foot .foot-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin: 0; }
#site-foot .fcol { min-width: 0; }
#site-foot .fcol-h, #site-foot .fcol--hop .fcol-h { margin: 0 0 18px; font-family: var(--sans); font-style: normal; font-weight: 500; font-size: 11px; line-height: 1.4; letter-spacing: .18em; text-transform: uppercase; color: var(--muted-d); }
#site-foot .fcol ul { display: grid; gap: 12px; margin: 0; padding: 0; }
#site-foot .fcol a { font-family: var(--sans); font-style: normal; font-size: 15px; line-height: 1.4; color: var(--ivory); text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .45s cubic-bezier(.65, 0, .35, 1); padding-bottom: 2px; }
#site-foot .fcol a:hover, #site-foot .fcol a:focus-visible { color: var(--ivory); text-decoration: none; background-size: 100% 1px; }
#site-foot .fcol li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
#site-foot .fc-city { display: inline; margin: 0; font-size: 10px; letter-spacing: .18em; }
/* House of Poland heading is a link: keep it a label with an arrow */
#site-foot .fcol--hop .fcol-hl { display: inline-flex; gap: 8px; font-size: 11px; letter-spacing: .18em; color: var(--ivory); background: none; padding: 0; }
#site-foot .fcol--hop .fcol-hl:hover svg { transform: translate3d(3px, 0, 0); }
#site-foot .fcol-note { margin: 0; font-family: var(--sans); font-size: 14px; line-height: 1.55; color: var(--muted-d); max-width: 30ch; }
/* bottom bar */
#site-foot .foot-score + .foot-bottom, #site-foot .foot-bottom { margin: 0; padding: 20px 0; border-top: 1px solid rgba(232, 222, 206, .12); }
#site-foot .foot-legal, #site-foot .to-top { font-size: 11px; letter-spacing: .16em; color: var(--muted-d); }
#site-foot .foot-legal a, #site-foot .foot-legal .linkbtn, #site-foot .to-top { transition: color .3s ease; }
#site-foot .foot-legal a:hover, #site-foot .foot-legal .linkbtn:hover, #site-foot .to-top:hover { color: var(--ivory); }
#site-foot .foot-thanks { font-family: var(--serif); font-style: italic; font-size: 16px; color: var(--ivory); }
/* the closing wordmark, edge to edge, sitting on the bottom of the page */
#site-foot .f-mark { display: block; margin: calc(8px + 16 * var(--t)) 0 calc(-0.14 * (100vw - 2 * var(--pad)) * 268 / 516); line-height: 0; }
#site-foot .f-mark svg { display: block; width: 100%; height: auto; fill: var(--ivory); }
#site-foot .f-mark:focus-visible { outline: 1px solid var(--ivory); outline-offset: 8px; }
/* old pieces the new layout replaces */
#site-foot .foot-logo { display: none; }
@media (max-width: 1023px) {
  #site-foot .foot-top { grid-template-columns: 1fr; gap: 40px; }
  #site-foot .foot-links { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
  #site-foot .fcol--hop { grid-column: 1 / -1; }
  #site-foot .f-statement .foot-score { font-size: 34px; }
}
@media (max-width: 599px) {
  #site-foot .f-statement { align-items: flex-start; flex-direction: column; }
  #site-foot .foot-links { grid-template-columns: 1fr; }
  #site-foot .fcol li { justify-content: flex-start; }
  #site-foot .foot-bottom { display: grid; gap: 14px; }
}
#site-foot .foot-say { max-width: 24em; }
#site-foot .fcol .fcol-h { display: block; }
@media (max-width: 1023px) {
  #site-foot .fcol ul { gap: 0; }
  #site-foot .fcol li { min-height: 44px; align-items: center; border: 0; padding: 0; }
  #site-foot .fcol a { min-height: 0; padding: 4px 0; font-size: 16px; }
  #site-foot .fcol a::after { content: none; }
  #site-foot .fcol-h { margin-bottom: 6px; }
}
#site-foot .fcol li > .fc-city { display: inline-block; align-self: center; margin: 0; min-height: 0; line-height: 1; }

/* ==========================================================================
   61. Nov 8 polish: article hero gap, partner cards stacked, red key phrases, send button as the nav pill, smaller footer mark
   ========================================================================== */
/* individual articles: breathing room between the hero image and the text */
.art-hero-w { padding-bottom: calc(48px + 40 * var(--t)); }
/* contact: portrait first, then name and city beneath it */
.cperson-n {
  grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; grid-template-areas: "av" "name" "city";
  row-gap: 0; align-items: start; justify-items: start; margin-bottom: 20px;
}
.cperson-av { width: 100%; max-width: 240px; height: auto; aspect-ratio: 4 / 5; margin-bottom: 20px; }
.cperson-nm { align-self: start; }
.cperson-c { align-self: start; margin-top: 8px; }
@media (max-width: 599px) { .cperson-av { width: 100%; max-width: 200px; height: auto; } }
/* the two key phrases read in HOP red */
#who-h .red, #jump-title .red { color: var(--red); }
/* send button: the nav pill, on paper */
.pcta.pcta--light, #c-submit.pcta--light {
  display: inline-flex; gap: 12px; padding: 18px 28px 18px 24px; min-height: 0; width: auto;
  background: rgba(10, 10, 10, .03); border: 1px solid rgba(10, 10, 10, .28); color: var(--ink);
  font-size: 15px; cursor: pointer;
}
.pcta--light:hover, .pcta--light:focus-visible { background: rgba(10, 10, 10, .06); border-color: rgba(10, 10, 10, .6); }
.pcta--light:active { background: rgba(10, 10, 10, .1); }
.pcta--light:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }
#c-submit.pcta--light .spinner { width: 14px; height: 14px; border: 1.5px solid rgba(10, 10, 10, .25); border-top-color: var(--ink); }
#c-submit.pcta--light.busy .pcta-i { display: none; }
#c-submit.pcta--light[disabled] { opacity: .55; cursor: default; }
@media (max-width: 620px) { #c-submit.pcta--light { width: auto; } }
/* footer wordmark: a signature, not a billboard */
#site-foot .f-mark { width: calc(120px + 80 * var(--t)); margin: calc(32px + 24 * var(--t)) 0 calc(40px + 24 * var(--t)); }
.pmodal .pm-av { object-position: 50% 26%; }
.cperson-av { object-position: 50% 50%; }
/* footer wordmark: small, under the social icons */
#site-foot .foot-brand .f-mark { width: calc(88px + 24 * var(--t)); margin: 8px 0 0; }
/* contact: portrait spans the full card width, flush with the divider lines and the copy column */
.cperson-n { justify-items: stretch; }
.cperson-av { width: 100%; max-width: none; }
@media (max-width: 599px) { .cperson-av { max-width: none; } }

/* ---------- 62. Phones: service rows use the same + / x as desktop; no sticky tap colour; menu CTA is the nav pill; logos a touch smaller ---------- */
@media (max-width: 1023px) {
  .jump-plus { width: 32px; height: 32px; }
  .jump-plus svg { display: block; }
  .jump-plus::before { content: none; }
  .jump-item[aria-expanded="true"] .jump-plus { transform: rotate(45deg); }
}
/* touch screens keep :hover after a tap, which left closed rows with a filled circle and a hidden icon */
@media (hover: none) {
  .jump-item:hover:not(.is-active) .jump-plus { background: transparent; border-color: rgba(10, 10, 10, .25); transform: none; }
  .jump-item:hover:not(.is-active) .jump-plus svg { stroke: var(--ink); }
  .jump-item:hover:not(.is-active) .jump-ico { color: rgba(10, 10, 10, .55); }
  .jump-item:hover:not(.is-active) .jump-item-t { color: inherit; }
  .jump-item.is-active .jump-plus svg { stroke: var(--ivory); }
  .jump-item { -webkit-tap-highlight-color: transparent; }
}
/* menu: the nav pill, full width */
.menu-bottom .pcta--menu { display: flex; justify-content: center; width: 100%; padding: 18px 24px; font-size: 16px; gap: 14px; }
.menu-bottom .pcta--menu .pcta-dot { width: 8px; height: 8px; }
/* brands: about 15% smaller */
.logo img { height: calc((var(--k0) + (var(--h) - 22) * var(--k1)) * .85); }
.logos-list, .logos-track { height: calc((var(--k0) + 36 * var(--k1)) * .85 + 24px); }
/* footer contact: city sits under its email */
#site-foot .fcol li:has(> .fc-city) { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 6px; }
#site-foot .fcol li > .fc-city { align-self: flex-start; }
#site-foot .fcol ul:has(.fc-city) { gap: 20px; }
@media (max-width: 1023px) {
  #site-foot .fcol li:has(> .fc-city) { min-height: 0; padding: 6px 0; gap: 2px; }
  #site-foot .fcol ul:has(.fc-city) { gap: 8px; }
}
/* partners photo: a slightly wider crop (top and bottom trimmed) so it takes less of the screen; dots re-placed on the chests */
@media (min-width: 1024px) {
  .duo { aspect-ratio: 16 / 9; }
  .duo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
  .pdot--david { --y: 58.3%; }
  .pdot--philip { --y: 61.3%; }
}

/* ---------- 63. Contact: sent state replaces the form ---------- */
.form[hidden], #contact-form[hidden] { display: none !important; }
.sent { gap: 0; padding: calc(32px + 16 * var(--t)) 0 0; border-top: 1px solid rgba(10, 10, 10, .14); }
.sent-k { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 calc(20px + 8 * var(--t)); }
.sent .sent-dot { position: static; width: 8px; height: 8px; border-radius: 50%; background: var(--red); flex: none; animation: none; }
.sent-h { font-size: calc(40px + 24 * var(--t)); line-height: 1.04; letter-spacing: -.025em; margin: 0; }
.sent-lead { margin: calc(16px + 4 * var(--t)) 0 0; font-family: var(--sans); font-size: calc(17px + 2 * var(--t)); line-height: 1.5; color: var(--muted-l); max-width: 36ch; }
.sent-lead strong { font-weight: 400; font-style: normal; color: var(--ink); overflow-wrap: anywhere; }
.sent-demo { margin-top: 12px; }
.sent-actions { margin-top: calc(32px + 8 * var(--t)); gap: 16px 28px; align-items: center; }
.sent-actions .pcta--light { display: inline-flex; }
.sent-again { font-size: 15px; }
@media (max-width: 620px) { .sent-actions { flex-direction: column; align-items: flex-start; } }
.sent-again { font-family: var(--sans); font-style: normal; font-size: 15px; min-height: 0; padding-bottom: 3px; border-bottom-color: rgba(10, 10, 10, .4); }
.sent-again:hover { border-bottom-color: var(--ink); }