/* Saints & Masters — shared site styles.
   Mirrors the homepage recipe (README "Liquid glass recipe" + "Motion system").
   Every inner page loads: DS tokens → this file → site.js. */

:root {
  --ink: #0B0B0C; --paper: #FFFFFF;
  --ember-300: #F3A575; --ember-400: #EE8747; --ember-500: #E86A24; --ember-600: #CB531A; --ember-700: #A44014; --ember-900: #4E1E09;
  --warm-50: #F8F6F4; --warm-200: #E1DAD4; --warm-300: #C4BAB2; --warm-400: #9B918A; --warm-500: #736B65; --warm-600: #544D48; --warm-700: #3A3532; --warm-900: #141312;
  --ease: cubic-bezier(.22,.61,.36,1); --ease-in: cubic-bezier(.16,1,.3,1); --ease-drift: cubic-bezier(.45,0,.55,1);
  --max: clamp(1240px, 90vw, 2000px); --pad: 32px;
  /* Clear liquid glass (web approximation, not Apple's native material): low tint + light blur so the scene
     behind stays readable, with the "glass" carried by edge light — a bright top rim, a faint lower
     refraction glow and a hairline outer bezel. --glass-dense is for panels that carry long text. */
  --glass-bg: linear-gradient(135deg, rgba(255,255,255,.075) 0%, rgba(255,255,255,.018) 42%, rgba(255,255,255,.04) 100%);
  --glass-border: rgba(255,255,255,.14);
  --glass-shadow: inset 0 1px 0 rgba(255,255,255,.42), inset 0 -1px 0 rgba(255,255,255,.05), inset 0 -26px 44px -30px rgba(255,255,255,.14), 0 0 0 5px rgba(255,255,255,.022), 0 22px 56px rgba(0,0,0,.34);
  --glass-blur: blur(9px) saturate(165%) brightness(1.04);
  --glass-dense-bg: linear-gradient(135deg, rgba(34,32,30,.62) 0%, rgba(18,17,16,.5) 100%);
  --glass-dense-blur: blur(18px) saturate(160%);
  --grad-ember: linear-gradient(90deg, #A44014, #E86A24, #F3A575);
}

html, body { margin: 0; padding: 0; background: var(--ink); color: var(--paper); font-family: 'Gellix', system-ui, sans-serif; }
html { color-scheme: dark; -webkit-tap-highlight-color: rgba(232,106,36,.18); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
a, button, [role="button"], input, select, textarea, label { touch-action: manipulation; }
:focus-visible { outline: 2px solid var(--ember-400); outline-offset: 3px; border-radius: 6px; }
.btn:focus-visible, .pill:focus-visible, .sm-nav-link:focus-visible { outline-offset: 4px; border-radius: 999px; }
[id] { scroll-margin-top: 110px; }
h1, h2, h3, .display, .h1, .h2, .h3 { text-wrap: balance; }
p, .lede, .deck, .body { text-wrap: pretty; }
.stat-num, [data-count] { font-variant-numeric: tabular-nums; }
.btn:active, .pill:active, a.card:active { transform: scale(.98); }
.sm-skip { position: fixed; left: 16px; top: -60px; z-index: 10000; padding: 12px 18px; border-radius: 999px; background: var(--ember-500); color: #fff; font-weight: 600; font-size: 14px; transition: top 160ms var(--ease); }
.sm-skip:focus { top: 16px; color: #fff; }
/* static film grain: breaks the flatness of the ink bands; no blend mode so it costs nothing per frame */
.sm-grain { position: fixed; inset: 0; z-index: 9990; pointer-events: none; opacity: .045; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
img.sm-img-missing { visibility: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
mark { background: rgba(232,106,36,.28); color: #fff; border-radius: 4px; padding: 0 .12em; }
body { overflow-x: hidden; -webkit-font-smoothing: antialiased; }
* { box-sizing: border-box; }
img { max-width: 100%; display: block; }
a { color: var(--ember-400); text-decoration: none; }
a:hover { color: var(--ember-300); }
::selection { background: rgba(232,106,36,.4); color: #fff; }
.sm-page { position: relative; overflow-x: clip; min-height: 100vh; }

/* ---------- keyframes (same names as homepage) ---------- */
@keyframes sm-mq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes sm-mq-rev { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@keyframes sm-drift { 0% { transform: translate3d(0,0,0) scale(1); } 33% { transform: translate3d(8vw,-6vh,0) scale(1.15); } 66% { transform: translate3d(-6vw,5vh,0) scale(.9); } 100% { transform: translate3d(0,0,0) scale(1); } }
@keyframes sm-sweep { 0% { transform: translateX(0) skewX(-18deg); } 45% { transform: translateX(422%) skewX(-18deg); } 100% { transform: translateX(422%) skewX(-18deg); } }
@keyframes sm-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -9px; } }
@keyframes sm-live { 0% { box-shadow: 0 0 0 0 rgba(232,106,36,.6); } 100% { box-shadow: 0 0 0 10px rgba(232,106,36,0); } }
@keyframes sm-ring { 0% { transform: scale(1); opacity: .5; } 75% { transform: scale(1.9); opacity: 0; } 100% { transform: scale(1.9); opacity: 0; } }
@keyframes sm-cue { 0% { transform: translateY(0); opacity: .2; } 50% { opacity: 1; } 100% { transform: translateY(14px); opacity: .2; } }
@keyframes sm-spin { to { transform: rotate(360deg); } }

/* ---------- layout ---------- */
.container { position: relative; max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }
/* clip (not hidden) so position:sticky children still stick */
.section { position: relative; padding: 104px 0; overflow: hidden; overflow: clip; }
.section--tight { padding: 72px 0; }
.section--line { border-top: 1px solid rgba(255,255,255,.1); }
.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.grid-auto { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.split { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 64px; align-items: start; }
.split--wide { grid-template-columns: minmax(0,5fr) minmax(0,7fr); }
.sticky { position: sticky; top: 120px; }
.row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.row--between { justify-content: space-between; }
.stack > * + * { margin-top: 16px; }

/* ---------- type ---------- */
.eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ember-400); margin: 0 0 18px; }
.display { margin: 0; font-size: clamp(44px, 7.4vw, 190px); font-weight: 800; letter-spacing: -.04em; line-height: .96; }
.h1 { margin: 0; font-size: clamp(40px, 6vw, 140px); font-weight: 800; letter-spacing: -.035em; line-height: 1; }
.h2 { margin: 0; font-size: clamp(30px, 4vw, 84px); font-weight: 800; letter-spacing: -.03em; line-height: 1.04; }
.h3 { margin: 0; font-size: clamp(20px, 2vw, 28px); font-weight: 800; letter-spacing: -.02em; line-height: 1.12; }
.h4 { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; }
.deck { margin: 0; max-width: 52ch; font-size: 16px; line-height: 1.62; color: var(--warm-400); }
.lede { margin: 0; max-width: 56ch; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.62; color: var(--warm-200); }
.body { margin: 0; font-size: 15px; line-height: 1.62; color: var(--warm-200); }
.muted { color: var(--warm-400); }
.ember { color: var(--ember-500); }
.dim { color: var(--warm-400); }
.outline-text { color: transparent; -webkit-text-stroke: 1.5px var(--warm-500); }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; margin-bottom: 48px; }
.section-head .deck { max-width: 44ch; }
/* headline lines that rise out of a mask. Bottom padding keeps descenders (g, y, p) inside the mask. */
.mask-line { display: block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
.mask-line > span { display: block; transform: translateY(110%); transition: transform 900ms var(--ease-in); }
.is-in .mask-line > span, .mask-line.is-in > span { transform: none; }

/* ---------- glass ---------- */
.glass { position: relative; background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); }
.glass::after { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 1;
  background: linear-gradient(150deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,.08) 28%, rgba(255,255,255,0) 55%, rgba(255,255,255,.08) 80%, rgba(255,255,255,.28) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.glass-dense, .glass.panel, .glass.glass-dense { background: var(--glass-dense-bg); backdrop-filter: var(--glass-dense-blur); -webkit-backdrop-filter: var(--glass-dense-blur); }
@media (prefers-reduced-transparency: reduce) { .glass, .glass-soft, .glass-dense { background: #1B1A19; backdrop-filter: none; -webkit-backdrop-filter: none; } }
.glass-soft { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.14); box-shadow: inset 0 1px 0 rgba(255,255,255,.18); backdrop-filter: blur(8px) saturate(160%); -webkit-backdrop-filter: blur(8px) saturate(160%); }
.glass-light { background: linear-gradient(135deg, rgba(255,255,255,.85), rgba(255,255,255,.45)); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,.9); box-shadow: inset 0 1px 0 #fff, 0 6px 18px rgba(20,19,18,.1); }
.card { position: relative; border-radius: 28px; padding: 30px; overflow: hidden; display: flex; flex-direction: column; gap: 14px; transition: border-color 240ms var(--ease), box-shadow 240ms var(--ease), transform 240ms var(--ease); color: inherit; }
a.card:hover, .card[data-hov]:hover { border-color: var(--ember-300); color: inherit; }
.card--sm { border-radius: 22px; padding: 22px; }
.panel { border-radius: 36px; padding: clamp(28px, 4vw, 56px); overflow: hidden; }
.sheen { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(280px circle at var(--mx,30%) var(--my,0%), rgba(255,255,255,.2) 0%, rgba(255,255,255,0) 62%); opacity: .9; }
.sweep { position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; pointer-events: none; background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.14) 50%, rgba(255,255,255,0) 100%); transform: skewX(-18deg); animation: sm-sweep 7s var(--ease-drift) infinite; }
.ghost-num { position: absolute; right: 14px; top: -12px; font-size: 104px; font-weight: 800; letter-spacing: -.05em; color: rgba(255,255,255,.08); pointer-events: none; line-height: 1.1; }
.card > *:not(.sheen):not(.sweep):not(.ghost-num) { position: relative; }

/* ---------- controls ---------- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 26px; border-radius: 999px; font: 600 15px/1 'Gellix', system-ui, sans-serif; color: #fff; cursor: pointer; border: 1px solid transparent; transition: background 160ms, box-shadow 160ms, border-color 160ms, transform 160ms var(--ease); white-space: nowrap; }
.btn--sm { padding: 11px 20px; font-size: 14px; }
.btn-primary { background: linear-gradient(180deg, rgba(243,165,117,.92) 0%, rgba(232,106,36,.9) 55%, rgba(203,83,26,.92) 100%); backdrop-filter: blur(12px); box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(78,30,9,.3), 0 10px 28px rgba(232,106,36,.3); border-color: rgba(255,255,255,.28); }
.btn-primary:hover { background: var(--ember-600); color: #fff; box-shadow: 0 16px 44px rgba(232,106,36,.5); }
.btn-glass { background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border-color: var(--glass-border); box-shadow: var(--glass-shadow); }
.btn-glass:hover { border-color: rgba(255,255,255,.5); color: #fff; }
.btn .ring { position: absolute; inset: 0; border-radius: 999px; border: 1.5px solid var(--ember-500); animation: sm-ring 2.6s var(--ease) infinite; pointer-events: none; }
.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--ember-400); }
.link-arrow .icon { transition: transform 160ms var(--ease); }
.link-arrow:hover .icon, a:hover .link-arrow .icon { transform: translateX(3px); }
.tag { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--warm-400); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); box-shadow: inset 0 1px 0 rgba(255,255,255,.2); }
.tag--ember { color: var(--ember-300); background: rgba(232,106,36,.12); border-color: rgba(243,165,117,.4); }
.tags { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; font-size: 13px; font-weight: 500; color: #fff; }
.dot { width: 6px; height: 6px; border-radius: 999px; background: var(--ember-500); display: inline-block; flex: 0 0 auto; }
.dot--live { animation: sm-live 1.6s var(--ease) infinite; }
.pills { display: flex; gap: 10px; flex-wrap: wrap; }
.pill { padding: 10px 18px; border-radius: 999px; font: 600 12px/1 'Gellix', system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--warm-400); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); box-shadow: inset 0 1px 0 rgba(255,255,255,.2); backdrop-filter: blur(16px) saturate(170%); -webkit-backdrop-filter: blur(16px) saturate(170%); cursor: pointer; transition: color 240ms, border-color 240ms, background 240ms; }
.pill:hover { color: #fff; border-color: rgba(255,255,255,.4); }
.pill.is-on { color: #fff; border-color: rgba(243,165,117,.7); background: linear-gradient(135deg, rgba(232,106,36,.4), rgba(232,106,36,.14)); }

/* icon tiles — brand line icons rendered as a mask so they take currentColor */
.icon { display: inline-block; width: 20px; height: 20px; background: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; flex: 0 0 auto; }
.icon-tile { width: 58px; height: 58px; border-radius: 18px; background: linear-gradient(160deg, rgba(232,106,36,.35), rgba(232,106,36,.1)); border: 1px solid rgba(243,165,117,.4); box-shadow: inset 0 1px 0 rgba(255,255,255,.35); color: var(--ember-300); display: flex; align-items: center; justify-content: center; }
.icon-tile .icon { width: 28px; height: 28px; }
.icon-btn { width: 44px; height: 44px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; color: #fff; flex: 0 0 auto; transition: border-color 160ms, background 160ms; }

/* forms */
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--warm-400); }
.input { width: 100%; padding: 15px 18px; border-radius: 16px; font: 400 15px/1.4 'Gellix', system-ui, sans-serif; color: #fff; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); box-shadow: inset 0 1px 0 rgba(255,255,255,.12); outline: none; transition: border-color 160ms, background 160ms, box-shadow 160ms; }
.input::placeholder { color: var(--warm-500); }
.input:focus { border-color: rgba(243,165,117,.7); background: rgba(255,255,255,.09); box-shadow: 0 0 0 4px rgba(232,106,36,.14); }
textarea.input { min-height: 140px; resize: vertical; }
select.input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--warm-300) 50%), linear-gradient(135deg, var(--warm-300) 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
select.input option { color: #0B0B0C; }

/* ---------- media / backdrops ---------- */
.backdrop { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.backdrop img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scrim { position: absolute; inset: 0; pointer-events: none; }
/* no CSS blur: the radial gradient is already soft, and a blurred 40vw layer behind glass is expensive to composite (Safari) */
.orb { position: absolute; border-radius: 999px; animation: sm-drift 26s var(--ease-drift) infinite; pointer-events: none; will-change: transform; }
.orb--ember { background: radial-gradient(circle, rgba(232,106,36,.34) 0%, rgba(232,106,36,0) 65%); }
.orb--warm { background: radial-gradient(circle, rgba(225,218,212,.2) 0%, rgba(225,218,212,0) 65%); }
.field-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.media { position: relative; border-radius: 20px; overflow: hidden; background: var(--warm-900); }
.media img { width: 100%; height: 100%; object-fit: cover; }
.media--45 { aspect-ratio: 4/5; } .media--169 { aspect-ratio: 16/9; } .media--43 { aspect-ratio: 4/3; } .media--32 { aspect-ratio: 3/2; }
.logo-white { filter: brightness(0) invert(1); }

/* ---------- page hero (inner pages) ---------- */
.page-hero { position: relative; min-height: 78vh; min-height: 78dvh; display: flex; align-items: flex-end; overflow: hidden; padding: 180px 0 80px; }
.page-hero--short { min-height: 56vh; padding: 170px 0 64px; }
.page-hero .backdrop img { opacity: .42; }
.page-hero .scrim { background: linear-gradient(180deg, rgba(11,11,12,.7) 0%, rgba(11,11,12,.25) 38%, rgba(11,11,12,.92) 82%, #0B0B0C 100%); }
.page-hero .wash { position: absolute; inset: 0; background: linear-gradient(112deg, rgba(164,64,20,.3) 0%, rgba(232,106,36,.08) 40%, rgba(11,11,12,0) 70%); mix-blend-mode: screen; pointer-events: none; }
.page-hero .glow { position: absolute; left: 50%; top: 50%; width: 660px; height: 660px; margin: -330px 0 0 -330px; border-radius: 999px; background: radial-gradient(circle, rgba(232,106,36,.18) 0%, rgba(232,106,36,0) 68%); pointer-events: none; }
.page-hero .container { z-index: 2; width: 100%; }
.page-hero .lede { margin-top: 28px; }
.crumbs { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 26px; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--warm-500); }
.crumbs a { color: var(--warm-300); }
.crumbs a:hover { color: #fff; }
.crumbs .sep { width: 4px; height: 4px; border-radius: 999px; background: var(--warm-600); }
.hero-meta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 34px; }

/* ---------- light band ---------- */
.band-light { position: relative; background: linear-gradient(180deg, #FFFFFF 0%, #F8F6F4 100%); color: var(--ink); }
.band-light .deck, .band-light .muted { color: var(--warm-500); }
.band-light .body { color: var(--warm-600); }
.band-light .eyebrow { color: var(--ember-600); }
.band-light .tag { color: var(--warm-600); background: #fff; border-color: rgba(11,11,12,.1); box-shadow: 0 2px 8px rgba(20,19,18,.06); }
.band-light .card { background: #fff; border: 1px solid rgba(11,11,12,.08); box-shadow: 0 10px 30px rgba(20,19,18,.06); }
.band-light a.card:hover { border-color: var(--ember-500); box-shadow: 0 20px 44px rgba(20,19,18,.12); }
.band-light .rule { border-color: rgba(11,11,12,.1); }
.band-light .input { color: var(--ink); background: #fff; border-color: rgba(11,11,12,.14); box-shadow: none; }
.band-light .outline-text { -webkit-text-stroke-color: var(--warm-300); }
[data-clip] { clip-path: inset(0 6% round 48px); will-change: clip-path; }

/* list rows (work-style) */
.rows { border-top: 1px solid rgba(255,255,255,.12); }
.band-light .rows { border-color: rgba(11,11,12,.1); }
.row-item { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(0,1fr) auto; gap: 32px; align-items: center; padding: 28px 12px; border-bottom: 1px solid rgba(255,255,255,.12); color: inherit; transition: padding 240ms var(--ease), background 240ms var(--ease); }
.band-light .row-item { border-color: rgba(11,11,12,.1); }
.row-item:hover { padding-left: 26px; background: rgba(255,255,255,.04); color: inherit; }
.band-light .row-item:hover { background: var(--warm-50); }

/* stats */
.stat-num { font-size: clamp(48px, 5.6vw, 84px); font-weight: 800; letter-spacing: -.045em; line-height: .95; }
.stat-label { font-size: 15px; line-height: 1.5; color: var(--warm-300); margin-top: 10px; }

/* prose (articles, legal) */
.prose { max-width: 72ch; font-size: 17px; line-height: 1.75; color: var(--warm-200); }
.prose h2 { font-size: clamp(24px, 2.4vw, 34px); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; color: #fff; margin: 56px 0 18px; }
.prose h3 { font-size: 20px; font-weight: 700; color: #fff; margin: 36px 0 12px; }
.prose p { margin: 0 0 20px; }
.prose ul, .prose ol { margin: 0 0 22px; padding-left: 22px; }
.prose li { margin-bottom: 10px; }
.prose li::marker { color: var(--ember-500); }
.prose strong { color: #fff; font-weight: 600; }
.prose a { text-decoration: underline; text-underline-offset: 3px; }
.prose blockquote { margin: 32px 0; padding: 4px 0 4px 24px; border-left: 2px solid var(--ember-500); font-size: 21px; line-height: 1.5; color: #fff; }
.prose table { width: 100%; border-collapse: collapse; margin: 0 0 24px; font-size: 15px; }
.prose th, .prose td { text-align: left; padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,.12); vertical-align: top; }
.prose th { color: #fff; font-weight: 600; }
.toc { display: flex; flex-direction: column; gap: 4px; }
.toc a { padding: 8px 14px; border-radius: 12px; font-size: 14px; color: var(--warm-400); border-left: 2px solid transparent; transition: color 160ms, background 160ms, border-color 160ms; }
.toc a:hover { color: #fff; background: rgba(255,255,255,.05); }
.toc a.is-on { color: #fff; border-left-color: var(--ember-500); background: rgba(232,106,36,.08); }

/* accordion */
.acc { border-top: 1px solid rgba(255,255,255,.12); }
.acc-item { border-bottom: 1px solid rgba(255,255,255,.12); }
.acc-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 4px; background: none; border: 0; color: #fff; font: 700 clamp(17px,1.6vw,22px)/1.25 'Gellix', system-ui, sans-serif; letter-spacing: -.01em; text-align: left; cursor: pointer; }
.acc-btn .plus { position: relative; width: 36px; height: 36px; border-radius: 999px; flex: 0 0 auto; }
.acc-btn .plus::before, .acc-btn .plus::after { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; margin: -.75px 0 0 -6px; background: currentColor; transition: transform 240ms var(--ease); }
.acc-btn .plus::after { transform: rotate(90deg); }
.acc-item.is-open .plus::after { transform: rotate(0); }
.acc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 420ms var(--ease); }
.acc-panel > div { overflow: hidden; }
.acc-item.is-open .acc-panel { grid-template-rows: 1fr; }
.acc-panel .body { padding: 0 4px 26px; max-width: 70ch; }

/* timeline / steps */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; counter-reset: step; }
.step-num { font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--warm-400); }

/* marquee + kinetic */
.marquee { position: relative; overflow: hidden; padding: 20px 0 24px; border-top: 1px solid rgba(255,255,255,.12); border-bottom: 1px solid rgba(255,255,255,.12); }
.marquee-track { display: flex; width: max-content; gap: 64px; padding-right: 64px; animation: sm-mq 40s linear infinite; }
.marquee-track > div { display: flex; gap: 64px; align-items: center; white-space: nowrap; }
.kinetic { position: relative; overflow: hidden; padding: 9vh 0; }
.kin-row { display: flex; gap: 4vw; white-space: nowrap; font-size: clamp(64px, 13vw, 220px); font-weight: 800; letter-spacing: -.045em; line-height: .9; will-change: transform; }
.kin-row + .kin-row { margin-top: 1vh; }
.kin-bg { position: absolute; left: 0; display: flex; gap: 4vw; white-space: nowrap; font-size: clamp(90px, 16vw, 260px); font-weight: 800; letter-spacing: -.045em; line-height: .9; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.07); pointer-events: none; will-change: transform; }

/* reveals — JS sets .is-in when the element enters the viewport */
[data-reveal] { opacity: 0; transition: opacity 700ms var(--ease-in), transform 760ms var(--ease-in); }
[data-reveal="up"], [data-reveal=""] { transform: translateY(24px); }
[data-reveal="flip"] { transform: perspective(900px) rotateX(18deg) translateY(48px); transform-origin: 50% 100%; }
[data-reveal="right"] { transform: translateX(90px); }
[data-reveal="scale"] { transform: scale(.94); }
[data-reveal].is-in { opacity: 1; transform: none; }
[data-bob] { animation: sm-bob 7s var(--ease-drift) infinite; }
[data-tilt] { transition: opacity 700ms var(--ease-in), transform 180ms var(--ease), border-color 240ms, box-shadow 240ms; will-change: transform; }
/* while a tilt card is still revealing, keep the slow entrance transform */
[data-tilt][data-reveal]:not(.is-in) { transition: opacity 700ms var(--ease-in), transform 760ms var(--ease-in); }

/* ---------- fixed chrome ---------- */
.sm-progress { position: fixed; top: 0; left: 0; height: 3px; width: 100%; transform: scaleX(0); transform-origin: 0 50%; background: var(--grad-ember); z-index: 9997; will-change: transform; }

.sm-header { position: fixed; top: 14px; left: 0; right: 0; z-index: 500; padding: 0 20px; pointer-events: none; }
.sm-header-bar { background-color: rgba(14,13,12,.76) !important; backdrop-filter: blur(22px) saturate(170%) !important; -webkit-backdrop-filter: blur(22px) saturate(170%) !important; pointer-events: auto; max-width: calc(var(--max) - 60px); margin: 0 auto; padding: 10px 10px 10px 24px; border-radius: 999px; display: flex; align-items: center; gap: 28px; transition: background 320ms var(--ease), border-color 320ms var(--ease), box-shadow 320ms var(--ease); }
.sm-logo { position: relative; display: block; height: 32px; width: 112px; flex: 0 0 auto; }
.sm-logo img { position: absolute; left: 0; top: 0; height: 32px; width: auto; transition: opacity 320ms var(--ease); }
.sm-logo .logo-dark { opacity: 0; }
.sm-nav { display: flex; gap: 4px; margin-left: auto; align-items: center; }
.sm-nav-item { position: relative; }
.sm-nav-link { display: inline-flex; align-items: center; gap: 6px; padding: 10px 12px; border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--warm-200); background: none; border: 0; cursor: pointer; font-family: inherit; transition: color 160ms, background 160ms; }
.sm-nav-link:hover, .sm-nav-item.is-open > .sm-nav-link { color: #fff; background: rgba(255,255,255,.08); }
/* /mk and /sl: their menu words run longer, so links never wrap and, on the narrowest desktops, the bar tightens to fit them */
.sm-nav-link { white-space: nowrap; }
@media (min-width: 1101px) and (max-width: 1279px) {
  html:not([lang="en"]) .sm-header-bar { gap: 14px; }
  html:not([lang="en"]) .sm-nav-link { padding-inline: 8px; }
}
.sm-nav-link.is-current { color: #fff; }
.sm-nav-link.is-current::after { content: ''; width: 4px; height: 4px; border-radius: 999px; background: var(--ember-500); margin-left: 2px; }
.sm-nav-link .caret { width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); opacity: .6; transition: transform 240ms var(--ease); }
.sm-nav-item.is-open .caret { transform: translateY(1px) rotate(225deg); }
.sm-menu { position: absolute; top: calc(100% + 18px); left: 50%; min-width: 300px; padding: 12px; border-radius: 28px; opacity: 0; visibility: hidden; transform: translate(-50%, -8px); transition: opacity 240ms var(--ease), transform 240ms var(--ease), visibility 0s 240ms; background: linear-gradient(135deg, rgba(34,32,30,.72) 0%, rgba(18,17,16,.66) 100%); backdrop-filter: blur(20px) saturate(170%); -webkit-backdrop-filter: blur(20px) saturate(170%); border: 1px solid rgba(255,255,255,.18); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 30px 70px rgba(0,0,0,.5); }
.sm-menu::before { content: ''; position: absolute; left: 0; right: 0; top: -20px; height: 20px; }
.sm-nav-item.is-open .sm-menu { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity 240ms var(--ease), transform 240ms var(--ease), visibility 0s; }
.sm-menu--wide { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; min-width: 620px; }
.sm-menu-group { font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--warm-500); padding: 12px 14px 6px; grid-column: 1 / -1; }
.sm-menu a { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: 16px; color: #fff; transition: background 160ms; }
.sm-menu a:hover { background: rgba(255,255,255,.08); color: #fff; }
.sm-menu a .icon { width: 18px; height: 18px; margin-top: 1px; color: var(--ember-300); }
.sm-menu a b { display: block; font-size: 14px; font-weight: 600; }
.sm-menu a small { display: block; margin-top: 3px; font-size: 12px; line-height: 1.45; color: var(--warm-400); }

/* header over a light section */
.sm-header.is-light .sm-header-bar { background-color: transparent !important; background: linear-gradient(135deg, rgba(255,255,255,.86) 0%, rgba(255,255,255,.62) 100%); border-color: rgba(11,11,12,.08); box-shadow: inset 0 1px 0 #fff, 0 12px 34px rgba(20,19,18,.12); }
.sm-header.is-light .sm-nav-link { color: var(--warm-600); }
.sm-header.is-light .sm-nav-link:hover, .sm-header.is-light .sm-nav-item.is-open > .sm-nav-link, .sm-header.is-light .sm-nav-link.is-current { color: var(--ink); background: rgba(11,11,12,.05); }
.sm-header.is-light .logo-light { opacity: 0; }
.sm-header.is-light .logo-dark { opacity: 1; }

/* footer */
.sm-footer { position: relative; background: var(--ink); border-top: 1px solid rgba(255,255,255,.1); overflow: hidden; }
.sm-footer-inner { max-width: var(--max); margin: 0 auto; padding: 88px var(--pad) 0; }
.sm-footer-grid { display: grid; grid-template-columns: minmax(0,1.3fr) repeat(4, minmax(0,1fr)); gap: 40px; }
.sm-footer h4 { margin: 0 0 18px; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--warm-500); }
.sm-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.sm-footer ul a { font-size: 14px; color: var(--warm-200); }
.sm-footer ul a:hover { color: #fff; }
.sm-footer-base { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-top: 64px; padding: 26px 0; border-top: 1px solid rgba(255,255,255,.1); font-size: 13px; color: var(--warm-500); }
.sm-footer-base a { color: var(--warm-400); }
.sm-footer-base a:hover { color: #fff; }
.sm-footmark { padding: 0 var(--pad); margin: 0 auto; max-width: 2400px; font-size: clamp(64px, 12.4vw, 300px); font-weight: 800; letter-spacing: -.05em; line-height: .9; white-space: nowrap; text-align: center; background: linear-gradient(180deg, rgba(255,255,255,.2) 0%, rgba(255,255,255,.02) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; will-change: transform; padding-bottom: .14em; margin-bottom: -.04em; }

/* CTA slab */
.cta-slab { text-align: center; }
.cta-slab .h1 { max-width: 16ch; margin: 0 auto; }
.cta-slab .lede { margin: 26px auto 0; }
.cta-slab .row { justify-content: center; margin-top: 40px; }

/* ---------- empty / not-found ---------- */
.notfound { min-height: 70vh; display: flex; align-items: center; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .orb, .sweep, [data-bob], .marquee-track, .btn .ring, .dot--live { animation: none !important; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .mask-line > span { transform: none; transition: none; }
}

/* ---------- motion layer (site/motion.js) ---------- */
/* Cross-document view transitions: the header stays put while the page underneath changes. */
@view-transition { navigation: auto; }
.sm-header { view-transition-name: sm-header; }
::view-transition-old(root) { animation: sm-vt-out 320ms cubic-bezier(.7,0,.84,0) both; }
::view-transition-new(root) { animation: sm-vt-in 620ms cubic-bezier(.16,1,.3,1) both; }
@keyframes sm-vt-out { to { opacity: 0; transform: translateY(-24px) scale(.985); filter: blur(6px); } }
@keyframes sm-vt-in { from { opacity: 0; transform: translateY(36px); filter: blur(8px); } }
@media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } }
.sm-w { display: inline-block; }
.sm-navline { position: fixed; left: 0; right: 0; top: 0; height: 2px; z-index: 9996; background: var(--grad-ember); transform-origin: 0 50%; transform: scaleX(0); opacity: 0; pointer-events: none; }
.btn .btn-island { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin: -8px -14px -8px 4px; border-radius: 999px; background: rgba(255,255,255,.18); box-shadow: inset 0 1px 0 rgba(255,255,255,.4); }
.btn-glass .btn-island { background: rgba(255,255,255,.1); }
.btn .btn-island .icon { width: 15px; height: 15px; }
.band-light .btn-glass .btn-island { background: rgba(11,11,12,.06); }

/* =====================================================================
   MINIMAL SYSTEM (v2) — restraint over decoration.
   Inner pages drop the ambient effects that made every template look alike
   (particle fields, drifting orbs, cursor glow, shine sweeps, ghost numerals,
   outlined background words, kinetic type bands). What stays: type, space,
   one photograph, hairlines, clear glass where it does a job, and motion
   that explains (entrances, reveals, state changes).
   ===================================================================== */
body:not([data-sm-chrome]) .field-canvas,
body:not([data-sm-chrome]) .orb,
body:not([data-sm-chrome]) .sweep,
body:not([data-sm-chrome]) .ghost-num,
body:not([data-sm-chrome]) .kin-bg,
body:not([data-sm-chrome]) [data-kin-bg],
body:not([data-sm-chrome]) .kinetic,
body:not([data-sm-chrome]) .page-hero .glow,
body:not([data-sm-chrome]) .page-hero .wash,
body:not([data-sm-chrome]) [data-hero-glow] { display: none !important; }
body:not([data-sm-chrome]) .sheen { opacity: .45; }

/* ---------- surfaces: every page is ONE theme (no mid-page flips) ---------- */
body[data-surface="paper"] { --surface: #F6F4F1; --surface-2: #FFFFFF; --ink-2: #3A3532; --rule: rgba(11,11,12,.1); background: var(--surface); color: var(--ink); }
body[data-surface="paper"] .sm-page { background: var(--surface); }
body[data-surface="paper"] .eyebrow { color: var(--ember-600); }
body[data-surface="paper"] .deck, body[data-surface="paper"] .muted { color: var(--warm-500); }
body[data-surface="paper"] .lede, body[data-surface="paper"] .body { color: var(--warm-600); }
body[data-surface="paper"] .prose { color: #2B2725; }
body[data-surface="paper"] .prose h2, body[data-surface="paper"] .prose h3, body[data-surface="paper"] .prose strong { color: var(--ink); }
body[data-surface="paper"] .prose th, body[data-surface="paper"] .prose td { border-color: var(--rule); }
body[data-surface="paper"] .prose blockquote { color: var(--ink); }
body[data-surface="paper"] .tag { color: var(--warm-600); background: #fff; border-color: var(--rule); box-shadow: none; }
body[data-surface="paper"] .crumbs { color: var(--warm-500); }
body[data-surface="paper"] .crumbs a { color: var(--warm-600); }
body[data-surface="paper"] .btn-glass { color: var(--ink); background: #fff; border-color: var(--rule); box-shadow: 0 1px 0 rgba(11,11,12,.04); backdrop-filter: none; -webkit-backdrop-filter: none; }
body[data-surface="paper"] .btn-glass:hover { border-color: var(--ink); color: var(--ink); }
body[data-surface="paper"] .input { color: var(--ink); background: #fff; border-color: rgba(11,11,12,.14); box-shadow: none; }
body[data-surface="paper"] .pill { color: var(--warm-600); background: #fff; border-color: var(--rule); box-shadow: none; backdrop-filter: none; }
body[data-surface="paper"] .pill.is-on { color: #fff; background: var(--ink); border-color: var(--ink); }
body[data-surface="paper"] .sm-footer { border-top-color: var(--rule); }
body[data-surface="paper"] ::selection { background: rgba(232,106,36,.25); color: var(--ink); }

/* ---------- shared minimal primitives (families compose these differently) ---------- */
.rule-top { border-top: 1px solid var(--rule, rgba(255,255,255,.12)); }
.rule-list > * { border-top: 1px solid var(--rule, rgba(255,255,255,.12)); }
.rule-list > *:last-child { border-bottom: 1px solid var(--rule, rgba(255,255,255,.12)); }
.meta-label { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--warm-500); }
.num-xl { font-size: clamp(56px, 7vw, 132px); font-weight: 800; letter-spacing: -.05em; line-height: .9; font-variant-numeric: tabular-nums; }
.statement { margin: 0; font-size: clamp(30px, 3.6vw, 64px); font-weight: 700; letter-spacing: -.03em; line-height: 1.08; max-width: 24ch; }
/* machined frame: a hairline shell around media or glass (the "double bezel") */
.frame { padding: 6px; border-radius: 30px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.1); }
.frame > * { border-radius: 24px; overflow: hidden; }
body[data-surface="paper"] .frame { background: rgba(11,11,12,.03); border-color: rgba(11,11,12,.08); }
.grid-12 { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: 24px; }

/* =====================================================================
   CALM SPACING — the owner's note: "the content feels too compacted".
   More air between sections, wider gutters, roomier cards and rows,
   larger body copy with a shorter measure. One idea per viewport.
   ===================================================================== */
:root { --pad: clamp(24px, 4.2vw, 96px); --gap: clamp(28px, 2.8vw, 48px); --gap-row: clamp(40px, 3.6vw, 64px); }
.section { padding: clamp(112px, 9vw, 176px) 0; }
.section--tight { padding: clamp(88px, 7vw, 136px) 0; }
.section-head { margin-bottom: clamp(56px, 5vw, 88px); gap: clamp(32px, 4vw, 72px); }
.section-head .deck, .deck { max-width: 48ch; }
.eyebrow { margin-bottom: 24px; }
.h2 { line-height: 1.06; }
.h2 + .deck, .h2 + .lede, .h1 + .lede, .display + .lede { margin-top: 28px; }
.grid { gap: var(--gap-row) var(--gap); }
.grid-auto { grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.split { gap: clamp(48px, 7vw, 128px); }
.card { padding: clamp(32px, 2.8vw, 48px); gap: 18px; }
.card--sm { padding: clamp(26px, 2.2vw, 36px); }
.panel { padding: clamp(40px, 5vw, 88px); }
.body { font-size: 17px; line-height: 1.7; }
.lede { font-size: clamp(18px, 1.35vw, 21px); line-height: 1.6; max-width: 52ch; }
.deck { font-size: 17px; line-height: 1.65; }
.prose { font-size: 18px; line-height: 1.78; max-width: 66ch; }
.prose p { margin-bottom: 26px; }
.prose h2 { margin: 72px 0 22px; }
.row-item { padding-top: 36px; padding-bottom: 36px; }
.acc-btn { padding: 30px 4px; }
.tags { gap: 10px; }
.field { gap: 10px; }
.page-hero { padding-top: clamp(170px, 14vw, 240px); padding-bottom: clamp(80px, 7vw, 128px); }
.page-hero .lede { margin-top: 32px; }
.hero-meta { margin-top: 44px; }
.cta-slab .row { margin-top: 48px; }
.sm-footer-inner { padding-top: clamp(96px, 8vw, 140px); }
.sm-footer-grid { gap: clamp(40px, 4vw, 72px); }

/* header needs enough body that content scrolling under it never reads through */
.sm-header.is-light .sm-header-bar { background: rgba(255,255,255,.82) !important; }
/* paper pages keep one theme to the very end: the footer turns paper too */
.foot-logo-dark { display: none; }
body[data-surface="paper"] .sm-footer { background: #EDEAE6; color: var(--ink); border-top-color: var(--rule); }
body[data-surface="paper"] .sm-footer .foot-logo-light { display: none; }
body[data-surface="paper"] .sm-footer .foot-logo-dark { display: block; }
body[data-surface="paper"] .sm-footer h4 { color: var(--warm-500); }
body[data-surface="paper"] .sm-footer ul a { color: var(--warm-600); }
body[data-surface="paper"] .sm-footer ul a:hover { color: var(--ink); }
body[data-surface="paper"] .sm-footer .body { color: var(--warm-500); }
body[data-surface="paper"] .sm-footer-base { border-top-color: var(--rule); color: var(--warm-500); }
body[data-surface="paper"] .sm-footer-base a { color: var(--warm-600); }
body[data-surface="paper"] .sm-footmark { background: linear-gradient(180deg, rgba(11,11,12,.16) 0%, rgba(11,11,12,.02) 100%); -webkit-background-clip: text; background-clip: text; }
body[data-surface="paper"] .sm-footer .btn-glass { color: var(--ink); }

/* =====================================================================
   ATELIER (v3) — editorial luxury, after Realevate "By The Sea" and
   Sobha "The Privy Collection": warm paper as the ground, ink only for
   bookend moments, one fine display serif, hairline square controls,
   slow motion. Opt-in per page: <body data-style="atelier">.
   Display serif: Cormorant Garamond (free stand-in for Roslindale /
   TT Ramillas). Brand sans (Gellix) stays for UI and body.
   ===================================================================== */
/* motion and type tokens are used by shared pieces on every page (the homepage is not atelier): without them a
   transition that names var(--a-ease) is dropped whole and the hover snaps instead of easing */
:root { --a-ease: cubic-bezier(.19, 1, .22, 1); --a-sans: 'Gellix', system-ui, sans-serif; }
[data-style="atelier"] {
  --a-paper: #F4F1EC; --a-paper-2: #FBFAF7; --a-ink: #0B0B0C; --a-ink-2: #161514;
  --a-text: #161514; --a-mute: #6E6761; --a-soft: #9A928B; --a-rule: rgba(22,21,20,.14);
  --a-serif: 'Cormorant Garamond', 'Cormorant', Georgia, serif;
  --a-sans: 'Gellix', system-ui, sans-serif;
  --a-wrap: min(1560px, 100% - 2 * clamp(20px, 4.6vw, 88px));
  --a-ease: cubic-bezier(.19, 1, .22, 1);
  background: var(--a-paper); color: var(--a-text);
}
[data-style="atelier"] .sm-page { background: var(--a-paper); }
[data-style="atelier"] ::selection { background: #161514; color: #F4F1EC; }
[data-style="atelier"] a { color: inherit; }
/* retire the dark-glass furniture on atelier pages */
[data-style="atelier"] .sm-grain { opacity: .03; }
[data-style="atelier"] .sm-progress { height: 2px; background: #161514; }

/* ---------- layout ---------- */
.a-wrap { width: var(--a-wrap); margin-inline: auto; position: relative; }
.a-narrow { width: min(760px, 100% - 40px); margin-inline: auto; }
.a-sec { position: relative; padding: clamp(120px, 11vw, 208px) 0; }
.a-sec--tight { padding: clamp(80px, 7vw, 128px) 0; }
.a-center { text-align: center; }
.a-ink { background: var(--a-ink); color: #F4F1EC; }
.a-ink .a-mute, .a-ink .a-label { color: rgba(244,241,236,.6); }
.a-ink .a-rule, .a-ink .a-hair { border-color: rgba(244,241,236,.16); }
.a-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); }
.a-hair { border-top: 1px solid var(--a-rule); }

/* ---------- type ---------- */
.a-display, .a-h1, .a-h2, .a-h3, .a-statement, .a-quote, .a-caps { font-family: var(--a-serif); font-weight: 300; margin: 0; letter-spacing: -.012em; text-wrap: balance; }
.a-display { font-size: clamp(64px, 10.4vw, 220px); line-height: .9; letter-spacing: -.03em; }
.a-h1 { font-size: clamp(52px, 7vw, 150px); line-height: .94; letter-spacing: -.025em; }
.a-h2 { font-size: clamp(42px, 5vw, 104px); line-height: .98; letter-spacing: -.02em; }
.a-h3 { font-size: clamp(28px, 2.4vw, 44px); line-height: 1.05; }
.a-caps { text-transform: uppercase; letter-spacing: .01em; font-size: clamp(34px, 3.9vw, 78px); line-height: 1.02; }
.a-statement { font-size: clamp(28px, 2.7vw, 54px); line-height: 1.14; letter-spacing: -.01em; }
.a-quote { font-size: clamp(34px, 3.6vw, 72px); line-height: 1.04; letter-spacing: -.02em; }
.a-it, .a-display em, .a-h1 em, .a-h2 em, .a-caps em, .a-statement em, .a-quote em { font-style: italic; font-weight: 300; }
.a-caps em { text-transform: none; font-size: 1.12em; letter-spacing: -.01em; }
.a-label { font-family: var(--a-sans); font-size: 11px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--a-mute); margin: 0; }
.a-lede { font-family: var(--a-sans); font-size: clamp(17px, 1.25vw, 20px); line-height: 1.62; color: var(--a-text); margin: 0; max-width: 42ch; }
.a-body { font-family: var(--a-sans); font-size: 16px; line-height: 1.75; color: var(--a-mute); margin: 0; max-width: 46ch; }
.a-ink .a-lede { color: #F4F1EC; } .a-ink .a-body { color: rgba(244,241,236,.66); }
.a-num { font-family: var(--a-serif); font-weight: 300; font-size: clamp(64px, 7vw, 140px); line-height: .9; letter-spacing: -.03em; font-variant-numeric: lining-nums tabular-nums; }
.a-cite { font-family: var(--a-sans); font-size: 12px; line-height: 1.6; color: var(--a-mute); margin-top: 32px; }
.a-cite b { display: block; color: var(--a-text); font-weight: 600; }
/* existing class names adopt the atelier voice so converted templates need less rework */
[data-style="atelier"] .display, [data-style="atelier"] .h1, [data-style="atelier"] .h2, [data-style="atelier"] .statement { font-family: var(--a-serif); font-weight: 300; letter-spacing: -.02em; }
[data-style="atelier"] .display { line-height: .92; } [data-style="atelier"] .h1 { line-height: .96; } [data-style="atelier"] .h2 { line-height: 1; }
[data-style="atelier"] .eyebrow { font-size: 11px; letter-spacing: .22em; color: var(--a-mute); }
[data-style="atelier"] .ember { color: inherit; font-style: italic; }

/* ---------- controls: hairline, square, quiet ---------- */
.a-btn { display: inline-flex; align-items: center; gap: 14px; padding: 15px 22px; border: 1px solid currentColor; border-radius: 0; background: transparent; color: inherit; font: 600 11px/1 var(--a-sans); letter-spacing: .2em; text-transform: uppercase; cursor: pointer; transition: background .5s var(--a-ease), color .5s var(--a-ease), border-color .5s var(--a-ease); white-space: nowrap; text-decoration: none; }
.a-btn:hover { background: var(--a-text); color: var(--a-paper); border-color: var(--a-text); }
.a-ink .a-btn:hover { background: #F4F1EC; color: #0B0B0C; border-color: #F4F1EC; }
.a-btn--solid { background: var(--a-text); color: var(--a-paper); border-color: var(--a-text); }
.a-btn--solid:hover { background: transparent; color: var(--a-text); }
.a-ink .a-btn--solid { background: #F4F1EC; color: #0B0B0C; border-color: #F4F1EC; }
.a-btn .a-arrow { display: inline-block; width: 16px; height: 1px; background: currentColor; position: relative; transition: width .5s var(--a-ease); }
.a-btn .a-arrow::after { content: ''; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }
.a-btn:hover .a-arrow { width: 26px; }
.a-link { display: inline-flex; align-items: center; gap: 12px; padding-bottom: 6px; border-bottom: 1px solid currentColor; font: 600 11px/1 var(--a-sans); letter-spacing: .2em; text-transform: uppercase; color: inherit; text-decoration: none; }
.a-link:hover { color: inherit; opacity: .6; }
[data-style="atelier"] .btn { border-radius: 0; background: transparent; box-shadow: none; border: 1px solid currentColor; color: inherit; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; backdrop-filter: none; -webkit-backdrop-filter: none; }
[data-style="atelier"] .btn-primary { background: var(--a-text); color: var(--a-paper); border-color: var(--a-text); }
[data-style="atelier"] .btn-primary:hover { background: transparent; color: var(--a-text); box-shadow: none; }
[data-style="atelier"] .btn .ring, [data-style="atelier"] .btn-island { display: none; }
[data-style="atelier"] .tag, [data-style="atelier"] .pill { border-radius: 0; }

/* ---------- media ---------- */
.a-img { position: relative; overflow: hidden; background: #E4DFD8; }
.a-img > img, .a-img > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* only media that moves with the scroll keeps its own GPU layer; entrance animations get one automatically while they run */
[data-a-par] { will-change: transform; }
.a-img--45 { aspect-ratio: 4 / 5; } .a-img--34 { aspect-ratio: 3 / 4; } .a-img--169 { aspect-ratio: 16 / 9; } .a-img--11 { aspect-ratio: 1; } .a-img--32 { aspect-ratio: 3 / 2; } .a-img--219 { aspect-ratio: 21 / 9; }
.a-ink .a-img { background: #1D1C1B; }
.a-caption { margin-top: 14px; font: 500 12px/1.5 var(--a-sans); color: var(--a-mute); }

/* hero: giant marquee word behind a small image that grows to full-bleed as you scroll */
.a-hero { position: relative; height: 240vh; background: var(--a-ink); color: #F4F1EC; }
.a-hero__stick { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden; display: grid; place-items: center; }
.a-hero__mq { position: absolute; top: 50%; left: 0; margin-top: -.52em; white-space: nowrap; font-family: var(--a-serif); font-weight: 300; font-size: clamp(120px, 17vw, 340px); line-height: 1; letter-spacing: -.035em; will-change: transform; pointer-events: none; }
.a-hero__mq span { padding-right: .35em; }
/* the image fills the viewport; motion.js grows its clip window from a centred square to full-bleed */
.a-hero__img { position: absolute; inset: 0; z-index: 1; overflow: hidden; will-change: clip-path; clip-path: inset(calc(50% - min(11vw, 180px)) calc(50% - min(11vw, 180px))); }
.a-hero__img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.35); transform-origin: 50% 50%; }
.a-hero__img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,11,12,.18), rgba(11,11,12,0) 30%, rgba(11,11,12,.35)); pointer-events: none; }
.a-hero__foot { position: absolute; z-index: 2; left: 0; right: 0; bottom: clamp(28px, 4vw, 56px); display: grid; justify-items: center; gap: 22px; text-align: center; }
.a-hero__foot p { margin: 0; font: 400 clamp(15px, 1.1vw, 18px)/1.55 var(--a-sans); max-width: 40ch; color: rgba(244,241,236,.9); }
.a-tagline { display: inline-block; padding: 7px 12px; border: 1px solid rgba(244,241,236,.5); font: 600 10px/1 var(--a-sans); letter-spacing: .24em; text-transform: uppercase; }

/* triptych: a tall centre image with two side images that part as it arrives */
.a-tri { display: grid; grid-template-columns: 1fr 1.55fr 1fr; gap: clamp(12px, 1.6vw, 28px); align-items: end; }
.a-tri .a-img:nth-child(2) { aspect-ratio: 4 / 5; }
.a-tri .a-img:not(:nth-child(2)) { aspect-ratio: 4 / 5; margin-bottom: 12%; }

/* offset pairs: small image + short text, placed off-grid */
.a-pairs { display: grid; gap: clamp(96px, 10vw, 180px); }
.a-pair { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: clamp(16px, 2vw, 32px); align-items: center; }
.a-pair .a-img { grid-column: span 3; aspect-ratio: 3 / 4; }
.a-pair .a-pair__text { grid-column: span 4; }
.a-pair:nth-child(odd) .a-img { grid-column: 2 / span 3; } .a-pair:nth-child(odd) .a-pair__text { grid-column: 6 / span 4; }
.a-pair:nth-child(even) .a-img { grid-column: 9 / span 3; grid-row: 1; } .a-pair:nth-child(even) .a-pair__text { grid-column: 4 / span 4; grid-row: 1; text-align: right; justify-self: end; }
.a-pair h3 { font-family: var(--a-serif); font-weight: 300; font-size: clamp(34px, 3.2vw, 60px); line-height: 1; letter-spacing: -.02em; margin: 0 0 18px; }

/* index list: big serif rows with hairlines (practices, roles, partners) */
.a-index { border-top: 1px solid var(--a-rule); }
.a-index > a, .a-index > div { display: grid; grid-template-columns: 80px minmax(0, 1fr) minmax(0, .9fr) 60px; align-items: baseline; gap: clamp(16px, 2vw, 32px); padding: clamp(26px, 2.6vw, 42px) 0; border-bottom: 1px solid var(--a-rule); color: inherit; text-decoration: none; transition: padding .6s var(--a-ease), opacity .4s; }
.a-index > a:hover { padding-left: 18px; }
.a-index .n { font: 500 12px/1 var(--a-sans); letter-spacing: .16em; color: var(--a-mute); }
.a-index .t { font-family: var(--a-serif); font-weight: 300; font-size: clamp(32px, 3.4vw, 64px); line-height: 1; letter-spacing: -.02em; }
.a-index .d { font: 400 15px/1.6 var(--a-sans); color: var(--a-mute); }
.a-index .go { justify-self: end; width: 26px; height: 1px; background: currentColor; position: relative; }
.a-index .go::after { content: ''; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }
.a-ink .a-index, .a-ink .a-index > a, .a-ink .a-index > div { border-color: rgba(244,241,236,.16); }

/* figures row */
.a-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); border-top: 1px solid var(--a-rule); }
.a-figures > div { padding: clamp(28px, 3vw, 48px) clamp(12px, 2vw, 32px) 0 0; }
.a-figures > div + div { border-left: 1px solid var(--a-rule); padding-left: clamp(16px, 2vw, 32px); }
.a-figures .a-body { margin-top: 14px; }

/* next-page peek (end of every page) */
.a-next { position: relative; display: block; min-height: 72vh; overflow: hidden; color: #F4F1EC; text-decoration: none; background: #0B0B0C; }
.a-next .a-img { position: absolute; inset: 0; background: #0B0B0C; }
.a-next .a-img img { opacity: .62; transition: transform 1.6s var(--a-ease), opacity .8s; }
.a-next:hover .a-img img { transform: scale(1.04); opacity: .75; }
.a-next__in { position: relative; z-index: 1; min-height: 72vh; display: grid; place-items: center; align-content: center; gap: 22px; text-align: center; padding: 80px 20px; }
.a-next__in .a-tagline { border-color: rgba(244,241,236,.6); border-radius: 999px; padding: 8px 14px; }

/* ---------- header: bare, three-part ---------- */
[data-style="atelier"] .sm-header { top: 0; padding: 0; }
.a-head { position: relative; z-index: 1; pointer-events: auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 84px; width: var(--a-wrap); margin: 0 auto; color: var(--a-text); transition: color .5s var(--a-ease); }
.a-head__bg { position: absolute; inset: 0; background: rgba(244,241,236,.9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--a-rule); opacity: 0; transition: opacity .5s var(--a-ease), background .5s; pointer-events: none; }
.sm-header.is-scrolled .a-head__bg { opacity: 1; }
.sm-header.on-ink .a-head { color: #F4F1EC; }
.sm-header.on-ink .a-head__bg { background: rgba(11,11,12,.72); border-bottom-color: rgba(244,241,236,.1); }
.a-menu-btn { justify-self: start; display: inline-flex; align-items: center; gap: 14px; background: none; border: 0; color: inherit; padding: 10px 0; font: 600 11px/1 var(--a-sans); letter-spacing: .22em; text-transform: uppercase; cursor: pointer; }
.a-menu-btn i { position: relative; width: 26px; height: 7px; border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; transition: transform .6s var(--a-ease); }
.a-head .a-logo { justify-self: center; display: block; height: 30px; position: relative; }
.a-head .a-logo img { height: 30px; width: auto; transition: opacity .5s; }
.a-head .a-logo .l-light { position: absolute; left: 0; top: 0; opacity: 0; }
.sm-header.on-ink .a-logo .l-light { opacity: 1; } .sm-header.on-ink .a-logo .l-dark { opacity: 0; }
.a-head__right { justify-self: end; display: flex; align-items: center; gap: 28px; }
.a-head__right .a-quiet { font: 600 11px/1 var(--a-sans); letter-spacing: .22em; text-transform: uppercase; color: inherit; text-decoration: none; }
.a-head .a-btn { padding: 13px 18px; }
.sm-header.on-ink .a-head .a-btn:hover { background: #F4F1EC; color: #0B0B0C; }

/* full-screen menu */
.a-menu { position: fixed; inset: 0; z-index: 600; background: #0B0B0C; color: #F4F1EC; display: grid; grid-template-rows: 84px 1fr auto; visibility: hidden; clip-path: inset(0 0 100% 0); transition: clip-path .9s var(--a-ease), visibility 0s .9s; }
.a-menu.is-open { visibility: visible; clip-path: inset(0 0 0% 0); transition: clip-path .9s var(--a-ease), visibility 0s; }
.a-menu__top { width: var(--a-wrap); margin: 0 auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.a-menu__top .a-menu-btn i { border-bottom: 0; height: 1px; transform: rotate(-8deg); }
.a-menu__body { width: var(--a-wrap); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 80px); align-content: center; padding: 40px 0; }
.a-menu__main a { display: block; overflow: hidden; font-family: var(--a-serif); font-weight: 300; font-size: clamp(44px, 5.4vw, 104px); line-height: 1.02; letter-spacing: -.025em; color: #F4F1EC; text-decoration: none; }
.a-menu__main a span { display: inline-block; transform: translateY(105%); transition: transform 1s var(--a-ease); }
.a-menu.is-open .a-menu__main a span { transform: none; }
.a-menu__main a:hover { font-style: italic; }
.a-menu__col h4 { margin: 0 0 22px; font: 600 11px/1 var(--a-sans); letter-spacing: .22em; text-transform: uppercase; color: rgba(244,241,236,.5); }
.a-menu__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.a-menu__col a { font: 400 16px/1.4 var(--a-sans); color: rgba(244,241,236,.86); text-decoration: none; }
.a-menu__col a:hover { color: #fff; }
.a-menu__foot { width: var(--a-wrap); margin: 0 auto; padding: 28px 0; display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; border-top: 1px solid rgba(244,241,236,.14); font: 500 12px/1.5 var(--a-sans); color: rgba(244,241,236,.6); }
.a-menu__foot a { color: inherit; }
html.a-menu-open { overflow: hidden; }

/* ---------- footer ---------- */
[data-style="atelier"] .sm-footer { background: var(--a-ink); color: #F4F1EC; border-top: 0; }
[data-style="atelier"] .sm-footer h4 { color: rgba(244,241,236,.46); font-size: 11px; letter-spacing: .22em; }
[data-style="atelier"] .sm-footer ul a { color: rgba(244,241,236,.82); }
[data-style="atelier"] .sm-footmark { font-family: var(--a-serif); font-weight: 300; letter-spacing: -.035em; background: none; color: rgba(244,241,236,.09); -webkit-background-clip: initial; background-clip: initial; }
[data-style="atelier"] .sm-footer .btn-glass { border-color: rgba(244,241,236,.4); color: #F4F1EC; background: transparent; }


/* ---------- smooth scroll (Lenis) ---------- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* ---------- reveals ---------- */
[data-a-rise] { overflow: hidden; }
[data-a-rise] > * { display: block; }
.a-line { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.a-line > span { display: inline-block; will-change: transform; }

@media (max-width: 900px) {
  .a-tri { grid-template-columns: 1fr; } .a-tri .a-img:not(:nth-child(2)) { display: none; }
  .a-pair .a-img, .a-pair .a-pair__text, .a-pair:nth-child(n) .a-img, .a-pair:nth-child(n) .a-pair__text { grid-column: 1 / -1; grid-row: auto; text-align: left; justify-self: start; }
  .a-index > a, .a-index > div { grid-template-columns: 40px minmax(0,1fr) 30px; } .a-index .d { display: none; }
  .a-menu__body { grid-template-columns: 1fr; } .a-head__right .a-quiet { display: none; }
}
@media (prefers-reduced-motion: reduce) { .a-menu, .a-menu__main a span { transition: none; } }

html:has(body[data-style="atelier"]) { color-scheme: light; }
/* ---------- atelier forms: underline fields, no boxes ---------- */
.a-form { display: grid; gap: 34px; }
.a-field { display: grid; gap: 10px; }
.a-field label { font: 600 11px/1 var(--a-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--a-mute); }
.a-input { width: 100%; padding: 12px 0 14px; border: 0; border-bottom: 1px solid var(--a-rule); border-radius: 0; background: transparent; color: var(--a-text); font: 400 18px/1.4 var(--a-sans); outline: none; transition: border-color .4s var(--a-ease); }
.a-input::placeholder { color: var(--a-soft); }
.a-input:focus { border-bottom-color: var(--a-text); }
textarea.a-input { min-height: 132px; resize: vertical; }
select.a-input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 12px) 55%, calc(100% - 6px) 55%; background-size: 6px 6px; background-repeat: no-repeat; }
.a-field.is-bad .a-input { border-bottom-color: #B3261E; }
.a-err { font: 500 13px/1.4 var(--a-sans); color: #B3261E; }
.a-ink .a-input { color: #F4F1EC; border-bottom-color: rgba(244,241,236,.24); } .a-ink .a-input:focus { border-bottom-color: #F4F1EC; }
.a-tabs { display: flex; gap: clamp(20px, 2.4vw, 40px); flex-wrap: wrap; border-bottom: 1px solid var(--a-rule); }
.a-tabs button, .a-tabs a { background: none; border: 0; padding: 0 0 18px; margin-bottom: -1px; border-bottom: 1px solid transparent; color: var(--a-mute); font: 600 11px/1 var(--a-sans); letter-spacing: .2em; text-transform: uppercase; cursor: pointer; text-decoration: none; transition: color .4s, border-color .4s; }
.a-tabs button:hover, .a-tabs a:hover { color: var(--a-text); }
.a-tabs .is-on, .a-tabs [aria-selected="true"] { color: var(--a-text); border-bottom-color: var(--a-text); }
.a-prose { font: 400 18px/1.8 var(--a-sans); color: #3A3532; max-width: 66ch; }
.a-prose h2 { font-family: var(--a-serif); font-weight: 300; font-size: clamp(32px, 2.8vw, 48px); line-height: 1.08; letter-spacing: -.015em; color: var(--a-text); margin: 72px 0 22px; }
.a-prose h3 { font-family: var(--a-serif); font-weight: 400; font-size: 26px; line-height: 1.2; color: var(--a-text); margin: 44px 0 14px; }
.a-prose p { margin: 0 0 24px; } .a-prose ul, .a-prose ol { margin: 0 0 26px; padding-left: 22px; } .a-prose li { margin-bottom: 10px; }
.a-prose blockquote { margin: 48px 0; padding: 0; border: 0; font-family: var(--a-serif); font-weight: 300; font-style: italic; font-size: clamp(28px, 2.4vw, 40px); line-height: 1.2; color: var(--a-text); }
.a-prose a { text-decoration: underline; text-underline-offset: 4px; }
.a-prose table { width: 100%; border-collapse: collapse; margin: 0 0 28px; font-size: 15px; } .a-prose th, .a-prose td { text-align: left; padding: 14px 12px 14px 0; border-bottom: 1px solid var(--a-rule); vertical-align: top; } .a-prose th { font-weight: 600; color: var(--a-text); }

/* =====================================================================
   ATELIER, corrected for a technology firm. The references were a
   source of craft (space, scale, scroll-led reveals, hairlines, bookend
   rhythm), not of a luxury-interiors look. So: the brand's own Gellix
   for display, set bold and tight; neutral paper instead of beige;
   headings in sentence case; the accent word is a quieter second tone,
   never an italic flourish; ember returns as a small, precise accent.
   ===================================================================== */
[data-style="atelier"] {
  --a-paper: #F5F5F3; --a-paper-2: #FFFFFF; --a-text: #0E0E0F; --a-mute: #5F5F63; --a-soft: #9A9AA0; --a-rule: rgba(14,14,15,.12);
  --a-serif: 'Gellix', system-ui, sans-serif;           /* one family: display and UI share Gellix */
  --a-accent: #E86A24;
}
[data-style="atelier"] ::selection { background: #0E0E0F; color: #F5F5F3; }
.a-display, .a-h1, .a-h2, .a-h3, .a-statement, .a-quote, .a-caps { font-family: var(--a-serif); }
.a-display { font-weight: 700; letter-spacing: -.055em; line-height: .88; }
.a-h1 { font-weight: 700; letter-spacing: -.048em; line-height: .94; }
.a-h2 { font-weight: 600; letter-spacing: -.04em; line-height: 1; }
.a-h3 { font-weight: 600; letter-spacing: -.025em; }
.a-statement { font-weight: 500; letter-spacing: -.03em; line-height: 1.12; }
.a-quote { font-weight: 600; letter-spacing: -.04em; line-height: 1.02; }
/* .a-caps is now a large sentence-case statement (uppercase display reads as luxury branding) */
.a-caps { text-transform: none; font-weight: 600; letter-spacing: -.04em; line-height: 1.02; }
.a-num { font-family: var(--a-serif); font-weight: 600; letter-spacing: -.05em; }
/* accent phrase: a second, quieter tone of the same weight */
.a-it, .a-display em, .a-h1 em, .a-h2 em, .a-h3 em, .a-caps em, .a-statement em, .a-quote em, .a-prose blockquote em { font-style: normal; font-weight: inherit; color: var(--a-soft); }
.a-caps em { font-size: 1em; letter-spacing: inherit; }
.a-ink .a-display em, .a-ink .a-h1 em, .a-ink .a-h2 em, .a-ink .a-caps em, .a-ink .a-statement em, .a-ink .a-quote em { color: rgba(245,245,243,.45); }
.a-hero__mq { font-family: var(--a-serif); font-weight: 700; letter-spacing: -.06em; }
.a-pair h3, .a-index .t, .h-work h3, .h-journal h3, .a-menu__main a { font-family: var(--a-serif); font-weight: 600; letter-spacing: -.035em; }
.a-index .t { font-size: clamp(28px, 2.8vw, 52px); }
.a-menu__main a:hover { font-style: normal; color: var(--a-accent); }
.a-prose h2, .a-prose h3 { font-family: var(--a-serif); font-weight: 600; letter-spacing: -.03em; }
.a-prose blockquote { font-style: normal; font-weight: 600; letter-spacing: -.03em; border-left: 2px solid var(--a-accent); padding-left: 28px; }
[data-style="atelier"] .display, [data-style="atelier"] .h1, [data-style="atelier"] .h2, [data-style="atelier"] .statement { font-family: var(--a-serif); font-weight: 700; letter-spacing: -.045em; }
[data-style="atelier"] .ember { color: var(--a-accent); font-style: normal; }
/* ember: small and precise, never a fill */
.a-label { color: var(--a-mute); }
.a-label.is-accent, .a-accent { color: var(--a-accent); }
.a-link:hover { opacity: 1; color: var(--a-accent); }
.a-tabs .is-on, .a-tabs [aria-selected="true"] { border-bottom-color: var(--a-accent); }
.a-index > a:hover .t { color: var(--a-accent); }
.a-input:focus { border-bottom-color: var(--a-accent); }
[data-style="atelier"] .sm-progress { background: var(--a-accent); }
.a-btn .a-arrow { background: currentColor; }
.a-btn--solid:hover { background: var(--a-accent); border-color: var(--a-accent); color: #fff; }
.a-ink .a-btn--solid:hover { background: var(--a-accent); border-color: var(--a-accent); color: #fff; }
.a-tagline { border-radius: 0; }

/* =====================================================================
   CINEMA (v4) — dark cinematic everywhere, matching the homepage.
   The owner chose the dark, glass, ember language of the homepage for
   every page, keeping the calmer spacing. Pages keep their structure
   (still marked data-style="atelier"); this block re-skins them:
   ink ground, warm light text, grey second tone, ember eyebrows and
   primary buttons, clear glass on key surfaces, rounded media, and a
   cinematic hero (photo + scrim + ember wash + field + cursor glow)
   injected by site.js. Loaded last, so it wins.
   ===================================================================== */
[data-style="atelier"] {
  --a-paper: #0B0B0C; --a-paper-2: #141312; --a-ink: #0B0B0C; --a-ink-2: #141312;
  --a-text: #F5F3F0; --a-mute: #B8AFA8; --a-soft: #8A817B; --a-rule: rgba(255,255,255,.12);
  --a-accent: #E86A24;
  color-scheme: dark; background: #0B0B0C; color: var(--a-text);
}
html:has(body[data-style="atelier"]) { color-scheme: dark; background: #0B0B0C; }
[data-style="atelier"] .sm-page { background: #0B0B0C; }
[data-style="atelier"] ::selection { background: rgba(232,106,36,.4); color: #fff; }
/* ink bookends become a subtly lifted band so they still read as a moment */
.a-ink { background: linear-gradient(180deg, #0B0B0C 0%, #121110 100%); color: var(--a-text); border-top: 1px solid rgba(255,255,255,.08); }
/* type: ember eyebrows, grey second tone (the homepage's two-tone headlines) */
.a-label { color: var(--a-accent); font-size: 12px; letter-spacing: .16em; }
.a-display em, .a-h1 em, .a-h2 em, .a-h3 em, .a-caps em, .a-statement em, .a-quote em, .a-ink .a-display em, .a-ink .a-h1 em, .a-ink .a-h2 em, .a-ink .a-caps em, .a-ink .a-statement em, .a-ink .a-quote em { color: #9B918A; }
.a-body { color: var(--a-mute); } .a-lede { color: #E1DAD4; } .a-ink .a-body { color: var(--a-mute); }
.a-cite b { color: var(--a-text); }
.a-prose { color: #D6CFC9; } .a-prose h2, .a-prose h3, .a-prose th { color: #fff; } .a-prose blockquote { color: #fff; }
/* controls: the homepage recipe (ember primary, glass secondary, pills) */
.a-btn { border-radius: 999px; padding: 15px 26px; border: 1px solid rgba(255,255,255,.2); background: linear-gradient(135deg, rgba(255,255,255,.075) 0%, rgba(255,255,255,.018) 42%, rgba(255,255,255,.04) 100%); backdrop-filter: blur(9px) saturate(165%); -webkit-backdrop-filter: blur(9px) saturate(165%); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 18px 44px rgba(0,0,0,.3); color: #fff; font: 600 14px/1 var(--a-sans); letter-spacing: 0; text-transform: none; }
.a-btn:hover, .a-ink .a-btn:hover { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.5); }
.a-btn--solid, .a-ink .a-btn--solid { border-color: rgba(255,255,255,.28); background: linear-gradient(180deg, rgba(243,165,117,.92) 0%, rgba(232,106,36,.9) 55%, rgba(203,83,26,.92) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(78,30,9,.3), 0 10px 28px rgba(232,106,36,.3); color: #fff; }
.a-btn--solid:hover, .a-ink .a-btn--solid:hover { background: #CB531A; border-color: rgba(255,255,255,.28); color: #fff; box-shadow: 0 16px 44px rgba(232,106,36,.5); }
.a-link { color: var(--a-accent); border-bottom-color: rgba(232,106,36,.45); font-size: 12px; letter-spacing: .14em; }
.a-link:hover { color: #F3A575; border-bottom-color: #F3A575; }
.a-tabs { border-bottom-color: rgba(255,255,255,.12); }
.a-tabs button, .a-tabs a { color: #9B918A; } .a-tabs button:hover, .a-tabs a:hover, .a-tabs .is-on, .a-tabs [aria-selected="true"] { color: #fff; }
.a-tagline { border-color: rgba(255,255,255,.3); border-radius: 999px; padding: 8px 14px; }
[data-style="atelier"] .tag, [data-style="atelier"] .pill { border-radius: 999px; }
/* media: rounded like the homepage, dark ground while loading */
.a-img { border-radius: 20px; background: #141312; }
.a-next .a-img, .a-hero__img { border-radius: 0; }
.a-caption { color: #9B918A; }
/* key surfaces get the clear glass */
.a-figures { border-top: 0; gap: clamp(20px, 2vw, 32px); }
.a-figures > div, .a-figures > div + div { position: relative; padding: clamp(28px, 2.6vw, 44px); border: 1px solid rgba(255,255,255,.14); border-radius: 28px; background: linear-gradient(135deg, rgba(255,255,255,.075) 0%, rgba(255,255,255,.018) 42%, rgba(255,255,255,.04) 100%); backdrop-filter: blur(9px) saturate(165%) brightness(1.04); -webkit-backdrop-filter: blur(9px) saturate(165%) brightness(1.04); box-shadow: inset 0 1px 0 rgba(255,255,255,.42), inset 0 -26px 44px -30px rgba(255,255,255,.14), 0 22px 56px rgba(0,0,0,.34); }
.a-index > a:hover { background: rgba(255,255,255,.035); }
.a-index > a:hover .t { color: #fff; }
.a-index .go { background: var(--a-accent); } .a-index .go::after { border-color: var(--a-accent); }
/* forms: underline fields in warm light, ember focus */
.a-input { color: #fff; border-bottom-color: rgba(255,255,255,.22); } .a-input::placeholder { color: #736B65; } .a-input:focus { border-bottom-color: var(--a-accent); }
.a-field label { color: #9B918A; }
select.a-input option { color: #0B0B0C; }
/* chrome: the homepage's glass header, cursor ring and footer (site.js renders the homepage header on these pages) */
[data-style="atelier"] .sm-header { top: 14px; padding: 0 20px; }
[data-style="atelier"] .sm-progress { height: 3px; background: linear-gradient(90deg, #A44014, #E86A24, #F3A575); }
[data-style="atelier"] .sm-footer { background: #0B0B0C; border-top: 1px solid rgba(255,255,255,.1); }
[data-style="atelier"] .sm-footmark { font-family: 'Gellix', system-ui, sans-serif; font-weight: 800; letter-spacing: -.05em; background: linear-gradient(180deg, rgba(255,255,255,.2) 0%, rgba(255,255,255,.02) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
[data-style="atelier"] .sm-grain { opacity: .045; }

/* cinematic hero, injected by site.js into the first section of every page */
.cine-hero { position: relative; isolation: isolate; overflow: hidden; }
.cine-hero > .cine-bg { position: absolute; inset: -8vh 0 0 0; z-index: -1; pointer-events: none; will-change: transform; }
.cine-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .34; filter: saturate(.9); }
.cine-bg .cine-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,11,12,.72) 0%, rgba(11,11,12,.38) 38%, rgba(11,11,12,.86) 82%, #0B0B0C 100%); }
.cine-bg .cine-wash { position: absolute; inset: 0; background: linear-gradient(112deg, rgba(164,64,20,.3) 0%, rgba(232,106,36,.08) 40%, rgba(11,11,12,0) 70%); mix-blend-mode: screen; }
body[data-style="atelier"] .cine-hero > .field-canvas { display: block !important; z-index: -1; }
body[data-style="atelier"] .cine-hero > .cine-glow { display: block !important; position: absolute; left: 50%; top: 50%; width: 660px; height: 660px; margin: -330px 0 0 -330px; border-radius: 999px; background: radial-gradient(circle, rgba(232,106,36,.18) 0%, rgba(232,106,36,0) 68%); pointer-events: none; z-index: -1; }
/* cinema: undo the light-era .btn overrides so buttons are the homepage's pills again */
[data-style="atelier"] .btn { border-radius: 999px; font: 600 15px/1 'Gellix', system-ui, sans-serif; letter-spacing: 0; text-transform: none; color: #fff; border: 1px solid transparent; }
[data-style="atelier"] .btn--sm { padding: 11px 20px; font-size: 14px; }
[data-style="atelier"] .btn-primary { background: linear-gradient(180deg, rgba(243,165,117,.92) 0%, rgba(232,106,36,.9) 55%, rgba(203,83,26,.92) 100%); backdrop-filter: blur(12px); box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(78,30,9,.3), 0 10px 28px rgba(232,106,36,.3); border-color: rgba(255,255,255,.28); color: #fff; }
[data-style="atelier"] .btn-primary:hover { background: #CB531A; color: #fff; box-shadow: 0 16px 44px rgba(232,106,36,.5); }
[data-style="atelier"] .btn-glass { background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border-color: var(--glass-border); box-shadow: var(--glass-shadow); color: #fff; }
/* the office map is authored for a light (normal) scheme; match it so the iframe stays transparent on dark pages */
iframe[src*="office-map"] { color-scheme: normal; background: transparent; }

/* =====================================================================
   CINEMA polish (v5): seamless grounds + per-page scenes.
   Every surface sits on the same #0B0B0C ground. Nothing ends in a hard
   edge: the hero photo fades out through a mask, ink bands are a glow
   rather than a lighter band, the "Next" peek melts into the footer.
   ===================================================================== */
/* hero photo: capped to the first screen and faded out, so a tall first section never shows its edge */
.cine-hero > .cine-bg { inset: -8vh 0 auto 0; height: min(calc(100% + 8vh), 118vh);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 52%, rgba(0,0,0,.45) 74%, transparent 94%);
          mask-image: linear-gradient(180deg, #000 0%, #000 52%, rgba(0,0,0,.45) 74%, transparent 94%); }
.cine-bg .cine-scrim { background: linear-gradient(180deg, rgba(11,11,12,.7) 0%, rgba(11,11,12,.34) 36%, rgba(11,11,12,.72) 78%, rgba(11,11,12,.9) 100%); }
/* the per-page scene canvas, same fade so it never ends in a line */
body[data-style="atelier"] .cine-hero > .cine-scene { display: block; position: absolute; left: 0; right: 0; top: 0; width: 100%; height: min(100%, 110vh); pointer-events: none; z-index: -1;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 60%, transparent 96%); mask-image: linear-gradient(180deg, #000 0%, #000 60%, transparent 96%);
  opacity: 0; transition: opacity .7s cubic-bezier(.19,1,.22,1); }
body[data-style="atelier"] .cine-hero > .cine-scene.is-on { opacity: 1; }
/* ink bands: a soft ember glow from the top instead of a lighter band with a hard rule */
.a-ink { position: relative; background: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(232,106,36,.075) 0%, rgba(232,106,36,0) 70%), #0B0B0C; border-top: 0; }
.a-ink::before { content: ''; position: absolute; left: 50%; top: 0; width: min(1100px, 80%); height: 1px; transform: translateX(-50%); pointer-events: none;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.14) 30%, rgba(243,165,117,.32) 50%, rgba(255,255,255,.14) 70%, rgba(255,255,255,0)); }
.a-ink.cine-hero::before { display: none; }
/* next-page peek: the photo melts in from the page above and out into the footer */
.a-next { background: #0B0B0C; }
.a-next::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: linear-gradient(180deg, #0B0B0C 0%, rgba(11,11,12,.35) 22%, rgba(11,11,12,.2) 55%, rgba(11,11,12,.75) 86%, #0B0B0C 100%); }
.a-next .a-img img { opacity: .5; }
.a-next:hover .a-img img { opacity: .66; }
/* footer: same ground, a fading hairline instead of a full-width rule */
[data-style="atelier"] .sm-footer { border-top: 0; background: #0B0B0C; }
[data-style="atelier"] .sm-footer::before { content: ''; position: absolute; left: 50%; top: 0; width: min(1400px, 90%); height: 1px; transform: translateX(-50%);
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.12) 50%, rgba(255,255,255,0)); }
/* page-level blocks that were authored for the light era */
[data-style="atelier"] .a-sec { background-color: transparent; }

/* ---------- per-page motion signatures (site/motion.js) ---------- */
/* focus scroll: the row nearest the centre of the screen is lit, the others rest */
.sig-focus > * > * { opacity: calc(.3 + var(--f, 1) * .7); transition: opacity .35s linear; }
.sig-focus > * .t { transform: translateX(calc(var(--f, 1) * 10px)); transition: transform .5s cubic-bezier(.19,1,.22,1), opacity .35s linear; }
/* timeline rail: an ember line draws down the list as you read it */
.sig-rail__line { position: absolute; left: 0; top: 0; height: 0; width: 1px; background: rgba(255,255,255,.1); pointer-events: none; }
.sig-rail__line i { position: absolute; inset: 0; background: linear-gradient(180deg, #F3A575, #E86A24); transform-origin: top; transform: scaleY(0); }
.sig-rail__line b { position: absolute; left: -4px; top: 0; width: 9px; height: 9px; border-radius: 50%; background: #E86A24; box-shadow: 0 0 0 5px rgba(232,106,36,.18), 0 0 18px rgba(232,106,36,.7); }
/* spotlight: a warm light follows the cursor across a grid */
.sig-spot { position: relative; --sx: -999px; --sy: -999px; }
.sig-spot::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 2; border-radius: inherit;
  background: radial-gradient(260px circle at var(--sx) var(--sy), rgba(243,165,117,.13), rgba(232,106,36,0) 70%); mix-blend-mode: screen; }
/* live clocks on the office cards */
.sig-clock { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font: 500 12px/1 var(--a-sans); letter-spacing: .08em; color: #9B918A; font-variant-numeric: tabular-nums; }
.sig-clock::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #E86A24; box-shadow: 0 0 0 0 rgba(232,106,36,.6); animation: sigPulse 2.4s infinite; }
@keyframes sigPulse { 0% { box-shadow: 0 0 0 0 rgba(232,106,36,.55); } 70% { box-shadow: 0 0 0 9px rgba(232,106,36,0); } 100% { box-shadow: 0 0 0 0 rgba(232,106,36,0); } }
/* reading rail for long reads */
/* role ticker (careers) */
.sig-ticker { position: relative; overflow: hidden; padding: 26px 0; border-top: 1px solid rgba(255,255,255,.08); border-bottom: 1px solid rgba(255,255,255,.08);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.sig-ticker__row { display: flex; gap: 56px; width: max-content; white-space: nowrap; will-change: transform; }
.sig-ticker__row a { display: inline-flex; align-items: center; gap: 56px; font: 600 clamp(22px, 2.2vw, 36px)/1 var(--a-sans); letter-spacing: -.02em; color: rgba(245,243,240,.34); text-decoration: none; transition: color .3s; }
.sig-ticker__row a::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #E86A24; opacity: .7; }
.sig-ticker__row a:hover { color: #fff; }
@media (prefers-reduced-motion: reduce) { .sig-clock::before { animation: none; } }
/* the page's scene leads; the photograph sits back as texture */
.cine-bg img { opacity: .2; filter: grayscale(.55) contrast(1.05); }
/* the hero clips its backdrop at the sides but lets headline descenders (and entrance motion) breathe past its bottom edge */
.cine-hero { overflow: visible; clip-path: inset(-30vh 0 -56px 0); }

/* =====================================================================
   CINEMA consistency (v6): one corner scale everywhere.
     999px  pills: buttons, tags, chips, taglines
     28px   panels: glass cards, fact panels, logo walls and other grids
     20px   media: photographs and image frames
     14-18px tiles: app marks, code blocks, small surfaces
   Hairline index rows (lists that read like a table of contents) stay square on purpose.
   ===================================================================== */
[data-style="atelier"] { --r-pill: 999px; --r-panel: 28px; --r-media: 20px; --r-tile: 16px; }
/* the cursor glow now lives inside the masked backdrop, so it fades out instead of stopping at a line */
body[data-style="atelier"] .cine-bg > .cine-glow { display: block !important; position: absolute; left: 50%; top: 50%; width: 660px; height: 660px; margin: -330px 0 0 -330px; border-radius: 50%; background: radial-gradient(circle, rgba(232,106,36,.18) 0%, rgba(232,106,36,0) 68%); pointer-events: none; }
/* grids with cell borders become one rounded panel: the container draws the outline, the cells only the dividers */
.ps-wall, .ab-group, .wp-meta { border: 1px solid var(--a-rule) !important; border-radius: var(--r-panel); overflow: hidden;
  background: linear-gradient(135deg, rgba(255,255,255,.035) 0%, rgba(255,255,255,.01) 50%, rgba(255,255,255,.025) 100%); }
.ps-wall > *, .ab-group > *, .wp-meta > * { margin: 0 -1px -1px 0; }
.ps-wall.sig-spot::after { border-radius: var(--r-panel); }
/* fact strips become glass fact panels, like the homepage figures */
.ed-facts, .nw-facts, .po-props, .wp-stats { border: 1px solid rgba(255,255,255,.13) !important; border-radius: var(--r-panel); overflow: hidden;
  background: linear-gradient(135deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.015) 45%, rgba(255,255,255,.035) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 22px 56px rgba(0,0,0,.28); }
.ed-facts > div { margin-bottom: -1px; padding-left: 28px !important; padding-right: 28px !important; }
.po-props > div, .wp-stats > div { padding-left: 26px !important; padding-right: 22px !important; }
.nw-facts > div { padding: 24px 26px !important; }
/* small surfaces */
.mk-mark { border-radius: 18px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.mk-mark img { transform: none !important; object-fit: contain; }
.ci-float { border-radius: var(--r-media); }
.a-prose code { border-radius: 6px; }
.a-prose pre { border-radius: var(--r-tile); }
.wp-sample { border-radius: var(--r-panel) !important; }
.a-tagline, .a-next__in .a-tagline { border-radius: var(--r-pill) !important; }
.ct-map iframe { border-radius: var(--r-panel); }
/* solid (ember) buttons always carry a white label; several pages still restated the light-era label colour */
body[data-style="atelier"] .a-btn--solid, body[data-style="atelier"] .a-btn--solid:hover { color: #fff !important; }

/* ---------- experience layer (v6) ---------- */
/* keyboard focus: one ember ring everywhere */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid rgba(243,165,117,.95); outline-offset: 3px; border-radius: 8px; }
/* header steps aside on the way down, back on the way up */
.sm-header { transition: transform .55s cubic-bezier(.19,1,.22,1), opacity .4s; }
.sm-header.is-away { transform: translate3d(0, calc(-100% - 24px), 0); opacity: 0; }
/* search button in the header */
.sm-search-btn { pointer-events: auto; display: inline-grid; place-items: center; width: 40px; height: 40px; margin: 0 10px 0 4px; border-radius: 999px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.05); color: #F5F3F0; cursor: pointer; transition: background .3s, border-color .3s, transform .4s cubic-bezier(.19,1,.22,1); }
.sm-search-btn:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.34); transform: scale(1.06); }
/* search palette */
html.sm-search-open { overflow: hidden; }
.sm-search { position: fixed; inset: 0; z-index: 900; display: grid; justify-items: center; align-items: start; padding: min(14vh, 140px) 20px 20px; }
.sm-search__scrim { position: absolute; inset: 0; background: rgba(8,8,9,.62); backdrop-filter: blur(10px) saturate(120%); -webkit-backdrop-filter: blur(10px) saturate(120%); opacity: 0; transition: opacity .3s; }
.sm-search__panel { position: relative; width: min(720px, 100%); max-height: min(640px, 76vh); display: flex; flex-direction: column; overflow: hidden; border-radius: 28px; border: 1px solid rgba(255,255,255,.16);
  background: linear-gradient(135deg, rgba(40,36,34,.88) 0%, rgba(20,19,18,.9) 100%); backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 40px 120px rgba(0,0,0,.6); opacity: 0; transform: translateY(-14px) scale(.98); transition: opacity .3s, transform .45s cubic-bezier(.19,1,.22,1); }
.sm-search.is-open .sm-search__scrim, .sm-search.is-open .sm-search__panel { opacity: 1; } .sm-search.is-open .sm-search__panel { transform: none; }
.sm-search__field { display: flex; align-items: center; gap: 14px; padding: 20px 24px; border-bottom: 1px solid rgba(255,255,255,.1); color: #B8AFA8; }
.sm-search__field input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: #fff; font: 500 19px/1.3 'Gellix', system-ui, sans-serif; letter-spacing: -.01em; }
.sm-search__field input:focus-visible { outline: 0; } /* the open panel is the focus: no ring around the words typed */
.sm-search__field input::placeholder { color: #736B65; } .sm-search__field input::-webkit-search-cancel-button { display: none; }
.sm-search kbd { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 7px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.05); font: 600 11px/1 'Gellix', system-ui, sans-serif; color: #B8AFA8; cursor: default; }
.sm-search__field kbd { cursor: pointer; }
.sm-search__list { list-style: none; margin: 0; padding: 10px; overflow: auto; }
.sm-search__hd { padding: 10px 14px 8px; font: 600 11px/1 'Gellix', system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #8A817B; }
.sm-search__list a { display: grid; grid-template-columns: 96px minmax(0, 1fr) 24px; align-items: center; gap: 16px; padding: 13px 14px; border-radius: 16px; color: #F5F3F0; text-decoration: none; }
.sm-search__list [aria-selected="true"] a, .sm-search__list a:hover { background: rgba(255,255,255,.07); }
.sm-search__list .k { font: 600 10px/1 'Gellix', system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #E86A24; }
.sm-search__list .t { font: 600 16px/1.3 'Gellix', system-ui, sans-serif; letter-spacing: -.01em; min-width: 0; }
.sm-search__list small { display: block; margin-top: 4px; font: 400 13px/1.4 'Gellix', system-ui, sans-serif; color: #9B918A; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sm-search__list mark { background: none; color: #F3A575; }
.sm-search__list .go { color: #736B65; opacity: 0; transition: opacity .2s; } .sm-search__list [aria-selected="true"] .go { opacity: 1; }
.sm-search__empty { padding: 28px 18px; font: 400 15px/1.6 'Gellix', system-ui, sans-serif; color: #B8AFA8; } .sm-search__empty a { color: #F3A575; }
/* the last row hands the query to SAM; while the server searches by meaning, a quiet line says so */
.sm-search__list .is-sam { margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(255,255,255,.08); }
.sm-search__list .is-sam .t { color: #F3A575; }
.sm-search__looking { color: transparent; background: linear-gradient(90deg, #8A817B 30%, #F5F3F0 50%, #8A817B 70%) 0 0 / 300% 100%; -webkit-background-clip: text; background-clip: text; animation: sm-looking 1.8s linear infinite; }
@keyframes sm-looking { from { background-position: 100% 0; } to { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .sm-search__looking { animation: none; color: #B8AFA8; background: none; } }
.sm-search__foot { display: flex; gap: 22px; align-items: center; padding: 12px 24px; border-top: 1px solid rgba(255,255,255,.08); font: 500 12px/1 'Gellix', system-ui, sans-serif; color: #8A817B; }
.sm-search__foot span { display: inline-flex; gap: 6px; align-items: center; } .sm-search__foot .n { margin-left: auto; }
/* footer: the group line and back to top */
.sm-footer-group { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; margin-top: 64px; padding: 22px 0; border-top: 1px solid rgba(255,255,255,.08); font: 500 13px/1 'Gellix', system-ui, sans-serif; color: #8A817B; }
.sm-footer-group > span { letter-spacing: .14em; text-transform: uppercase; font-size: 11px; font-weight: 600; }
.sm-footer-group a { color: #F5F3F0; text-decoration: none; transition: color .3s; } .sm-footer-group a:hover { color: #F3A575; }
.sm-top { margin-left: auto; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; background: rgba(255,255,255,.04); color: #F5F3F0; padding: 10px 18px; font: 600 13px/1 'Gellix', system-ui, sans-serif; cursor: pointer; transition: background .3s, border-color .3s; }
.sm-top::after { content: ' ↑'; }
.sm-top:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.34); }

/* =====================================================================
   PHONE & TABLET (v7)
   ≤1100px the header folds into a menu button and a full-screen glass sheet;
   ≤900px shared layouts stack; ≤560px phone spacing and type.
   ===================================================================== */
.sm-burger { display: none; pointer-events: auto; position: relative; width: 44px; height: 44px; flex: 0 0 auto; border-radius: 999px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.06); cursor: pointer; }
.sm-burger i { position: absolute; left: 13px; right: 13px; height: 1.5px; border-radius: 2px; background: #F5F3F0; transition: transform .45s cubic-bezier(.19,1,.22,1); }
.sm-burger i:first-child { top: 17px; } .sm-burger i:last-child { top: 25px; }
.sm-burger.is-x i:first-child { transform: translateY(4px) rotate(45deg); } .sm-burger.is-x i:last-child { transform: translateY(-4px) rotate(-45deg); }
html.sm-mnav-open { overflow: hidden; }
.sm-mnav { position: fixed; inset: 0; z-index: 800; padding: 12px; background: rgba(8,8,9,.55); opacity: 0; transition: opacity .35s; }
.sm-mnav.is-open { opacity: 1; }
.sm-mnav__panel { height: 100%; display: flex; flex-direction: column; overflow: auto; overscroll-behavior: contain; border-radius: 28px; border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(160deg, rgba(40,34,30,.94) 0%, rgba(16,15,14,.97) 60%); backdrop-filter: blur(28px) saturate(160%); -webkit-backdrop-filter: blur(28px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 40px 120px rgba(0,0,0,.6); transform: translateY(-12px) scale(.985); transition: transform .5s cubic-bezier(.19,1,.22,1); }
.sm-mnav.is-open .sm-mnav__panel { transform: none; }
.sm-mnav__top { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 10px; padding: 16px 16px 16px 22px; background: linear-gradient(180deg, rgba(30,27,25,.96) 70%, rgba(30,27,25,0)); }
.sm-mnav__top .sm-logo { margin-right: auto; } .sm-mnav__top .sm-search-btn { margin: 0; width: 44px; height: 44px; } .sm-mnav__top .sm-burger { display: block; }
.sm-mnav__nav { display: flex; flex-direction: column; padding: 8px 22px 12px; }
.sm-mnav__link, .sm-mnav__sec > summary { display: flex; align-items: center; justify-content: space-between; padding: 18px 0; border-bottom: 1px solid rgba(255,255,255,.09); font: 600 26px/1.1 'Gellix', system-ui, sans-serif; letter-spacing: -.03em; color: #F5F3F0; text-decoration: none; cursor: pointer; list-style: none; }
.sm-mnav__sec > summary::-webkit-details-marker { display: none; }
.sm-mnav__link.is-current, .sm-mnav__sec.is-current > summary { color: #F3A575; }
.sm-mnav__sec .caret { width: 10px; height: 10px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-3px) rotate(45deg); opacity: .6; transition: transform .3s; }
.sm-mnav__sec[open] .caret { transform: translateY(2px) rotate(225deg); }
.sm-mnav__body { display: grid; gap: 2px; padding: 10px 0 18px; border-bottom: 1px solid rgba(255,255,255,.09); animation: smDrop .4s cubic-bezier(.19,1,.22,1); }
@keyframes smDrop { from { opacity: 0; transform: translateY(-6px); } }
.sm-mnav__body a { display: block; padding: 11px 14px; border-radius: 14px; color: #F5F3F0; text-decoration: none; }
.sm-mnav__body a:active, .sm-mnav__body a:hover { background: rgba(255,255,255,.06); }
.sm-mnav__body b { display: block; font: 600 16px/1.3 'Gellix', system-ui, sans-serif; } .sm-mnav__body small { display: block; margin-top: 3px; font: 400 13px/1.4 'Gellix', system-ui, sans-serif; color: #9B918A; }
.sm-mnav__body .sm-mnav__all { font: 600 12px/1 'Gellix', system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #E86A24; }
.sm-mnav__grp { margin: 12px 14px 4px; font: 600 11px/1 'Gellix', system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #8A817B; }
.sm-mnav__foot { margin-top: auto; display: grid; gap: 16px; justify-items: center; padding: 24px 22px 28px; }
.sm-mnav__foot .btn { width: 100%; justify-content: center; padding: 18px 24px; font-size: 16px; }
.sm-mnav__mail { font: 500 14px/1 'Gellix', system-ui, sans-serif; color: #B8AFA8; text-decoration: none; }

@media (max-width: 1100px) {
  .sm-nav { display: none !important; }
  .sm-burger { display: block; }
  .sm-header-bar { gap: 10px; padding: 8px 8px 8px 20px; }
  .sm-header-bar > .sm-logo { margin-right: auto; }
  .sm-search-btn { margin: 0; width: 44px; height: 44px; }
}
@media (max-width: 900px) {
  /* footer: brand across the top, link columns two by two */
  .sm-footer-grid { grid-template-columns: 1fr 1fr !important; gap: 40px 24px !important; }
  .sm-footer-grid > :first-child { grid-column: 1 / -1; }
  .sm-footer-inner { padding-top: 64px; }
  .sm-footer-group { margin-top: 48px; }
  .sm-footer-base { flex-direction: column; gap: 14px; }
  .sm-footer-base > span:last-child { flex-wrap: wrap; gap: 12px 20px !important; }
  /* long custom headings never push past the screen */
  main h1, main h2, main h3 { overflow-wrap: break-word; hyphens: manual; }
  /* the Xencia panel on the Microsoft page */
  .p-xencia { grid-template-columns: 1fr; gap: 20px; } .p-xencia__go { display: none; }
  /* search panel: full-width sheet */
  .sm-search { padding: 12px; } .sm-search__panel { max-height: calc(100vh - 24px); } .sm-search__foot { display: none; }
  .sm-search__list a { grid-template-columns: 1fr; gap: 6px; } .sm-search__list .go { display: none; }
  .sm-footer-group .sm-top { margin-left: 0; }
}
@media (max-width: 560px) {
  .sm-header { top: 10px; padding: 0 10px; }
  .sm-header-bar > .btn-primary { display: none; }
  .sm-footer-grid { gap: 32px 20px !important; }
  .sm-footmark { font-size: 19vw; }
  .a-figures { grid-template-columns: 1fr 1fr !important; }
  .a-figures > div { padding: 22px !important; border-radius: 22px !important; }
  .cine-hero > .cine-bg { height: min(calc(100% + 8vh), 100vh); }
}
/* touch devices: no custom cursor ring, no hover tilt */
@media (hover: none) { [data-cursor] { display: none !important; } }
@media (max-width: 900px) {
  /* filter tabs scroll sideways instead of running off the screen */
  .a-tabs { flex-wrap: nowrap !important; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; gap: 22px !important; padding-bottom: 2px;
    -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .a-tabs::-webkit-scrollbar { display: none; }
  .a-tabs > * { flex: 0 0 auto; white-space: nowrap; }
  /* wide tables in long reads scroll inside their own box */
  .a-prose table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .a-prose td, .a-prose th { min-width: 140px; }
}
@media (max-width: 560px) {
  .a-figures .a-num, .nw-stats .a-num { font-size: clamp(36px, 10vw, 48px) !important; white-space: normal !important; }
}
@media (max-width: 900px) {
  .a-tabs { min-width: 0; max-width: 100%; }
  .kh-bar, .kh-bar > *, .nr-bar > *, .ev-bar > *, .cx-bar > *, .ps-bar > * { min-width: 0; max-width: 100%; }
  .a-prose td, .a-prose th { min-width: 200px; }
}
@media (max-width: 560px) { .nw-stats .a-figures { grid-template-columns: 1fr !important; } }
/* the footer is never on screen at load: let the browser skip its layout and paint until it is near */
/* the footer renders normally: skipping it with a guessed height made the page jump as it came into view */

/* =====================================================================
   FILM MOMENTS (v9): a few full-screen chapters with a silent film loop.
   Our own composition (not a reference's): the line sits low and left in
   Gellix, a small index with a hairline that runs with the film, one link.
   ===================================================================== */
.a-film { position: relative; display: flex; align-items: flex-end; min-height: 100vh; min-height: 100svh; overflow: hidden; isolation: isolate; background: #0B0B0C; color: #F5F3F0; }
.a-film__media { position: absolute; inset: -6vh 0; z-index: -2; transform-origin: 50% 60%; will-change: transform; }
.a-film__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #0B0B0C; }
.a-film__soft { position: absolute; inset: -2%; background-size: cover; background-position: center; filter: blur(10px); transform: scale(1.04); will-change: opacity; }
/* the page flows into the film and out of it; the line sits on a quiet corner */
.a-film::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, #0B0B0C 0%, rgba(11,11,12,.35) 16%, rgba(11,11,12,0) 34%, rgba(11,11,12,.15) 58%, rgba(11,11,12,.82) 86%, #0B0B0C 100%),
              linear-gradient(90deg, rgba(11,11,12,.72) 0%, rgba(11,11,12,.25) 46%, rgba(11,11,12,0) 70%); }
.a-film__in { position: relative; width: min(1560px, 100% - 2 * clamp(20px, 4.6vw, 88px)); margin-inline: auto; padding-top: 30vh; padding-bottom: clamp(72px, 10vh, 140px); }
.a-film__idx { display: flex; align-items: center; gap: 14px; margin: 0 0 30px; font: 600 12px/1 var(--a-sans, 'Gellix'), system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #E86A24; }
.a-film__idx span { color: #F5F3F0; letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.a-film__idx i { position: relative; width: 72px; height: 1px; background: rgba(255,255,255,.22); overflow: hidden; }
.a-film__idx b { position: absolute; inset: 0; background: #E86A24; transform-origin: 0 50%; transform: scaleX(0); }
.a-film__line { max-width: 15ch; margin: 0; font-size: clamp(44px, 5.6vw, 112px) !important; line-height: .98 !important; letter-spacing: -.045em; text-wrap: balance; }
.a-film__line em { color: #9B918A; font-style: normal; }
.a-film__go { display: inline-block; margin-top: 40px; }
@media (max-width: 900px) { .a-film { min-height: 86vh; } .a-film__in { padding-top: 40vh; } .a-film__line { max-width: 12ch; } }
@media (prefers-reduced-motion: reduce) { .a-film__soft { display: none; } .a-film__media { transform: none !important; } }

/* hero backdrops arrive with a focus-pull the first time the page opens */
@media (prefers-reduced-motion: no-preference) {
  .cine-bg img { animation: smFocus 2.2s cubic-bezier(.19,1,.22,1) both; }
  @keyframes smFocus { from { filter: grayscale(.55) contrast(1.05) blur(14px); transform: scale(1.08); } to { filter: grayscale(.55) contrast(1.05) blur(0); transform: scale(1); } }
}
.a-film { margin: clamp(32px, 4vw, 72px) 0 clamp(72px, 7vw, 140px); }

/* group lockup: Saints & Masters + Xencia */
.sm-logo { display: flex; align-items: center; gap: 14px; width: auto !important; height: 32px; }
.sm-logo .lk { position: relative; display: block; height: 100%; flex: 0 0 auto; }
.sm-logo .lk-sm { width: 112px; }
.sm-logo .lk-x { height: 36px; width: 60px; }
.sm-logo .lk img { position: absolute; left: 0; top: 0; height: 100%; width: auto; transition: opacity 320ms var(--ease); }
.sm-logo .lk .logo-dark { opacity: 0; }
.sm-header.is-light .sm-logo .lk .logo-light { opacity: 0; } .sm-header.is-light .sm-logo .lk .logo-dark { opacity: 1; }
.sm-foot-lockup { display: flex; align-items: center; gap: 18px; margin-bottom: 22px; }
.sm-foot-lockup img { height: 40px; width: auto; } .sm-foot-lockup .x { height: 46px; }
@media (max-width: 560px) { .sm-logo { gap: 10px; } .sm-logo .lk-sm { width: 98px; } .sm-logo .lk-x { width: 52px; height: 31px; } .sm-logo { height: 28px; } }

/* =====================================================================
   LOADING (v10): the page is prepared behind a loader, then revealed.
   ===================================================================== */
/* content waits, hidden, until the page is ready (site.js adds .sm-shown); a failsafe reveals it regardless */
html:not(.sm-shown) body > :not(.sm-boot):not(.sm-capsule):not(.sm-signal-stage):not(script):not(.sm-grain) { opacity: 0; animation: smFailsafe .4s 4s forwards; }
html.sm-shown body > * { transition: opacity .45s cubic-bezier(.19,1,.22,1); }
@keyframes smFailsafe { to { opacity: 1; } }
/* first visit: the group lockup and a line that fills with real progress */
.sm-boot { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; background: #0B0B0C; transition: clip-path .9s cubic-bezier(.76,0,.24,1), opacity .6s; clip-path: inset(0 0 0 0); }
.sm-boot.is-out { clip-path: inset(0 0 100% 0); }
.sm-boot__in { display: grid; justify-items: center; gap: 34px; animation: smBootIn .9s cubic-bezier(.19,1,.22,1) both; }
@keyframes smBootIn { from { opacity: 0; transform: translateY(14px); } }
.sm-boot__mark { display: flex; align-items: center; gap: 20px; }
.sm-boot__mark img { height: 46px; width: auto; } .sm-boot__mark .x { height: 52px; }
.sm-boot i, .sm-capsule i { position: relative; display: block; width: 200px; height: 2px; background: rgba(255,255,255,.12); overflow: hidden; border-radius: 2px; }
.sm-boot i b, .sm-capsule i b { position: absolute; inset: 0; background: linear-gradient(90deg, #A44014, #E86A24, #F3A575); transform-origin: 0 50%; transform: scaleX(0); transition: transform .6s cubic-bezier(.19,1,.22,1); }
.sm-boot i b::after, .sm-capsule i b::after { content: ''; position: absolute; top: 0; bottom: 0; width: 40%; right: 0; background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,240,220,.7), rgba(255,255,255,0)); animation: smShimmer 1.1s linear infinite; }
@keyframes smShimmer { from { transform: translateX(-250%); } to { transform: translateX(250%); } }
/* between pages: a small glass capsule under the header */
.sm-capsule { position: fixed; left: 50%; top: 92px; z-index: 2000; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px 12px; min-width: 240px; padding: 14px 20px 16px; border-radius: 22px;
  border: 1px solid rgba(255,255,255,.16); background: linear-gradient(135deg, rgba(40,36,34,.82), rgba(18,17,16,.86)); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 24px 60px rgba(0,0,0,.45); color: #F5F3F0; font: 500 13px/1 'Gellix', system-ui, sans-serif; pointer-events: none;
  opacity: 0; transform: translate(-50%, -10px) scale(.97); transition: opacity .28s cubic-bezier(.19,1,.22,1), transform .45s cubic-bezier(.19,1,.22,1); }
.sm-capsule.is-on { opacity: 1; transform: translate(-50%, 0) scale(1); }
.sm-boot.is-out ~ .sm-capsule, .sm-capsule.is-out { opacity: 0; transform: translate(-50%, -8px) scale(.98); }
.sm-capsule__dot { width: 8px; height: 8px; border-radius: 50%; background: #E86A24; box-shadow: 0 0 12px rgba(232,106,36,.8); animation: smDot 1s ease-in-out infinite alternate; }
@keyframes smDot { to { opacity: .35; transform: scale(.7); } }
.sm-capsule__t { white-space: nowrap; color: #B8AFA8; letter-spacing: .01em; } .sm-capsule__t b { color: #F5F3F0; font-weight: 600; }
.sm-capsule i { grid-column: 1 / -1; width: 100%; }
@media (prefers-reduced-motion: reduce) { .sm-boot, .sm-capsule, html.sm-shown body > * { transition: none; } .sm-boot.is-out { opacity: 0; clip-path: none; } .sm-boot i b::after, .sm-capsule i b::after, .sm-capsule__dot, .sm-boot__in { animation: none; } }
@media (max-width: 560px) { .sm-capsule { top: 76px; } .sm-boot__mark img { height: 36px; } .sm-boot__mark .x { height: 40px; } }

/* =====================================================================
   HORIZONTAL MOMENTS (v10): the page turns sideways for a sequence.
   ===================================================================== */
.h-pin { position: relative; }
.h-pin__stick { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column; justify-content: center; gap: clamp(36px, 4vw, 64px); overflow: hidden; }
.h-pin__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px 64px; flex-wrap: wrap; }
.h-pin__head .a-h2 { max-width: 18ch; margin: 0; }
.h-pin__head .a-body { max-width: 46ch; margin: 0; }
.h-pin__count { font: 600 14px/1 var(--a-sans, 'Gellix'), system-ui, sans-serif; letter-spacing: .1em; color: #8A817B; font-variant-numeric: tabular-nums; }
.h-pin__count b { color: #F5F3F0; font-size: 28px; letter-spacing: -.02em; margin-right: 6px; }
.h-pin__track { display: flex; gap: clamp(20px, 2vw, 32px); width: max-content; padding-inline: max(clamp(20px, 4.6vw, 88px), calc((100vw - 1560px) / 2)); will-change: transform; }
.h-pin__card { position: relative; display: flex; flex-direction: column; width: clamp(360px, 34vw, 560px); min-height: min(52vh, 480px); padding: clamp(28px, 2.6vw, 44px); border-radius: 28px; border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(135deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.015) 45%, rgba(255,255,255,.035) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 22px 56px rgba(0,0,0,.3); transition: border-color .5s, background .5s; }
.h-pin__card.is-on { border-color: rgba(243,165,117,.4); background: linear-gradient(135deg, rgba(232,106,36,.12) 0%, rgba(255,255,255,.02) 50%, rgba(255,255,255,.04) 100%); }
.h-pin__card .k { font: 600 12px/1 var(--a-sans, 'Gellix'), system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #E86A24; }
.h-pin__card .big { margin: 28px 0 0; font: 700 clamp(64px, 6vw, 112px)/.9 var(--a-sans, 'Gellix'), system-ui, sans-serif; letter-spacing: -.05em; color: rgba(245,243,240,.1); }
.h-pin__card h3 { margin: -0.5em 0 0; font: 600 clamp(28px, 2.4vw, 42px)/1.05 var(--a-sans, 'Gellix'), system-ui, sans-serif; letter-spacing: -.035em; color: #F5F3F0; }
.h-pin__card p { margin: 18px 0 0; font: 400 16px/1.6 var(--a-sans, 'Gellix'), system-ui, sans-serif; color: #B8AFA8; }
.h-pin__card ul { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; }
.h-pin__card li { position: relative; padding-left: 20px; font: 500 14px/1.45 var(--a-sans, 'Gellix'), system-ui, sans-serif; color: #E1DAD4; }
.h-pin__card li::before { content: ''; position: absolute; left: 0; top: .55em; width: 8px; height: 1px; background: #E86A24; }
.h-pin__card .a-link { margin-top: auto; padding-top: 28px; align-self: flex-start; }
.h-pin__bar { position: relative; height: 1px; background: rgba(255,255,255,.12); }
.h-pin__bar i { position: absolute; inset: 0; background: linear-gradient(90deg, #A44014, #E86A24, #F3A575); transform-origin: 0 50%; transform: scaleX(0); }
/* phones, tablets, reduced motion: a swipeable row */
.h-pin--flat .h-pin__stick { position: static; height: auto; padding: clamp(72px, 8vw, 120px) 0; overflow: visible; }
.h-pin--flat .h-pin__track { width: auto; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 8px; transform: none !important; }
.h-pin--flat .h-pin__track::-webkit-scrollbar { display: none; }
.h-pin--flat .h-pin__card { flex: 0 0 auto; width: min(84vw, 460px); scroll-snap-align: start; min-height: 0; }
.h-pin--flat .h-pin__bar, .h-pin--flat .h-pin__count { display: none; }

.h-pin__card--img { padding-top: 14px; }
.h-pin__card--img .a-img { aspect-ratio: 16 / 10; margin: 0 -14px 26px; width: calc(100% + 28px); align-self: stretch; }
.h-pin__card--img h3 { margin-top: 14px; }
.h-pin__head .a-statement { margin: 0; }
.h-pin__card:not(:has(ul)):not(.h-pin__card--img) { min-height: 0; }

/* =====================================================================
   OUR OWN SCROLLBAR + LIVING HEADER (v10)
   ===================================================================== */
html { scrollbar-width: none; } html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; width: 0; height: 0; }
.sm-rail { position: fixed; right: 18px; top: 50%; z-index: 450; display: none; flex-direction: column; align-items: flex-end; gap: 14px; padding: 16px 10px; border-radius: 999px;
  background: linear-gradient(135deg, rgba(255,255,255,.075) 0%, rgba(255,255,255,.018) 42%, rgba(255,255,255,.04) 100%); border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(9px) saturate(165%); -webkit-backdrop-filter: blur(9px) saturate(165%); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 14px 40px rgba(0,0,0,.3);
  transform: translateY(-50%); animation: smRailIn .8s cubic-bezier(.19,1,.22,1) .3s both; }
@keyframes smRailIn { from { opacity: 0; transform: translate(14px, -50%); } }
@media (min-width: 1024px) and (pointer: fine) { .sm-rail { display: flex; } }
.sm-rail__line { position: absolute; right: 13px; top: 18px; bottom: 18px; width: 2px; border-radius: 2px; background: rgba(255,255,255,.08); overflow: hidden; pointer-events: none; }
.sm-rail__line i { position: absolute; inset: 0; background: linear-gradient(180deg, #F3A575, #E86A24 70%, #A44014); transform-origin: 50% 0; transform: scaleY(0); }
.sm-rail__item { position: relative; display: flex; align-items: center; justify-content: flex-end; width: 8px; height: 8px; padding: 0; border: 0; background: none; cursor: pointer; opacity: .6; transition: opacity .24s; }
.sm-rail__item:hover, .sm-rail__item.is-on { opacity: 1; }
.sm-rail__dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #544D48; box-shadow: 0 0 0 3px rgba(11,11,12,.6); transition: background .24s, transform .3s cubic-bezier(.22,.61,.36,1); }
.sm-rail__item.is-on .sm-rail__dot { background: #E86A24; transform: scale(1.5); }
.sm-rail__label { position: absolute; right: 24px; white-space: nowrap; pointer-events: none; font: 600 11px/1 'Gellix', system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #C4BAB2; opacity: 0; transform: translateX(6px); transition: opacity .24s, transform .3s cubic-bezier(.19,1,.22,1); }
.sm-rail:hover .sm-rail__label { opacity: .7; transform: none; } .sm-rail:hover .sm-rail__item.is-on .sm-rail__label, .sm-rail__item:focus-visible .sm-rail__label { opacity: 1; color: #F3A575; }
/* the header steps aside with a little life: it lifts, narrows, softens into a blur and fades; it comes back the same way */
.sm-header { transition: transform .7s cubic-bezier(.19,1,.22,1), opacity .5s cubic-bezier(.19,1,.22,1), filter .6s cubic-bezier(.19,1,.22,1); transform-origin: 50% 0; }
.sm-header.is-away { transform: translate3d(0, -34px, 0) scale(.94, .9); opacity: 0; filter: blur(10px); pointer-events: none; }
.sm-header .sm-nav-link, .sm-header .sm-search-btn, .sm-header .btn-primary, .sm-header .sm-logo { transition: opacity .45s cubic-bezier(.19,1,.22,1), transform .6s cubic-bezier(.19,1,.22,1); }
.sm-header.is-away .sm-nav-link, .sm-header.is-away .sm-search-btn, .sm-header.is-away .btn-primary { opacity: 0; transform: translateY(-6px); }
.sm-header.is-away .sm-logo { opacity: 0; transform: translateX(-8px); }
@media (prefers-reduced-motion: reduce) { .sm-header, .sm-header.is-away { filter: none; transform: none; } }
/* footer lockup scales with its column */
.sm-foot-lockup { max-width: 100%; }
.sm-foot-lockup img { height: clamp(30px, 2.7vw, 40px); } .sm-foot-lockup .x { height: clamp(34px, 3.1vw, 46px); }
.sm-rail__label { padding: 7px 10px; border-radius: 999px; background: rgba(14,13,12,.82); border: 1px solid rgba(255,255,255,.1); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.sm-rail:hover .sm-rail__label { opacity: .85; }
/* case cards: long client names wrap instead of being cut off */
.cx-item .meta .a-label { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.4; }
@media (max-width: 560px) { .cx-item .meta { flex-direction: column; align-items: flex-start; gap: 6px; } }
/* wide charts that scroll sideways on phones show a soft edge so the rest is clearly there */
@media (max-width: 760px) { .gantt { -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); scrollbar-width: none; } .gantt::-webkit-scrollbar { display: none; } }

/* ==========================================================================
   MOVEMENT v13: the in-between moments move as well (menu bar, buttons, images, heroes, footer, page exits).
   Everything below is transform/opacity on the compositor and runs only while something is happening.
   ========================================================================== */
/* menu bar: one glass pill glides between links instead of each link lighting on its own */
.sm-nav.has-glide { position: relative; }
.sm-nav-glide { position: absolute; left: 0; top: 50%; height: 38px; width: 0; border-radius: 999px; pointer-events: none; z-index: 0; opacity: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.11) 0%, rgba(255,255,255,.05) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
  transition: transform .55s cubic-bezier(.19,1,.22,1), width .55s cubic-bezier(.19,1,.22,1), opacity .3s ease; }
.sm-nav-glide.is-on { opacity: 1; }
.sm-nav-glide.is-snap { transition: opacity .3s ease; }
.sm-nav.has-glide .sm-nav-item { position: relative; z-index: 1; }
.sm-nav.has-glide .sm-nav-link:hover, .sm-nav.has-glide .sm-nav-item.is-open > .sm-nav-link { background: transparent; }
.sm-header.is-light .sm-nav-glide { background: rgba(11,11,12,.06); box-shadow: none; }
.sm-header.is-light .sm-nav.has-glide .sm-nav-link:hover, .sm-header.is-light .sm-nav.has-glide .sm-nav-item.is-open > .sm-nav-link { background: transparent; }
/* dropdowns: entries cascade in; icons and arrows nudge on hover */
@media (prefers-reduced-motion: no-preference) {
  .sm-menu > * { opacity: 0; transform: translate3d(0, 8px, 0); transition: opacity .2s ease, transform .2s ease, background 160ms; }
  .sm-nav-item.is-open .sm-menu > * { opacity: 1; transform: none; transition: opacity .42s cubic-bezier(.19,1,.22,1), transform .55s cubic-bezier(.19,1,.22,1), background 160ms; transition-delay: calc(var(--i, 0) * 32ms + 40ms), calc(var(--i, 0) * 32ms + 40ms), 0s; }
  .sm-menu a .icon { transition: transform .45s cubic-bezier(.19,1,.22,1), color .2s; }
  .sm-menu a:hover .icon { transform: translate3d(2px, -1px, 0) scale(1.12); color: var(--ember-500); }
  .sm-menu a b { transition: transform .45s cubic-bezier(.19,1,.22,1); }
  .sm-menu a:hover b { transform: translate3d(3px, 0, 0); }
}

/* images drift inside their frames as the page scrolls (a scroll-driven animation on the GPU); linked cards lean in on hover */
.a-img.is-drift > img, .a-img.is-drift > video { scale: 1.1; transition: scale 1.4s cubic-bezier(.19,1,.22,1); }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .a-img.is-drift > img, .a-img.is-drift > video { animation: smDrift linear both; animation-timeline: view(); }
    @keyframes smDrift { from { translate: 0 4.5%; } to { translate: 0 -4.5%; } }
  }
}
a:hover .a-img.is-drift > img, a:hover .a-img.is-drift > video, .a-img.is-drift:hover > img { scale: 1.15; }
@media (prefers-reduced-motion: no-preference) {
  main a .a-arrow, main a .icon { transition: transform .5s cubic-bezier(.19,1,.22,1), width .5s var(--a-ease, ease); }
  main a:hover > .icon:last-child, main a:hover .a-link .icon { transform: translate3d(4px, 0, 0); }
  /* text links: the underline redraws from the left on hover */
  .a-link { position: relative; border-bottom-color: transparent !important; }
  .a-link::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: currentColor; opacity: .55; transform-origin: 100% 50%; transition: transform .6s cubic-bezier(.19,1,.22,1); }
  .a-link:hover::after { transform-origin: 0 50%; animation: smRedraw .7s cubic-bezier(.19,1,.22,1); }
  @keyframes smRedraw { 0% { transform: scaleX(1); transform-origin: 100% 50%; } 45% { transform: scaleX(0); transform-origin: 100% 50%; } 46% { transform: scaleX(0); transform-origin: 0 50%; } 100% { transform: scaleX(1); transform-origin: 0 50%; } }
}


/* footer columns rise in one after another */
@media (prefers-reduced-motion: no-preference) {
  .sm-footer.will-rise .sm-footer-grid > *, .sm-footer.will-rise .sm-footer-group, .sm-footer.will-rise .sm-footer-base { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity .9s cubic-bezier(.19,1,.22,1), transform 1.1s cubic-bezier(.19,1,.22,1); transition-delay: calc(var(--i, 0) * 70ms); }
  .sm-footer.will-rise.is-risen .sm-footer-grid > *, .sm-footer.will-rise.is-risen .sm-footer-group, .sm-footer.will-rise.is-risen .sm-footer-base { opacity: 1; transform: none; }
}

/* leaving a page: a dark veil settles under the loading capsule, so pages hand over instead of cutting */
.sm-veil { position: fixed; inset: 0; z-index: 1990; pointer-events: none; background: rgba(11,11,12,.62); opacity: 0; transition: opacity .2s ease-out; }
.sm-veil.is-on { opacity: 1; }
/* dropdowns read cleanly over large hero type: denser glass */
.sm-menu { background: linear-gradient(135deg, rgba(30,28,26,.9) 0%, rgba(16,15,14,.86) 100%); backdrop-filter: blur(28px) saturate(170%); -webkit-backdrop-filter: blur(28px) saturate(170%); }

/* ==========================================================================
   PERFORMANCE v14
   ========================================================================== */
/* scroll-driven bars live on their own layers, so moving them never repaints the page */
.h-pin__bar i, .sig-rail__line i, .sig-rail__line b, .sm-rail__line i { will-change: transform; }
/* ambient loops rest while their card is off screen */
[data-amb]:not([data-live])[data-bob], [data-amb]:not([data-live]) > [data-sweep] { animation-play-state: paused !important; }


/* ==========================================================================
   LIVING DOCUMENTS v18: tabs and contents markers glide; legal section rules draw themselves
   ========================================================================== */
.a-tabs.has-glide { position: relative; }
.a-tabs.has-glide .is-on, .a-tabs.has-glide [aria-selected="true"] { border-bottom-color: transparent !important; }
.a-tabs__glide { position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; border-radius: 2px; background: var(--a-accent, #E86A24); box-shadow: 0 0 12px rgba(232,106,36,.55); pointer-events: none; opacity: 0;
  transition: transform .55s cubic-bezier(.19,1,.22,1), width .55s cubic-bezier(.19,1,.22,1), opacity .3s ease; }
.a-tabs__glide.is-snap { transition: none; }
.lg-toc nav.has-glide { position: relative; }
.lg-toc nav.has-glide a.is-on { border-left-color: transparent; }
.toc-glide { position: absolute; left: -1px; top: 0; width: 2px; height: 0; border-radius: 2px; background: var(--a-accent, #E86A24); box-shadow: 0 0 10px rgba(232,106,36,.6); pointer-events: none; opacity: 0;
  transition: transform .6s cubic-bezier(.19,1,.22,1), height .6s cubic-bezier(.19,1,.22,1), opacity .3s ease; }
@media (prefers-reduced-motion: no-preference) {
  .lg-toc a { transition: color .3s, transform .45s cubic-bezier(.19,1,.22,1); }
  .lg-toc a:hover { transform: translateX(4px); }
  /* legal section rules draw from the left, a spark running ahead of the line */
  main .a-prose section.p-rule { border-top-color: transparent !important; position: relative; }
  main .a-prose section.p-rule::before { content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: rgba(255,255,255,.12); transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.4s cubic-bezier(.19,1,.22,1); }
  main .a-prose section.p-rule::after { content: ''; position: absolute; left: 0; top: -2px; width: 90px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, rgba(232,106,36,0), #F3A575); opacity: 0; pointer-events: none; }
  main .a-prose section.p-rule.is-drawn::before { transform: scaleX(1); }
  main .a-prose section.p-rule.is-drawn::after { animation: pSpark 1.4s cubic-bezier(.19,1,.22,1) forwards; }
  @keyframes pSpark { 0% { opacity: 0; transform: translateX(-90px); } 15% { opacity: 1; } 80% { opacity: .9; } 100% { opacity: 0; transform: translateX(calc(var(--pw, 640px) - 90px)); } }
}

/* ==========================================================================
   COOKIE CONSENT v19: a glass panel that rises from the bottom-left on a first visit
   ========================================================================== */
.sm-cookie { position: fixed; left: 24px; bottom: 24px; z-index: 1500; width: min(440px, calc(100vw - 32px)); padding: 22px 22px 18px; border-radius: 20px; color: #F4F1EC; font-family: var(--a-sans, 'Gellix', system-ui, sans-serif);
  background: linear-gradient(135deg, rgba(34,32,30,.82) 0%, rgba(16,15,14,.78) 100%); backdrop-filter: blur(24px) saturate(170%); -webkit-backdrop-filter: blur(24px) saturate(170%);
  border: 1px solid rgba(255,255,255,.14); box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 30px 80px rgba(0,0,0,.55); overflow: hidden;
  opacity: 0; transform: translate3d(0, 28px, 0) scale(.97); filter: blur(8px);
  transition: opacity .7s cubic-bezier(.19,1,.22,1), transform .9s cubic-bezier(.19,1,.22,1), filter .7s cubic-bezier(.19,1,.22,1); }
.sm-cookie.is-on { opacity: 1; transform: none; filter: none; }
.sm-cookie.is-off { opacity: 0; transform: translate3d(0, 22px, 0) scale(.98); filter: blur(6px); transition-duration: .45s; pointer-events: none; }
/* an ember light that drifts across the top edge once the panel lands */
.sm-cookie__glow { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, rgba(232,106,36,0), #F3A575 50%, rgba(232,106,36,0)); background-size: 50% 100%; background-repeat: no-repeat; background-position: -60% 0; opacity: 0; pointer-events: none; }
.sm-cookie.is-on .sm-cookie__glow { animation: smcGlow 2.4s .5s cubic-bezier(.45,0,.55,1) both; }
@keyframes smcGlow { 0% { opacity: 0; background-position: -60% 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; background-position: 160% 0; } }
.sm-cookie__t { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.sm-cookie__dot { width: 8px; height: 8px; border-radius: 999px; background: #E86A24; box-shadow: 0 0 0 0 rgba(232,106,36,.6); animation: sm-live 2.2s ease-out infinite; flex: 0 0 auto; }
.sm-cookie__d { margin: 10px 0 0; font-size: 14px; line-height: 1.6; color: #C4BAB2; }
.sm-cookie__d a { color: #F3A575; text-decoration: underline; text-decoration-color: rgba(243,165,117,.4); text-underline-offset: 3px; }
.sm-cookie__d a:hover { color: #fff; }
/* categories open with a smooth height animation (grid rows 0fr → 1fr) */
.sm-cookie__prefs { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s cubic-bezier(.19,1,.22,1), opacity .4s; opacity: 0; }
.sm-cookie.is-prefs .sm-cookie__prefs { grid-template-rows: 1fr; opacity: 1; }
.sm-cookie__prefs-in { overflow: hidden; min-height: 0; }
.sm-cookie__opt { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid rgba(255,255,255,.08); }
.sm-cookie__opt:first-child { margin-top: 14px; }
.sm-cookie__opt b { display: block; font-size: 14px; font-weight: 600; }
.sm-cookie__opt small { display: block; margin-top: 3px; font-size: 12px; line-height: 1.5; color: #9B918A; }
.sm-tog { position: relative; flex: 0 0 auto; width: 42px; height: 24px; cursor: pointer; }
.sm-tog input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: inherit; }
.sm-tog span { position: absolute; inset: 0; border-radius: 999px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.16); transition: background .35s, border-color .35s; }
.sm-tog span::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 999px; background: #F4F1EC; box-shadow: 0 2px 6px rgba(0,0,0,.4); transition: transform .45s cubic-bezier(.19,1,.22,1); }
.sm-tog input:checked + span { background: linear-gradient(180deg, #F3A575, #E86A24); border-color: rgba(255,255,255,.3); }
.sm-tog input:checked + span::after { transform: translateX(18px); }
.sm-tog input:disabled + span { opacity: .55; }
.sm-tog input:focus-visible + span { outline: 2px solid #F3A575; outline-offset: 2px; }
.sm-cookie__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
.sm-cookie__btns { display: flex; gap: 8px; margin-left: auto; }
.sm-cookie__btn { font: 600 13px/1 inherit; font-family: inherit; padding: 11px 16px; border-radius: 999px; cursor: pointer; color: #fff; white-space: nowrap;
  background: linear-gradient(135deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.02) 100%); border: 1px solid rgba(255,255,255,.2); box-shadow: inset 0 1px 0 rgba(255,255,255,.3);
  transition: background .3s, border-color .3s, transform .4s cubic-bezier(.19,1,.22,1), box-shadow .3s; }
.sm-cookie__btn:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.45); transform: translateY(-1px); }
.sm-cookie__btn.is-solid { border-color: rgba(255,255,255,.28); background: linear-gradient(180deg, rgba(243,165,117,.95) 0%, rgba(232,106,36,.92) 55%, rgba(203,83,26,.95) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 10px 26px rgba(232,106,36,.32); }
.sm-cookie__btn.is-solid:hover { background: #CB531A; box-shadow: 0 14px 36px rgba(232,106,36,.5); }
.sm-cookie__btn:focus-visible, .sm-cookie__link:focus-visible { outline: 2px solid #F3A575; outline-offset: 3px; }
.sm-cookie__link { background: none; border: 0; padding: 6px 0; font: 600 13px/1 inherit; font-family: inherit; color: #C4BAB2; cursor: pointer; border-bottom: 1px solid rgba(196,186,178,.35); }
.sm-cookie__link:hover { color: #fff; border-bottom-color: #F3A575; }
.sm-cookie__link .b, .sm-cookie.is-prefs .sm-cookie__link .a { display: none; }
.sm-cookie.is-prefs .sm-cookie__link .b { display: inline; }
.sm-cookie.is-prefs .sm-cookie__link { color: #F3A575; border-bottom-color: rgba(243,165,117,.5); }
/* footer link that reopens it */
.sm-foot-btn { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.sm-foot-btn:hover { color: var(--ember-300, #F3A575); }
@media (max-width: 560px) {
  .sm-cookie { left: 12px; right: 12px; bottom: 12px; width: auto; padding: 18px 16px 14px; border-radius: 20px; }
  .sm-cookie__btns { width: 100%; margin-left: 0; }
  .sm-cookie__btn { flex: 1; text-align: center; }
  .sm-cookie__row { flex-direction: column-reverse; align-items: stretch; }
  .sm-cookie__link { align-self: center; }
}
@media (prefers-reduced-motion: reduce) { .sm-cookie, .sm-cookie.is-off { transition: opacity .2s; transform: none; filter: none; } .sm-cookie__glow, .sm-cookie__dot { animation: none; } }

/* ==========================================================================
   HOVER v20: a liquid-glass capsule behind clickable text; text warms to ember, ember text cools to white
   ========================================================================== */
.sm-hglass { position: fixed; left: 0; top: 0; z-index: 1600; width: 0; height: 0; pointer-events: none; opacity: 0; border-radius: 12px;
  background: linear-gradient(135deg, rgba(255,255,255,.11) 0%, rgba(255,255,255,.035) 46%, rgba(255,255,255,.07) 100%);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.38), inset 0 -10px 18px -12px rgba(255,255,255,.16), 0 10px 26px rgba(0,0,0,.28), 0 0 22px rgba(232,106,36,.12);
  /* a gentle overshoot so it moves like liquid between links */
  transition: transform .55s cubic-bezier(.3,1.32,.5,1), width .55s cubic-bezier(.3,1.32,.5,1), height .5s cubic-bezier(.3,1.32,.5,1), border-radius .4s ease, opacity .28s ease; }
.sm-hglass.is-on { opacity: 1; }
.sm-hglass.is-snap { transition: opacity .28s ease; }
/* appearing from nothing, it swells into place instead of popping in */
.sm-hglass.is-enter { animation: smGlassIn .5s cubic-bezier(.2, .8, .2, 1); }
@keyframes smGlassIn { from { scale: .82; opacity: 0; } }
/* a specular highlight that follows the pointer across the glass */
.sm-hglass i { position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(70px 40px at var(--gx, 50%) 0%, rgba(255,255,255,.32), rgba(255,255,255,0) 70%); opacity: .9; }
.sm-hglass.on-light { background: linear-gradient(135deg, rgba(11,11,12,.07), rgba(11,11,12,.025)); border-color: rgba(11,11,12,.14); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 8px 22px rgba(20,19,18,.12); }
.sm-hglass.on-light i { background: radial-gradient(70px 40px at var(--gx, 50%) 0%, rgba(255,255,255,.8), rgba(255,255,255,0) 70%); }
/* dropdown items now use the glass instead of their own fill */
.sm-menu a:hover { background: transparent; }
.sm-menu a { transition: background 160ms, color .35s ease; }

@media (hover: hover) and (pointer: fine) {
  /* colour changes ease in and out (only where an element has no transition of its own) */
  :where(main, .sm-footer, .sm-header, .sm-cookie, .sm-mnav) :where(a, button, h1, h2, h3, h4, h5, h6, p, li, dt, dd, blockquote, figcaption, label, small, td, th, b, strong, em) { transition: color .35s ease; }
  /* text warms to ember while the pointer is on it */
  /* (specificity is kept low on purpose so the two rules below win where they apply) */
  :is(main, .sm-footer, .sm-header, .sm-cookie) :is(a, button, h1, h2, h3, h4, h5, h6, p, li, dt, dd, blockquote, figcaption, label, small, td, th):where(:not(.btn-primary, .a-btn--solid, .is-solid, [style*="rgba(243,165,117,.92)"], [style*="background:#E86A24"])):hover { color: #EE8747 !important; }
  /* text that is already ember cools to white */
  :is(main, .sm-footer, .sm-header, .sm-cookie) :is(.a-label, .a-accent, .is-accent, .kicker, .sm-cookie__d a, [style*="color:#E86A24"], [style*="color:#EE8747"], [style*="color:#F3A575"], [style*="color:#CB531A"], [style*="color:#A44014"], h1 em, h2 em, .a-h1 em, .a-h2 em, .a-display em):hover { color: #FFFFFF !important; }
  /* on light surfaces: warm text stays ember, ember text deepens to ink instead of white */
  :is([data-light], .band-light, body[data-surface="paper"]) :is(.a-label, .a-accent, .is-accent, [style*="color:#E86A24"], [style*="color:#EE8747"], [style*="color:#F3A575"], [style*="color:#CB531A"], [style*="color:#A44014"]):hover { color: #141312 !important; }
  :is([data-light], .band-light) :is(a, h1, h2, h3, h4, p, li):not([style*="color:#"]):hover { color: #CB531A !important; }
  /* solid ember buttons keep white text: the button itself answers the hover */
  :is(.btn-primary, .a-btn--solid, .sm-cookie__btn.is-solid):hover, :is(.btn-primary, .a-btn--solid, .sm-cookie__btn.is-solid):hover * { color: #FFFFFF !important; }
}

/* homepage partner and capability strip (driven by stripEngine() in site.js). --b is an item's closeness to the
   pointer (0..1, it swells and brightens), --e is how close it is to being the item under the pointer (it warms to
   ember). A glass lens sits behind the rows; the ends fade into the dark. */
section:has(> [data-mq]) { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%); }
.mq-eng { touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.mq-eng > [data-mq] { position: relative; z-index: 1; }
.mq-logo { position: relative; display: inline-flex; align-items: center; transform: scale(calc(1 + var(--b, 0) * .14)); transform-origin: 50% 50%; -webkit-user-drag: none; }
.mq-logo img { opacity: calc(.4 + var(--b, 0) * .5) !important; transition: none !important; pointer-events: none; }
.mq-logo img.e { position: absolute; left: 0; top: 50%; translate: 0 -50%; opacity: var(--e, 0) !important;
  filter: brightness(0) saturate(100%) invert(52%) sepia(86%) saturate(1950%) hue-rotate(348deg) brightness(96%) contrast(92%) drop-shadow(0 0 10px rgba(232,106,36,.5)) !important; }
section [data-mq] a.mq-word { color: color-mix(in srgb, #E86A24 calc(var(--e, 0) * 100%), color-mix(in srgb, #F4F1EC calc(var(--b, 0) * 85%), #3A3532)) !important;
  display: inline-block; transform: scale(calc(1 + var(--b, 0) * .08)); text-decoration: none; text-shadow: 0 0 calc(var(--e, 0) * 26px) rgba(232,106,36,.5); transition: none; }
.mq-lens { position: absolute; left: 0; top: 0; z-index: 0; width: 0; height: 0; border-radius: 999px; pointer-events: none; opacity: 0; transform-origin: 50% 50%;
  background: linear-gradient(135deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,.04) 46%, rgba(255,255,255,.08) 100%);
  border: 1px solid rgba(243,165,117,.35);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), inset 0 -10px 20px -12px rgba(255,255,255,.18), 0 0 34px rgba(232,106,36,.25), 0 14px 34px rgba(0,0,0,.35);
  backdrop-filter: blur(6px) saturate(160%); -webkit-backdrop-filter: blur(6px) saturate(160%); }
.mq-lens i { position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(80px 46px at var(--gx, 50%) 0%, rgba(255,255,255,.35), rgba(255,255,255,0) 70%); }
/* while dragging the logo strip it shows a grab hand */
body.mq-dragging, body.mq-dragging .mq-eng, body.mq-dragging .mq-eng a { cursor: grabbing !important; }
.mq-logo:focus-visible, .mq-word:focus-visible { outline: 2px solid #F3A575; outline-offset: 6px; border-radius: 10px; }

/* hover states that used to snap: buttons now ease their glow, fill and lift */
.a-btn { transition: background .5s var(--a-ease, cubic-bezier(.19,1,.22,1)), color .5s var(--a-ease, cubic-bezier(.19,1,.22,1)), border-color .5s var(--a-ease, cubic-bezier(.19,1,.22,1)), box-shadow .5s var(--a-ease, cubic-bezier(.19,1,.22,1)), transform .5s cubic-bezier(.19,1,.22,1); }
.sm-header .btn-primary { transition: opacity .45s cubic-bezier(.19,1,.22,1), transform .6s cubic-bezier(.19,1,.22,1), background .35s ease, box-shadow .35s ease, border-color .35s ease, color .35s ease; }

/* ==========================================================================
   FLUIDITY v22: pointer light on cards, liquid glass fills on buttons, sections that flow in
   ========================================================================== */
/* a warm light that follows the pointer across a card, and an edge that lights up nearest the pointer */
.sm-light { position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none; opacity: 0; overflow: hidden; transition: opacity .6s cubic-bezier(.19,1,.22,1); mix-blend-mode: screen; }
.sm-light i { position: absolute; left: 0; top: 0; width: 640px; height: 640px; border-radius: 50%; will-change: transform;
  background: radial-gradient(closest-side, rgba(243,165,117,.17), rgba(232,106,36,.05) 62%, transparent 100%); }
.sm-light b { position: absolute; inset: 0; border-radius: inherit; padding: 1px; overflow: hidden;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.sm-light u { position: absolute; left: 0; top: 0; width: 440px; height: 440px; border-radius: 50%; will-change: transform;
  background: radial-gradient(closest-side, rgba(243,165,117,.95), rgba(243,165,117,0)); }
.is-lit > .sm-light { opacity: 1; }
.ab-person > .sm-light, .ab-person .a-img { border-radius: 20px; }
/* glass buttons fill with ember glass from where the pointer came in, and drain towards where it left */
:is(.a-btn:not(.a-btn--solid), .sm-cookie__btn:not(.is-solid)) { position: relative; overflow: hidden; isolation: isolate; }
:is(.a-btn:not(.a-btn--solid), .sm-cookie__btn:not(.is-solid))::before { content: ''; position: absolute; z-index: -1; left: var(--bx, 50%); top: var(--by, 50%); width: 300%; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(232,106,36,.34) 0%, rgba(232,106,36,.18) 45%, rgba(232,106,36,.06) 70%, transparent 72%);
  transform: translate(-50%, -50%) scale(0); transition: transform .7s cubic-bezier(.19,1,.22,1); }
:is(.a-btn:not(.a-btn--solid), .sm-cookie__btn:not(.is-solid)):hover::before { transform: translate(-50%, -50%) scale(1); }
/* sections rise and settle from a little depth as they come onto the screen (the browser's own scroll timeline;
   applied only while entering, so sticky sidebars and pinned sections are untouched afterwards) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    main > section:not(:first-child):not(.cine-hero):not([data-hpin]):not(.h-pin), main > .lg-doc, main > div > section:not(:first-child):not([data-hpin]) {
      animation: smFlowIn linear backwards; animation-timeline: view(); animation-range: entry 0% entry 85%; }
    @keyframes smFlowIn { from { opacity: .35; translate: 0 70px; scale: .975; } to { opacity: 1; translate: 0 0; scale: 1; } }
  }
}
/* a filled glass button keeps white text so it reads against its ember fill */
@media (hover: hover) and (pointer: fine) { :is(.a-btn:not(.a-btn--solid), .sm-cookie__btn):hover { color: #FFFFFF !important; } }

/* ==========================================================================
   v23: the glass blob is the only cursor; seamless film loops
   ========================================================================== */
@media (hover: hover) and (pointer: fine) {
  html.sm-nocursor, html.sm-nocursor * { cursor: none !important; }
  /* typing still shows the system caret and I-beam, so editing text never guesses */
  html.sm-nocursor :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]), textarea, select, [contenteditable="true"]) { cursor: text !important; }
  html.sm-nocursor select { cursor: default !important; }
}
body.mq-dragging, body.mq-dragging .mq-eng, body.mq-dragging .mq-eng a { cursor: none !important; }
.sm-loop { pointer-events: none; }
.sm-loop > video { object-fit: cover; }

/* ==========================================================================
   CINEMA v24 (prototype): aperture hero, depth-stacked practices, card-to-hero page morphs (site/cinema.js)
   ========================================================================== */
/* aperture: the headline leaves as the film starts to part (--hp 0→1, set per scroll frame) */
.is-aperture [data-hero-inner] > * { opacity: calc(1 - var(--hp, 0)); translate: 0 calc(var(--hp, 0) * -70px); filter: blur(calc(var(--hp, 0) * 6px)); }
/* a film's own words leave as a group (their children carry their own entrance opacity, so the group fades instead) */
.is-aperture .a-film__in { opacity: calc(1 - var(--hp, 0)); translate: 0 calc(var(--hp, 0) * -70px); visibility: visible; }
.ap-time--none { color: #9B918A !important; font-size: clamp(18px, 1.6vw, 24px) !important; }
/* film moments become aperture tracks: the film pins while it opens, then the page carries on */
.ap-film { position: relative; height: 270vh; margin: clamp(32px, 4vw, 72px) 0 clamp(72px, 7vw, 140px); }
.ap-film > .a-film { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 0; margin: 0; }
/* the opening: real content, arriving in a wave as the film parts */
.ap-gap { position: absolute; left: 0; right: 0; top: 50%; z-index: 5; transform: translateY(-50%); pointer-events: none; }
.ap-in { width: min(1320px, 100% - 2 * clamp(20px, 4.6vw, 88px)); margin: 0 auto; }
.ap-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: clamp(16px, 2.2vh, 28px); opacity: 0; }
.ap-kicker { margin: 0; font: 600 12px/1.2 'Gellix', system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #EE8747; }
.ap-all { font: 600 13px/1 'Gellix', system-ui, sans-serif; color: #F4F1EC; text-decoration: none; border-bottom: 1px solid rgba(243,165,117,.5); padding-bottom: 4px; }
.ap-grid { display: grid; gap: clamp(10px, 1.2vw, 16px); }
.ap-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ap-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ap-item { position: relative; display: grid; align-content: start; gap: 8px; min-height: clamp(96px, 15vh, 150px); padding: clamp(14px, 1.6vw, 22px); border-radius: 20px; text-decoration: none; color: #F4F1EC; opacity: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.02) 46%, rgba(255,255,255,.05) 100%); border: 1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 20px 50px rgba(0,0,0,.35); backdrop-filter: blur(12px) saturate(160%); -webkit-backdrop-filter: blur(12px) saturate(160%);
  transition: border-color .4s, background .4s, box-shadow .4s; }
a.ap-item:hover { border-color: rgba(243,165,117,.55); background: linear-gradient(135deg, rgba(232,106,36,.16), rgba(255,255,255,.03)); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 0 34px rgba(232,106,36,.2), 0 24px 60px rgba(0,0,0,.4); }
.ap-item b { font: 700 clamp(15px, 1.25vw, 19px)/1.2 'Gellix', system-ui, sans-serif; letter-spacing: -.01em; }
.ap-item small { font: 400 13px/1.5 'Gellix', system-ui, sans-serif; color: #C4BAB2; }
.ap-item .icon { width: 22px; height: 22px; color: #F3A575; }
.ap-n { font: 600 11px/1 'Gellix', system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #9B918A; }
.ap-time, .ap-num { font: 800 clamp(26px, 2.6vw, 44px)/1 'Gellix', system-ui, sans-serif; letter-spacing: -.03em; color: #F3A575; font-variant-numeric: tabular-nums; }
.ap-what { color: #F4F1EC !important; }
.ap-logo { height: 28px; display: flex; align-items: center; }
.ap-logo img { max-height: 26px; max-width: 120px; object-fit: contain; filter: brightness(0) invert(1); opacity: .85; }
.ap-go { position: absolute; right: 18px; top: 18px; width: 16px; height: 1px; background: currentColor; opacity: .5; transition: transform .5s cubic-bezier(.19,1,.22,1), opacity .3s; }
.ap-go::after { content: ''; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }
a.ap-item:hover .ap-go { transform: translateX(4px); opacity: 1; color: #F3A575; }
@media (max-width: 900px) { .ap-grid--3, .ap-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ap-item small { display: none; } .ap-item { min-height: 0; } }
/* reduced motion: nothing pins; the content simply sits under the film */
.ap-static { height: auto; }
.ap-static > .a-film { position: relative; height: auto; min-height: 100vh; }
.ap-static .ap-gap { position: relative; top: auto; transform: none; padding: 48px 0 0; pointer-events: auto; }
.ap-static .ap-head, .ap-static .ap-item { opacity: 1; }
/* page morphs: the named card on the old page becomes the hero backdrop on the new one */
.cine-hero > .cine-bg { view-transition-name: sm-morph; }
::view-transition-group(sm-morph) { animation-duration: .95s; animation-timing-function: cubic-bezier(.7,0,.16,1); z-index: 2; }
::view-transition-old(sm-morph), ::view-transition-new(sm-morph) { animation-duration: .95s; height: 100%; width: 100%; object-fit: cover; }
::view-transition-old(sm-morph) { animation-name: smMorphOut; }
::view-transition-new(sm-morph) { animation-name: smMorphIn; }
@keyframes smMorphOut { to { opacity: 0; } }
@keyframes smMorphIn { from { opacity: 0; } }
/* while a card grows, the rest of the old page falls back and darkens, and the new page rises behind it */
html.sm-morphed::view-transition-old(root) { animation: smRootBack .6s cubic-bezier(.7,0,.84,0) both; }
@keyframes smRootBack { to { opacity: 0; transform: scale(.94); filter: brightness(.4) blur(4px); } }
@media (prefers-reduced-motion: reduce) { ::view-transition-group(sm-morph), ::view-transition-old(sm-morph), ::view-transition-new(sm-morph) { animation: none; } }

/* ==========================================================================
   v25: the cursor is a single GPU layer that carries over page changes; persistent chrome during page morphs
   ========================================================================== */
[data-cursor] { will-change: transform; contain: layout style; view-transition-name: sm-cursor; }
.sm-header { view-transition-name: sm-header; }
.sm-progress { view-transition-name: sm-progress; }
.sm-rail { view-transition-name: sm-rail; }
/* the cursor, header, progress line and rail hold still while the page underneath changes */
::view-transition-group(sm-cursor) { animation: none; z-index: 100; }
::view-transition-old(sm-cursor) { display: none; }
::view-transition-new(sm-cursor) { animation: none; }
::view-transition-group(sm-header), ::view-transition-group(sm-rail), ::view-transition-group(sm-progress) { animation-duration: .7s; animation-timing-function: cubic-bezier(.7,0,.16,1); z-index: 50; }
::view-transition-old(sm-header), ::view-transition-new(sm-header), ::view-transition-old(sm-rail), ::view-transition-new(sm-rail) { animation-duration: .45s; }

/* glass that would move every frame is the most expensive thing a browser draws: */
[data-orb] { filter: none !important; }                       /* the glow orbs already fade out softly; no live blur */
[data-bob] { animation: none !important; }                    /* bobbing glass cards stay still (reveal, tilt, sheen and sweep remain) */
.mq-lens { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: linear-gradient(135deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.05) 46%, rgba(255,255,255,.1) 100%) !important; }
/* the homepage hero takes part in page morphs too, so going home flows like every other page change */
[data-hero-media] { view-transition-name: sm-morph; }

/* ==========================================================================
   v26: page changes as one continuous surface. One curve for everything (fast out of the gate, a long soft landing),
   no blur, the old page and the new one crossfading at the same time so there is never an empty frame.
   ========================================================================== */
::view-transition-old(root), html.sm-morphed::view-transition-old(root) { animation: smOldOut .52s cubic-bezier(.32,.72,0,1) both; }
::view-transition-new(root), html.sm-morphed::view-transition-new(root) { animation: smNewIn .78s cubic-bezier(.32,.72,0,1) both; }
@keyframes smOldOut { to { opacity: 0; transform: scale(.965); } }
@keyframes smNewIn { from { opacity: 0; transform: scale(1.025); } }
::view-transition-group(sm-morph) { animation-duration: .78s; animation-timing-function: cubic-bezier(.32,.72,0,1); }
::view-transition-old(sm-morph), ::view-transition-new(sm-morph) { animation-duration: .78s; animation-timing-function: cubic-bezier(.32,.72,0,1); }
::view-transition-group(sm-header), ::view-transition-group(sm-rail), ::view-transition-group(sm-progress) { animation-duration: .78s; animation-timing-function: cubic-bezier(.32,.72,0,1); }
@media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; } }

/* ==========================================================================
   v29: glass only where it shows. A pixel audit (with and without the blur) found these blur nothing visible —
   they sit on the plain dark ground or are near-opaque — so they keep their look without paying for a live blur.
   ========================================================================== */
.a-btn--solid, .btn-glass, [data-more-btn], [data-more], .a-figures > div, .sm-footer .btn { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }

/* ==========================================================================
   v30: colour back in. Hero backdrops show their real colour (they were held at 55% grey and 20% strength);
   the dark scrim above them keeps every headline readable.
   ========================================================================== */
.cine-bg img { opacity: .4 !important; filter: saturate(1.18) contrast(1.06) !important; }
@media (prefers-reduced-motion: no-preference) {
  .cine-bg img { animation: smFocusColour 2.2s cubic-bezier(.19,1,.22,1) both !important; }
  @keyframes smFocusColour { from { filter: saturate(1.18) contrast(1.06) blur(14px); transform: scale(1.08); } to { filter: saturate(1.18) contrast(1.06) blur(0); transform: scale(1); } }
}
.cine-bg .cine-scrim { background: linear-gradient(180deg, rgba(11,11,12,.66) 0%, rgba(11,11,12,.26) 38%, rgba(11,11,12,.7) 78%, rgba(11,11,12,.92) 100%) !important; }

/* ==========================================================================
   v31: the ground behind a page change is the site's own ink, so the moment between two pages is never a light flash.
   ========================================================================== */
::view-transition { background: #0B0B0C; }

/* ==========================================================================
   v32: phones. The openings are shorter (less film to scroll through before anything appears), the tile arrows sit
   in the corner below the words instead of over them, and the homepage hero buttons keep their labels on one line.
   ========================================================================== */
@media (max-width: 700px) {
  .ap-film { height: 190vh; }
  .ap-item { padding: 14px 14px 30px; }
  .ap-go { top: auto; bottom: 16px; right: 14px; }
  .ap-n { padding-right: 0; }
  .ap-logo img { max-width: 100%; }
  [data-screen-label="Hero"] div:has(> a[data-magnet]) { flex-wrap: wrap !important; }
  [data-screen-label="Hero"] a[data-magnet] { padding: 14px 20px !important; font-size: 14px !important; white-space: nowrap; }
}
/* the cookie panel steps aside while the menu or search is open (it covered the menu's own button), and returns after */
html.sm-mnav-open .sm-cookie, html.sm-search-open .sm-cookie { opacity: 0 !important; visibility: hidden; pointer-events: none; transition: opacity .25s, visibility 0s .25s; }

/* ==========================================================================
   v33: the homepage signal (site/signal.js). On a first visit the opening stands in for the loader: a dark stage
   with the lines and a quiet status line under the connection; afterwards the same canvas is the hero's backdrop,
   added to the film as light.
   ========================================================================== */
.sm-signal-stage { position: fixed; inset: 0; z-index: 2000; background: #0B0B0C; transition: background-color .2s; }
.sm-signal-stage.is-out { background: transparent; pointer-events: none; }
canvas.sm-signal { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
[data-screen-label="Hero"] > canvas.sm-signal { mix-blend-mode: screen; }
.sm-sig-status { position: absolute; left: 74.5%; top: calc(33% + 74px); transform: translateX(-50%); display: inline-flex; align-items: center; gap: 12px;
  padding: 10px 16px 10px 14px; border-radius: 999px; font: 600 11px/1 'Gellix', system-ui, sans-serif; letter-spacing: .18em; text-transform: uppercase; white-space: nowrap;
  color: #9B918A; background: rgba(11,11,12,.42); border: 1px solid rgba(255,255,255,.09); opacity: 0; transition: opacity .7s cubic-bezier(.19,1,.22,1), color .3s, border-color .4s; }
.sm-sig-status.is-on { opacity: 1; }
.sm-sig-status.is-locked { color: #F4F1EC; border-color: rgba(243,165,117,.42); }
.sm-sig-status .bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.sm-sig-status .bars i { width: 3px; border-radius: 1px; background: rgba(255,255,255,.16); transition: background-color .12s; }
.sm-sig-status .bars i:nth-child(1) { height: 4px; } .sm-sig-status .bars i:nth-child(2) { height: 6px; } .sm-sig-status .bars i:nth-child(3) { height: 9px; } .sm-sig-status .bars i:nth-child(4) { height: 12px; }
.sm-sig-status .bars i.on { background: #F3A575; }
.sm-sig-status .ms { color: #736B65; letter-spacing: .06em; font-variant-numeric: tabular-nums; min-width: 6ch; }
.sm-sig-status.is-locked .ms { color: #F3A575; }
.sm-signal-stage.is-out .sm-sig-status { opacity: 0; transition: opacity .5s .15s; }
@media (max-aspect-ratio: 11/10) { .sm-sig-status { left: 68%; top: calc(30% + 70px); } }
@media (max-aspect-ratio: 4/5) { .sm-sig-status { left: 62%; top: calc(24% + 66px); } }
@media (max-width: 420px) { .sm-sig-status { left: 50%; } }
/* until the page is revealed, the glass cursor is hidden with the rest of the page (loader, capsule, the signal opening):
   the system cursor stays, so there is never a moment with no cursor at all */
html.sm-nocursor:not(.sm-shown), html.sm-nocursor:not(.sm-shown) * { cursor: auto !important; }

/* ==========================================================================
   v34: the homepage hero is a still of Earth at night from orbit, under the signal lines. It drifts very slowly, as
   if the camera were still in orbit, and is shown a little brighter than the old film (it is dark to begin with).
   ========================================================================== */
[data-screen-label="Hero"] [data-hero-media] > img { opacity: .78 !important; transform-origin: 70% 40%; }
@media (prefers-reduced-motion: no-preference) {
  [data-screen-label="Hero"] [data-hero-media] > img { animation: smOrbit 48s cubic-bezier(.45,0,.55,1) infinite alternate; }
  @keyframes smOrbit { from { transform: scale(1.04) translate3d(0, 0, 0); } to { transform: scale(1.13) translate3d(-1.6%, .8%, 0); } }
}
/* film moments as stills: the photograph drifts like a slow camera move, and the index line breathes in time */
.a-film__media > img.a-film__still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #0B0B0C; opacity: .62; }
@media (prefers-reduced-motion: no-preference) {
  .a-film__media > img.a-film__still { animation: smStillDrift 30s cubic-bezier(.45,0,.55,1) infinite alternate; }
  @keyframes smStillDrift { from { transform: scale(1) translate3d(0, 0, 0); } to { transform: scale(1.08) translate3d(-1.5%, -1%, 0); } }
  .a-film--still .a-film__idx b { animation: smStillBar 9s linear infinite; }
  @keyframes smStillBar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}

/* ==========================================================================
   v35: page changes as ink, and droplets in the page (site/fx.js).
   A drop of ink blooms from where the visitor clicked (site/vt.js places it), spreads until it has covered the page
   being left, and clears to show the new one; the card that was clicked stays above the ink as it grows into the next
   page's hero, and the header holds still throughout. Only transform and opacity move (the drop is one small image,
   scaled), so the whole change runs on the graphics card instead of redrawing the screen every frame.
   ========================================================================== */
.sm-vt-ink {
  position: fixed; z-index: 2147482000; width: 64vmax; height: 64vmax; margin: -32vmax 0 0 -32vmax; pointer-events: none;
  background: radial-gradient(closest-side, #0B0B0C 0%, #0B0B0C 66%, #1A120E 74%, #0B0B0C 80%);
  -webkit-mask: url(../assets/fx/drop-a.png) center / contain no-repeat; mask: url(../assets/fx/drop-a.png) center / contain no-repeat;
  view-transition-name: sm-ink; opacity: 0;
}
html:active-view-transition .sm-vt-ink, html.sm-vt .sm-vt-ink { opacity: 1; }
::view-transition-group(sm-ink) { animation: none; z-index: 2; }
::view-transition-old(sm-ink) { display: none; }
::view-transition-new(sm-ink) { animation: smInk 1.5s cubic-bezier(.55, .05, .25, 1) both; transform-origin: 50% 50%; }
@keyframes smInk {
  0%   { transform: scale(.02); opacity: 1; }
  46%  { transform: scale(4.8); opacity: 1; }
  100% { transform: scale(5.6); opacity: 0; }
}
/* the page being left sinks a little as the ink takes it; the new one settles in as the ink clears */
::view-transition-old(root), html.sm-morphed::view-transition-old(root) { animation: smInkOld 1.5s cubic-bezier(.45, 0, .2, 1) both; }
::view-transition-new(root), html.sm-morphed::view-transition-new(root) { animation: smInkNew 1.5s cubic-bezier(.2, .6, .2, 1) both; }
@keyframes smInkOld { 0% { transform: none; opacity: 1; } 44% { transform: scale(.975); opacity: 1; } 48%, 100% { transform: scale(.975); opacity: 0; } }
@keyframes smInkNew { 0%, 44% { transform: scale(1.03); opacity: 0; } 48% { transform: scale(1.03); opacity: 1; } 100% { transform: none; opacity: 1; } }
/* what travels between the pages stays above the ink and moves on the same slow curve */
::view-transition-group(sm-morph) { z-index: 3; }
::view-transition-group(sm-morph), ::view-transition-old(sm-morph), ::view-transition-new(sm-morph),
::view-transition-group(sm-header), ::view-transition-group(sm-rail), ::view-transition-group(sm-progress) {
  animation-duration: 1.3s; animation-timing-function: cubic-bezier(.62, .02, .22, 1);
}
@media (prefers-reduced-motion: reduce) {
  .sm-vt-ink { display: none; }
  ::view-transition-old(root), html.sm-morphed::view-transition-old(root), ::view-transition-new(root), html.sm-morphed::view-transition-new(root) { animation: none !important; }
}

/* droplets in the page: a hero photograph melts into the page as it leaves; a few closing sections carry slow,
   living ember droplets; statements resolve out of frosted glass, word by word, and frost away again as they go */
.sm-drops { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.sm-trim { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: screen; opacity: .6; }
.sm-g { display: inline-block; }   /* site/fx.js gives a word will-change only while it resolves */

/* ==========================================================================
   v36: the cursor, rebuilt. One drop of painted glass on every page (site.js cursor()), the homepage included; its
   inline styles are overridden here. Nothing here transitions the position: the drop is exact, so it never trails the
   hand, and there is no backdrop filter, which re-rendered the page under the drop every frame and made it stutter.
   The drop's own loop sets transform and opacity; the classes below only change its look.
   ========================================================================== */
html body [data-cursor][data-cursor] {
  position: fixed !important; left: 0 !important; top: 0 !important; z-index: 9998 !important; pointer-events: none !important;
  width: 34px !important; height: 34px !important; margin: -17px 0 0 -17px !important; border-radius: 50% !important;
  border: 1px solid rgba(255,255,255,.34) !important; mix-blend-mode: normal !important;
  background: radial-gradient(120% 120% at 30% 24%, rgba(255,255,255,.22) 0%, rgba(255,255,255,.06) 40%, rgba(255,255,255,.015) 68%, rgba(255,255,255,.08) 100%) !important;
  box-shadow: inset 0 1px 1.5px rgba(255,255,255,.7), inset 0 -2px 6px rgba(243,165,117,.14), 0 6px 16px -2px rgba(0,0,0,.4) !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  transition: opacity .22s ease, border-color .3s ease, background .3s ease, box-shadow .3s ease !important;
  will-change: transform, opacity; contain: size layout style;   /* not paint: that would clip the rim (::after), which sits on the border */
}
html body [data-cursor][data-cursor].is-instant { transition: none !important; }
html body [data-cursor][data-cursor]::before {
  content: ''; position: absolute; left: 18%; top: 10%; width: 42%; height: 26%; border-radius: 50%; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.66), rgba(255,255,255,0)); transform: rotate(-18deg); opacity: .9; transition: opacity .3s ease;
}
html body [data-cursor][data-cursor]::after {
  content: ''; position: absolute; inset: -1px; border-radius: 50%; padding: 1px; pointer-events: none; transition: opacity .3s ease;
  background: conic-gradient(from 200deg, rgba(255,255,255,.7), rgba(255,255,255,0) 22%, rgba(243,165,117,.5) 52%, rgba(255,255,255,0) 74%, rgba(255,255,255,.55));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
/* over something clickable: the drop swells (its loop scales it) and thins, so the words under it stay readable */
html body [data-cursor][data-cursor].is-hot {
  border-color: rgba(255,255,255,.4) !important;
  background: radial-gradient(120% 120% at 30% 24%, rgba(255,255,255,.1) 0%, rgba(255,255,255,.015) 52%, rgba(255,255,255,.05) 100%) !important;
  box-shadow: inset 0 1px 1px rgba(255,255,255,.45), 0 8px 22px -6px rgba(0,0,0,.35) !important;
}
html body [data-cursor][data-cursor].is-hot::before { opacity: .45; }
/* over the menu bar and the logo strip: a small bright bead, so the menu's own hover shows */
html body [data-cursor][data-cursor].is-dot {
  border-color: rgba(255,255,255,.65) !important;
  background: radial-gradient(circle at 35% 30%, #FFFFFF 0%, rgba(255,255,255,.92) 55%, rgba(243,165,117,.85) 100%) !important;
  box-shadow: 0 0 10px rgba(243,165,117,.45) !important;
}
html body [data-cursor][data-cursor].is-dot::before, html body [data-cursor][data-cursor].is-dot::after { opacity: 0; }
/* on light sections the glass takes a darker rim so it stays visible */
html body [data-cursor][data-cursor].on-light:not(.is-dot) {
  border-color: rgba(11,11,12,.38) !important;
  background: radial-gradient(120% 120% at 30% 24%, rgba(255,255,255,.55) 0%, rgba(255,255,255,.16) 45%, rgba(11,11,12,.05) 100%) !important;
  box-shadow: inset 0 1px 1px rgba(255,255,255,.9), 0 6px 16px -4px rgba(20,19,18,.25) !important;
}
@media (hover: none), (prefers-reduced-motion: reduce) { html body [data-cursor][data-cursor] { display: none !important; } }


/* ==========================================================================
   v37: no hard lines between sections. Where a section's photograph, glow or star field meets the next section, it
   now fades into the page's ink over the last stretch instead of stopping on a straight edge (a glow cut off by its
   section, a pinned photograph whose bottom edge shows as the pin lets go, a photo panel starting abruptly).
   ========================================================================== */
:root { --sm-feather: min(clamp(72px, 12vh, 150px), clamp(112px, 8.5vw, 168px)); }   /* never deeper than those sections' padding */
/* homepage sections with glows, fields and photographs behind them; each has at least 112px of padding top and
   bottom, so no content sits in the band that fades */
body[data-sm-chrome] :is(#proof, #partners, #concierge, #insights, #careers, #offices, #contact) {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 var(--sm-feather), #000 calc(100% - var(--sm-feather)), transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 var(--sm-feather), #000 calc(100% - var(--sm-feather)), transparent 100%);
}
/* the closing call meets the footer: it fades in at the top and stays solid to the bottom */
body[data-sm-chrome] #contact {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 var(--sm-feather));
  mask-image: linear-gradient(180deg, transparent 0, #000 var(--sm-feather));
}
/* pinned sections: the photograph behind the story, and the practices' backdrop, fade at both ends of the screen,
   so the moment the pin lets go there is no edge to see */
body[data-sm-chrome] [data-story] [data-scene-media],
body[data-sm-chrome] #practices > div > [aria-hidden="true"] {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 var(--sm-feather), #000 calc(100% - var(--sm-feather)), transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 var(--sm-feather), #000 calc(100% - var(--sm-feather)), transparent 100%);
}
/* every page's "Next" panel: the photograph rises out of the page instead of starting on a line */
.a-next .a-img {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 var(--sm-feather));
  mask-image: linear-gradient(180deg, transparent 0, #000 var(--sm-feather));
}

/* ==========================================================================
   v38: G2 corners. site.js gives every rounded element that is not a circle or a capsule corner-shape: squircle, with
   its radius scaled by 1.5 (browsers that support corner-shape; the rest keep round corners). Glass sheens and
   highlights drawn on ::before / ::after follow their element's corner, so they never peek out at the corners.
   ========================================================================== */
@supports (corner-shape: squircle) {
  .sm-g2::before, .sm-g2::after { corner-shape: squircle; }
}

/* ==========================================================================
   v39: fixes from the QA sweep.
   ========================================================================== */
/* every inner page's closing ink band: its glow sat on the band's top edge with a hairline across it, so the band
   started on a visible line; the glow now gathers lower down and the line is gone */
.a-ink { background: radial-gradient(ellipse 70% 55% at 50% 40%, rgba(232,106,36,.07) 0%, rgba(232,106,36,0) 70%), #0B0B0C; }
.a-ink::before { display: none; }
/* the case study's full-bleed photograph fades in and out instead of starting and ending on straight edges */
.cs-bleed {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 84%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 84%, transparent 100%);
}
/* the rail's dots stay 8px to look at but answer a 24px press */
.sm-rail__item::before { content: ''; position: absolute; inset: -8px -10px; }
/* footer columns rise a short way, quickly, so a link is never moving under the pointer when it is clicked */
@media (prefers-reduced-motion: no-preference) {
  .sm-footer.will-rise .sm-footer-grid > *, .sm-footer.will-rise .sm-footer-group, .sm-footer.will-rise .sm-footer-base {
    transform: translate3d(0, 10px, 0); transition-duration: .5s, .6s;
  }
}
/* "Visit xencia.com" keeps its arrow on the same line */
.xc-ext { white-space: nowrap; }

/* ==========================================================================
   v40: fixes from the second sweep.
   ========================================================================== */
/* the homepage's white Work band no longer starts and ends on a straight line against the ink: its top and bottom
   fade over a stretch shorter than its padding (7vw against 8.5vw), so the fade never reaches its content */
body[data-sm-chrome] #work {
  --work-feather: clamp(80px, 7vw, 140px);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, rgba(0,0,0,.18) calc(var(--work-feather) * .3), rgba(0,0,0,.62) calc(var(--work-feather) * .6), #000 var(--work-feather), #000 calc(100% - var(--work-feather)), rgba(0,0,0,.62) calc(100% - var(--work-feather) * .6), rgba(0,0,0,.18) calc(100% - var(--work-feather) * .3), transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, rgba(0,0,0,.18) calc(var(--work-feather) * .3), rgba(0,0,0,.62) calc(var(--work-feather) * .6), #000 var(--work-feather), #000 calc(100% - var(--work-feather)), rgba(0,0,0,.62) calc(100% - var(--work-feather) * .6), rgba(0,0,0,.18) calc(100% - var(--work-feather) * .3), transparent 100%);
}
/* the homepage's rail dots answer a 24px press, like the rail on every other page */
[data-rail-item]::before { content: ''; position: absolute; inset: -8px -10px; }

/* ==========================================================================
   v41: SAM, the site's assistant (site/sam.js): its messages, wherever a conversation is shown (the homepage concierge,
   the Talk to SAM page). The visitor's in ember on the right, SAM's in glass on the left, as the concierge has always drawn them.
   ========================================================================== */
.sam-msg { max-width: 86%; padding: 12px 16px; font: 400 14px/1.55 var(--a-sans, 'Gellix', sans-serif); animation: sam-in .42s cubic-bezier(.16,1,.3,1) both; overflow-wrap: anywhere; }
.sam-msg.is-user { align-self: flex-end; border-radius: 20px 20px 6px 20px; color: #fff; background: linear-gradient(160deg, rgba(243,165,117,.85), rgba(203,83,26,.85)); box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 8px 20px rgba(232,106,36,.25); }
.sam-msg.is-sam { align-self: flex-start; border-radius: 20px 20px 20px 6px; color: #E1DAD4; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); box-shadow: inset 0 1px 0 rgba(255,255,255,.2); }
.sam-msg.is-error { border-color: rgba(232,106,36,.45); }
.sam-msg p { margin: 0; }
.sam-msg p + p, .sam-msg p + ul, .sam-msg ul + p { margin-top: 10px; }
.sam-msg ul { margin: 0; padding-left: 18px; }
.sam-msg li + li { margin-top: 4px; }
.sam-msg b { color: #fff; font-weight: 600; }
.sam-msg a { color: #F3A575; text-decoration: underline; text-underline-offset: 3px; }
.sam-msg.is-user a { color: #fff; }
.sam-typing { display: inline-flex; gap: 5px; padding: 4px 0; }
.sam-typing i { width: 6px; height: 6px; border-radius: 999px; background: #C4BAB2; animation: sam-dot 1s infinite; }
.sam-typing i:nth-child(2) { animation-delay: .15s; } .sam-typing i:nth-child(3) { animation-delay: .3s; }
.sam-note { align-self: center; margin: 2px 0; padding: 7px 14px; border-radius: 999px; font: 600 11px/1.4 var(--a-sans, 'Gellix', sans-serif); letter-spacing: .08em; text-transform: uppercase; color: #F3A575; background: rgba(232,106,36,.1); border: 1px solid rgba(243,165,117,.35); }
.sam-note b { color: #fff; }
form.is-busy [type="submit"] { opacity: .5; pointer-events: none; }
@keyframes sam-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes sam-dot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .sam-msg { animation: none; } .sam-typing i { animation: none; opacity: .7; } }
.sam-note.is-warn { color: #F4F1EC; background: rgba(179,38,30,.18); border-color: rgba(232,106,36,.45); text-transform: none; letter-spacing: 0; font-size: 12px; }

/* SAM's card, wherever a conversation takes an application (the Careers page, each role's page): the homepage concierge's
   glass card, with starters, a paperclip for the CV and the send button. --sam-log-h sets the conversation's height. */
.sam-card { position: relative; display: flex; flex-direction: column; border-radius: 36px; overflow: hidden;
  background: linear-gradient(135deg, rgba(34,32,30,.62) 0%, rgba(18,17,16,.5) 100%); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255,255,255,.14); box-shadow: inset 0 1px 0 rgba(255,255,255,.34), inset 0 -1px 0 rgba(255,255,255,.05), 0 0 0 5px rgba(255,255,255,.022), 0 22px 56px rgba(0,0,0,.38); }
.sam-card__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; border-bottom: 1px solid rgba(255,255,255,.12); }
.sam-card__who { display: flex; align-items: center; gap: 12px; }
.sam-card__av { width: 36px; height: 36px; border-radius: 999px; display: grid; place-items: center; background: linear-gradient(160deg, rgba(243,165,117,.9), rgba(203,83,26,.9)); box-shadow: inset 0 1px 0 rgba(255,255,255,.5); font: 800 14px/1 var(--a-sans); color: #fff; }
.sam-card__who b { display: block; font: 800 15px/1.2 var(--a-sans); color: #fff; }
.sam-card__who small { display: flex; align-items: center; gap: 6px; margin-top: 3px; font: 400 12px/1.2 var(--a-sans); color: #9B918A; }
.sam-card__who small::before { content: ''; width: 7px; height: 7px; border-radius: 999px; background: #E86A24; animation: sm-live 1.8s cubic-bezier(.22,.61,.36,1) infinite; }
/* SAM's state in a chat header (site/sam.js): the dot glows only while SAM really answers */
[data-sam-status][data-state="checking"]::before, [data-sam-status][data-state="checking"] [data-sam-dot] { opacity: .45; animation: none !important; }
[data-sam-status][data-state="offline"]::before, [data-sam-status][data-state="preview"]::before,
[data-sam-status][data-state="offline"] [data-sam-dot], [data-sam-status][data-state="preview"] [data-sam-dot] { background: #736B65 !important; animation: none !important; }
[data-sam-status]:not([data-state="online"]) [data-sam-dot]::after { content: none !important; } /* the homepage dot's pulsing ring */
.sam-card__new { white-space: nowrap; background: none; border: 0; padding: 0 0 4px; border-bottom: 1px solid currentColor; font: 600 11px/1 var(--a-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--a-mute); cursor: pointer; }
.sam-card__new:hover { color: var(--a-accent); }
.sam-card__log { height: var(--sam-log-h, clamp(360px, 48vh, 460px)); overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 12px; padding: 22px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.2) transparent; }
.sam-card__log > :first-child { margin-top: auto; }
.sam-card__starts { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 22px 12px; }
.sam-card__starts button { padding: 9px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.05); font: 500 13px/1.2 var(--a-sans); color: #E1DAD4; cursor: pointer; transition: border-color .3s, color .3s, background .3s; }
.sam-card__starts button:hover { border-color: rgba(243,165,117,.6); color: #fff; background: rgba(232,106,36,.1); }
.sam-card__form { position: relative; display: flex; align-items: center; gap: 8px; margin: 0 16px 12px; padding: 8px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); transition: border-color .3s; }
.sam-card__form:focus-within { border-color: rgba(243,165,117,.55); }
.sam-card__form input[type="text"] { flex: 1; min-width: 0; padding: 0 4px; border: 0; outline: 0; background: transparent; font: 400 15px/1.4 var(--a-sans); color: #fff; }
.sam-card__form input[type="text"]::placeholder { color: #736B65; }
.sam-card__clip, .sam-card__send { flex: 0 0 auto; width: 38px; height: 38px; border: 0; border-radius: 999px; display: grid; place-items: center; cursor: pointer; }
.sam-card__clip { background: rgba(255,255,255,.08); color: #E1DAD4; }
.sam-card__clip:hover { background: rgba(232,106,36,.18); color: #fff; }
.sam-card__send { background: #E86A24; color: #fff; }
.sam-card button:focus-visible { outline: 1px solid var(--a-accent); outline-offset: 4px; }
.sam-card__fine { margin: 0 22px 16px; font: 400 11px/1.5 var(--a-sans); color: #736B65; }
.sam-card__fine a { color: #9B918A; }
.sam-card .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ==========================================================================
   v40: liquid glass walls. The partner logos (each partner page's "All partners" strip and the partnerships wall) sit
   on panes of clear glass with G2 corners. Light lives behind the panes and the glass bends it: two ember glows drift
   on their own and a third follows the pointer. The pane under the pointer tilts towards it, its logo lifts off the
   glass, a highlight and a lit rim follow the pointer across it and a ripple spreads from where the pointer came in;
   the panes around it lean in by how near it is. site.js (bindWalls) moves all of it with transforms and opacity
   alone: the highlight and the rim are pre-drawn circles that slide, so following the pointer never repaints a pane.
   ========================================================================== */
[data-gwall] { position: relative; isolation: isolate; display: grid; gap: clamp(10px, 1vw, 16px); border: 0 !important; }
/* a glass wall is separate panes, not one panel: the shared panel's outline, clip and cell offsets (v19) do not apply,
   and its own light replaces the spotlight that follows the cursor over grids (motion.js) */
[data-gwall] { overflow: visible; border-radius: 0; background: none; }
[data-gwall] > * { margin: 0; }
[data-gwall].sig-spot::after { content: none; }
.sm-gwall__light { position: absolute; inset: -8% -2%; z-index: -1; overflow: hidden; pointer-events: none; border-radius: 40px; }
.sm-gwall__light i { position: absolute; left: 0; top: 0; border-radius: 50%; will-change: transform; }
.sm-gwall__light .a { width: 46%; aspect-ratio: 1; background: radial-gradient(closest-side, rgba(232,106,36,.42), rgba(232,106,36,.12) 55%, transparent); animation: smWallA 19s ease-in-out infinite alternate; }
.sm-gwall__light .b { width: 36%; aspect-ratio: 1; background: radial-gradient(closest-side, rgba(243,165,117,.28), rgba(243,165,117,.07) 55%, transparent); animation: smWallB 24s ease-in-out infinite alternate; }
.sm-gwall__light .p { width: 380px; height: 380px; margin: -190px 0 0 -190px; background: radial-gradient(closest-side, rgba(243,165,117,.42), rgba(232,106,36,.13) 50%, transparent); opacity: 0; transition: opacity .7s cubic-bezier(.19,1,.22,1); }
[data-gwall].is-live .sm-gwall__light .p { opacity: 1; }
@keyframes smWallA { from { transform: translate(-12%, 6%); } to { transform: translate(130%, 34%); } }
@keyframes smWallB { from { transform: translate(170%, 60%); } to { transform: translate(15%, -14%); } }
[data-gwall] > a { position: relative; border: 0 !important; border-radius: 24px; overflow: hidden; isolation: isolate; color: inherit; text-decoration: none;
  background: linear-gradient(155deg, rgba(255,255,255,.09) 0%, rgba(255,255,255,.02) 46%, rgba(255,255,255,.05) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.36), inset 0 -1px 0 rgba(255,255,255,.06), inset 0 0 0 1px rgba(255,255,255,.11), inset 0 -22px 40px -26px rgba(255,255,255,.16), 0 18px 44px rgba(0,0,0,.34);
  backdrop-filter: blur(16px) saturate(175%) brightness(1.06); -webkit-backdrop-filter: blur(16px) saturate(175%) brightness(1.06);
 }
/* keyboard focus: the lit pane at once (the pointer's hover is the tint layer below, which fades) */
[data-gwall] > a:focus-visible { background: linear-gradient(155deg, rgba(255,255,255,.13) 0%, rgba(255,255,255,.03) 46%, rgba(232,106,36,.09) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.46), inset 0 -1px 0 rgba(255,255,255,.08), inset 0 0 0 1px rgba(255,255,255,.16), inset 0 -22px 40px -26px rgba(243,165,117,.28), 0 0 38px rgba(232,106,36,.16), 0 24px 56px rgba(0,0,0,.42); }
[data-gwall] > a[aria-current] { background: linear-gradient(155deg, rgba(232,106,36,.22) 0%, rgba(255,255,255,.03) 50%, rgba(232,106,36,.1) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), inset 0 0 0 1px rgba(243,165,117,.55), inset 0 -22px 40px -26px rgba(243,165,117,.3), 0 0 34px rgba(232,106,36,.22), 0 18px 44px rgba(0,0,0,.34); }
/* a fixed diagonal sheen on the glass */
[data-gwall] > a::before { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none;
  background: linear-gradient(115deg, transparent 32%, rgba(255,255,255,.06) 46%, transparent 60%); opacity: .4; }
/* a highlight that follows the pointer across the glass, and the rim lit nearest it: circles that only slide */
.sm-gwall__fx { position: absolute; inset: 0; z-index: 2; border-radius: inherit; overflow: hidden; pointer-events: none; }
.sm-gwall__fx i, .sm-gwall__fx u { position: absolute; left: 0; top: 0; border-radius: 50%; will-change: transform; }
.sm-gwall__fx i { width: 520px; height: 520px; margin: -260px 0 0 -260px; background: radial-gradient(closest-side, rgba(255,255,255,.2), rgba(255,255,255,.05) 42%, transparent 66%); opacity: .4; }
.sm-gwall__fx b { position: absolute; inset: 0; border-radius: inherit; padding: 1px; overflow: hidden; opacity: 0; will-change: opacity;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.sm-gwall__fx u { width: 380px; height: 380px; margin: -190px 0 0 -190px; background: radial-gradient(closest-side, rgba(243,165,117,.95), rgba(243,165,117,0) 72%); }
/* the pane warming under the pointer: a pre-drawn tint that only fades in */
.sm-gwall__fx s { position: absolute; inset: 0; opacity: 0; will-change: opacity;   /* square: the pane clips it (its own squircle repainted on every fade) */
 
  background: linear-gradient(155deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.01) 46%, rgba(232,106,36,.09) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 -22px 40px -26px rgba(243,165,117,.24); }
[data-gwall] > a > :not(.sm-gwall__ripple, .sm-gwall__fx) { z-index: 3; }
[data-gwall] > a > :is(img, .nm) { position: relative; }
[data-gwall] > a img { will-change: transform; transition: opacity .5s, filter .5s; }
[data-gwall] > a:is(:hover, :focus-visible, [aria-current]) img { opacity: 1; filter: brightness(0) invert(1) drop-shadow(0 6px 18px rgba(232,106,36,.5)); }
/* where the pointer comes in, a ripple spreads through the pane */
.sm-gwall__ripple { position: absolute; z-index: 1; width: 340px; height: 340px; margin: -170px 0 0 -170px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(232,106,36,.18), rgba(232,106,36,.05) 64%, transparent 84%, rgba(243,165,117,.5) 92%, transparent 100%);
  animation: smRipple 1s cubic-bezier(.19,1,.22,1) forwards; }
@keyframes smRipple { from { transform: scale(.06); opacity: 1; } to { transform: scale(1); opacity: 0; } }
@media (hover: none) { [data-gwall] > a { transition: transform .3s cubic-bezier(.19,1,.22,1); } [data-gwall] > a:active { transform: scale(.97); } }
@media (prefers-reduced-motion: reduce) { .sm-gwall__light i { animation: none; } }
@media (prefers-reduced-transparency: reduce) { [data-gwall] > a { background: #1B1A19; backdrop-filter: none; -webkit-backdrop-filter: none; } }

/* ==========================================================================
   v41: live dots pulse with a ring that only scales and fades. The box-shadow pulse repainted its panel on every
   frame for as long as it was on screen (the cookie notice on a first visit, SAM's status on Talk, Careers and roles).
   ========================================================================== */
@keyframes sm-live-ring { from { transform: scale(1); opacity: .6; } to { transform: scale(3.5); opacity: 0; } }
.dot--live, .sm-cookie__dot { animation: none; box-shadow: none; position: relative; isolation: isolate; }
.dot--live::after, .sm-cookie__dot::after { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: #E86A24; animation: sm-live-ring 1.6s var(--ease) infinite; }
.sm-cookie__dot::after { animation-duration: 2.2s; animation-timing-function: ease-out; animation-iteration-count: 4; }   /* a few pulses to draw the eye, then still: a pulse that never stops keeps the whole page drawing every frame */
.sam-card__who small, .tk-who small { position: relative; }
.sam-card__who small::before, .tk-who small::before { animation: none; }
.sam-card__who small::after, .tk-who small::after { content: ''; position: absolute; left: 0; top: calc(50% - 3.5px); width: 7px; height: 7px; border-radius: 999px; background: #E86A24; pointer-events: none;
  animation: sm-live-ring 1.8s cubic-bezier(.22,.61,.36,1) infinite; }
/* SAM's ring only while it can answer (checking, offline and preview show a still dot) */
.sam-card__who small:not([data-state="online"])[data-sam-status]::after, .tk-who small:not([data-state="online"])[data-sam-status]::after { content: none; }
@media (prefers-reduced-motion: reduce) { .dot--live::after, .sm-cookie__dot::after, .sam-card__who small::after, .tk-who small::after { animation: none; opacity: 0; } }

/* ==========================================================================
   v42: page changes in one second. The ink covers the page being left in under half a second and clears from the new
   one by a second (it was a second and a half, with the new page's own entrance playing only after it). When the next
   page takes a moment to arrive, the ink has already started on the page being left (site.js, is-hold) and the change
   carries on from where it got to (--sm-vt-skip, set by site/vt.js), so a slow page reads as one movement, not a pause.
   ========================================================================== */
::view-transition-new(sm-ink) { animation-duration: 1s; animation-delay: var(--sm-vt-skip, 0s); }
::view-transition-old(root), html.sm-morphed::view-transition-old(root),
::view-transition-new(root), html.sm-morphed::view-transition-new(root) { animation-duration: 1s; animation-delay: var(--sm-vt-skip, 0s); }
::view-transition-group(sm-morph), ::view-transition-old(sm-morph), ::view-transition-new(sm-morph),
::view-transition-group(sm-header), ::view-transition-group(sm-rail), ::view-transition-group(sm-progress) { animation-duration: .95s; }
/* the ink covers by 24% (sized to just cover from where it started) and clears straight after, by 62%, on a curve that
   lets go at once; the pages swap under it at 18-21%, when it already covers the screen with room to spare. So the new
   page is there the moment it is uncovered. The page being left no longer sinks (under a held ink it would jump). */
@keyframes smInk {
  0%   { transform: scale(.02); opacity: 1; animation-timing-function: cubic-bezier(.55, .05, .25, 1); }
  24%  { transform: scale(var(--sm-ink-cover, 3.8)); opacity: 1; animation-timing-function: cubic-bezier(.2, .7, .3, 1); }
  62%, 100% { transform: scale(calc(var(--sm-ink-cover, 3.8) * 1.45)); opacity: 0; }
}
@keyframes smInkOld { 0%, 18% { opacity: 1; } 21%, 100% { opacity: 0; } }
@keyframes smInkNew { 0%, 18% { transform: scale(1.03); opacity: 0; } 21% { transform: scale(1.03); opacity: 1; animation-timing-function: cubic-bezier(.2, .7, .3, 1); } 100% { transform: none; opacity: 1; } }
.sm-vt-ink.is-hold { opacity: 1; animation: smInkHold .24s cubic-bezier(.55, .05, .25, 1) both; }
@keyframes smInkHold { from { transform: scale(.02); } to { transform: scale(var(--sm-ink-cover, 3.8)); } }
@media (prefers-reduced-motion: reduce) { .sm-vt-ink.is-hold { display: none; } }
/* a change where nothing travels: the new page's hero is part of the page, not a layer of its own (site/vt.js) */
html.sm-vt-still .cine-hero > .cine-bg, html.sm-vt-still [data-hero-media] { view-transition-name: none !important; }
/* when the hero does travel (a card grows into it, or one hero becomes the next), its headline rides above it */
::view-transition-group(sm-copy) { z-index: 4; animation: none; }
::view-transition-old(sm-copy) { display: none; }
::view-transition-new(sm-copy) { animation: smInkNew 1s cubic-bezier(.2, .6, .2, 1) both; animation-delay: var(--sm-vt-skip, 0s); }

/* ==========================================================================
   v43: no lines between sections. The footer drew a hairline across its top, and the "Next" panel's photograph faded in
   at its top but not at its bottom, so its warm light stopped on a straight edge where the footer began. The hairline
   goes and the photograph fades out into the footer, as it fades in from the page above.
   ========================================================================== */
[data-style="atelier"] .sm-footer::before { content: none; }
.a-next .a-img {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 var(--sm-feather), #000 calc(100% - var(--sm-feather) * 1.5), transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 var(--sm-feather), #000 calc(100% - var(--sm-feather) * 1.5), transparent 100%);
}