/* =====================================================================
   HARDSCALE STUDIO — design system for the web
   Tokens from the brand book: graphite 60 / cemento 25 / signal orange ≤15,
   Big Shoulders Display (display, capitals), Archivo (text), IBM Plex Mono
   (every figure), sharp corners, the ruler, il numero grande.
   Mobile first. Motion lives in hs.js; without it every element is visible.
   ===================================================================== */

:root {
  --graphite: #1b1b1d; --asphalt: #2a2a2d; --ink: #111113; --cemento: #edeae4;
  --orange: #ff5a1f; --orange-deep: #b83a0b; --steel: #8c8a86; --iron: #5e5c58;
  --bg: var(--graphite); --fg: var(--cemento); --muted: #a3a09b; --line: rgba(237,234,228,.14);
  --line-strong: rgba(237,234,228,.32); --surface: var(--asphalt);
  --f-display: "Big Shoulders Display", "Archivo Narrow", Impact, sans-serif;
  --f-text: "Archivo", system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, monospace;
  --gut: clamp(20px, 5.5vw, 80px);
  --max: 1440px;
  --nav-h: 64px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 144px;
  --t-xs: 12px; --t-sm: 14px; --t-body: 16px; --t-lead: clamp(18px, 1.1vw + 12px, 22px);
  --t-h3: clamp(24px, 1.6vw + 16px, 36px);
  --t-h2: clamp(44px, 5.4vw + 18px, 112px);
  --t-h1: clamp(56px, 10vw + 16px, 210px);
  --t-num: clamp(88px, 14vw, 260px);
}
@media (min-width: 900px) { :root { --nav-h: 76px; } }

/* the light theme: Cemento (brand book, second theme) */
.light { --orange-text: var(--orange-deep); --bg: var(--cemento); --fg: var(--ink); --muted: #5e5c58; --line: rgba(17,17,19,.14); --line-strong: rgba(17,17,19,.34); --surface: #fff; background: var(--bg); color: var(--fg); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 400 var(--t-body)/1.55 var(--f-text); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
p { margin: 0 0 var(--s4); }
h1, h2, h3 { margin: 0; font-family: var(--f-display); font-weight: 800; text-transform: uppercase; line-height: .9; letter-spacing: .002em; }
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); line-height: 1; }
::selection { background: var(--orange); color: var(--graphite); }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: var(--gut); top: -60px; z-index: 300; background: var(--orange); color: var(--graphite); padding: 10px 14px; font-weight: 600; }
.skip:focus { top: 12px; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }
.mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.accent { color: var(--orange); }
.label { display: flex; align-items: center; gap: var(--s3); font: 500 var(--t-xs)/1 var(--f-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.label b { color: var(--orange); font-weight: 600; }
.lead { font-size: var(--t-lead); line-height: 1.45; max-width: 36ch; }
.section { position: relative; padding: var(--s9) 0; }
@media (min-width: 900px) { .section { padding: var(--s10) 0; } }
.sec-head { display: grid; gap: var(--s5); margin-bottom: var(--s8); }
.sec-head h2 .dim { color: var(--muted); }
.light .sec-head h2 .dim { color: #8c8a86; }
@media (min-width: 900px) { .sec-head--split { grid-template-columns: 1fr minmax(280px, 34%); align-items: end; column-gap: var(--s8); } }

/* line masks for split headings */
.line-mask { display: block; overflow: hidden; padding-bottom: .04em; margin-bottom: -.04em; }

/* ---------------- the ruler: the brand's signature ---------------- */
.ruler { height: 32px; width: 100%;
  background:
    repeating-linear-gradient(to right, var(--orange) 0 4px, transparent 4px 40px) left bottom / 100% 32px no-repeat,
    repeating-linear-gradient(to right, var(--orange) 0 4px, transparent 4px 8px) left bottom / 100% 16px no-repeat; }
.ruler--muted { opacity: .5; }
.progress { position: fixed; left: 0; right: 0; top: 0; height: 4px; z-index: 210; pointer-events: none; transform-origin: 0 50%; transform: scaleX(0);
  background: repeating-linear-gradient(to right, var(--orange) 0 4px, transparent 4px 8px); }

/* ---------------- buttons ---------------- */
.btn { position: relative; display: inline-flex; align-items: center; gap: var(--s3); min-height: 52px; padding: 0 var(--s5); font: 600 var(--t-sm)/1 var(--f-text); letter-spacing: .02em; text-transform: uppercase; border: 1px solid transparent; overflow: hidden; isolation: isolate; transition: color .35s var(--ease); }
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; transform: translateY(101%); transition: transform .5s var(--ease); }
.btn svg { width: 14px; height: 14px; transition: transform .4s var(--ease); }
.btn:hover svg { transform: translateX(4px); }
.btn--primary { background: var(--orange); color: var(--graphite); }
.btn--primary::before { background: var(--cemento); }
.btn--ghost { border-color: var(--line-strong); color: var(--fg); }
.btn--ghost::before { background: var(--fg); }
.btn--ghost:hover { color: var(--bg); }
.btn:hover::before { transform: none; }
.btn:active { transform: scale(.98); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s3); }
.link { display: inline-flex; align-items: center; gap: var(--s2); font-weight: 600; font-size: var(--t-sm); text-transform: uppercase; letter-spacing: .04em; padding-bottom: 3px; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .45s var(--ease); }
.link:hover { background-size: 100% 1px; }
.link svg { width: 12px; height: 12px; }

/* ---------------- nav ---------------- */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 200; height: var(--nav-h); color: var(--cemento); transition: transform .5s var(--ease), background-color .3s, color .3s; }
.nav::after { content: ""; position: absolute; inset: auto 0 0 0; height: 1px; background: rgba(237,234,228,.12); opacity: 0; transition: opacity .3s; }
.nav.is-scrolled { background: rgba(27,27,29,.92); backdrop-filter: blur(10px); }
.nav.is-scrolled::after { opacity: 1; }
.nav.is-hidden { transform: translateY(-100%); }
.nav.on-light.is-scrolled { background: rgba(237,234,228,.92); color: var(--ink); }
.nav.on-light::after { background: rgba(17,17,19,.12); }
.nav__in { height: 100%; display: flex; align-items: center; gap: var(--s5); }
.nav__logo { display: flex; align-items: center; flex: none; }
.nav__logo img { height: 28px; width: auto; }
.nav__logo .logo-dark { display: none; }
.nav.on-light.is-scrolled .logo-light, .menu-open .nav .logo-dark { display: none; }
.nav.on-light.is-scrolled .logo-dark { display: block; }
.nav__links { display: none; margin-left: auto; align-items: center; gap: var(--s2); }
.nav__link { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 var(--s3); font-size: var(--t-sm); font-weight: 500; }
.nav__link::after { content: ""; position: absolute; left: var(--s3); right: var(--s3); bottom: 6px; height: 2px; background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
.nav__link:hover::after, .nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav__link .chev { width: 10px; height: 10px; transition: transform .3s var(--ease); }
.nav__item { position: relative; }
.nav__item:hover .chev, .nav__item.is-open .chev { transform: rotate(180deg); }
.drop { position: absolute; top: calc(100% + 10px); left: -12px; width: 420px; padding: var(--s3); background: var(--asphalt); color: var(--cemento); border: 1px solid rgba(237,234,228,.1); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .25s, transform .35s var(--ease), visibility 0s .35s; }
.nav__item:hover .drop, .nav__item.is-open .drop, .nav__item:focus-within .drop { opacity: 1; visibility: visible; transform: none; transition: opacity .25s, transform .35s var(--ease); }
.drop a { display: grid; grid-template-columns: 1fr; gap: 2px var(--s3); padding: var(--s3); align-items: baseline; transition: background-color .2s; }
.drop a:hover, .drop a[aria-current="page"] { background: rgba(237,234,228,.06); }
.drop a .n { grid-row: span 2; font: 500 var(--t-xs)/1.6 var(--f-mono); color: var(--orange); }
.drop a b { font: 800 22px/1 var(--f-display); text-transform: uppercase; }
.drop a span:last-child { color: var(--steel); font-size: var(--t-sm); }
.lang { display: inline-flex; align-items: center; height: 34px; border: 1px solid rgba(237,234,228,.25); font: 500 var(--t-xs)/1 var(--f-mono); letter-spacing: .1em; }
.nav.on-light.is-scrolled .lang { border-color: rgba(17,17,19,.25); }
.lang a, .lang span { display: grid; place-items: center; width: 38px; height: 100%; }
.lang [aria-current] { background: var(--orange); color: var(--graphite); }
.nav__cta { display: none; }
.nav__end { margin-left: auto; display: flex; align-items: center; gap: var(--s3); }
.burger { position: relative; width: 44px; height: 44px; display: grid; place-items: center; z-index: 2; }
.burger i { position: absolute; width: 22px; height: 2px; background: currentColor; transition: transform .45s var(--ease), top .45s var(--ease); }
.burger i:first-child { top: 17px; } .burger i:last-child { top: 25px; }
/* the brand allows no 45-degree diagonals: the open menu says "close" in words */
.burger__x { position: absolute; font: 500 var(--t-xs)/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; opacity: 0; transition: opacity .3s; }
.menu-open .burger { width: auto; padding: 0 4px; }
.menu-open .burger i { transform: scaleX(0); }
.menu-open .burger .burger__x { position: static; opacity: 1; }
@media (min-width: 1000px) {
  .nav__links { display: flex; }
  .nav__end { margin-left: var(--s3); }
  .nav__cta { display: inline-flex; min-height: 44px; }
  .burger { display: none; }
}
/* the phone menu: two pillars close over the page, like the H; the content arrives after */
.menu { position: fixed; inset: 0; z-index: 190; color: var(--cemento); visibility: hidden; transition: visibility 0s .6s; display: flex; flex-direction: column; padding: calc(var(--nav-h) + var(--s6)) var(--gut) var(--s6); overflow-y: auto; }
.menu::before, .menu::after { content: ""; position: fixed; top: 0; bottom: 0; width: 50.5%; background: var(--graphite); z-index: -1; transition: transform .7s var(--ease); }
.menu::before { left: 0; transform: translateY(-100%); }
.menu::after { right: 0; transform: translateY(100%); }
.menu-open .menu { visibility: visible; transition: none; }
.menu-open .menu::before, .menu-open .menu::after { transform: none; }
.menu-open { overflow: hidden; }
.menu .label { margin-bottom: var(--s3); }
.menu ul { list-style: none; margin: 0 0 var(--s6); padding: 0; }
.menu li a { display: flex; align-items: baseline; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid rgba(237,234,228,.1); font: 800 clamp(34px, 9vw, 56px)/1 var(--f-display); text-transform: uppercase; }
.menu li a span { font: 500 var(--t-xs)/1 var(--f-mono); color: var(--orange); }
.menu li, .menu .label, .menu__foot { opacity: 0; transform: translateY(16px); transition: opacity 0s, transform 0s; }
.menu-open .menu li, .menu-open .menu .label, .menu-open .menu__foot { opacity: 1; transform: none; transition: opacity .4s var(--ease) .4s, transform .6s var(--ease) .4s; }
.menu-open .menu li:nth-of-type(2) { transition-delay: .5s; } .menu-open .menu li:nth-of-type(3) { transition-delay: .55s; } .menu-open .menu li:nth-of-type(4) { transition-delay: .6s; }
.menu__foot { margin-top: auto; display: grid; gap: var(--s4); }
.menu__foot .btn { justify-content: space-between; }
@media (min-width: 1000px) { .menu { display: none; } }

/* ---------------- loader: every page is measured from 1 to 100% ---------------- */
.loader { position: fixed; inset: 0; z-index: 400; background: var(--graphite); color: var(--cemento); display: grid; place-items: center; }
.loader.is-done { pointer-events: none; }
.loader__in { width: min(560px, 82vw); display: grid; gap: var(--s5); }
.loader__h { width: 72px; height: 72px; }
.loader__row { display: flex; justify-content: space-between; align-items: end; font: 500 var(--t-xs)/1 var(--f-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--steel); }
.loader__num { font: 600 clamp(64px, 11vw, 140px)/.8 var(--f-mono); color: var(--cemento); letter-spacing: -.04em; text-transform: none; }
.loader__num b { font-weight: 600; }
.loader__bar { position: relative; height: 32px; }
.loader__bar .ruler { position: absolute; inset: 0; opacity: .18; }
.loader__bar .ruler.fill { opacity: 1; clip-path: inset(0 100% 0 0); }
html:not(.js) .loader, .no-motion .loader { display: none; }

/* ---------------- cursor ---------------- */
/* the cursor is a tick of the ruler: short, and long over anything that can be clicked */
.tick-cursor { position: fixed; left: 0; top: 0; z-index: 500; pointer-events: none; width: 4px; height: 16px; margin: -8px 0 0 -2px; background: var(--orange); display: none; transition: height .3s var(--ease), margin .3s var(--ease); }
.tick-cursor.is-long { height: 32px; margin-top: -16px; }
@media (hover: hover) and (pointer: fine) { .has-cursor .tick-cursor { display: block; } }

/* ---------------- the call to action: the H and a phrase ---------------- */
.hcta { position: fixed; right: var(--gut); bottom: var(--s5); z-index: 150; display: flex; align-items: center; gap: 10px; transition: opacity .4s var(--ease), transform .5s var(--ease); }
.hcta__h { width: 44px; height: 44px; flex: none; }
.hcta span { font: 600 var(--t-xs)/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; background: var(--graphite); color: var(--cemento); padding: 10px 12px; border: 1px solid rgba(237,234,228,.16); }
.hcta:hover span { color: var(--orange); }
.hcta.is-off { opacity: 0; pointer-events: none; transform: translateY(16px); }
@media (max-width: 699px) { .hcta { bottom: var(--s4); } .hcta__h { width: 36px; height: 36px; } .hcta span { padding: 8px 10px; font-size: 11px; } }

/* ---------------- hero ---------------- */
.hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; padding: calc(var(--nav-h) + var(--s8)) 0 var(--s7); overflow: hidden; }
.hero__field { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; opacity: .9; }
.hero > .wrap { position: relative; z-index: 1; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-bottom: var(--s6); font: 500 var(--t-xs)/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.crumbs a { display: inline-flex; align-items: center; gap: 8px; color: var(--fg); padding: 8px 0; }
.crumbs a svg { width: 12px; height: 12px; transition: transform .3s var(--ease); }
.crumbs a:hover svg { transform: translateX(-4px); }
.crumbs i { width: 16px; height: 1px; background: var(--line-strong); }
.hero h1 { max-width: 14ch; }
.hero h1 .o { color: var(--orange); }
.hero__foot { display: grid; gap: var(--s6); margin-top: var(--s7); }
.hero__facts { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 0; border-top: 1px solid var(--line); }
.hero__facts div { padding: var(--s4) var(--s3) var(--s4) 0; border-bottom: 1px solid var(--line); }
.hero__facts dt { font: 500 var(--t-xs)/1.3 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--s2); }
.hero__facts dd { margin: 0; font: 600 clamp(18px, 1.4vw + 10px, 26px)/1.1 var(--f-mono); }
@media (min-width: 900px) {
  .hero__foot { grid-template-columns: 1fr 1fr; align-items: end; column-gap: var(--s8); }
  .hero__facts { grid-template-columns: 1fr 1fr; column-gap: var(--s5); }
  .hero__facts div { padding-right: var(--s4); }
}
.scroll-cue { position: absolute; right: var(--gut); bottom: var(--s5); z-index: 1; display: none; align-items: center; gap: var(--s3); font: 500 var(--t-xs)/1 var(--f-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.scroll-cue i { width: 1px; height: 48px; background: var(--line-strong); position: relative; overflow: hidden; }
.scroll-cue i::after { content: ""; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: var(--orange); animation: cue 1.8s var(--ease) infinite; }
@keyframes cue { to { top: 100%; } }
@media (min-width: 1200px) { .scroll-cue { display: flex; } }

/* ---------------- tape: names on a ruler, moved by the scroll ---------------- */
.tape { position: relative; overflow: hidden; border-top: 1px solid var(--line); padding: var(--s5) 0 0; }
.tape__track { display: flex; width: max-content; align-items: center; padding: 0 0 var(--s4); will-change: transform; }
.tape__item { margin-right: var(--s8); }
.tape__item { display: inline-flex; align-items: center; gap: var(--s3); font: 500 var(--t-body)/1 var(--f-text); color: var(--muted); white-space: nowrap; }
.tape__item--logo img { width: auto; height: calc(var(--lh, 24) * .8px); opacity: .85; }
@media (min-width: 900px) { .tape__item--logo img { height: calc(var(--lh, 24) * 1.1px); } }
.tape--logos .tape__track { padding-bottom: var(--s5); }
.tape--logos .tape__item { margin-right: clamp(40px, 5vw, 80px); }
.tape__item--big { font: 800 clamp(32px, 4vw, 64px)/1 var(--f-display); text-transform: uppercase; color: var(--fg); }
.tape__item--big::after { content: ""; display: inline-block; width: 8px; height: .7em; margin-left: var(--s8); background: var(--orange); }
.tape__ruler { height: 24px; background:
    repeating-linear-gradient(to right, var(--line-strong) 0 2px, transparent 2px 40px) left bottom / 100% 24px no-repeat,
    repeating-linear-gradient(to right, var(--line) 0 2px, transparent 2px 8px) left bottom / 100% 10px no-repeat; }

/* ---------------- statement: a measuring edge runs along each line ---------------- */
.statement > .wrap > p:not(.label) { font: 800 clamp(36px, 5.2vw + 10px, 104px)/.95 var(--f-display); text-transform: uppercase; max-width: 18ch; margin: 0; }
.statement .sline { --m: 0%; background: linear-gradient(90deg, var(--fg) var(--m), rgba(237,234,228,.2) var(--m)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.light .statement .sline, .statement.light .sline { background: linear-gradient(90deg, var(--fg) var(--m), rgba(17,17,19,.18) var(--m)); -webkit-background-clip: text; background-clip: text; }
.statement strong { color: var(--orange); }
.statement .sline strong { color: transparent; }

/* ---------------- big number ---------------- */
.bignum { display: grid; gap: var(--s5); align-items: end; }
.bignum__n { font: 600 var(--t-num)/.8 var(--f-mono); letter-spacing: -.05em; color: var(--orange); white-space: nowrap; }
.bignum__t { font: 800 clamp(28px, 2.6vw + 12px, 56px)/.95 var(--f-display); text-transform: uppercase; max-width: 14ch; }
@media (min-width: 900px) { .bignum { grid-template-columns: auto 1fr; column-gap: var(--s7); } }

/* ---------------- service rows: the H's ticks grow on the row ---------------- */
.svc { border-top: 1px solid var(--line); }
.svc__row { display: grid; grid-template-columns: 40px 1fr 44px; gap: var(--s3) var(--s4); align-items: center; padding: var(--s6) 0; border-bottom: 1px solid var(--line); }
.svc__n { color: var(--orange); font-size: var(--t-xs); align-self: start; padding-top: 10px; }
.svc__name { font-size: clamp(44px, 6vw, 120px); line-height: .85; transition: transform .6s var(--ease); }
.svc__body { grid-column: 2 / -1; display: grid; gap: var(--s4); }
.svc__body p { margin: 0; max-width: 46ch; color: #c9c6c0; }
.svc__facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); font: 500 var(--t-xs)/1.4 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.svc__facts li span:last-child { color: var(--fg); margin-left: 6px; }
.svc__h { grid-column: 3; grid-row: 1; display: flex; align-items: flex-end; justify-content: space-between; width: 44px; height: 48px; }
.svc__h i { width: 8px; height: 32px; background: var(--orange); }
.svc__h i:nth-child(2) { height: 48px; }
.svc__row:hover .svc__name { transform: translateX(16px); }
@media (min-width: 900px) {
  .svc__row { grid-template-columns: 56px minmax(0, 1.25fr) minmax(0, 1fr) 56px; }
  .svc__body { grid-column: 3; }
  .svc__h { grid-column: 4; justify-self: end; }
}

/* ---------------- split: text beside a drawn visual ---------------- */
.split { display: grid; gap: var(--s7); }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; column-gap: var(--s8); align-items: start; } .split--top { align-items: start; } }
.facts { list-style: none; margin: var(--s5) 0; padding: 0; }
.facts li { position: relative; padding: var(--s3) 0 var(--s3) var(--s5); border-top: 1px solid var(--line); }
.facts li:last-child { border-bottom: 1px solid var(--line); }
.facts li::before { content: ""; position: absolute; left: 0; top: calc(var(--s3) + .45em); width: 8px; height: 8px; background: var(--orange); }

/* a drawn visual: flat surface, sharp, the ruler at its foot */
.viz { position: relative; background: var(--surface); padding: var(--s5); display: grid; gap: var(--s4); align-content: start; overflow: hidden; }
@media (min-width: 900px) { .viz { padding: var(--s6); } }
.viz__label { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); }
.viz .ruler { margin-top: var(--s3); }
.tbl { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.tbl th { text-align: left; font: 500 var(--t-xs)/1.2 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding: 0 0 var(--s3); border-bottom: 1px solid var(--line-strong); }
.tbl td { padding: var(--s3) 0; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl .r { text-align: right; }
.tbl td.r, .tbl .num { font-family: var(--f-mono); font-variant-numeric: tabular-nums; font-weight: 600; }
.tbl .hl { color: var(--orange); }
.tbl td:first-child, .tbl th:first-child { padding-right: var(--s3); }

/* ---------------- specs: what a service covers, one row each ---------------- */
.specs { border-top: 1px solid var(--line); }
.spec { display: grid; grid-template-columns: 1fr; gap: var(--s4) var(--s5); padding: var(--s6) 0; border-bottom: 1px solid var(--line); }
.spec__num { position: relative; display: grid; justify-items: start; gap: var(--s3); }
.spec__num span { font-size: var(--t-xs); color: var(--muted); }
.spec.is-in .spec__num span { color: var(--orange); }
.spec__tick { display: block; width: 4px; height: 64px; background: var(--orange); }
.spec__txt h3 { font-size: clamp(28px, 2.4vw + 12px, 52px); margin-bottom: var(--s3); }
.spec__txt p { color: var(--muted); max-width: 46ch; margin: 0; }
.spec__viz { grid-column: 1 / -1; position: relative; min-height: 220px; background: var(--surface); padding: var(--s5); display: flex; flex-direction: column; justify-content: center; gap: var(--s4); overflow: hidden; }
@media (min-width: 900px) {
  .spec { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .spec__viz { grid-column: 2; min-height: 260px; }
}
/* scene parts, drawn in the brand */
.bars { display: flex; align-items: end; gap: 6%; height: 150px; padding: 0 4%; border-bottom: 1px solid var(--line-strong); }
.bars i { flex: 1; background: var(--steel); height: var(--h); }
.bars i.o { background: var(--orange); }
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.chips span { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--line-strong); font-size: var(--t-sm); }
.chips img { width: 18px; height: 18px; object-fit: contain; }
.formats { display: flex; align-items: end; justify-content: center; gap: 6%; height: 170px; }
.formats i { display: grid; place-items: end start; padding: 8px; border: 2px solid var(--fg); font: 500 11px/1 var(--f-mono); font-style: normal; max-height: 100%; }
.formats i.o { border-color: var(--orange); color: var(--orange); }
.path { display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; }
.path span { padding: var(--s3) var(--s2); border: 1px solid var(--line-strong); text-align: center; font-size: var(--t-xs); font-family: var(--f-mono); text-transform: uppercase; letter-spacing: .08em; }
.path span + span { border-left: 0; }
.path span.o { background: var(--orange); color: var(--graphite); border-color: var(--orange); }
.spark { width: 100%; height: auto; max-height: 150px; }
.spark path { fill: none; stroke: var(--orange); stroke-width: 4; }
.spec__viz .label { margin: 0; }

/* ---------------- steps: each a taller tick, grown in turn ---------------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s6); }
.step { display: grid; grid-template-columns: 1fr; gap: var(--s4); }
.step__tick { display: block; height: 8px; width: calc(var(--k) / var(--n) * 100%); background: var(--orange); transform-origin: 0 50%; }
.step__body .n { font-size: var(--t-xs); color: var(--orange); letter-spacing: .14em; }
.step__body h3 { font-size: clamp(28px, 2vw + 16px, 44px); margin: var(--s2) 0 var(--s3); }
.step__body p { color: var(--muted); max-width: 32ch; margin: 0; }
@media (min-width: 900px) {
  .steps { grid-template-columns: repeat(var(--n), 1fr); gap: var(--s5); align-items: end; border-bottom: 1px solid var(--line-strong); padding-bottom: 0; }
  .step { grid-template-rows: auto auto; align-content: end; }
  .step__body { order: -1; padding-bottom: var(--s5); }
  .step__tick { width: 16px; height: calc(48px + var(--k) / var(--n) * 200px); transform-origin: 50% 100%; }
}

/* ---------------- marks: each line gets its long tick ---------------- */
.marks { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.marks li { display: grid; grid-template-columns: 32px 1fr; gap: var(--s3); align-items: center; padding: var(--s4) 0; border-bottom: 1px solid var(--line); font: 800 clamp(22px, 1.6vw + 12px, 36px)/1 var(--f-display); text-transform: uppercase; }
.marks .mk { display: block; width: 4px; height: 16px; background: var(--line-strong); transition: height .5s var(--ease), background-color .3s; }
.marks li.on .mk { height: 32px; background: var(--orange); }
html:not(.js) .marks .mk, .no-motion .marks .mk { height: 32px; background: var(--orange); }
.light .marks li.on .mk { background: var(--orange-deep); }

/* ---------------- gantt ---------------- */
.gantt { display: grid; gap: 0; }
.gantt__scale, .gantt__row { display: grid; grid-template-columns: minmax(110px, 30%) 1fr 72px; gap: var(--s3); align-items: center; }
.gantt__scale { padding-bottom: var(--s3); border-bottom: 1px solid var(--line-strong); font: 500 var(--t-xs)/1 var(--f-mono); color: var(--muted); }
.gantt__ticks { display: flex; justify-content: space-between; }
.gantt__row { padding: var(--s3) 0; border-bottom: 1px solid var(--line); font-size: var(--t-sm); }
.gantt__track { position: relative; height: 14px; background: repeating-linear-gradient(to right, var(--line) 0 1px, transparent 1px calc(100% / var(--n, 6))); }
.gantt__track i { position: absolute; top: 0; bottom: 0; left: calc(var(--a) / var(--n) * 100%); width: calc((var(--b) - var(--a)) / var(--n) * 100%); background: var(--orange); transform-origin: 0 50%; }
.gantt__track i.dash { background: repeating-linear-gradient(to right, var(--orange) 0 4px, transparent 4px 8px); }
.gantt__row > :last-child { text-align: right; font: 600 var(--t-sm)/1 var(--f-mono); }

/* ---------------- the mix: a ruler of 100 ticks ---------------- */
.mix { display: grid; gap: var(--s5); }
.mixbox { display: grid; gap: var(--s3); }
.mixbox__n { font: 600 clamp(36px, 3vw, 52px)/1 var(--f-mono); margin: 0; }
.mixruler { display: grid; grid-template-columns: repeat(100, 1fr); gap: 2px; height: 64px; align-items: end; }
.mixruler i { display: block; height: 60%; background: var(--c); }
.mixruler i:nth-child(5n) { height: 100%; }
.js:not(.no-motion) .mixruler i { opacity: .12; }
.legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.legend li { display: grid; grid-template-columns: 14px 1fr auto auto; gap: var(--s3); align-items: center; padding: var(--s3) 0; border-bottom: 1px solid var(--line); font-size: var(--t-sm); }
.legend li i { width: 14px; height: 14px; background: var(--c); }
.legend li b, .legend li span:last-child { font-family: var(--f-mono); font-weight: 600; }
.legend li span:last-child { color: var(--muted); font-weight: 400; min-width: 4ch; text-align: right; }

/* ---------------- waterfall ---------------- */
.wf { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; height: 300px; align-items: end; border-bottom: 1px solid var(--line-strong); padding-top: var(--s6); }
.wf__c { position: relative; height: 100%; }
.wf__c i { position: absolute; left: 0; right: 0; bottom: calc(var(--lo) / 125 * 100%); height: calc((var(--hi) - var(--lo)) / 125 * 100%); background: var(--fg); transform-origin: 50% 100%; }
.wf__c.up i { background: var(--orange); }
.wf__c.dn i { background: var(--steel); transform-origin: 50% 0; }
.wf__c b { position: absolute; left: -4px; right: -4px; text-align: center; bottom: calc(var(--hi) / 125 * 100% + 6px); font: 600 12px/1 var(--f-mono); }
.wf__l { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; font-size: 11px; line-height: 1.25; color: var(--muted); padding-top: var(--s2); }
@media (max-width: 599px) { .wf { height: 220px; gap: 3px; } .wf__l { font-size: 9.5px; gap: 3px; hyphens: auto; } .wf__c b { font-size: 10px; } }

/* ---------------- compare ---------------- */
.cmp th:nth-child(3), .cmp td:nth-child(3) { color: var(--fg); font-weight: 600; }
.cmp td:nth-child(2) { color: var(--muted); }
.cmp th:nth-child(3) { color: var(--orange); }

/* ---------------- stacked bars: where a fee goes ---------------- */
.stack { display: grid; gap: var(--s2); margin-bottom: var(--s4); }
.stack__name { display: flex; justify-content: space-between; font-size: var(--t-sm); }
.stack__bar { display: flex; height: 44px; gap: 2px; }
.stack__bar i { width: calc(var(--w) * 1%); background: var(--c, var(--steel)); transform-origin: 0 50%; }

/* ---------------- index pairs ---------------- */
.pair { display: grid; gap: 6px; }
.pair i { display: flex; align-items: center; justify-content: flex-end; height: 26px; width: calc(var(--w) / 2 * 1%); padding-right: 8px; font: 600 12px/1 var(--f-mono); font-style: normal; background: var(--steel); color: var(--graphite); transform-origin: 0 50%; }
.pair i + i { background: var(--orange); }

/* ---------------- faq ---------------- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; display: grid; grid-template-columns: 1fr 24px; gap: var(--s4); align-items: center; padding: var(--s5) 0; cursor: pointer; font: 600 clamp(17px, .6vw + 14px, 21px)/1.3 var(--f-text); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .pm { position: relative; width: 16px; height: 16px; }
.faq summary .pm::before, .faq summary .pm::after { content: ""; position: absolute; left: 0; top: 7px; width: 16px; height: 2px; background: var(--orange); transition: transform .4s var(--ease); }
.faq summary .pm::after { transform: rotate(90deg); }
.faq details[open] summary .pm::after { transform: rotate(0); }
.faq .ans { overflow: hidden; }
.faq .ans p { margin: 0; padding: 0 var(--s7) var(--s5) 0; color: var(--muted); max-width: 70ch; }
@media (min-width: 900px) { .faq-grid { display: grid; grid-template-columns: minmax(260px, 32%) 1fr; column-gap: var(--s8); align-items: start; } .faq-grid .sec-head { position: sticky; top: calc(var(--nav-h) + var(--s6)); } }

/* ---------------- team: small cards standing on a ruler ---------------- */
.trow { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(150px, 44vw, 210px); gap: var(--s3); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--s3); scrollbar-width: none; margin-right: calc(-1 * var(--gut)); padding-right: var(--gut); }
.trow::-webkit-scrollbar { display: none; }
.trow__ruler { margin-top: var(--s2); }
.tcard { position: relative; aspect-ratio: 3 / 4; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; scroll-snap-align: start;
  background: var(--asphalt); color: var(--cemento); border: 1px solid rgba(237,234,228,.14); transition: transform .5s var(--ease); }
.tcard:hover { transform: translateY(-8px); }
.tcard__foto { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.tcard__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; filter: grayscale(1) contrast(1.05); }
.tcard__num { position: relative; z-index: 2; align-self: flex-start; margin: 10px; padding: 4px 7px; background: var(--graphite); color: var(--cemento); font-size: 11px; letter-spacing: .12em; }
.tcard__band { position: relative; z-index: 2; margin-top: auto; display: grid; gap: 4px; padding: 12px 14px 14px; background: var(--graphite); }
.tcard__name { font-size: clamp(20px, 1.1vw + 10px, 28px); line-height: .95; }
.tcard__role { font: 500 10.5px/1.3 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--steel); }
.tcard--cem .tcard__band, .tcard--cem .tcard__num { background: var(--cemento); color: var(--ink); }
.tcard--cem .tcard__role { color: var(--iron); }
.tcard--net { background: var(--orange); color: var(--graphite); border-color: var(--orange); }
.tcard--net .tcard__band { background: transparent; }
.tcard--net .tcard__role { color: var(--graphite); }
.tcard__plus { position: absolute; inset: 0; display: grid; place-items: center; font: 800 clamp(96px, 9vw, 150px)/1 var(--f-display); color: var(--graphite); }
@media (min-width: 900px) { .trow { grid-auto-flow: row; grid-template-columns: repeat(5, 1fr); overflow: visible; margin-right: 0; padding-right: 0; } }
.people { list-style: none; margin: var(--s8) 0 0; padding: 0; border-top: 1px solid var(--line); }
.person { display: grid; grid-template-columns: 1fr; gap: var(--s2) var(--s4); padding: var(--s5) 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.person__n { color: var(--orange); font-size: var(--t-xs); }
.person__who h3 { font-size: clamp(28px, 1.6vw + 16px, 40px); margin-bottom: 6px; }
.person__yrs, .person__bio { margin: 0; }
.person__yrs { color: var(--muted); font-size: var(--t-sm); }
.person__yrs b { color: var(--fg); font-size: 22px; margin-right: 4px; }
.person__bio { color: #c9c6c0; max-width: 56ch; }
@media (min-width: 900px) { .person { grid-template-columns: 1.1fr 160px 1.4fr; } .person__yrs, .person__bio { grid-column: auto; } }

/* ---------------- forms ---------------- */
.form { display: grid; gap: var(--s4); }
.field { display: grid; gap: var(--s2); }
.field label { font: 500 var(--t-xs)/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.field input, .field select, .field textarea { width: 100%; min-height: 54px; padding: 14px 16px; border: 1px solid var(--line-strong); border-radius: 2px; background: transparent; color: var(--fg); font: 400 var(--t-body)/1.4 var(--f-text); transition: border-color .2s; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--fg) 50%), linear-gradient(135deg, var(--fg) 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
.field select option { color: #111; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--orange); }
.field.bad input, .field.bad select, .field.bad textarea { border-color: var(--orange); }
.field .err { display: none; font-size: var(--t-sm); color: var(--orange); }
.field.bad .err { display: block; }
.form__status { font-family: var(--f-mono); font-size: var(--t-sm); min-height: 1.4em; }

/* ---------------- footer: in order — the call and the newsletter, the columns, the giant logo, the legal line ---------------- */
.foot { position: relative; background: var(--ink); color: var(--cemento); padding: var(--s9) 0 var(--s6); overflow: hidden; }
.foot__top { display: grid; gap: var(--s8); padding-bottom: var(--s8); border-bottom: 1px solid rgba(237,234,228,.12); }
.foot__cta h2 { font-size: clamp(48px, 6vw, 120px); max-width: 12ch; margin-bottom: var(--s6); }
.foot__nl { align-self: end; max-width: 520px; gap: var(--s3); }
.foot__nltxt { color: #c9c6c0; margin: 0; }
.foot__nlrow { display: flex; gap: 0; }
.foot__nlrow input { flex: 1; min-width: 0; min-height: 52px; padding: 0 16px; background: transparent; border: 1px solid rgba(237,234,228,.3); border-right: 0; border-radius: 2px 0 0 2px; color: var(--cemento); font: 400 var(--t-body)/1 var(--f-text); }
.foot__nlrow input:focus { outline: none; border-color: var(--orange); }
.foot__nl.bad input, .foot__nlrow.bad input { border-color: var(--orange); }
.foot__nl .form__status { color: var(--steel); }
@media (min-width: 900px) { .foot__top { grid-template-columns: 1.3fr 1fr; align-items: end; } }
.foot__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s6); padding: var(--s7) 0; }
.foot__grid h3 { font: 500 var(--t-xs)/1 var(--f-mono); letter-spacing: .16em; color: var(--steel); margin-bottom: var(--s4); }
.foot__grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.foot__grid a { transition: color .2s; }
.foot__grid a:hover { color: var(--orange); }
@media (min-width: 800px) { .foot__grid { grid-template-columns: repeat(5, 1fr); } }
.foot__logo { display: block; padding: var(--s6) 0 var(--s5); overflow: hidden; }
.foot__logo img { width: 100%; height: auto; }
.foot__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s3); padding-top: var(--s5); border-top: 1px solid rgba(237,234,228,.12); font-size: var(--t-xs); color: var(--steel); font-family: var(--f-mono); }

/* ---------------- blog ---------------- */
.posts { display: grid; gap: var(--s4); }
.post { display: grid; gap: var(--s3); align-content: start; padding: var(--s6) var(--s5); background: var(--surface); min-height: 280px; }
.post h3 { font-size: clamp(26px, 1.4vw + 16px, 36px); }
.post p { color: var(--muted); margin: 0; }
.post__soon { margin-top: auto; font-size: var(--t-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--orange); }
@media (min-width: 900px) { .posts { grid-template-columns: repeat(3, 1fr); } }

/* ---------------- reveal defaults (set by hs.js only) ---------------- */
.js [data-rv] { opacity: 0; transform: translateY(32px); }
.js.no-motion [data-rv] { opacity: 1; transform: none; }

/* ---------------- legal pages ---------------- */
.legal { padding: calc(var(--nav-h) + var(--s9)) 0 var(--s9); }
.legal h1 { font-size: clamp(56px, 8vw, 140px); margin-bottom: var(--s6); }
.legal h2 { font-size: clamp(28px, 2vw + 16px, 44px); margin: var(--s7) 0 var(--s4); }
.legal p { max-width: 68ch; color: #c9c6c0; }

/* ---------------- reduced motion ---------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .loader, .curtain { display: none !important; }
}

/* orange text on Cemento fails contrast (2.6:1): the brand book's deep orange takes its place */
.light .label b, .light .accent, .light .bignum__n, .light .tbl .hl, .light .statement .w.o.on, .light .proc__count b,
.light .card__role, .light .inc__item.is-on .inc__btn .n, .panel:nth-child(4) .panel__n { color: var(--orange-deep); }
.light .link:hover { color: var(--orange-deep); }

/* includes on wide screens: every description stays open (no jumps while scrolling); the item at mid-screen lights up and picks the scene */
@media (min-width: 900px) {
  .inc__body { grid-template-rows: 1fr; }
  .inc__item { opacity: .38; transition: opacity .45s var(--ease); }
  .inc__item.is-on { opacity: 1; }
  .inc__btn { cursor: default; padding: var(--s6) 0 var(--s3); }
  .inc__btn .pm { display: none; }
  .inc__body p { padding-bottom: var(--s6); }
  .inc__stage { aspect-ratio: auto; height: min(560px, calc(100vh - var(--nav-h) - 96px)); }
}
/* phone: the step counter goes under the heading */
@media (max-width: 899px) { .proc__head { flex-direction: column; align-items: flex-start; } .proc__count { font-size: 48px; } }

/* ---------------- labels draw a ruler to the edge ---------------- */
.label .lr { flex: 1; height: 12px; min-width: 40px; align-self: flex-end; opacity: .9;
  background: repeating-linear-gradient(to right, var(--line-strong) 0 2px, transparent 2px 40px) left bottom / 100% 12px no-repeat,
              repeating-linear-gradient(to right, var(--line) 0 2px, transparent 2px 8px) left bottom / 100% 6px no-repeat; }
.hero .label { max-width: 100%; }
/* ---------------- headings are measured left to right, an orange tick on the edge ---------------- */
.mline { position: relative; }
.mline.is-measuring { clip-path: inset(-10% calc(100% - var(--m) - 6px) -10% -2%); }
.mline.is-measuring::after { content: ""; position: absolute; top: 6%; bottom: 6%; left: var(--m); width: 6px; background: var(--orange); }
.js:not(.no-motion) [data-split]:not(:has(.ln)) { visibility: hidden; }
/* ---------------- the page ruler (desktop): where you are, in ticks ---------------- */
.vruler { position: fixed; right: 14px; top: calc(var(--nav-h) + 24px); bottom: 120px; z-index: 140; width: 16px; display: none; pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(237,234,228,.28) 0 2px, transparent 2px 40px) right top / 16px 100% no-repeat,
              repeating-linear-gradient(to bottom, rgba(237,234,228,.14) 0 2px, transparent 2px 8px) right top / 8px 100% no-repeat; }
.vruler__mark { position: absolute; right: 0; top: 0; width: 24px; height: 4px; background: var(--orange); }
.vruler__num { position: absolute; right: 22px; top: -20px; font-size: 11px; color: var(--orange); letter-spacing: .1em; }
.vruler.on-light { background: repeating-linear-gradient(to bottom, rgba(17,17,19,.34) 0 2px, transparent 2px 40px) right top / 16px 100% no-repeat,
              repeating-linear-gradient(to bottom, rgba(17,17,19,.16) 0 2px, transparent 2px 8px) right top / 8px 100% no-repeat; }
@media (min-width: 1200px) and (hover: hover) { .vruler { display: block; } .progress { display: none; } }

/* ---------------- why ---------------- */
.why { display: grid; gap: var(--s4); margin-top: var(--s7); }
.why__i { background: var(--surface); padding: var(--s6) var(--s5); display: grid; gap: var(--s3); align-content: start; min-height: 240px; border-top: 4px solid var(--orange); }
.why__i h3 { font-size: clamp(30px, 1.6vw + 18px, 44px); }
.why__i p { margin: 0; color: #c9c6c0; max-width: 40ch; }
@media (min-width: 900px) { .why { grid-template-columns: repeat(3, 1fr); } }

/* ---------------- services: light cards you move by hand ---------------- */
.svcx { padding-bottom: var(--s9); }
.carousel { margin-top: var(--s7); }
.carousel__bar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s4); margin-bottom: var(--s5); }
.carousel__tabs { display: flex; gap: var(--s2); overflow-x: auto; scrollbar-width: none; flex: 1 1 100%; }
.carousel__tabs::-webkit-scrollbar { display: none; }
.carousel__tab { position: relative; flex: 0 0 auto; padding: 12px 20px 14px 0; text-align: left; font: 500 var(--t-xs)/1.2 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); border-top: 2px solid var(--line-strong); transition: color .3s; }
.carousel__tab i { position: absolute; left: 0; right: 0; top: -2px; height: 2px; background: var(--orange); transform: scaleX(0); transform-origin: 0 50%; transition: transform .6s var(--ease); }
.carousel__tab:hover { color: var(--fg); }
.carousel__tab[aria-selected="true"] { color: var(--fg); }
.carousel__tab[aria-selected="true"] i { transform: scaleX(1); }
.carousel__nav { display: flex; align-items: center; gap: var(--s2); margin-left: auto; }
.carousel__hint { font: 500 var(--t-xs)/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-right: var(--s3); }
.carousel__btn { display: grid; place-items: center; width: 56px; height: 56px; border: 1px solid var(--line-strong); color: var(--fg); transition: background-color .3s, color .3s, border-color .3s, opacity .3s; }
.carousel__btn svg { width: 18px; height: 18px; transition: transform .4s var(--ease); }
.carousel__btn--next { background: var(--orange); border-color: var(--orange); color: var(--graphite); }
.carousel__btn:hover { background: var(--cemento); color: var(--ink); border-color: var(--cemento); }
.carousel__btn--next:hover svg { transform: translateX(3px); }
.carousel__btn[disabled] { opacity: .3; pointer-events: none; }
@media (min-width: 900px) { .carousel__tabs { flex: 1 1 auto; } .carousel__tab { flex: 1 1 0; } }
/* the view lines up with the page edge and lets the next card show */
.carousel__view { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 0 var(--gut); scroll-padding: 0 var(--gut); }
.carousel__view::-webkit-scrollbar { display: none; }
@media (min-width: 1440px) { .carousel__view { padding-left: calc((100vw - var(--max)) / 2 + var(--gut)); scroll-padding-left: calc((100vw - var(--max)) / 2 + var(--gut)); } }
.carousel.is-live .carousel__view { overflow: hidden; touch-action: pan-y; cursor: grab; }
.carousel.is-live .carousel__view.is-drag { cursor: grabbing; }
.carousel__track { display: flex; gap: var(--s4); will-change: transform; }
.carousel__track::after { content: ""; flex: 0 0 1px; }
.slide { flex: 0 0 86%; max-width: 1180px; scroll-snap-align: start; display: flex; background: var(--sbg); color: var(--ink); user-select: none;
  --sbg: var(--cemento); --smut: #5e5c58; --sline: rgba(17,17,19,.16); --sart: var(--ink); transition: opacity .5s var(--ease); }
.carousel.is-live .slide:not(.is-current) { opacity: .55; cursor: pointer; }
.slide--adv { --sbg: #f4f1ec; }
.slide--web { --sbg: var(--cemento); }
.slide--seo { --sbg: #f7f6f3; }
.slide--fin { --sbg: #e6e2db; }
.slide__in { width: 100%; display: grid; gap: var(--s6); align-content: space-between; padding: var(--s6) var(--s5); position: relative; }
.slide__in::before { content: ""; position: absolute; left: 0; top: 0; width: 72px; height: 8px; background: var(--orange); }
.slide__name { font-size: clamp(52px, 7vw, 136px); line-height: .85; margin-bottom: var(--s4); }
.slide__body { font-size: var(--t-lead); line-height: 1.45; max-width: 38ch; margin-bottom: var(--s5); color: #2a2a2d; }
.slide__tagh { font: 500 11px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--orange-deep); margin: 0 0 var(--s3); }
.slide__tags { list-style: none; margin: 0 0 var(--s6); padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2); max-width: 520px; }
.slide__tags li { padding: 8px 12px; border: 1px solid var(--sline); font-size: var(--t-sm); background: rgba(255,255,255,.5); }
.slide__link { display: inline-flex; align-items: center; gap: var(--s3); font-weight: 600; padding: 14px 18px; background: var(--ink); color: var(--cemento); transition: background-color .3s, color .3s; }
.slide__link:hover { background: var(--orange); color: var(--graphite); }
.slide__link svg { width: 14px; height: 14px; transition: transform .4s var(--ease); }
.slide__link:hover svg { transform: translateX(4px); }
.slide__side { display: grid; gap: var(--s5); align-content: end; }
.slide__art { height: clamp(130px, 22vw, 320px); }
.slide__who { display: flex; align-items: center; gap: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--sline); }
.slide__who img { width: 64px; height: 80px; object-fit: cover; object-position: 50% 30%; filter: grayscale(1); }
.slide__who p { margin: 0; display: grid; gap: 2px; }
.slide__who span { font: 500 11px/1.3 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--smut); }
.slide__who span:first-child { color: var(--orange-deep); }
.slide__who b { font: 800 24px/1 var(--f-display); text-transform: uppercase; }
@media (min-width: 900px) {
  .slide { flex-basis: 84%; min-height: min(78svh, 720px); }
  .slide__in { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: end; gap: var(--s8); padding: var(--s8) var(--s7) var(--s7); }
  .slide__side { height: 100%; align-content: space-between; }
}
/* each card draws its own thing, orange always leads */
.art { position: relative; width: 100%; height: 100%; }
.art--bars { display: flex; align-items: flex-end; gap: 5%; border-bottom: 2px solid var(--ink); }
.art--bars i { flex: 1; height: var(--h); background: var(--orange); transform-origin: 50% 100%; }
.art--bars i:nth-child(odd) { background: transparent; border: 2px solid var(--ink); border-bottom: 0; }
.art--bars i.o { background: var(--ink); border: 0; }
.art--web { display: grid; grid-template-rows: 28px 1fr 34%; gap: 10px; padding: 10px; border: 2px solid var(--ink); background: #fff; }
.art__top { display: flex; gap: 6px; align-items: center; border-bottom: 2px solid var(--ink); }
.art__top i { width: 10px; height: 10px; background: var(--ink); }
.art__top i:first-child { background: var(--orange); }
.art__hero { background: var(--orange); transform-origin: 0 50%; }
.art__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.art__cols i { border: 2px solid var(--ink); transform-origin: 50% 100%; }
.art--seo { display: flex; align-items: flex-end; gap: 4%; border-bottom: 2px solid var(--ink); padding-top: 26px; }
.art--seo span { flex: 1; height: var(--h); background: #d9d5ce; position: relative; transform-origin: 50% 100%; }
.art--seo span:nth-last-child(2) { background: var(--ink); }
.art--seo span:last-child { background: var(--orange); }
.art--seo b { position: absolute; left: 0; right: 0; top: -22px; text-align: center; font-size: 12px; color: var(--ink); font-weight: 600; }
.art--seo span:last-child b { color: var(--orange-deep); }
.art--seo b::before { content: "#"; }
.art--fin { display: flex; align-items: stretch; gap: 5%; border-bottom: 2px solid var(--ink); }
.art--fin i { flex: 1; position: relative; }
.art--fin i::before { content: ""; position: absolute; left: 0; right: 0; bottom: calc(var(--lo) * 1%); height: calc((var(--hi) - var(--lo)) * 1%); background: var(--ink); transform-origin: 50% 100%; transform: scaleY(var(--g, 1)); }
.art--fin i.up::before { background: var(--orange); }
.art--fin i.dn::before { background: transparent; border: 2px solid var(--ink); }
.art--fin i.o::before { background: var(--orange); }

/* ---------------- 100 euros, split inside the bar ---------------- */
.stack__bar--seg { height: 64px; }
.stack__bar--seg .seg { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 0 10px; overflow: hidden; color: var(--ink); font-style: normal; white-space: nowrap; }
.stack__bar--seg .seg.dk { color: var(--cemento); }
.stack__bar--seg .seg b { font: 600 15px/1 var(--f-mono); }
.stack__bar--seg .seg span { font: 500 10px/1.2 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; }
@media (max-width: 599px) { .stack__bar--seg .seg span { display: none; } .stack__bar--seg .seg { padding: 0 6px; } .stack__bar--seg .seg b { font-size: 13px; } }

/* ---------------- agency or studio ---------------- */
.chain { display: grid; gap: var(--s4); margin: var(--s7) 0 var(--s6); }
.chain__block { background: var(--surface); padding: var(--s5); display: grid; gap: var(--s4); }
.chain__block--hs { outline: 2px solid var(--orange); outline-offset: -2px; }
.chain__h { margin: 0; font: 500 var(--t-xs)/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.chain__block--hs .chain__h { color: var(--orange); }
.chain__row { display: flex; flex-wrap: wrap; align-items: center; gap: 0; row-gap: var(--s3); }
.chain__n { position: relative; padding: 12px 16px; border: 1px solid var(--line-strong); font-size: var(--t-body); font-weight: 600; white-space: nowrap; }
.chain__n + .chain__n { margin-left: 28px; }
.chain__n + .chain__n::before { content: ""; position: absolute; right: 100%; top: 50%; width: 28px; height: 2px; background: var(--line-strong); }
.chain__n--you { background: var(--cemento); color: var(--ink); border-color: var(--cemento); }
.chain__n--o { background: var(--orange); color: var(--graphite); border-color: var(--orange); }
.chain__block--hs .chain__n + .chain__n::before { background: var(--orange); }
@media (min-width: 900px) { .chain { grid-template-columns: 1.6fr 1fr; } }
.vs { border-top: 1px solid var(--line-strong); }
.vs__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2) var(--s4); padding: var(--s4) 0; border-bottom: 1px solid var(--line); }
.vs__row p { margin: 0; }
.vs__q { grid-column: 1 / -1; font: 800 clamp(22px, 1vw + 16px, 30px)/1 var(--f-display); text-transform: uppercase; }
.vs__a { color: var(--muted); font-size: var(--t-sm); }
.vs__b { font-size: var(--t-sm); font-weight: 600; padding-left: var(--s3); border-left: 3px solid var(--orange); }
.vs__head { padding: var(--s3) 0; }
.vs__head .vs__q { display: none; }
.vs__head .vs__a, .vs__head .vs__b { font: 500 var(--t-xs)/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; }
.vs__head .vs__b { color: var(--orange); border-left: 0; padding-left: 0; }
@media (min-width: 900px) {
  .vs__row { grid-template-columns: 1.1fr 1fr 1fr; align-items: center; }
  .vs__q { grid-column: auto; }
  .vs__head .vs__q { display: block; }
  .vs__head .vs__b { padding-left: var(--s3); }
}

/* ---------------- statement: a short story under the line; plain hero ---------------- */
.statement__sub { display: grid; gap: var(--s4); max-width: 920px; margin-top: var(--s7); padding-top: var(--s5); border-top: 1px solid var(--line); }
.statement__sub p { margin: 0; font-size: var(--t-lead); line-height: 1.5; color: #c9c6c0; }
.statement__sub strong { color: var(--orange); }
@media (min-width: 900px) { .statement__sub { grid-template-columns: 1fr 1fr; column-gap: var(--s7); } }
.hero--plain h1 { font-size: clamp(46px, 7.4vw + 10px, 150px); max-width: 15ch; }
.hero--plain .hero__foot { grid-template-columns: 1fr; }
.hero--plain .hero__foot .lead { max-width: 52ch; }
.foot__top > * { min-width: 0; }
@media (max-width: 399px) { .foot__nlrow { flex-direction: column; gap: var(--s2); } .foot__nlrow input { border-right: 1px solid rgba(237,234,228,.3); border-radius: 2px; } }
.path { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 480px) { .path span { padding: 10px 2px; font-size: 10px; letter-spacing: 0; overflow-wrap: anywhere; } }

/* ---------------- more orange: labels, leads, the statement ---------------- */
.label::before { content: ""; flex: 0 0 auto; width: 8px; height: 8px; background: var(--orange); }
.light .label::before { background: var(--orange-deep); }
.lead strong { color: var(--orange); font-weight: 600; }
.light .lead strong { color: var(--orange-deep); }
.sec-head h2 .o { color: var(--orange); }
.light .sec-head h2 .o { color: var(--orange-deep); }
.statement .sline strong { color: var(--orange); }
.statement__sub { position: relative; border-top-color: var(--line); }
.statement__sub::before { content: ""; position: absolute; left: 0; top: -1px; width: 96px; height: 4px; background: var(--orange); }
.statement__sub b { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s3); font: 500 var(--t-xs)/1 var(--f-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--orange); }
.statement__sub em { font-style: normal; color: var(--cemento); font-weight: 600; }
.viz .label::before, .spec__viz .label::before, .viz__label .label::before { display: none; }

/* =====================================================================
   v13: service pages
   ===================================================================== */
/* tighter rhythm between sections */
.section { padding: clamp(64px, 7vw, 104px) 0; }
.sec-head { margin-bottom: var(--s7); }
.statement .statement__sub { margin-top: var(--s6); }

/* hero: text left, the service card right, centred in the first screen */
.svc-hero { position: relative; min-height: 100svh; display: flex; align-items: center; padding: calc(var(--nav-h) + var(--s6)) 0 var(--s7); }
.svc-hero__in { display: grid; gap: var(--s7); align-items: center; }
.svc-hero h1 { font-size: clamp(50px, 5.6vw + 14px, 128px); margin: var(--s5) 0; max-width: 12ch; }
.svc-hero h1 .o { color: var(--orange); }
.svc-hero .lead { max-width: 44ch; margin-bottom: var(--s6); color: #d6d3cd; }
.svc-hero__card { position: relative; background: var(--cemento); color: var(--ink); padding: var(--s6) var(--s5) var(--s5); display: grid; gap: var(--s5); }
.svc-hero__card::before { content: ""; position: absolute; left: 0; top: 0; width: 72px; height: 8px; background: var(--orange); }
.svc-hero__art { height: clamp(170px, 20vw, 300px); }
.svc-hero__who { display: flex; align-items: center; gap: var(--s4); padding-top: var(--s4); border-top: 1px solid rgba(17,17,19,.16); }
.svc-hero__who img { width: 56px; height: 70px; object-fit: cover; object-position: 50% 30%; filter: grayscale(1); }
.svc-hero__who p { margin: 0; display: grid; gap: 2px; }
.svc-hero__who span { font: 500 11px/1.3 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: #5e5c58; }
.svc-hero__who span:first-child { color: var(--orange-deep); }
.svc-hero__who b { font: 800 22px/1 var(--f-display); text-transform: uppercase; }
.svc-hero__go { margin-left: auto; display: grid; place-items: center; width: 44px; height: 44px; background: var(--ink); color: var(--cemento); transition: background-color .3s, color .3s; }
.svc-hero__go svg { width: 14px; height: 14px; transform: rotate(90deg); }
.svc-hero__go:hover { background: var(--orange); color: var(--graphite); }
@media (min-width: 1000px) {
  .svc-hero__in { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: var(--s8); }
  .svc-hero__card { padding: var(--s7) var(--s6) var(--s6); }
}

/* cards: what a service covers */
.cards { display: grid; gap: var(--s4); }
@media (min-width: 700px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .cards { grid-template-columns: repeat(3, 1fr); } }
.card { display: grid; grid-template-rows: auto 1fr; background: var(--cemento); color: var(--ink); transition: transform .5s var(--ease); }
.card:hover { transform: translateY(-2px); }
.card__viz { position: relative; height: 232px; padding: var(--s5); display: flex; flex-direction: column; justify-content: center; gap: var(--s3); overflow: hidden; background: #f7f5f1; border-bottom: 1px solid rgba(17,17,19,.1); }
.card__viz::before { content: ""; position: absolute; left: 0; top: 0; width: 40px; height: 4px; background: var(--orange); }
.card__txt { padding: var(--s5) var(--s5) var(--s6); }
.card__txt h3 { font-size: clamp(26px, .9vw + 18px, 34px); margin-bottom: var(--s3); }
.card__txt p { margin: 0; color: #4a4946; max-width: 40ch; }

/* drawings inside the cards (light ground) */
.viz-cap { margin: 0; font: 500 11px/1.2 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: #5e5c58; }
.card .bars { height: 140px; border-bottom-color: rgba(17,17,19,.3); padding: 0 2%; gap: 8%; }
.card .bars i { background: #cfcac2; }
.card .bars i.o { background: var(--orange); }
.card .chips span { background: #fff; border-color: rgba(17,17,19,.14); }
.card .formats { height: 168px; }
.card .formats i { border-color: var(--ink); color: var(--ink); background: #fff; }
.card .formats i.o { border-color: var(--orange); background: var(--orange); color: var(--graphite); }
.card .spark { max-height: 96px; }
.tbl--mini { font-size: 13px; background: #fff; }
.tbl--mini th { padding: 10px 12px; border-bottom-color: rgba(17,17,19,.2); }
.tbl--mini td { padding: 10px 12px; }
.tbl--mini td.hl { color: var(--orange-deep); font-weight: 600; }
.hbars { display: grid; gap: 12px; }
.hbars__r { display: grid; grid-template-columns: 92px 1fr 56px; gap: 12px; align-items: center; font-size: 13px; }
.hbars__r i { display: block; height: 12px; width: calc(var(--w) * 1%); background: var(--ink); transform-origin: 0 50%; }
.hbars__r i.o { background: var(--orange); }
.hbars__r b { font: 600 13px/1 var(--f-mono); text-align: right; }
.flowv { display: grid; gap: 10px; justify-items: start; }
.flowv span { position: relative; padding: 8px 14px; border: 1px solid rgba(17,17,19,.3); background: #fff; font: 500 11px/1.2 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; }
.flowv span + span { margin-left: 28px; }
.flowv span + span::before { content: ""; position: absolute; left: -16px; top: -11px; width: 16px; height: calc(50% + 11px); border-left: 1px solid rgba(17,17,19,.4); border-bottom: 1px solid rgba(17,17,19,.4); }
.flowv span:nth-child(3) { margin-left: 56px; } .flowv span:nth-child(4) { margin-left: 84px; }
.flowv span.o { background: var(--orange); border-color: var(--orange); color: var(--graphite); font-weight: 600; }
.tree { display: grid; justify-items: center; gap: 0; }
.tree__root { padding: 10px 22px; background: var(--ink); color: var(--cemento); font: 600 12px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; position: relative; margin-bottom: 26px; }
.tree__root::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1px; height: 13px; background: rgba(17,17,19,.5); }
.tree__kids { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: 100%; padding-top: 13px; }
.tree__kids::before { content: ""; position: absolute; top: 0; left: 12.5%; right: 12.5%; height: 1px; background: rgba(17,17,19,.5); }
.tree__kids span { position: relative; padding: 9px 4px; border: 1px solid rgba(17,17,19,.3); background: #fff; text-align: center; font: 500 10.5px/1.2 var(--f-mono); letter-spacing: .04em; text-transform: uppercase; }
.tree__kids span::before { content: ""; position: absolute; left: 50%; bottom: 100%; width: 1px; height: 13px; background: rgba(17,17,19,.5); }
.tree__kids span:first-child { background: var(--orange); border-color: var(--orange); color: var(--graphite); }
.phones { display: flex; justify-content: center; align-items: flex-end; gap: 20px; height: 176px; }
.phone { width: 76px; height: 156px; border: 2px solid var(--ink); border-radius: 12px; background: #fff; padding: 18px 8px 8px; display: grid; gap: 6px; align-content: start; position: relative; }
.phone::before { content: ""; position: absolute; top: 7px; left: 50%; width: 22px; height: 4px; margin-left: -11px; background: var(--ink); border-radius: 2px; }
.phone i { display: block; height: 10px; background: #e3dfd8; }
.phone i:first-child { height: 46px; background: var(--ink); }
.phone--o { height: 176px; } .phone--o i:first-child { background: var(--orange); }
.kpim { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s3); }
.kpim > div { display: grid; gap: 6px; }
.kpim__l { font: 500 11px/1.2 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: #5e5c58; }
.kpim__v { font-size: 48px; line-height: .9; font-weight: 600; letter-spacing: -.03em; }
.kpim__d { font-style: normal; font-size: 12px; font-weight: 600; padding: 5px 8px; background: var(--orange); color: var(--graphite); }
.aians { background: #fff; border: 1px solid rgba(17,17,19,.14); padding: 14px 16px; display: grid; gap: 10px; }
.aians__q { margin: 0; font-weight: 600; font-size: 14px; }
.aians__q::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; background: var(--orange); }
.aians__a { display: grid; gap: 6px; }
.aians__a i { display: block; height: 7px; background: #e3dfd8; }
.aians__a i:nth-child(2) { width: 88%; } .aians__a i:nth-child(3) { width: 62%; }
.aians__src { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font: 500 11px/1 var(--f-mono); color: #5e5c58; }
.aians__src span:first-child { letter-spacing: .12em; text-transform: uppercase; }
.aians__src b { padding: 5px 8px; background: var(--orange); color: var(--graphite); font-weight: 600; }
.aians__src span:last-child { padding: 5px 8px; border: 1px solid rgba(17,17,19,.14); }

/* panels: a small dashboard on a light ground */
.panel { background: var(--cemento); color: var(--ink); }
.panel__head { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); padding: var(--s4) var(--s5); border-bottom: 1px solid rgba(17,17,19,.12); }
.panel__meta { font: 500 11px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: #5e5c58; }
.panel__body { padding: var(--s5); display: grid; gap: var(--s5); }
@media (min-width: 900px) { .panel__body { padding: var(--s6); } }
.panels { display: grid; gap: var(--s4); }
@media (min-width: 1000px) { .panels { grid-template-columns: 1fr 1fr; align-items: start; } }
.panel .gantt__scale, .panel .gantt__row { grid-template-columns: minmax(120px, 28%) 1fr 84px; }
.panel .gantt__row { font-size: 14px; padding: 14px 0; }
.panel .gantt__track { height: 16px; }
.panel .wf { height: 320px; }
.panel--wide { margin-top: var(--s6); }
.plan__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--s4); }
.plan__top > div { display: grid; gap: 8px; }
.plan__n { font-size: clamp(56px, 6vw, 104px); line-height: .85; font-weight: 600; letter-spacing: -.04em; color: var(--orange-deep); }
.plan__meta { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #5e5c58; }
.panel .stack { margin: 0; }
.tbl--plan { font-size: 14px; }
.tbl--plan td { padding: 12px 0; }
.tbl__bar { width: 34%; padding-right: var(--s4) !important; }
.tbl__bar i { display: block; height: 10px; width: calc(var(--w) * 1%); background: var(--orange); transform-origin: 0 50%; }
@media (max-width: 599px) { .tbl--plan td:nth-child(2), .tbl--plan th:nth-child(2) { display: none; } }

/* the case: three big results */
.kpis { display: grid; gap: var(--s4); }
@media (min-width: 900px) { .kpis { grid-template-columns: repeat(3, 1fr); } }
.kpi { position: relative; background: #fff; padding: var(--s6) var(--s5) var(--s5); display: grid; gap: var(--s3); align-content: start; }
.kpi::before { content: ""; position: absolute; left: 0; top: 0; width: 72px; height: 6px; background: var(--orange); }
.kpi__l { font: 500 var(--t-xs)/1.3 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: #5e5c58; }
.kpi__v { font: 600 clamp(64px, 6vw, 112px)/.85 var(--f-mono); letter-spacing: -.05em; color: var(--ink); }
.kpi__from { color: #5e5c58; font-size: var(--t-sm); }
.kpi__d { justify-self: start; font: 600 14px/1 var(--f-mono); font-style: normal; padding: 7px 10px; background: var(--orange); color: var(--graphite); }

/* when people call us, next to the person who answers */
.fitp { display: grid; gap: var(--s7); }
@media (min-width: 1000px) { .fitp { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: var(--s8); align-items: start; } .pcard { position: sticky; top: calc(var(--nav-h) + var(--s5)); } }
.fitp .marks { margin-top: var(--s5); }
.pcard { background: var(--cemento); color: var(--ink); display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); position: relative; }
.pcard::before { content: ""; position: absolute; left: 0; top: 0; width: 72px; height: 8px; background: var(--orange); z-index: 1; }
.pcard img { width: 100%; height: 100%; min-height: 300px; object-fit: cover; object-position: 50% 25%; filter: grayscale(1); }
.pcard__txt { padding: var(--s6) var(--s5) var(--s5); display: grid; gap: var(--s3); align-content: end; }
.pcard__k { font: 500 11px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--orange-deep); }
.pcard h3 { font-size: clamp(32px, 2vw + 16px, 48px); line-height: .9; }
.pcard__r { font: 500 11px/1.3 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: #5e5c58; }
.pcard p { margin: var(--s2) 0 var(--s3); color: #3a3936; font-size: var(--t-sm); }
.pcard .btn { justify-self: start; }
@media (max-width: 559px) { .pcard { grid-template-columns: 1fr; } .pcard img { aspect-ratio: 4 / 3; min-height: 0; } }

/* the logo wall: groups, every tile the same size */
.lwall { border-top: 1px solid var(--line); }
.lwall__g { display: grid; gap: var(--s4); padding: var(--s5) 0; border-bottom: 1px solid var(--line); }
.lwall__h { margin: 0; display: flex; align-items: center; gap: var(--s3); font: 500 var(--t-xs)/1.2 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--fg); }
.lwall__h::before { content: ""; width: 8px; height: 8px; background: var(--orange); flex: 0 0 auto; }
.lwall__tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (min-width: 600px) { .lwall__tiles { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1100px) { .lwall__g { grid-template-columns: 240px 1fr; align-items: start; } .lwall__h { padding-top: 34px; } .lwall__tiles { grid-template-columns: repeat(6, 1fr); } }
.lwall__t { height: 88px; display: grid; place-items: center; background: var(--asphalt); padding: 0 18px; transition: background-color .3s; }
.lwall__t:hover { background: #333336; }
.lwall__t img { width: auto; height: calc(var(--lh, 28) * .85px); max-width: 88%; object-fit: contain; opacity: .92; }
@media (min-width: 1100px) { .lwall__t img { height: calc(var(--lh, 28) * 1px); } }
.lwall__t--txt { font: 600 12px/1.2 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--cemento); text-align: center; }

/* vs table also used on the finance page */
@media (min-width: 900px) { .vs__head .vs__b { white-space: nowrap; } }
.marks li { grid-template-columns: 24px 1fr; }
.marks .mk, .marks li.on .mk, html:not(.js) .marks .mk, .no-motion .marks .mk { width: 8px; height: 8px; }
.marks .mk { background: var(--line-strong); } .marks li.on .mk { background: var(--orange); }
/* steps as cards in a row, each with its progress on top */
.steps { gap: var(--s3); border-bottom: 0; padding-bottom: 0; }
.step { display: flex; flex-direction: column; gap: var(--s4); background: var(--surface); padding: var(--s5) var(--s5) var(--s6); }
.step .step__tick { order: -1; width: calc(var(--k) / var(--n) * 100%); height: 4px; background: var(--orange); transform-origin: 0 50%; }
.step .step__body { order: 0; padding: 0; }
.step__body h3 { margin-top: 0; }
.step__body p { max-width: 36ch; }
@media (min-width: 900px) { .steps { align-items: stretch; gap: var(--s3); } .step { justify-content: flex-start; } .step .step__tick { width: calc(var(--k) / var(--n) * 100%); height: 4px; transform-origin: 0 50%; } .step .step__body { order: 0; padding-bottom: 0; } }
.section.light .panel { background: #fff; }
.section.light .panel .panel__head { border-bottom-color: rgba(17,17,19,.1); }
.wf__c.o i { background: var(--orange); }
@media (min-width: 600px) { .panel .wf__l { font-size: 12px; } }
.wf__l span { overflow-wrap: anywhere; min-width: 0; }
.panel .gantt.viz { background: transparent; padding: 0; overflow: visible; }
@media (min-width: 1000px) { .panels { align-items: stretch; } }
.step { min-width: 0; }
.step__body h3 { overflow-wrap: anywhere; hyphens: auto; }
@media (min-width: 900px) and (max-width: 1279px) { .steps[style*="--n:6"] { grid-template-columns: repeat(3, 1fr); } }

/* ---------------- contact: the letter ---------------- */
.chero { padding: calc(var(--nav-h) + var(--s8)) 0 var(--s6); }
.chero h1 { font-size: clamp(56px, 7vw + 12px, 160px); margin: var(--s5) 0; max-width: 12ch; }
.chero h1 .o { color: var(--orange); }
.chero .lead { max-width: 58ch; color: #d6d3cd; }
.ccontact { padding-top: var(--s6); }
.ccontact__grid { display: grid; gap: var(--s8); }
@media (min-width: 1000px) { .ccontact__grid { grid-template-columns: minmax(0, 1.7fr) minmax(260px, .8fr); align-items: start; } }
.letter { position: relative; background: var(--cemento); color: var(--ink); padding: var(--s7) var(--s5) var(--s6); display: grid; gap: var(--s5); }
.letter::before { content: ""; position: absolute; left: 0; top: 0; width: 96px; height: 8px; background: var(--orange); }
@media (min-width: 900px) { .letter { padding: var(--s8) var(--s7) var(--s7); } }
.letter__line { margin: 0; font: 800 clamp(30px, 2.6vw + 14px, 58px)/1.25 var(--f-display); text-transform: uppercase; letter-spacing: .005em; }
.lfield { display: inline-block; vertical-align: baseline; }
.lfield input, .lfield textarea { font: inherit; text-transform: none; color: var(--orange-deep); background: transparent; border: 0; border-bottom: 3px solid rgba(17,17,19,.25); border-radius: 0; padding: 0 4px; min-width: 3ch; max-width: 100%; outline: none; transition: border-color .25s; }
.lfield input::placeholder, .lfield textarea::placeholder { color: rgba(17,17,19,.32); text-transform: lowercase; }
.lfield input:focus, .lfield textarea:focus { border-bottom-color: var(--orange); }
.lfield.bad input, .lfield.bad textarea { border-bottom-color: #d9230f; background: rgba(255,90,31,.08); }
.lfield--area { display: block; margin-top: var(--s2); }
.lfield--area textarea { width: 100%; resize: none; overflow: hidden; line-height: 1.25; display: block; }
.nowrap { white-space: nowrap; }
.lchoice { display: inline; }
.lchoice i { font-style: normal; color: rgba(17,17,19,.3); margin: 0 .15em; }
.lopt { position: relative; display: inline; cursor: pointer; }
.lopt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.lopt span { color: rgba(17,17,19,.38); border-bottom: 3px solid transparent; transition: color .25s, border-color .25s, background-color .25s; padding: 0 .08em; }
.lopt:hover span { color: var(--ink); }
.lopt input:checked + span { color: var(--ink); background: var(--orange); border-bottom-color: var(--ink); }
.lopt input:focus-visible + span { outline: 2px solid var(--orange); outline-offset: 3px; }
.lchoice.bad .lopt span { border-bottom-color: #d9230f; }
.letter__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s5); margin-top: var(--s3); padding-top: var(--s5); border-top: 1px solid rgba(17,17,19,.14); }
.letter__send { min-height: 60px; }
.letter__who { display: flex; align-items: center; gap: var(--s3); }
.letter__who[hidden] { display: none; }
.letter__who img { width: 44px; height: 55px; object-fit: cover; object-position: 50% 30%; filter: grayscale(1); }
.letter__who p { margin: 0; display: grid; gap: 2px; }
.letter__who span { font: 500 11px/1.3 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: #5e5c58; }
.letter__who span:first-child { color: var(--orange-deep); }
.letter__who b { font: 800 20px/1 var(--f-display); text-transform: uppercase; }
.letter__note { margin: 0; min-height: 1.4em; font-size: var(--t-sm); color: #b3200c; }
.letter__note.ok { color: #1f6b3a; }
.cside { display: grid; gap: 0; border-top: 1px solid var(--line); }
.cside__b { padding: var(--s5) 0; border-bottom: 1px solid var(--line); display: grid; gap: var(--s3); }
.cside__b h2 { font-size: clamp(26px, 1vw + 18px, 34px); display: flex; align-items: center; gap: var(--s3); }
.cside__b h2::before { content: ""; width: 8px; height: 8px; background: var(--orange); flex: 0 0 auto; }
.cside__b p { margin: 0; color: #c9c6c0; }
.cside__mail { display: grid; grid-template-columns: 1fr auto; gap: 4px var(--s3); align-items: center; padding: var(--s4); background: var(--surface); transition: background-color .3s, color .3s; }
.cside__mail span { grid-column: 1; font: 500 11px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.cside__mail b { grid-column: 1; font-weight: 600; overflow-wrap: anywhere; }
.cside__mail svg { grid-column: 2; grid-row: 1 / 3; width: 16px; height: 16px; transition: transform .4s var(--ease); }
.cside__mail:hover { background: var(--orange); color: var(--graphite); }
.cside__mail:hover span { color: var(--graphite); }
.cside__mail:hover svg { transform: translateX(4px); }
.cserv__list { border-top: 1px solid var(--line); }
.cserv__r { display: grid; grid-template-columns: 1fr auto; gap: 6px var(--s4); align-items: center; padding: var(--s5) 0; border-bottom: 1px solid var(--line); transition: padding-left .5s var(--ease), color .3s; }
.cserv__n { font: 800 clamp(34px, 3.4vw + 12px, 72px)/.9 var(--f-display); text-transform: uppercase; }
.cserv__d { grid-column: 1; color: var(--muted); font-size: var(--t-sm); }
.cserv__w { grid-column: 1; font: 500 11px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--orange); }
.cserv__r svg { grid-column: 2; grid-row: 1 / 4; width: 22px; height: 22px; transition: transform .4s var(--ease); }
.cserv__r:hover { padding-left: var(--s4); color: var(--orange); }
.cserv__r:hover svg { transform: translateX(6px); }
@media (min-width: 900px) { .cserv__r { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 200px 40px; } .cserv__d, .cserv__w { grid-column: auto; } .cserv__r svg { grid-column: 4; grid-row: 1; } }
/* the floating H: stronger, and lifted when the site runs inside a frame (the host may cover the corner) */
.hcta { gap: 0; }
.hcta__h { width: 48px; height: 48px; padding: 8px; background: var(--graphite); border: 1px solid rgba(237,234,228,.16); box-sizing: border-box; }
.hcta span { display: flex; align-items: center; height: 48px; padding: 0 16px; background: var(--orange); color: var(--graphite); border: 0; }
.hcta:hover span { background: var(--cemento); color: var(--ink); }
@media (max-width: 699px) { .hcta__h { width: 42px; height: 42px; padding: 7px; } .hcta span { height: 42px; padding: 0 12px; } }
/* the badge is visible at rest; it only slides in, opacity never changes */
/* the floating H waits until the page header has been scrolled past */
.hcta { transition: opacity .45s var(--ease), transform .6s var(--ease), visibility 0s linear .6s; }
.js .hcta:not(.is-on) { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(24px); }
.js .hcta.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .45s var(--ease), transform .6s var(--ease), visibility 0s; }

/* =====================================================================
   v21: home hero centred; studio and team on the service template
   ===================================================================== */
.hero--center { justify-content: center; padding-bottom: var(--s8); }
.hero--center .lead { max-width: 56ch; color: #fff; }
.hero--center .lead strong { color: #fff; font-weight: 600; }

/* studio hero card: you, the struck-out layers, whoever does the work */
.scard { gap: var(--s5); }
.scard__k { margin: 0; font: 500 11px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--orange-deep); }
.scard__chain { display: grid; gap: 10px; justify-items: stretch; position: relative; }
.scard__n { display: block; padding: 16px 18px; background: var(--ink); color: var(--cemento); font: 800 clamp(22px, 1.4vw + 12px, 32px)/1 var(--f-display); text-transform: uppercase; letter-spacing: .01em; }
.scard__n--o { background: var(--orange); color: var(--graphite); }
.scard__x { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 0 0 0 24px; position: relative; }
.scard__x::before { content: ""; position: absolute; left: 10px; top: -10px; bottom: -10px; width: 1px; background: rgba(17,17,19,.45); }
.scard__x s { display: block; padding: 10px 6px; border: 1px dashed rgba(17,17,19,.35); color: #77746f; text-align: center; font: 500 10.5px/1.2 var(--f-mono); letter-spacing: .04em; text-transform: uppercase; text-decoration-color: var(--orange); text-decoration-thickness: 2px; overflow-wrap: anywhere; }
.scard__foot { display: flex; align-items: center; gap: var(--s4); padding-top: var(--s4); border-top: 1px solid rgba(17,17,19,.16); }
.scard__faces { display: flex; }
.scard__faces img { width: 44px; height: 54px; object-fit: cover; object-position: 50% 28%; filter: grayscale(1); border: 2px solid var(--cemento); }
.scard__faces img + img { margin-left: -12px; }
.scard__foot p { margin: 0; display: grid; gap: 2px; min-width: 0; }
.scard__foot b { font: 800 20px/1 var(--f-display); text-transform: uppercase; }
.scard__foot span { font: 500 11px/1.3 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: #5e5c58; }

/* team hero card: four portraits */
.tgrid { gap: var(--s4); }
.tgrid__g { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tcard2 { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 4.4; background: var(--ink); }
.tcard2 img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 26%; filter: grayscale(1); transition: transform .7s var(--ease); }
.tcard2:hover img { transform: scale(1.03); }
.tcard2 span { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 2px; padding: 10px 12px; background: linear-gradient(to top, rgba(17,17,19,.92), rgba(17,17,19,0)); color: var(--cemento); font: 500 10px/1.2 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; }
.tcard2 b { font: 800 clamp(18px, 1vw + 12px, 26px)/1 var(--f-display); letter-spacing: .01em; }
.tcard2::before { content: ""; position: absolute; left: 0; top: 0; width: 0; height: 4px; background: var(--orange); z-index: 1; transition: width .5s var(--ease); }
.tcard2:hover::before, .tcard2:first-child::before { width: 40px; }

/* agreement and offices panels */
.tbl--agr td.hl { color: var(--orange-deep); font-weight: 600; }
.tbl .dot { display: inline-block; width: 8px; height: 8px; margin-right: 10px; background: var(--orange); vertical-align: 1px; }

/* the people strip on the studio page */
.minis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
@media (min-width: 1000px) { .minis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mini { position: relative; display: grid; gap: 4px; background: var(--cemento); color: var(--ink); padding: 0 0 var(--s5); transition: transform .5s var(--ease); }
.mini:hover { transform: translateY(-2px); }
.mini::before { content: ""; position: absolute; left: 0; top: 0; width: 56px; height: 6px; background: var(--orange); z-index: 1; }
.mini img { width: 100%; height: auto; aspect-ratio: 4 / 3.8; object-fit: cover; object-position: 50% 26%; filter: grayscale(1); margin-bottom: var(--s4); }
.mini > span, .mini > b { padding: 0 var(--s4); }
.mini__s { font: 500 11px/1.2 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--orange-deep); }
.mini__n { font: 800 clamp(22px, 1.2vw + 14px, 32px)/1 var(--f-display); text-transform: uppercase; }
.mini__r { font: 500 11px/1.3 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: #5e5c58; padding-right: 56px !important; }
.mini__go { position: absolute; right: var(--s4); bottom: var(--s4); width: 40px; height: 40px; display: grid; place-items: center; background: var(--ink); color: var(--cemento); transition: background-color .3s, color .3s; }
.mini__go svg { width: 14px; height: 14px; }
.mini:hover .mini__go { background: var(--orange); color: var(--graphite); }

/* team: the four profiles */
.pros { display: grid; gap: var(--s4); }
@media (min-width: 1200px) { .pros { grid-template-columns: 1fr 1fr; } }
.pro { position: relative; display: grid; background: var(--cemento); color: var(--ink); scroll-margin-top: calc(var(--nav-h) + var(--s5)); }
.pro::before { content: ""; position: absolute; left: 0; top: 0; width: 72px; height: 8px; background: var(--orange); z-index: 1; }
.pro__img { overflow: hidden; background: var(--ink); }
.pro__img img { width: 100%; height: 100%; aspect-ratio: 4 / 3.4; object-fit: cover; object-position: 50% 24%; filter: grayscale(1); transition: transform .8s var(--ease); }
.pro:hover .pro__img img { transform: scale(1.03); }
.pro__txt { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s6) var(--s5) var(--s5); min-width: 0; }
.pro__s { font: 500 11px/1.2 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--orange-deep); }
.pro h3 { font-size: clamp(34px, 2vw + 18px, 52px); line-height: .9; }
.pro__r { font: 500 11px/1.3 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: #5e5c58; }
.pro__txt > p { margin: var(--s3) 0 0; color: #3a3936; max-width: 46ch; }
.pro__tags { list-style: none; margin: var(--s3) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pro__tags li { padding: 7px 10px; background: #fff; border: 1px solid rgba(17,17,19,.12); font: 500 11px/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; }
.pro__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s4); margin-top: auto; padding-top: var(--s5); border-top: 1px solid rgba(17,17,19,.14); }
.pro__txt .pro__foot { margin-top: var(--s5); }
.pro__y { margin: 0; display: flex; align-items: baseline; gap: 10px; }
.pro__y b { font-size: 44px; line-height: .9; font-weight: 600; letter-spacing: -.04em; color: var(--orange-deep); }
.pro__y > span { font: 500 11px/1.3 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: #5e5c58; max-width: 12ch; }
.pro__link { margin-top: var(--s3); font-size: var(--t-sm); align-self: flex-start; }
@media (min-width: 640px) { .pro { grid-template-columns: minmax(0, .82fr) minmax(0, 1fr); } .pro__img img { aspect-ratio: auto; min-height: 100%; } }

/* who joins which project */
.tbl--mx th.c, .tbl--mx td.c { text-align: center; width: 13%; }
.mx { display: inline-block; width: 14px; height: 14px; border: 1.5px solid rgba(17,17,19,.55); vertical-align: middle; }
.mx--lead { background: var(--orange); border-color: var(--orange); }
.mx__key { margin: 0; display: flex; gap: var(--s5); font: 500 11px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: #5e5c58; }
.mx__key span { display: inline-flex; align-items: center; gap: 8px; }
@media (max-width: 479px) { .tbl--mx { font-size: 12px; } .tbl--mx th.c { font-size: 10px; letter-spacing: 0; } }

/* the network */
.net { display: grid; gap: var(--s4); }
@media (min-width: 700px) { .net { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .net { grid-template-columns: repeat(4, 1fr); } }
.net__i { position: relative; display: flex; flex-direction: column; gap: var(--s3); padding: var(--s6) var(--s5) var(--s5); background: var(--asphalt); min-height: 220px; transition: transform .5s var(--ease), background-color .3s; }
.net__i:hover { transform: translateY(-2px); background: #313134; }
.net__i::before { content: ""; position: absolute; left: 0; top: 0; width: 40px; height: 4px; background: var(--orange); }
.net__i h3 { font-size: clamp(24px, 1vw + 16px, 30px); }
.net__i p { margin: 0; color: #c9c6c0; font-size: var(--t-sm); }
.net__i span { margin-top: auto; font: 500 11px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--orange); }
.scard__faces { flex: 0 0 auto; }
@media (max-width: 479px) { .scard__faces img { width: 34px; height: 42px; } .scard__faces img + img { margin-left: -10px; } .scard__foot b { font-size: 17px; } .scard__foot { gap: var(--s3); } }

/* ---------------- advertising: the world map of markets and clients ---------------- */
.wsec__head { display: grid; gap: var(--s5); align-items: end; margin-bottom: var(--s6); }
@media (min-width: 1000px) { .wsec__head { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--s8); } }
.wsec__big { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s4) var(--s5); margin-top: var(--s5); font-size: inherit; line-height: 1; }
.wsec__n { font: 600 clamp(96px, 12vw, 220px)/.8 var(--f-mono); letter-spacing: -.06em; color: var(--orange); }
.wsec__cap { font: 800 clamp(24px, 1.8vw + 12px, 40px)/1 var(--f-display); text-transform: uppercase; padding-bottom: .2em; }
.wsec__cap em { font-style: normal; color: var(--orange); }
.wmap { position: relative; background: var(--asphalt); padding: clamp(12px, 3vw, 48px); overflow: hidden; }
.wmap::before { content: ""; position: absolute; left: 0; top: 0; width: 72px; height: 6px; background: var(--orange); }
.wmap svg { width: 100%; height: auto; overflow: visible; }
.wmap__land { fill: #3b3b3f; }
.wmap__mk { fill: var(--orange); opacity: .92; animation: wmap-in 1.2s var(--ease) both; animation-delay: calc(var(--i) * .15s + .2s); }
@keyframes wmap-in { from { opacity: .25; } }
.wmap__line { fill: none; stroke: var(--cemento); stroke-width: 1.4; opacity: .8; }
.wmap__tag { fill: var(--cemento); }
.wmap__pin text { font: 600 14px/1 var(--f-mono); letter-spacing: .1em; fill: var(--ink); }
.wmap__dot { fill: var(--cemento); stroke: var(--ink); stroke-width: 2.5; }
.wmap__wave { fill: none; stroke: var(--cemento); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: wmap-wave 2.4s ease-out infinite; animation-delay: calc(var(--i) * .5s); }
@keyframes wmap-wave { from { transform: scale(1); opacity: .9; } to { transform: scale(4.5); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .wmap__mk, .wmap__wave { animation: none; } }
@media (max-width: 699px) { .wmap__pin text { font-size: 18px; } }
.wkey { display: grid; gap: var(--s4); margin-top: var(--s4); }
@media (min-width: 800px) { .wkey { grid-template-columns: 1fr 1fr; } }
.wkey__g { display: grid; gap: var(--s3); padding: var(--s5); background: var(--asphalt); }
.wkey__h { margin: 0; display: flex; align-items: center; gap: var(--s3); font: 500 var(--t-xs)/1.2 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; }
.wkey__k { width: 14px; height: 14px; background: var(--orange); flex: 0 0 auto; }
.wkey__k--c { background: var(--cemento); border-radius: 50%; box-shadow: 0 0 0 3px var(--asphalt), 0 0 0 4px var(--cemento); width: 10px; height: 10px; margin: 0 2px; }
.wkey ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.wkey li { padding: 8px 12px; border: 1px solid var(--line-strong); font: 600 13px/1 var(--f-display); font-family: var(--f-text); }

/* contact: everyone who will answer */
.letter__who { display: grid; gap: var(--s3); align-items: start; }
.letter__wh { margin: 0; font: 500 11px/1.3 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--orange-deep); }
.letter__ppl { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); }
.letter__ppl li { display: flex; align-items: center; gap: var(--s3); }
.letter__ppl li.is-new { animation: who-in .6s var(--ease); }
@keyframes who-in { from { transform: translateX(-12px); } }
.letter__ppl img { width: 40px; height: 50px; object-fit: cover; object-position: 50% 30%; filter: grayscale(1); }
.letter__ppl p { margin: 0; display: grid; gap: 2px; }
.letter__ppl b { font: 800 18px/1 var(--f-display); text-transform: uppercase; }
.letter__ppl span { font: 500 10.5px/1.3 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: #5e5c58; }

/* ---------------- home: case studies, dark case files in the services carousel ---------------- */
.cases { padding-bottom: clamp(64px, 7vw, 104px); }
.slide--case { --sbg: var(--asphalt); color: var(--cemento); }
.carousel--cases.is-live .slide:not(.is-current) { opacity: .45; }
.cfile { width: 100%; display: flex; flex-direction: column; position: relative; border: 1px solid rgba(237,234,228,.12); }
.cfile::before { content: ""; position: absolute; left: -1px; top: -1px; width: 72px; height: 8px; background: var(--orange); }
.cfile__top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4); padding: var(--s5) var(--s5) var(--s4); border-bottom: 1px dashed rgba(237,234,228,.22); font: 500 11px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; }
.cfile__tag { padding: 8px 10px; background: var(--orange); color: var(--graphite); font-weight: 600; }
.cfile__ph { padding: 7px 9px; border: 1px solid var(--orange); color: var(--orange); }
.cfile__n { color: var(--muted); }
.cfile__sec { margin-left: auto; color: var(--muted); }
.cfile__in { flex: 1; display: grid; gap: var(--s6); padding: var(--s6) var(--s5) var(--s5); }
.cfile__txt { display: flex; flex-direction: column; min-width: 0; }
.cfile__svc { margin: 0 0 var(--s3); font: 500 var(--t-xs)/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--orange); }
.cfile__h { font-size: clamp(40px, 4.6vw, 92px); line-height: .88; margin-bottom: var(--s5); max-width: 12ch; }
.cfile__h .o { color: var(--orange); }
.cfile__ctx { margin: 0 0 var(--s6); max-width: 44ch; color: #c9c6c0; font-size: var(--t-lead); line-height: 1.45; }
.cfile__foot { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s4); padding-top: var(--s4); border-top: 1px solid rgba(237,234,228,.14); }
.cfile__who { display: flex; align-items: center; gap: var(--s3); }
.cfile__who img { width: 44px; height: 55px; object-fit: cover; object-position: 50% 30%; filter: grayscale(1); }
.cfile__who p { margin: 0; display: grid; gap: 3px; }
.cfile__who span { font: 500 10.5px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.cfile__who b { font: 800 20px/1 var(--f-display); text-transform: uppercase; }
.cfile__link { display: inline-flex; align-items: center; gap: var(--s3); font-weight: 600; padding: 14px 18px; background: var(--cemento); color: var(--ink); transition: background-color .3s, color .3s; }
.cfile__link:hover { background: var(--orange); color: var(--graphite); }
.cfile__link svg { width: 14px; height: 14px; transition: transform .4s var(--ease); }
.cfile__link:hover svg { transform: translateX(4px); }
.cfile__kpis { display: grid; gap: 1px; align-content: start; background: rgba(237,234,228,.12); border: 1px solid rgba(237,234,228,.12); }
.cfile__kh { margin: 0; padding: var(--s3) var(--s4); background: var(--graphite); font: 500 11px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.ck { display: grid; gap: 6px; padding: var(--s4); background: var(--graphite); }
.ck__l { font: 500 11px/1.3 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.ck__row { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.ck__v { font: 600 clamp(40px, 3.6vw, 64px)/.9 var(--f-mono); letter-spacing: -.05em; }
.ck__d { font: 600 13px/1 var(--f-mono); font-style: normal; padding: 6px 9px; background: var(--orange); color: var(--graphite); }
.ck__n { font-size: var(--t-sm); color: #a3a09b; }
.ck__bars { display: grid; gap: 4px; margin-top: 4px; }
.ck__bars i { display: block; height: 6px; width: calc(var(--w) * 1%); background: #4a4a4e; }
.ck__bars i.o { background: var(--orange); }
@media (min-width: 900px) {
  .slide--case { min-height: min(78svh, 720px); }
  .cfile__top { padding: var(--s5) var(--s7) var(--s4); }
  .cfile__in { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: var(--s7); padding: var(--s7); }
}
@media (max-width: 599px) { .cfile__sec { margin-left: 0; flex-basis: 100%; } }

/* ---------------- case studies: the same case file on service pages and on its own page ---------------- */
.ccase { display: flex; background: var(--asphalt); color: var(--cemento); scroll-margin-top: calc(var(--nav-h) + var(--s5)); }
.ccase[hidden] { display: none; }
.cases__all { margin-top: var(--s5); }
.ccases { display: grid; gap: var(--s5); }
.cfilter { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s6); }
.cfilter__b { padding: 12px 16px; border: 1px solid var(--line-strong); font: 500 var(--t-xs)/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--fg); transition: background-color .3s, color .3s, border-color .3s; }
.cfilter__b:hover { border-color: var(--cemento); }
.cfilter__b[aria-pressed="true"] { background: var(--orange); border-color: var(--orange); color: var(--graphite); }
#case .panel--wide { margin-top: var(--s4); }