/* ============================================================
   X MARKS THE SPOT · on-brand site (Tom Goodwin's toolkit)
   Black + white + one accent (green / blue / purple, switchable)
   ============================================================ */

:root{
  --ink:#0b0b0b;
  --paper:#ffffff;
  --grey:#6c6c6c;
  --line:#e7e7e7;
  --dot:#c4c4c4;
  --accent:#BB29BB;          /* purple default (official); JS swaps */
  --accent-ink:#ffffff;       /* text on accent */
  --display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --sans:"Inter",system-ui,sans-serif;
  --mono:"Space Mono",ui-monospace,monospace;
  --maxw:1180px;
  --ease:cubic-bezier(.4,.05,.1,1);
}
/* official XMTS brand colours */
body[data-accent="purple"]{--accent:#BB29BB}
body[data-accent="blue"]{--accent:#005EB8}
body[data-accent="green"]{--accent:#00AB84}
body[data-accent="gold"]{--accent:#A98C23}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--sans);color:var(--ink);background:var(--paper);line-height:1.6;-webkit-font-smoothing:antialiased}   /* NOTE: no overflow-x:hidden here - it breaks position:fixed (the sticky header) on iOS Safari. Wide content is clipped at its own container instead. */
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--accent);color:#fff}

/* dotted rule used across the brand */
.dotted{border-bottom:2px dotted var(--dot)}

/* X marks pulled from Tom's toolkit */
.xmark{width:1.1em;height:1.1em;display:inline-block;vertical-align:-0.18em;object-fit:contain}

/* shared type */
.eyebrow{font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);display:inline-flex;align-items:center;gap:.6rem;margin-bottom:1.1rem}
.eyebrow .xeb{width:20px;height:20px;flex:0 0 auto;display:block;color:var(--ink)}/* section eyebrow X: thin, elegant, borderless inline SVG */
.sec-title{font-family:var(--display);font-weight:800;font-size:clamp(1.25rem,2vw,1.5rem);line-height:1.1;letter-spacing:-.02em}
.sec-intro{margin-top:1.1rem;font-size:1.08rem;color:var(--grey);max-width:60ch}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--display);font-weight:700;font-size:.95rem;padding:.9rem 1.5rem;border:2px solid var(--ink);cursor:pointer;transition:transform .25s var(--ease),background .25s,color .25s,border-color .25s;background:none;color:var(--ink)}
.btn--solid{background:var(--accent);border-color:var(--accent);color:#fff}
.btn--solid:hover{transform:translateY(-2px);filter:brightness(1.06)}
.btn--line:hover{background:var(--ink);color:#fff;transform:translateY(-2px)}
.btn--full{width:100%;justify-content:center;margin-top:.4rem}

/* ============ NAV ============ */
.nav{position:fixed;inset:0 0 auto 0;z-index:60;display:flex;align-items:center;gap:1.4rem;
  padding:.8rem clamp(1rem,4vw,2.5rem);background:rgba(255,255,255,.93);backdrop-filter:blur(8px);border-bottom:2px dotted var(--dot)}
.brand{display:flex;align-items:center;gap:.6rem;margin-right:auto}
.brand__logo{width:42px;height:42px}
.brand__type{font-family:var(--display);font-weight:800;font-size:1.05rem;line-height:1;display:flex;flex-direction:column;gap:.2rem}
.brand__type small{font-family:var(--mono);font-size:.54rem;letter-spacing:.12em;text-transform:uppercase;color:var(--grey);font-weight:400}
.nav__links{display:flex;align-items:center;gap:1.7rem}
.nav__links a{font-size:.9rem;font-weight:500;position:relative}
.nav__links a:not(.nav__cta)::after{content:"";position:absolute;left:0;bottom:-5px;width:0;height:2px;background:var(--accent);transition:width .3s var(--ease)}
.nav__links a:not(.nav__cta):hover::after{width:100%}
.nav__cta{border:2px solid var(--accent);color:var(--accent);padding:.45rem 1rem;font-weight:700;transition:background .25s,color .25s}
.nav__cta:hover{background:var(--accent);color:#fff}
.accent-switch{display:flex;gap:.4rem}
.accent-switch button{width:18px;height:18px;border-radius:50%;border:2px solid var(--paper);outline:1px solid var(--line);background:var(--swatch);cursor:pointer;padding:0;transition:transform .2s}
.accent-switch button:hover{transform:scale(1.18)}
.accent-switch button.is-on{outline:2px solid var(--ink);transform:scale(1.18)}
.nav__toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px}
.nav__toggle span{width:26px;height:2px;background:var(--ink);transition:.3s}

/* ============ HERO ============ */
/* full-viewport hero; columns cap so on wide screens the copy + art stay together and centred (no gappy middle) */
.hero{display:grid;grid-template-columns:minmax(0,44rem) minmax(0,44rem);gap:clamp(1.5rem,4vw,3.5rem);align-items:center;justify-content:center;
  min-height:100vh;min-height:100svh;
  padding:clamp(6rem,11vh,9rem) clamp(1.5rem,5vw,4.5rem) clamp(3rem,6vh,5rem)}
.hero__title{font-family:var(--display);font-weight:900;font-size:clamp(2.8rem,6.6vw,5.7rem);line-height:.95;letter-spacing:-.035em}
.hero__lead{margin-top:1.4rem;font-size:clamp(1.05rem,1.6vw,1.3rem);color:var(--grey);max-width:42ch}
.hero__actions{display:flex;gap:1rem;flex-wrap:wrap;margin-top:2rem}
.hero__art img{width:100%;max-width:520px;margin:0 auto}

/* ============ TICKER ============ */
.ticker{background:var(--ink);color:var(--paper);overflow:hidden;padding:.9rem 0;border-top:2px dotted #333;border-bottom:2px dotted #333}
.ticker__row{display:flex;align-items:center;gap:2rem;white-space:nowrap;width:max-content;will-change:transform;backface-visibility:hidden;-webkit-backface-visibility:hidden}   /* transform set per-frame by JS (no CSS animation - it vanished on iOS) */
.ticker__row span{font-family:var(--mono);font-size:.95rem;letter-spacing:.16em;text-transform:uppercase}
.ticker__row .xmark{width:24px;height:24px;filter:invert(1)}

/* ============ SECTION SHELL ============ */
.section{max-width:var(--maxw);margin:0 auto;padding:clamp(6.5rem,10vw,9.5rem) clamp(1rem,4vw,2.5rem) clamp(4rem,8vw,7rem);position:relative}
.sec-head{max-width:760px;margin-bottom:2.8rem;position:relative}
.contact__intro{position:relative}
/* big faded section number: breaks the left margin (hangs out left) and rises into the
   gap above, so its lower edge sits roughly behind the eyebrow. Eyebrow + title stay
   left-aligned to the section. */
.sec-num{position:absolute;left:calc(clamp(1rem,4vw,2.5rem) * -1);top:1.7rem;transform:translateY(-100%);font-family:var(--display);font-weight:800;font-size:clamp(5rem,10vw,9.5rem);line-height:.78;letter-spacing:-.04em;color:#ececec;z-index:0;user-select:none;pointer-events:none}
.sec-head > .eyebrow,.contact__intro > .eyebrow{position:relative;z-index:1}

/* ============ APPROACH ============ */
.approach{border-bottom:2px dotted var(--dot)}
/* the approach text explains what IFR means, so keep the title + body close (and give the longer title room) */
.approach .sec-head{max-width:calc(100% - 330px);margin-bottom:1.2rem}/* reserve the rabbit's space so the title never overlaps it */
.approach__body{max-width:62ch;font-size:1.08rem;line-height:1.7}/* match the body size used elsewhere (.sec-intro) */
.approach__body p{margin-bottom:1.3rem}
.approach__body p:first-child::first-letter{font-family:var(--mono);font-weight:700;font-size:4.15rem;line-height:.8;float:left;margin:.2rem .55rem 0 0;color:var(--accent)}
.approach__sign{font-family:var(--mono);font-size:.85rem;color:var(--grey);text-transform:uppercase;letter-spacing:.08em}
.obj{position:absolute;pointer-events:none;opacity:.96}
.obj--approach{width:280px;right:clamp(1rem,4vw,3rem);top:clamp(4rem,8vw,7rem)}

/* ============ GREAT IDEAS ============ */
.ideas__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.idea{border:2px solid var(--ink);padding:1.8rem 1.6rem;display:flex;flex-direction:column;gap:.7rem;transition:transform .35s var(--ease),box-shadow .35s}
.idea:hover{transform:translateY(-6px);box-shadow:10px 10px 0 var(--accent)}
.idea__mark{height:46px}
.idea__mark .xmark{width:42px;height:42px}
.idea h3{font-family:var(--display);font-weight:800;font-size:1.3rem;line-height:1.1}
.idea p{font-size:.96rem;color:var(--grey);flex:1}
.idea__tag{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.idea--muted{background:#fafafa}

/* ============ INTERNATIONAL ============ */
.intl{border-top:2px dotted var(--dot)}
.map{border:2px solid var(--ink);padding:clamp(1rem,3vw,2rem);background:#fff}
.map svg{width:100%;height:auto;display:block;overflow:visible}
.map .dotland circle{fill:#b9beba}
.map .dotland{opacity:1}
.map .pins .pin line{stroke:var(--accent);stroke-width:5;stroke-linecap:round}
.map .pins .pin .halo{fill:var(--accent);opacity:.14}
.map .pins .pin .dot{fill:var(--accent)}
.map .pins .pin text{font-family:var(--mono);font-size:13px;font-weight:700;fill:var(--ink);text-anchor:middle;letter-spacing:.05em}
.map .pins .pin{animation:pindrop .5s var(--ease) backwards}
@keyframes pindrop{from{opacity:0;transform:translateY(-6px)}}
/* two rows of six: Europe on top, rest of the world below, standard-size text */
.intl__list{list-style:none;display:grid;grid-template-columns:repeat(6,1fr);gap:.6rem;margin-top:1.6rem}
.intl__list li{font-family:var(--mono);font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;border:2px solid var(--ink);padding:.6rem .5rem;text-align:center;white-space:nowrap}
@media (max-width:760px){.intl__list{grid-template-columns:repeat(2,1fr)}}
@media (orientation:landscape) and (max-height:500px){.intl__list{grid-template-columns:repeat(3,1fr)}}

/* ============ TOM ============ */
.tom{border-top:2px dotted var(--dot)}
.tom__grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(2rem,6vw,4.5rem);align-items:center}
.tom__photo{margin:0}
.tom__placeholder{aspect-ratio:4/5;border:2px solid var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;background:repeating-linear-gradient(45deg,#fafafa,#fafafa 12px,#f1f1f1 12px,#f1f1f1 24px)}
.tom__placeholder .xmark{width:64px;height:64px}
.tom__placeholder span{font-family:var(--display);font-weight:800;font-size:1.1rem;letter-spacing:.02em}
.tom__placeholder small{font-family:var(--mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.1em;color:var(--grey)}
.tom__photo img.tom-real{width:100%;aspect-ratio:4/5;object-fit:cover;border:2px solid var(--ink)}
.tom__role{font-family:var(--mono);font-size:.85rem;text-transform:uppercase;letter-spacing:.1em;color:var(--accent);margin:.3rem 0 1rem}
.tom__lead{font-size:1.15rem;max-width:44ch}
.cv{list-style:none;margin:1.6rem 0;border-top:2px dotted var(--dot)}
.cv li{display:flex;align-items:baseline;gap:1rem;padding:.8rem 0;border-bottom:2px dotted var(--dot);font-size:1.02rem}
.cv li span{font-family:var(--mono);font-weight:700;font-size:.82rem;min-width:78px;color:var(--accent)}
.cv li em{font-style:normal;color:var(--grey)}
.tom__li{font-family:var(--display);font-weight:700;color:var(--accent);border-bottom:2px solid var(--accent);padding-bottom:2px}

/* ============ CONTACT ============ */
.contact{border-top:2px dotted var(--dot)}
.contact__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,4.5rem);align-items:start}
/* desktop: business card fills its column width and grows to bottom-align with the contact form
   (.contact prefix keeps these winning over the later .bizcard base rules) */
@media (min-width:921px) and (min-height:600px){
  .contact .contact__grid{align-items:stretch}
  .contact .contact__intro{display:flex;flex-direction:column}
  .contact .bizcard{max-width:none;flex:1 1 auto;display:flex;flex-direction:column}
  .contact .bizcard__deck{flex:1 1 auto}
  .contact .bizcard__slide .cardobj{height:clamp(108px,15vh,160px)}
  .contact .bizcard__slide .bizcard__mark{width:clamp(124px,16vh,170px);height:clamp(124px,16vh,170px)}
}
.contact__lead{font-size:1.12rem;color:var(--grey);margin:.4rem 0 1.8rem;max-width:40ch}
.contact__details{list-style:none;border-top:2px dotted var(--dot)}
.contact__details li{display:flex;gap:1rem;align-items:baseline;padding:.85rem 0;border-bottom:2px dotted var(--dot)}
.contact__details span{font-family:var(--mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.1em;color:var(--grey);min-width:80px}
.contact__details a{font-weight:600;color:var(--ink);border-bottom:2px solid var(--accent)}
.obj--contact{position:static;width:120px;margin-top:2rem}

.contact__form{border:2px solid var(--ink);padding:clamp(1.4rem,3vw,2.2rem);position:relative;background:#fff}
.field{margin-bottom:1.1rem}
.field label{display:block;font-family:var(--mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;margin-bottom:.45rem}
.field label small{text-transform:none;letter-spacing:0;color:var(--grey)}
.field input,.field select,.field textarea{width:100%;padding:.8rem .9rem;font-family:var(--sans);font-size:.95rem;color:var(--ink);background:#fff;border:2px solid var(--line);transition:border-color .2s}
.field textarea{resize:vertical;min-height:90px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent)}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:#cc2b2b;background:#fdf2f2}
.field__error{display:block;font-family:var(--mono);font-size:.68rem;color:#cc2b2b;margin-top:.3rem;min-height:1em}
.contact__small{font-family:var(--mono);font-size:.66rem;color:var(--grey);text-align:center;margin-top:1rem}
.contact__success{position:absolute;inset:0;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:.8rem;padding:2rem;animation:pop .4s var(--ease)}
.contact__success[hidden]{display:none}
@keyframes pop{from{opacity:0;transform:scale(.97)}}
.contact__success-x{width:70px;height:70px}
.contact__success h3{font-family:var(--display);font-weight:900;font-size:1.9rem}
.contact__success p{color:var(--grey);max-width:34ch}

/* ============ FOOTER ============ */
.footer{border-top:2px dotted var(--dot);padding:clamp(2.5rem,5vw,3.5rem) clamp(1rem,4vw,2.5rem) 2rem}
.footer__top{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap;padding-bottom:1.8rem;border-bottom:2px dotted var(--dot)}
.footer__logo{width:54px;height:54px}
.footer__strap{margin-right:auto;display:flex;flex-direction:column}
.footer__strap strong{font-family:var(--display);font-weight:800;font-size:1.1rem}
.footer__strap span{font-family:var(--mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.1em;color:var(--grey)}
.footer__links{display:flex;gap:1.3rem;flex-wrap:wrap}
.footer__links a{font-size:.85rem;color:var(--grey)}
.footer__links a:hover{color:var(--accent)}
.footer__bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.6rem;margin-top:1.4rem;font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;color:var(--grey)}

/* ============ RESPONSIVE ============ */
@media (max-width:920px){
  .ideas__grid{grid-template-columns:1fr}
  .tom__grid{grid-template-columns:1fr;max-width:520px}
  .contact__grid{grid-template-columns:1fr}
  .obj--approach{position:static;width:110px;margin-top:1.5rem}
  .approach .sec-head{max-width:none}/* rabbit is in-flow here, so the title can use full width */
}
/* hero: stack only on portrait phones/tablets; keep side-by-side in landscape (incl. narrow desktop windows) */
@media (max-width:920px) and (orientation:portrait){
  .hero{grid-template-columns:1fr;text-align:left}
  .hero__art{order:-1;max-width:380px;margin:0 auto}
}
@media (max-width:900px){
  .nav{backdrop-filter:none;background:#fff}
  .nav__links{position:fixed;top:0;right:0;height:100dvh;width:min(82vw,320px);background:var(--paper);flex-direction:column;justify-content:center;align-items:flex-start;gap:1.6rem;padding:2rem;transform:translateX(100%);transition:transform .4s var(--ease);box-shadow:-20px 0 60px rgba(0,0,0,.15);border-left:2px dotted var(--dot);overflow-y:auto;z-index:65}
  .nav__links.open{transform:translateX(0)}
  .nav__links a{font-size:1.15rem}
  .nav__toggle{display:flex;z-index:70}
  .accent-switch{margin-left:auto}
  .map .pins .pin text{font-size:20px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}
/* V3: hero renders full size (no zoom) */

/* ============ ROUND-2 ADDITIONS ============ */
/* hero brand-world composition (replaces single graphic) */
/* columns sized to the marks (not 1fr) so the horizontal spacing matches the vertical (was over-spread) */
.hero__art{display:grid;grid-template-columns:repeat(3,minmax(0,140px));grid-auto-rows:1fr;gap:.9rem;align-content:center;justify-content:center}
.hero__art img{width:100%;height:auto;max-height:210px;object-fit:contain;align-self:center;justify-self:center}
/* desktop: JS sets the art's height to the copy block; aspect-ratio keeps it square (natural 3x3) so the
   composition isn't stretched, and it right-aligns to the page edge */
.hero__art.fit{aspect-ratio:1;justify-self:center}
.hero__art.fit img{height:100%;max-height:none}
.hero__x--e{filter:opacity(.22)}   /* the beaded dotted X reads heavy in black; lighten to grey. filter (not opacity) so the entrance reveal, which animates the opacity property, can't override it */
@media (max-width:920px){.hero__art{margin:0 auto}}

/* clients wall */
.clients__grid{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);border-top:2px solid var(--ink);border-left:2px solid var(--ink)}
.client{position:relative;font-family:var(--display);font-weight:700;font-size:.95rem;color:var(--ink);display:flex;align-items:center;justify-content:center;text-align:center;padding:1.3rem .8rem;min-height:102px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transition:background .25s,color .25s}
.client:hover{background:var(--accent);color:#fff}
.clients__note{margin-top:1.2rem;font-family:var(--mono);font-size:.72rem;color:var(--grey)}
/* portrait phones: 2 across · landscape phones: 3 across · desktop: 5 across */
@media (max-width:760px){.clients__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (orientation:landscape) and (max-height:500px){.clients__grid{grid-template-columns:repeat(3,1fr)}}

/* business card (founder + contact details) */
.bizcard{margin-top:1.8rem;border:2px solid var(--ink);background:#fff;max-width:430px}
/* business-card "art" half: a horizontal carousel of the three card designs */
.bizcard__deck{position:relative;overflow:hidden;background:#fafafa;border-bottom:2px dotted var(--dot);min-height:214px}
.bizcard__track{display:flex;height:100%;transition:transform .85s cubic-bezier(.65,0,.2,1)}
.bizcard__slide{position:relative;flex:0 0 100%;display:flex;align-items:center;justify-content:center;min-height:214px;padding:1.4rem;background:#fafafa}/* opaque ground inside the (transformed) track so multiply can drop the photos' white boxes */
.bizcard__slide .cardobj{height:108px;width:auto;flex:0 0 auto;mix-blend-mode:multiply}
.bizcard__slide .bizcard__mark{position:relative;z-index:2;width:124px;height:124px;margin:0 -24px;flex:0 0 auto;mix-blend-mode:multiply}

/* V3: brand-world objects are static (no key/coin/gramophone animation) */
.bizcard__details{padding:1.7rem 1.4rem 1.4rem;font-family:var(--mono);font-size:.88rem;line-height:1.75}
.bizcard__name{font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.bizcard__role{color:var(--grey);margin-bottom:.7rem}
.bizcard__details a{color:var(--accent);border-bottom:1px solid var(--accent);cursor:pointer}
.bizcard__addr{color:var(--grey);margin-top:.5rem;font-size:.78rem}
.bizcard__sep{color:var(--dot)}
/* mobile landscape: business card goes side-by-side (art front left, details right), full width to match the form below */
@media (orientation:landscape) and (max-height:540px){
  .contact__grid{grid-template-columns:1fr}
  .bizcard{max-width:none;display:flex;align-items:stretch}
  .bizcard__deck{flex:1 1 50%;border-bottom:none;border-right:2px dotted var(--dot)}
  .bizcard__details{flex:1 1 50%;display:flex;flex-direction:column;justify-content:center}
}

/* map pins: X-mark images + mono label */
.map .pins text{font-family:var(--mono);font-size:13px;font-weight:700;fill:var(--ink);text-anchor:middle;letter-spacing:.05em}
@media (max-width:760px){.map .pins text{font-size:20px}}

/* keep composition/business-card objects in normal flow (override global absolute .obj) */
.hero__art .obj,.bizcard__art .obj{position:static;opacity:1}

/* clickable country tiles + map pin "ping" animation */
.intl__list .market{cursor:pointer;user-select:none;transition:background .2s,color .2s}
.intl__list .market:hover,.intl__list .market:focus-visible{background:var(--accent);color:#fff;outline:none}
.map .pins .pin{cursor:pointer}
.map .pins .pin image{transform-box:fill-box;transform-origin:center}
.map .pins .pin.active image{animation:xpop .6s var(--ease)}
@keyframes xpop{0%{transform:scale(1)}35%{transform:scale(1.5) rotate(10deg)}70%{transform:scale(1.45) rotate(-6deg)}100%{transform:scale(1) rotate(0)}}
.map .pins .ping{fill:var(--accent);opacity:0;pointer-events:none;transform-box:fill-box;transform-origin:center}
.map .pins .pin.active .ping{animation:xping .65s ease-out}
@keyframes xping{0%{opacity:.5;r:6}100%{opacity:0;r:34}}
@media (prefers-reduced-motion:reduce){.map .pins .pin.active image,.map .pins .pin.active .ping{animation:none}}

/* drop-in client logos (monochrome at rest, full colour on hover; logo if present, name fallback) */
.client__logo{max-height:72px;max-width:88%;width:auto;height:auto;object-fit:contain;filter:grayscale(1);opacity:.85;transition:filter .3s var(--ease),opacity .3s var(--ease),transform .3s var(--ease)}
/* a few logos render visually small at the shared size, so give them more room */
.client[data-slug="tetley"] .client__logo{max-height:96px;max-width:98%}
.client[data-slug="londonpride"] .client__logo{max-height:92px;max-width:98%}
.client[data-slug="royallondon"] .client__logo{max-height:92px;max-width:98%}
.client.has-logo{overflow:hidden}
.client.has-logo:hover{background:#fff;z-index:3}
/* hover: logo turns full colour, grows + lifts to make room, brand name rises in beneath it */
.client.has-logo:hover .client__logo{filter:grayscale(0);opacity:1;transform:translateY(-11px) scale(1.16)}
.client.has-logo .client__name{display:block;position:absolute;left:0;right:0;bottom:9px;margin:0;
  font-family:var(--mono);font-weight:700;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
  color:#262626;opacity:0;transform:translateY(7px);pointer-events:none;white-space:nowrap;
  transition:opacity .3s var(--ease),transform .3s var(--ease)}
.client.has-logo .client__name::before{content:"\2715";margin-right:.45em;opacity:.65}
.client.has-logo:hover .client__name{opacity:1;transform:translateY(0)}
@media (prefers-reduced-motion:reduce){.client.has-logo:hover .client__logo{transform:none}}

/* Europe cluster region label */
.map .pins .region-label{font-family:var(--mono);font-size:12px;font-weight:700;fill:var(--grey);text-anchor:middle;letter-spacing:.12em}

.bizcard__reveal{margin:0}

/* International fish-eye lens (magnified Europe) */
.map .lens-bg{fill:#fff;stroke:var(--ink);stroke-width:2.5}
.map .lens-ring{fill:none;stroke:var(--dot);stroke-width:1.5;stroke-dasharray:2 6}
.map .lens-src{fill:none;stroke:var(--ink);stroke-width:1.5;stroke-dasharray:3 5}
.map .lens-line{stroke:var(--dot);stroke-width:1.5;stroke-dasharray:3 6}
.map .lens-cap{font-size:13px;letter-spacing:.16em}

/* drop the white backgrounds on the tinted object photos (they sit on light panels) */
.bizcard__art .obj,.hero__art .obj,.obj--approach{mix-blend-mode:multiply}

/* dotted Europe inside the magnifier lens */
.map .lens-dots circle{fill:#c4c9c6}

/* ===== big pannable world map (replaces the magnifier) ===== */
.mapwin{position:relative;overflow:hidden;border:2px solid var(--ink);background:#fff;
  height:clamp(380px,62vh,600px);cursor:grab}
.mapwin.is-default{cursor:default}            /* at full zoom-out there's nothing to drag */
.mapwin.is-dragging{cursor:grabbing}
.mapbig{width:2000px;will-change:transform,width;transition:transform .35s cubic-bezier(.22,.61,.36,1),width .3s ease}
.mapbig.dragging{transition:none}             /* follow the cursor 1:1 while dragging */
.mapbig svg{width:100%;height:auto;display:block}
.mapwin__hint{position:absolute;left:12px;bottom:10px;z-index:3;font-family:var(--mono);
  font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--grey);
  background:rgba(255,255,255,.85);padding:.35rem .6rem;border:1px solid var(--line);pointer-events:none}
/* touch devices: same transform-based fit/centre as desktop (JS handles touch-drag); just no grab cursor */
@media (hover:none){
  .mapwin{cursor:default}
}
/* mobile portrait: use position:sticky (in-flow) rather than fixed - it's far more reliable on
   iOS Safari, where fixed headers can detach and scroll away */
@media (max-width:900px) and (orientation:portrait){
  .nav{position:sticky;top:0}
}
/* mobile landscape: viewport too short for a sticky/fixed header, so let it scroll away */
@media (orientation:landscape) and (max-height:540px){
  .nav{position:static}
  .hero{min-height:auto;padding-top:clamp(1.5rem,6vh,3rem)}
}

/* big-map pins (rendered 1:1 so dots/X/labels keep original size) */
.mapwin .dotland circle{fill:var(--accent)}   /* per-dot radius grows toward continent centres; opacity kept soft for cross/label readability */
.mapwin .dotland{opacity:.55}
.mapwin .pins text{font-family:var(--mono);font-size:20px;font-weight:700;fill:var(--ink);text-anchor:middle;letter-spacing:.05em}
.mapwin .pins .pin{cursor:pointer}
/* every X recoloured to brand black; the filter drops the white ground to transparent so the purple dots show through */
.mapwin .pins .pin image{filter:url(#xpurple);transform-box:fill-box;transform-origin:center;transition:transform .28s var(--ease)}
/* hover (pin or its country box): rotate + enlarge, held while hovered */
.mapwin .pins .pin:hover image,.mapwin .pins .pin:focus-visible image,.mapwin .pins .pin.hovering image{transform:scale(1.55) rotate(15deg)}
.mapwin .pins .ping{fill:var(--accent);opacity:0;transform-box:fill-box;transform-origin:center}
.mapwin .pins .pin:hover .ping,.mapwin .pins .pin.hovering .ping{animation:ping .7s ease-out}
@keyframes ping{0%{opacity:.5;transform:scale(.4)}100%{opacity:0;transform:scale(3)}}

/* map zoom controls */
.map-zoom{position:absolute;top:12px;right:12px;z-index:4;display:flex;flex-direction:column;gap:6px}
.map-zoom button{width:36px;height:36px;background:#fff;border:2px solid var(--ink);font-family:var(--display);font-weight:700;font-size:1.2rem;line-height:1;cursor:pointer;color:var(--ink);transition:background .2s,color .2s}
@media (hover:hover){.map-zoom button:hover{background:var(--accent);border-color:var(--accent);color:#fff}}

/* hover callout: a leader line out to an outlined name pill in open space (used for the tight EU cluster) */
.mapwin .pins .callout{opacity:0;transform:translateX(5px);transition:opacity .22s var(--ease),transform .22s var(--ease);pointer-events:none}
.mapwin .pins .pin:hover .callout,.mapwin .pins .pin:focus-visible .callout,.mapwin .pins .pin.hovering .callout{opacity:1;transform:translateX(0)}
.mapwin .pins .callout__line{stroke:var(--ink);stroke-width:1.4;stroke-dasharray:3 3;fill:none}
.mapwin .pins .callout__pill{fill:#fff;stroke:var(--ink);stroke-width:1.6}
.mapwin .pins .callout__txt{font-family:var(--mono);font-weight:700;font-size:14px;fill:var(--ink);letter-spacing:.04em}

.mapwin .pins .region-label{font-family:var(--mono);font-size:20px;font-weight:700;fill:var(--ink);text-anchor:middle;letter-spacing:.08em}

/* ============ ENTRANCE MOTION (active only when <html class="rv">: JS on + motion allowed) ============ */
/* hero load reveal */
.rv .hero__title{visibility:hidden}
.rv .hero__title.split{visibility:visible}
.rv .hero__title.split .w{display:inline-block;opacity:0;transform:translateY(.85em) rotate(3deg);transition:opacity .5s var(--ease),transform .65s cubic-bezier(.2,.8,.25,1)}
.rv .hero.in .hero__title.split .w{opacity:1;transform:none}
.rv .hero__copy .eyebrow,.rv .hero__lead,.rv .hero__actions{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease),transform .7s var(--ease)}
.rv .hero.in .hero__copy .eyebrow{opacity:1;transform:none}
.rv .hero.in .hero__lead{opacity:1;transform:none;transition-delay:.55s}
.rv .hero.in .hero__actions{opacity:1;transform:none;transition-delay:.68s}
.rv .hero__art > *{opacity:0;transform:scale(.5);transition:opacity .5s var(--ease),transform .7s cubic-bezier(.34,1.56,.64,1)}
.rv .hero.in .hero__art > *{opacity:1;transform:none}

/* section headers rise in (number fades; eyebrow + title stagger up) */
.rv .sec-head .sec-num{opacity:0;transition:opacity .9s var(--ease)}
.rv .sec-head.in .sec-num{opacity:1}
.rv .sec-head .eyebrow,.rv .sec-head .sec-title,.rv .contact__intro .eyebrow,.rv .contact__intro .sec-title,.rv .contact__intro .contact__lead{opacity:0;transform:translateY(22px);transition:opacity .6s var(--ease),transform .75s cubic-bezier(.2,.65,.3,1)}
.rv .sec-head.in .eyebrow,.rv .contact__intro.in .eyebrow{opacity:1;transform:none}
.rv .sec-head.in .sec-title,.rv .contact__intro.in .sec-title{opacity:1;transform:none;transition-delay:.1s}
.rv .contact__intro.in .contact__lead{opacity:1;transform:none;transition-delay:.2s}

/* generic blocks fade up */
.rv .approach__body,.rv .intl .sec-intro,.rv .mapwin,.rv .footer__inner{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s cubic-bezier(.2,.65,.3,1)}
.rv .approach__body.in,.rv .intl .sec-intro.in,.rv .mapwin.in,.rv .footer__inner.in{opacity:1;transform:none}

/* client logo tiles pop in (stagger set in JS) */
.rv .clients__grid .client{opacity:0;transform:translateY(18px) scale(.96);transition:opacity .5s var(--ease),transform .6s cubic-bezier(.34,1.4,.64,1)}
.rv .clients__grid.in .client{opacity:1;transform:none}

/* =====================================================================
   V3 OVERRIDES - simpler, more white space, purple only
   ===================================================================== */

/* --- header: static brand lockup (stamp + name + strapline), always visible (footer-style) --- */
.nav{padding:1rem clamp(1.2rem,4vw,3rem);transition:box-shadow .35s}
.nav .brand{display:flex;align-items:center}
.nav .brand__lockup{display:flex;align-items:center;gap:.7rem}
.nav .brand__logo{width:52px;height:52px;transform:rotate(-8deg)}
.nav .brand__type{font-size:1.2rem;display:flex;flex-direction:column;gap:.25rem;white-space:nowrap}
.nav .brand__type small{font-size:.56rem}
.heroC__logo.stamping{animation:stampFlicker .5s ease-out forwards}   /* quick stamp flicker on the hero logo on load / re-entry */
@media (prefers-reduced-motion:reduce){.heroC__logo.stamping{animation:none}}

/* --- hero: simpler, generous whitespace --- */
.hero{padding-top:clamp(8rem,16vh,12rem)}
/* hero headline matches the section-header size (Tom: titles felt too large) */
.hero__title{font-size:clamp(1.9rem,4.2vw,3.1rem);line-height:1.04;letter-spacing:-.02em;max-width:18ch}
.footer__social{display:inline-flex;align-self:flex-start;color:var(--ink);transition:color .2s}
.footer__social svg{width:38px;height:38px;display:block}
.footer__social:hover{color:var(--accent)}
.hero__lead{font-size:clamp(1.15rem,1.8vw,1.45rem);max-width:34ch;margin-top:1.6rem}
/* hero A: the copy block is centred in the column, but the headline + subcopy are left-aligned
   and share the same left edge (block shrinks to its content, then centres) */
.hero--a .hero__copy{text-align:left;width:fit-content;max-width:100%;margin-left:auto;margin-right:auto}
.hero--a .hero__title{max-width:18ch}
.hero--a .hero__lead{max-width:34ch}
.hero__art{grid-auto-rows:1fr}
.hero__art img{max-height:140px}

/* --- ticker: white tape of symbols only (page 13), objects in purple --- */
.ticker{background:#fff;color:var(--ink);border-top:2px dotted var(--dot);border-bottom:2px dotted var(--dot);padding:1.4rem 0;margin-bottom:clamp(5rem,8.5vw,8rem)}
/* single tape of symbols (transform set per-frame by the JS marquee) */
.ticker__row{gap:clamp(.45rem,1vw,.8rem)}
.ticker__row .xmark{width:auto;height:clamp(40px,4.4vw,52px);filter:none}
.ticker__row .tobj{width:auto;height:clamp(46px,5vw,60px);max-width:90px;object-fit:contain}   /* no mix-blend-mode: it flickers on iOS while animating; the tape is white so the white bg blends anyway */
.ticker__gap{flex:0 0 clamp(40px,4.4vw,52px)}   /* an empty space the width of an artifact */

/* --- clients: no grid, brand names in their own colour, lots of breathing space --- */
/* even column counts that divide the 20 brands (5/4/2) so no brand is ever orphaned on its own row */
.clients__grid{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr));justify-items:center;align-items:center;
  gap:clamp(2.5rem,6vw,4.6rem) clamp(1.5rem,4vw,3rem);border:0;margin-top:clamp(2.5rem,6vw,5rem);list-style:none}
@media (max-width:900px){.clients__grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:560px){.clients__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.client{border:0!important;min-height:clamp(44px,5vw,64px);padding:0;background:none!important;display:flex;align-items:center;justify-content:center;min-width:0;width:100%;
  font-family:var(--display);font-weight:800;font-size:clamp(1.05rem,1.9vw,1.55rem);line-height:1;letter-spacing:-.01em;
  transition:transform .25s var(--ease)}
.client:hover{background:none!important;transform:translateY(-3px)}
.client .client__name{display:inline!important;position:static;opacity:1;transform:none}
.client .client__name::before{content:none}
.clients .sec-head{max-width:none}
/* actual brand logos (real colour + typeface); the styled name shows only if a logo fails to load */
.client__logo{height:clamp(40px,5vw,60px);width:auto;max-width:100%;object-fit:contain;display:block;filter:none!important;opacity:1!important}
.client.has-logo{transform:none;overflow:visible}
.client.has-logo:hover{background:none!important;z-index:2}
.client.has-logo:hover .client__logo{filter:none!important;opacity:1!important;transform:scale(1.06)}
.client.has-logo .client__name{display:none!important}
.client[data-slug="financialtimes"] .client__logo{height:clamp(82px,9vw,106px);max-height:106px;max-width:100%} /* FT reads small, size it up (override the 72px logo cap) */
/* per-brand size tuning so each logo reads with even visual weight on the wall (override the 72px cap where boosting) */
.client[data-slug="miraclegro"] .client__logo{height:clamp(52px,6.5vw,76px);max-height:76px;max-width:100%}
.client[data-slug="nationwide"] .client__logo{height:auto;max-height:none;max-width:84%} /* trimmed asset is a wide wordmark, size by width */
.client[data-slug="peroni"] .client__logo{height:clamp(64px,8.2vw,98px);max-height:98px;max-width:100%}
.client[data-slug="londonpride"] .client__logo{height:clamp(68px,9vw,104px);max-height:104px;max-width:100%}
.client[data-slug="simplyhealth"] .client__logo{height:clamp(32px,3.8vw,44px);max-width:100%} /* wide wordmark, trim it down a touch */
.client[data-slug="deliveroo"] .client__logo{height:clamp(30px,3.4vw,40px);max-width:100%} /* wide wordmark, bring it down a touch */
.client[data-slug="greateranglia"] .client__logo{height:clamp(34px,4.2vw,50px);max-width:100%}
.client[data-slug="tate"] .client__logo{height:clamp(36px,4.4vw,50px);max-width:100%}
.client[data-slug="nationaltrust"] .client__logo{height:clamp(58px,7vw,80px);max-height:80px;max-width:100%}
.client[data-slug="tetley"] .client__logo{height:clamp(44px,5.4vw,64px);max-height:64px;max-width:100%}
.client[data-slug="tkmaxx"] .client__logo{max-width:62%} /* very wide wordmark, rein its width in so it doesn't dominate */
/* fallback brand-style colours (used only when no logo loads) */
.client[data-slug="morrisons"] .client__name{color:#00583c}
.client[data-slug="drmartens"] .client__name{color:#111;text-transform:uppercase;letter-spacing:.04em;font-weight:900}
.client[data-slug="financialtimes"] .client__name{color:#33302e;font-family:Georgia,"Times New Roman",serif;font-weight:600}
.client[data-slug="frijj"] .client__name{color:#92278f;font-style:italic}
.client[data-slug="muller"] .client__name{color:#d2002e}
.client[data-slug="greateranglia"] .client__name{color:#e3000b}
.client[data-slug="miraclegro"] .client__name{color:#009a44}
.client[data-slug="nationallottery"] .client__name{color:#d6001c}
.client[data-slug="nationaltrust"] .client__name{color:#00482f;font-family:Georgia,serif;font-weight:600}
.client[data-slug="tate"] .client__name{color:#111;letter-spacing:.06em}
.client[data-slug="nationwide"] .client__name{color:#11296b}
.client[data-slug="royallondon"] .client__name{color:#6c2c91;font-family:Georgia,serif;font-weight:600}
.client[data-slug="tetley"] .client__name{color:#e2001a}
.client[data-slug="tkmaxx"] .client__name{color:#e3001b;font-style:italic;font-weight:900}
.client[data-slug="virgingames"] .client__name{color:#e10a0a;font-style:italic}
.client[data-slug="simplyhealth"] .client__name{color:#0098a8}
.client[data-slug="deliveroo"] .client__name{color:#00ccbc}
.client[data-slug="peroni"] .client__name{color:#0b2e6e}
.client[data-slug="londonpride"] .client__name{color:#6b1f2a;font-family:Georgia,serif;font-weight:600}
.client[data-slug="bq"] .client__name{color:#ff6a00;font-weight:900}

/* --- business card: facia + details as two EQUAL halves (so it reads as a real card).
   Horizontal by default; stacks vertically on mobile portrait. --- */
.footer .bizcard{max-width:none;border:2px solid var(--ink);background:#fff;display:flex;flex-direction:row;align-items:stretch;min-height:clamp(220px,24vw,300px)}
.footer .bizcard__deck,.footer .bizcard__details{flex:1 1 50%;min-width:0}
/* facia half (page-10: objects close + large, stamp overlaid + rotated/hand-stamped) */
.footer .bizcard__deck{position:relative;overflow:hidden;background:#fafafa;border-right:2px dotted var(--dot)}
.footer .bizcard__track{display:flex;height:100%}
.footer .bizcard__slide{position:relative;flex:0 0 100%;min-width:0;display:flex;align-items:center;justify-content:center;padding:1rem}
/* each object sits in its own half, pulled toward the centre, so the centred stamp bridges BOTH
   inner edges symmetrically regardless of their differing widths (per the design doc) */
.footer .bizcard__objs{display:grid;grid-template-columns:1fr 1fr;align-items:center;width:100%;min-width:0}
/* size by % of the (square) half-cell so objects always FIT the deck (slides MUST stay deck-width or
   the carousel mis-lands); height auto + object-fit keeps the true aspect ratio */
.footer .bizcard__objs .cardobj{width:auto;height:auto;max-width:86%;max-height:clamp(100px,16vw,150px);object-fit:contain;mix-blend-mode:multiply}
.footer .bizcard__objs .cardobj:first-child{justify-self:end;margin-right:clamp(.4rem,2.2vw,1.2rem)}
.footer .bizcard__objs .cardobj:last-child{justify-self:start;margin-left:clamp(.4rem,2.2vw,1.2rem)}
.footer .bizcard__mark{position:absolute;left:50%;top:50%;width:clamp(104px,13vw,154px);height:clamp(104px,13vw,154px);
  transform:translate(-50%,-50%) rotate(var(--rot,-7deg));mix-blend-mode:multiply;z-index:2;pointer-events:none;opacity:1}
/* each card slides in clean (.pre-stamp = hidden); JS adds .stamping to play the quick double-flicker on every facia */
.footer .bizcard__mark.pre-stamp{opacity:0}
.footer .bizcard__mark.stamping{animation:stampFlicker .5s ease-out forwards}
@keyframes stampFlicker{0%{opacity:0}28%{opacity:1}44%{opacity:.18}60%{opacity:1}100%{opacity:1}}
@media (prefers-reduced-motion:reduce){.footer .bizcard__mark{opacity:1}.footer .bizcard__mark.stamping{animation:none}}
@media (prefers-reduced-motion:reduce){.footer .bizcard__mark{opacity:1;animation:none}}
/* details half: plain monospace lines, name underlined, no bold, no empty lines (matches the printed card) */
.footer .bizcard__details{display:flex;flex-direction:column;justify-content:center;gap:.1rem;min-width:0;overflow-wrap:anywhere;
  padding:clamp(1.2rem,2.5vw,2rem);font-family:var(--mono);font-size:clamp(.72rem,1vw,.8rem);line-height:1.55;color:var(--ink)}
.footer .bizcard__name{font-weight:400;text-transform:none;letter-spacing:0;text-decoration:underline;text-underline-offset:3px}
.footer .bizcard__line a{color:var(--ink);text-decoration:none;border-bottom:0}
.footer .bizcard__line a:hover{color:var(--accent);text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:2px}
.footer .bizcard__linkedin{display:inline-flex;color:var(--ink);margin-top:.25rem}
.footer .bizcard__linkedin svg{width:26px;height:26px;display:block}
.footer .bizcard__linkedin:hover{color:var(--accent);text-decoration:none}

/* --- footer: card on the left, brand/links/copy to the right --- */
/* footer matches the section width (not full-bleed): maxw box, dotted rule at the section edge */
.footer{max-width:var(--maxw);margin:0 auto;border-top:2px dotted var(--dot);padding:clamp(3.5rem,8vw,6.5rem) clamp(1rem,4vw,2.5rem)}
/* card fills the available width (meta column sized to its content) so the card is wider + more rectangular */
.footer__inner{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(2rem,4vw,4rem);align-items:center}
/* meta shrinks to its widest line (the nav links) and right-aligns in its column, so INTERNATIONAL
   touches the section's right edge while the rest stays left-aligned within the block */
.footer__meta{display:flex;flex-direction:column;gap:1.6rem;align-items:flex-start;justify-self:end;width:fit-content}
.footer__brand{display:flex;align-items:center;gap:.7rem}
.footer__brand .brand__logo{width:52px;height:52px;transform:rotate(-8deg)}/* jaunty footer logo, anticlockwise */
.footer__brand .brand__type{font-family:var(--display);font-weight:800;font-size:1.2rem;line-height:1;display:flex;flex-direction:column;gap:.25rem}
.footer__brand .brand__type small{font-family:var(--mono);font-size:.56rem;letter-spacing:.12em;text-transform:uppercase;color:var(--grey);font-weight:400}
.footer__links{display:flex;gap:1.4rem;font-family:var(--mono);font-size:.8rem;letter-spacing:.06em;text-transform:uppercase}
.footer__links a{color:var(--grey)}
.footer__links a:hover{color:var(--accent)}
.footer__copy{font-family:var(--mono);font-size:.72rem;color:var(--grey);letter-spacing:.04em}
.footer__credit{font-family:var(--mono);font-size:.72rem;color:var(--grey);letter-spacing:.04em;margin-top:-.8rem}
.footer__credit:hover{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
/* tablet/down: stack the footer, but keep the card horizontal (full width gives it room) */
@media (max-width:900px){
  .footer__inner{grid-template-columns:1fr;gap:2.5rem}
  .footer__meta{justify-self:start}   /* stacked: left-align, don't float right with empty space */
}
/* tablet/mobile: the tall desktop header (64px logo / 1.4rem brand) is too big here + wraps the brand */
@media (max-width:900px){
  .nav{padding:.8rem clamp(1rem,4vw,2.5rem)}
  .nav .brand__logo{width:42px;height:42px}
  .nav .brand__type{font-size:1rem;white-space:nowrap}
  .nav .brand__type small{font-size:.5rem;white-space:nowrap}
}
/* mobile portrait: card stacks vertically (facia on top, details below) */
@media (max-width:680px){
  .footer .bizcard{flex-direction:column;min-height:0}
  .footer .bizcard__deck,.footer .bizcard__details{flex:1 1 auto}
  .footer .bizcard__deck{border-right:0;border-bottom:2px dotted var(--dot);min-height:230px}
  .footer .bizcard__objs{gap:clamp(1.5rem,6vw,3rem)}
  .footer .bizcard__objs .cardobj{max-height:clamp(120px,26vw,180px)}
  .footer .bizcard__mark{width:clamp(120px,28vw,160px);height:clamp(120px,28vw,160px)}
  .footer .bizcard__details{justify-content:flex-start;font-size:.95rem;gap:.15rem;padding:1.5rem}
}

/* ---- hero style switch: choose layout A (artwork) or C (centred) ---- */
body[data-hero="a"] .hero--c{display:none}
body[data-hero="c"] .hero--a{display:none}
.hero--c{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:clamp(1.3rem,2.6vw,2rem)}
.heroC__logo{width:clamp(96px,11vw,158px);height:auto;transform:rotate(-8deg)}/* jaunty angle, like the stamps */
.heroC__title{font-family:var(--display);font-weight:900;font-size:clamp(2.4rem,6.4vw,5.4rem);line-height:.95;letter-spacing:-.035em}
.heroC__sub{font-family:var(--mono);font-size:clamp(.9rem,1.4vw,1.1rem);letter-spacing:.04em;color:var(--grey);max-width:52ch;line-height:1.8;text-wrap:balance}/* even, balanced wrap when it breaks to multiple lines (like Webflow's Balance) */

/* mobile: consistent, symmetric whitespace above + below the ticker (≈ 2x the old above-gap).
   above = hero base (~87) + margin-top; below = section base (~69) + margin-bottom -> both ≈ 174 */
/* mobile: 100px gap above + 100px below the ticker (base above ~87/48, below-to-01 ~69/65 -> margins make 100 each) */
@media (max-width:760px){
  .ticker{margin-top:13px;margin-bottom:31px}    /* portrait */
}
@media (orientation:landscape) and (max-height:540px){
  .ticker{margin-top:52px;margin-bottom:35px}    /* landscape (2-col hero) */
}