/* =====================================================================
   TYPE A · v4  —  built from Kris's picks
   Studio Aton (structure) · Arbiter (type + interactions)
   Velvo (case study) · Zorven (client grid)

   HOW TO EDIT
   - Colours and fonts live in the THEMES block below. Change a value once,
     the whole site follows.
   - Each section is labelled with a banner comment so you can find it.
   ===================================================================== */

/* ---------- THEMES ----------
   Three independent switches on <html>, all set from the Theme panel:
     data-look   = colour scheme   (10)
     data-type   = type pairing    (8)
     data-corner = corner style    (3)
   A "look preset" in the panel simply sets all three at once.
   ---------------------------------------------------------------- */
:root,
:root[data-look="paper"] {      /* Type A — black on warm white */
  --bg: #F3F2EE;            /* light breaker sections (off-white) */
  --bg-2: #FFFFFF;          /* cards */
  --bg-3: #E8E7E2;          /* soft panels */
  --ink: #111111;           /* main text */
  --muted: #6E6E6A;         /* secondary text */
  --line: rgba(17,17,17,.14);
  --accent: #111111;        /* dots, italic numbers, highlights */
  --accent-ink: #FFFFFF;    /* text on accent */
  --inv-bg: #0D0D0E;        /* black breaker sections */
  --inv-bg-2: #1A1918;
  --inv-ink: #FFECD5;
  --inv-muted: #A99A88;
  --inv-line: rgba(255,236,213,.16);
  --logo: invert(1);        /* logos are white files */
  --inv-logo: none;
  --inv-accent: #FFECD5;    /* highlight colour inside dark sections */
  --inv-accent-ink: #111111;
  color-scheme: light;
}
:root[data-look="signal"] {     /* Arbiter — paper white + vermilion */
  --bg: #F2F1ED; --bg-2: #FFFFFF; --bg-3: #E6E4DE;
  --ink: #141413; --muted: #6F6D68; --line: rgba(20,20,19,.14);
  --accent: #D4401F; --accent-ink: #FFFFFF;
  --inv-bg: #141413; --inv-bg-2: #1F1F1D; --inv-ink: #F2F1ED; --inv-muted: #8E8C86; --inv-line: rgba(242,241,237,.14);
  --logo: invert(1); --inv-logo: none;
  --inv-accent: #F0532F; --inv-accent-ink: #FFFFFF;
  color-scheme: light;
}
:root[data-look="ink"] {        /* Zorven — near-black, white type */
  --bg: #010004; --bg-2: #0E0E0E; --bg-3: #17171A;
  --ink: #FFFFFF; --muted: #8B8B8B; --line: rgba(255,255,255,.12);
  --accent: #FFFFFF; --accent-ink: #010004;
  --inv-bg: #F2F2EF; --inv-bg-2: #FFFFFF; --inv-ink: #010004; --inv-muted: #636363; --inv-line: rgba(1,0,4,.12);
  --logo: none; --inv-logo: invert(1);
  --inv-accent: #010004; --inv-accent-ink: #FFFFFF;
  color-scheme: dark;
}
:root[data-look="cobalt"] {     /* Velvo — white + electric blue */
  --bg: #FFFFFF; --bg-2: #F3F4F8; --bg-3: #E7E9F2;
  --ink: #0A0A0A; --muted: #5F6170; --line: rgba(10,10,10,.12);
  --accent: #2134F5; --accent-ink: #FFFFFF;
  --inv-bg: #2134F5; --inv-bg-2: #3445FF; --inv-ink: #FFFFFF; --inv-muted: #C3C8FF; --inv-line: rgba(255,255,255,.22);
  --logo: invert(1); --inv-logo: none;
  --inv-accent: #FFFFFF; --inv-accent-ink: #2134F5;
  color-scheme: light;
}
:root[data-look="tangerine"] {  /* Loud — orange page, black type */
  --bg: #FF5A1F; --bg-2: #FF7643; --bg-3: #F04B12;
  --ink: #140A05; --muted: #5A2410; --line: rgba(20,10,5,.2);
  --accent: #140A05; --accent-ink: #FF5A1F;
  --inv-bg: #140A05; --inv-bg-2: #24140C; --inv-ink: #FFE9DF; --inv-muted: #C08770; --inv-line: rgba(255,233,223,.16);
  --logo: invert(1); --inv-logo: none;
  --inv-accent: #FF5A1F; --inv-accent-ink: #140A05;
  color-scheme: light;
}
:root[data-look="forest"] {     /* Deep green + brass */
  --bg: #0F241C; --bg-2: #163128; --bg-3: #1D3B30;
  --ink: #EAF0E6; --muted: #93A89A; --line: rgba(234,240,230,.14);
  --accent: #E2B866; --accent-ink: #0F241C;
  --inv-bg: #EAF0E6; --inv-bg-2: #FFFFFF; --inv-ink: #0F241C; --inv-muted: #56695E; --inv-line: rgba(15,36,28,.14);
  --logo: none; --inv-logo: invert(1);
  --inv-accent: #8C6420; --inv-accent-ink: #FFFFFF;
  color-scheme: dark;
}
:root[data-look="midnight"] {   /* Navy + periwinkle */
  --bg: #0E1320; --bg-2: #161D2E; --bg-3: #1C2438;
  --ink: #E9ECF3; --muted: #8C95AA; --line: rgba(233,236,243,.14);
  --accent: #8EB0FF; --accent-ink: #0E1320;
  --inv-bg: #E9ECF3; --inv-bg-2: #FFFFFF; --inv-ink: #0E1320; --inv-muted: #5D667B; --inv-line: rgba(14,19,32,.14);
  --logo: none; --inv-logo: invert(1);
  --inv-accent: #2F55D4; --inv-accent-ink: #FFFFFF;
  color-scheme: dark;
}
:root[data-look="lilac"] {      /* Soft violet + plum */
  --bg: #E7E3F4; --bg-2: #F6F4FC; --bg-3: #D9D3EE;
  --ink: #1F1633; --muted: #675E7E; --line: rgba(31,22,51,.14);
  --accent: #6B4CE6; --accent-ink: #FFFFFF;
  --inv-bg: #1F1633; --inv-bg-2: #2B2145; --inv-ink: #E7E3F4; --inv-muted: #A49BBE; --inv-line: rgba(231,227,244,.15);
  --logo: invert(1); --inv-logo: none;
  --inv-accent: #B9A8FF; --inv-accent-ink: #1F1633;
  color-scheme: light;
}
:root[data-look="blush"] {      /* Blush + burgundy */
  --bg: #F6E7E1; --bg-2: #FFF6F2; --bg-3: #EDD5CB;
  --ink: #3A0D17; --muted: #84565C; --line: rgba(58,13,23,.14);
  --accent: #B0213A; --accent-ink: #FFFFFF;
  --inv-bg: #3A0D17; --inv-bg-2: #4A1520; --inv-ink: #F6E7E1; --inv-muted: #C49A9E; --inv-line: rgba(246,231,225,.15);
  --logo: invert(1) sepia(.4) saturate(3) hue-rotate(-30deg) brightness(.45); --inv-logo: none;
  --inv-accent: #FF8A9B; --inv-accent-ink: #3A0D17;
  color-scheme: light;
}
:root[data-look="sand"] {       /* Warm sand + rust */
  --bg: #ECE5D8; --bg-2: #F7F2E9; --bg-3: #E1D8C8;
  --ink: #1E1A15; --muted: #75695B; --line: rgba(30,26,21,.15);
  --accent: #9A5B2E; --accent-ink: #F7F2E9;
  --inv-bg: #1E1A15; --inv-bg-2: #2A251E; --inv-ink: #ECE5D8; --inv-muted: #9C8F7E; --inv-line: rgba(236,229,216,.15);
  --logo: invert(.9) sepia(.3); --inv-logo: sepia(.2);
  --inv-accent: #D29A68; --inv-accent-ink: #1E1A15;
  color-scheme: light;
}

/* Type pairings.  --display = headlines, --sans = body, --serif = accent words,
   --mono = small labels.  Each pairing also sets weight, tracking and case. */
:root,
:root[data-type="arbiter"] {    /* Kris's pick (Arbiter): Switzer + Libre Caslon Condensed + Roboto Mono */
  --display: "Switzer", "Inter Tight", system-ui, sans-serif;
  --sans: "Switzer", "Inter Tight", system-ui, sans-serif;
  --serif: "Libre Caslon Condensed", "Libre Caslon Text", Georgia, serif;
  --mono: "Roboto Mono", ui-monospace, monospace;
  --head-weight: 500; --head-track: -0.05em; --head-case: none; --head-stretch: 100%;
  --it-style: italic; --it-weight: 400;
}
:root[data-type="brand"] {      /* Type A — Barlow + Playfair italic */
  --display: "Barlow", system-ui, sans-serif;
  --sans: "Barlow", system-ui, sans-serif;
  --serif: "Playfair Display", Georgia, serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --head-weight: 600; --head-track: -0.035em; --head-case: none; --head-stretch: 100%;
  --it-style: italic; --it-weight: 400;
}
:root[data-type="grotesk"] {    /* Aton — Inter Tight, heavy vs light */
  --display: "Inter Tight", system-ui, sans-serif;
  --sans: "Inter Tight", system-ui, sans-serif;
  --serif: "Inter Tight", system-ui, sans-serif;
  --mono: "Inter Tight", system-ui, sans-serif;
  --head-weight: 600; --head-track: -0.05em; --head-case: none; --head-stretch: 100%;
  --it-style: normal; --it-weight: 300;
}
:root[data-type="editorial"] {  /* Arbiter — grotesk + Instrument Serif italic */
  --display: "Inter Tight", system-ui, sans-serif;
  --sans: "Inter Tight", system-ui, sans-serif;
  --serif: "Instrument Serif", Georgia, serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --head-weight: 500; --head-track: -0.045em; --head-case: none; --head-stretch: 100%;
  --it-style: italic; --it-weight: 400;
}
:root[data-type="tech"] {       /* Zorven — light Inter Tight + Chivo Mono */
  --display: "Inter Tight", system-ui, sans-serif;
  --sans: "Inter Tight", system-ui, sans-serif;
  --serif: "Chivo Mono", ui-monospace, monospace;
  --mono: "Chivo Mono", ui-monospace, monospace;
  --head-weight: 400; --head-track: -0.04em; --head-case: none; --head-stretch: 100%;
  --it-style: normal; --it-weight: 300;
}
:root[data-type="geist"] {      /* Velvo — Geist, bold and plain */
  --display: "Geist", system-ui, sans-serif;
  --sans: "Geist", system-ui, sans-serif;
  --serif: "Geist", system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, monospace;
  --head-weight: 600; --head-track: -0.035em; --head-case: none; --head-stretch: 100%;
  --it-style: normal; --it-weight: 300;
}
:root[data-type="poster"] {     /* Loud — condensed capitals */
  --display: "Anton", Impact, sans-serif;
  --sans: "Inter Tight", system-ui, sans-serif;
  --serif: "Instrument Serif", Georgia, serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --head-weight: 400; --head-track: 0em; --head-case: uppercase; --head-stretch: 100%;
  --it-style: italic; --it-weight: 400;
}
:root[data-type="wide"] {       /* Expanded Archivo */
  --display: "Archivo", system-ui, sans-serif;
  --sans: "Archivo", system-ui, sans-serif;
  --serif: "Archivo", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --head-weight: 800; --head-track: -0.05em; --head-case: none; --head-stretch: 112%;
  --it-style: italic; --it-weight: 300;
}
:root[data-type="classic"] {    /* Fraunces serif + DM Sans */
  --display: "Fraunces", Georgia, serif;
  --sans: "DM Sans", system-ui, sans-serif;
  --serif: "Fraunces", Georgia, serif;
  --mono: "DM Sans", system-ui, sans-serif;
  --head-weight: 500; --head-track: -0.03em; --head-case: none; --head-stretch: 100%;
  --it-style: italic; --it-weight: 300;
}

/* Corner styles */
:root, :root[data-corner="round"] { --r: 18px; --r-s: 12px; --pill: 999px; }
:root[data-corner="soft"]  { --r: 6px; --r-s: 4px; --pill: 8px; }
:root[data-corner="sharp"] { --r: 0px; --r-s: 0px; --pill: 0px; }

/* ---------- BASE ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; background: var(--bg); }
.is-entering body { opacity: 0; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--sans); font-size: 16px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  transition: background-color .5s ease, color .5s ease;
}
img, video { display: block; max-width: 100%; }
video:not([controls])::-webkit-media-controls, video:not([controls])::-webkit-media-controls-start-playback-button, video:not([controls])::-webkit-media-controls-overlay-play-button { display: none !important; -webkit-appearance: none; opacity: 0 !important; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
::selection { background: var(--accent); color: var(--accent-ink); }

.wrap { width: 100%; max-width: 1440px; margin: 0 auto; padding-inline: clamp(16px, 3vw, 40px); }
.section { padding-block: clamp(80px, 11vw, 160px); position: relative; }
.inv { background: var(--inv-bg); color: var(--inv-ink); --bg: var(--inv-bg); --bg-3: var(--inv-bg-2); --ink: var(--inv-ink); --muted: var(--inv-muted); --line: var(--inv-line); --bg-2: var(--inv-bg-2); --logo: var(--inv-logo); }

/* Dark sections use the theme's dark-section highlight colour */
.inv, .ftr, .menu, .rcard, .plan--dark, .loader { --accent: var(--inv-accent); --accent-ink: var(--inv-accent-ink); }

/* ---------- TYPE ---------- */
.mono { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.label { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.label .count { color: var(--muted); opacity: .7; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; }
.paren { color: var(--muted); font-weight: 500; font-size: 15px; letter-spacing: -.01em; }
.h-xl, .h-l, .h-m, .h-s { font-family: var(--sans); font-family: var(--display); font-weight: var(--head-weight); text-transform: var(--head-case); font-stretch: var(--head-stretch); letter-spacing: var(--head-track); line-height: .95; margin: 0; }
.h-xl { font-size: clamp(56px, 11vw, 176px); }
.h-l { font-size: clamp(44px, 7vw, 112px); }
.h-m { font-size: clamp(34px, 4.6vw, 72px); line-height: 1; }
.h-s { font-size: clamp(24px, 2.4vw, 36px); line-height: 1.1; letter-spacing: -.02em; }
.it { font-family: var(--serif); font-style: var(--it-style); font-weight: var(--it-weight); letter-spacing: -.02em; }
.accent { color: var(--accent); }
.lead { font-size: clamp(18px, 1.6vw, 22px); line-height: 1.45; letter-spacing: -.01em; font-weight: 500; }
.body-m { color: var(--muted); font-size: 16px; }
.statement { font-family: var(--sans); font-weight: 500; font-size: clamp(24px, 2.8vw, 42px); line-height: 1.18; letter-spacing: -.025em; margin: 0; }

/* ---------- BUTTONS ---------- */
.pill {
  --pb: var(--ink); --pc: var(--bg);
  display: inline-flex; align-items: center; gap: 12px; height: 52px; padding: 0 26px;
  border-radius: var(--pill); background: var(--pb); color: var(--pc); white-space: nowrap;
  font-weight: 600; font-size: 16px; letter-spacing: -.01em; position: relative; overflow: hidden; isolation: isolate;
  transition: transform .3s cubic-bezier(.2,.8,.2,1);
}
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.pill::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--accent); transform: translateY(101%); transition: transform .45s cubic-bezier(.7,0,.2,1); z-index: -1; }
.pill:hover::after { transform: translateY(0); }
.pill:hover { color: var(--accent-ink); }
.pill:hover::before { transform: scale(1.6); }
:root[data-look="paper"] .pill:hover, :root:not([data-look]) .pill:hover { color: var(--bg); }
.pill--ghost { --pb: transparent; --pc: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.pill--light { --pb: #fff; --pc: #111; }
.pill--sm { height: 40px; padding: 0 18px; font-size: 14px; }
.circle-btn { width: 48px; height: 48px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line); display: grid; place-items: center; transition: background .3s, color .3s, transform .3s; flex: none; }
.circle-btn:hover { background: var(--ink); color: var(--bg); }
.circle-btn svg { width: 16px; height: 16px; }


/* ---------- HEADER + MENU ---------- */
.hdr { position: fixed; top: 0; left: 0; right: 0; z-index: 100; transition: transform .5s cubic-bezier(.7,0,.2,1), background .4s, color .4s; }
.hdr__in { height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.hdr__logo img { height: 30px; width: auto; filter: var(--logo); transition: filter .4s; }
.hdr__right { display: flex; align-items: center; gap: 28px; }
/* Aton: header links only dim on hover (colour .2s), no other effect */
.hdr__link { font-family: var(--sans); font-size: 18px; font-weight: 600; letter-spacing: -.01em; transition: opacity .2s; }
.hdr__link:hover, .burger:hover { opacity: .6; }
.hdr__link.is-current { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.burger { transition: opacity .2s; }
.burger { display: inline-flex; align-items: center; gap: 12px; font-family: var(--sans); font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.burger i { width: 26px; height: 9px; position: relative; display: block; }
.burger i::before, .burger i::after { content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform .4s, top .4s; }
.burger i::before { top: 0; } .burger i::after { top: 7px; }
.menu-open .burger i::before { top: 4px; transform: rotate(45deg); }
.menu-open .burger i::after { top: 4px; transform: rotate(-45deg); }
.hdr.is-solid { background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.hdr.is-hidden { transform: translateY(-100%); }
.hdr.on-dark { color: #fff; }
.hdr.on-dark .hdr__logo img { filter: none; }
/* while the dark menu panel slides in or out, the header turns light only once the
   panel is behind it (opening), and stays light until the panel has gone (closing) */
.menu-open .hdr, .menu-closing .hdr { color: var(--inv-ink); background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.menu-open .hdr { transition: transform .5s cubic-bezier(.7,0,.2,1), background 0s, color .3s ease .38s; }
.menu-open .hdr .hdr__logo img, .menu-closing .hdr .hdr__logo img { filter: var(--inv-logo); }
.menu-open .hdr .hdr__logo img { transition: filter .3s ease .38s; }
.menu-open .hdr.is-hidden, .menu-closing .hdr.is-hidden { transform: none; }

/* MENU (Arbiter, slide 30): the dark panel drops from the top (.9s), then the
   rows rise 60% and fade in, .05s apart, from .35s; closing plays it backwards */
.menu { position: fixed; inset: 0; z-index: 90; background: var(--inv-bg); color: var(--inv-ink); display: flex; flex-direction: column; justify-content: space-between; padding-top: 96px; padding-bottom: 32px;
  transform: translateY(-100%); visibility: hidden; transition: transform .9s cubic-bezier(.87,0,.13,1) .25s, visibility 0s linear 1.15s; }
.menu-open .menu { transform: none; visibility: visible; transition: transform .9s cubic-bezier(.87,0,.13,1), visibility 0s; }
.menu__list { list-style: none; margin: 0; padding: 0; }
.menu__list li { border-bottom: 1px solid var(--inv-line); }
.menu__list a { display: flex; align-items: baseline; gap: 24px; padding: 8px 0; font-family: var(--sans); font-weight: 400; font-size: clamp(40px, 4.5vw, 72px); letter-spacing: -.045em; line-height: 1.05;
  opacity: 0; transform: translateY(60%); transition: opacity .35s ease, transform .5s cubic-bezier(.7,0,.84,0); }
.menu__list a small { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; color: var(--inv-muted); width: 24px; transition: color .5s cubic-bezier(.33,1,.68,1); }
.menu-open .menu__list a { opacity: 1; transform: none; transition: opacity .8s cubic-bezier(.16,1,.3,1) var(--d, .35s), transform .8s cubic-bezier(.16,1,.3,1) var(--d, .35s); }
.menu__list li:nth-child(2) a { --d: .4s; } .menu__list li:nth-child(3) a { --d: .45s; } .menu__list li:nth-child(4) a { --d: .5s; }
.menu__list li:nth-child(5) a { --d: .55s; } .menu__list li:nth-child(6) a { --d: .6s; }
.menu__foot { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; font-family: var(--serif); font-size: 18px; color: var(--inv-muted); }
.menu__foot a { color: var(--inv-ink); }
.menu-open { overflow: hidden; }

/* ---------- 02 HEADLINE (Arbiter hero) ---------- */
.hero { padding-top: 90px; padding-bottom: 28px; }
.hero > .wrap { min-height: calc(100vh - 118px); display: flex; flex-direction: column; justify-content: space-between; }
.hero__top { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; color: var(--ink); font-weight: 500; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.hero__top-c { text-align: center; } .hero__top-r { text-align: right; }
.hero__headwrap { position: relative; margin-top: clamp(40px, 5vw, 70px); }
.hero__intro { position: absolute; right: 0; top: 0; width: min(290px, 40%); margin: 0; font-size: 16px; font-weight: 600; line-height: 1.4; letter-spacing: -.01em; }
.hero__grey { color: var(--muted); }
.hero__title { margin: clamp(80px, 8vw, 115px) 0 0; font-family: var(--display); font-weight: 500; text-transform: var(--head-case); font-stretch: var(--head-stretch); font-size: 10vw; letter-spacing: -0.055em; line-height: .86; }
.hl { display: flex; align-items: baseline; }
.hl--2 { padding-left: .9em; }
.hl--3 { justify-content: flex-end; }
.hw { display: inline-block; white-space: nowrap; }
.hw--it { font-family: var(--serif); font-style: var(--it-style); font-weight: 300; letter-spacing: -.03em; }
.hero__pill { display: inline-block; flex: none; width: 1.25em; height: .72em; border-radius: var(--pill); overflow: hidden; margin-right: .18em; align-self: center; background: var(--bg-3); }
.hero__pill video, .hero__pill img { width: 100%; height: 100%; object-fit: cover; }
.hero__est { font-size: 12px; letter-spacing: .06em; color: var(--muted); align-self: flex-start; margin: .9em .9em 0 0; }
.hero__bottom { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; margin-top: clamp(40px, 5vw, 70px); }
.hero__scroll { display: flex; align-items: center; gap: 16px; color: var(--muted); }
.hero__scroll i { display: block; width: 50px; height: 1px; background: var(--ink); transform-origin: 0 50%; }
.hc { display: inline-block; overflow: clip; padding: .14em .4em .45em; margin: -.14em -.4em -.45em; vertical-align: top; }
.hc > span { display: inline-block; }

/* ---------- STATEMENT + MARQUEE (Aton) ---------- */
.intro { text-align: center; }
.intro .statement { max-width: 960px; margin: 22px auto 34px; }
.marquee { overflow: hidden; position: relative; margin-top: clamp(60px, 8vw, 110px); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee__track { display: flex; width: max-content; will-change: transform; }
.marquee__group { display: flex; align-items: center; gap: clamp(48px, 6vw, 96px); padding-right: clamp(48px, 6vw, 96px); flex: none; }
.marquee img { height: 34px; width: auto; filter: var(--logo); opacity: .75; transition: opacity .3s; }
.marquee img:hover { opacity: 1; }

/* ---------- POSITION (Arbiter word fill) ---------- */
.position__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 40px; }
.fill { font-size: clamp(36px, 6vw, 96px); font-family: var(--display); font-weight: var(--head-weight); text-transform: var(--head-case); font-stretch: var(--head-stretch); letter-spacing: var(--head-track); line-height: 1.02; margin: 0; }
.fill .w { color: var(--ink); opacity: .16; transition: opacity .2s linear; }
.fill .w.on { opacity: 1; }
.fill .indent { display: inline-block; width: clamp(40px, 10vw, 160px); }
.redact { position: relative; display: inline-block; }
.redact__bar { position: absolute; left: -.04em; right: -.04em; top: .1em; bottom: .02em; background: var(--ink); border-radius: 3px; transform-origin: 100% 50%; }
.sign { display: flex; align-items: center; gap: 16px; margin-top: 48px; }
.sign img { width: 58px; height: 58px; border-radius: 50%; object-fit: cover; }
.sign b { display: block; font-family: var(--serif); font-weight: 400; font-size: 24px; letter-spacing: -.01em; }
.sign span { font-family: var(--serif); font-style: var(--it-style); color: var(--accent); }

/* ---------- PROJECTS (Aton stacking cards) ---------- */
.projects__cta { display: flex; justify-content: center; margin-top: 48px; }

/* ---------- EXPERTISE (Aton cards + Arbiter odometers) ---------- */
.sec-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: clamp(32px, 4vw, 56px); gap: 20px; }
.sec-head .dotr { width: 10px; height: 10px; border-radius: 50%; background: var(--muted); }
.sec-title { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: clamp(36px, 5vw, 64px); flex-wrap: wrap; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.stat { background: var(--bg-2); border-radius: var(--r); padding: 26px 24px 24px; min-height: 230px; display: flex; flex-direction: column; justify-content: space-between; }
.stat__top { display: flex; align-items: center; gap: 10px; }
.stat__num { font-size: clamp(56px, 6vw, 92px); font-family: var(--display); font-weight: var(--head-weight); text-transform: var(--head-case); font-stretch: var(--head-stretch); letter-spacing: -.05em; line-height: .9; display: flex; align-items: flex-start; }
.stat__num sup { font-family: var(--serif); font-style: var(--it-style); font-weight: 400; color: var(--accent); font-size: .5em; letter-spacing: 0; margin-left: .04em; line-height: 1; }
.stat__num .pre { font-family: var(--serif); font-style: var(--it-style); font-weight: 400; color: var(--accent); font-size: .6em; margin-right: .04em; }
.stat p { margin: 14px 0 0; color: var(--muted); font-size: 15px; line-height: 1.35; max-width: 22ch; }
.odo { display: inline-flex; align-items: flex-start; overflow: hidden; height: 1em; line-height: 1; }
.odo .col { flex: none; }
.odo .col { display: flex; flex-direction: column; will-change: transform; }
.odo .col span { display: block; height: 1em; line-height: 1; text-align: center; }
.note { margin-top: 18px; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--muted); text-transform: uppercase; }

/* ---------- SERVICES (Aton dark list) ---------- */
.services__grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(30px, 5vw, 80px); align-items: start; }
.svc { list-style: none; margin: 0; padding: 0; }
.svc li { padding: 6px 0; }
.svc button { display: flex; align-items: flex-start; gap: 16px; text-align: left; font-size: clamp(36px, 5.6vw, 88px); font-family: var(--display); font-weight: var(--head-weight); text-transform: var(--head-case); font-stretch: var(--head-stretch); letter-spacing: var(--head-track); line-height: 1.02; color: var(--muted); opacity: .55; transition: color .45s, opacity .45s, transform .45s; }
.svc button small { font-size: 15px; font-weight: 600; letter-spacing: 0; margin-top: .55em; font-family: var(--sans); }
.svc li.is-on button { color: var(--ink); opacity: 1; transform: translateX(10px); }
.svc li.is-on button .it { color: var(--accent); }
.svc__panel { position: sticky; top: 120px; }
.svc__media { aspect-ratio: 16/10; border-radius: var(--r-s); overflow: hidden; position: relative; background: var(--bg-2); }
.svc__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.08); transition: opacity .6s, transform 1s cubic-bezier(.2,.8,.2,1); }
.svc__media img.is-on { opacity: 1; transform: none; }
.svc__text { position: relative; min-height: 120px; margin-top: 22px; }
.svc__text p { position: absolute; inset: 0 auto auto 0; margin: 0; font-size: clamp(17px, 1.4vw, 20px); font-weight: 600; line-height: 1.35; letter-spacing: -.01em; max-width: 30ch; opacity: 0; transform: translateY(12px); transition: opacity .5s, transform .5s; }
.svc__text p.is-on { opacity: 1; transform: none; }
.svc__text p span { display: block; color: var(--muted); font-weight: 400; font-size: 15px; margin-top: 10px; }

/* ---------- START / NOW (Aton) ---------- */
.startnow { position: relative; height: clamp(560px, 100vh, 1000px); overflow: hidden; color: #fff; background: var(--bg); }
.startnow__media { position: absolute; inset: 0; overflow: hidden; transform-origin: 50% 50%; will-change: transform; }
.startnow__media video, .startnow__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.startnow__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.1) 50%, rgba(0,0,0,.45)); }
.startnow__in { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: flex-start; padding-top: clamp(80px, 12vh, 140px); }
.startnow__words { display: flex; justify-content: space-between; font-size: clamp(64px, 11vw, 180px); font-family: var(--display); font-weight: var(--head-weight); text-transform: var(--head-case); font-stretch: var(--head-stretch); letter-spacing: var(--head-track); line-height: .9; }
.startnow__words .it { font-weight: 400; }
.startnow .pill { margin-top: 30px; align-self: flex-start; }

/* ---------- SLIDER (process + industries) ---------- */
.slider { position: relative; }
.slider__track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; cursor: grab; padding-bottom: 4px; overscroll-behavior-x: contain; }
.slider__track::-webkit-scrollbar { display: none; }
.slider__track.is-drag { cursor: grabbing; scroll-snap-type: none; }
.slider__track.is-drag * { pointer-events: none; }
.slider__nav { display: flex; align-items: center; justify-content: space-between; margin-top: 28px; gap: 16px; }
.dots { display: flex; gap: 8px; }
.dots button { width: 8px; height: 8px; border-radius: 50%; background: var(--line); transition: background .3s, width .3s; }
.dots button.is-on { background: var(--ink); width: 26px; border-radius: 6px; }
.slider__arrows { display: flex; gap: 10px; }

.step { flex: 0 0 min(86%, 980px); scroll-snap-align: start; background: var(--bg-2); border-radius: var(--r); padding: clamp(28px, 3vw, 44px); min-height: clamp(380px, 46vh, 520px); display: flex; flex-direction: column; justify-content: space-between; gap: 30px; }
.step__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.step__no { font-family: var(--serif); font-style: var(--it-style); font-size: clamp(56px, 6vw, 96px); color: var(--accent); line-height: .9; }
.step__img { width: clamp(120px, 18vw, 240px); aspect-ratio: 4/3; border-radius: var(--r-s); overflow: hidden; }
.step__img img { width: 100%; height: 100%; object-fit: cover; }
.step h3 { margin: 0 0 14px; font-size: clamp(40px, 5vw, 76px); font-family: var(--display); font-weight: var(--head-weight); text-transform: var(--head-case); font-stretch: var(--head-stretch); letter-spacing: var(--head-track); line-height: 1; }
.step p { margin: 0; color: var(--muted); font-size: clamp(16px, 1.3vw, 19px); max-width: 52ch; }

.ind { flex: 0 0 clamp(280px, 40vw, 600px); scroll-snap-align: start; }
.ind__top { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 0 12px; border-top: 1px solid var(--line); }
.ind__no { font-family: var(--serif); font-style: var(--it-style); font-size: clamp(40px, 4vw, 60px); color: var(--accent); line-height: 1; }
.ind__img { aspect-ratio: 16/10; border-radius: var(--r-s); overflow: hidden; background: var(--bg-3); }
.ind__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.2,.8,.2,1); }
.ind:hover .ind__img img { transform: scale(1.05); }
.ind h3 { margin: 18px 0 8px; font-size: clamp(22px, 2vw, 30px); font-weight: 600; letter-spacing: -.02em; }
.ind p { margin: 0; color: var(--muted); max-width: 40ch; font-size: 15px; }

/* ---------- RESULTS (Arbiter stacked) ---------- */
.results .sec-title .it { color: inherit; }
.rcards { display: flex; flex-direction: column; }
.rcard { position: sticky; top: 84px; border-radius: var(--r); overflow: hidden; background: var(--inv-bg); color: var(--inv-ink); margin-bottom: 24px; box-shadow: 0 -1px 0 var(--line); }
.rcard__img { height: clamp(220px, 34vh, 380px); overflow: hidden; }
.rcard__img img { width: 100%; height: 100%; object-fit: cover; }
.rcard__body { padding: clamp(22px, 3vw, 40px); display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: end; }
.rcard__row { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 16px; color: var(--inv-muted); }
.rcard__big { font-size: clamp(64px, 10vw, 160px); font-family: var(--display); font-weight: var(--head-weight); text-transform: var(--head-case); font-stretch: var(--head-stretch); letter-spacing: -.05em; line-height: .9; }
.rcard__big sup { font-family: var(--serif); font-style: var(--it-style); font-weight: 400; color: var(--accent); font-size: .4em; letter-spacing: 0; }
.rcard p { margin: 0; max-width: 40ch; font-weight: 600; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.35; }

/* ---------- ABOUT (Aton) ---------- */
.about { text-align: center; }
.about .statement { max-width: 1040px; margin: 22px auto 34px; }
.collage { position: relative; margin-top: clamp(60px, 8vw, 110px); height: clamp(560px, 90vw, 1180px); }
.collage__a { position: absolute; left: 0; right: 0; top: 0; height: 64%; border-radius: var(--r); overflow: hidden; }
.collage__b { position: absolute; left: 50%; width: min(58%, 640px); top: 42%; height: 58%; transform: translateX(-50%); border-radius: var(--r); overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.18); }
.collage img { width: 100%; height: 120%; object-fit: cover; margin-top: -10%; }
.about__text { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; text-align: left; margin-top: clamp(50px, 6vw, 90px); }
.about__text p { margin: 0 0 16px; color: var(--muted); font-size: clamp(16px, 1.3vw, 19px); }
.about__text .lead { color: var(--ink); }

/* ---------- PEOPLE (Arbiter list) ---------- */
.people { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.people li { border-bottom: 1px solid var(--line); }
.people a { display: grid; grid-template-columns: 80px 1fr auto auto; align-items: center; gap: 20px; padding: 18px 0; transition: opacity .4s, padding .4s; }
.people__no { font-family: var(--serif); font-style: var(--it-style); font-size: clamp(28px, 2.6vw, 40px); color: var(--accent); }
.people__name { font-size: clamp(34px, 5vw, 76px); font-family: var(--display); font-weight: var(--head-weight); text-transform: var(--head-case); font-stretch: var(--head-stretch); letter-spacing: var(--head-track); line-height: 1.02; transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.people__role { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.people:hover a { opacity: .28; }
.people:hover a:hover { opacity: 1; }
.people a:hover .people__name { transform: translateX(16px); }
.people a:hover .circle-btn { background: var(--ink); color: var(--bg); transform: rotate(45deg); }
.peek { position: fixed; left: 0; top: 0; width: 260px; aspect-ratio: 4/5; border-radius: var(--r-s); overflow: hidden; pointer-events: none; z-index: 60; opacity: 0; transform: translate(-50%, -50%) scale(.85); transition: opacity .3s, transform .3s; }
.peek.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.peek img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .3s; }
.peek img.is-on { opacity: 1; }

/* ---------- PRICING (Aton) ---------- */
.pricing { background: var(--bg-3); }
.pricing__head { text-align: center; margin-bottom: clamp(40px, 5vw, 70px); }
.pricing__head .h-l { margin-top: 14px; }
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 1180px; margin: 0 auto; }
.plan { background: var(--bg-2); border-radius: var(--r); padding: clamp(26px, 3vw, 42px); display: flex; flex-direction: column; }
.plan__name { color: var(--muted); font-weight: 600; font-size: 18px; }
.plan__price { margin: 28px 0; font-size: clamp(40px, 4vw, 60px); font-family: var(--display); font-weight: var(--head-weight); text-transform: var(--head-case); font-stretch: var(--head-stretch); letter-spacing: -.04em; line-height: 1; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.plan__price small { font-size: 22px; letter-spacing: -.01em; }
.plan ul { list-style: none; margin: 0 0 32px; padding: 26px 0 0; border-top: 1px solid var(--line); display: grid; gap: 12px; color: var(--muted); }
.plan li { display: flex; gap: 12px; align-items: baseline; }
.plan li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--ink); flex: none; transform: translateY(-3px); }
.plan .pill { width: 100%; justify-content: center; margin-top: auto; }
.plan__fine { text-align: center; color: var(--muted); font-size: 14px; margin-top: 16px; }
.plan--dark { background: var(--inv-bg); color: var(--inv-ink); --muted: var(--inv-muted); --line: var(--inv-line); --ink: var(--inv-ink); --bg: var(--inv-bg); }

/* ---------- SHOWREEL (Aton) ---------- */
.reel { position: relative; height: clamp(420px, 80vh, 820px); border-radius: var(--r); overflow: hidden; display: block; color: #fff; background: #000; }
.reel video, .reel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2,.8,.2,1); }
.reel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.55)); }
.reel:hover video { transform: scale(1.03); }
.reel__title { position: absolute; z-index: 2; left: 0; right: 0; bottom: clamp(24px, 4vw, 50px); text-align: center; font-size: clamp(56px, 9vw, 150px); font-family: var(--display); font-weight: var(--head-weight); text-transform: var(--head-case); font-stretch: var(--head-stretch); letter-spacing: var(--head-track); line-height: .9; }
.reel__play { position: absolute; z-index: 3; left: 50%; top: 45%; width: 110px; height: 110px; margin: -55px 0 0 -55px; border-radius: 50%; background: rgba(255,255,255,.14); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); display: grid; place-items: center; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; transition: transform .4s, background .4s; }
.reel:hover .reel__play { transform: scale(1.1); background: rgba(255,255,255,.24); }

/* ---------- QUOTE + FEEDBACK ---------- */
.quote { text-align: center; }
.quote__text { font-family: var(--serif); font-style: var(--it-style); font-weight: 400; font-size: clamp(34px, 5.4vw, 86px); line-height: 1.08; letter-spacing: -.02em; margin: 26px auto 34px; max-width: 18ch; }
.quote__text .ln { display: block; overflow: hidden; }
.quote__text .ln > span { display: inline-block; }
.who { display: inline-flex; align-items: center; gap: 14px; text-align: left; }
.who img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
.who b { display: block; font-family: var(--serif); font-weight: 400; font-size: 22px; }
.who span { font-family: var(--serif); font-style: var(--it-style); color: var(--accent); }
.fb { flex: 0 0 min(86%, 860px); scroll-snap-align: center; background: var(--bg-2); border-radius: var(--r); padding: clamp(26px, 3vw, 40px); min-height: 420px; display: flex; flex-direction: column; justify-content: space-between; gap: 30px; }
.fb__logo { height: 30px; width: auto; filter: var(--logo); align-self: flex-start; }
.fb blockquote { margin: 0; font-size: clamp(19px, 1.8vw, 26px); font-weight: 600; letter-spacing: -.015em; line-height: 1.32; }
.fb__who { display: flex; align-items: center; gap: 14px; color: var(--muted); }
.fb__who i { width: 42px; height: 42px; border-radius: 50%; background: var(--bg-3); display: grid; place-items: center; font-style: normal; font-weight: 700; color: var(--ink); }
.fbtrack { padding-inline: calc((100vw - min(86vw, 860px)) / 2); scroll-padding-inline: calc((100vw - min(86vw, 860px)) / 2); }
.longterm { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; }
.longterm__img { border-radius: var(--r); overflow: hidden; min-height: 460px; }
.longterm__img img { width: 100%; height: 100%; object-fit: cover; }
.longterm__card { background: var(--bg-2); border-radius: var(--r); padding: clamp(26px, 3vw, 40px); display: flex; flex-direction: column; justify-content: space-between; gap: 30px; }
.longterm__years { font-size: clamp(64px, 7vw, 110px); font-family: var(--display); font-weight: var(--head-weight); text-transform: var(--head-case); font-stretch: var(--head-stretch); letter-spacing: -.05em; line-height: .9; }
.longterm__years .it { font-size: .4em; color: var(--accent); letter-spacing: 0; }

/* ---------- PLATFORM MARQUEE (Arbiter awards strip) ---------- */
.strip { border-block: 1px solid var(--line); padding: 18px 0; overflow: hidden; }
.strip .marquee__group { gap: 40px; padding-right: 40px; }
.strip span { font-family: var(--serif); font-style: var(--it-style); font-size: clamp(28px, 3.4vw, 52px); white-space: nowrap; letter-spacing: -.02em; }
.strip .star { width: 22px; height: 22px; color: var(--accent); flex: none; }

/* ---------- NOTES (blog) ---------- */
.notes__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 16px; }
.note-card { display: block; }
.note-card--feat { grid-column: 1 / -1; }
.note-card__img { border-radius: var(--r-s); overflow: hidden; aspect-ratio: 16/10; background: var(--bg-3); }
.note-card--feat .note-card__img { aspect-ratio: 21/9; }
.note-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.2,.8,.2,1); }
.note-card:hover img { transform: scale(1.04); }
.note-card__meta { display: flex; justify-content: space-between; padding: 14px 0 10px; border-bottom: 1px solid var(--line); margin-top: 14px; color: var(--muted); }
.note-card h3 { margin: 14px 0 0; font-size: clamp(20px, 1.9vw, 28px); font-weight: 600; letter-spacing: -.02em; line-height: 1.2; max-width: 30ch; }
.note-card:hover h3 { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

/* ---------- FAQ (Arbiter) ---------- */
.faq { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.faq li { border-bottom: 1px solid var(--line); }
.faq button { width: 100%; display: grid; grid-template-columns: 80px 1fr auto; align-items: center; gap: 20px; padding: 24px 0; text-align: left; }
.faq__no { font-family: var(--serif); font-style: var(--it-style); font-size: 26px; color: var(--accent); }
.faq__q { font-size: clamp(19px, 1.9vw, 27px); font-weight: 600; letter-spacing: -.015em; }
.faq .circle-btn svg { transition: transform .4s; }
.faq li.is-open .circle-btn { background: var(--ink); color: var(--bg); }
.faq li.is-open .circle-btn svg { transform: rotate(45deg); }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s cubic-bezier(.2,.8,.2,1); }
.faq li.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p { margin: 0; padding: 0 60px 28px 100px; color: var(--muted); max-width: 70ch; }

/* ---------- CONTACT (Arbiter CTA + Zorven form) ---------- */
.contact { padding-bottom: clamp(60px, 8vw, 110px); }
.contact__title { font-size: clamp(56px, 10vw, 168px); font-family: var(--display); font-weight: var(--head-weight); text-transform: var(--head-case); font-stretch: var(--head-stretch); letter-spacing: var(--head-track); line-height: .9; margin: 18px 0 clamp(40px, 5vw, 70px); }
.contact__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(30px, 5vw, 80px); align-items: start; }
.contact__lines a { display: block; font-size: clamp(22px, 2.4vw, 34px); font-weight: 600; letter-spacing: -.02em; }
.contact__lines span { display: block; font-family: var(--serif); color: var(--muted); font-size: 19px; margin-top: 6px; }
.badge { position: relative; width: 210px; height: 210px; margin-top: 40px; display: grid; place-items: center; }
.badge svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 18s linear infinite; }
.badge text { font-family: var(--mono); font-size: 10.5px; letter-spacing: 3.2px; text-transform: uppercase; fill: currentColor; }
.badge a { width: 150px; height: 150px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; text-align: center; font-family: var(--mono); font-size: 15px; line-height: 1.4; transition: transform .4s; }
.badge a:hover { transform: scale(1.07); }
@keyframes spin { to { transform: rotate(360deg); } }
.badge__fine { margin-top: 18px; }
.badge__fine b { display: block; font-weight: 600; }
.badge__fine span { font-family: var(--serif); color: var(--muted); }
.form { background: var(--bg-2); border-radius: var(--r); padding: clamp(24px, 3vw, 40px); }
.form h3 { margin: 10px 0 26px; font-size: clamp(28px, 3vw, 44px); font-family: var(--display); font-weight: var(--head-weight); text-transform: var(--head-case); font-stretch: var(--head-stretch); letter-spacing: -.03em; line-height: 1.05; }
.field { display: block; border-bottom: 1px solid var(--line); padding: 14px 0; }
.field span { display: block; font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.field input, .field textarea, .field select { width: 100%; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 17px; padding: 6px 0; outline: none; resize: none; }
.field input::placeholder, .field textarea::placeholder { color: var(--muted); opacity: .7; }
.field:focus-within { border-color: var(--ink); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.chips label { position: relative; }
.chips input { position: absolute; opacity: 0; }
.chips span { display: inline-block; padding: 8px 14px; border-radius: var(--pill); box-shadow: inset 0 0 0 1px var(--line); font-size: 14px; cursor: pointer; transition: background .3s, color .3s; }
.chips input:checked + span { background: var(--ink); color: var(--bg); }
.form__send { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: 26px; }
.form__send p { margin: 0; color: var(--muted); font-size: 14px; max-width: 30ch; }
.form__ok { display: none; padding: 20px 0; font-weight: 600; }
.form.is-sent .form__ok { display: block; }
.form.is-sent .form__body { display: none; }

/* ---------- FOOTER ---------- */
.ftr { background: var(--inv-bg); color: var(--inv-ink); --ink: var(--inv-ink); --muted: var(--inv-muted); --line: var(--inv-line); --bg: var(--inv-bg); --logo: var(--inv-logo); padding-top: clamp(60px, 7vw, 100px); overflow: hidden; }
.ftr__top { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; padding-bottom: 50px; border-bottom: 1px solid var(--line); }
.ftr__ask { font-size: clamp(28px, 3.4vw, 50px); font-family: var(--display); font-weight: var(--head-weight); text-transform: var(--head-case); font-stretch: var(--head-stretch); letter-spacing: -.03em; line-height: 1.05; margin: 0; }
.ftr__ask a { display: block; color: var(--muted); transition: color .3s; }
.ftr__ask a:hover { color: var(--ink); }
.news label { display: block; margin-bottom: 12px; }
.news div { display: flex; border-bottom: 1px solid var(--ink); }
.news input { flex: 1; background: none; border: 0; color: var(--ink); font: inherit; font-size: 17px; padding: 12px 0; outline: none; }
.news button { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; }
.ftr__cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; padding: 50px 0; }
.ftr__cols h4 { margin: 0 0 14px; font-family: var(--mono); font-size: 12px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ftr__cols a, .ftr__cols p { display: block; margin: 0 0 8px; font-weight: 500; }
.ftr__cols a { transition: color .3s; } .ftr__cols a:hover { color: var(--accent); }
:root[data-look="paper"] .ftr__cols a:hover, :root[data-look="ink"] .ftr__cols a:hover { color: var(--muted); }
.socials { display: flex; gap: 10px; }
.socials a { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--line); margin: 0; transition: background .3s; }
.socials a:hover { background: var(--ink); color: var(--bg); }
.socials svg { width: 16px; height: 16px; }
.ftr__mark { display: block; width: auto; max-width: 100%; height: clamp(150px, 30vw, 420px); object-fit: contain; object-position: left bottom; filter: var(--logo); margin-top: 10px; transform-origin: 50% 100%; }
.ftr__base { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 26px 0 30px; color: var(--muted); }
.ftr__base a:hover { color: var(--ink); }
.totop { display: inline-flex; align-items: center; gap: 8px; }

/* ---------- MODAL ---------- */
.modal { position: fixed; inset: 0; z-index: 150; background: rgba(0,0,0,.92); display: grid; place-items: center; opacity: 0; pointer-events: none; transition: opacity .4s; padding: 20px; }
.modal.is-open { opacity: 1; pointer-events: auto; }
.modal video { width: min(1200px, 100%); max-height: 86vh; border-radius: var(--r-s); background: #000; }
.modal__x { position: absolute; top: 20px; right: 20px; color: #fff; font-family: var(--mono); font-size: 12px; letter-spacing: .08em; }

/* ---------- CASE STUDY (Velvo) ---------- */
.cs-hero { padding-top: 110px; }
.cs-back { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.cs-cover { border-radius: var(--r); overflow: hidden; height: clamp(320px, 72vh, 760px); position: relative; background: #000; }
.cs-cover video, .cs-cover img { position: absolute; inset: -6% 0; width: 100%; height: 112%; object-fit: cover; }
.cs-title { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; margin: clamp(30px, 4vw, 56px) 0 0; flex-wrap: wrap; }
.cs-title h1 { margin: 0; font-size: clamp(52px, 9vw, 150px); font-family: var(--display); font-weight: var(--head-weight); text-transform: var(--head-case); font-stretch: var(--head-stretch); letter-spacing: var(--head-track); line-height: .92; }
.cs-meta { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; margin-top: clamp(30px, 4vw, 56px); padding-top: 20px; border-top: 1px solid var(--line); }
.cs-meta dt { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.cs-meta dd { margin: 0; font-weight: 600; }
.cs-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(30px, 5vw, 90px); align-items: start; }
.cs-info { position: sticky; top: 100px; }
.cs-info h2 { margin: 0 0 18px; font-size: clamp(32px, 3.4vw, 52px); font-family: var(--display); font-weight: var(--head-weight); text-transform: var(--head-case); font-stretch: var(--head-stretch); letter-spacing: -.03em; line-height: 1; }
.cs-info p { margin: 0 0 14px; color: var(--muted); font-size: 17px; }
.cs-info h3 { margin: 34px 0 14px; }
.done { list-style: none; margin: 0; padding: 0; counter-reset: d; border-top: 1px solid var(--line); }
.done li { counter-increment: d; display: flex; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); font-weight: 600; }
.done li::before { content: counter(d, decimal-leading-zero); font-family: var(--serif); font-style: var(--it-style); font-weight: 400; color: var(--accent); min-width: 28px; }
.more { margin-top: 26px; }
.more__btn { display: inline-flex; align-items: center; gap: 12px; height: 46px; padding: 0 20px; border-radius: var(--pill); box-shadow: inset 0 0 0 1px var(--ink); font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; transition: background .3s, color .3s; }
.more__btn:hover, .more.is-open .more__btn { background: var(--ink); color: var(--bg); }
.more__btn svg { width: 12px; height: 12px; transition: transform .4s; }
.more.is-open .more__btn svg { transform: rotate(45deg); }
.more__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s cubic-bezier(.2,.8,.2,1); }
.more.is-open .more__panel { grid-template-rows: 1fr; }
.more__panel > div { overflow: hidden; }
.more__inner { padding-top: 26px; }
.process { list-style: none; margin: 0 0 10px; padding: 0; }
.process li { padding: 12px 0; border-bottom: 1px solid var(--line); color: var(--muted); }
.process b { color: var(--ink); }
.cs-gallery { display: grid; gap: 16px; }
.cs-gallery figure { margin: 0; border-radius: var(--r); overflow: hidden; background: var(--bg-3); }
.cs-gallery img, .cs-gallery video { width: 100%; height: auto; }
.cs-gallery .two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cs-gallery .two figure { aspect-ratio: 4/5; }
.cs-gallery .two img, .cs-gallery .two video { height: 100%; object-fit: cover; }
.cs-gallery figcaption { padding: 12px 14px; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); background: var(--bg-2); }
.cs-progress { position: fixed; left: 0; top: 0; height: 2px; background: var(--accent); width: 100%; transform-origin: 0 0; transform: scaleX(0); z-index: 101; }
.cs-quote { text-align: center; }
.cs-quote .fill { font-size: clamp(30px, 4.4vw, 70px); max-width: 22ch; margin: 24px auto 36px; }
.world { text-align: center; }
.world .h-l { margin: 16px auto 18px; max-width: 14ch; }
.world p { color: var(--muted); max-width: 46ch; margin: 0 auto 34px; font-size: 18px; }
.next { display: block; position: relative; height: clamp(360px, 70vh, 700px); overflow: hidden; color: #fff; background: #000; }
.next img { position: absolute; inset: -8% 0; width: 100%; height: 116%; object-fit: cover; opacity: .75; transition: opacity .6s, transform 1.2s cubic-bezier(.2,.8,.2,1); }
.next:hover img { opacity: .95; transform: scale(1.03); }
.next__in { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding-block: 40px; }
.next__title { font-size: clamp(60px, 11vw, 190px); font-family: var(--display); font-weight: var(--head-weight); text-transform: var(--head-case); font-stretch: var(--head-stretch); letter-spacing: var(--head-track); line-height: .9; }

/* ---------- LOADER (Kris, 6 Nov: "Loading 2" - reels drift behind dark glass, a ring fills round the logo) ---------- */
.loader { position: fixed; inset: 0; z-index: 200; color: #FFECD5; display: none; place-items: center; pointer-events: none; overflow: hidden; background: #0D0D0E; }
.show-loader .loader { display: grid; }
.loader__wall { position: absolute; inset: -10%; display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; transform: rotate(-8deg) scale(1.15); filter: blur(1.5px) saturate(1.15) brightness(.72); }
.loader__col { display: flex; flex-direction: column; gap: 14px; animation: ldUp 18s linear infinite; }
.loader__col:nth-child(even) { animation-name: ldDown; animation-duration: 22s; }
.loader__col img { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 14px; display: block; }
@keyframes ldUp { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@keyframes ldDown { from { transform: translateY(-50%); } to { transform: translateY(0); } }
.loader__shade { position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(8,8,9,.25) 0, rgba(8,8,9,.85) 75%); }
.loader__grain { position: absolute; inset: -50%; opacity: .09; mix-blend-mode: overlay; animation: ldGrain 1s steps(6) infinite;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"); }
@keyframes ldGrain { 0%, 100% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); } 60% { transform: translate(-2%, -1%); } 80% { transform: translate(3%, 3%); } }
.loader__in { position: relative; width: min(70vw, 360px); aspect-ratio: 1; display: grid; place-items: center; }
.loader__ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.loader__ring circle { fill: none; stroke: rgba(255,236,213,.15); stroke-width: 1.2; }
.loader__ring circle + circle { stroke: #FFECD5; stroke-dasharray: 301.6; stroke-dashoffset: 301.6; stroke-linecap: round; }
.loader__logo { width: 58%; filter: drop-shadow(0 6px 30px rgba(0,0,0,.6)); }
.loader__num { position: absolute; bottom: 22%; font: 500 11px/1 var(--mono); letter-spacing: .3em; color: rgba(255,236,213,.7); }
@media (prefers-reduced-motion: reduce) { .loader__col, .loader__grain { animation: none; } }

/* ---------- HEADER EXTRAS ---------- */
.hdr__right { gap: clamp(20px, 2.6vw, 40px); }
.clocks b, .ftr__clock b { font-weight: 500; font-variant-numeric: tabular-nums; }
[data-scramble] { display: inline-block; }

/* ---------- MENU hover (Arbiter: others dim to 40%, the row moves 1vw, arrow
   slides in, number turns to the accent; .5s power3.out) ---------- */
.menu__list a span { transition: transform .5s cubic-bezier(.33,1,.68,1); }
.menu__list a::after { content: "→"; margin-left: auto; font-family: var(--sans); font-weight: 400; font-size: .5em; align-self: center; opacity: 0; transform: translateX(-20px); transition: opacity .5s cubic-bezier(.33,1,.68,1), transform .5s cubic-bezier(.33,1,.68,1); }
@media (hover: hover) {
  .menu-open .menu__list:hover a { opacity: .4; transition: opacity .5s cubic-bezier(.33,1,.68,1), transform .8s; }
  .menu-open .menu__list a:hover { opacity: 1; }
  .menu__list a:hover span { transform: translateX(1vw); }
  .menu__list a:hover::after { opacity: 1; transform: none; }
  .menu__list a:hover small { color: var(--accent); }
}

/* ---------- 01 OPENING (Aton sticky hero) ---------- */
.ahero { position: relative; height: 300vh; background: #0B0B0B; }
.ahero__box { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.ahero__wrap { position: absolute; inset: 0; transform: scale(2.2); transform-origin: 50% 50%; will-change: transform; }
/* Vertical layout: three columns (2 / 3 / 2 pictures). The middle picture of the
   middle column is the showreel the opening starts zoomed into. */
.ahero__grid { --cw: calc(100vw / 2.15); --ch: calc(100vh / 2.15); --g: 16px; position: absolute; left: 50%; top: 50%; width: calc(var(--cw) * 3 + var(--g) * 2); height: calc(var(--ch) * 3 + var(--g) * 2); transform: translate(-50%, -50%); display: grid; grid-template-columns: repeat(3, var(--cw)); gap: var(--g); }
.ahero__col { display: grid; grid-template-rows: 1fr 1fr; gap: var(--g); will-change: transform; }
.ahero__col--3 { grid-template-rows: repeat(3, 1fr); }
.ahero__item { position: relative; overflow: hidden; border-radius: var(--r); background: #1A1A1A; }
.ahero__item img, .ahero__item video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ahero__item--c::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.12); }
.ahero__text { position: absolute; inset: 0; z-index: 2; display: flex; align-items: flex-end; padding: 0 clamp(16px, 1.5vw, 24px) clamp(24px, 7.5vh, 68px); color: #fff; pointer-events: none; will-change: transform; }
.ahero__words { width: 100%; margin: 0; display: flex; align-items: center; justify-content: space-between; gap: 32px; font-family: var(--display); font-weight: var(--head-weight); text-transform: var(--head-case); font-stretch: var(--head-stretch); font-size: 15vw; letter-spacing: -.045em; line-height: .84; text-shadow: 0 6px 40px rgba(0,0,0,.18); }
.ahero__w { display: block; overflow: hidden; padding: .02em 0 .06em; flex: none; }
.ahero__w--l { padding: 0; }
.ahero__w > span { display: block; }
.ahero__logo { display: block; width: auto; height: max(52px, 4.6vw); filter: drop-shadow(0 6px 30px rgba(0,0,0,.25)); }
.ahero__tag { font-family: var(--sans); font-size: 18px; font-weight: 600; line-height: 1.2; letter-spacing: -.01em; text-align: right; text-transform: none; }
.ahero__w--l { transform-origin: 0 50%; } .ahero__w--r { transform-origin: 100% 50%; }
.ahero__line { flex: none; display: block; width: 0; height: 3px; background: currentColor; }
.ahero__hint { position: absolute; z-index: 2; left: 0; right: 0; bottom: 24px; text-align: center; color: #fff; font-weight: 500; font-size: 18px; letter-spacing: -.01em; pointer-events: none; }

/* ---------- 03 REVEAL (Arbiter) ---------- */
.arb { position: relative; height: 240vh; }
.arb__sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; color: #fff; }
.arb__media { position: absolute; inset: 0; clip-path: inset(24% 38% 24% 38% round 24px); background: #000; will-change: clip-path; }
.arb__media img, .arb__media video { width: 100%; height: 100%; object-fit: cover; }
.arb__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.1) 45%, rgba(0,0,0,.6)); }
.arb__content { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding-block: 110px 36px; }
.arb__heading { margin: 0; max-width: 14ch; font-family: var(--display); font-weight: var(--head-weight); text-transform: var(--head-case); font-stretch: var(--head-stretch); font-size: clamp(40px, 7.4vw, 120px); letter-spacing: var(--head-track); line-height: .95; }
.arb__foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.arb__foot p { max-width: 460px; margin: 0; font-size: clamp(17px, 1.5vw, 21px); font-weight: 600; line-height: 1.3; letter-spacing: -.01em; }
.arb__foot .mono { opacity: .8; }
.has-js .arb__foot { opacity: 0; }

/* ---------- 06 PROJECTS (Aton) ---------- */
.projects__head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; margin-bottom: clamp(40px, 6vw, 80px); }
.projects__head .h-xl { text-align: center; }
.projects__head .dotr { justify-self: end; width: 10px; height: 10px; border-radius: 50%; background: var(--muted); }
.stack { display: flex; flex-direction: column; gap: 18px; width: min(100%, 1012px); margin: 0 auto; }
.stack__card { position: sticky; top: 90px; height: min(66vh, 600px); border-radius: var(--r); overflow: hidden; display: block; color: #fff; transform-origin: 50% 0; will-change: transform; background: #000; }
.stack__card > img, .stack__card > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2,.8,.2,1); }
.stack__card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.18) 50%, rgba(0,0,0,.5)); }
.stack__card:hover > img, .stack__card:hover > video { transform: scale(1.04); }
.stack__logo { position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(287px, 50%); height: 128px; display: grid; place-items: center; }
.stack__logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; filter: drop-shadow(0 4px 24px rgba(0,0,0,.25)); }
.stack__meta { position: absolute; z-index: 2; left: 24px; right: 24px; bottom: 20px; display: flex; justify-content: space-between; gap: 16px; font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }

/* ---------- 07 STATS: hover one card, the others dim (Aton) ---------- */
.stat > * { transition: opacity .4s ease; }
@media (hover: hover) {
  .stats:has(.stat:hover) .stat:not(:hover) > * { opacity: .4; }
  .stats .stat:hover > * { opacity: 1; }
}

/* ---------- 11 INDUSTRIES (Arbiter horizontal) ---------- */
.hsec { position: relative; }
.hsec__pin { padding-block: clamp(80px, 10vw, 140px); display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.hs__track { display: flex; gap: 16px; padding-inline: max(clamp(16px, 3vw, 40px), calc((100vw - 1440px) / 2 + 40px)); will-change: transform; }
.hs__track .ind { flex: 0 0 clamp(300px, 34vw, 520px); }
.hs__foot { display: flex; align-items: center; gap: 20px; margin-top: 32px; color: var(--muted); }
.hs__bar { flex: 1; height: 2px; background: var(--line); overflow: hidden; }
.hs__bar i { display: block; height: 100%; background: var(--ink); transform-origin: 0 50%; transform: scaleX(0); }
@media (min-width: 861px) { .hsec__pin { height: 100vh; padding-block: 90px 40px; } }
@media (max-width: 860px) {
  .hs__track { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .hs__track::-webkit-scrollbar { display: none; }
  .hs__track .ind { flex-basis: 82%; scroll-snap-align: start; }
}

/* ---------- 13 CLIENTS (Zorven) ---------- */
.clients__label { display: flex; justify-content: center; margin-bottom: 24px; }
.chip { display: inline-block; padding: 4px 8px; background: color-mix(in srgb, var(--ink) 8%, transparent); font-family: var(--mono); font-size: 13px; letter-spacing: .04em; text-transform: uppercase; border-radius: min(var(--r-s), 4px); }
.cgrid { display: grid; grid-template-columns: repeat(5, 1fr); }
.cgrid__cell { aspect-ratio: 1.58; border: 1px solid var(--line); margin: 0 -1px -1px 0; display: grid; place-items: center; padding: 20px; position: relative; overflow: hidden; }
.cgrid__cell img { max-height: 46px; max-width: 62%; width: auto; filter: var(--logo); opacity: .9; transition: opacity .45s ease, transform .45s ease; }
.cgrid__cell img.out { opacity: 0; transform: translateY(10px); }
.clients__foot { display: flex; justify-content: space-between; margin-top: 18px; color: var(--muted); gap: 16px; flex-wrap: wrap; }

/* ---------- 19 TESTIMONIALS (Zorven) ---------- */
.tsec { overflow: hidden; }
.tst__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 50px; }
.tst__head .h-m { margin-top: 16px; max-width: 13ch; }
.tst__head .chip { background: color-mix(in srgb, var(--ink) 10%, transparent); }
.tst { position: relative; }
.tst__track { display: flex; gap: 24px; will-change: transform; touch-action: pan-y; }
.tst__card { flex: 0 0 min(70%, 910px); display: grid; grid-template-columns: 1fr 1fr; gap: 30px; padding: 24px; border-radius: var(--r); background: var(--bg-2); min-height: 518px; user-select: none; }
.tst__body { display: flex; flex-direction: column; justify-content: space-between; gap: 60px; }
.tst__logo { max-width: 180px; max-height: 40px; width: auto; filter: var(--logo); align-self: flex-start; }
.tst__card blockquote { margin: 0 0 40px; font-family: var(--sans); font-size: clamp(19px, 1.7vw, 24px); line-height: 1.2; letter-spacing: -.02em; font-weight: 400; }
.tst__who b { display: block; font-weight: 500; }
.tst__who span { color: var(--muted); }
.tst__photo { border-radius: var(--r-s); overflow: hidden; min-height: 300px; background: var(--bg-3); }
.tst__photo img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.tst__dots { display: flex; justify-content: center; gap: 10px; margin-top: 28px; }
.tst__dots button { width: 10px; height: 10px; border-radius: 50%; background: var(--ink); opacity: .35; transition: opacity .3s, transform .3s; }
.tst__dots button.is-on { opacity: 1; transform: scale(1.1); }

.longterm__q { margin: 0; font-weight: 600; font-size: clamp(18px, 1.6vw, 23px); line-height: 1.35; letter-spacing: -.01em; }

/* ---------- 21 NOTES (Aton centre + side cards) ---------- */
.nws { position: relative; }
.nws__list { position: relative; }
.nws__card { display: block; }
.nws__img { border-radius: var(--r-s); overflow: hidden; aspect-ratio: 656 / 400; background: var(--bg-3); }
.nws__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.2,.8,.2,1); pointer-events: none; }
.nws__card:hover .nws__img img { transform: scale(1.04); }
.nws__meta { display: flex; justify-content: space-between; gap: 12px; padding: 14px 0 10px; border-bottom: 1px solid var(--line); margin-top: 14px; color: var(--muted); }
.nws__card h3 { margin: 14px 0 0; font-size: clamp(20px, 1.9vw, 28px); font-weight: 600; letter-spacing: -.02em; line-height: 1.2; }
.nws__nav { display: flex; justify-content: center; margin-top: 26px; }
@media (min-width: 992px) {
  .nws__list { height: var(--nws-h, 560px); user-select: none; }
  .nws__card { position: absolute; left: 50%; top: 0; transform-origin: 50% 30%; transition: transform .6s cubic-bezier(.65,0,.35,1), opacity .6s; }
  .nws__text { transition: opacity .4s; }
  .nws__card:not(.is-active) .nws__text { opacity: 0; visibility: hidden; }
}
@media (max-width: 991px) {
  .nws__list { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .nws__list::-webkit-scrollbar { display: none; }
  .nws__card { flex: 0 0 82%; scroll-snap-align: start; }
}

/* ---------- 22 HOW WE WORK (Aton) ---------- */
.howwe { text-align: center; }
.howwe .statement { max-width: 1040px; margin: 22px auto 0; }
.howwe__grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 16px; margin-top: clamp(50px, 6vw, 90px); text-align: left; align-items: start; }
.howwe__a { border-radius: var(--r); overflow: hidden; aspect-ratio: 4 / 5; }
.howwe__b { border-radius: var(--r); overflow: hidden; aspect-ratio: 4 / 3; }
.howwe__a img, .howwe__b img { width: 100%; height: 120%; object-fit: cover; margin-top: -10%; }
.howwe__side { display: flex; flex-direction: column; gap: 30px; }
.howwe__text p { margin: 0 0 14px; color: var(--muted); font-size: clamp(16px, 1.3vw, 19px); max-width: 44ch; }
.howwe__text .lead { color: var(--ink); }
.howwe__text .pill { margin-top: 12px; }

/* ---------- CONTACT SEAL (Arbiter: pulse ring + fill on hover) ---------- */
.badge::before { content: ""; position: absolute; width: 150px; height: 150px; border-radius: 50%; border: 1px solid var(--accent); animation: pulse 2.6s cubic-bezier(.2,.6,.3,1) infinite; pointer-events: none; }
@keyframes pulse { from { transform: scale(1); opacity: .9; } to { transform: scale(1.42); opacity: 0; } }
.badge a { position: relative; overflow: hidden; isolation: isolate; border-radius: 50%; }
.badge a::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--ink); transform: scale(0); transition: transform .55s cubic-bezier(.7,0,.2,1); z-index: -1; }
.badge a:hover::after { transform: scale(1); }
.badge a:hover { color: var(--bg); }
.badge a em { font-style: normal; display: inline-block; transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.badge a:hover em { transform: rotate(45deg); }

/* ---------- LINK UNDERLINES (Arbiter: line draws in from the left) ---------- */
.ftr__cols > div > a, .contact__lines a, .menu__foot a, .ftr__ask a, .cs-back, .ftr__base a, .note-body a {
  width: fit-content; background: linear-gradient(currentColor, currentColor) no-repeat 100% 100% / 0 1px; transition: background-size .55s cubic-bezier(.7,0,.2,1), color .3s; padding-bottom: 2px;
}
.ftr__cols > div > a:hover, .contact__lines a:hover, .menu__foot a:hover, .ftr__ask a:hover, .cs-back:hover, .ftr__base a:hover, .note-body a:hover { background-position: 0 100%; background-size: 100% 1px; }
.ftr__clock { color: var(--muted); }

/* ---------- CURSOR (Aton + Arbiter: dot follows, label on cards) ---------- */
.cur { position: fixed; left: 0; top: 0; z-index: 140; pointer-events: none; opacity: 0; transition: opacity .3s; }
.cur.is-in { opacity: 1; }
/* the dot inverts whatever is under it, so it never hides a word (Aton cursor) */
.cur:not(.is-label) { mix-blend-mode: difference; }
.cur i { position: absolute; left: 0; top: 0; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: #fff; mix-blend-mode: difference; transition: transform .3s cubic-bezier(.2,.8,.2,1), opacity .2s; }
.cur.is-link i { transform: scale(3.2); }
.cur span { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%) scale(.6); opacity: 0; white-space: nowrap; padding: 12px 18px; border-radius: var(--pill); background: rgba(14,14,14,.86); color: #fff; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-family: var(--sans); font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .25s; }
.cur.is-label span { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.cur.is-label i { opacity: 0; }
.has-cur [data-cursor], .has-cur [data-cursor] * { cursor: none; }

/* ---------- THEME PANEL ---------- */
.tp { position: fixed; left: 16px; bottom: 16px; z-index: 120; font-family: "Barlow", system-ui, sans-serif; color: var(--ink); }
.tp__btn { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 16px 0 8px; border-radius: 999px; background: var(--bg-2); color: var(--ink); box-shadow: 0 10px 30px rgba(0,0,0,.18), inset 0 0 0 1px var(--line); font-weight: 600; font-size: 14px; }
.tp__btn small { color: var(--muted); font-weight: 500; font-size: 12px; }
.tp__sw { width: 30px; height: 30px; border-radius: 50%; background: conic-gradient(var(--ink) 0 50%, var(--bg) 0 75%, var(--accent) 0); box-shadow: inset 0 0 0 1px var(--line); }
.tp__panel { position: absolute; left: 0; bottom: 58px; width: min(380px, calc(100vw - 32px)); background: var(--bg-2); color: var(--ink); border-radius: 18px; box-shadow: 0 24px 60px rgba(0,0,0,.28), inset 0 0 0 1px var(--line); opacity: 0; transform: translateY(10px) scale(.98); transform-origin: 0 100%; pointer-events: none; transition: opacity .3s, transform .3s; display: flex; flex-direction: column; max-height: calc(100vh - 100px); }
.tp.is-open .tp__panel { opacity: 1; transform: none; pointer-events: auto; }
.tp__scroll { overflow-y: auto; padding: 18px 18px 6px; overscroll-behavior: contain; }
.tp h5 { margin: 4px 0 10px; font-family: "JetBrains Mono", monospace; font-size: 11px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.tp h5 small { text-transform: none; letter-spacing: 0; font-family: "Barlow", sans-serif; font-size: 12px; margin-left: 6px; opacity: .8; }
.tp__presets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 18px; }
.tp__presets button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line); text-align: left; }
.tp__presets i { width: 100%; height: 34px; border-radius: 8px; margin-bottom: 6px; background: linear-gradient(90deg, var(--a) 0 60%, var(--b) 60% 80%, var(--c) 80%); box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.tp__presets b { font-size: 13px; font-weight: 600; }
.tp__presets small { font-size: 11px; color: var(--muted); }
.tp__presets button.is-on { box-shadow: inset 0 0 0 2px var(--ink); }
.tp__themes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px 6px; margin-bottom: 18px; }
.tp__theme { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); }
.tp__theme i { width: 46px; height: 46px; border-radius: 12px; display: block; position: relative; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(0,0,0,.14); }
.tp__theme i::before { content: ""; position: absolute; left: 8px; right: 8px; top: 10px; height: 6px; border-radius: 3px; background: var(--c-ink); }
.tp__theme i::after { content: ""; position: absolute; right: 8px; bottom: 8px; width: 12px; height: 12px; border-radius: 50%; background: var(--c-acc); }
.tp__theme.is-on { color: var(--ink); font-weight: 600; }
.tp__theme.is-on i { box-shadow: 0 0 0 2px var(--bg-2), 0 0 0 4px var(--ink); }
.tp__types { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 18px; }
.tp__type { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 10px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line); text-align: left; }
.tp__type b { grid-row: 1 / 3; font-size: 22px; line-height: 1; white-space: nowrap; font-weight: 500; }
.tp__type b i { font-weight: inherit; }
.tp__type span { font-weight: 600; font-size: 13px; }
.tp__type small { color: var(--muted); font-size: 10.5px; line-height: 1.2; }
.tp__type.is-on { background: var(--ink); color: var(--bg-2); }
.tp__type.is-on small { color: inherit; opacity: .7; }
.tp__corners { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 12px; }
.tp__corners button { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line); font-size: 13px; font-weight: 600; }
.tp__corners i { width: 22px; height: 22px; border: 2px solid currentColor; border-right: 0; border-bottom: 0; }
.tp__corners button.is-on { background: var(--ink); color: var(--bg-2); }
.tp__foot { padding: 12px 18px 16px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.tp__foot button { font-size: 13px; text-decoration: underline; text-underline-offset: 3px; color: var(--muted); }
.tp__toast { font-size: 12px; color: var(--muted); }

/* ---------- ARTICLE PAGE (Arbiter insights + read progress) ---------- */
.note-hero { padding-top: 120px; }
.note-hero .wrap { max-width: 1100px; }
.note-meta { display: flex; gap: 18px; flex-wrap: wrap; color: var(--muted); margin: 26px 0 18px; }
.note-title { margin: 0; font-family: var(--display); font-weight: var(--head-weight); text-transform: var(--head-case); font-stretch: var(--head-stretch); font-size: clamp(40px, 6.4vw, 96px); letter-spacing: var(--head-track); line-height: .98; max-width: 18ch; }
.note-cover { margin-top: clamp(30px, 4vw, 56px); border-radius: var(--r); overflow: hidden; aspect-ratio: 21 / 10; }
.note-cover img { width: 100%; height: 120%; object-fit: cover; margin-top: -10%; }
.note-body { max-width: 720px; margin: 0 auto; font-size: clamp(17px, 1.3vw, 19px); line-height: 1.65; }
.note-body h2 { font-family: var(--display); font-weight: var(--head-weight); text-transform: var(--head-case); font-stretch: var(--head-stretch); font-size: clamp(26px, 2.6vw, 38px); letter-spacing: -.03em; line-height: 1.1; margin: 56px 0 16px; }
.note-body p { margin: 0 0 18px; color: color-mix(in srgb, var(--ink) 82%, var(--bg)); }
.note-body ol, .note-body ul { padding-left: 1.2em; margin: 0 0 18px; }
.note-body li { margin-bottom: 10px; }
.note-body blockquote { margin: 40px 0; padding-left: 22px; border-left: 2px solid var(--accent); font-family: var(--serif); font-style: var(--it-style); font-size: clamp(24px, 2.4vw, 34px); line-height: 1.2; letter-spacing: -.02em; }
.note-author { display: flex; align-items: center; gap: 14px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); }
.note-author img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
.note-author b { display: block; }
.note-author span { color: var(--muted); }

/* ---------- CASE STUDY (Velvo layout) ---------- */
.vcs-hero { padding-top: 84px; }
.vcs-cover { position: relative; border-radius: var(--r-s); overflow: hidden; height: calc(100vh - 84px - clamp(16px, 3vw, 40px)); min-height: 380px; background: #000; }
.vcs-cover video, .vcs-cover img { position: absolute; inset: -8% 0; width: 100%; height: 116%; object-fit: cover; }
.vcs__details { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: clamp(30px, 8vw, 160px); align-items: start; }
.vcs__left { position: sticky; top: 100px; }
.vcs__title { margin: 18px 0 40px; font-family: var(--display); font-weight: var(--head-weight); text-transform: var(--head-case); font-stretch: var(--head-stretch); font-size: clamp(44px, 5vw, 72px); letter-spacing: var(--head-track); line-height: 1; }
.vcs__meta { margin: 0; display: grid; gap: 24px; }
.vcs__meta dt { font-weight: 600; font-size: 14px; text-transform: uppercase; letter-spacing: .02em; margin-bottom: 4px; }
.vcs__meta dd { margin: 0; color: var(--muted); }
.vcs__h { margin: 0 0 20px; font-family: var(--display); font-weight: var(--head-weight); text-transform: var(--head-case); font-stretch: var(--head-stretch); font-size: clamp(32px, 2.8vw, 40px); letter-spacing: -.02em; line-height: 1.2; }
.vcs__block { margin-bottom: 40px; }
.vcs__block p { margin: 0 0 14px; color: var(--muted); font-size: 17px; max-width: 60ch; }
.vcs__label { margin: 0 0 14px; font-weight: 600; font-size: 14px; text-transform: uppercase; letter-spacing: .02em; }
.vcs__list { list-style: none; margin: 0; padding: 0; counter-reset: v; }
.vcs__list li { counter-increment: v; padding: 10px 0; border-bottom: 1px solid var(--line); font-weight: 500; display: flex; gap: 14px; }
.vcs__list li::before { content: counter(v) "."; color: var(--muted); min-width: 22px; }
.vcs .more { margin-top: 0; }
.vcs .more__panel { margin-bottom: 0; }
.vcs .more__inner { padding: 0 0 30px; }
.vcs .more__inner h3 { margin: 28px 0 12px; }
.vcs__imgs { display: flex; flex-direction: column; gap: 32px; margin-top: clamp(60px, 8vw, 120px); }
.vcs__img { margin: 0; position: relative; border-radius: var(--r-s); overflow: hidden; aspect-ratio: 1360 / 839; background: var(--bg-3); }
.vcs__img img, .vcs__img video { position: absolute; inset: -8% 0; width: 100%; height: 116%; object-fit: cover; }
.vcs-quote { text-align: center; }
.vcs-quote__text { max-width: 900px; margin: 0 auto 40px; font-family: var(--display); font-weight: var(--head-weight); text-transform: var(--head-case); font-stretch: var(--head-stretch); font-size: clamp(26px, 2.8vw, 40px); letter-spacing: -.02em; line-height: 1.2; }
.vcs-quote__who { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.vcs-quote__who img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; }
.vcs-quote__who b { font-weight: 600; }
.vcs-quote__who span { color: var(--muted); }

/* =====================================================================
   HOME (slide: Proposed flow for Home page)
   ===================================================================== */

/* ---------- 02 Agency positioning (Aton: label 18/600 grey, statement 48/500
   centred in 832px, black "Let's chat" pill; 135px above, 160px below) ---------- */
.pos { padding-block: clamp(80px, 9.4vw, 135px) clamp(90px, 11vw, 160px); text-align: center; }
.pos__in { display: flex; flex-direction: column; align-items: center; gap: 40px; }
.pos__label { font-size: 18px; font-weight: 600; color: var(--muted); }
.pos__text { margin: 0; max-width: 832px; font-family: var(--sans); font-size: clamp(28px, 3.33vw, 48px); font-weight: 500; line-height: 1.2; letter-spacing: -.02em; }

/* ---------- 03 Selected work (Arbiter practice track: cards 34vw wide,
   24px apart, rule on top with italic number + mono label, 8px-radius
   picture, 28/600 title, 16/600 line) ---------- */
.sw__pin { padding-block: 70px 36px; }
.sw__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 48px; flex-wrap: wrap; }
.sw__title { margin: 0; font-family: var(--display); font-weight: var(--head-weight); font-size: clamp(36px, 4.17vw, 60px); letter-spacing: -.035em; line-height: .98; }
.sw__track { gap: 24px; padding-inline: 32px; }
.sw__card { flex: 0 0 clamp(300px, 34vw, 520px); display: flex; flex-direction: column; gap: 20px; color: inherit; }
.sw__top { display: flex; justify-content: space-between; align-items: flex-end; padding-top: 16px; border-top: 1px solid var(--line); }
.sw__no { font-family: var(--serif); font-style: var(--it-style); font-weight: 400; font-size: clamp(40px, 3.9vw, 56px); line-height: .9; color: var(--accent); }
.sw__img { position: relative; aspect-ratio: 489 / 378; border-radius: min(var(--r-s), 8px); overflow: hidden; background: var(--bg-3); }
.sw__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.sw__name { margin: 0; font-family: var(--sans); font-size: clamp(22px, 1.95vw, 28px); font-weight: 600; letter-spacing: -.035em; line-height: 1.02; }
.sw__desc { margin: 0; max-width: 352px; font-size: 16px; font-weight: 600; line-height: 1.5; color: var(--muted); }
.sw .hs__foot { gap: 24px; }
@media (min-width: 861px) { .sw__pin { height: 100vh; } }

/* ---------- 05 Our services (Aton: names at 120/600, 32px apart, others at
   40% until they pass the middle; 316px info column with picture + line) ---------- */
.asvc { padding-block: clamp(90px, 11vw, 160px); }
.asvc__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 32px; }
.asvc__item { position: relative; display: grid; grid-template-columns: 1fr minmax(240px, 316px); gap: 40px; align-items: start; }
.asvc__name { display: flex; align-items: flex-start; gap: 10px; color: var(--ink); opacity: .4; transition: opacity .5s ease; }
.asvc__name small { font-size: 18px; font-weight: 600; letter-spacing: .01em; padding-top: 8px; white-space: nowrap; }
.asvc__name span { font-family: var(--display); font-weight: 600; text-transform: var(--head-case); font-size: clamp(32px, calc((100vw - 110px) / 8.2), 100px); line-height: .9; letter-spacing: -.04em; }
.asvc__info { opacity: 0; transition: opacity .5s ease; position: sticky; top: 140px; }
.asvc__img { border-radius: min(var(--r-s), 8px); overflow: hidden; aspect-ratio: 316 / 187; margin-bottom: 24px; }
.asvc__img img { width: 100%; height: 100%; object-fit: cover; }
.asvc__info p { margin: 0 0 14px; padding-left: 48px; font-size: 18px; font-weight: 500; line-height: 1.2; color: var(--ink); }
.asvc__more { padding-left: 48px; font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.asvc__more:hover { color: var(--ink); }
.asvc__item.is-on .asvc__name, .asvc__item.is-on .asvc__info { opacity: 1; }
.asvc__name:hover { opacity: 1; }
.no-js .asvc__name, .no-js .asvc__info { opacity: 1; }

/* ---------- 06 Testimonial (Aton: three white cards, 16px apart, radius 16,
   padding 32/40/40, logo on top, 18/600 quote, 40px round photo) ---------- */
.atst { padding-block: clamp(90px, 11vw, 160px); }
.atst__mask { overflow: hidden; cursor: grab; touch-action: pan-y; }
.atst__mask.is-drag { cursor: grabbing; }
.atst__track { display: flex; gap: 16px; will-change: transform; }
.atst__card { flex: 0 0 calc((100% - 32px) / 3); min-height: 521px; display: flex; flex-direction: column; justify-content: space-between; gap: 48px; padding: 32px 40px 40px; border-radius: var(--r); background: var(--bg-2); user-select: none; }
.atst__logo { height: 28px; width: auto; max-width: 160px; object-fit: contain; object-position: left; filter: var(--logo); align-self: flex-start; }
.atst__body { display: flex; flex-direction: column; gap: 48px; }
.atst__body p { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.6; letter-spacing: -.005em; }
.atst__who { display: flex; align-items: center; gap: 16px; color: var(--muted); font-size: 16px; font-weight: 500; }
.atst__who img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; pointer-events: none; }
.atst__dots { display: flex; justify-content: center; gap: 8px; margin-top: 32px; }
.atst__dots button { width: 8px; height: 8px; border-radius: 50%; background: var(--line); transition: background .3s, width .3s; }
.atst__dots button.is-on { background: var(--ink); }

/* ---------- 07 Footer with form (Aton footer: near-black, 48/500 white title,
   grey email, page links on the right, address + round socials) ---------- */
.aftr { background: var(--inv-bg); color: var(--inv-ink); --ink: var(--inv-ink); --muted: var(--inv-muted); --line: var(--inv-line); --bg: var(--inv-bg); --bg-2: var(--inv-bg-2); --logo: var(--inv-logo); --accent: var(--inv-accent); --accent-ink: var(--inv-accent-ink); padding-block: 40px; }
.aftr__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; flex-wrap: wrap; }
.aftr__title { margin: 0; font-family: var(--sans); font-size: clamp(30px, 3.33vw, 48px); font-weight: 500; line-height: 1.2; letter-spacing: -.02em; }
.aftr__mail { font-size: clamp(30px, 3.33vw, 48px); font-weight: 500; line-height: 1.2; letter-spacing: -.02em; color: var(--muted); transition: color .3s; }
.aftr__mail:hover { color: var(--ink); }
.aftr__nav { display: flex; gap: 32px; flex-wrap: wrap; }
.aftr__nav a { font-size: 18px; font-weight: 600; transition: opacity .2s; }
.aftr__nav a:hover { opacity: .6; }
.aftr__form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 40px; margin-top: 80px; padding-top: 40px; border-top: 1px solid var(--line); }
.aftr__intro p { margin: 14px 0 0; font-size: clamp(20px, 1.8vw, 26px); font-weight: 500; line-height: 1.25; letter-spacing: -.01em; max-width: 22ch; }
.aftr__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
.aftr__wide { grid-column: 1 / -1; }
.aftr__fields select { width: 100%; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 17px; padding: 6px 0; outline: none; }
.aftr__fields select option { color: #111; }
.aftr__send { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: 22px; }
.aftr__send p { margin: 0; color: var(--muted); font-size: 14px; max-width: 34ch; }
.aftr__form.is-sent .aftr__fields { display: none; }
.aftr__form.is-sent .form__ok { display: block; }
.aftr__bottom { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-top: 90px; }
.aftr__addr span { font-size: 18px; font-weight: 600; color: var(--muted); }
.aftr__tel { display: inline-block; margin-top: 12px; font-size: 18px; font-weight: 600; color: var(--muted); transition: color .3s; }
.aftr__tel:hover { color: var(--ink); }
.aftr__addr p { margin: 8px 0 0; font-size: 18px; font-weight: 600; line-height: 1.2; }
.aftr__socials { display: flex; gap: 8px; }
.aftr__socials a { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--ink) 10%, transparent); transition: background .3s; }
.aftr__socials a:hover { background: color-mix(in srgb, var(--ink) 22%, transparent); }
.aftr__socials svg { width: 18px; height: 18px; }
.aftr__copy { display: flex; align-items: flex-end; gap: 64px; margin-top: 48px; flex-wrap: wrap; }
.aftr__copy > div { display: flex; flex-direction: column; gap: 8px; font-size: 18px; font-weight: 600; }
.aftr__copy > div span:first-child { color: var(--muted); }
.aftr__copy .totop { margin-left: auto; font-size: 14px; color: var(--muted); }

@media (min-width: 992px) {
  .pos__text, .aftr__title, .aftr__mail { font-size: 48px; }
}

/* services: 100px on desktop so the longest name ("Integrated delivery") stays on one
   line at about the width of Aton's longest ("Brand strategy", 797px); scales down below */
@media (min-width: 861px) { .asvc__name span { font-size: min(100px, calc((100vw - 500px) / 8.2)); } }

/* ---------- placeholder pages ---------- */
.ph { min-height: 80vh; display: flex; align-items: center; padding-block: 140px 80px; }
.ph__title { margin: 18px 0 20px; font-family: var(--display); font-weight: var(--head-weight); font-size: clamp(48px, 8vw, 120px); letter-spacing: var(--head-track); line-height: .95; }
.ph__list { list-style: none; margin: 0 0 40px; padding: 0; border-top: 1px solid var(--line); max-width: 720px; }
.ph__list li { padding: 18px 0; border-bottom: 1px solid var(--line); font-size: clamp(22px, 2.2vw, 32px); font-weight: 500; letter-spacing: -.02em; scroll-margin-top: 120px; }
.ph__list small { font-size: 14px; color: var(--muted); margin-right: 10px; vertical-align: middle; }
.ph__list em { font-family: var(--serif); font-style: var(--it-style); color: var(--muted); }
.ph__list li:target { color: var(--accent); }
.ph__text { max-width: 52ch; color: var(--muted); font-size: 18px; margin: 0 0 32px; }

@media (max-width: 991px) {
  .atst__card { flex-basis: 82%; min-height: 0; }
}
@media (max-width: 860px) {
  .sw__card { flex-basis: 82%; scroll-snap-align: start; }
  .asvc__item { grid-template-columns: 1fr; gap: 16px; }
  .asvc__info { position: static; display: none; }
  .asvc__item.is-on .asvc__info { display: block; }
  .asvc__info p, .asvc__more { padding-left: 0; }
  .aftr__form { grid-template-columns: 1fr; margin-top: 56px; }
  .aftr__fields { grid-template-columns: 1fr; }
  .aftr__bottom { flex-direction: column; align-items: flex-start; margin-top: 56px; }
  .aftr__send { flex-direction: column; align-items: flex-start; }
}

/* ---------- REVEAL HELPERS ---------- */
.has-js [data-reveal] { opacity: 0; transform: translateY(40px); }
.has-js [data-clip] { clip-path: inset(12% 6% 12% 6% round 18px); }
.split-line { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.split-line > span { display: inline-block; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1100px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .cs-meta { grid-template-columns: repeat(3, 1fr); }
  .ftr__cols { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .hdr__link { display: none; }
  .hero__top { grid-template-columns: 1fr 1fr; } .hero__top-c { display: none; }
  .hero__intro { position: static; width: auto; max-width: 420px; }
  .hero__title { margin-top: 40px; font-size: 13vw; }
  .hero__bottom { grid-template-columns: 1fr; justify-items: start; }
  .hero > .wrap { min-height: 0; }
  .hl--2 { padding-left: 0; }
  .hero__est { display: none; }
  .services__grid, .contact__grid, .about__text, .longterm, .ftr__top, .cs-body, .plans { grid-template-columns: 1fr; }
  .svc__panel, .cs-info { position: static; }
  .svc__panel { order: -1; }
  .svc button { font-size: clamp(30px, 8vw, 50px); }
  .rcard__body { grid-template-columns: 1fr; }
  .people a { grid-template-columns: 50px 1fr auto; }
  .people__role { display: none; }
  .faq button { grid-template-columns: 44px 1fr auto; }
  .faq__a p { padding: 0 0 24px 64px; }
  .notes__grid { grid-template-columns: 1fr; }
  .startnow__words { flex-direction: column; }
  .startnow__words span:last-child { align-self: flex-end; }
  .stack__card { top: 80px; height: 60vh; }
  .peek { display: none; }
  .collage { height: 130vw; }
  .collage__b { width: 72%; }
}
@media (max-width: 560px) {
  .wrap { padding-inline: 16px; }
  .stats { gap: 10px; }
  .stat { min-height: 180px; padding: 20px 18px; }
  .hero__top { grid-template-columns: 1fr; gap: 6px; } .hero__top-r { text-align: left; }
  .cs-meta { grid-template-columns: 1fr 1fr; }
  .cs-gallery .two { grid-template-columns: 1fr; }
  .ftr__cols { grid-template-columns: 1fr 1fr; }
  .tp__btn span { display: none; }
  .tp__btn { padding: 0 8px; }
  .step { flex-basis: 88%; }
  .badge { width: 180px; height: 180px; }
  .badge a { width: 128px; height: 128px; }
}
@media (max-width: 1100px) {
  .hdr__link { display: none; }
  .cgrid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 860px) {
  .ahero { height: 240vh; }
  .ahero__text { align-items: stretch; padding-top: 96px; }
  .ahero__words { flex-direction: column; align-items: flex-start; justify-content: space-between; }
  .ahero__logo { width: 72vw; height: auto; }
  .ahero__tag { font-size: 18px; }
  .ahero__w--r { align-self: flex-end; }
  .ahero__line, .ahero__hint { display: none; }
  .arb { height: 200vh; }
  .projects__head { grid-template-columns: 1fr; text-align: center; }
  .projects__head .dotr { display: none; }
  .cgrid { grid-template-columns: repeat(3, 1fr); }
  .tst__card { flex-basis: 88%; grid-template-columns: 1fr; min-height: 0; gap: 20px; padding: 18px; }
  .tst__photo { order: -1; min-height: 0; aspect-ratio: 4 / 3; }
  .tst__body { gap: 24px; }
  .howwe__grid, .vcs__details { grid-template-columns: 1fr; }
  .vcs__left { position: static; }
  .vcs-cover { height: 62vh; }
}
@media (max-width: 560px) {
  .cgrid { grid-template-columns: repeat(2, 1fr); }
  .cgrid__cell img { max-height: 32px; }
  .stack__logo { height: 80px; }
  .tp__btn small { display: none; }
  .tp__presets { grid-template-columns: repeat(2, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .has-js [data-reveal], .has-js .arb__foot { opacity: 1; transform: none; }
  .arb__media { clip-path: none; }
  .ahero__wrap { transform: none; }
  .has-js [data-clip] { clip-path: none; }
}

/* =====================================================================
   ABOUT (deck slide 17: Proposed flow for About page)
   Sizes measured on the reference pages at 1440 x 900.
   ===================================================================== */

/* ---------- 1 hero (Aton /about): 64/600 statement centred in 1016px,
   18/600 grey label 40px above; 2 small (156x93) + 3 large (328x196)
   pictures, radius 11px, that drift on scroll ---------- */
.abh { position: relative; overflow: hidden; padding: 256px 0 464px; }
.abh__text { position: relative; z-index: 1; max-width: 1016px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 40px; text-align: center; }
.abh__label { font-size: 18px; font-weight: 600; line-height: 1.2; color: var(--muted); }
.abh__title { margin: 0; font-family: var(--sans); font-size: clamp(32px, 4.44vw, 64px); font-weight: 600; line-height: 1.1; letter-spacing: -.02em; }
/* Same sizes and anchors as Aton (fixed px; edge or centre anchored), but the
   pictures sit above or below the text band so they never cover a word. */
.abh__img { position: absolute; border-radius: 11px; overflow: hidden; background: var(--bg-3); will-change: transform; }
.abh__img img { width: 100%; height: 100%; object-fit: cover; }
.abh__img--sm { width: 156px; height: 93px; }
.abh__img--lg { width: 328px; height: 196px; }
.abh__img--1 { left: calc(50% - 230px); top: -12px; }
.abh__img--2 { left: 40px; top: 96px; }
.abh__img--3 { left: calc(50% - 442px); top: 635px; }
.abh__img--4 { right: 40px; top: 104px; }
.abh__img--5 { left: min(calc(50% + 344px), calc(100% - 368px)); top: 685px; }

/* ---------- 2 + 3 story + clients (Velvo /about): 316px picture column,
   896px text column, 64/600 title, 20/400 copy; logo row of six ---------- */
.story { padding-block: clamp(80px, 9.72vw, 140px); }
.story__in { display: flex; justify-content: space-between; gap: 40px; }
.story__left { flex: 0 0 316px; display: flex; flex-direction: column; gap: 40px; }
.story__label { font-size: 16px; font-weight: 600; text-transform: uppercase; letter-spacing: -.02em; }
.story__img { position: relative; aspect-ratio: 316 / 231; overflow: hidden; }
.story__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.2); }
.story__right { flex: 0 1 896px; display: flex; flex-direction: column; gap: 56px; }
.story__title { margin: 0; font-family: var(--sans); font-size: clamp(32px, 4.44vw, 64px); font-weight: 600; line-height: 1.125; letter-spacing: -.02em; }
.story__body p { margin: 0 0 10px; font-size: clamp(17px, 1.39vw, 20px); line-height: 1.2; letter-spacing: -.02em; }
.plogos { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; margin-top: 80px; }
.plogos__col { display: flex; justify-content: center; min-width: 0; }
.plogos__win { width: 180px; max-width: 100%; height: 80px; overflow: hidden; }
.plogos__strip { display: flex; flex-direction: column; will-change: transform; }
.plogos__strip img { height: 80px; width: 100%; object-fit: contain; padding: 18px 16px; filter: var(--logo); }

/* ---------- 4 why Type A (Zorven /about-01): 48/400 title, four 12px-radius
   cards, 24px padding, 20/400 number + title, 14/400 grey text ---------- */
.why { padding-block: 80px; }
.why__in { max-width: 1300px; margin: 0 auto; }
.why__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: 50px; }
.why__titles { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; max-width: 620px; }
.why__title { margin: 0; font-family: var(--sans); font-size: clamp(32px, 3.33vw, 48px); font-weight: 400; line-height: 1.2; letter-spacing: -.02em; max-width: 11.5em; }
.why__cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.why__card { min-height: 348px; display: flex; flex-direction: column; justify-content: space-between; gap: 80px; padding: 24px; border-radius: min(var(--r), 12px); background: var(--bg-2); }
.why__card > span, .why__card h3 { font-size: 20px; font-weight: 400; line-height: 1.3; margin: 0; }
.why__card p { margin: 14px 0 0; font-size: 14px; line-height: 1.3; color: var(--muted); min-height: 3.9em; }

/* ---------- 5 awards (Velvo /about): 140/600 title + count, rows 24/500
   with 28px padding; lines draw in from the left ---------- */
.awd { padding-block: clamp(90px, 9.72vw, 140px); }
.awd__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: 88px; }
.awd__title, .awd__count { margin: 0; font-family: var(--sans); font-size: clamp(52px, 9.72vw, 140px); font-weight: 600; line-height: 1.07; letter-spacing: -.02em; }
.awd__title { max-width: 4.9em; }
.awd__group { position: relative; display: flex; justify-content: space-between; gap: 32px; }
.awd__rule { position: absolute; left: 0; top: 0; height: 1px; width: 100%; background: var(--line); transform-origin: 0 50%; }
.awd__year { flex: 0 0 40.3%; display: flex; justify-content: space-between; gap: 8px; padding: 28px 0; }
.awd__list { flex: 0 0 57.35%; list-style: none; margin: 0; padding: 0; }
.awd__list li { position: relative; display: flex; justify-content: space-between; gap: 24px; padding: 28px 0; }
.awd__list li > i { position: absolute; left: 0; bottom: 0; height: 1px; width: 100%; background: var(--line); transform-origin: 0 50%; }
.awd__year span, .awd__list span { font-size: clamp(18px, 1.67vw, 24px); font-weight: 500; line-height: 1.17; letter-spacing: -.02em; }
.awd__list span:last-child { white-space: nowrap; }
.awd__note { margin: 32px 0 0; font-size: 14px; color: var(--muted); }

/* ---------- 6 CTA form (Zorven /contact-01): 62/400 title, 620/620 grid,
   picture card with 32/400 title and two offices, form fields 16/400 ---------- */
.cta { padding-top: clamp(100px, 10.4vw, 150px); }
.cta__title { max-width: 1300px; margin: 0 auto 50px; font-family: var(--sans); font-size: clamp(36px, 4.3vw, 62px); font-weight: 400; line-height: 1.1; letter-spacing: -.02em; }
.cta__title .split-line > span { display: inline-block; }
.cta__panel { background: var(--bg-2); padding-bottom: 80px; }
.cta__grid { max-width: 1300px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; }
.cta__card { position: relative; max-width: 532px; display: flex; flex-direction: column; justify-content: space-between; gap: 120px; min-height: 667px; padding: 30px; overflow: hidden; color: #fff;
  background: linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.08) 38%, rgba(0,0,0,.12) 55%, rgba(0,0,0,.72) 100%), url(../img/festival.jpg) center / cover; }
.cta__card h3 { margin: 40px 0 0; max-width: 8em; font-size: clamp(26px, 2.22vw, 32px); font-weight: 400; line-height: 1.2; }
.cta__offices { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.cta__offices h4 { margin: 0 0 14px; font-size: 24px; font-weight: 400; }
.cta__offices a, .cta__offices p { margin: 0; font-size: 16px; line-height: 1.3; color: #fff; }
.cta__form { padding-top: 40px; }
.cta__form > h3 { margin: 0 0 70px; font-size: 24px; font-weight: 400; }
.cform__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 16px; }
.cfield { display: flex; flex-direction: column; gap: 6px; }
.cfield--wide, .cform__send { grid-column: 1 / -1; }
.cfield > span { font-size: 16px; }
.cfield input, .cfield select, .cfield textarea { width: 100%; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); font: inherit; font-size: 16px; padding: 10px 0; outline: none; border-radius: 0; resize: none; transition: border-color .3s; }
.cfield textarea { height: 165px; }
.cfield select option { color: #111; }
.cfield input::placeholder, .cfield textarea::placeholder { color: var(--muted); }
.cfield input:focus, .cfield select:focus, .cfield textarea:focus { border-bottom-color: var(--ink); }
.cform__send { height: 42px; border-radius: 500px; background: var(--ink); color: var(--bg); font-size: 16px; font-weight: 500; overflow: hidden; }
.cform__send span { display: inline-block; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.cform.is-sent .cform__fields { display: none; }
.cform.is-sent .form__ok { display: block; }

/* footer on pages that have their own form: no second form */
.aftr--plain .aftr__bottom { margin-top: 90px; }

@media (min-width: 768px) and (max-width: 1100px) {
  .abh__img--sm { width: 120px; height: 72px; } .abh__img--lg { width: 230px; height: 137px; }
  .abh__img--3 { left: 40px; } .abh__img--5 { left: auto; right: 40px; }
}
@media (max-width: 991px) {
  .story__in { flex-direction: column; }
  .story__left { flex-basis: auto; max-width: 420px; }
  .plogos { grid-template-columns: repeat(3, 1fr); row-gap: 8px; }
  .why__cards { grid-template-columns: 1fr 1fr; }
  .awd__group { flex-direction: column; gap: 0; }
  .awd__year { padding-bottom: 8px; }
  .cta__grid { grid-template-columns: 1fr; gap: 40px; }
  .cta__card { min-height: 460px; }
  .cta__form { padding-top: 0; }
}
@media (max-width: 767px) {
  .abh { padding: 232px 0 250px; }
  .abh__img--sm { width: 30vw; height: 18vw; } .abh__img--lg { width: 44vw; height: 26.3vw; }
  .abh__img { border-radius: 8px; }
  .abh__img--1 { left: auto; right: 16px; top: 112px; } .abh__img--2 { left: 16px; top: 92px; }
  .abh__img--3 { left: 16px; top: auto; bottom: 64px; } .abh__img--4 { display: none; } .abh__img--5 { left: auto; right: 16px; top: auto; bottom: 120px; }
  .abh__text { gap: 24px; }
  .plogos { grid-template-columns: repeat(2, 1fr); }
  .why__head { flex-direction: column; align-items: flex-start; }
  .why__cards { grid-template-columns: 1fr; }
  .why__card { min-height: 240px; }
  .awd__head { margin-bottom: 40px; flex-wrap: wrap; }
  .cform__fields { grid-template-columns: 1fr; }
  .cta__offices { grid-template-columns: 1fr; }
}

/* =====================================================================
   WORK (deck slide 20 · studio-velvo.webflow.io/projects)
   104/600 title; 2 columns of 664px, 32px apart, 64px between rows;
   every third project full width; picture radius 2px; 28/600 name, 20/400 type
   ===================================================================== */
.wk { padding-block: 140px clamp(90px, 9.72vw, 140px); }
.wk__head { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; margin-top: 40px; }
.wk__count { font-family: var(--sans); font-size: clamp(40px, 4.3vw, 62px); line-height: 1.1; letter-spacing: -.02em; align-self: end; }
.wk__count em { font-style: normal; color: var(--muted); }
.wk__title { margin: 0; font-family: var(--sans); font-size: clamp(34px, 4.3vw, 62px); font-weight: 400; line-height: 1.1; letter-spacing: -.02em; max-width: 9.5em; }
.wk__title .split-line > span { display: inline-block; }
.wk__sub { margin: 24px 0 0; font-size: clamp(18px, 1.67vw, 24px); color: var(--muted); }
.wk__grid { margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--line); }
.wk__filters button { font-size: clamp(17px, 1.39vw, 20px); color: var(--muted); transition: color .3s; padding: 4px 0; }
.wk__filters button sup { font-size: .6em; }
.wk__filters button:hover, .wk__filters button.is-on { color: var(--ink); }
.wk__filters button.is-on { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.wk__anchor { display: block; position: relative; top: -120px; }
.wk__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px 32px; align-items: start; }
.wk__card { display: block; color: inherit; transition: opacity .5s ease; }
.wk__card.is-dim { opacity: .18; }
.wk__card--full { grid-column: 1 / -1; }
.wk__img { position: relative; overflow: hidden; border-radius: 2px; aspect-ratio: 1.44; background: var(--bg-3); }
.wk__card--port .wk__img { aspect-ratio: 1.8 / 2; }
.wk__card--full .wk__img { aspect-ratio: 1.84; }
.wk__zoom { position: absolute; inset: 0; transition: transform .5s ease; }
.wk__zoom { transition: transform .9s cubic-bezier(.2,.8,.2,1); }
.wk__card:hover .wk__zoom { transform: scale(1.05); }
.wk__meta h2 { display: inline; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .5s cubic-bezier(.2,.8,.2,1); }
.wk__card:hover .wk__meta h2 { background-size: 100% 1px; }
.wk__meta p { margin-top: 6px; }
.wk__zoom img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.2); }
.wk__zoom .wk__para { top: -10%; height: 110%; }
.wk__float { position: absolute; left: 0; top: 0; opacity: 0; pointer-events: none; transition: opacity .3s ease; z-index: 2; will-change: transform; }
.wk__img:hover .wk__float { opacity: 1; }
.wk__float-box { width: 200px; height: 52px; padding: 10px 20px; background: #0f0f0f; color: #fff; overflow: hidden; display: flex; align-items: center; }
.wk__float-in { display: flex; white-space: nowrap; animation: wkmarq 8s linear infinite; }
.wk__float-in span { padding-right: 32px; font-size: 28px; font-weight: 600; letter-spacing: -.02em; line-height: 1; }
@keyframes wkmarq { to { transform: translateX(-50%); } }
.wk__meta { padding-top: 20px; }
.wk__meta h2 { margin: 0; font-size: clamp(22px, 1.94vw, 28px); font-weight: 600; line-height: 1.14; letter-spacing: -.02em; }
.wk__meta p { margin: 0; font-size: clamp(16px, 1.39vw, 20px); line-height: 1.2; color: var(--muted); }
@media (hover: none) { .wk__float { display: none; } }

/* =====================================================================
   CASE STUDY (deck slide 22)
   Velvo impact-edge: 1360x840 cover, 64/600 title, 16/600 caps labels,
   40/600 Objective, 20/400 grey text. Aton lightbox: 672x398 + 1360x816
   pictures with 16px corners, 48/500 statement, 4 result cards 328x204,
   180/600 "Other projects". Velvo testimonial: 40/600 centred quote.
   ===================================================================== */
.cs2-hero { padding-top: 100px; }
.cs2-hero__box { position: relative; overflow: hidden; border-radius: 2px; height: min(840px, 58.33vw); min-height: 320px; background: var(--bg-3); }
.cs2-hero__box img { position: absolute; left: 0; top: -12%; width: 100%; height: 112%; object-fit: cover; }
.cs2-ov { padding-block: 80px clamp(90px, 9.72vw, 140px); }
.cs2-ov__in { display: flex; justify-content: space-between; gap: 48px; max-width: 1244px; }
.cs2-ov__left { flex: 0 0 369px; padding-top: 40px; }
.cs2-back { display: inline-block; margin-bottom: 24px; font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.cs2-back:hover { color: var(--ink); }
.cs2-ov__title { margin: 0 0 56px; font-family: var(--sans); font-size: clamp(40px, 4.44vw, 64px); font-weight: 600; line-height: 1.125; letter-spacing: -.02em; }
.cs2-ov__meta { margin: 0; display: flex; flex-direction: column; gap: 24px; }
.cs2-ov__meta dt { font-size: 16px; font-weight: 600; text-transform: uppercase; line-height: 1.25; }
.cs2-ov__meta dd { margin: 4px 0 0; font-size: 16px; font-weight: 500; line-height: 1.25; color: var(--muted); }
.cs2-ov__right { flex: 0 1 548px; padding-top: 40px; }
.cs2-ov__block { margin-bottom: 40px; }
.cs2-ov__block h2 { margin: 0 0 20px; font-family: var(--sans); font-size: clamp(30px, 2.78vw, 40px); font-weight: 600; line-height: 1.2; letter-spacing: -.02em; }
.cs2-ov__block p, .cs2-ov__list li, .cs2-ov .more__inner p { margin: 0 0 10px; font-size: clamp(17px, 1.39vw, 20px); line-height: 1.2; color: var(--muted); }
.cs2-ov__block h3, .cs2-ov .more__inner h3 { margin: 0 0 12px; font-size: clamp(17px, 1.39vw, 20px); font-weight: 600; text-transform: uppercase; line-height: 1.2; }
.cs2-ov .more__inner h3 { margin-top: 24px; }
.cs2-ov__list { margin: 0; padding-left: 1.4em; }
.cs2-label { font-size: 18px; font-weight: 600; color: var(--muted); }
.cs2-img { position: relative; overflow: hidden; border-radius: min(var(--r), 16px); aspect-ratio: 672 / 398; background: var(--bg-3); }
.cs2-img img { position: absolute; left: 0; top: -10%; width: 100%; height: 120%; object-fit: cover; }
.cs2-img--full { aspect-ratio: 1360 / 816; margin-top: 135px; }
.cs2-show__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cs2-show__note { display: flex; flex-direction: column; gap: 40px; padding-block: 135px; }
.cs2-show__note p { margin: 0; max-width: 1016px; font-family: var(--sans); font-size: clamp(28px, 3.33vw, 48px); font-weight: 500; line-height: 1.2; letter-spacing: -.02em; }
.cs2-show__ti { display: grid; grid-template-columns: repeat(8, 1fr); gap: 16px; align-items: start; }
.cs2-show__ti .cs2-img { grid-column: 1 / 6; aspect-ratio: 844 / 499; }
.cs2-show__ti p { grid-column: 7 / 9; margin: 0; font-size: 18px; font-weight: 500; line-height: 1.6; color: var(--muted); }
.cs2-res { padding-block: 135px; }
.cs2-res__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 80px; }
.cs2-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--muted); }
.cs2-res__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.cs2-res__card { display: flex; flex-direction: column; gap: 48px; padding: 32px; border-radius: min(var(--r), 16px); background: var(--bg-2); }
.cs2-res__card b { font-family: var(--sans); font-size: clamp(44px, 4.44vw, 64px); font-weight: 600; line-height: 1.1; letter-spacing: -.02em; }
.cs2-res__card span { font-size: 18px; font-weight: 600; color: var(--muted); }
.cs2-res__note { margin: 24px 0 0; font-size: 14px; color: var(--muted); }
.cs2-tst { padding-block: 140px; }
.cs2-tst__in { margin: 0 auto; max-width: 893px; display: flex; flex-direction: column; align-items: center; gap: 56px; text-align: center; }
.cs2-tst__in blockquote { margin: 0; font-family: var(--sans); font-size: clamp(26px, 2.78vw, 40px); font-weight: 600; line-height: 1.2; letter-spacing: -.02em; }
.cs2-tst__in figcaption { display: flex; flex-direction: column; align-items: center; gap: 24px; font-size: clamp(18px, 1.67vw, 24px); font-weight: 500; }
.cs2-tst__in img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; }
.cs2-oth { padding-block: 120px 135px; overflow: hidden; }
.cs2-oth__title { margin: 0 auto 48px; max-width: 5.3em; text-align: center; font-family: var(--sans); font-size: clamp(64px, 12.5vw, 180px); font-weight: 600; line-height: .9; letter-spacing: -.02em; }
.cs2-oth__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 88px 16px; }
.cs2-oth__card { display: flex; flex-direction: column; gap: 16px; color: inherit; }
.cs2-oth__card h3, .cs2-oth__card p { margin: 0; font-size: clamp(18px, 1.67vw, 24px); font-weight: 600; line-height: 1.6; }
.cs2-oth__card > div + h3 { margin-top: 0; }
.cs2-oth__card p { margin-top: -16px; color: var(--muted); }
.cs2-oth__card .cs2-img img { transition: scale .6s cubic-bezier(.2,.8,.2,1); }
.cs2-oth__card:hover .cs2-img img { scale: 1.06; }
.cs2-oth__all { display: flex; justify-content: center; margin-top: 64px; }

@media (max-width: 991px) {
  .cs2-ov__in { flex-direction: column; }
  .cs2-ov__left, .cs2-ov__right { flex-basis: auto; padding-top: 0; }
  .cs2-res__grid { grid-template-columns: 1fr 1fr; }
  .cs2-show__ti .cs2-img { grid-column: 1 / -1; } .cs2-show__ti p { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .wk { padding-top: 110px; }
  .wk__head { grid-template-columns: 1fr; gap: 16px; }
  .wk__count { order: 2; }
  .wk__grid, .cs2-show__grid, .cs2-oth__grid { grid-template-columns: 1fr; gap: 40px; }
  .wk__card--port .wk__img { aspect-ratio: 1.44; }
  .cs2-hero { padding-top: 84px; }
  .cs2-img--full { margin-top: 16px; }
  .cs2-show__note { padding-block: 72px; gap: 24px; }
  .cs2-res, .cs2-tst { padding-block: 80px; }
  .cs2-res__head { margin-bottom: 32px; }
  .cs2-res__card { gap: 24px; padding: 24px; }
}

/* =====================================================================
   CONTACT (deck slide 25 · arbiters-template.webflow.io/contact)
   144/500 title with a serif italic second line; form 778px + aside 518px,
   80px apart; 12/500 caps labels, 16px fields with a 1px line, 14/600 pills,
   60px submit; aside 28/500 links, offices in serif.
   ===================================================================== */
/* Arbiter contact hero: 680px tall block; title 165px under the top row,
   label + intro pinned to the bottom */
.ct-hero > .wrap { min-height: min(680px, calc(100vh - 112px)); }
.ct-hero__title { margin: clamp(56px, 11.5vw, 165px) 0 0; }
.ct-hero__bottom { display: grid; grid-template-columns: 1fr 400px; gap: 32px; align-items: end; margin-top: auto; padding-top: 48px; }
.ct-hero__intro { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.35; letter-spacing: -.01em; }
.ct-label { display: inline-flex; align-items: center; gap: 12px; font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.ct-label i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; }
.ct-label em { font-style: normal; color: var(--muted); }
.ct { padding-block: 96px clamp(90px, 9.72vw, 140px); }
.ct__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 80px; align-items: start; }
.ctf { position: relative; }
.ctf__progress { display: flex; align-items: center; gap: 16px; margin-bottom: 40px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ctf__progress i { flex: 1; height: 1px; background: var(--line); position: relative; overflow: hidden; }
.ctf__progress b { position: absolute; inset: 0; background: var(--ink); transform-origin: 0 50%; transform: scaleX(.3333); transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.ctf__step { display: none; border: 0; margin: 0; padding: 0; min-width: 0; }
.ctf__step.is-on { display: flex; flex-direction: column; gap: 32px; }
.ctf__q { padding: 0; margin: 0; font-family: var(--sans); font-size: clamp(24px, 2.2vw, 32px); font-weight: 500; letter-spacing: -.02em; line-height: 1.2; }
.ctf__opt { font-family: var(--serif); font-style: var(--it-style); color: var(--muted); font-size: .8em; }
.ctf__pills { display: flex; flex-wrap: wrap; gap: 8px; }
.ctf__pill { position: relative; cursor: pointer; }
.ctf__pill input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ctf__pill span { display: inline-flex; align-items: center; padding: 11px 18px; border: 1px solid var(--line); border-radius: 999px; font-size: 14px; font-weight: 600; line-height: 1; transition: border-color .25s, background .25s, color .25s; }
.ctf__pill:hover span { border-color: var(--ink); }
.ctf__pill input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.ctf__pill input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.ctf__more { display: none; flex-direction: column; gap: 20px; }
.ctf__more.is-on { display: flex; }
.ctf__more .ctf__q { font-size: clamp(18px, 1.6vw, 22px); }
.ctf__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 32px; }
.ctf__field { display: flex; flex-direction: column; gap: 12px; }
.ctf__field > span { font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .02em; }
.ctf__field em { font-family: var(--serif); font-style: var(--it-style); color: var(--muted); text-transform: none; }
.ctf__field input, .ctf__field textarea { width: 100%; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); font: inherit; font-size: 16px; padding: 12px 0; outline: none; border-radius: 0; resize: none; transition: border-color .3s; }
.ctf__field textarea { height: 160px; }
.ctf__field input:focus, .ctf__field textarea:focus { border-bottom-color: var(--ink); }
.ctf__field input::placeholder, .ctf__field textarea::placeholder { color: var(--muted); opacity: .8; }
.ctf .is-bad input, .ctf .is-bad textarea, .ctf input.is-bad { border-bottom-color: #c8442a; }
.ctf__check { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; color: var(--muted); cursor: pointer; }
.ctf__check input { width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--ink); flex: none; }
.ctf__err { display: none; margin: -12px 0 0; font-size: 14px; color: #c8442a; }
.ctf__step.has-err .ctf__err { display: block; }
.ctf__nav { display: flex; gap: 12px; }
.ctf__btn { flex: 1; height: 60px; border-radius: 999px; background: var(--ink); color: var(--bg); font-size: 18px; font-weight: 600; transition: opacity .25s; }
.ctf__btn:hover { opacity: .85; }
.ctf__back { height: 60px; padding: 0 32px; border-radius: 999px; border: 1px solid var(--line); font-size: 18px; font-weight: 600; transition: border-color .25s; }
.ctf__back:hover { border-color: var(--ink); }
.ctf__done { display: none; flex-direction: column; gap: 24px; padding: 48px; border-radius: min(var(--r), 24px); background: var(--bg-2); outline: none; }
.ctf__done p { margin: 0; font-family: var(--sans); font-size: clamp(30px, 3.06vw, 44px); font-weight: 500; letter-spacing: -.02em; line-height: 1.05; }
.ctf__done .it { font-family: var(--serif); font-style: var(--it-style); font-weight: 400; }
.ctf.is-sent .ctf__step, .ctf.is-sent .ctf__progress { display: none; }
.ctf.is-sent .ctf__done { display: flex; }
.ct__aside { display: flex; flex-direction: column; gap: 48px; }
.ct__block { display: flex; flex-direction: column; gap: 16px; }
.ct__big { position: relative; align-self: flex-start; font-family: var(--sans); font-size: clamp(22px, 1.94vw, 28px); font-weight: 500; letter-spacing: -.02em; line-height: 1.2; }
.ct__big--muted { color: var(--muted); }
.ct__big::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.15em; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.ct__big:hover::after { transform: scaleX(1); transform-origin: left; }
.ct__office { display: flex; flex-direction: column; gap: 8px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.ct__row { display: flex; justify-content: space-between; font-size: 16px; font-weight: 500; }
.ct__time { font-family: var(--serif); color: var(--muted); }
.ct__addr { margin: 0; font-family: var(--serif); font-size: 16px; font-weight: 600; line-height: 1.35; color: var(--accent); }
.ct__next { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 500; line-height: 1.5; }
.ct__social { display: flex; gap: 24px; font-size: 16px; font-weight: 600; }
.ct__social a:hover { opacity: .6; }
@media (max-width: 991px) {
  .ct__grid { grid-template-columns: 1fr; gap: 64px; }
  .ct-hero__bottom { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .ctf__grid { grid-template-columns: 1fr; gap: 28px; }
  .ctf__done { padding: 28px; }
  .ct { padding-top: 56px; }
}

/* =====================================================================
   ONE TYPE SYSTEM FOR EVERY PAGE (keep this block last)
   Kris's fonts: Switzer for all headings (weight 500), Libre Caslon italic
   for the one accent phrase (.it), Roboto Mono only for tiny UI.
     display  56–144px  Contact title, Awards, Other projects
     h1       36–64px   the title at the top of each page
     h2       28–48px   section titles, statements, quotes
     h3       20–28px   card and project names
     label    16px/600  grey, written as "( Label )"
   Every heading words-rise in the same way; everything else fades up.
   ===================================================================== */
.ct-hero__title, .awd__title, .awd__count, .cs2-oth__title {
  font-family: var(--sans); font-weight: 500; font-size: clamp(56px, 10vw, 144px); line-height: .92; letter-spacing: -.045em; text-transform: none; }
.abh__title, .wk__title, .cs2-ov__title, .ph__title, .story__title, .wk__count {
  font-family: var(--sans); font-weight: 500; font-size: clamp(36px, 4.44vw, 64px); line-height: 1.08; letter-spacing: -.03em; text-transform: none; }
.pos__text, .sw__title, .why__title, .cta__title, .cs2-show__note p, .aftr__title, .aftr__mail, .cs2-tst__in blockquote, .cs2-ov__block h2, .ctf__done p {
  font-family: var(--sans); font-weight: 500; font-size: clamp(28px, 3.33vw, 48px); line-height: 1.15; letter-spacing: -.025em; text-transform: none; }
.sw__name, .wk__meta h2, .cs2-oth__card h3, .why__card h3, .ctf__q {
  font-family: var(--sans); font-weight: 500; font-size: clamp(20px, 1.94vw, 28px); line-height: 1.15; letter-spacing: -.02em; }
.asvc__name span { font-weight: 500; }
.lbl, .pos__label, .abh__label, .story__label, .cs2-label, .paren {
  font-family: var(--sans); font-size: 16px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--muted); background: none; padding: 0; border-radius: 0; }
.it, .ct-hero__title .it, .awd__title .it { font-family: var(--serif); font-style: var(--it-style); font-weight: 400; letter-spacing: -.02em; }
.ct-hero__title { margin: clamp(40px, 8vw, 120px) 0 0; max-width: 9em; }
.ct-hero > .wrap { min-height: min(600px, calc(100vh - 112px)); }
.awd__title { max-width: 6em; }
.wk__count { align-self: end; }
.why__card > span { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; color: var(--muted); }
.ph__title { margin: 18px 0 20px; }
.split-line { vertical-align: top; }

/* ---------- floating page controls: Back + Top (bottom right) ---------- */
.fnav { position: fixed; right: clamp(16px, 2.5vw, 32px); bottom: clamp(16px, 2.5vw, 28px); z-index: 80; display: flex; gap: 2px; padding: 4px; border-radius: 999px; background: var(--bg-2); color: var(--ink);
  box-shadow: 0 10px 30px rgba(0,0,0,.14), inset 0 0 0 1px var(--line); opacity: 0; visibility: hidden; transform: translateY(16px); pointer-events: none; transition: opacity .4s ease, transform .4s cubic-bezier(.2,.8,.2,1), visibility 0s .4s; }
.fnav.is-on { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition: opacity .4s ease, transform .4s cubic-bezier(.2,.8,.2,1), visibility 0s; }
.fnav__btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 4px; border-radius: 999px; font-size: 14px; font-weight: 600; transition: background .25s, color .25s; }
.fnav__back { padding-left: 12px; }
.fnav__back svg { width: 16px; height: 16px; }
.fnav__top svg { width: 32px; height: 32px; }
.fnav__btn:hover { background: var(--ink); color: var(--bg); }
.fnav .ring-bg { stroke: var(--line); }
.fnav .ring { stroke: currentColor; transform: rotate(-90deg); transform-origin: 50% 50%; }
.fnav__top:hover .ring-bg { stroke: color-mix(in srgb, var(--bg) 30%, transparent); }
.menu-open .fnav { opacity: 0; visibility: hidden; pointer-events: none; }
@media (max-width: 767px) { .fnav__btn span { display: none; } .fnav__btn { padding: 0 4px; } .fnav__back { padding: 0 12px; } }
/* reels: clips in the opening grid; on projects the clip fades in while you point at it */
.ahero__item video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
[data-hoverplay] { position: relative; }
[data-hoverplay] > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s ease; z-index: 1; pointer-events: none; }
[data-hoverplay].is-playing > video { opacity: 1; }


/* =====================================================================
   CAPABILITIES
   Four cards that stack as you scroll (zorven.webflow.io/services: 3 columns
   of 423px, 16px apart, 30px padding, picture 423x501 radius 14, sticky 90px
   from the top). Approach cards: Aton "( Working process )" 443x587, radius 16,
   padding 32/40/48, number + dot on top, title and text at the bottom.
   ===================================================================== */
.cap-hero { padding-block: 160px 72px; }
.cap-hero__title { margin: 24px 0 0; }
.cap-hero__intro { margin: 24px 0 0; max-width: 34ch; font-size: clamp(18px, 1.39vw, 20px); color: var(--muted); }
.cap__list { border-top: 1px solid var(--line); padding-top: 20px; }
.cap__item { position: sticky; top: 90px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 30px 0; background: var(--bg); border-bottom: 1px solid var(--line); scroll-margin-top: 90px; }
.cap__body { display: flex; flex-direction: column; gap: 16px; }
.cap__no { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; color: var(--muted); }
.cap__name { margin: 0; }
.cap__body p { margin: 0; max-width: 36ch; font-size: 16px; line-height: 1.4; color: var(--muted); }
.cap__more { margin-top: auto; align-self: flex-start; font-size: 16px; font-weight: 600; transition: opacity .2s; }
.cap__more:hover { opacity: .6; }
.cap__img { position: relative; aspect-ratio: 423 / 501; max-height: calc(100vh - 180px); border-radius: min(var(--r), 14px); overflow: hidden; background: var(--bg-3); }
.cap__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cap__inc { align-self: end; display: flex; flex-direction: column; gap: 16px; }
.cap__inc h3 { margin: 0; }
.cap__inc ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 10px; color: var(--muted); font-size: 16px; }
.appr { padding-block: 160px; }
.appr__head { display: flex; justify-content: space-between; align-items: center; }
.appr__title { margin: 32px 0 64px; }
.appr__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.appr__card { display: flex; flex-direction: column; justify-content: space-between; gap: 32px; min-height: 587px; padding: 32px 40px 48px; border-radius: min(var(--r), 16px); background: var(--bg-2); }
.appr__top { display: flex; align-items: center; gap: 16px; color: var(--muted); font-size: 24px; font-weight: 600; }
.appr__top i { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.appr__card p { margin: 48px 0 0; min-height: 6.4em; font-size: 18px; font-weight: 500; line-height: 1.6; color: var(--muted); }
@media (max-width: 991px) {
  .cap__item { grid-template-columns: 1fr 1fr; }
  .cap__inc { grid-column: 1 / -1; }
  .appr__grid { grid-template-columns: 1fr; }
  .appr__card { min-height: 0; }
  .appr__card p { margin-top: 24px; }
}
@media (max-width: 767px) {
  .cap-hero { padding-top: 120px; }
  .cap__item { position: relative; top: 0; grid-template-columns: 1fr; }
  .cap__img { aspect-ratio: 1.3; }
  .appr { padding-block: 96px; }
}
/* type system for the new page (same tiers as everywhere else) */
.cap-hero__title { font-family: var(--sans); font-weight: 500; font-size: clamp(36px, 4.44vw, 64px); line-height: 1.08; letter-spacing: -.03em; }
.cap__name, .appr__title { font-family: var(--sans); font-weight: 500; font-size: clamp(28px, 3.33vw, 48px); line-height: 1.15; letter-spacing: -.025em; }
.cap__inc h3, .appr__card h3 { font-family: var(--sans); font-weight: 500; font-size: clamp(20px, 1.94vw, 28px); line-height: 1.15; letter-spacing: -.02em; margin: 0; }

/* last type outliers brought into the same tiers */
.cta__card h3, .cta__form > h3 { font-family: var(--sans); font-weight: 500; font-size: clamp(20px, 1.94vw, 28px); line-height: 1.15; letter-spacing: -.02em; }
.cs2-ov__block h3, .cs2-ov .more__inner h3 { font-family: var(--sans); font-size: 16px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--muted); }

/* ---------- header links fold into "Menu" when it opens, then come back out ---------- */
.hdr__link { transition: opacity .45s ease var(--c, 0s), transform .8s cubic-bezier(.16,1,.3,1) var(--c, 0s); }
.hdr__link:hover { transition-delay: 0s; }
.menu-open .hdr__link { opacity: 0; transform: translateX(var(--dx, 0px)) scale(.4); pointer-events: none;
  transition: opacity .3s ease calc(var(--o, 0s) + .12s), transform .55s cubic-bezier(.7,0,.3,1) var(--o, 0s); }

/* ---------- menu: picture of the page you point at ---------- */
.menu__peek { position: absolute; right: clamp(16px, 3vw, 40px); top: 50%; width: min(28vw, 400px); aspect-ratio: 4 / 5; transform: translateY(-50%); border-radius: min(var(--r), 14px); overflow: hidden; pointer-events: none; }
.menu__peek img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; clip-path: inset(100% 0 0 0); transform: scale(1.12); transition: opacity .4s ease, clip-path .8s cubic-bezier(.16,1,.3,1), transform 1.2s cubic-bezier(.16,1,.3,1); }
.menu__peek img.is-on { opacity: 1; clip-path: inset(0 0 0 0); transform: none; }
@media (min-width: 992px) and (hover: hover) { .menu__list { max-width: calc(100% - min(28vw, 400px) - 64px); } }
@media (max-width: 991px), (hover: none) { .menu__peek { display: none; } }

/* Home services: the picture + text sit in one place at the top right of the
   list (as on Aton), so the names keep a steady 32px gap instead of each row
   growing to the height of its picture */
@media (min-width: 861px) {
  .asvc__list { position: relative; }
  .asvc__item { position: static; grid-template-columns: 1fr; }
  .asvc__name { max-width: calc(100% - min(316px, 28%) - 40px); }
  .asvc__info { position: absolute; top: 0; right: 0; width: min(316px, 28%); pointer-events: none; }
  .asvc__item.is-on .asvc__info { pointer-events: auto; }
}
.asvc__more { font-family: var(--sans); font-size: 16px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink); transition: opacity .2s; }
.asvc__more:hover { opacity: .6; color: var(--ink); }

/* ---------- ONE META STYLE: the small facts next to headings (client · type,
   field names, step counter, "All work" link, "More info") all use the body
   font at 14px / 600 in sentence case, so no page has its own label look.
   Mono is kept only for numbers (01, 02 ... and counters). ---------- */
.sw__top .mono, .cs2-back, .more__btn, .cs2-ov__meta dt, .ctf__progress, .ctf__field > span, .story__label, .ct-label {
  font-family: var(--sans); font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.cs2-ov__block h3, .cs2-ov .more__inner h3 { text-transform: none; }
.note { font-family: var(--sans); font-size: 14px; letter-spacing: 0; text-transform: none; }
.cs2-ov__meta dt { color: var(--muted); font-weight: 500; }
.cs2-back { display: inline-flex; gap: 8px; align-items: center; color: var(--muted); }
.ct__addr { font-family: var(--sans); font-weight: 500; color: var(--ink); }
.cap__no, .why__card > span { font-family: var(--mono); font-size: 13px; letter-spacing: 0; }

/* real reels: the case-study hero is a video, same frame as the picture it replaced */
.cs2-hero__box video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- About hero, balanced: every picture starts below the menu bar,
   two above the statement (left high, right lower), small one top-centre-right,
   two below it, and less empty space under the text ---------- */
@media (min-width: 1101px) {
  .abh { padding: 320px 0 330px; }
  .abh__img--1 { left: calc(50% - 190px); top: 120px; }
  .abh__img--2 { left: 40px; top: 136px; }
  .abh__img--4 { right: 40px; top: 104px; }
  .abh__img--3 { left: calc(50% - 470px); top: auto; bottom: 112px; }
  .abh__img--5 { left: calc(50% + 160px); top: auto; bottom: 28px; }
}
@media (min-width: 768px) and (max-width: 1100px) {
  .abh { padding: 280px 0 300px; }
  .abh__img--1 { left: calc(50% - 60px); top: 112px; }
  .abh__img--2 { left: 24px; top: 104px; } .abh__img--4 { right: 24px; top: 150px; }
  .abh__img--3 { left: 40px; top: auto; bottom: 96px; } .abh__img--5 { left: auto; right: 40px; top: auto; bottom: 24px; }
}

/* ---------- word masks: room for tails and slants (g, j, y, p, italic f/s)
   so no letter is ever cut; the negative margins keep the spacing unchanged ---------- */
.split-line { overflow: hidden; padding: .02em .16em .26em; margin: -.02em -.16em -.26em; vertical-align: top; }
.cs2-oth__title { margin-bottom: .45em; }

/* closing the menu: links stay folded (and invisible) until the panel has
   passed the header, so they never show white and then flip to black */
.menu-closing .hdr__link { opacity: 0; transform: translateX(var(--dx, 0px)) scale(.4); pointer-events: none; transition: none; }
.menu-closing .hdr, .menu-closing .hdr .hdr__logo img, .menu-flip .hdr, .menu-flip .hdr .hdr__logo img, .menu-flip .burger { transition: none !important; }
.wk__label { align-self: end; padding-bottom: 10px; }
@media (max-width: 991px) { .wk__label { order: -1; padding-bottom: 0; } }
/* cursor over a link: a thin ring instead of a filled dot, so it never blots out the word under it */
.cur.is-link i { transform: scale(4); background: transparent; box-shadow: inset 0 0 0 .4px #fff; }

/* ---------- contact form, tidied: the steps sit in one white card (like the
   feedback cards), bigger choices, buttons sized to their words and kept
   to the right, so step 1 no longer leaves a big empty area ---------- */
.ctf { padding: clamp(28px, 3.4vw, 48px); border-radius: min(var(--r), 20px); background: var(--bg-2); min-height: 520px; display: flex; flex-direction: column; }
.ctf__progress { margin-bottom: 48px; }
.ctf__step.is-on { flex: 1; gap: 28px; }
.ctf__q { font-size: clamp(28px, 2.6vw, 38px); line-height: 1.15; margin-bottom: 4px; }
.ctf__pills { gap: 12px; }
.ctf__pill span { padding: 16px 24px; font-size: 16px; background: var(--bg); border-color: transparent; }
.ctf__pill:hover span { border-color: var(--ink); }
.ctf__more .ctf__q { margin-top: 12px; }
.ctf__nav { margin-top: auto; padding-top: 24px; justify-content: flex-end; }
.ctf__btn { flex: none; height: 56px; padding: 0 36px; font-size: 16px; display: inline-flex; align-items: center; gap: 10px; }
.ctf__btn::after { content: "\2192"; font-weight: 500; transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.ctf__btn:hover::after { transform: translateX(4px); }
.ctf__btn--send::after { content: "\2197"; }
.ctf__back { height: 56px; padding: 0 28px; font-size: 16px; margin-right: auto; }
.ctf__done { background: transparent; padding: 0; justify-content: center; flex: 1; }
.ct__time { font-family: var(--sans); font-size: 16px; font-weight: 500; font-variant-numeric: tabular-nums; }
@media (max-width: 767px) { .ctf { min-height: 0; } .ctf__nav { justify-content: stretch; } .ctf__btn { flex: 1; justify-content: center; } }
.ctf { min-height: 0; }
.ctf__step > legend.ctf__q { float: left; width: 100%; margin-bottom: 0; }
.ctf__step > legend.ctf__q + * { clear: both; }
.ctf__nav { margin-top: 8px; }
.cfield em { font-style: normal; color: var(--muted); font-weight: 400; }
/* phones: the Back/Top pill stays at the bottom, so the last footer line keeps clear of it */
@media (max-width: 767px) { .aftr__copy { padding-bottom: 72px; } }
@media (max-width: 767px) { .ct-hero > .wrap { min-height: 0; } .ct-hero__bottom { padding-top: 40px; } }

/* =====================================================================
   KRIS'S BRAND DETAIL (deck slide 29, from Arbiter): every section label is
   a small red dot + Roboto Mono capitals, with a count in brackets where it
   helps ("● PRINCIPLES (04)"); the main headline of each page ends in a
   red full stop. One style on every page.
   ===================================================================== */
:root { --dot: currentColor; } /* dots in the text colour (27 Oct: no red) */
.lbl, .pos__label, .abh__label, .story__label, .cs2-label, .paren, .wk__label, .ahero__hint {
  display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 12px; font-weight: 500; line-height: 1.2; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink); }
.lbl::before, .paren::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--dot); flex: none; }
.lbl .n { color: var(--muted); letter-spacing: .04em; }
.ahero__hint { color: inherit; }
.pd { color: var(--dot); }

/* =====================================================================
   CONTACT, rebuilt on arbiters-template.webflow.io/contact (measured at 1330px):
   mono top row, form 1fr | studios 474px, Switzer 12px capitals for field
   names, underlined fields, outline pills, full-width black button,
   studio addresses in red Libre Caslon. Replaces the white card.
   ===================================================================== */
.ct-top { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 18px 0; margin-top: 8px; border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.ct-top b { font-weight: 500; }
.ct-hero > .wrap { display: flex; flex-direction: column; min-height: min(760px, calc(100vh - 90px)); }
.ct-hero__title { margin-top: clamp(48px, 8vw, 120px); }
.ct-hero__title .it { display: inline-block; padding-left: .9em; }
.ct-hero__bottom { margin-top: auto; padding: 56px 0 8px; grid-template-columns: 1fr 360px; }
.ct { padding-top: 80px; }
.ct__grid { grid-template-columns: minmax(0, 1fr) 474px; gap: 80px; }
.ctf { padding: 0; background: none; border-radius: 0; min-height: 0; }
.ctf__progress { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 40px; }
.ctf__step.is-on { gap: 40px; }
.ctf__step > legend.ctf__q { font-size: 28px; font-weight: 500; letter-spacing: -.02em; line-height: 1.2; margin-bottom: 8px; }
.ctf__grid { gap: 40px 32px; }
.ctf__field > span, .ctf__sub { font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); margin: 0; }
.ctf__field em, .ctf__sub em { font-family: var(--serif); font-style: normal; font-weight: 500; color: var(--muted); }
.ctf__field { gap: 10px; }
.ctf__field input, .ctf__field textarea { font-size: 16px; font-weight: 500; padding: 12px 0; }
.ctf__group { display: flex; flex-direction: column; gap: 16px; }
.ctf__more { display: none; }
.ctf__more.is-on { display: flex; }
.ctf__pills { gap: 10px; }
.ctf__pill span { padding: 15px 20px; font-size: 14px; font-weight: 600; background: transparent; border: 1px solid var(--line); }
.ctf__pill:hover span { border-color: var(--ink); }
.ctf__pill input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.ctf__nav { margin-top: 8px; padding-top: 0; gap: 12px; justify-content: stretch; }
.ctf__btn { flex: 1; height: 60px; padding: 0 32px; justify-content: center; font-size: 18px; font-weight: 600; }
.ctf__back { margin-right: 0; height: 60px; font-size: 16px; }
.ctf__done { padding: 48px 0; }
.ct__aside { gap: 56px; padding-top: 4px; }
.ct__office { gap: 6px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.ct__row { font-size: 16px; font-weight: 500; }
.ct__time { font-family: var(--serif); font-size: 16px; font-weight: 500; color: var(--muted); }
.ct__addr { font-family: var(--serif); font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--dot); }
a.ct__addr:hover { text-decoration: underline; text-underline-offset: 3px; }
.ct__next { list-style: none; padding: 0; gap: 12px; font-size: 15px; }
.ct__next li { display: grid; grid-template-columns: 36px 1fr; }
.ct__next i { font-family: var(--serif); font-style: normal; font-weight: 500; color: var(--dot); }
@media (max-width: 991px) { .ct__grid { grid-template-columns: 1fr; gap: 64px; } .ct-hero__bottom { grid-template-columns: 1fr; } }
@media (max-width: 767px) {
  .ct-top { flex-direction: column; gap: 6px; }
  .ct-hero > .wrap { min-height: 0; }
  .ct-hero__title .it { padding-left: 0; }
  .ctf__grid { grid-template-columns: 1fr; gap: 28px; }
  .ctf__btn { flex: 1; }
}
.ctf__btn::after, .ctf__btn--send::after { content: none; }
.aftr__cta { margin-top: 28px; align-self: flex-start; }
/* Home footer keeps its enquiry form (deck slide 11) but packed tighter:
   four short fields in one row, the message under them, less space around */
@media (min-width: 992px) {
  .aftr__form { margin-top: 56px; padding-top: 32px; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  .aftr__fields { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 20px; }
  .aftr__fields .aftr__wide { grid-column: 1 / -1; }
  .aftr__bottom { margin-top: 56px; }
  .aftr__copy { margin-top: 32px; }
  .aftr--plain .aftr__bottom { margin-top: 72px; }
}
.aftr__fields textarea { min-height: 0; }
/* no system drop-downs anywhere: "What is it about?" is a row of the same
   outline pills as the Contact page (Arbiter), on light and on dark */
.aftr__topic, .cfield.ctf__group { margin: 18px 0 6px; }
.aftr .ctf__sub, .cta .ctf__sub { color: var(--ink); }
.aftr .ctf__pill span, .cta .ctf__pill span { border-color: var(--line); color: var(--ink); }
.aftr .ctf__pill input:checked + span, .cta .ctf__pill input:checked + span { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.aftr .ctf__pill span { padding: 12px 18px; font-size: 14px; }
.aftr__cta { margin: 0 0 0 20px; vertical-align: 12%; }
@media (max-width: 767px) { .aftr__cta { margin: 20px 0 0; display: inline-flex; } }
.aftr__cta, .aftr__cta:is(*) { display: flex; width: fit-content; margin: 32px 0 0; vertical-align: baseline; }
.ct__next { list-style: none; counter-reset: nx; padding: 0; }
.ct__next li { display: grid; grid-template-columns: 36px 1fr; counter-increment: nx; }
.ct__next li::before { content: counter(nx, decimal-leading-zero); font-family: var(--mono); font-size: 12px; letter-spacing: .06em; color: var(--muted); padding-top: 3px; }
.pill::before { background: var(--dot); }

/* menu: the five rows come in one after another from top to bottom, slowly
   (each rises and fades over 1.1s, .12s apart, once the panel is nearly down);
   the line under each row draws from left to right with it */
.menu__list li { position: relative; border-bottom: 0; }
.menu__list li::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--inv-line); transform: scaleX(0); transform-origin: left; transition: transform .4s ease; }
.menu__list a { transform: translateY(70%); transition: opacity .3s ease, transform .4s cubic-bezier(.7,0,.84,0); }
.menu-open .menu__list li::after { transform: none; transition: transform 1.2s cubic-bezier(.16,1,.3,1) var(--d); }
.menu-open .menu__list a { transition: opacity 1.1s cubic-bezier(.16,1,.3,1) var(--d), transform 1.1s cubic-bezier(.16,1,.3,1) var(--d); }
.menu__list li:nth-child(1), .menu__list li:nth-child(1) a { --d: .5s; }
.menu__list li:nth-child(2), .menu__list li:nth-child(2) a { --d: .62s; }
.menu__list li:nth-child(3), .menu__list li:nth-child(3) a { --d: .74s; }
.menu__list li:nth-child(4), .menu__list li:nth-child(4) a { --d: .86s; }
.menu__list li:nth-child(5), .menu__list li:nth-child(5) a { --d: .98s; }
.menu__foot { opacity: 0; transition: opacity .3s ease; }
.menu-open .menu__foot { opacity: 1; transition: opacity .8s ease 1.15s; }
@media (hover: hover) { .menu-open .menu__list:hover a { transition-delay: 0s; } }

/* closing the menu: the rows leave first, from the bottom up (Contact first,
   Home last), each shrinking away towards the Close button at the top right;
   their lines retract to the right; then the panel slides up */
.menu-closing .menu { transition: transform .9s cubic-bezier(.87,0,.13,1) .5s, visibility 0s linear 1.45s; }
.menu-closing .menu__list a { opacity: 0; transform: translateY(-40%) scale(.35); transform-origin: 100% 0;
  transition: opacity .45s ease var(--c2), transform .6s cubic-bezier(.7,0,.3,1) var(--c2); }
.menu-closing .menu__list li::after { transform: scaleX(0); transform-origin: right; transition: transform .5s cubic-bezier(.7,0,.3,1) var(--c2); }
.menu-closing .menu__foot { opacity: 0; transition: opacity .25s ease; }
.menu__list li:nth-child(5), .menu__list li:nth-child(5) a { --c2: 0s; }
.menu__list li:nth-child(4), .menu__list li:nth-child(4) a { --c2: .06s; }
.menu__list li:nth-child(3), .menu__list li:nth-child(3) a { --c2: .12s; }
.menu__list li:nth-child(2), .menu__list li:nth-child(2) a { --c2: .18s; }
.menu__list li:nth-child(1), .menu__list li:nth-child(1) a { --c2: .24s; }

/* Kris's feedback (23 Oct) */
.pos__body { max-width: 640px; margin: 0; font-size: 18px; font-weight: 500; line-height: 1.5; color: var(--muted); }
.pos__text { max-width: 900px; }
.appr__intro { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 48px 80px; align-items: end; margin: 32px 0 64px; }
.appr__intro .appr__title { margin: 0; }
.appr__lead { margin: 0; max-width: 46ch; font-size: 18px; font-weight: 500; line-height: 1.55; color: var(--muted); }
.appr__card { min-height: 280px; justify-content: space-between; }
.appr__card h3 { font-size: clamp(24px, 2.4vw, 34px); }
.appr__top i { background: var(--dot); }
@media (max-width: 991px) { .appr__intro { grid-template-columns: 1fr; gap: 24px; } .appr__card { min-height: 200px; } }
.pos__text, .appr__title, .sw__title, .aftr__title { text-wrap: balance; }
/* roomier word masks: Libre Caslon Condensed italic has long slanted tails
   (p, j, y, f) that reach well below and to the left of the letter */
.split-line { padding: .1em .38em .45em; margin: -.1em -.38em -.45em; }
html, body { overflow-x: clip; }   /* the roomier word masks may reach past the right edge of a right-aligned heading; never let that make the page scroll sideways */
/* Safari draws each sliding word on its own layer sized to the word's box,
   and cuts italic tails that reach outside it (the "p" in "projects").
   Give the word itself the same room as its mask, so the layer holds the
   whole letter. Negative margins keep the spacing exactly as before. */
.split-line > span { display: inline-block; padding: .1em .38em .45em; margin: -.1em -.38em -.45em; }

/* phone pass (26 Oct) */
@media (max-width: 860px) { .ahero__hint { display: none; } }
@media (max-width: 767px) {
  .aftr__nav { gap: 14px 24px; }
  .ct__aside { gap: 40px; }
  .ct__block { gap: 14px; }
}
/* tablets: ten client logos sit in two full rows of five (no lone logo on a last row) */
@media (min-width: 561px) { .cgrid { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 561px) and (max-width: 860px) { .cgrid__cell { padding: 12px; } .cgrid__cell img { max-height: 34px; max-width: 70%; } }
/* About "Let's talk" card: full width once the form drops below it */
@media (max-width: 991px) { .cta__card { max-width: none; min-height: 380px; } }

/* Home opening (26 Oct): last week's layout; while you scroll, the reel columns
   narrow smoothly by 30% (46.5vw to 32.6vw) so the left and right reels come
   into the screen. The script animates --cw. */
.ahero__grid { --cw: 46.51vw; }
@media (max-width: 991px) { .story__right, .story__left { flex: 0 0 auto; } }   /* About on phones: no empty space under the story */
/* "Scroll down" on the opening: centred, white, readable over the reel */
@media (min-width: 861px) { .ahero__hint { display: flex; justify-content: center; color: #fff; text-shadow: 0 1px 12px rgba(0,0,0,.5); } }
/* every column holds three reels, so all nine are the same size as the centre one */
.ahero__col { grid-template-rows: repeat(3, 1fr); }
/* flowing reels: each column is a window onto a track that loops up or down */
.ahero__col { display: block; position: relative; }
.ahero__track { display: flex; flex-direction: column; gap: var(--g); will-change: transform; }
.ahero__track .ahero__item { flex: none; height: var(--ch); }

/* phones: two columns of tall, Reel-shaped tiles (about 10:16), both fully on
   screen, with a soft dark fade behind the logo (top) and tagline (bottom) */
@media (max-width: 600px) {
  .ahero.is-two .ahero__grid { --g: 10px; --cw: calc((100vw - 16px * 2 - 10px) / 2) !important; --ch: calc(var(--cw) * 1.6);
    grid-template-columns: repeat(2, var(--cw)); width: calc(var(--cw) * 2 + var(--g)); }
  .ahero.is-two .ahero__box::before, .ahero.is-two .ahero__box::after { content: ""; position: absolute; left: 0; right: 0; z-index: 1; pointer-events: none; }
  .ahero.is-two .ahero__box::before { top: 0; height: 42%; background: linear-gradient(rgba(0,0,0,.55), transparent); }
  .ahero.is-two .ahero__box::after { bottom: 0; height: 30%; background: linear-gradient(transparent, rgba(0,0,0,.55)); }
}

/* =====================================================================
   PHONES (26 Oct): one spacing system, measured against the reference
   sites at 390px (Aton and Arbiter: about 60px between blocks inside a
   section, about 130-200px between sections). Every section gets 64px
   above and below, so the space between two sections is about 128px.
   ===================================================================== */
@media (max-width: 767px) {
  main > section:not(.ahero):not(.abh):not(.cs2-hero):not(.ct-hero):not(.cap):not(.cs2-show):not(.sw) { padding-top: 64px; padding-bottom: 64px; }
  .aftr { padding-top: 56px; }
}
@media (max-width: 767px) {
  main > section.sw { padding-top: 0; padding-bottom: 0; }
  .sw .hsec__pin { padding-top: 64px; padding-bottom: 64px; }
  main > section.cta { padding-bottom: 0 !important; }
  main > section.sw { padding: 0; }
}
/* phones and touch screens: every link and button gets at least a ~44px tall
   tap area (Apple's guideline; Google's is 48dp) without changing the look:
   extra padding is cancelled out by a negative margin */
@media (max-width: 860px), (pointer: coarse) {
  .burger, .hdr__logo, .asvc__more, .cap__more, .cs2-back, .aftr__nav a, .aftr__tel, .aftr__mail, .ct__big, .ct__social a, .ct__addr, .more__btn {
    padding-top: 10px; padding-bottom: 10px; margin-top: -10px; margin-bottom: -10px; }
  .asvc__more, .cs2-back { padding-top: 12px; padding-bottom: 12px; margin-top: -12px; margin-bottom: -12px; }
  .atst__dots { gap: 0; }
  .atst__dots button { box-sizing: content-box; padding: 14px; background-clip: content-box; }
  .why__card p { font-size: 15px; line-height: 1.45; }
}
@media (max-width: 860px), (pointer: coarse) { .atst__dots button, .atst__dots button.is-on { background-clip: content-box !important; } }
/* a long label wraps its words, but its red dot stays beside the first line */
.lbl, .paren { flex-wrap: nowrap; align-items: flex-start; }
.lbl::before, .paren::before { margin-top: .32em; }

/* the logo and tagline get their own layer, so their soft shadow isn't repainted every frame of the opening */
.ahero__w { will-change: transform; }

/* ---------- menu opening, in two beats (desktop, where the header links show) ----------
   1. the header links squeeze into "Menu", closest first (about .7s)
   2. only then the black panel drops; the header turns light as the panel
      reaches it, and the rows rise one by one, so you feel you go into the menu */
@media (min-width: 1101px) {
  .menu-open .hdr__link { transition: opacity .28s ease calc(var(--o, 0s) + .26s), transform .6s cubic-bezier(.7,0,.3,1) var(--o, 0s); }
  .menu-open .menu { transition: transform .9s cubic-bezier(.87,0,.13,1) .5s, visibility 0s; }
  .menu-open .hdr { transition: transform .5s cubic-bezier(.7,0,.2,1), background-color 0s linear .78s, backdrop-filter 0s linear .78s, -webkit-backdrop-filter 0s linear .78s, color .25s ease .78s; }
  .menu-open .hdr .hdr__logo img { transition: filter .25s ease .78s; }
  .menu__list li:nth-child(1), .menu__list li:nth-child(1) a { --d: .95s; }
  .menu__list li:nth-child(2), .menu__list li:nth-child(2) a { --d: 1.07s; }
  .menu__list li:nth-child(3), .menu__list li:nth-child(3) a { --d: 1.19s; }
  .menu__list li:nth-child(4), .menu__list li:nth-child(4) a { --d: 1.31s; }
  .menu__list li:nth-child(5), .menu__list li:nth-child(5) a { --d: 1.43s; }
  .menu-open .menu__foot { transition: opacity .8s ease 1.6s; }
}

/* Home services: names only (Kris, 27 Oct: right side removed) */
.asvc--names .asvc__item { grid-template-columns: 1fr; }
.asvc--names .asvc__name { max-width: none; }
.atst[hidden] { display: none !important; }
/* floating Back stays on screen; the Top half only appears once there is somewhere to go back up to */
.fnav.no-top .fnav__top { display: none; }
/* footer: "Tell us what you're launching" opens the two-step form right here (27 Oct) */
button.pill { border: 0; font: inherit; cursor: pointer; }
.aftr__cta { gap: 10px; }
.aftr__chev { width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .4s cubic-bezier(.2,.8,.2,1); }
.aftr__cta[aria-expanded="true"] .aftr__chev { transform: translateY(2px) rotate(-135deg); }
.aftr__drop { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .7s cubic-bezier(.65,0,.35,1), margin .7s cubic-bezier(.65,0,.35,1); }
.aftr__drop.is-open { grid-template-rows: 1fr; margin-top: clamp(32px, 4vw, 56px); }
.aftr__dropin { min-height: 0; overflow: hidden; }
.aftr__drop .ctf { opacity: 0; transform: translateY(-16px); transition: opacity .5s ease, transform .6s cubic-bezier(.2,.8,.2,1); max-width: 980px; }
.aftr__drop.is-open .ctf { opacity: 1; transform: none; transition-delay: .2s; }
.no-js .aftr__drop { grid-template-rows: 1fr; }
.hdr.on-dark.is-dsolid { background: color-mix(in srgb, var(--inv-bg) 94%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.menu-open .hdr.is-dsolid, .menu-closing .hdr.is-dsolid { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
/* the Home projects row: keep "View all work" clear of the floating Top button */
/* Home projects row: progress + count on one line, "View all work" centred underneath as the end of the section (27 Oct) */
.sw .hs__foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 24px; row-gap: 18px; margin-top: 18px; }
.sw .hs__foot .pill { grid-column: 1 / -1; justify-self: center; }

section[hidden] { display: none !important; }
/* on shorter laptop screens the project cards shrink so the whole row, title to "View all work", fits under the menu bar */
@media (min-width: 861px) { .sw__card { flex-basis: clamp(240px, min(34vw, calc((100vh - 530px) * 1.2937)), 520px); } }
.hs-fits .hs__bar, .hs-fits [data-hs-count] { display: none; }
/* Home "Our capabilities": accordion (27 Oct) */
[data-capacc] { gap: 0; }
[data-capacc] .asvc__item { border-top: 1px solid var(--line); padding-block: clamp(14px, 1.6vw, 22px); }
[data-capacc] .asvc__item:last-child { border-bottom: 1px solid var(--line); }
[data-capacc] .asvc__name { width: 100%; border: 0; background: none; padding: 0; font: inherit; color: var(--ink); text-align: left; cursor: pointer; opacity: 1; align-items: center; transition: opacity .4s ease; }
[data-capacc] .asvc__name small { padding-top: 0; }
[data-capacc].has-open .asvc__item:not(.is-open) .asvc__name { opacity: .35; }
[data-capacc].has-open .asvc__item:not(.is-open) .asvc__name:hover { opacity: .8; }
.asvc__plus { position: relative; flex: none; width: clamp(22px, 2vw, 30px); height: clamp(22px, 2vw, 30px); margin-left: auto; }
.asvc__plus::before, .asvc__plus::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: currentColor; transition: transform .45s cubic-bezier(.65,0,.35,1); }
.asvc__plus::after { transform: rotate(90deg); }
.is-open .asvc__plus::after { transform: rotate(0deg); }
.asvc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s cubic-bezier(.65,0,.35,1); }
.is-open > .asvc__panel { grid-template-rows: 1fr; }
.asvc__panelin { min-height: 0; overflow: hidden; }
.asvc__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px clamp(24px, 4vw, 64px); padding: clamp(18px, 2vw, 28px) 0 clamp(8px, 1vw, 12px) clamp(44px, 4.2vw, 64px); opacity: 0; transform: translateY(-10px); transition: opacity .4s ease, transform .5s cubic-bezier(.2,.8,.2,1); }
.is-open .asvc__body { opacity: 1; transform: none; transition-delay: .15s; }
.asvc__line { margin: 0; font-size: clamp(18px, 1.6vw, 24px); font-weight: 500; line-height: 1.3; color: var(--ink); }
.asvc__inc { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 16px; color: var(--muted); }
.asvc__inc li::before { content: "\2014\00a0"; }
[data-capacc] .asvc__more { padding-left: 0; grid-column: 1 / -1; }
@media (max-width: 767px) { .asvc__body { grid-template-columns: 1fr; padding-left: 0; } }
.no-js [data-capacc] .asvc__panel { grid-template-rows: 1fr; }
/* menu button: icon only, the word is kept for screen readers (27 Oct) */
.burger__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.burger { padding: 10px 0 10px 10px; }
.story__img[hidden] { display: none !important; }
/* About (and any page using the Home reels): the page's own line sits bottom-left over the reels */
.ahero--page .ahero__box::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 60%; background: linear-gradient(transparent, rgba(0,0,0,.6)); z-index: 1; pointer-events: none; }
.ahero__text--page { align-items: flex-end; }
.ahero__page { max-width: min(980px, 72vw); display: flex; flex-direction: column; gap: 18px; text-shadow: 0 2px 24px rgba(0,0,0,.35); }
.ahero__plbl { color: rgba(255,255,255,.85); }
.ahero__statement { margin: 0; color: #fff; font-family: var(--sans); font-weight: 500; font-size: clamp(32px, 4.2vw, 64px); line-height: 1.08; letter-spacing: -.03em; text-wrap: balance; }
.ahero__statement .it { font-family: var(--serif); font-style: var(--it-style); font-weight: 400; }
@media (max-width: 860px) { .ahero__text--page { align-items: flex-end; padding-top: 0; padding-bottom: 88px; } .ahero__page { max-width: none; } .ahero__statement { font-size: clamp(30px, 8.4vw, 40px); } }
/* three projects (27 Oct): they share the page width evenly, lined up with the page edges, and sit centred if a short screen makes them smaller */
@media (min-width: 861px) {
  .sw__track--fit { justify-content: center; padding-inline: max(clamp(16px, 3vw, 40px), calc((100vw - 1440px) / 2 + 40px)); }
  .sw__track--fit .sw__card { flex: 0 1 calc((min(100vw, 1440px) - 2 * clamp(16px, 3vw, 40px) - 48px) / 3); min-width: 240px; }
  /* nothing moves sideways with three, so the section is a normal block (no pinned screen height) */
  .sw--fit .sw__pin { height: auto; padding-block: clamp(90px, 9vw, 140px) clamp(56px, 6vw, 96px); }
}
/* capabilities names a size down (27 Oct): still the biggest type in the section, no longer filling the screen */
[data-capacc] .asvc__name span { font-size: clamp(34px, 4.4vw, 64px); line-height: 1; }
[data-capacc] .asvc__item { padding-block: clamp(12px, 1.3vw, 18px); }
.asvc__body { padding-left: clamp(40px, 3.6vw, 56px); }
.asvc__all { display: flex; justify-content: center; margin-top: clamp(32px, 4vw, 56px); }
/* About opening: one screen tall, the three columns already in place and flowing; the line lined up with the page margins */
.ahero--page { height: 100vh; }
.ahero--page .ahero__wrap { transform: none !important; }
.ahero--page .ahero__grid { --cw: 32.56vw; }
.ahero--page .ahero__hint { display: none; }
.ahero__text--page { padding-inline: max(clamp(16px, 3vw, 40px), calc((100vw - 1440px) / 2 + 40px)); padding-bottom: clamp(40px, 9vh, 96px); }
.ahero__page { max-width: min(980px, 100%); }
@media (max-width: 860px) { .ahero--page { height: 100svh; } .ahero__text--page { padding-bottom: 72px; } }
/* ---------- even spacing (27 Oct) ----------
   One gap G between sections. Where the background colour changes, each side gets the
   full G; where two sections share a colour, each gets half, so the space between them
   is also G. The small numbers make up for labels and line-heights inside each section. */
@media (min-width: 861px) {
  :root { --G: clamp(88px, 10vw, 150px); }
  /* Home */
  main > section.pos { padding-top: calc(var(--G) - 40px); padding-bottom: calc(var(--G) / 2); }
  main > section.sw--fit .sw__pin { padding-top: calc(var(--G) / 2 + 5px); padding-bottom: var(--G); }
  main > section.clients { padding-top: calc(var(--G) - 40px); padding-bottom: calc(var(--G) / 2 + 25px); }
  main > section.asvc { padding-top: max(0px, calc(var(--G) / 2 - 40px)); padding-bottom: calc(var(--G) - 35px); }
  /* About */
  main > section.story { padding-top: calc(var(--G) + 6px); padding-bottom: var(--G); }
  main > section.why { padding-top: var(--G); padding-bottom: calc(var(--G) - 59px); }
  /* Work and project pages */
  main > section.wk { padding-bottom: var(--G); }
  main > section.cs2-res { padding-top: calc(var(--G) - 40px); padding-bottom: calc(var(--G) / 2); }
  main > section.cs2-oth { padding-top: calc(var(--G) / 2 + 14px); padding-bottom: var(--G); }
  /* Capabilities, Contact */
  main > section.appr { padding-top: calc(var(--G) - 71px); padding-bottom: calc(var(--G) - 48px); }
  main > section.ct { padding-bottom: var(--G); }
}
/* the same even spacing on phones, with a smaller gap */
@media (max-width: 767px) {
  :root { --Gp: 88px; }
  main > section.pos { padding-top: calc(var(--Gp) - 40px) !important; padding-bottom: calc(var(--Gp) / 2) !important; }
  main > section.sw--fit .sw__pin, .sw--fit .hsec__pin { padding-top: calc(var(--Gp) / 2 + 3px) !important; padding-bottom: var(--Gp) !important; }
  main > section.clients { padding-top: calc(var(--Gp) - 40px) !important; padding-bottom: calc(var(--Gp) / 2 + 25px) !important; }
  main > section.asvc { padding-top: max(0px, calc(var(--Gp) / 2 - 40px)) !important; padding-bottom: calc(var(--Gp) - 53px) !important; }
  main > section.story { padding-top: calc(var(--Gp) - 40px) !important; padding-bottom: var(--Gp) !important; }
  main > section.why { padding-top: var(--Gp) !important; padding-bottom: max(8px, calc(var(--Gp) - 77px)) !important; }
  main > section.wk { padding-bottom: var(--Gp) !important; }
  main > section.cs2-res { padding-top: calc(var(--Gp) - 40px) !important; padding-bottom: calc(var(--Gp) / 2) !important; }
  main > section.cs2-oth { padding-top: calc(var(--Gp) / 2 + 6px) !important; padding-bottom: var(--Gp) !important; }
  main > section.appr { padding-top: max(8px, calc(var(--Gp) - 71px)) !important; padding-bottom: calc(var(--Gp) - 48px) !important; }
  main > section.ct { padding-bottom: calc(var(--Gp) + 10px) !important; }
}

/* ---- project page: six-part write-up format (27 Oct) ---- */
.cs2-ov__right > .cs2-label { display: block; margin-bottom: 20px; }
.cs2-ov__head { margin: 0 0 20px; font-family: var(--sans); font-size: clamp(30px, 2.78vw, 40px); font-weight: 600; line-height: 1.15; letter-spacing: -.02em; }
.cs2-ov__sub { margin: 0; font-size: clamp(17px, 1.39vw, 20px); line-height: 1.35; color: var(--muted); }
.cs2-role { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.cs2-awd { margin-top: 40px; padding: 22px 24px; border-radius: min(var(--r), 16px); background: var(--bg-2); display: grid; gap: 14px; }
.cs2-awd__ev { font-size: 14px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.cs2-awd ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.cs2-awd li { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: baseline; font-size: 16px; line-height: 1.35; }
.cs2-awd li b { font-weight: 600; }
.cs2-awd li span { color: var(--muted); }
.cs2-ch__in { display: grid; grid-template-columns: minmax(0, 369px) minmax(0, 548px); justify-content: space-between; gap: 48px; max-width: 1244px; }
.cs2-ch__no { padding-top: .5em; align-self: start; }
.cs2-ch__body h2 { margin: 0 0 24px; font-family: var(--sans); font-size: clamp(30px, 2.78vw, 40px); font-weight: 600; line-height: 1.15; letter-spacing: -.02em; }
.cs2-ch__body p { margin: 0 0 14px; font-size: clamp(17px, 1.39vw, 20px); line-height: 1.45; color: var(--muted); }
.cs2-ch__body p:last-child { margin-bottom: 0; }
.cs2-ch .cs2-img--wide { aspect-ratio: 1360 / 680; margin-top: 72px; }
.cs2-ch__pair { margin-top: 72px; }
.cs2-res__lead { margin: -32px 0 64px; max-width: 1016px; font-family: var(--sans); font-size: clamp(24px, 2.5vw, 36px); font-weight: 500; line-height: 1.25; letter-spacing: -.02em; }
.cs2-res__lead b { font-weight: 600; }
.cs2-res__grp + .cs2-res__grp { margin-top: 48px; }
.cs2-res__gl { display: block; margin-bottom: 16px; font-size: 14px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.cs2-res__grid--many { grid-template-columns: repeat(6, 1fr); }
.cs2-res__grid--many .cs2-res__card { gap: 28px; padding: 24px; }
.cs2-res__grid--many .cs2-res__card b { font-size: clamp(32px, 3vw, 44px); }
.cs2-res__grid--many .cs2-res__card span { font-size: 15px; line-height: 1.3; }
.cs2-learn { margin-top: 72px; }
.cs2-learn__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.cs2-learn__it { padding: 24px; border-radius: min(var(--r), 16px); box-shadow: inset 0 0 0 1px var(--line, rgba(0,0,0,.12)); }
.cs2-learn__it b { display: block; margin-bottom: 10px; font-size: 18px; font-weight: 600; line-height: 1.3; }
.cs2-learn__it p { margin: 0; font-size: 15px; line-height: 1.45; color: var(--muted); }
@media (max-width: 1100px) {
  .cs2-res__grid--many { grid-template-columns: repeat(3, 1fr); }
  .cs2-learn__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .cs2-ch__in { grid-template-columns: 1fr; gap: 16px; }
  .cs2-ch__no { padding-top: 0; }
  .cs2-ch .cs2-img--wide, .cs2-ch__pair { margin-top: 40px; }
  .cs2-ch .cs2-img--wide { aspect-ratio: 4 / 3; }
  .cs2-res__lead { margin: -8px 0 40px; }
  .cs2-res__grid--many { grid-template-columns: 1fr 1fr; }
  .cs2-learn { margin-top: 48px; }
  .cs2-learn__grid { grid-template-columns: 1fr; gap: 12px; }
}
/* six-part project page: same gap between every part (desktop G, phone Gp) */
@media (min-width: 861px) {
  main > section.cs2-show { padding-bottom: 0; }
  main > section.cs2-ov { padding-bottom: var(--G); }
  main > section.cs2-ch { padding-top: var(--G); padding-bottom: 0; }
}
@media (max-width: 860px) {
  main > section.cs2-show { padding-bottom: 0 !important; }
  main > section.cs2-ch { padding-top: var(--Gp, 88px) !important; padding-bottom: 0 !important; }
}
/* project page: client logo in place of the name (original colours) */
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cs2-ov__title--logo { line-height: 0; }
.cs2-ov__title--logo img { display: block; height: auto; max-width: 70vw; }
@media (max-width: 860px) { .cs2-ov__title--logo img { zoom: .85; } }
/* 27 Oct: address in the same style as "Singapore" above it, no red; step numbers plain */
.ct__addr { font-family: var(--sans); font-size: 16px; font-weight: 500; line-height: 1.4; color: var(--ink); }
.ct__next i { color: var(--muted); }

/* 27 Oct theme: black/cream blocks alternate, so every block gets the same space above and below its content
   (G on a laptop, Gp on a phone) */
@media (min-width: 861px) {
  main > section.pos { padding-bottom: var(--G) !important; }
  main > section.sw--fit .sw__pin { padding-top: calc(var(--G) + 5px) !important; }
  main > section.why { padding-bottom: calc(var(--G) - 24px) !important; }
  main > section.wk { padding-top: calc(var(--G) - 34px) !important; }
  main > section.cap-hero { padding-bottom: 75px !important; }
  main > section.cap { padding-top: calc(var(--G) / 2 - 51px) !important; padding-bottom: calc(var(--G) - 31px) !important; }
  main > section.appr { padding-top: calc(var(--G) - 40px) !important; }
  main > section.ct-hero { padding-bottom: calc(var(--G) - 8px) !important; }
  main > section.ct { padding-top: var(--G) !important; }
}
@media (max-width: 860px) {
  main > section.pos { padding-bottom: var(--Gp, 88px) !important; }
  main > section.sw--fit .sw__pin { padding-top: calc(var(--Gp, 88px) + 3px) !important; }
  main > section.why { padding-bottom: calc(var(--Gp, 88px) - 24px) !important; }
  main > section.wk { padding-top: calc(var(--Gp, 88px) - 40px) !important; }
  main > section.cap-hero { padding-bottom: 37px !important; }
  main > section.cap { padding-top: 0 !important; padding-bottom: calc(var(--Gp, 88px) - 31px) !important; }
  main > section.appr { padding-top: calc(var(--Gp, 88px) - 40px) !important; }
  main > section.ct-hero { padding-bottom: calc(var(--Gp, 88px) - 8px) !important; }
  main > section.ct { padding-top: var(--Gp, 88px) !important; }
}

/* 27 Oct: results first (impact band after the opening), number cards with icons, bigger numbered learnings */
.cs2-imp .cs2-res__head { margin-bottom: 40px; }
.cs2-imp .cs2-res__lead { margin: 0 0 56px; }
.cs2-res__card--ico { gap: 0; justify-content: flex-start; }
.cs2-ico { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 40px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); }
.cs2-ico svg { width: 24px; height: 24px; }
.cs2-res__card--ico b { margin-bottom: 10px; }
.cs2-res__grid--many .cs2-ico { width: 40px; height: 40px; margin-bottom: 28px; border-radius: 12px; }
.cs2-res__grid--many .cs2-ico svg { width: 20px; height: 20px; }
.cs2-learn__grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
.cs2-learn__it { display: grid; grid-template-columns: 64px 1fr; column-gap: 8px; padding: 32px; }
.cs2-learn__no { grid-row: span 2; font-family: var(--serif); font-style: italic; font-size: 40px; line-height: .9; color: var(--muted); }
.cs2-learn__it b { margin-bottom: 10px; font-size: clamp(20px, 1.67vw, 24px); line-height: 1.25; letter-spacing: -.01em; }
.cs2-learn__it p { font-size: 17px; line-height: 1.5; }
@media (max-width: 860px) {
  .cs2-imp .cs2-res__head { margin-bottom: 24px; }
  .cs2-imp .cs2-res__lead { margin-bottom: 32px; }
  .cs2-ico { margin-bottom: 24px; width: 40px; height: 40px; }
  .cs2-learn__grid { grid-template-columns: 1fr; }
  .cs2-learn__it { grid-template-columns: 48px 1fr; padding: 24px; }
  .cs2-learn__no { font-size: 32px; }
}
@media (min-width: 861px) {
  main > section.cs2-imp { padding-top: calc(var(--G) - 40px); padding-bottom: var(--G); }
  main > section.cs2-imp + section.cs2-show { padding-top: var(--G) !important; }
}
@media (max-width: 860px) {
  main > section.cs2-imp { padding-top: calc(var(--Gp, 88px) - 38px) !important; padding-bottom: var(--Gp, 88px) !important; }
  main > section.cs2-imp + section.cs2-show { padding-top: var(--Gp, 88px) !important; }
}
/* chapter number: big italic numeral like the work cards, label under it */
.cs2-ch__no { display: grid; gap: 16px; align-content: start; padding-top: 0; }
.cs2-ch__no em { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(64px, 6.4vw, 104px); line-height: .82; letter-spacing: -.02em; color: var(--ink); }
@media (max-width: 860px) { .cs2-ch__no { gap: 10px; } .cs2-ch__no em { font-size: 56px; } }

html { background: #0D0D0E; } /* mostly black site: no light flash when scrolling past the ends */
/* 27 Oct: all light text on black is cream, not pure white */
.hdr.on-dark, .ahero__text, .ahero__hint, .ahero__statement, .reel, .next, .modal__x, .stack__card, .startnow, .arb__sticky, .cta__card, .cta__offices a, .cta__offices p { color: var(--inv-ink); }
.ahero__plbl { color: rgba(255,236,213,.85); }
@media (min-width: 861px) { .ahero__hint { color: var(--inv-ink); } }

/* 27 Oct: results redesign. Big headline figure, then open stat cells (no boxes) */
.cs2-hl { display: grid; grid-template-columns: auto minmax(0, 520px); gap: clamp(28px, 4vw, 64px); align-items: end; margin: 0 0 clamp(56px, 6vw, 88px); }
.cs2-hl__fig { font-family: var(--sans); font-size: clamp(88px, 11.5vw, 176px); font-weight: 600; line-height: .82; letter-spacing: -.055em; }
.cs2-hl p { margin: 0; font-size: clamp(19px, 1.67vw, 26px); font-weight: 500; line-height: 1.3; letter-spacing: -.01em; color: var(--muted); }
.cs2-res__card--ico b { display: flex; align-items: baseline; gap: .16em; white-space: nowrap; margin-bottom: 12px; }
.cs2-res__card b small { font-size: .32em; font-weight: 500; letter-spacing: 0; color: var(--muted); }
.cs2-res__card--ico .cs2-ico { margin-bottom: 32px; }
.cs2-res__card--ico { padding: 28px 28px 30px; }
@media (max-width: 860px) {
  .cs2-hl { grid-template-columns: 1fr; gap: 16px; }
  .cs2-hl__fig { font-size: clamp(80px, 24vw, 120px); }
}
.cs2-res__card b span { font-size: inherit; font-weight: inherit; line-height: inherit; color: inherit; letter-spacing: inherit; }
.cs2-hl { grid-template-columns: auto 1fr; }
.cs2-hl p { max-width: 32ch; }
@media (max-width: 860px) { .cs2-hl { grid-template-columns: 1fr; } }
/* bigger icons on the number cards */
.cs2-res__card--ico .cs2-ico { width: 60px; height: 60px; border-radius: 16px; }
.cs2-res__card--ico .cs2-ico svg { width: 30px; height: 30px; stroke-width: 1.4; }
.cs2-res__grid--many .cs2-res__card--ico .cs2-ico { width: 52px; height: 52px; border-radius: 14px; margin-bottom: 28px; }
.cs2-res__grid--many .cs2-res__card--ico .cs2-ico svg { width: 26px; height: 26px; }
@media (max-width: 860px) { .cs2-res__card--ico .cs2-ico, .cs2-res__grid--many .cs2-res__card--ico .cs2-ico { width: 48px; height: 48px; margin-bottom: 22px; } .cs2-res__card--ico .cs2-ico svg { width: 24px; height: 24px; } }

/* 27 Oct: shine. A light sweep on the awards card, metallic Gold / Silver, and a highlight passing through the numbers */
@keyframes ta-sheen { 0% { transform: translateX(-120%) skewX(-18deg); } 28%, 100% { transform: translateX(260%) skewX(-18deg); } }
@keyframes ta-shine { 0% { background-position: 160% 0; } 32%, 100% { background-position: -60% 0; } }
.cs2-awd { position: relative; overflow: hidden; isolation: isolate; box-shadow: inset 0 0 0 1px rgba(255,236,213,.10); }
.cs2-awd::after { content: ""; position: absolute; z-index: -1; top: -20%; bottom: -20%; left: 0; width: 38%; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,236,213,.10) 45%, rgba(255,236,213,.18) 50%, rgba(255,236,213,.10) 55%, transparent);
  animation: ta-sheen 6s cubic-bezier(.4,0,.2,1) 1s infinite; }
.cs2-awd li b { background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: ta-shine 6s ease-in-out 1.2s infinite; }
.cs2-awd li:nth-child(1) b { background-image: linear-gradient(100deg, #C8963E 0%, #E9C46A 35%, #FFF3C4 50%, #E9C46A 65%, #B07D2A 100%); }
.cs2-awd li:nth-child(2) b { background-image: linear-gradient(100deg, #9A9A9A 0%, #CFCFCF 35%, #FFFFFF 50%, #CFCFCF 65%, #8A8A8A 100%); animation-delay: 1.5s; }
.cs2-awd li:nth-child(3) b { background-image: linear-gradient(100deg, #9C6A3C 0%, #C88E5A 35%, #F3D2B0 50%, #C88E5A 65%, #8A5A30 100%); animation-delay: 1.8s; }
/* numbers: the text colour with a brighter band passing through */
.cs2-hl__fig, .cs2-res__card b { --sh-a: var(--ink); --sh-b: #FFFFFF;
  background-image: linear-gradient(100deg, var(--sh-a) 0%, var(--sh-a) 42%, var(--sh-b) 50%, var(--sh-a) 58%, var(--sh-a) 100%); background-size: 250% 100%; background-position: 160% 0;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: ta-shine 7s ease-in-out 1s infinite; }
.cs2-imp .cs2-hl__fig, .cs2-imp .cs2-res__card b { --sh-b: #8C8C8C; }   /* black text on the off-white band: a grey glint */
.cs2-res__card b small { -webkit-text-fill-color: var(--muted); }
.cs2-res__grid > :nth-child(2) b { animation-delay: 1.4s; } .cs2-res__grid > :nth-child(3) b { animation-delay: 1.8s; } .cs2-res__grid > :nth-child(4) b { animation-delay: 2.2s; }
.cs2-res__grid > :nth-child(5) b { animation-delay: 2.6s; } .cs2-res__grid > :nth-child(6) b { animation-delay: 3s; }
@media (prefers-reduced-motion: reduce) { .cs2-awd::after { display: none; } .cs2-awd li b, .cs2-hl__fig, .cs2-res__card b { animation: none; background-position: 0 0; } }
/* the shine paints only inside the text box: give the glyphs room so the last letter (%, M, K) is never cut */
.cs2-hl__fig { padding: .06em .14em .06em .02em; margin: -.06em -.14em -.06em -.02em; }
.cs2-res__card b { padding-right: .12em; margin-right: -.12em; }
.cs2-awd li b { padding-right: .1em; margin-right: -.1em; }
/* opening: our role as tags under the awards, so both columns end together */
.cs2-roles { margin-top: 32px; display: grid; gap: 14px; }
.cs2-roles__lbl { font-size: 14px; font-weight: 500; color: var(--muted); }
.cs2-roles ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.cs2-roles li { padding: 9px 16px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); font-size: 15px; font-weight: 500; line-height: 1.2; }
@media (max-width: 860px) { .cs2-roles { margin-top: 24px; } .cs2-roles li { font-size: 14px; padding: 8px 13px; } }

/* 27 Oct round 2 */
/* 1. small labels in caps and bold, like the awards title */
.cs2-ov__meta dt, .cs2-roles__lbl { font-size: 14px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink); }
/* 2. the line next to +161% gets more room */
.cs2-hl p { max-width: 640px; }
/* 3. icons without a box, bigger */
.cs2-res__card--ico .cs2-ico, .cs2-res__grid--many .cs2-res__card--ico .cs2-ico { width: auto; height: auto; border-radius: 0; box-shadow: none; margin-bottom: 36px; justify-content: start; }
.cs2-res__card--ico .cs2-ico svg { width: 40px; height: 40px; stroke-width: 1.3; }
.cs2-res__grid--many .cs2-res__card--ico .cs2-ico svg { width: 34px; height: 34px; }
/* 4. touchpoint numbers as big as the rest (an older label style was shrinking them) */
.cs2-res__grid--many .cs2-res__card b span { font-size: inherit; font-weight: inherit; line-height: inherit; color: inherit; }
.cs2-res__grid--many .cs2-res__card b { font-size: clamp(40px, 3.6vw, 56px); }
@media (max-width: 860px) {
  .cs2-res__card--ico .cs2-ico, .cs2-res__grid--many .cs2-res__card--ico .cs2-ico { margin-bottom: 22px; }
  .cs2-res__card--ico .cs2-ico svg, .cs2-res__grid--many .cs2-res__card--ico .cs2-ico svg { width: 32px; height: 32px; }
  .cs2-res__grid--many .cs2-res__card b { font-size: clamp(32px, 9vw, 44px); }
}
@media (max-width: 860px) { .cs2-res__card--ico b { font-size: clamp(30px, 9vw, 40px); } }

/* 27 Oct: one button style everywhere (Yuni). An outline in the text colour that fills on hover:
   black fill on the off-white sections, cream fill on the black ones */
.pill:not(.pill--light) { --pb: transparent; --pc: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.pill:not(.pill--light):hover { color: var(--bg); }
.pill:not(.pill--light)::after { background: var(--ink); }
/* form buttons (Next / Send enquiry) use the same outline button as everywhere else */
.ctf__btn { height: 52px; font-size: 16px; background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); transition: background .35s cubic-bezier(.2,.8,.2,1), color .35s cubic-bezier(.2,.8,.2,1); }
.ctf__btn:hover { opacity: 1; background: var(--ink); color: var(--bg); }
/* floating Back / Top: cream over black sections, black over off-white ones (no pure white) */
.fnav { --bg-2: #FFECD5; --ink: #0D0D0E; --bg: #FFECD5; --line: rgba(13,13,14,.16); background: var(--bg-2); color: var(--ink); transition: background .3s, color .3s, opacity .4s ease, transform .4s cubic-bezier(.2,.8,.2,1), visibility 0s; }
.fnav.fnav--light { --bg-2: #0D0D0E; --ink: #FFECD5; --bg: #0D0D0E; --line: rgba(255,236,213,.2); }
.ctf__btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; }
.ctf__btn::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
/* shine only runs while it is on screen (saves work while scrolling) */
.cs2-awd::after, .cs2-awd li b, .cs2-hl__fig, .cs2-res__card b { animation-play-state: paused; }
.shine-on .cs2-awd::after, .shine-on.cs2-awd::after, .shine-on .cs2-awd li b, .shine-on.cs2-awd li b, .shine-on .cs2-hl__fig, .shine-on .cs2-res__card b { animation-play-state: running; }

/* ---- Home intro: "Learn more" opens a short About in place (Kris, 27 Oct) ---- */
.pos__chev { width: 12px; height: 12px; margin-left: -2px; transition: transform .5s cubic-bezier(.7,0,.2,1); }
.pos__more[aria-expanded="true"] .pos__chev { transform: rotate(180deg); }
.apeek { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .8s cubic-bezier(.7,0,.2,1); }
.apeek.is-open { grid-template-rows: 1fr; }
.apeek__clip { min-height: 0; overflow: hidden; }
.apeek__in { display: grid; gap: clamp(48px, 5vw, 72px); padding-top: clamp(56px, 6vw, 88px); text-align: left; }
.apeek__row { opacity: 0; transform: translateY(28px); transition: opacity .5s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.apeek.is-open .apeek__row { opacity: 1; transform: none; }
.apeek.is-open .apeek__row:nth-child(1) { transition-delay: .25s; } .apeek.is-open .apeek__row:nth-child(2) { transition-delay: .38s; } .apeek.is-open .apeek__row:nth-child(3) { transition-delay: .5s; }
.apeek__story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 48px; padding-top: 40px; border-top: 1px solid var(--line); }
.apeek__lbl { align-self: start; }
.apeek__body p { margin: 0 0 16px; font-size: clamp(17px, 1.39vw, 20px); line-height: 1.5; color: var(--muted); max-width: 62ch; }
.apeek__body .apeek__lead { font-size: clamp(22px, 2vw, 30px); font-weight: 500; line-height: 1.3; letter-spacing: -.015em; color: var(--ink); }
.apeek__why { display: grid; gap: 32px; }
.apeek__whyhead { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 48px; align-items: baseline; }
.apeek__title { margin: 0; font-size: clamp(26px, 2.5vw, 36px); font-weight: 600; letter-spacing: -.02em; line-height: 1.2; }
.apeek__cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.apeek__card { display: grid; align-content: start; gap: 12px; padding: 28px; border-radius: min(var(--r), 16px); background: var(--bg-2); }
.apeek__card em { font-family: var(--serif); font-style: italic; font-size: 36px; line-height: 1; color: var(--muted); margin-bottom: 12px; }
.apeek__card b { font-size: clamp(18px, 1.5vw, 22px); font-weight: 600; line-height: 1.25; }
.apeek__card p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--muted); }
.apeek__next { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
@media (max-width: 1100px) { .apeek__cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 860px) {
  .apeek__story, .apeek__whyhead { grid-template-columns: 1fr; gap: 14px; }
  .apeek__story { padding-top: 28px; }
  .apeek__cards { grid-template-columns: 1fr; gap: 10px; }
  .apeek__card { padding: 22px; grid-template-columns: 44px 1fr; column-gap: 6px; }
  .apeek__card em { grid-row: span 2; font-size: 28px; margin: 0; }
  .apeek__next { flex-direction: column; align-items: stretch; } .apeek__next .pill { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .apeek, .apeek__row, .pos__chev { transition: none !important; } }

/* 28 Oct: the ( 01 ) numbers are gone from the Home capabilities list, so the open text lines up with the name */
.asvc__body { padding-left: 0; }

/* 28 Oct (Kris + Yuni): no numbering anywhere. Titles carry the cards; steps and learnings get simple markers. */
.menu__list a { gap: 0; }
.sw__top { justify-content: flex-start; }
.apeek__card b { font-size: clamp(20px, 1.7vw, 24px); }
/* About > Why Type A: title on top, text at the bottom */
.why__card { min-height: 300px; }
.why__card > div { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; }
.why__card h3 { font-size: clamp(24px, 2vw, 30px); line-height: 1.2; letter-spacing: -.02em; }
.why__card p { margin: 0; font-size: 16px; line-height: 1.45; min-height: 0; }
/* Capabilities > How we think: a simple line icon instead of a number */
.appr__ico { display: block; width: 40px; height: 40px; color: var(--ink); }
.appr__ico svg { display: block; width: 100%; height: 100%; }
/* Contact > What happens next: a small timeline (dot + line) instead of 01 02 03 */
.ct__next { gap: 22px; font-size: 16px; }
.ct__next li { position: relative; grid-template-columns: 26px 1fr; }
.ct__next li::before { content: ""; width: 9px; height: 9px; padding: 0; margin-top: .5em; border-radius: 50%; background: var(--ink); }
.ct__next li:not(:last-child)::after { content: ""; position: absolute; left: 4px; top: calc(.5em + 13px); bottom: calc(-18px - .5em); width: 1px; background: color-mix(in srgb, var(--ink) 22%, transparent); }
/* Project pages: bigger section names now that the numbers are gone, and a dot before each learning */
/* the section names on project pages (Opening, Context, Solution..., The impact, Results) read as subtitles */
.cs2-label.cs2-sub { font-family: var(--sans); font-size: clamp(18px, 1.5vw, 22px); font-weight: 500; letter-spacing: -.01em; text-transform: none; line-height: 1.25; color: var(--ink); gap: 12px; }
.cs2-label.cs2-sub::before { width: 8px; height: 8px; margin-top: .5em; }
.cs2-learn__it { grid-template-columns: 1fr; }
.cs2-learn__it b, .cs2-learn__it p { padding-left: 22px; }
.cs2-learn__it b { position: relative; }
.cs2-learn__it b::before { content: ""; position: absolute; left: 0; top: .45em; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
@media (max-width: 767px) {
  .apeek__card { grid-template-columns: 1fr; }
  .why__card { min-height: 0; } .why__card > div { gap: 24px; } .why__card h3 { font-size: 24px; }
  .appr__ico { width: 34px; height: 34px; }
  .cs2-learn__it { grid-template-columns: 1fr; }
}
.cs2-ov__right > .cs2-label.cs2-sub { display: flex; width: fit-content; }
/* Home work cards: with the number gone, the client · type line is the card's top line, so it is bigger */
.sw__top { padding-top: 18px; }
.sw__top .mono { font-family: var(--sans); font-size: clamp(16px, 1.25vw, 20px); font-weight: 500; letter-spacing: -.01em; text-transform: none; line-height: 1.2; }

/* Opening (28 Oct): Yuni's layout from the upload page. On computers a column can sit higher (--cy, in reels)
   and a reel can be taller (--hk). Phones keep two even columns. */
@media (min-width: 601px) {
  .ahero__col { top: calc(var(--ch) * var(--cy, 0)); }
  .ahero__track .ahero__item { height: calc(var(--ch) * var(--hk, 1)); }
}
/* the Type A logo on the opening is smaller, so it covers less of the reels (Kris, 28 Oct) */
.ahero__logo { height: max(40px, 3.4vw); }
@media (max-width: 860px) { .ahero__logo { width: 50vw; height: auto; } }

/* ===== Design pass (28 Oct, after Kris's copy) ===== */
/* 1. Home > capabilities: the names are longer now (3-4 words), so they are a size down and stay on one line on laptops */
[data-capacc] .asvc__name span { font-size: clamp(28px, 3.3vw, 46px); line-height: 1.05; letter-spacing: -.03em; }
[data-capacc] .asvc__name { padding-block: 4px; }
/* 3. Capabilities page: "What's included" starts level with the top of the photo instead of floating at its bottom */
.cap__inc { align-self: start; padding-top: 6px; }
/* 4. Home > work cards: a short line of numbers under the text */
.sw__stat { margin: 10px 0 0; font-size: 14px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
/* 5. About > Our story: a comfortable line length (about 65 characters) */
.story__body p { max-width: 62ch; line-height: 1.4; margin-bottom: 14px; }


/* 28 Oct (round 3): "How we think" as a three-step journey instead of three big empty cards.
   One band with hairlines, each step = icon in a ring + title, a small arrow between steps. */
.appr__grid { gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.appr__card { position: relative; min-height: 0 !important; justify-content: flex-start; gap: clamp(40px, 5vw, 72px);
  padding: clamp(32px, 3.4vw, 48px) clamp(24px, 2.8vw, 40px) clamp(36px, 3.6vw, 52px); border-radius: 0; background: transparent; }
.appr__card + .appr__card { border-left: 1px solid var(--line); }
.appr__card:first-child { padding-left: 0; }
.appr__card:last-child { padding-right: 0; }
.appr__ico { box-sizing: border-box; width: 64px; height: 64px; padding: 18px; border: 1px solid var(--line); border-radius: 50%;
  transition: background-color .35s ease, color .35s ease, border-color .35s ease; }
.appr__card:hover .appr__ico { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.appr__card h3 { font-size: clamp(26px, 2.6vw, 38px); line-height: 1.08; letter-spacing: -.03em; max-width: none; text-wrap: balance; }
.appr__card:not(:last-child)::after { content: ""; position: absolute; top: calc(clamp(32px, 3.4vw, 48px) + 32px); right: -15px; z-index: 1;
  width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 50%;
  background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E6E6A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 14px no-repeat;
  transform: translateY(-50%); }
@media (max-width: 991px) {
  .appr__grid { grid-template-columns: 1fr; border-bottom: 0; }
  .appr__card { flex-direction: row; align-items: center; gap: 20px; padding: 22px 0 !important; border-bottom: 1px solid var(--line); }
  .appr__card + .appr__card { border-left: 0; }
  .appr__ico { width: 52px; height: 52px; padding: 14px; flex: none; }
  .appr__card h3 { font-size: clamp(22px, 6vw, 28px); max-width: none; }
  .appr__card:not(:last-child)::after { top: auto; bottom: -15px; right: auto; left: 11px; transform: rotate(90deg); }
}

/* 28 Oct (round 3): Home opens straight on the finished opening - no scroll-through animation.
   One screen tall, all 9 reels showing, TYPE A bottom-left, tagline bottom-right. */
.ahero.ahero--still { height: 100vh; }
.ahero--still .ahero__wrap { transform: none !important; }
.ahero--still .ahero__hint { display: none !important; }
@media (min-width: 601px) { .ahero--still .ahero__grid { --cw: 32.56vw; } }
@media (max-width: 860px) { .ahero.ahero--still { height: 100svh; } }
/* phones/tablets: the same idea - small TYPE A bottom-left, tagline bottom-right, on one line */
@media (max-width: 860px) {
  .ahero--still .ahero__text { align-items: flex-end; padding-top: 0; padding-bottom: max(24px, env(safe-area-inset-bottom)); }
  .ahero--still .ahero__words { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 16px; }
  .ahero--still .ahero__logo { width: clamp(104px, 30vw, 170px); height: auto; }
  .ahero--still .ahero__tag { font-size: clamp(13px, 3.6vw, 17px); }
  .ahero--still .ahero__w--r { align-self: flex-end; }
  .ahero.ahero--still.is-two .ahero__box::before { height: 22%; }
}

/* 28 Oct (round 3b): "How we think" made compact - the three points sit under the paragraph as a
   short list (icon ring + words, hairlines), instead of a big row of boxes for three short lines. */
.appr__intro--list { align-items: start; margin-bottom: 0; }
.appr__intro--list .appr__title { padding-top: 4px; }
.appr__side { display: flex; flex-direction: column; gap: clamp(28px, 3vw, 40px); }
.appr__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.appr__item { display: flex; align-items: center; gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.appr__item .appr__ico { flex: none; box-sizing: border-box; width: 46px; height: 46px; padding: 12px; border: 1px solid var(--line); border-radius: 50%;
  transition: background-color .3s ease, color .3s ease, border-color .3s ease; }
.appr__item:hover .appr__ico { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.appr__item h3 { margin: 0; font-family: var(--sans); font-weight: 500; font-size: clamp(20px, 1.75vw, 26px); line-height: 1.15; letter-spacing: -.02em; }
@media (max-width: 991px) { .appr__side { gap: 24px; } .appr__item { padding: 12px 0; } .appr__item .appr__ico { width: 42px; height: 42px; padding: 11px; } }
/* phones: the five footer links fit on one line (Contact was wrapping on its own) */
@media (max-width: 600px) { .aftr__nav { flex-wrap: nowrap; justify-content: space-between; gap: 10px; } .aftr__nav a { font-size: clamp(14px, 4vw, 17px); } }
/* About > Why Type A (and the Home "Learn more" panel): no tall boxes with a gap in the middle -
   the text sits right under its title, the card is only as tall as its words */
.why__card { min-height: 0 !important; justify-content: flex-start; gap: 0; padding: 28px 26px 30px; }
.why__card > div { justify-content: flex-start; gap: 14px; }
.why__card h3 { font-size: clamp(22px, 1.8vw, 27px); }
/* phones: swiping cards stop 16px from the screen edge, like everything else (they snapped flush to the edge) */
@media (max-width: 860px) {
  .hs__track, .sw__track, .sw__track--fit { padding-inline: 16px; scroll-padding-inline: 16px; }
  .sw__card { flex-basis: 80%; }
}
.cap__foot { display: flex; justify-content: center; padding-top: clamp(40px, 5vw, 64px); }
/* 28 Oct: the thin line between TYPE A and the tagline is removed */
.ahero--still .ahero__line { display: none !important; }
/* five numbers fill the row (SSTV, 28 Oct) */
@media (min-width: 1101px) { .cs2-res__grid--five { grid-template-columns: repeat(5, 1fr); } }

/* 29 Oct (Kris): Our story = one big line + a smaller line; Why Type A = three centred cards with an icon */
.apeek__body .apeek__sub { margin: 14px 0 0; font-size: clamp(16px, 1.25vw, 19px); line-height: 1.5; color: var(--muted); max-width: 56ch; }
.apeek__cards--3, .why__cards--3 { grid-template-columns: repeat(3, 1fr); }
.apeek__cards--3 .apeek__card, .why__cards--3 .why__card { text-align: center; justify-items: center; align-items: center; padding: clamp(28px, 2.6vw, 40px) clamp(20px, 2vw, 32px); }
.why__cards--3 .why__card > div { align-items: center; gap: 10px; }
.apeek__ico, .why__ico { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-bottom: 8px; border-radius: 50%; border: 1px solid var(--line); }
.apeek__ico svg, .why__ico svg { width: 22px; height: 22px; }
.apeek__cards--3 .apeek__card p, .why__cards--3 .why__card p { max-width: 32ch; }
@media (max-width: 760px) {
  .apeek__cards--3, .why__cards--3 { grid-template-columns: 1fr; }
  .apeek__cards--3 .apeek__card { grid-template-columns: 1fr; }
}
/* icons as in Kris's mock-up: a soft filled circle, no outline, a little bigger */
.apeek__ico, .why__ico { width: 52px; height: 52px; margin-bottom: 10px; border: 0; background: color-mix(in srgb, currentColor 9%, transparent); }
.apeek__ico svg, .why__ico svg { width: 24px; height: 24px; }

/* 29 Oct (Kris, "Our Work" slides) */
/* Selected work: the label sits on the left under the heading; card text centred under each picture */
.sw__head { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 14px; }
.sw__card .sw__name, .sw__card .sw__desc, .sw__card .sw__stat { text-align: center; margin-left: auto; margin-right: auto; }
.sw__card .sw__desc { max-width: 40ch; }
.sw__card .sw__stat { font-weight: 600; }
/* client logos: label on the left */
.clients__label { justify-content: flex-start; }
/* no lone grey dot beside section labels */
.sec-head .dotr, .projects__head .dotr, .cs2-dot { display: none !important; }

/* 29 Oct (Kris): "or" between the email and the form button, in the footer */
.aftr__or { display: block; margin: 18px 0 0; font-size: clamp(15px, 1.1vw, 17px); font-weight: 500; color: var(--muted); }
.aftr__or + .aftr__cta, .aftr__or + .aftr__cta:is(*) { margin-top: 14px; }
/* Our story as in Kris's mock-up: a bigger line that breaks evenly into two lines, the second line in soft cream */
.apeek__body .apeek__lead { font-size: clamp(26px, 2.9vw, 44px); line-height: 1.18; letter-spacing: -.02em; text-wrap: balance; max-width: 22em; }
.apeek__body .apeek__sub { margin-top: 18px; font-size: clamp(17px, 1.7vw, 25px); line-height: 1.4; color: color-mix(in srgb, var(--ink) 66%, transparent); text-wrap: balance; max-width: 34em; }
.apeek__why { padding-top: clamp(32px, 3vw, 44px); border-top: 1px solid var(--line); }
.apeek__title { font-size: clamp(28px, 2.75vw, 40px); font-weight: 500; }
.story__title { text-wrap: balance; }
.apeek__body .apeek__sub { text-wrap: wrap; max-width: none; }
@media (max-width: 760px) { .br-d { display: none; } }
/* closer to Kris's mock-up: lighter headings, warmer second line, tighter spacing, bigger icons */
.apeek__in { gap: clamp(32px, 3vw, 44px); }
.apeek__body .apeek__lead, .apeek__title { font-weight: 400; }
.apeek__body .apeek__sub { margin-top: 10px; color: color-mix(in srgb, var(--ink) 76%, transparent); }
.apeek__why { gap: 24px; padding-top: clamp(26px, 2.4vw, 36px); }
.apeek__ico, .why__ico { width: 64px; height: 64px; }
.apeek__ico svg, .why__ico svg { width: 30px; height: 30px; }
@media (max-width: 760px) { .apeek__ico, .why__ico { width: 56px; height: 56px; } .apeek__ico svg, .why__ico svg { width: 26px; height: 26px; } }
.apeek__cards--3 .apeek__card p, .why__cards--3 .why__card p { max-width: 29ch; text-wrap: balance; }
.apeek__cards--3 .apeek__card p, .why__cards--3 .why__card p { max-width: none; text-wrap: wrap; }
@media (max-width: 1100px) { .apeek__card .br-d, .why__card .br-d { display: none; } }
/* "The thinking behind the work." on one line (no lone "work.") */
.why__titles { max-width: none; }
.why__title { max-width: none; text-wrap: balance; }
/* "or" as in Kris's mock-up: centred above the button, white, bold and bigger */
.aftr__choice { display: flex; flex-direction: column; align-items: center; width: fit-content; margin-top: 18px; }
.aftr__choice .aftr__or { margin: 0 0 14px; font-size: clamp(22px, 1.8vw, 28px); font-weight: 600; line-height: 1; letter-spacing: -.01em; color: var(--ink); }
.aftr__choice .aftr__cta, .aftr__choice .aftr__cta:is(*) { margin: 0; }
/* Kris's icons (29 Oct): drawn to match his mock-up, finer line, filling more of the circle */
.apeek__ico svg, .why__ico svg { width: 40px; height: 40px; }
@media (max-width: 760px) { .apeek__ico svg, .why__ico svg { width: 34px; height: 34px; } }

/* Client logos (30 Oct): Kris's 16 clients in his order, all one cream colour.
   Every logo file is the same 600x200 canvas with the logo already sized to look
   equally big, so one size rule fits them all. */
.cgrid__cell img { width: min(82%, 240px); height: auto; max-width: none; max-height: none; }
.plogos__strip img { padding: 10px 8px; }

/* Project page top with a cover picture (30 Oct, Yuni's covers): the box takes the picture's own
   16:9 shape at every size, so text on the cover is never cut (phones used to crop it nearly square) */
.cs2-hero__box--cover { height: auto; min-height: 0; aspect-ratio: 16 / 9; }
.cs2-hero__box--cover img { top: 0; height: 100%; }

/* Row of video clips under a solution part (Zul, 2 Nov): upright clips drift slowly, can be swiped or
   dragged, play muted while on screen, and each opens its original post */
.cs2-clips { margin-top: 72px; overflow: hidden; }
.cs2-clips__track { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; cursor: grab; -webkit-overflow-scrolling: touch; }
.cs2-clips__track::-webkit-scrollbar { display: none; }
.cs2-clips__track.is-grabbing { cursor: grabbing; }
.cs2-clip { position: relative; flex: 0 0 clamp(170px, 17vw, 250px); aspect-ratio: 9 / 16; border-radius: min(var(--r), 14px); overflow: hidden; background: var(--bg-3); color: #fff; text-decoration: none; user-select: none; -webkit-user-drag: none; }
.cs2-clip img, .cs2-clip video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.cs2-clip::after { content: ""; position: absolute; inset: auto 0 0; height: 46%; background: linear-gradient(transparent, rgba(0,0,0,.72)); pointer-events: none; z-index: 1; }
.cs2-clip__meta { position: absolute; left: 14px; right: 14px; bottom: 12px; z-index: 2; display: grid; gap: 2px; font-size: 13px; line-height: 1.3; }
.cs2-clip__meta b { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.cs2-clip__meta i { font-style: normal; opacity: .85; white-space: nowrap; }
a.cs2-clip:hover .cs2-clip__meta i, a.cs2-clip:focus-visible .cs2-clip__meta i { opacity: 1; text-decoration: underline; }
a.cs2-clip:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
@media (max-width: 760px) { .cs2-clips { margin-top: 40px; } .cs2-clip { flex-basis: 42vw; } .cs2-clip__meta { left: 10px; right: 8px; font-size: 12px; } .cs2-clip__meta b { font-size: 15px; } }

/* 2 Nov evening: one big picture near the top of a project page */
.cs2-show__grid--one { grid-template-columns: 1fr; }
.cs2-show__grid--one .cs2-img { aspect-ratio: 1360 / 680; }
@media (max-width: 600px) { .cs2-show__grid--one .cs2-img { aspect-ratio: 4 / 3; } }

/* ---------- 2 Nov evening (Yuni): "Work" in the header shows the case studies on hover or keyboard focus;
   the word itself still opens the Work page. Phones and tablets get them under Work in the menu. ---------- */
.hdr__dd { position: relative; display: flex; align-items: center; }
.hdr__caret { display: inline-block; width: 7px; height: 7px; margin-left: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-3px) rotate(45deg); transition: transform .3s cubic-bezier(.33,1,.68,1); }
.hdr__dd:hover .hdr__caret, .hdr__dd:focus-within .hdr__caret { transform: translateY(0) rotate(225deg); }
.hdr__ddp { position: absolute; top: 100%; left: 50%; z-index: 60; padding-top: 16px; width: 360px; transform: translate(-50%, 8px); opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .25s ease .12s, transform .35s cubic-bezier(.16,1,.3,1) .12s, visibility 0s linear .47s; }
.hdr__dd:hover .hdr__ddp, .hdr__dd:focus-within .hdr__ddp { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); transition-delay: 0s; }
.hdr__ddb { display: grid; gap: 2px; padding: 8px; border-radius: 16px; background: #0D0D0E; color: #FFECD5; border: 1px solid rgba(255,236,213,.14); box-shadow: 0 24px 60px -18px rgba(0,0,0,.55); }
.hdr__ddi { display: grid; grid-template-columns: 84px 1fr; gap: 14px; align-items: center; padding: 8px; border-radius: 10px; transition: background .2s ease; }
.hdr__ddi:hover, .hdr__ddi:focus-visible { background: rgba(255,236,213,.08); }
.hdr__ddt { display: block; aspect-ratio: 4 / 3; border-radius: 6px; overflow: hidden; background: rgba(255,236,213,.06); }
.hdr__ddt img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.16,1,.3,1); }
.hdr__ddi:hover .hdr__ddt img { transform: scale(1.06); }
.hdr__ddx { display: grid; gap: 3px; min-width: 0; }
.hdr__ddx small { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,236,213,.6); }
.hdr__ddx b { font-family: var(--sans); font-size: 15px; font-weight: 500; line-height: 1.3; letter-spacing: -.01em; }
.hdr__ddall { display: flex; justify-content: space-between; margin-top: 4px; padding: 12px 10px 8px; border-top: 1px solid rgba(255,236,213,.12); font-family: var(--sans); font-size: 14px; font-weight: 500; color: rgba(255,236,213,.75); transition: color .2s ease; }
.hdr__ddall:hover, .hdr__ddall:focus-visible { color: #FFECD5; }
.menu-open .hdr__ddp, .menu-closing .hdr__ddp { display: none; }
.menu-open .hdr__caret, .menu-closing .hdr__caret { opacity: 0; }
@media (max-width: 1100px) { .hdr__dd { display: none; } }
@media (prefers-reduced-motion: reduce) { .hdr__ddp, .hdr__caret, .hdr__ddt img { transition: none; } }
.menu__list .menu__sub { display: flex; flex-wrap: wrap; gap: 8px; padding: 2px 0 18px; }
.menu__list .menu__sub a { display: inline-flex; gap: 0; padding: 7px 14px; border: 1px solid var(--inv-line); border-radius: 999px; font-size: 15px; letter-spacing: -.005em; line-height: 1.3; }
.menu__list .menu__sub a::after { content: none; }

/* 2 Nov evening (Yuni's sample): Our capabilities, the "what's included" list sits at the right edge, under the +/− sign,
   with a short dash */
@media (min-width: 768px) { .asvc__inc { justify-self: end; } }
.asvc__inc li::before { content: "\2013\00a0"; }

/* 3 Nov (Tom): the Work list opens with some motion. The panel unrolls from the top, the case studies follow one
   after another, and pointing at one slides its text and shows an arrow. Quick enough that it never slows anyone down. */
.hdr__ddb { clip-path: inset(0 0 100% 0 round 16px); transition: clip-path .55s cubic-bezier(.16,1,.3,1) .12s; }
.hdr__dd:hover .hdr__ddb, .hdr__dd:focus-within .hdr__ddb { clip-path: inset(0 0 0 0 round 16px); transition-delay: 0s; }
.hdr__ddi, .hdr__ddall { opacity: 0; transform: translateY(10px); transition: opacity .2s ease, transform .2s ease, background .2s ease, color .2s ease; }
.hdr__dd:hover .hdr__ddi, .hdr__dd:focus-within .hdr__ddi, .hdr__dd:hover .hdr__ddall, .hdr__dd:focus-within .hdr__ddall {
  opacity: 1; transform: none; transition: opacity .45s ease calc(.08s + var(--i, 0) * .06s), transform .6s cubic-bezier(.16,1,.3,1) calc(.08s + var(--i, 0) * .06s), background .2s ease, color .2s ease; }
.hdr__ddi { grid-template-columns: 84px 1fr 20px; }
.hdr__ddx { transition: transform .35s cubic-bezier(.16,1,.3,1); }
.hdr__ddi:hover .hdr__ddx, .hdr__ddi:focus-visible .hdr__ddx { transform: translateX(4px); }
.hdr__dda { font-family: var(--sans); font-size: 16px; color: #FFECD5; opacity: 0; transform: translateX(-8px); transition: opacity .25s ease, transform .35s cubic-bezier(.16,1,.3,1); }
.hdr__ddi:hover .hdr__dda, .hdr__ddi:focus-visible .hdr__dda { opacity: 1; transform: none; }
.hdr__ddall span { display: inline-block; transition: transform .35s cubic-bezier(.16,1,.3,1); }
.hdr__ddall:hover span, .hdr__ddall:focus-visible span { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) {
  .hdr__ddb, .hdr__ddi, .hdr__ddall, .hdr__ddx, .hdr__dda, .hdr__ddall span { transition: none !important; }
  .hdr__ddb { clip-path: none; } .hdr__ddi, .hdr__ddall { opacity: 1; transform: none; }
}

/* 3 Nov (Tom): one underline slides between the header links (see v4.js); the page you are on is where it rests */
.hdr__right { position: relative; }
.hdr__bar { position: absolute; left: 0; top: 0; height: 1px; width: 0; background: currentColor; opacity: 0; pointer-events: none;
  transition: transform .5s cubic-bezier(.16,1,.3,1), width .5s cubic-bezier(.16,1,.3,1), opacity .25s ease; }
.has-hdrbar .hdr__link.is-current { text-decoration: none; }
body:not(.menu-open):not(.menu-closing) .hdr__link:hover { opacity: 1; }
.menu-open .hdr__bar, .menu-closing .hdr__bar { opacity: 0 !important; transition: none; }
@media (max-width: 1100px) { .hdr__bar { display: none; } .has-hdrbar .hdr__link.is-current { text-decoration: underline; } }
@media (prefers-reduced-motion: reduce) { .hdr__bar { transition: opacity .2s ease; } }

/* 3 Nov (Tom: "the mouse disappears" over project cards): the pointer stays visible over cards, and the
   "View project" label rides just below and to the right of it instead of replacing it */
.has-cur [data-cursor], .has-cur [data-cursor] * { cursor: pointer; }
.cur span { transform-origin: 0 0; transform: translate(16px, 18px) scale(.6); }
.cur.is-label span { transform: translate(16px, 18px) scale(1); }

/* 3 Nov (Kris): the About summary under the Home intro is always open (no button), and its second line is smaller */
.apeek--open { grid-template-rows: 1fr; transition: none; }
.apeek--open .apeek__row { opacity: 1; transform: none; transition: none; }
.apeek__body .apeek__sub { font-size: clamp(15px, 1.2vw, 18px); line-height: 1.55; }

/* 3 Nov (Kris): the picture or film at the top of a project page is half the size it was, centred */
@media (min-width: 1024px) {
  .cs2-hero__box { width: 50%; min-width: 600px; margin-inline: auto; height: auto; min-height: 0; aspect-ratio: 16 / 9; }
  .cs2-hero__box img { top: 0; height: 100%; }
}
.cs2-hero__box--film { background: #000; }
.cs2-film__v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
.cs2-hero__box--film.is-playing .cs2-film__v { object-fit: contain; }
.cs2-film__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 12px; padding: 12px 20px 12px 12px;
  border: 0; border-radius: 999px; background: rgba(13,13,14,.72); color: #FFECD5; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font: 600 15px/1 var(--sans); cursor: pointer; transition: transform .45s cubic-bezier(.16,1,.3,1), background .25s ease, opacity .25s ease; }
.cs2-film__play i { width: 44px; height: 44px; border-radius: 50%; background: #FFECD5; position: relative; flex: none; }
.cs2-film__play i::after { content: ""; position: absolute; left: 17px; top: 13px; border-left: 14px solid #0D0D0E; border-top: 9px solid transparent; border-bottom: 9px solid transparent; }
.cs2-film__play small { font: 500 13px/1 var(--mono); opacity: .7; }
.cs2-film__play:hover { transform: translate(-50%, -50%) scale(1.05); background: rgba(13,13,14,.86); }
.cs2-hero__box--film.is-playing .cs2-film__play { opacity: 0; pointer-events: none; }

/* 3 Nov (Tom): Home project cards get a smoother hover, like the Work page. The picture eases in a little,
   a soft shade comes over it, the title gets an underline that draws across, and an arrow slides in. */
.sw__img img, .sw__img video { transition: scale 1.1s cubic-bezier(.16,1,.3,1); }
.sw__img::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(180deg, transparent 55%, rgba(13,13,14,.28)); opacity: 0; transition: opacity .6s ease; }
.sw__name { align-self: flex-start; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .6s cubic-bezier(.16,1,.3,1); padding-bottom: 2px; }
.sw__top .mono::after { content: "\2192"; display: inline-block; margin-left: 8px; opacity: 0; transform: translateX(-8px); transition: opacity .3s ease, transform .5s cubic-bezier(.16,1,.3,1); }
@media (hover: hover) {
  .sw__card:hover .sw__img img, .sw__card:hover .sw__img video, .sw__card:focus-visible .sw__img img { scale: 1.05; }
  .sw__card:hover .sw__img::after, .sw__card:focus-visible .sw__img::after { opacity: 1; }
  .sw__card:hover .sw__name, .sw__card:focus-visible .sw__name { background-size: 100% 1px; }
  .sw__card:hover .sw__top .mono::after, .sw__card:focus-visible .sw__top .mono::after { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .sw__img img, .sw__img video, .sw__img::after, .sw__name, .sw__top .mono::after { transition: none; } }
.cs2-film__play { white-space: nowrap; }
@media (max-width: 600px) { .cs2-film__play { gap: 10px; padding: 8px 16px 8px 8px; font-size: 14px; } .cs2-film__play i { width: 36px; height: 36px; } .cs2-film__play i::after { left: 14px; top: 10px; border-left-width: 12px; border-top-width: 8px; border-bottom-width: 8px; } }
/* 3 Nov (Tom): the film plays by itself now, so the sound button moves to the bottom-left corner instead of covering it */
.cs2-film__play { left: 20px; top: auto; bottom: 20px; transform: none; }
.cs2-film__play:hover { transform: scale(1.04); }
@media (max-width: 600px) { .cs2-film__play { left: 12px; bottom: 12px; } }

/* ---------- 3 Nov (Tom): project page top and opening details, more finish. Same elements, better motion ---------- */
/* sound button: smaller, sits in the corner */
.cs2-film__play { gap: 8px; padding: 5px 14px 5px 5px; font-size: 13px; background: rgba(13,13,14,.62); }
.cs2-film__play i { width: 30px; height: 30px; }
.cs2-film__play i::after { left: 11px; top: 9px; border-left-width: 10px; border-top-width: 6px; border-bottom-width: 6px; }
.cs2-film__play small { font-size: 11px; }
@media (max-width: 600px) { .cs2-film__play { gap: 7px; padding: 4px 12px 4px 4px; font-size: 12px; } .cs2-film__play i { width: 26px; height: 26px; } .cs2-film__play i::after { left: 10px; top: 8px; border-left-width: 9px; border-top-width: 5px; border-bottom-width: 5px; } }
/* the film opens out from the middle, and a soft glow of its own colours fills the space around it */
.cs2-hero .wrap { position: relative; }
.cs2-hero__box--film { z-index: 1; border-radius: 14px; }
.cs2-film__glow { position: absolute; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 1.6s ease .6s;
  -webkit-mask-image: radial-gradient(closest-side, #000 40%, transparent 100%); mask-image: radial-gradient(closest-side, #000 40%, transparent 100%); }
.cs2-film__glow.is-on { opacity: .4; }
@keyframes cs2FilmIn { from { clip-path: inset(16% 24% round 32px); opacity: 0; } 35% { opacity: 1; } to { clip-path: inset(0 round 14px); opacity: 1; } }
@keyframes cs2FilmZoom { from { transform: scale(1.14); } to { transform: none; } }
.cs2-hero__box--film { animation: cs2FilmIn 1.5s cubic-bezier(.16,1,.3,1) .15s both; }
.cs2-hero__box--film .cs2-film__v { animation: cs2FilmZoom 1.8s cubic-bezier(.16,1,.3,1) .15s both; }
.cs2-hero__box--film .cs2-film__play { opacity: 0; animation: cs2Fade .6s ease 1.1s forwards; }
@keyframes cs2Fade { to { opacity: 1; } }
/* the logo, client and industry stay in view while the right side scrolls past */
@media (min-width: 1024px) { .cs2-ov__in { align-items: flex-start; } .cs2-ov__left { position: sticky; top: 104px; } }
/* role chips come in one after another, and lift a little under the pointer */
.cs2-roles li { transition: opacity .5s ease, transform .6s cubic-bezier(.16,1,.3,1), box-shadow .25s ease, background-color .25s ease; }
.cs2-roles.is-wait li { opacity: 0; transform: translateY(12px); }
.cs2-roles.is-wait.is-in li { opacity: 1; transform: none; transition-delay: calc(var(--i, 0) * 70ms + 150ms); }
@media (hover: hover) { .cs2-roles li:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgba(255,236,213,.5); background-color: rgba(255,236,213,.05); transition-delay: 0s; } }
@media (prefers-reduced-motion: reduce) {
  .cs2-hero__box--film, .cs2-hero__box--film .cs2-film__v, .cs2-hero__box--film .cs2-film__play { animation: none; opacity: 1; }
  .cs2-roles.is-wait li { opacity: 1; transform: none; }
}
.cs2-hero__box--film::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255,236,213,.09); pointer-events: none; }
.cs2-hero__box--film .cs2-film__play { z-index: 3; }
/* 3 Nov (Tom): light and shadow on the film. A soft reflection on a dark glossy floor under it, a faint sheen across the top,
   and a light that follows the pointer over it. The colour glow stays, a little softer. With sound on, the button stays (Sound off). */
.cs2-film__glow.is-on { opacity: .32; }
.cs2-film__floor { position: absolute; z-index: 0; pointer-events: none; border-radius: 14px; transform: scaleY(-1); opacity: 0;
  -webkit-mask-image: linear-gradient(to top, #000, transparent 66%), linear-gradient(to right, transparent, #000 14%, #000 86%, transparent); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to top, #000, transparent 66%), linear-gradient(to right, transparent, #000 14%, #000 86%, transparent); mask-composite: intersect; transition: opacity 1.6s ease .9s; }
.cs2-film__floor.is-on { opacity: .22; }
/* sheen: a still gradient (painted once); the pointer light is a small blob moved by transform only */
.cs2-hero__box--film::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit; background: linear-gradient(165deg, rgba(255,255,255,.10), rgba(255,255,255,0) 36%); }
.cs2-film__light { position: absolute; left: -260px; top: -260px; z-index: 2; width: 520px; height: 520px; border-radius: 50%; pointer-events: none; will-change: transform;
  background: radial-gradient(closest-side, rgba(255,255,255,.14), rgba(255,255,255,0)); opacity: 0; transition: opacity .4s ease; }
.cs2-hero__box--film:hover .cs2-film__light { opacity: 1; }
.cs2-hero__box--film.is-playing .cs2-film__play { opacity: 1; pointer-events: auto; }
.cs2-hero__box--film.is-playing .cs2-film__v { object-fit: cover; }
.cs2-hero__box--film.is-sound .cs2-film__play i { background: transparent; box-shadow: inset 0 0 0 1.5px #FFECD5; }
.cs2-hero__box--film.is-sound .cs2-film__play i::after { left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border: 0; border-radius: 2px; background: #FFECD5; }
@media (max-width: 1023px) { .cs2-film__floor { display: none; } }

/* 3 Nov (Tom): the sound button is a small round speaker in the bottom-left corner. Muted: speaker with a cross.
   Sound on: the cross flips away and two waves pulse out. */
.cs2-film__snd { position: absolute; left: 18px; bottom: 18px; z-index: 3; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  display: grid; place-items: center; color: #FFECD5; background: rgba(13,13,14,.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px rgba(255,236,213,.18); cursor: pointer; opacity: 0; animation: cs2Fade .6s ease 1.1s forwards;
  transition: transform .45s cubic-bezier(.16,1,.3,1), background-color .25s ease, box-shadow .25s ease; }
.cs2-film__snd svg { width: 24px; height: 24px; overflow: visible; }
.cs2-film__snd .snd-x { transform-origin: 18.5px 12px; transition: transform .45s cubic-bezier(.34,1.56,.64,1), opacity .25s ease; }
.cs2-film__snd .snd-w path { opacity: 0; transform-origin: 12px 12px; transform: scale(.6); transition: opacity .3s ease, transform .5s cubic-bezier(.34,1.56,.64,1); }
.cs2-film__snd .snd-spk { transform-origin: 8px 12px; transition: transform .35s cubic-bezier(.34,1.56,.64,1); }
.cs2-film__snd:hover { transform: scale(1.08); background: rgba(13,13,14,.75); box-shadow: inset 0 0 0 1px rgba(255,236,213,.4); }
.cs2-film__snd:active .snd-spk { transform: scale(.85); }
.cs2-hero__box--film.is-sound .cs2-film__snd .snd-x { opacity: 0; transform: rotate(90deg) scale(0); }
.cs2-hero__box--film.is-sound .cs2-film__snd .snd-w path { opacity: 1; transform: none; }
.cs2-hero__box--film.is-sound .cs2-film__snd .snd-w .w1 { animation: sndWave 1.6s ease-in-out .5s infinite; }
.cs2-hero__box--film.is-sound .cs2-film__snd .snd-w .w2 { transition-delay: .08s; animation: sndWave 1.6s ease-in-out .7s infinite; }
@keyframes sndWave { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (max-width: 600px) { .cs2-film__snd { left: 10px; bottom: 10px; width: 38px; height: 38px; } .cs2-film__snd svg { width: 19px; height: 19px; } }
@media (prefers-reduced-motion: reduce) { .cs2-film__snd { animation: none; opacity: 1; } .cs2-hero__box--film.is-sound .cs2-film__snd .snd-w path { animation: none; } }

/* 3 Nov (Tom): project opening choreography. Until the headline lands, "Opening", client, awards and role wait; then they come in,
   the small texts with a soft glow that settles */
.cs2-ov__brand, .cs2-ov__lead { will-change: transform; }
.cs2-ov.is-choreo .cs2-ov__lead .cs2-label, .cs2-ov.is-choreo .cs2-ov__meta > div, .cs2-ov.is-choreo .cs2-awd, .cs2-ov.is-choreo .cs2-roles__lbl, .cs2-ov.is-choreo .cs2-roles li {
  opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .7s cubic-bezier(.16,1,.3,1); }
.cs2-ov.is-choreo .cs2-ov__lead .cs2-label { transform: translateY(10px); }
.cs2-ov.is-choreo .cs2-awd { transform: translateY(22px) scale(.97); transform-origin: 0 0; }
.cs2-ov.is-choreo.is-landed .cs2-ov__lead .cs2-label, .cs2-ov.is-choreo.is-landed .cs2-ov__meta > div, .cs2-ov.is-choreo.is-landed .cs2-awd, .cs2-ov.is-choreo.is-landed .cs2-roles__lbl, .cs2-ov.is-choreo.is-landed .cs2-roles li { opacity: 1; transform: none; }
.cs2-ov.is-choreo.is-landed .cs2-ov__lead .cs2-label, .cs2-ov.is-choreo.is-landed .cs2-ov__meta > div { animation: cs2Glow 1.6s ease both; }
@keyframes cs2Glow { 0% { text-shadow: 0 0 16px rgba(255,236,213,.8); } 100% { text-shadow: 0 0 0 rgba(255,236,213,0); } }
.cs2-ov.is-choreo.is-landed .cs2-ov__meta > div:nth-child(1) { transition-delay: .08s; animation-delay: .08s; }
.cs2-ov.is-choreo.is-landed .cs2-ov__meta > div:nth-child(2) { transition-delay: .16s; animation-delay: .16s; }
.cs2-ov.is-choreo.is-landed .cs2-awd { transition-delay: .12s; }
.cs2-ov.is-choreo.is-landed .cs2-roles__lbl { transition-delay: .28s; }
.cs2-ov.is-choreo.is-landed .cs2-roles li { transition-delay: calc(var(--i, 0) * 60ms + .34s); }
.cs2-ov.is-choreo.is-landed .cs2-roles li:hover { transition-delay: 0s; }
.cs2-ov.is-choreo:not(.is-landed) .cs2-awd::after, .cs2-ov.is-choreo:not(.is-landed) .cs2-awd li b { animation-play-state: paused; }

/* 3 Nov (Tom): the reflection is drawn by the browser (sharp, smooth), fading out under the film. Computers only.
   The opening reveal no longer leaves a clip on the box once it has played, so the reflection can show. */
.cs2-film__floor { display: none !important; }
.cs2-hero__box--film { animation-fill-mode: backwards; }
@media (min-width: 1024px) {
  .cs2-hero__box--film { }
}

/* 3 Nov (Tom): Safari leaves videos out of CSS reflections, so the reflection is a canvas again: 320 px wide, redrawn with
   the glow about 30 times a second, mirrored and fading out; nothing on top of the film (the sound button) is reflected */
@media (min-width: 1024px) { .cs2-hero__box--film { -webkit-box-reflect: none; } }
.cs2-film__mirror { position: absolute; z-index: 0; pointer-events: none; border-radius: 14px; transform: scaleY(-1); opacity: 0; transition: opacity 1.4s ease .8s;
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,.95), transparent 85%); mask-image: linear-gradient(to top, rgba(0,0,0,.95), transparent 85%); }
.cs2-film__mirror.is-on { opacity: .3; }
@media (max-width: 1023px) { .cs2-film__mirror { display: none; } }

/* 3 Nov, 5 pm (Tom): the top of a project page is calm again. The picture or film is 80% of the full width, centred,
   in a simple frame. No reveal, zoom, glow, light, sheen or reflection, and the left column no longer sticks. */
.cs2-hero__box, .cs2-hero__box--film { width: 80%; min-width: 0; margin-inline: auto; height: auto; min-height: 0; aspect-ratio: 16 / 9; border-radius: 12px;
  box-shadow: 0 0 0 10px #17171A, 0 0 0 11px rgba(255,236,213,.16), 0 40px 90px -40px rgba(0,0,0,.9); }
.cs2-hero__box img { top: 0; height: 100%; }
.cs2-hero { padding-bottom: 12px; }
.cs2-hero__box--film, .cs2-hero__box--film .cs2-film__v { animation: none !important; }
.cs2-hero__box--film::before, .cs2-film__light, .cs2-film__glow, .cs2-film__mirror { display: none !important; }
.cs2-hero__box--film::after { box-shadow: none; }
@media (min-width: 1024px) { .cs2-ov__left { position: static; } }
@media (max-width: 767px) {
  .cs2-hero__box, .cs2-hero__box--film { width: 100%; border-radius: 8px; box-shadow: 0 0 0 6px #17171A, 0 0 0 7px rgba(255,236,213,.16); }
}

/* 3 Nov, 5 pm (Tom): a picture row can be three side by side (phones: one under another) */
.cs2-show__grid--three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1023px) { .cs2-show__grid--three { grid-template-columns: 1fr; } }

/* 3 Nov, 6 pm (Tom): the reflection is back, under the frame of the picture or film at the top of a project page.
   Computers only; nothing else from the 5 pm calm-down comes back (no glow, light, zoom, glide or scroll stop). */
.cs2-film__mirror { display: block !important; border-radius: 12px; }
.cs2-film__mirror.is-on { opacity: .26; }
@media (max-width: 1023px) { .cs2-film__mirror { display: none !important; } }
.cs2-hero { padding-bottom: 0; }
@media (min-width: 1024px) { .cs2-hero .wrap { padding-bottom: clamp(60px, 7vw, 120px); } }

/* 4 Nov (Yuni, phone): more room above the section labels and under "All work".
   - Home "Type A" and About "Our story" sit 88 px under the opening (was 48), and the section covers anything
     from the opening that runs past its end (on iPhones the opening can run a little long, so the gap looked tiny).
   - "All work" no longer touches the client logo: the tap-area trick had cancelled its bottom margin. */
@media (max-width: 767px) {
  main > section.pos, main > section.story { position: relative; z-index: 2; padding-top: var(--Gp) !important; }
}
@media (max-width: 860px), (pointer: coarse) {
  .cs2-back { margin-bottom: 14px; }
}

/* 4 Nov (phone check): the first thing on every page starts the same distance under the menu bar as on
   Contact (44 px). Capabilities' label was touching the bar, Work's and the project pictures were close to it. */
@media (max-width: 767px) {
  main > section.cap-hero { padding-top: 109px !important; }
  main > section.wk { padding-top: 76px !important; }
  .cs2-hero { padding-top: 120px !important; }
}

/* 4 Nov (Tom): every picture shows in full. Each project picture's box takes the picture's own shape (set when the
   page is built), with no drift or zoom that crops it. Two or three side by side keep one height and share the width
   by shape, so a tall picture next to a wide one is narrower, not cut. Phones stack them, each at its own shape.
   Card pictures (Home, Work, Other projects) are 16:9 like the files. */
.cs2-img--fit, .cs2-ch .cs2-img--fit.cs2-img--wide, .cs2-show__grid--one .cs2-img--fit { aspect-ratio: var(--ar); height: auto; }
.cs2-img--fit img, .cs2-img--fit video, .cs2-img--card img { top: 0; height: 100%; transform: none !important; }
@media (min-width: 768px) {
  .cs2-show__grid:not(.cs2-show__grid--one), .cs2-ch__pair { display: flex; gap: 16px; align-items: flex-start; }
  .cs2-show__grid:not(.cs2-show__grid--one) > .cs2-img--fit, .cs2-ch__pair > .cs2-img--fit { flex: var(--ar) 1 0; min-width: 0; }
}
@media (max-width: 767px) {
  .cs2-show__grid, .cs2-ch__pair { display: grid; grid-template-columns: 1fr; gap: 16px; }
}
.cs2-img--card { aspect-ratio: 16 / 9; }
.sw__img { aspect-ratio: 16 / 9; }
.wk__img, .wk__card--port .wk__img, .wk__card--full .wk__img { aspect-ratio: 16 / 9; }

/* 4 Nov: shown under Send if the enquiry could not be sent */
.ctf__err { flex-basis: 100%; margin: 10px 0 0; font-size: 14px; color: #E5674B; }
.ctf__err:empty { display: none; }
.ctf__btn--send[aria-busy="true"] { opacity: .6; cursor: progress; }

/* 4 Nov: a still row of clips (FairPrice) */
.cs2-clips--still .cs2-clips__track { cursor: auto; }
/* 4 Nov: the other-project cards at the end of a project page play their card video while on screen */
.cs2-img--card video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
/* 4 Nov 2 pm (Tom): a still row of up to 3 clips fills the width on computers, no cropping (9:16),
   capped by screen height so a whole clip is visible at once. Phones keep the swipe row. */
@media (min-width: 761px) {
  .cs2-clips--still .cs2-clips__track { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: calc(3 * 46vh + 32px); overflow: visible; }
  .cs2-clips--still .cs2-clip { flex: none; width: auto; }
}
/* 4 Nov 2:20 pm (Tom): each still clip 20% smaller, same overall width, so the gaps between them are bigger */
@media (min-width: 761px) {
  .cs2-clips--still .cs2-clips__track { grid-template-columns: repeat(3, calc((100% - 32px) / 3 * .8)); justify-content: space-between; }
}
/* 4 Nov 2:27 pm (Tom): the 3 still clips sit closer together (fixed gap), as a centred group */
@media (min-width: 761px) {
  .cs2-clips--still .cs2-clips__track { grid-template-columns: repeat(3, min(calc((100% - 96px) / 3), 36.8vh)); column-gap: 48px; justify-content: center; max-width: none; }
}
/* 4 Nov 3:45 pm (Tom): phones, a still row of clips shows part of the next clip at the screen edge,
   snaps clip by clip, and has dots under it, so it is clear the row can be swiped */
.cs2-clips__dots { display: none; }
@media (max-width: 760px) {
  .cs2-clips--still { margin-right: calc(-1 * clamp(16px, 3vw, 40px)); }
  .cs2-clips--still .cs2-clips__track { scroll-snap-type: x mandatory; padding-right: clamp(16px, 3vw, 40px); scroll-padding-left: 0; }
  .cs2-clips--still .cs2-clip { flex-basis: 38vw; scroll-snap-align: start; }
  .cs2-clips__dots { display: flex; gap: 8px; justify-content: center; margin: 16px 0 0; padding-right: clamp(16px, 3vw, 40px); }
  .cs2-clips__dots i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .3; transition: opacity .3s, transform .3s; }
  .cs2-clips__dots i.is-on { opacity: .9; transform: scale(1.25); }
}
/* 4 Nov 4:40 pm (Kristian): "Our story" in the same format as the intro above it. The label stays at the left;
   the headline and line are centred on the page, with no italics. Phones keep the stacked layout. */
.apeek__lead .it { font-family: inherit; font-style: normal; }
@media (min-width: 861px) {
  .apeek__story { display: block; position: relative; text-align: center; }
  .apeek__story .apeek__lbl { position: absolute; left: 0; top: 48px; }
  .apeek__story .apeek__body { max-width: 760px; margin: 0 auto; }
  .apeek__story .apeek__body p { margin-left: auto; margin-right: auto; }
  .apeek__story .apeek__lead { margin-bottom: 28px; }
}
@media (min-width: 861px) { .apeek__story .apeek__body .apeek__sub { font-size: 18px; font-weight: 500; line-height: 1.5; color: var(--muted); } }

/* Home "Why Type A" cards with a video on top (Kris, 6 Nov: the cards were too plain).
   The icon sits on the bottom edge of the video. Videos: why_videos.py */
.apeek__cards--3 .apeek__card--media { padding: 12px 12px clamp(28px, 2.6vw, 40px); gap: 12px; }
.apeek__media { position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: max(6px, calc(min(var(--r), 16px) - 6px)); overflow: hidden; background: #000; }
.apeek__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.apeek__media + .apeek__ico { position: relative; z-index: 1; margin: -44px 0 0; background: color-mix(in srgb, currentColor 9%, var(--bg-2)); box-shadow: 0 0 0 6px var(--bg-2); }
.apeek__card--media b, .apeek__card--media p { padding-inline: clamp(8px, 1.2vw, 20px); }
@media (max-width: 760px) { .apeek__media + .apeek__ico { margin-top: -40px; } }

/* Menu bottom row (email + Singapore time) in the same type as the footer's "Type A / Singapore 14:52" (Tom, 6 Nov) */
.menu__foot { font-family: var(--sans); font-size: 18px; font-weight: 600; color: var(--inv-ink); letter-spacing: normal; }
.menu__foot .clocks b { font-weight: 600; color: var(--inv-muted); }