/* Layout: deep-navy "blueprint" bands (live silk-line hero, approach, voices, contact) alternating with
   cool paper bands; a gold ledger line is the recurring accent. Content on a 1280px measure. */
:root {
  --ink: #061428;
  --ink-2: #0B1D38;
  --ink-3: #12284A;
  --blue: #0B4A9A;
  --blue-bright: #2F6FE0;
  --gold: #E3A73F;
  --gold-soft: #F0C374;
  --gold-deep: #865508;
  --paper: #F4F6F9;
  --white: #FFFFFF;
  --line: #DDE3EB;
  --line-dark: rgba(184, 196, 214, .16);
  --text: #10213A;
  --muted: #4B5A70;
  --mist: #B8C4D6;

  --f-display: "Bricolage Grotesque", "Hanken Grotesk", system-ui, sans-serif;
  --f-body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --maxw: 1360px;
  --radius: 24px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --header-h: 80px;
  --grid-bg:
    linear-gradient(rgba(184,196,214,.05) 1px, transparent 1px) 0 0 / 88px 88px,
    linear-gradient(90deg, rgba(184,196,214,.05) 1px, transparent 1px) 0 0 / 88px 88px;
  color-scheme: light;
}
/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
body {
  margin: 0; background: var(--paper); color: var(--text);
  font-family: var(--f-body); font-size: 17px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--ink); }
img, video, canvas { max-width: 100%; display: block; }
a { color: var(--blue); }
a:hover { color: var(--blue-bright); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { font-family: var(--f-display); font-weight: 700; letter-spacing: -0.03em; line-height: 1.04; text-wrap: balance; margin: 0; }
p { margin: 0; }
.wrap {
  max-width: var(--maxw); margin-inline: auto;
  padding-left: max(24px, env(safe-area-inset-left, 0px));
  padding-right: max(24px, env(safe-area-inset-right, 0px));
}
.section { padding-block: clamp(96px, 12vw, 168px); }
.dark { background: var(--ink); color: var(--white); }
.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font: 500 12.5px/1.2 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-deep);
}
.eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; transform-origin: left; }
.dark .eyebrow { color: var(--gold); }
.section-title { font-size: clamp(38px, 5.2vw, 72px); color: var(--ink); margin-top: 22px; }
.dark .section-title { color: var(--white); }
.section-lede { color: var(--muted); max-width: 460px; font-size: 18px; }
.dark .section-lede { color: var(--mist); }
.head-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 56px; margin-bottom: clamp(56px, 7vw, 96px); }
.head-row > div { min-width: 0; max-width: 760px; }
/* ---------- Buttons & links ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; gap: 12px; min-height: 54px;
  padding: 0 28px; border-radius: 999px; border: 1px solid transparent; overflow: hidden; isolation: isolate;
  font: 600 16px/1 var(--f-body); text-decoration: none; cursor: pointer;
  transition: color .35s var(--ease-out), border-color .35s, background-color .35s;
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: var(--btn-fill, var(--white)); transform: translateY(101%); transition: transform .45s var(--ease-out);
}
.btn:hover::before { transform: translateY(0); }
.btn svg { transition: translate .35s var(--ease-out); }
.btn:hover svg { translate: 4px 0; }
.btn-gold { background: var(--gold); color: var(--ink); --btn-fill: var(--white); }
.btn-gold:hover { color: var(--ink); }
.btn-ghost { border-color: rgba(255,255,255,.3); color: var(--white); background: rgba(255,255,255,.04); backdrop-filter: blur(10px); --btn-fill: var(--white); }
.btn-ghost:hover { color: var(--ink); border-color: var(--white); }
.link-arrow {
  display: inline-flex; align-items: center; gap: 8px; font-weight: 600; text-decoration: none; color: var(--text);
  padding-block: 10px; background: linear-gradient(var(--gold), var(--gold)) 0 100% / 0 2px no-repeat;
  transition: background-size .45s var(--ease-out);
}
.link-arrow:hover { background-size: 100% 2px; color: var(--text); }
.dark .link-arrow { color: var(--white); }
.link-arrow svg { transition: translate .35s var(--ease-out); }
.link-arrow:hover svg { translate: 4px 0; }
/* ---------- Header ---------- */
.site-header { position: fixed; top: env(safe-area-inset-top, 0px); left: 0; right: 0; z-index: 50; color: var(--white); transition: background-color .4s, box-shadow .4s, height .4s; }
.site-header.is-solid { background: rgba(6, 20, 40, .86); backdrop-filter: blur(14px) saturate(140%); box-shadow: 0 1px 0 var(--line-dark); }
.header-inner { height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: flex; align-items: center; gap: 14px; color: var(--white); text-decoration: none; }
.brand:hover { color: var(--white); }
.brand img { height: 38px; width: auto; }
.brand-name { display: flex; flex-direction: column; line-height: 1.1; padding-left: 14px; border-left: 1px solid rgba(255,255,255,.22); }
.brand-name strong { font: 700 17px/1.1 var(--f-display); letter-spacing: -0.01em; }
.brand-name span { font: 500 10px/1.5 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--mist); }
.main-nav { display: flex; align-items: center; gap: 2px; }
.main-nav > a:not(.btn) { position: relative; color: var(--white); text-decoration: none; font-weight: 500; font-size: 15px; padding: 12px 14px; }
.main-nav > a:not(.btn)::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 6px; height: 1px; background: var(--gold); scale: 0 1; transform-origin: right; transition: scale .4s var(--ease-out); }
.main-nav > a:not(.btn):hover::after, .main-nav a[aria-current="page"]::after { scale: 1 1; transform-origin: left; }
.main-nav .btn { margin-left: 14px; min-height: 46px; padding: 0 22px; font-size: 15px; }
.nav-toggle { display: none; }
@media (max-width: 1000px) {
  .nav-toggle { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 999px; border: 1px solid rgba(255,255,255,.3); background: transparent; color: var(--white); cursor: pointer; }
  .main-nav { position: fixed; inset: calc(var(--header-h) + env(safe-area-inset-top, 0px)) 0 auto 0; flex-direction: column; align-items: stretch; gap: 0; padding: 8px max(24px, env(safe-area-inset-left, 0px)) 28px; background: var(--ink); border-top: 1px solid var(--line-dark); }
  .main-nav[hidden] { display: none !important; }
  .main-nav > a:not(.btn) { padding: 18px 0; border-bottom: 1px solid var(--line-dark); font-size: 19px; }
  .main-nav > a:not(.btn)::after { display: none; }
  .main-nav .btn { margin: 22px 0 0; justify-content: center; }
}
@media (max-width: 520px) {
  .brand-name { display: none; }
}
@media (min-width: 1001px) {
  .main-nav[hidden] { display: flex !important; }
}
/* ---------- Hero ---------- */
.hero { position: relative; isolation: isolate; color: var(--white); background: var(--ink); min-height: max(680px, 100svh); display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; }
.hero-media { position: absolute; inset: 0; z-index: -2; overflow: hidden; background: var(--ink); }
.hero-photo { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background:
  linear-gradient(90deg, rgba(6,20,40,.90) 0%, rgba(6,20,40,.62) 38%, rgba(6,20,40,.18) 68%, rgba(6,20,40,.10) 100%),
  linear-gradient(180deg, rgba(6,20,40,.70) 0%, rgba(6,20,40,0) 22%, rgba(6,20,40,0) 60%, rgba(6,20,40,.92) 100%); }
.hero-inner { width: 100%; padding-top: calc(var(--header-h) + 64px); padding-bottom: 48px; display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 48px; align-items: end; }
.hero-pill { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.05); backdrop-filter: blur(10px); font: 500 12.5px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: #DCE4EF; }
.hero-pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgba(227,167,63,.2); }
.hero-title { margin-top: 30px; font-size: clamp(44px, min(5.4vw, 10svh), 96px); font-weight: 750; line-height: .95; letter-spacing: -0.045em; font-variation-settings: "opsz" 96; }
.hero-title .line { display: block; overflow: hidden; padding-bottom: .07em; margin-bottom: -.07em; }
.hero-title .line > span { display: inline-block; }
.hero-title .gold { color: var(--gold); position: relative; }
.hero-lede { margin-top: 30px; max-width: 540px; font-size: clamp(17px, 1.4vw, 20px); color: #D3DCE8; }
.hero-actions { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 12px; }
.hero-foot { width: 100%; border-top: 1px solid rgba(255,255,255,.12); }
.hero-foot-inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; padding-block: 18px; font: 500 12px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mist); }
.scroll-cue { display: inline-flex; align-items: center; gap: 12px; }
.scroll-cue i { width: 1px; height: 28px; background: rgba(255,255,255,.2); position: relative; overflow: hidden; }
.scroll-cue i::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 40%; background: var(--gold); }
@media (prefers-reduced-motion: no-preference) {
  .scroll-cue i::after { animation: cue 2.2s var(--ease-out) infinite; }
}
@keyframes cue { from { translate: 0 -100%; } to { translate: 0 260%; } }
@media (max-width: 1000px) {
  .hero-inner { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}
@media (max-width: 560px) {
  .hero-foot-inner .coords { display: none; }
}
/* Hero load choreography + scroll exit */
@media (prefers-reduced-motion: no-preference) {
  .hero-title .line > span { animation: rise 1.2s var(--ease-out) both; animation-delay: calc(150ms + var(--i, 0) * 110ms); }
  .hero-photo { animation: ken-burns 16s cubic-bezier(.2,.6,.2,1) both; }
  .hero-pill, .hero-lede, .hero-actions, .hero-foot { animation: fade-up 1.1s var(--ease-out) both; animation-delay: 550ms; }
  .hero-actions { animation-delay: 680ms; }
  .hero-foot { animation-delay: 950ms; }
  @supports ((animation-timeline: view()) and (animation-range: entry)) {
    .hero { view-timeline: --hero block; }
    .hero-inner { animation: drift-up linear both; animation-timeline: --hero; animation-range: exit 0% exit 70%; }
    .hero-media { animation: hero-dim linear both; animation-timeline: --hero; animation-range: exit 0% exit 100%; }
  }
}
@keyframes rise { from { translate: 0 110%; } }
@keyframes fade-up { from { opacity: 0; translate: 0 26px; } }
@keyframes drift-up { to { opacity: 0; translate: 0 -110px; } }
@keyframes hero-dim { to { opacity: .35; translate: 0 18%; } }
@keyframes ken-burns { from { scale: 1.12; } to { scale: 1.02; } }
/* ---------- Scroll reveals (progressive enhancement) ---------- */
@media (prefers-reduced-motion: no-preference) {
  @supports ((animation-timeline: view()) and (animation-range: entry)) {
    [data-reveal] { animation: reveal-up linear both; animation-timeline: view(); animation-range: entry 0% entry 75%; }
    .eyebrow::before { animation: grow-line linear both; animation-timeline: view(); animation-range: entry 20% entry 100%; }
    .statement-text .word { animation: word-in linear both; animation-timeline: view(); animation-range: entry 25% cover 45%; }
  }
}
@keyframes reveal-up { from { opacity: 0; translate: 0 56px; } }
@keyframes grow-line { from { scale: 0 1; } }
@keyframes word-in { from { opacity: .14; } }
/* ---------- Statement ---------- */
.statement-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 48px 80px; align-items: end; }
.statement-text { margin-top: 28px; font-family: var(--f-display); font-weight: 600; letter-spacing: -0.035em; font-size: clamp(32px, 4.4vw, 62px); line-height: 1.08; color: var(--ink); text-wrap: pretty; }
.statement-text .accent { color: var(--blue); }
.proof-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.proof-list li { padding: 22px 0; border-top: 1px solid var(--line); }
.proof-list li:last-child { border-bottom: 1px solid var(--line); }
.proof-list strong { display: block; font: 700 19px/1.25 var(--f-display); color: var(--ink); margin-bottom: 6px; letter-spacing: -0.01em; }
.proof-list span { color: var(--muted); font-size: 15.5px; }
@media (max-width: 900px) {
  .statement-grid { grid-template-columns: minmax(0, 1fr); }
}
/* Curated photography */
.photo-collage { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 20px; margin-top: clamp(64px, 8vw, 112px); }
.ph { position: relative; margin: 0; border-radius: var(--radius); overflow: hidden; height: clamp(280px, 36vw, 520px); background: var(--ink-2); }
.ph img { width: 100%; height: 100%; object-fit: cover; transition: scale 1s var(--ease-out); }
.ph:hover img { scale: 1.04; }
.ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(6,20,40,.55) 100%); pointer-events: none; }
.ph figcaption { position: absolute; left: 20px; bottom: 18px; z-index: 1; padding: 9px 14px; border-radius: 999px; background: rgba(6,20,40,.55); backdrop-filter: blur(10px); color: var(--white); font: 500 11.5px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; }
@media (max-width: 760px) {
  .photo-collage { grid-template-columns: minmax(0, 1fr); }
  .ph { height: 260px; }
}
/* ---------- Platforms (bento) ---------- */
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; }
.tile { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--white); border: 1px solid var(--line); padding: 32px; min-width: 0; isolation: isolate; }
.tile::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .4s; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(47,111,224,.10), transparent 60%); }
.tile:hover::before { opacity: 1; }
.tile h3 { font-size: 26px; color: var(--ink); margin: 14px 0 10px; }
.tile > p { color: var(--muted); font-size: 16px; }
@media (max-width: 560px) {
  .tile { padding: 24px; }
}
/* ---------- Principles ---------- */
.wt { aspect-ratio: 4 / 5; border-radius: 18px; position: relative; overflow: hidden; }
.wt-blank { background: linear-gradient(160deg, #EAF0F7, #F8FAFC); border: 1px solid var(--line); }
.wt-blank::after { content: ""; position: absolute; inset: 0; background:
  linear-gradient(rgba(11,74,154,.06) 1px, transparent 1px) 0 0 / 14px 14px,
  linear-gradient(90deg, rgba(11,74,154,.06) 1px, transparent 1px) 0 0 / 14px 14px; mask-image: radial-gradient(circle at 70% 30%, #000, transparent 75%); }
.wt-blank::before { content: ""; position: absolute; left: 14px; right: 14px; bottom: 16px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--gold), transparent); opacity: .55; }
.wt-blue { background: linear-gradient(160deg, #2F6FE0, #0B4A9A); }
.wt-ink { background: linear-gradient(160deg, #1B3A66, #061428); }
.wt-gold { background: linear-gradient(160deg, #F0C374, #C98A22); color: var(--ink); }
.tag-pill { font: 500 12px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); padding: 9px 14px; border-radius: 999px; background: var(--white); border: 1px solid var(--line); box-shadow: 0 6px 18px -10px rgba(6,20,40,.3); }
/* ---------- Article cards + generated covers ---------- */
.card { display: flex; flex-direction: column; gap: 16px; text-decoration: none; color: inherit; }
.card:hover { color: inherit; }
.cover { position: relative; border-radius: 20px; overflow: hidden; aspect-ratio: 16 / 10; max-width: 100%; background: var(--cover-bg, linear-gradient(150deg, #0B1D38, #061428)); isolation: isolate; }
.cover::before { content: ""; position: absolute; inset: 0; background: var(--grid-bg); opacity: .9; z-index: -1; }
.cover svg { position: absolute; inset: 0; width: 100%; height: 100%; transition: scale .9s var(--ease-out); }
.card:hover .cover svg { scale: 1.06; }
.card h3 { font-size: 25px; line-height: 1.16; color: var(--ink); transition: color .3s; }
.card:hover h3 { color: var(--blue); }
.card p { color: var(--muted); font-size: 16px; }
/* ---------- Insights view ---------- */
.view[hidden] { display: none !important; }
.chip { flex: none; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line); background: var(--white); font: 600 14.5px/1 var(--f-body); color: var(--text); cursor: pointer; transition: background-color .25s, color .25s, border-color .25s; }
.chip:hover { border-color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--white); border-color: var(--ink); }
/* View transition between Home and Insights */
::view-transition-old(root) { animation: vt-out .35s ease both; }
::view-transition-new(root) { animation: vt-in .6s var(--ease-out) both; }
@keyframes vt-out { to { opacity: 0; scale: .99; } }
@keyframes vt-in { from { opacity: 0; translate: 0 28px; } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}
/* Brand logo in its original colours, on a white plate for dark backgrounds */
.logo-plate { display: inline-flex; align-items: center; justify-content: center; background: var(--white); border-radius: 12px; padding: 5px 9px; box-shadow: 0 6px 18px -8px rgba(0,0,0,.45); }
.brand .logo-plate img { height: 30px; width: auto; }
.logo-plate-lg { border-radius: 18px; padding: 14px 18px; }
/* =====================================================================
   Compact, screen-fitted layout: each band aims for one screen height;
   spacing and headings scale with the viewport's height as well as width.
   ===================================================================== */
.section { padding-block: clamp(56px, min(8vw, 10vh), 112px); }
.head-row { margin-bottom: clamp(28px, 4.5vh, 52px); gap: 16px 48px; }
.section-title { font-size: clamp(32px, min(4.2vw, 6.6vh), 60px); margin-top: 16px; }
.section-lede { font-size: 17px; }
@media (max-width: 560px) {
  .wrap { padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
}
/* Hero */
.hero { min-height: max(600px, 100svh); }
.hero-inner { padding-top: calc(var(--header-h) + clamp(32px, 6vh, 72px)); padding-bottom: clamp(24px, 4vh, 48px); }
.hero-title { margin-top: clamp(18px, 3vh, 30px); }
.hero-lede { margin-top: clamp(18px, 3vh, 30px); }
.hero-actions { margin-top: clamp(22px, 3.5vh, 36px); }
@media (max-width: 760px) {
  .hero { min-height: 100svh; }
  .hero-title { font-size: clamp(40px, 11.5vw, 56px); }
  .hero-pill { font-size: 11px; letter-spacing: .08em; }
  .hero-actions .btn { flex: 1 1 100%; justify-content: center; }
}
/* Statement + photos */
.statement-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px 72px; align-items: center; }
.statement-text { font-size: clamp(28px, min(3.3vw, 5.6vh), 50px); margin-top: 18px; }
.proof-list li { padding: 16px 0; }
.photo-collage { margin-top: clamp(32px, 5vh, 56px); gap: 16px; }
.ph { height: clamp(200px, 30vh, 340px); }
@media (max-width: 900px) {
  .statement-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .photo-collage { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ph { height: 180px; }
  .ph figcaption { display: none; }
}
/* Practices: tabbed, one screen */
.practices { background: var(--white); }
/* Platforms: three-column bento */
.bento { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "a b c" "a b d"; gap: 16px; }
.tile { padding: clamp(20px, 2vw, 28px); }
.tile h3 { font-size: clamp(20px, 1.7vw, 24px); margin: 10px 0 6px; }
.tile > p { font-size: 15px; }
@media (max-width: 1100px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "a b" "c d"; }
}
@media (max-width: 700px) {
  .bento { grid-template-columns: minmax(0, 1fr); grid-template-areas: "a" "b" "c" "d"; }
  .tile > p { display: none; }
}
/* Insights preview */
.cover { aspect-ratio: 16 / 9; }
.card { gap: 12px; }
.card h3 { font-size: clamp(20px, 1.7vw, 24px); }
/* Section headers: title and intro side by side, never stacked on desktop */
@media (min-width: 901px) {
  .head-row { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); align-items: end; }
  .head-row > div { max-width: none; }
  .head-row > .section-lede, .head-row > .link-arrow { justify-self: end; }
}
/* Phone: platform tiles swipe sideways */
@media (max-width: 700px) {
  .bento { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; scrollbar-width: none; margin-inline: calc(-1 * max(20px, env(safe-area-inset-left, 0px))); padding-inline: max(20px, env(safe-area-inset-left, 0px)); }
  .bento .tile { flex: 0 0 86%; scroll-snap-align: start; }
}
/* =====================================================================
   Hero v3: content centred in the viewport; a stack of client
   deliverables (board pack, org chart, eTIMS invoice) on the right.
   ===================================================================== */
.hero { justify-content: flex-start; }
.hero-inner {
  flex: 1; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: center; gap: clamp(32px, 5vw, 88px);
  padding-top: calc(var(--header-h) + clamp(12px, 3vh, 40px)); padding-bottom: clamp(16px, 3vh, 40px);
}
.hero::after { background:
  linear-gradient(90deg, rgba(6,20,40,.92) 0%, rgba(6,20,40,.66) 40%, rgba(6,20,40,.30) 70%, rgba(6,20,40,.22) 100%),
  linear-gradient(180deg, rgba(6,20,40,.65) 0%, rgba(6,20,40,0) 24%, rgba(6,20,40,0) 62%, rgba(6,20,40,.9) 100%); }
/* Front-left: the eTIMS invoice slip, with a torn edge */
@media (max-width: 1100px) {
  .hero-inner { grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); }
}
@media (max-width: 1000px) {
  .hero-inner { grid-template-columns: minmax(0, 1fr); align-content: center; }
}
/* Hero v3 refinements */
.hero-inner.wrap { max-width: 1560px; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
.hero-title { font-size: clamp(44px, min(4.6vw, 9.6svh), 88px); max-width: none; }
@media (max-width: 1100px) {
  .hero-inner.wrap { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
}
@media (max-width: 1000px) {
  .hero-inner.wrap { grid-template-columns: minmax(0, 1fr); }
}
/* receipt + stamp on glass */
.hero::after { background:
  radial-gradient(60% 70% at 82% 74%, rgba(6,20,40,.62) 0%, rgba(6,20,40,0) 70%),
  linear-gradient(90deg, rgba(6,20,40,.92) 0%, rgba(6,20,40,.66) 40%, rgba(6,20,40,.30) 70%, rgba(6,20,40,.26) 100%),
  linear-gradient(180deg, rgba(6,20,40,.65) 0%, rgba(6,20,40,0) 24%, rgba(6,20,40,0) 62%, rgba(6,20,40,.9) 100%); }
/* =====================================================================
   Hero A: kinetic headline on deep navy, advisor portrait on the right
   ===================================================================== */
.hero-a { background: radial-gradient(70% 90% at 78% 45%, #12346A 0%, #0A2347 35%, var(--ink) 75%); }
.hero-a::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--grid-bg); mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,.4) 55%, transparent 80%); }
.hero-a .hero-media { left: auto; right: 0; width: min(54%, 1000px); z-index: -1; background: transparent; }
.hero-a .hero-photo {
  object-position: 50% 18%;
  filter: saturate(.9) contrast(1.04) brightness(.92);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.55) 16%, #000 38%), linear-gradient(180deg, #000 72%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.55) 16%, #000 38%), linear-gradient(180deg, #000 72%, transparent 100%);
          mask-composite: intersect;
}
/* a navy wash over the photo so the office tones sit inside the brand palette */
.hero-a .hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6,20,40,.55) 0%, rgba(11,35,71,.18) 45%, rgba(11,35,71,.08) 100%); mix-blend-mode: multiply; }
.hero-a::after { background: linear-gradient(180deg, rgba(6,20,40,.55) 0%, rgba(6,20,40,0) 20%, rgba(6,20,40,0) 70%, rgba(6,20,40,.85) 100%); }
.hero-a .hero-inner.wrap { grid-template-columns: minmax(0, 1fr); align-content: center; gap: clamp(20px, 3.5vh, 40px); }
.hero-copy { max-width: min(760px, 58%); }
.hero-a .hero-title { font-size: clamp(46px, min(6vw, 10.2svh), 112px); line-height: .94; }
.rotator { display: inline-grid; vertical-align: bottom; overflow: hidden; color: var(--gold); padding-bottom: .06em; margin-bottom: -.06em; }
.rotator > span { grid-area: 1 / 1; white-space: nowrap; translate: 0 110%; opacity: 0; transition: translate .8s var(--ease-out), opacity .5s; }
.rotator > span.is-on { translate: 0 0; opacity: 1; }
.rotator > span.is-off { translate: 0 -110%; opacity: 0; }
.hero-a .hero-lede { max-width: 520px; }
.facts { display: flex; flex-wrap: wrap; border-top: 1px solid rgba(255,255,255,.18); max-width: min(760px, 58%); }
.facts div { padding: 16px 24px 0 0; margin-right: 24px; border-right: 1px solid rgba(255,255,255,.14); }
.facts div:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.facts b { display: block; font: 700 clamp(15px, 1.2vw, 17px)/1.25 var(--f-display); color: var(--white); }
.facts span { font: 500 10.5px/1.5 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: #AEBBD0; }
@media (prefers-reduced-motion: no-preference) {
  .facts { animation: fade-up 1s var(--ease-out) 1s both; }
}
@media (max-width: 1100px) {
  .hero-copy, .facts { max-width: 64%; }
  .hero-a .hero-media { width: 58%; }
}
@media (max-width: 860px) {
  .hero-copy, .facts { max-width: none; }
  .hero-a .hero-media { width: 100%; opacity: .5; }
  .hero-a .hero-media::after { background: linear-gradient(180deg, rgba(6,20,40,.35) 0%, rgba(6,20,40,.75) 55%, rgba(6,20,40,.95) 100%); mix-blend-mode: normal; }
  .hero-a .hero-photo { object-position: 70% 15%; -webkit-mask-image: none; mask-image: none; }
  .facts { display: none; }
}
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (max-height: 780px) and (min-width: 861px) {
  .hero-a .hero-title { font-size: clamp(42px, 8.4svh, 80px); }
  .hero-a .hero-title, .hero-a .hero-lede { margin-top: 14px; }
  .hero-a .hero-actions { margin-top: 18px; }
  .hero-a .hero-inner.wrap { gap: 16px; padding-top: calc(var(--header-h) + 8px); padding-bottom: 12px; }
  .facts div { padding-top: 12px; }
}
/* Hero A image: two advisors in conversation */
.hero-a .hero-media { width: min(60%, 1100px); }
.hero-a .hero-photo { object-position: 40% 30%; filter: saturate(.92) contrast(1.05) brightness(.9); }
@media (max-width: 860px) {
  .hero-a .hero-photo { object-position: 60% 30%; }
}
/* Hero A, photo 8: graded into the navy and dissolved on every edge so it reads as one scene */
.hero-a .hero-media { width: min(66%, 1240px); }
.hero-a .hero-photo {
  object-position: 10% 30%;
  filter: saturate(.78) brightness(.82) contrast(1.08);
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 12%, rgba(0,0,0,.8) 24%, #000 34%),
    linear-gradient(180deg, transparent 0%, #000 14%, #000 70%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 12%, rgba(0,0,0,.8) 24%, #000 34%),
    linear-gradient(180deg, transparent 0%, #000 14%, #000 70%, transparent 100%);
          mask-composite: intersect;
}
/* navy colour grade: multiply darkens the office whites into the brand blue */
.hero-a .hero-media::after {
  background:
    linear-gradient(90deg, #061428 0%, rgba(6,20,40,.55) 22%, rgba(6,20,40,.12) 48%, rgba(6,20,40,0) 70%),
    rgba(52,92,160,.42);
  mix-blend-mode: multiply;
}
/* a soft navy veil over the seam so no edge is ever visible */
.hero-a::after { background:
  linear-gradient(90deg, rgba(6,20,40,.94) 0%, rgba(6,20,40,.78) 30%, rgba(6,20,40,.25) 52%, rgba(6,20,40,0) 70%),
  linear-gradient(180deg, rgba(6,20,40,.5) 0%, rgba(6,20,40,0) 20%, rgba(6,20,40,0) 72%, rgba(6,20,40,.85) 100%); }
@media (max-width: 860px) {
  .hero-a .hero-media { width: 100%; }
  .hero-a .hero-photo { object-position: 72% 30%; -webkit-mask-image: none; mask-image: none; }
  .hero-a::after { background: linear-gradient(180deg, rgba(6,20,40,.55) 0%, rgba(6,20,40,.8) 45%, rgba(6,20,40,.95) 100%); }
}
/* Consistent side margins: hero aligns with the header; gutters scale with the screen */
:root { --gutter: clamp(20px, 4vw, 56px); }
.wrap {
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}
.hero-inner.wrap, .hero-a .hero-inner.wrap { max-width: var(--maxw); }
@media (max-width: 700px) {
  .bento { margin-inline: calc(-1 * max(var(--gutter), env(safe-area-inset-left, 0px))); padding-inline: max(var(--gutter), env(safe-area-inset-left, 0px)); }
}
/* Tighter side margins: 40px max, content up to 1440px */
:root { --gutter: clamp(20px, 3vw, 40px); --maxw: 1440px; }
/* Client strip: a slow, continuous row of client names */
.trust { background: var(--white); border-bottom: 1px solid var(--line); }
.trust-inner { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 24px clamp(32px, 4vw, 64px); padding-block: clamp(28px, 4vh, 40px); }
.trust-label {
  display: flex; align-items: center; gap: 14px; max-width: 220px;
  font: 500 12px/1.5 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.trust-label::before { content: ""; flex: none; width: 28px; height: 1px; background: var(--gold); }
.trust-marquee {
  display: flex; overflow: hidden; min-width: 0;
  -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%);
}
.trust-track { display: flex; flex: none; list-style: none; margin: 0; padding: 0; }
.trust-track li {
  display: flex; align-items: center; gap: clamp(32px, 3.5vw, 56px); padding-right: clamp(32px, 3.5vw, 56px);
  flex: none; border: 0; white-space: nowrap;
  font: 700 clamp(20px, 1.9vw, 28px)/1 var(--f-display); letter-spacing: -0.025em; color: #22324D;
  transition: color .3s;
}
.trust-track li::after { content: ""; width: 7px; height: 7px; rotate: 45deg; background: var(--gold); flex: none; }
.trust-track li:hover { color: var(--blue); }
@media (prefers-reduced-motion: no-preference) {
  .trust-track { animation: trust-scroll 42s linear infinite; }
  .trust-marquee:hover .trust-track { animation-play-state: paused; }
}
@keyframes trust-scroll { to { translate: -100% 0; } }
@media (prefers-reduced-motion: reduce) {
  .trust-marquee { -webkit-mask-image: none; mask-image: none; }
  .trust-track { flex-wrap: wrap; row-gap: 14px; }
  .trust-track[aria-hidden="true"], .trust-track li[aria-hidden="true"] { display: none; }
}
@media (max-width: 760px) {
  .trust-inner { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .trust-label { max-width: none; }
}
.trust-label { max-width: 280px; }
/* =====================================================================
   What we do: a choreographed entrance
   1 words lift into focus · 2 gold underline under the promise
   3 proof points slide in with a gold tick-rule · 4 photos wipe open, settle, drift
   ===================================================================== */
.statement-text { view-timeline: --stmt block; }
.statement-text .accent {
  background: linear-gradient(var(--gold), var(--gold)) 0 94% / 100% 3px no-repeat;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
@media (prefers-reduced-motion: no-preference) {
  @supports ((animation-timeline: view()) and (animation-range: entry)) {
    .statement-text .word { animation: word-focus linear both; animation-timeline: view(); animation-range: entry 15% cover 40%; }
    .statement-text .accent { animation: accent-line linear both; animation-timeline: --stmt; animation-range: cover 40% cover 55%; }
    .photo-collage .ph img { animation: ph-drift linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
  }
}
@keyframes word-focus { from { opacity: .08; filter: blur(6px); translate: 0 .32em; } }
@keyframes accent-line { from { background-size: 0% 3px; } }
@keyframes ph-drift { from { translate: 0 -2.5%; } to { translate: 0 2.5%; } }
/* proof points */
.proof-list li { position: relative; }
.proof-list li::before { content: ""; position: absolute; left: 0; top: -1px; width: 72px; height: 2px; background: var(--gold); transform-origin: left; }
.js .proof-list[data-inview] li { opacity: 0; translate: 56px 0; transition: opacity .8s var(--ease-out), translate 1s var(--ease-out); }
.js .proof-list[data-inview] li::before { scale: 0 1; transition: scale .9s var(--ease-out); }
.js .proof-list[data-inview].is-in li { opacity: 1; translate: 0 0; }
.js .proof-list[data-inview].is-in li::before { scale: 1 1; }
.js .proof-list[data-inview] li:nth-child(1)::before { transition-delay: .35s; }
.js .proof-list[data-inview] li:nth-child(2) { transition-delay: .18s; }
.js .proof-list[data-inview] li:nth-child(2)::before { transition-delay: .55s; }
.js .proof-list[data-inview] li:nth-child(3) { transition-delay: .36s; }
.js .proof-list[data-inview] li:nth-child(3)::before { transition-delay: .75s; }
/* photos: curtain wipe, zoom settle, caption rise */
.js .photo-collage[data-inview] .ph { clip-path: inset(0 100% 0 0 round var(--radius)); transition: clip-path 1.3s cubic-bezier(.77, 0, .18, 1); }
.js .photo-collage[data-inview] .ph:nth-child(2) { clip-path: inset(100% 0 0 0 round var(--radius)); transition-delay: .28s; }
.js .photo-collage[data-inview].is-in .ph,
.js .photo-collage[data-inview].is-in .ph:nth-child(2) { clip-path: inset(0 0 0 0 round var(--radius)); }
.photo-collage .ph img { scale: 1.07; }
.js .photo-collage[data-inview] .ph img { scale: 1.32; transition: scale 1.9s var(--ease-out); }
.js .photo-collage[data-inview] .ph:nth-child(2) img { transition-delay: .28s; }
.js .photo-collage[data-inview].is-in .ph img { scale: 1.07; }
.js .photo-collage[data-inview].is-in .ph:hover img { scale: 1.12; transition-duration: .9s; transition-delay: 0s; }
.js .photo-collage[data-inview] .ph figcaption { opacity: 0; translate: 0 14px; transition: opacity .6s var(--ease-out) 1.05s, translate .7s var(--ease-out) 1.05s; }
.js .photo-collage[data-inview] .ph:nth-child(2) figcaption { transition-delay: 1.3s; }
.js .photo-collage[data-inview].is-in .ph figcaption { opacity: 1; translate: 0 0; }
@media (prefers-reduced-motion: reduce) {
  .js .proof-list[data-inview] li,
.js .proof-list[data-inview] li::before,
.js .photo-collage[data-inview] .ph,
.js .photo-collage[data-inview] .ph img,
.js .photo-collage[data-inview] .ph figcaption { transition: none !important; }
}
/* never let entrance offsets widen the page */
.proof-list { overflow-x: clip; }
main > div > section { overflow-x: clip; }
/* =====================================================================
   Practices: four case files that stack as you scroll.
   Each card sticks a little lower than the last so the edges of earlier
   files stay visible; the card underneath recedes (--cover, set by JS).
   ===================================================================== */
.practices { background: var(--paper); }
.deck-list { list-style: none; margin: 0; padding: 0; }
.deck-card { --cover: 0; position: relative; margin-bottom: 20px; perspective: 1800px; }
.deck-panel {
  position: relative; isolation: isolate; overflow: hidden; border-radius: 32px; color: var(--white);
  background: var(--card-bg);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 -12px 40px -24px rgba(6,20,40,.5), 0 40px 80px -40px rgba(6,20,40,.6);
}
/* blueprint grid fading in from the art side */
.deck-panel::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--grid-bg);
  -webkit-mask-image: linear-gradient(90deg, transparent 20%, #000 75%); mask-image: linear-gradient(90deg, transparent 20%, #000 75%);
}
.deck-card:nth-child(1) { --card-bg: radial-gradient(70% 90% at 100% 0%, rgba(227,167,63,.16), transparent 55%), linear-gradient(150deg, #12305C 0%, #071A33 70%); }
.deck-card:nth-child(2) { --card-bg: radial-gradient(70% 90% at 100% 0%, rgba(255,255,255,.14), transparent 55%), linear-gradient(150deg, #0F5BBA 0%, #0A3B7E 70%); }
.deck-card:nth-child(3) { --card-bg: radial-gradient(70% 90% at 100% 100%, rgba(47,111,224,.22), transparent 55%), linear-gradient(150deg, #142E57 0%, #040C1A 75%); }
.deck-card:nth-child(4) { --card-bg: radial-gradient(70% 90% at 100% 0%, rgba(227,167,63,.14), transparent 55%), linear-gradient(150deg, #FFFFFF 0%, #EEF2F8 100%); }
.deck-inner {
  position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(24px, 4vw, 72px); align-items: stretch; padding: clamp(24px, 3vw, 48px);
}
.deck-copy { min-width: 0; display: flex; flex-direction: column; }
.deck-top {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,.16);
  font: 500 12px/1.3 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.7);
}
.deck-top b { color: var(--gold); font-weight: 500; }
.deck-body { position: relative; margin-block: auto; padding-top: clamp(20px, 3vh, 36px); }
.deck-num {
  display: block; font: 800 clamp(64px, min(7vw, 12vh), 128px)/.82 var(--f-display); letter-spacing: -0.06em;
  color: transparent; -webkit-text-stroke: 1.5px rgba(227,167,63,.8);
}
.deck-body h3 { font-size: clamp(28px, min(3vw, 5.2vh), 50px); line-height: 1.04; margin: clamp(14px, 2vh, 22px) 0 12px; color: inherit; }
.deck-body > p { color: rgba(255,255,255,.78); font-size: clamp(15.5px, 1.15vw, 17.5px); max-width: 520px; }
.deck-services { list-style: none; margin: clamp(16px, 2.6vh, 26px) 0 0; padding: 0; border-top: 1px solid rgba(255,255,255,.16); max-width: 560px; }
.deck-services li {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: clamp(9px, 1.4vh, 13px) 0; border-bottom: 1px solid rgba(255,255,255,.16); font-weight: 600; font-size: clamp(14.5px, 1.05vw, 16px);
}
.deck-link { margin-top: clamp(14px, 2.2vh, 22px); align-self: flex-start; }
.dark .deck-link, .deck-card:not(.deck-light) .deck-link { color: var(--white); }
.deck-card:not(.deck-light) .deck-link:hover { color: var(--white); }
.deck-art { min-width: 0; display: grid; place-items: center; }
.deck-art .viz { width: min(100%, 620px, calc((100svh - 300px) * 1.25)); box-shadow: 0 34px 70px -34px rgba(0,0,0,.75); }
/* white finale card */
.deck-light .deck-panel { color: var(--ink); box-shadow: inset 0 0 0 1px var(--line), 0 -12px 40px -24px rgba(6,20,40,.3), 0 40px 80px -40px rgba(6,20,40,.35); }
.deck-light .deck-panel::before { background: linear-gradient(rgba(11,74,154,.05) 1px, transparent 1px) 0 0 / 88px 88px, linear-gradient(90deg, rgba(11,74,154,.05) 1px, transparent 1px) 0 0 / 88px 88px; }
.deck-light .deck-top { color: var(--muted); border-bottom-color: var(--line); }
.deck-light .deck-top b { color: var(--gold-deep); }
.deck-light .deck-num { -webkit-text-stroke-color: rgba(134,85,8,.75); }
.deck-light .deck-body > p { color: var(--muted); }
.deck-light .deck-services, .deck-light .deck-services li { border-color: var(--line); }
/* desktop: sticky stacking with depth */
@media (min-width: 901px) {
  .deck-card { position: sticky; top: calc(var(--header-h) + 14px + var(--i) * 18px); margin-bottom: 34px; }
  .deck-card:last-child { margin-bottom: 0; }
  .deck-panel {
    height: clamp(520px, calc(100svh - var(--header-h) - 96px), 780px);
    transform-origin: 50% 0; scale: calc(1 - var(--cover) * .06);
  }
  .deck-inner { height: 100%; }
  .deck-panel::after { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; background: #020814; opacity: calc(var(--cover) * .5); }
}
/* entrance: card tilts up into place as it arrives */
@media (prefers-reduced-motion: no-preference) {
  @supports ((animation-timeline: view()) and (animation-range: entry)) {
    .deck-panel { animation: deck-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 90%; }
  }
}
@keyframes deck-rise { from { rotate: x 12deg; translate: 0 70px; } }
/* entrance: contents choreographed when the card is first seen */
.js .deck-card .reveal { opacity: 0; translate: 0 30px; transition: opacity .8s var(--ease-out), translate 1s var(--ease-out); transition-delay: calc(var(--d, 0) * 80ms + 200ms); }
.js .deck-card.is-seen .reveal { opacity: 1; translate: 0 0; }
.js .deck-card .deck-num { clip-path: inset(0 100% 0 0); transition: clip-path 1.3s cubic-bezier(.77, 0, .18, 1) .15s; }
.js .deck-card.is-seen .deck-num { clip-path: inset(0 0 0 -4px); }
.js .deck-card .deck-art { opacity: 0; translate: 48px 0; scale: .95; transition: opacity 1s var(--ease-out) .35s, translate 1.2s var(--ease-out) .35s, scale 1.2s var(--ease-out) .35s; }
.js .deck-card.is-seen .deck-art { opacity: 1; translate: 0 0; scale: 1; }
@media (prefers-reduced-motion: reduce) {
  .js .deck-card .reveal, .js .deck-card .deck-num, .js .deck-card .deck-art { transition: none; }
}
/* tablet & phone: cards in normal flow */
@media (max-width: 900px) {
  .deck-card { margin-bottom: 16px; }
  .deck-panel { border-radius: 24px; }
  .deck-inner { grid-template-columns: minmax(0, 1fr); }
  .deck-art { order: 2; }
  .deck-art .viz { width: min(100%, 560px); }
  .deck-top span:last-child { display: none; }
}
/* =====================================================================
   Approach: expanding photo panels that cycle on their own.
   Images keep a fixed width (--open-w, set by JS) so a widening panel
   reveals more of a steady photo instead of rescaling it.
   ===================================================================== */
.approach-p { background: var(--paper); padding-block: clamp(56px, 8vh, 96px); }
.panels { --ease-panel: cubic-bezier(.65, 0, .25, 1); --open-w: 800px; display: flex; gap: 12px; height: clamp(440px, 58vh, 580px); }
.panel {
  position: relative; flex: 1 1 0; min-width: 0; border-radius: 26px; overflow: hidden; cursor: pointer; isolation: isolate;
  background: var(--ink); color: var(--white); outline-offset: 4px;
  transition: flex-grow 1.15s var(--ease-panel);
  will-change: flex-grow;
}
.panel.is-open { flex-grow: 4.2; cursor: default; }
.panel img {
  position: absolute; top: 0; left: 50%; height: 100%; width: var(--open-w); max-width: none; translate: -50% 0;
  object-fit: cover; z-index: -2; scale: 1.08; filter: saturate(.8) brightness(.72);
  transition: scale 2.2s cubic-bezier(.2, .7, .2, 1), filter 1.2s ease;
}
.panel.is-open img { scale: 1; filter: saturate(1) brightness(.92); }
.panel::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(6,20,40,.55) 0%, rgba(6,20,40,.9) 100%);
  transition: opacity 1.1s ease;
}
.panel::after {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0;
  background: linear-gradient(180deg, rgba(6,20,40,.15) 0%, rgba(6,20,40,.45) 45%, rgba(6,20,40,.95) 100%);
  transition: opacity 1.1s ease;
}
.panel.is-open::before { opacity: 0; }
.panel.is-open::after { opacity: 1; }
.panel:not(.is-open):hover img { filter: saturate(.95) brightness(.85); }
.p-num { position: absolute; top: 22px; left: 24px; font: 800 30px/1 var(--f-display); letter-spacing: -0.03em; color: var(--gold); }
.p-vert {
  position: absolute; left: 50%; bottom: 30px; translate: -50% 0; writing-mode: vertical-rl; rotate: 180deg;
  font: 600 14.5px/1 var(--f-mono); letter-spacing: .22em; text-transform: uppercase; white-space: nowrap;
  transition: opacity .35s ease .55s;
}
.panel.is-open .p-vert { opacity: 0; transition-delay: 0s; }
.p-body {
  position: absolute; left: 0; bottom: 0; width: min(var(--open-w), 100%); padding: clamp(22px, 2.6vw, 38px);
  opacity: 0; translate: 0 18px; pointer-events: none;
  transition: opacity .3s ease, translate .3s ease;
}
.panel.is-open .p-body { opacity: 1; translate: 0 0; pointer-events: auto; transition: opacity .7s ease .6s, translate .9s var(--ease-out) .6s; }
.p-body .tag { font: 500 12px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.p-body h3 { font-size: clamp(26px, 2.6vw, 42px); margin: 12px 0 10px; max-width: 18ch; color: var(--white); }
.p-body > p:not(.tag):not(.p-get) { color: #D4DCE8; max-width: 48ch; font-size: 16px; }
.p-get {
  margin-top: 18px; display: inline-flex; gap: 12px; align-items: center; max-width: 100%;
  background: rgba(255,255,255,.12); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.2); border-radius: 14px; padding: 12px 16px; font-size: 14.5px; font-weight: 600;
}
.p-get span { flex: none; font: 500 10.5px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-soft); }
.p-bar { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--gold); transform-origin: left; scale: 0 1; z-index: 2; }
.panels.is-playing .panel.is-open .p-bar { animation: panel-progress var(--dwell, 5s) linear both; }
.panels.is-paused .panel.is-open .p-bar { animation-play-state: paused; }
@keyframes panel-progress { to { scale: 1 1; } }
/* entrance: panels rise in one after another */
.js .approach-p .panel { opacity: 0; translate: 0 60px; }
.js .approach-p .panels.in .panel {
  opacity: 1; translate: 0 0;
  transition: flex-grow 1.15s var(--ease-panel), opacity .8s var(--ease-out) calc(var(--d) * 120ms), translate 1s var(--ease-out) calc(var(--d) * 120ms);
}
/* phone & small tablet: a vertical accordion */
@media (max-width: 900px) {
  .panels { flex-direction: column; height: auto; }
  .panel { flex: none; height: 84px; transition: height .9s var(--ease-panel); }
  .js .approach-p .panels.in .panel { transition: height .9s var(--ease-panel), opacity .8s var(--ease-out) calc(var(--d) * 120ms), translate 1s var(--ease-out) calc(var(--d) * 120ms); }
  .panel.is-open { height: clamp(380px, 56vh, 460px); }
  .panel img { width: 100%; left: 0; translate: none; }
  .p-body { width: 100%; }
  .p-vert { writing-mode: horizontal-tb; rotate: 0deg; left: 78px; top: 31px; bottom: auto; translate: none; }
  .p-get { display: flex; }
}
@media (prefers-reduced-motion: reduce) {
  .panel, .panel img, .p-body, .p-vert, .panel::before, .panel::after { transition: none !important; }
  .js .approach-p .panel { opacity: 1; translate: none; }
}
/* Panels, corrected: photo and text widths come from the row itself (container units),
   so they always match the open panel exactly and never reflow while panels animate */
.panels { container-type: inline-size; container-name: panels; }
@media (min-width: 901px) {
  .panel img { width: calc((100cqw - 36px) * 4.2 / 7.2); }
  .p-body { width: calc((100cqw - 36px) * 4.2 / 7.2); }
  .panel:not(.is-open):hover { flex-grow: 1.25; }
}
/* closed panels: let the photograph show through */
.panel img { filter: saturate(.9) brightness(.85); }
.panel::before { background: linear-gradient(180deg, rgba(6,20,40,.25) 0%, rgba(6,20,40,.55) 55%, rgba(6,20,40,.88) 100%); }
.panel:not(.is-open):hover img { filter: saturate(1) brightness(.95); }
.p-vert { text-shadow: 0 1px 10px rgba(6,20,40,.8); }
.p-num { text-shadow: 0 1px 10px rgba(6,20,40,.6); }
/* =====================================================================
   Platforms: a tilted wall of platform logos and the work done on them,
   drifting in alternate directions around a calm centre.
   ===================================================================== */
.kra-mark { font: 800 22px/1 var(--f-display); letter-spacing: -0.01em; color: var(--ink); white-space: nowrap; }
.kra-mark b { color: var(--gold-deep); font-weight: 800; }
.plat-wall { position: relative; isolation: isolate; overflow: clip; background: var(--paper); min-height: min(100svh, 900px); display: flex; align-items: center; padding-block: clamp(56px, 8vh, 96px); }
.plat-wall > .wrap { width: 100%; }
.wall-stage { position: absolute; inset: 0; overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.wall-tilt { position: absolute; left: -10%; right: -10%; top: 50%; translate: 0 -50%; rotate: -6deg; display: flex; flex-direction: column; gap: 18px; }
.wrow { display: flex; width: max-content; gap: 18px; }
.wrow .set { display: flex; gap: 18px; flex: none; }
.plat-wall.is-in .wrow:nth-child(1) .set { animation: wall-l 46s linear infinite; }
.plat-wall.is-in .wrow:nth-child(2) .set { animation: wall-r 52s linear infinite; }
.plat-wall.is-in .wrow:nth-child(3) .set { animation: wall-l 40s linear infinite; }
.plat-wall.is-in .wrow:nth-child(4) .set { animation: wall-r 44s linear infinite; }
.plat-wall.is-in .wrow:nth-child(5) .set { animation: wall-l 56s linear infinite; }
@keyframes wall-l { to { translate: calc(-100% - 18px) 0; } }
@keyframes wall-r { from { translate: calc(-100% - 18px) 0; } to { translate: 0 0; } }
.wchip { flex: none; height: 92px; padding: 0 34px; border-radius: 24px; background: var(--white); border: 1px solid var(--line); display: flex; align-items: center; box-shadow: 0 20px 40px -28px rgba(6,20,40,.35); }
.wchip img { height: 34px; width: auto; }
.wchip img.odoo { height: 44px; }
.wchip.word { background: transparent; border: 1.5px dashed #C9D3E0; box-shadow: none; font: 700 26px/1 var(--f-display); letter-spacing: -0.02em; color: #9AA6B8; white-space: nowrap; }
.wchip.word.gold { color: var(--gold-deep); border-color: #E8D3AC; background: rgba(251,243,228,.6); }
.wchip.dark { background: var(--ink); border-color: var(--ink); }
.wchip.dark .kra-mark { color: var(--white); }
.wchip.dark .kra-mark b { color: var(--gold); }
/* calm pool of light behind the headline */
.plat-wall::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse 36% 34% at 50% 52%, var(--paper) 55%, rgba(244,246,249,.85) 72%, rgba(244,246,249,0) 100%); }
.wall-center { position: relative; z-index: 2; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 18px; margin: 0 auto; max-width: 760px; }
.wall-center .eyebrow { justify-content: center; }
.wall-center .section-title { font-size: clamp(36px, min(5vw, 8vh), 72px); letter-spacing: -0.045em; line-height: 1; max-width: none; }
.wall-center > p:not(.eyebrow) { color: var(--muted); font-size: 18px; max-width: 520px; }
.svc { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.svc li { font: 600 14px/1 var(--f-body); padding: 12px 16px; border-radius: 999px; background: var(--white); border: 1px solid var(--line); color: var(--ink); box-shadow: 0 10px 24px -18px rgba(6,20,40,.4); }
.svc li i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; vertical-align: 1px; }
/* entrance: wall settles in, then the centre rises */
.js .plat-wall[data-inview] .wall-tilt { opacity: 0; scale: 1.08; transition: opacity 1.2s var(--ease-out), scale 1.6s var(--ease-out); }
.js .plat-wall[data-inview].is-in .wall-tilt { opacity: 1; scale: 1; }
.js .plat-wall[data-inview] .wall-center > * { opacity: 0; translate: 0 20px; transition: opacity .8s var(--ease-out), translate .9s var(--ease-out); }
.js .plat-wall[data-inview].is-in .wall-center > * { opacity: 1; translate: 0 0; }
.plat-wall .wall-center > :nth-child(2) { transition-delay: .12s; }
.plat-wall .wall-center > :nth-child(3) { transition-delay: .24s; }
.plat-wall .wall-center > :nth-child(4) { transition-delay: .36s; }
@media (max-width: 700px) {
  .wall-tilt { top: 2%; bottom: 2%; translate: none; justify-content: space-between; }
  .plat-wall::after { background: radial-gradient(ellipse 85% 30% at 50% 50%, var(--paper) 62%, rgba(244,246,249,.8) 80%, rgba(244,246,249,0) 100%); }
  .wchip { height: 70px; padding: 0 22px; }
  .wchip img { height: 24px; }
  .wchip img.odoo { height: 32px; }
  .wchip.word { font-size: 19px; }
  .wall-center > p:not(.eyebrow) { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .wrow .set { animation: none !important; }
  .js .plat-wall[data-inview] .wall-tilt, .js .plat-wall[data-inview] .wall-center > * { transition: none; opacity: 1; translate: none; scale: 1; }
}
/* =====================================================================
   Testimonials: a wall of client reviews at staggered heights over the
   "Trusted by leaders" headline. Tiles tip up into place on arrival,
   drift gently, and columns move at different speeds as the page scrolls.
   ===================================================================== */
.testi { position: relative; isolation: isolate; overflow: clip; padding-block: clamp(40px, 6vh, 72px);
  background:
    radial-gradient(30% 40% at 12% 30%, rgba(47,111,224,.10), transparent 70%),
    radial-gradient(30% 40% at 88% 40%, rgba(227,167,63,.13), transparent 70%),
    linear-gradient(180deg, var(--white) 0%, var(--paper) 100%); }
.tw-wall { --g: 14px; display: grid; grid-template-columns: 1fr 2.7fr 1fr 2.7fr 1fr 2.7fr 1fr 2.7fr 1fr; gap: var(--g); align-items: start;
  width: 100%; max-width: 1440px; margin-inline: auto; box-sizing: border-box;
  padding-inline: max(var(--gutter), env(safe-area-inset-left, 0px)) max(var(--gutter), env(safe-area-inset-right, 0px));
  height: clamp(380px, 56vh, 490px); padding-top: 28px; overflow: hidden; perspective: 1400px; }
/* blank tiles fade out downwards; review tiles stay fully legible */
.tw-col.blank, .tw-col > .wt { -webkit-mask-image: linear-gradient(180deg, #000 45%, transparent 92%); mask-image: linear-gradient(180deg, #000 45%, transparent 92%); }
.tw-col > .wt { -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.7), transparent 70%); mask-image: linear-gradient(180deg, rgba(0,0,0,.7), transparent 70%); }
.tw-col { display: flex; flex-direction: column; gap: var(--g); padding-top: var(--o, 0px); }
.tw-col > * { flex: none; }
.tw-col > :nth-child(2) { --r: 1; }
.tw-col > :nth-child(3) { --r: 2; }
.wt-blank.tint-b { background: linear-gradient(160deg, rgba(47,111,224,.16), rgba(248,250,252,.9)); }
.wt-blank.tint-g { background: linear-gradient(160deg, rgba(227,167,63,.22), rgba(248,250,252,.9)); }
/* review tile */
.tw-rev { position: relative; isolation: isolate; overflow: hidden; margin: 0; border-radius: 22px; padding: 20px 20px 18px; display: flex; flex-direction: column; gap: 14px;
  min-height: clamp(290px, 40vh, 340px); color: var(--white);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 30px 50px -30px rgba(6,20,40,.6); transition: box-shadow .4s, scale .5s var(--ease-out); }
.tw-rev.wt-gold { color: var(--ink); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 30px 50px -30px rgba(201,138,34,.7); }
.tw-rev:hover { scale: 1.025; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 44px 70px -30px rgba(6,20,40,.7); }
.tw-rev::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(160deg, rgba(255,255,255,.2), transparent 42%); }
.tw-rev::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.4) 50%, transparent 65%) no-repeat; background-size: 250% 100%; background-position: 130% 0; opacity: 0; }
.tw-mark { position: absolute; z-index: -1; right: -10px; top: -30px; font: 800 130px/1 var(--f-display); letter-spacing: -0.06em; opacity: .1; pointer-events: none; }
.tw-top { display: flex; justify-content: space-between; align-items: center; }
.tw-top svg { opacity: .8; }
.tw-rev blockquote { margin: 0; font-size: clamp(13.5px, min(1.05vw, 1.8vh), 15px); line-height: 1.5; }
.tw-rev figcaption { margin-top: auto; display: flex; align-items: center; gap: 10px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.22); }
.tw-rev.wt-gold figcaption { border-color: rgba(6,20,40,.18); }
.tw-av { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font: 800 13px/1 var(--f-display); background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.35); }
.tw-rev.wt-gold .tw-av { background: rgba(6,20,40,.08); border-color: rgba(6,20,40,.2); }
.tw-rev figcaption div { min-width: 0; }
.tw-rev figcaption strong { display: block; font-size: 13.5px; font-weight: 600; }
.tw-rev figcaption div span { display: block; font: 500 10px/1.35 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; opacity: .8; }
/* headline */
.tw-head { position: relative; z-index: 2; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: clamp(-36px, -3vh, -16px); }
.tw-head h2 { font-size: clamp(34px, min(4.6vw, 7vh), 72px); color: var(--ink); letter-spacing: -0.045em; line-height: 1; }
.tw-head .ln { display: block; overflow: hidden; padding-bottom: .08em; }
.tw-head .ln > span { display: block; }
.tw-head .ln.sub { color: #8A97AA; }
.tw-head > p:not(.tag-pill) { color: var(--muted); font-size: 17px; max-width: 520px; }
.tw-hint { display: none; }
/* arrival: tiles tip up from below column by column, then catch the light */
.js .testi[data-inview] .tw-col > * { opacity: 0; translate: 0 90px; rotate: x 55deg; transform-origin: 50% 100%;
  transition: opacity .7s var(--ease-out), translate 1.1s var(--ease-out), rotate 1.1s var(--ease-out), box-shadow .4s, scale .5s var(--ease-out);
  transition-delay: calc(var(--k) * 70ms + var(--r, 0) * 120ms); }
.js .testi[data-inview].is-in .tw-col > * { opacity: 1; translate: 0 0; rotate: x 0deg; }
.js .testi[data-inview].is-in .tw-rev:hover { transition-delay: 0s; }
.js .testi[data-inview] .tw-rev > :not(.tw-mark) { opacity: 0; transition: opacity .6s ease; transition-delay: calc(.75s + var(--k) * 70ms); }
.js .testi[data-inview].is-in .tw-rev > :not(.tw-mark) { opacity: 1; }
.js .testi[data-inview] .tw-head .ln > span { translate: 0 110%; transition: translate 1s var(--ease-out) .5s; }
.js .testi[data-inview] .tw-head .ln.sub > span { transition-delay: .64s; }
.js .testi[data-inview].is-in .tw-head .ln > span { translate: 0 0; }
.js .testi[data-inview] .tw-head > p { opacity: 0; translate: 0 14px; transition: opacity .8s var(--ease-out) .4s, translate .9s var(--ease-out) .4s; }
.js .testi[data-inview] .tw-head > p:last-child { transition-delay: .85s; }
.js .testi[data-inview].is-in .tw-head > p { opacity: 1; translate: 0 0; }
@media (prefers-reduced-motion: no-preference) {
  .testi.is-in .tw-col > * { animation: tw-float var(--f, 7s) ease-in-out 1.8s infinite alternate; }
  .testi.is-in .tw-rev::after { animation: tw-sheen 1.4s ease-in-out both; animation-delay: calc(1.1s + var(--k) * 80ms); }
  @supports (animation-timeline: view()) {
    .tw-col { animation: tw-par linear both; animation-timeline: view(); animation-range: cover; }
  }
}
@keyframes tw-float { to { transform: translateY(-12px); } }
@keyframes tw-sheen { 0% { opacity: 1; background-position: 130% 0; } 100% { opacity: 1; background-position: -30% 0; } }
@keyframes tw-par { from { transform: translateY(calc(var(--sp, 0) * 1px)); } to { transform: translateY(calc(var(--sp, 0) * -1px)); } }
/* short laptop screens */
@media (max-height: 800px) and (min-width: 1001px) {
  .testi { padding-block: 36px 32px; }
  .tw-head { gap: 10px; }
  .tw-head h2 { font-size: clamp(30px, min(4.2vw, 6.4vh), 56px); }
  .tw-head > p:not(.tag-pill) { font-size: 15.5px; }
  .tw-col { padding-top: calc(var(--o, 0px) * .4); }
  .tw-rev { padding: 16px 16px 14px; gap: 10px; min-height: 0; }
  .tw-rev blockquote { font-size: 13px; line-height: 1.45; }
  .tw-rev figcaption { padding-top: 10px; }
  .tw-mark { font-size: 104px; top: -24px; }
}
/* tablet and phone: the reviews become a swipeable row */
@media (max-width: 1000px) {
  .tw-wall { display: flex; height: auto; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-block: 8px 28px; }
  .tw-wall::-webkit-scrollbar { display: none; }
  .tw-col.blank, .tw-col > .wt { display: none; }
  .tw-col { flex: 0 0 46%; min-width: 0; padding-top: 0; scroll-snap-align: center; animation: none !important; }
  .js .testi[data-inview] .tw-col > * { transition-delay: calc(var(--k) * 50ms); }
  .tw-rev { min-height: 300px; }
  .tw-rev blockquote { font-size: 15px; }
  .tw-head { margin-top: 8px; }
  .tw-hint { display: block; text-align: center; font: 500 11px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-top: -12px; }
}
@media (max-width: 640px) {
  .tw-col { flex-basis: 80%; }
  .tw-rev { min-height: 290px; }
  .tw-head > p:not(.tag-pill) { font-size: 15.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .js .testi[data-inview] .tw-col > *, .js .testi[data-inview] .tw-rev > :not(.tw-mark), .js .testi[data-inview] .tw-head .ln > span, .js .testi[data-inview] .tw-head > p {
    transition: none; opacity: 1; translate: none; rotate: none; }
}
/* =====================================================================
   Insights preview: one featured article with a photo, beside a
   numbered index of four more. The photo wipes open on arrival and the
   index rows slide in as their rules draw.
   ===================================================================== */
.ins-h { background: var(--white); padding-block: clamp(48px, 8vh, 96px); }
.ih-head { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: clamp(24px, 4vh, 40px); }
.ih-head h2 { font-size: clamp(32px, min(4vw, 6.5vh), 60px); color: var(--ink); margin-top: 12px; }
.ih-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font: 500 11.5px/1.3 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.ih-meta .cat { color: var(--gold-deep); }
.ih-grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: stretch; }
.ih-feat { display: flex; flex-direction: column; gap: 16px; text-decoration: none; color: inherit; }
.ih-photo { position: relative; margin: 0; border-radius: 24px; overflow: hidden; aspect-ratio: 16 / 9.4; max-height: 44vh; width: 100%; }
.ih-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 40%; display: block; transition: scale 1.4s var(--ease-out); }
.ih-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,20,40,0) 45%, rgba(6,20,40,.55)); }
.ih-chip { position: absolute; z-index: 2; top: 16px; left: 16px; font: 500 11px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; padding: 8px 12px; border-radius: 999px; background: var(--gold); color: var(--ink); }
.ih-time { position: absolute; z-index: 2; bottom: 16px; right: 16px; font: 500 11px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--white); padding: 8px 12px; border-radius: 999px; background: rgba(6,20,40,.4); border: 1px solid rgba(255,255,255,.25); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.ih-feat h3 { font-size: clamp(24px, min(2.3vw, 4vh), 34px); color: var(--ink); line-height: 1.1; transition: color .3s; }
.ih-feat p { color: var(--muted); font-size: 16px; max-width: 56ch; }
.ih-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-rows: repeat(4, minmax(0, 1fr)); }
.ih-list li { position: relative; display: flex; align-items: center; }
.ih-list li > a { flex: 1; }
.ih-list li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--line); transform-origin: left; }
.ih-list li:last-child::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line); transform-origin: left; }
.ih-row { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr) 104px; gap: 16px; align-items: center; padding: clamp(14px, 2.2vh, 22px) 0; text-decoration: none; color: inherit; }
.ih-row .n { font: 500 13px/1 var(--f-mono); letter-spacing: .1em; color: var(--muted); transition: color .3s; }
.ih-row .body { padding-right: 28px; }
.ih-row h4 { margin: 8px 0 0; font: 700 clamp(17px, min(1.45vw, 2.6vh), 21px)/1.22 var(--f-display); letter-spacing: -0.02em; color: var(--ink); transition: color .3s; }
.ih-cv { position: relative; overflow: hidden; isolation: isolate; width: 104px; height: 68px; border-radius: 12px; background: var(--cover-bg, linear-gradient(150deg, #0B1D38, #061428)); }
.ih-cv::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--grid-bg); }
.ih-cv svg { position: absolute; inset: 0; width: 100%; height: 100%; transition: scale .9s var(--ease-out); }
/* arrival */
.js .ins-h[data-inview] .ih-head > * { opacity: 0; translate: 0 20px; transition: opacity .8s var(--ease-out), translate .9s var(--ease-out); }
.js .ins-h[data-inview] .ih-head > :last-child { transition-delay: .15s; }
.js .ins-h[data-inview] .ih-photo { clip-path: inset(0 100% 0 0 round 24px); transition: clip-path 1.3s var(--ease-out) .15s; }
.js .ins-h[data-inview] .ih-photo img { scale: 1.18; transition: scale 1.8s var(--ease-out) .15s; }
.js .ins-h[data-inview] .ih-feat > :not(.ih-photo) { opacity: 0; translate: 0 18px; transition: opacity .8s var(--ease-out) .6s, translate .9s var(--ease-out) .6s, color .3s; }
.js .ins-h[data-inview] .ih-list li::before, .js .ins-h[data-inview] .ih-list li:last-child::after { scale: 0 1; transition: scale 1s var(--ease-out); transition-delay: calc(.3s + var(--d) * 120ms); }
.js .ins-h[data-inview] .ih-row { opacity: 0; translate: 40px 0; transition: opacity .8s var(--ease-out), translate .9s var(--ease-out); transition-delay: calc(.4s + var(--d) * 120ms); }
.js .ins-h[data-inview].is-in .ih-head > *, .js .ins-h[data-inview].is-in .ih-feat > :not(.ih-photo), .js .ins-h[data-inview].is-in .ih-row { opacity: 1; translate: 0 0; }
.js .ins-h[data-inview].is-in .ih-photo { clip-path: inset(0 0 0 0 round 24px); }
.js .ins-h[data-inview].is-in .ih-photo img { scale: 1; }
.js .ins-h[data-inview].is-in .ih-list li::before, .js .ins-h[data-inview].is-in .ih-list li:last-child::after { scale: 1 1; }
@media (max-height: 800px) and (min-width: 961px) {
  .ins-h { padding-block: 40px; }
  .ih-feat p { display: none; }
  .ih-photo { max-height: 40vh; }
  .ih-row { grid-template-columns: 40px minmax(0, 1fr) 92px; }
  .ih-cv { width: 92px; height: 58px; }
}
@media (max-width: 960px) {
  .ih-feat p { display: none; }
  .ih-cv { display: none; }
  .ih-row { grid-template-columns: 30px minmax(0, 1fr); gap: 12px; }
  .ih-row .body { padding-right: 0; }
  .ih-photo { max-height: none; }
}
@media (max-width: 640px) {
  .ins-h { padding-block: 36px 40px; }
  .ih-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .ih-cv { display: block; }
  .ih-head { align-items: start; flex-direction: column; gap: 12px; }
  .ih-list { grid-template-rows: none; }
  .ih-list li:nth-child(n+4) { display: none; }
  .ih-list li:nth-child(3)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line); }
  .ih-row { grid-template-columns: 30px minmax(0, 1fr) 76px; gap: 12px; padding: 12px 0; }
  .ih-cv { width: 76px; height: 52px; }
  .ih-photo { aspect-ratio: 16 / 8.5; }
  .ih-feat { gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .js .ins-h[data-inview] .ih-head > *, .js .ins-h[data-inview] .ih-feat > :not(.ih-photo), .js .ins-h[data-inview] .ih-row { transition: none; opacity: 1; translate: none; }
  .js .ins-h[data-inview] .ih-photo { transition: none; clip-path: none; }
  .js .ins-h[data-inview] .ih-photo img { transition: none; scale: 1; }
  .js .ins-h[data-inview] .ih-list li::before, .js .ins-h[data-inview] .ih-list li:last-child::after { transition: none; scale: 1 1; }
}
/* =====================================================================
   Contact: a looping illustration (LottieFiles, Lottie Simple License)
   beside a clean form card that sits on an offset gold block.
   ===================================================================== */
.ct { position: relative; isolation: isolate; overflow: clip; padding-block: clamp(56px, 9vh, 104px);
  background: radial-gradient(40% 55% at 18% 70%, rgba(227,167,63,.16), transparent 70%), radial-gradient(35% 50% at 92% 10%, rgba(47,111,224,.10), transparent 70%), var(--paper); }
.ct-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(36px, 6vw, 104px); align-items: center; }
.ct-copy h2 { font-size: clamp(34px, min(4.2vw, 6.6vh), 62px); line-height: 1; letter-spacing: -0.045em; color: var(--ink); margin: 14px 0 14px; }
.ct-copy h2 em { font-style: normal; color: var(--blue); }
.ct-lede { color: var(--muted); font-size: 17px; max-width: 460px; }
.ct-art { position: relative; width: 100%; height: clamp(260px, 42vh, 420px); margin: clamp(4px, 1vh, 10px) 0; }
.ct-art::before { content: ""; position: absolute; inset: 4% 12%; border-radius: 50%; background: radial-gradient(circle, rgba(227,167,63,.24), rgba(227,167,63,0) 68%); }
/* the source artboard has wide empty margins, so the drawing is enlarged inside a cropped frame */
.ct-lottie { position: absolute; left: 50%; top: 50%; width: calc(var(--art-h, 420px) * 1.55); aspect-ratio: 1; translate: -50% -50%; }
.ct-lottie svg { display: block; }
.ct-art { --art-h: clamp(260px, 42vh, 420px); overflow: hidden; }
.ct-reach { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ct-reach li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 6px 6px 13px; border-radius: 999px; background: var(--white); border: 1px solid var(--line); font-size: 14.5px; }
.ct-reach li:last-child { padding-right: 14px; }
.ct-reach i { font-style: normal; font: 500 10px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-deep); }
.ct-reach strong { font-weight: 600; color: var(--ink); }
.ct-copy-btn { font: 500 10px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; padding: 8px 10px; border-radius: 999px; border: 0; background: var(--paper); color: var(--ink); cursor: pointer; transition: background .25s, color .25s; }
.ct-copy-btn:hover { background: var(--ink); color: var(--white); }
/* form card on an offset gold block */
.ct-card-wrap { position: relative; }
.ct-card-wrap::before { content: ""; position: absolute; inset: 34px -16px -16px 34px; border-radius: 30px; background: linear-gradient(150deg, #F0C374, #C98A22); }
.ct-card { position: relative; background: var(--white); border-radius: 26px; padding: clamp(24px, 2.8vw, 38px); box-shadow: 0 40px 80px -40px rgba(6,20,40,.45); }
.ct-top { display: flex; justify-content: space-between; align-items: start; gap: 16px; margin-bottom: 20px; }
.ct-top h3 { font-size: clamp(22px, 2vw, 28px); color: var(--ink); }
.ct-top p { color: var(--muted); font-size: 15px; margin-top: 4px; }
.ct-lock { flex: none; display: inline-flex; align-items: center; gap: 7px; font: 500 10.5px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-deep); background: #FBF3E4; border: 1px solid #EBD7B2; padding: 8px 11px; border-radius: 999px; }
.ct-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.ct-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.ct-field.full { grid-column: 1 / -1; }
/* each field is its own layer, and the one with the open menu rises above the rest */
.ct-fields > * { position: relative; z-index: 1; }
.ct-fields > :has(.ct-dd.open) { z-index: 30; }
.ct-field label, .ct-label { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.ct-field label span { font-weight: 400; color: var(--muted); }
.ct-field input, .ct-field textarea { box-sizing: border-box; width: 100%; font: inherit; font-size: 15.5px; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; min-height: 48px; transition: border-color .25s, background .25s, box-shadow .25s; }
.ct-field textarea { min-height: 72px; resize: vertical; }
.ct-field input::placeholder, .ct-field textarea::placeholder { color: #98A2B3; }
.ct-field input:focus, .ct-field textarea:focus { outline: none; border-color: var(--blue); background: var(--white); box-shadow: 0 0 0 4px rgba(47,111,224,.14); }
.ct-field input:user-invalid { border-color: #D92D20; background: #FEF3F2; }
/* the improved dropdown */
.ct-dd { position: relative; z-index: 2; }
.ct-dd.open { z-index: 40; }
.ct-dd-btn { box-sizing: border-box; width: 100%; min-height: 48px; display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 7px; font: inherit; font-size: 15px; text-align: left; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 12px; cursor: pointer; transition: border-color .25s, background .25s, box-shadow .25s; }
.ct-dd-btn b { flex: 1; min-width: 0; font-weight: 600; font-size: 14px; letter-spacing: -0.01em; line-height: 1.25; }
.ct-dd-btn .ico { width: 34px; height: 34px; border-radius: 9px; background: var(--ink); color: var(--gold); }
.ct-dd-btn .chev { flex: none; color: var(--muted); transition: rotate .3s var(--ease-out); }
.ct-dd-btn:hover { border-color: #B8C4D6; }
.ct-dd-btn:focus-visible, .ct-dd.open .ct-dd-btn { outline: none; border-color: var(--blue); background: var(--white); box-shadow: 0 0 0 4px rgba(47,111,224,.14); }
.ct-dd.open .chev { rotate: 180deg; color: var(--blue); }
.ct-dd .ico { flex: none; display: grid; place-items: center; }
.ct-list { position: absolute; right: 0; top: calc(100% + 8px); width: max(100%, 330px); max-width: calc(100vw - 32px); box-sizing: border-box; margin: 0; padding: 6px; list-style: none; background: var(--white); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 30px 60px -24px rgba(6,20,40,.45);
  opacity: 0; translate: 0 -6px; scale: .98; transform-origin: top right; pointer-events: none; transition: opacity .2s, translate .25s var(--ease-out), scale .25s var(--ease-out); }
.ct-dd.open .ct-list { opacity: 1; translate: 0 0; scale: 1; pointer-events: auto; }
.ct-list li { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 11px; cursor: pointer; outline: none; }
.ct-list .ico { width: 36px; height: 36px; border-radius: 10px; background: var(--paper); color: var(--blue); transition: background .2s, color .2s; }
.ct-list .t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ct-list b { font-weight: 600; font-size: 14.5px; color: var(--ink); }
.ct-list small { font-size: 12.5px; color: var(--muted); }
.ct-list .tick { flex: none; opacity: 0; color: var(--blue); }
.ct-list li:hover, .ct-list li:focus { background: var(--paper); }
.ct-list li:hover .ico, .ct-list li:focus .ico { background: var(--ink); color: var(--gold); }
.ct-list li[aria-selected="true"] .tick { opacity: 1; }
.ct-list li[aria-selected="true"] b { color: var(--blue); }
.ct-chk { display: flex; gap: 12px; align-items: flex-start; margin-top: 16px; font-size: 13px; line-height: 1.5; color: var(--muted); cursor: pointer; }
.ct-chk input { appearance: none; -webkit-appearance: none; flex: none; width: 22px; height: 22px; margin: 0; border-radius: 7px; border: 1.5px solid #B8C4D6; background: var(--white); display: grid; place-items: center; cursor: pointer; transition: background .2s, border-color .2s; }
.ct-chk input::after { content: ""; width: 11px; height: 6px; border: solid var(--ink); border-width: 0 0 2.5px 2.5px; rotate: -45deg; translate: 0 -1px; scale: 0; transition: scale .2s var(--ease-out); }
.ct-chk input:checked { background: var(--gold); border-color: var(--gold); }
.ct-chk input:checked::after { scale: 1; }
.ct-chk input:focus-visible { outline: 3px solid rgba(47,111,224,.4); outline-offset: 2px; }
.ct-chk input:user-invalid { border-color: #D92D20; }
.ct-send { width: 100%; margin-top: 16px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; font: 700 16.5px/1 var(--f-display); letter-spacing: -0.01em; border: 0; cursor: pointer; padding: 18px 26px; border-radius: 14px; background: var(--ink); color: var(--white); transition: background .3s, translate .3s var(--ease-out); }
.ct-send:hover { background: var(--blue); translate: 0 -1px; }
.ct-send svg { transition: translate .3s var(--ease-out); }
.ct-send:hover svg { translate: 4px 0; }
.ct-send:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.ct-status { margin-top: 10px; min-height: 1.3em; font-size: 14px; font-weight: 600; color: var(--blue); }
/* arrival */
.js .ct[data-inview] .ct-copy > * { opacity: 0; translate: 0 22px; transition: opacity .8s var(--ease-out), translate .9s var(--ease-out); }
.js .ct[data-inview] .ct-copy > :nth-child(2) { transition-delay: .08s; }
.js .ct[data-inview] .ct-copy > :nth-child(3) { transition-delay: .16s; }
.js .ct[data-inview] .ct-copy > :nth-child(4) { transition-delay: .25s; translate: 0 0; scale: .85; transition-property: opacity, scale; transition-duration: 1s; }
.js .ct[data-inview] .ct-copy > :nth-child(5) { transition-delay: .5s; }
.js .ct[data-inview] .ct-card-wrap::before { opacity: 0; translate: 40px 40px; transition: opacity .9s var(--ease-out) .45s, translate 1.1s var(--ease-out) .45s; }
.js .ct[data-inview] .ct-card { opacity: 0; translate: 60px 0; transition: opacity .9s var(--ease-out) .2s, translate 1.1s var(--ease-out) .2s; }
.js .ct[data-inview] .ct-fields > * { opacity: 0; translate: 0 12px; transition: opacity .6s, translate .7s var(--ease-out); }
.js .ct[data-inview] .ct-fields > :nth-child(1) { transition-delay: .55s; }
.js .ct[data-inview] .ct-fields > :nth-child(2) { transition-delay: .62s; }
.js .ct[data-inview] .ct-fields > :nth-child(3) { transition-delay: .69s; }
.js .ct[data-inview] .ct-fields > :nth-child(4) { transition-delay: .76s; }
.js .ct[data-inview] .ct-fields > :nth-child(5) { transition-delay: .83s; } .js .ct[data-inview] .ct-fields > :nth-child(6) { transition-delay: .9s; }
.js .ct[data-inview].is-in .ct-copy > *, .js .ct[data-inview].is-in .ct-card, .js .ct[data-inview].is-in .ct-card-wrap::before, .js .ct[data-inview].is-in .ct-fields > * { opacity: 1; translate: none; scale: 1; }
@media (max-height: 800px) and (min-width: 961px) {
  .ct { padding-block: 40px; }
  .ct-art { --art-h: clamp(200px, 34vh, 300px); height: var(--art-h); }
  .ct-field textarea { min-height: 64px; }
  .ct-top { margin-bottom: 14px; }
}
@media (max-width: 960px) {
  .ct { padding-block: 40px; }
  .ct-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .ct-lede { display: none; }
  .ct-field textarea { min-height: 64px; }
  .ct-copy { display: grid; grid-template-columns: minmax(0, 1fr) clamp(120px, 26vw, 200px); column-gap: 16px; align-items: center; }
  .ct-copy > :not(.ct-art) { grid-column: 1; }
  .ct-art { grid-column: 2; grid-row: 1 / span 3; width: 100%; --art-h: clamp(110px, 24vw, 190px); height: var(--art-h); margin: 0; }
  .ct-reach { grid-column: 1 / -1 !important; margin-top: 16px; }
  .ct-reach .ct-office { display: none; }
  .ct-reach li.ct-profile { padding-block: 0; }
  .ct-card-wrap::before { inset: 24px -10px -10px 24px; }
}
@media (max-width: 640px) {
  .ct { padding-block: 28px 32px; }
  .ct-grid { gap: 16px; }
  .ct-copy h2 { font-size: 30px; margin-bottom: 0; }
  .ct-reach { display: none; }
  .ct-fields { gap: 10px; }
  .ct-fields > :nth-child(3), .ct-fields > :nth-child(4) { grid-column: 1 / -1; }
  .ct-field { gap: 5px; }
  .ct-field label, .ct-label { font-size: 12.5px; }
  .ct-field input, .ct-dd-btn { min-height: 44px; padding-block: 9px; }
  .ct-dd-btn { padding-block: 4px; }
  .ct-dd-btn .ico { width: 30px; height: 30px; }
  .ct-field textarea { min-height: 52px; }
  .ct-card { padding: 18px; border-radius: 22px; }
  .ct-top { margin-bottom: 12px; }
  .ct-top h3 { font-size: 21px; }
  .ct-top p, .ct-lock { display: none; }
  .ct-chk { margin-top: 12px; font-size: 12px; }
  .ct-send { margin-top: 12px; padding: 15px 22px; }
  .ct-card-wrap::before { inset: 18px -8px -8px 18px; border-radius: 24px; }
  .ct-list { position: fixed; left: 16px; right: 16px; top: auto; bottom: 16px; width: auto; transform-origin: bottom center; }
}
@media (prefers-reduced-motion: reduce) {
  .js .ct[data-inview] .ct-copy > *, .js .ct[data-inview] .ct-card, .js .ct[data-inview] .ct-card-wrap::before, .js .ct[data-inview] .ct-fields > * { transition: none; opacity: 1; translate: none; scale: 1; }
}
/* =====================================================================
   Footer: brand and a live "next KRA deadline" card, link columns, then
   an oversized wordmark that rises letter by letter and fills with gold.
   ===================================================================== */
.ft { position: relative; isolation: isolate; overflow: clip; color: var(--mist); background: var(--grid-bg), radial-gradient(40% 50% at 85% 0%, rgba(47,111,224,.18), transparent 70%), var(--ink); border-top: 1px solid var(--line-dark); }
.ft-top { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: end; padding-block: clamp(40px, 6vh, 64px) clamp(24px, 4vh, 40px); border-bottom: 1px solid rgba(255,255,255,.1); }
.ft-brand { display: flex; flex-wrap: wrap; align-items: center; gap: 16px clamp(20px, 3vw, 40px); }
.ft-brand .ft-clock { margin-left: auto; }
.ft-brand .logo-plate-lg img { height: 72px; width: auto; }
.ft-brand > p { max-width: 380px; font-size: 16px; }
.ft-clock { display: inline-flex; align-items: center; gap: 10px; font: 500 12px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mist); padding: 9px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); }
.ft-clock b { color: var(--white); font-weight: 500; font-variant-numeric: tabular-nums; }
.ft-clock .dot { width: 7px; height: 7px; border-radius: 50%; background: #3DD68C; }
@media (prefers-reduced-motion: no-preference) {
  .ft-clock .dot { animation: lt-pulse 2.2s ease-out infinite; }
}
@keyframes lt-pulse { to { box-shadow: 0 0 0 9px rgba(61,214,140,0); } }
/* link columns */
.ft-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px clamp(24px, 4vw, 64px); padding-block: clamp(28px, 5vh, 48px); }
.ft-col h3 { font: 500 11.5px/1.4 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--white); margin-bottom: 10px; }
.ft-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.ft-col a { position: relative; display: inline-block; padding-block: 6px; color: var(--mist); text-decoration: none; transition: color .25s, translate .3s var(--ease-out); }
.ft-col a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 3px; height: 1px; background: var(--gold); transform-origin: right; scale: 0 1; transition: scale .35s var(--ease-out); }
.ft-col a:hover { color: var(--white); translate: 4px 0; }
.ft-col a:hover::after { transform-origin: left; scale: 1 1; }
.ft-contact li { display: flex; align-items: center; gap: 10px; padding-block: 6px; min-width: 0; }
.ft-contact strong { color: var(--white); font-weight: 600; overflow-wrap: anywhere; }
.ft-copy { flex: none; font: 500 10px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; padding: 7px 9px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); background: transparent; color: var(--mist); cursor: pointer; transition: background .25s, color .25s, border-color .25s; }
.ft-copy:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }
/* wordmark */
.ft-word { display: flex; justify-content: center; font: 800 clamp(96px, min(19vw, 34vh), 320px)/.78 var(--f-display); letter-spacing: -0.065em; user-select: none; padding-inline: 2vw; margin-top: clamp(8px, 2vh, 24px); overflow: hidden; height: .62em; }
.ft-word span { display: inline-block; color: var(--ink-3); }
.ft-legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding-block: 20px 28px; border-top: 1px solid rgba(255,255,255,.1); font-size: 13.5px; }
.ft-proto { font: 500 10.5px/1.4 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); }
.ft-top-btn { display: inline-flex; align-items: center; gap: 8px; color: var(--white); text-decoration: none; font-weight: 600; padding: 9px 14px; border-radius: 999px; background: rgba(255,255,255,.06); transition: background .25s, color .25s; }
.ft-top-btn:hover { background: var(--gold); color: var(--ink); }
/* arrival */
.js .ft[data-inview] .ft-top > *, .js .ft[data-inview] .ft-col { opacity: 0; translate: 0 26px; transition: opacity .8s var(--ease-out), translate .9s var(--ease-out); }
.js .ft[data-inview] .ft-col:nth-child(1) { transition-delay: .2s; }
.js .ft[data-inview] .ft-col:nth-child(2) { transition-delay: .28s; }
.js .ft[data-inview] .ft-col:nth-child(3) { transition-delay: .36s; }
.js .ft[data-inview] .ft-col:nth-child(4) { transition-delay: .44s; }
.js .ft[data-inview] .ft-word span { translate: 0 70%; transition: translate 1.1s var(--ease-out); }
.js .ft[data-inview] .ft-word span:nth-child(1) { transition-delay: .5s; }
.js .ft[data-inview] .ft-word span:nth-child(2) { transition-delay: .57s; }
.js .ft[data-inview] .ft-word span:nth-child(3) { transition-delay: .64s; }
.js .ft[data-inview] .ft-word span:nth-child(4) { transition-delay: .71s; }
.js .ft[data-inview] .ft-word span:nth-child(5) { transition-delay: .78s; }
.js .ft[data-inview] .ft-word span:nth-child(6) { transition-delay: .85s; }
.js .ft[data-inview].is-in .ft-top > *, .js .ft[data-inview].is-in .ft-col { opacity: 1; translate: none; }
.js .ft[data-inview].is-in .ft-word span { translate: none; }
@media (max-height: 800px) and (min-width: 901px) {
  .ft-top { padding-block: 28px 20px; }
  .ft-brand { gap: 12px; }
  .ft-brand .logo-plate-lg img { height: 56px; }
  .ft-cols { padding-block: 22px; }
  .ft-col a { padding-block: 4px; }
  .ft-word { font-size: clamp(96px, min(17vw, 27vh), 280px); margin-top: 0; }
  .ft-legal { padding-block: 14px 18px; }
}
@media (max-width: 900px) {
  .ft-top { padding-block: 36px 24px; }
  .ft-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding-block: 24px; }
  .ft-col:nth-child(3) { display: none; }
}
@media (max-width: 480px) {
  .ft-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .ft-top { padding-block: 28px 20px; gap: 16px; }
  .ft-brand { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
  .ft-brand > p:not(.ft-clock) { display: none; }
  .ft-cols { padding-block: 20px; }
  .ft-col h3 { margin-bottom: 4px; }
  .ft-col a { padding-block: 4px; }
  .ft-word { font-size: 30vw; margin-top: 0; }
  .ft-legal { padding-block: 14px 20px; gap: 8px 12px; font-size: 12.5px; }
  .ft-proto { font-size: 9.5px; }
  .ft-brand .logo-plate-lg img { height: 44px; }
  .ft-brand .logo-plate-lg { padding: 8px 12px; border-radius: 14px; }
  .ft-cols { gap: 22px 16px; }
  .ft-col a { font-size: 14.5px; }
  .ft-col:nth-child(3) { display: none; }
  .ft-col:nth-child(4) { grid-column: 1 / -1; }
  .ft-legal { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .js .ft[data-inview] .ft-top > *, .js .ft[data-inview] .ft-col, .js .ft[data-inview] .ft-word span { transition: none; opacity: 1; translate: none; scale: 1 1; }
}
/* footer: brand on the left, link columns beside it */
.ft-main { display: grid; grid-template-columns: minmax(0, 250px) minmax(0, 1fr); gap: 32px clamp(32px, 5vw, 88px); align-items: start; padding-block: clamp(40px, 7vh, 72px) clamp(28px, 5vh, 48px); }
.ft-main .ft-top { padding: 0; border: 0; }
.ft-main .ft-brand { flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 16px; }
.ft-main .ft-brand .ft-clock { margin-left: 0; }
.ft-main .ft-brand > p:not(.ft-clock) { font-size: 15px; max-width: 260px; }
.ft-main .ft-cols { padding: 6px 0 0; gap: 24px clamp(20px, 3vw, 48px); grid-template-columns: minmax(0, 1.25fr) minmax(0, .8fr) minmax(0, 1fr) minmax(0, 1.35fr); }
.ft-main .ft-col a, .ft-contact strong { white-space: nowrap; }
.ft-word { border-top: 1px solid rgba(255,255,255,.1); padding-top: clamp(12px, 2vh, 24px); }
@media (max-height: 800px) and (min-width: 901px) {
  .ft-main { padding-block: 32px 24px; }
}
@media (max-width: 1100px) {
  .ft-main .ft-contact strong { white-space: normal; }
  .ft-main .ft-cols { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr) minmax(0, 1.3fr); }
  .ft-main .ft-col:nth-child(3) { display: none; }
}
@media (max-width: 900px) {
  .ft-main { grid-template-columns: minmax(0, 1fr); padding-block: 32px 24px; gap: 24px; }
  .ft-main .ft-brand { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
  .ft-main .ft-brand .ft-clock { margin-left: auto; }
}
@media (max-width: 480px) {
  .ft-main .ft-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ft-main .ft-col a, .ft-contact strong { white-space: normal; }
}
/* header: slimmer once the page scrolls */
.header-inner { transition: height .35s var(--ease-out); }
.site-header.is-solid { --header-h: 60px; }
.brand .logo-plate img, .brand-name strong, .brand-name span, .main-nav > a:not(.btn), .main-nav .btn { transition: height .35s var(--ease-out), font-size .35s var(--ease-out), min-height .35s var(--ease-out), padding .35s var(--ease-out); }
.site-header.is-solid .brand .logo-plate { padding: 4px 8px; border-radius: 10px; }
.site-header.is-solid .brand .logo-plate img { height: 24px; }
.site-header.is-solid .brand-name strong { font-size: 15px; }
.site-header.is-solid .brand-name span { font-size: 9px; }
.site-header.is-solid .main-nav > a:not(.btn) { font-size: 14.5px; padding-block: 8px; }
.site-header.is-solid .main-nav .btn { min-height: 38px; padding: 0 18px; font-size: 14px; }
@media (max-width: 1000px) {
  .site-header.is-solid .nav-toggle { width: 42px; height: 42px; }
  .site-header.is-solid .main-nav > a:not(.btn) { font-size: 19px; padding-block: 18px; }
  .site-header.is-solid .main-nav .btn { min-height: 46px; font-size: 15px; }
}
/* header: past the hero it lifts off the edge into a floating capsule */
.site-header { transition: padding .5s var(--ease-out); }
.site-header .header-inner { border: 1px solid transparent; border-radius: 0;
  transition: height .45s var(--ease-out), max-width .55s var(--ease-out), padding .55s var(--ease-out), border-radius .55s var(--ease-out), background-color .4s, border-color .4s, box-shadow .4s; }
.site-header.is-solid { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; padding-top: 12px; pointer-events: none; }
.site-header.is-solid .header-inner { pointer-events: auto; max-width: min(1000px, calc(100% - 32px)); padding-inline: 8px; border-radius: 999px;
  background: rgba(6, 20, 40, .92); -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%);
  border-color: rgba(255, 255, 255, .1); box-shadow: 0 22px 44px -20px rgba(6, 20, 40, .65), inset 0 1px 0 rgba(255, 255, 255, .06); }
.brand-name { max-width: 240px; overflow: hidden; white-space: nowrap; transition: opacity .3s, max-width .5s var(--ease-out), padding .5s var(--ease-out), border-color .3s; }
.site-header.is-solid .brand { gap: 0; }
.site-header.is-solid .brand-name { opacity: 0; max-width: 0; padding-left: 0; border-left-color: transparent; }
.site-header.is-solid .brand .logo-plate { height: 44px; padding: 0 14px; border-radius: 999px; }
.site-header.is-solid .brand .logo-plate img { height: 22px; }
.site-header.is-solid .main-nav > a:not(.btn) { font-size: 14.5px; padding: 8px 12px; }
.site-header.is-solid .main-nav > a:not(.btn)::after { left: 12px; right: 12px; }
.site-header.is-solid .main-nav .btn { min-height: 44px; padding: 0 20px; font-size: 14px; margin-left: 8px; }
@media (max-width: 1000px) {
  .site-header.is-solid .header-inner { padding-inline: 8px 8px; }
  .site-header.is-solid .nav-toggle { width: 44px; height: 44px; }
  .site-header.is-solid .main-nav { inset: calc(var(--header-h) + 24px + env(safe-area-inset-top, 0px)) 16px auto 16px; border-radius: 24px; border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .6); pointer-events: auto; }
}
@media (min-width: 1001px) {
  .site-header.is-solid .header-inner { max-width: min(900px, calc(100% - 32px)); justify-content: flex-start; gap: 8px; }
  .site-header.is-solid .main-nav { flex: 1; }
  .site-header.is-solid .main-nav .btn { margin-left: auto; }
}
/* capsule spans the page, inset by the side gutter; links sit centred, the call button at the end */
@media (min-width: 1001px) {
  .site-header.is-solid .header-inner { max-width: calc(var(--maxw) - 2 * var(--gutter)); width: calc(100% - 2 * var(--gutter)); padding-inline: 10px; }
  .site-header.is-solid .main-nav a:first-child { margin-left: auto; }
}
@media (max-width: 1000px) {
  .site-header.is-solid .header-inner { max-width: none; width: calc(100% - 2 * var(--gutter)); }
}
/* =====================================================================
   FAQ: short, direct answers (the format search and answer engines quote),
   on a navy band between the client stories and the contact form.
   ===================================================================== */
.faq { position: relative; isolation: isolate; color: var(--white); padding-block: clamp(56px, 9vh, 104px);
  background: var(--grid-bg), radial-gradient(40% 60% at 0% 0%, rgba(47,111,224,.22), transparent 70%), radial-gradient(35% 50% at 100% 100%, rgba(227,167,63,.12), transparent 70%), var(--ink); }
.faq-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.5fr); gap: clamp(32px, 6vw, 104px); align-items: start; }
.faq-head { position: sticky; top: calc(var(--header-h) + 24px); }
.faq-head .eyebrow { color: var(--gold); }
.faq-head h2 { font-size: clamp(32px, min(3.8vw, 6vh), 56px); line-height: 1; letter-spacing: -0.045em; margin: 14px 0 16px; }
.faq-head h2 em { font-style: normal; color: var(--gold); }
.faq-head p { color: var(--mist); font-size: 16.5px; max-width: 380px; }
.faq-ask { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; color: var(--white); font-weight: 600; text-decoration: none; padding: 12px 18px; border-radius: 999px; border: 1px solid rgba(255,255,255,.2); transition: background .25s, color .25s, border-color .25s; }
.faq-ask:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.faq-list { border-top: 1px solid rgba(255,255,255,.12); }
.faq-item { border-bottom: 1px solid rgba(255,255,255,.12); }
.faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: clamp(12px, 1.8vh, 18px) 0; font: 600 clamp(16.5px, 1.35vw, 19px)/1.35 var(--f-display); letter-spacing: -0.01em; color: var(--white); transition: color .25s; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--gold-soft); }
.faq-item summary:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; border-radius: 6px; }
.faq-item summary i { position: relative; flex: none; width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(255,255,255,.22); transition: background .3s, border-color .3s, rotate .4s var(--ease-out); }
.faq-item summary i::before, .faq-item summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.6px; border-radius: 2px; background: currentColor; translate: -50% -50%; }
.faq-item summary i::after { rotate: 90deg; transition: rotate .4s var(--ease-out); }
.faq-item[open] summary i { background: var(--gold); border-color: var(--gold); color: var(--ink); rotate: 180deg; }
.faq-item[open] summary i::after { rotate: 0deg; }
.faq-item p { margin: 0; padding: 0 56px clamp(16px, 2.4vh, 22px) 0; color: var(--mist); font-size: 16px; line-height: 1.6; max-width: 68ch; }
@media (prefers-reduced-motion: no-preference) {
  .faq-item[open] p { animation: faq-open .45s var(--ease-out); }
}
@keyframes faq-open { from { opacity: 0; translate: 0 -6px; } }
/* arrival */
.js .faq[data-inview] .faq-head > * { opacity: 0; translate: 0 20px; transition: opacity .8s var(--ease-out), translate .9s var(--ease-out); }
.js .faq[data-inview] .faq-head > :nth-child(2) { transition-delay: .08s; }
.js .faq[data-inview] .faq-head > :nth-child(3) { transition-delay: .16s; }
.js .faq[data-inview] .faq-head > :nth-child(4) { transition-delay: .24s; }
.js .faq[data-inview] .faq-item { opacity: 0; translate: 0 18px; transition: opacity .7s var(--ease-out), translate .8s var(--ease-out); transition-delay: calc(.15s + var(--d) * 60ms); }
.js .faq[data-inview].is-in .faq-head > *, .js .faq[data-inview].is-in .faq-item { opacity: 1; translate: none; }
@media (max-height: 800px) and (min-width: 961px) {
  .faq { padding-block: 40px; }
  .faq-item summary { padding-block: 12px; }
  .faq-item p { padding-bottom: 14px; }
}
@media (max-width: 960px) {
  .faq-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .faq-head { position: static; }
}
@media (max-width: 640px) {
  .faq { padding-block: 36px; }
  .faq-grid { gap: 16px; }
  .faq-head h2 { font-size: 28px; margin-bottom: 0; }
  .faq-head p, .faq-ask { display: none; }
  .faq-item summary { padding-block: 11px; font-size: 15.5px; gap: 14px; }
  .faq-item summary i { width: 28px; height: 28px; }
  .faq-item p { padding: 0 0 14px; font-size: 14.5px; line-height: 1.55; }
}
@media (prefers-reduced-motion: reduce) {
  .js .faq[data-inview] .faq-head > *, .js .faq[data-inview] .faq-item { transition: none; opacity: 1; translate: none; }
}
/* company profile viewer */
.pf { width: min(1180px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 0; border-radius: 24px; background: var(--ink); color: var(--white); overflow: hidden; box-shadow: 0 40px 100px -30px rgba(0,0,0,.7); }
.pf::backdrop { background: rgba(6,20,40,.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.pf[open] { display: flex; flex-direction: column; }
@media (prefers-reduced-motion: no-preference) {
  .pf[open] { animation: pf-in .45s var(--ease-out); }
  .pf-img.is-turning { animation: pf-turn .4s var(--ease-out); }
}
@keyframes pf-in { from { opacity: 0; translate: 0 24px; scale: .97; } }
@keyframes pf-turn { from { opacity: .3; translate: var(--dir, 16px) 0; } }
.pf-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 16px 14px 22px; border-bottom: 1px solid rgba(255,255,255,.1); }
.pf-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pf-name b { font: 700 17px/1.2 var(--f-display); }
.pf-name > span { font-size: 13px; color: var(--mist); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.pf-dl { font-weight: 600; font-size: 14px; color: var(--ink); background: var(--gold); text-decoration: none; padding: 10px 16px; border-radius: 999px; }
.pf-dl:hover { background: #F0C374; color: var(--ink); }
.pf-x { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.2); background: transparent; color: var(--white); font-size: 24px; line-height: 1; cursor: pointer; }
.pf-x:hover { background: rgba(255,255,255,.1); }
.pf-stage { position: relative; flex: 1; min-height: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 16px; }
.pf-img { width: 100%; height: auto; max-height: calc(100dvh - 250px); object-fit: contain; border-radius: 10px; background: #FFFFFF; }
.pf-nav { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.06); color: var(--white); display: grid; place-items: center; cursor: pointer; }
.pf-nav:hover:not(:disabled) { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.pf-nav:disabled { opacity: .3; cursor: default; }
.pf-thumbs { display: flex; gap: 8px; padding: 0 16px 16px; overflow-x: auto; scrollbar-width: thin; }
.pf-thumbs button { flex: none; width: 92px; padding: 0; border: 2px solid transparent; border-radius: 8px; overflow: hidden; background: #FFFFFF; cursor: pointer; opacity: .55; transition: opacity .25s, border-color .25s; }
.pf-thumbs button img { display: block; width: 100%; height: auto; }
.pf-thumbs button[aria-current="true"] { opacity: 1; border-color: var(--gold); }
.pf-thumbs button:hover { opacity: .9; }
.pf button:focus-visible, .pf a:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
@media (max-width: 640px) {
  .pf { width: calc(100vw - 16px); border-radius: 18px; }
  .pf-bar { padding: 10px 10px 10px 14px; }
  .pf-dl { padding: 9px 12px; font-size: 13px; }
  .pf-stage { grid-template-columns: minmax(0, 1fr); padding: 10px; }
  .pf-nav { position: absolute; top: 50%; translate: 0 -50%; width: 38px; height: 38px; background: rgba(6,20,40,.7); }
  .pf-nav[data-pf-step="-1"] { left: 14px; }
  .pf-nav[data-pf-step="1"] { right: 14px; }
  .pf-thumbs button { width: 64px; }
}
/* small links that open the profile */
.ft-linkbtn { all: unset; cursor: pointer; display: inline-block; padding-block: 6px; color: var(--mist); position: relative; transition: color .25s, translate .3s var(--ease-out); }
.ft-linkbtn:hover { color: var(--white); translate: 4px 0; }
.ft-linkbtn:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 4px; }
.ft-partners { font-size: 13.5px; color: var(--mist); }
.ct-reach .ct-profile { padding: 4px; background: transparent; border: 0; }
.ct-profile-btn { background: var(--ink); color: var(--white); padding: 10px 14px; }
.ct-profile-btn:hover { background: var(--blue); }
@media (max-width: 960px) {
  .faq-head > p, .faq-ask { display: none; }
  .faq-head h2 { margin-bottom: 0; }
}
/* =====================================================================
   Also from Srisha: the three extra services as filing folders with
   staggered tabs, the company profile fanned out as real pages, and the
   two partners as seals. A navy band between Practices and Platforms.
   ===================================================================== */
.ax { position: relative; isolation: isolate; overflow: clip; color: var(--white); padding-block: clamp(56px, 9vh, 104px);
  background: var(--grid-bg), radial-gradient(45% 60% at 10% 100%, rgba(227,167,63,.16), transparent 70%), radial-gradient(40% 55% at 95% 0%, rgba(47,111,224,.22), transparent 70%), var(--ink); }
.ax-grid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.18fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.ax-head { display: flex; flex-direction: column; gap: 16px; }
.ax-head .eyebrow { color: var(--gold); }
.ax-head h2 { font-size: clamp(32px, min(3.8vw, 6.2vh), 56px); line-height: 1; letter-spacing: -0.045em; color: var(--white); }
.ax-head h2 em { font-style: normal; color: var(--gold); }
.ax-head > p:not(.eyebrow) { color: var(--mist); font-size: 16.5px; max-width: 420px; }
/* the profile, fanned like pages on a desk */
.ax-fan { all: unset; box-sizing: border-box; cursor: pointer; position: relative; display: block; width: min(100%, 440px); margin-top: 18px; padding-bottom: 8px; }
.ax-pages { position: relative; display: block; aspect-ratio: 640 / 453; width: 74%; margin-left: 8%; }
.ax-pages img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 10px; background: #FFFFFF;
  box-shadow: 0 24px 40px -22px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.14);
  transform-origin: 50% 110%; rotate: calc((var(--n) - 1.5) * 7deg); translate: calc((var(--n) - 1.5) * 26px) calc(var(--n) * 2px);
  transition: rotate .7s var(--ease-out), translate .7s var(--ease-out); }
.ax-pages img[style*="--n:0"] { z-index: 4; }
.ax-pages img[style*="--n:1"] { z-index: 3; }
.ax-pages img[style*="--n:2"] { z-index: 2; }
.ax-pages img[style*="--n:3"] { z-index: 1; }
.ax-fan:hover .ax-pages img { rotate: calc((var(--n) - 1.5) * 11deg); translate: calc((var(--n) - 1.5) * 44px) calc(var(--n) * -4px); }
.ax-fan-label { position: absolute; z-index: 6; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 2px; padding: 12px 16px 12px 16px; border-radius: 16px; background: var(--gold); color: var(--ink); box-shadow: 0 16px 30px -14px rgba(0,0,0,.6); transition: translate .4s var(--ease-out); }
.ax-fan-label small { font: 500 10px/1.3 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; }
.ax-fan-label b { font: 700 17px/1.15 var(--f-display); letter-spacing: -0.02em; }
.ax-fan-label b::after { content: " →"; }
.ax-fan:hover .ax-fan-label { translate: 0 -3px; }
.ax-fan:focus-visible { outline: 3px solid var(--gold); outline-offset: 6px; border-radius: 16px; }
/* filing folders */
.ax-files { display: flex; flex-direction: column; }
.ax-folder { --fold: #FFFFFF; --fold-text: var(--ink); --fold-muted: var(--muted); --tab-x: 0%;
  position: relative; margin-top: 30px; transition: translate .45s var(--ease-out); }
.ax-folder + .ax-folder { margin-top: 18px; }
.ax-folder.f1 { --fold: var(--gold); --fold-text: var(--ink); --fold-muted: rgba(6,20,40,.72); --tab-x: 0%; }
.ax-folder.f2 { --fold: #FFFFFF; --tab-x: 32%; }
.ax-folder.f3 { --fold: #1E5BB8; --fold-text: #FFFFFF; --fold-muted: rgba(255,255,255,.78); --tab-x: 64%; }
.ax-tab { position: absolute; left: var(--tab-x); bottom: 100%; translate: 0 1px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 18px 7px; border-radius: 14px 14px 0 0; background: var(--fold); color: var(--fold-text);
  font: 600 13px/1 var(--f-body); white-space: nowrap; }
.ax-tab b { font: 500 11px/1 var(--f-mono); letter-spacing: .1em; opacity: .7; }
.ax-body { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 18px; align-items: center; padding: 20px 24px; border-radius: 20px; background: var(--fold); color: var(--fold-text);
  box-shadow: 0 28px 50px -30px rgba(0,0,0,.8); }
.ax-folder.f1 .ax-body { border-top-left-radius: 0; }
.ax-body::after { content: ""; position: absolute; left: 24px; right: 24px; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); opacity: .6; }
.ax-ico { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--ink); color: var(--gold); }
.ax-folder.f3 .ax-ico { background: rgba(255,255,255,.14); color: #FFFFFF; }
.ax-body h3 { font-size: clamp(18px, 1.5vw, 21px); color: var(--fold-text); }
.ax-body p { margin-top: 4px; font-size: 15px; line-height: 1.5; color: var(--fold-muted); }
.ax-folder:hover { translate: 0 -6px; }
/* partners as seals */
.ax-partners { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); gap: 14px 18px; align-items: center; margin-top: 22px; padding: 14px 18px; border-radius: 20px; border: 1px dashed rgba(255,255,255,.22); }
.ax-partners > p { font: 500 10.5px/1.3 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-soft); }
.ax-seal { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ax-logo { flex: none; width: 78px; height: 50px; padding: 6px 8px; border-radius: 12px; background: #FFFFFF; display: grid; place-items: center; }
.ax-logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; }
.ax-seal b { display: block; font-size: 14px; line-height: 1.25; color: var(--white); }
.ax-seal small { font-size: 12.5px; color: var(--mist); }
/* arrival: folders file in from below, tabs first; pages deal out from a neat stack */
.js .ax[data-inview] .ax-head > *:not(.ax-fan) { opacity: 0; translate: 0 20px; transition: opacity .8s var(--ease-out), translate .9s var(--ease-out); }
.js .ax[data-inview] .ax-head > :nth-child(2) { transition-delay: .08s; }
.js .ax[data-inview] .ax-head > :nth-child(3) { transition-delay: .16s; }
.js .ax[data-inview] .ax-pages img { rotate: 0deg; translate: 0 30px; opacity: 0; transition: rotate 1s var(--ease-out), translate 1s var(--ease-out), opacity .6s; transition-delay: calc(.35s + var(--n) * 90ms); }
.js .ax[data-inview] .ax-fan-label { opacity: 0; scale: .9; transition: opacity .6s .9s, scale .6s var(--ease-out) .9s, translate .4s var(--ease-out); }
.js .ax[data-inview] .ax-folder { opacity: 0; translate: 0 60px; transition: opacity .8s var(--ease-out), translate 1s var(--ease-out); transition-delay: calc(.2s + var(--k) * 140ms); }
.js .ax[data-inview] .ax-partners { opacity: 0; translate: 0 20px; transition: opacity .8s var(--ease-out) .75s, translate .9s var(--ease-out) .75s; }
.js .ax[data-inview].is-in .ax-head > *, .js .ax[data-inview].is-in .ax-folder, .js .ax[data-inview].is-in .ax-partners { opacity: 1; translate: none; }
.js .ax[data-inview].is-in .ax-pages img { opacity: 1; rotate: calc((var(--n) - 1.5) * 7deg); translate: calc((var(--n) - 1.5) * 26px) calc(var(--n) * 2px); }
.js .ax[data-inview].is-in .ax-fan-label { opacity: 1; scale: 1; }
.js .ax[data-inview].is-in .ax-fan:hover .ax-pages img { rotate: calc((var(--n) - 1.5) * 11deg); translate: calc((var(--n) - 1.5) * 44px) calc(var(--n) * -4px); transition-delay: 0s; }
.js .ax[data-inview].is-in .ax-folder:hover { translate: 0 -6px; transition-delay: 0s; }
@media (max-height: 800px) and (min-width: 961px) {
  .ax { padding-block: 44px; }
  .ax-body { padding: 14px 20px; }
  .ax-fan { width: min(100%, 380px); margin-top: 8px; }
}
@media (max-width: 960px) {
  .ax-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .ax-head > p:not(.eyebrow) { display: none; }
  .ax-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); column-gap: 24px; align-items: center; }
  .ax-head > :not(.ax-fan) { grid-column: 1; }
  .ax-fan { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
}
@media (max-width: 640px) {
  .ax { padding-block: 36px; }
  .ax-head { grid-template-columns: minmax(0, 1fr); }
  .ax-fan { grid-column: 1; grid-row: auto; width: 100%; max-width: 320px; margin-top: 8px; }
  .ax-head h2 { font-size: 30px; }
  .ax-folder { margin-top: 28px; }
  .ax-folder + .ax-folder { margin-top: 14px; }
  .ax-tab { font-size: 12px; padding: 7px 12px 6px; }
  .ax-folder.f2 { --tab-x: 24%; }
  .ax-folder.f3 { --tab-x: 48%; }
  .ax-body { grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 14px 16px; }
  .ax-ico { width: 40px; height: 40px; border-radius: 12px; }
  .ax-body p { font-size: 14px; }
  .ax-partners { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 12px 14px; }
  .ax-partners > p { grid-column: 1 / -1; }
  .ax-seal { flex-direction: column; align-items: flex-start; gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .js .ax[data-inview] .ax-head > *, .js .ax[data-inview] .ax-folder, .js .ax[data-inview] .ax-partners, .js .ax[data-inview] .ax-fan-label { transition: none; opacity: 1; translate: none; scale: 1; }
  .js .ax[data-inview] .ax-pages img { transition: none; opacity: 1; }
}
@media (max-width: 640px) {
  .ax { padding-block: 28px; }
  .ax-grid { gap: 18px; }
  .ax-head { gap: 10px; }
  .ax-fan { max-width: 230px; margin-top: 2px; }
  .ax-fan-label { padding: 8px 12px; border-radius: 12px; }
  .ax-fan-label small { display: none; }
  .ax-fan-label b { font-size: 14.5px; }
  .ax-partners { margin-top: 16px; }
}
/* the form gained an email row; keep the section to one screen */
@media (min-width: 961px) {
  .ct { padding-block: clamp(40px, 7vh, 88px); }
  .ct-top { margin-bottom: 14px; }
  .ct-fields { gap: 12px 16px; }
  .ct-field { gap: 6px; }
  .ct-chk { margin-top: 12px; }
  .ct-send { margin-top: 12px; }
}
@media (max-height: 800px) and (min-width: 961px) {
  .ct { padding-block: 28px; }
  .ct-card { padding: 20px 24px; }
  .ct-top h3 { font-size: 22px; } .ct-top p { margin-top: 2px; }
  .ct-field input, .ct-dd-btn { min-height: 42px; padding-block: 8px; }
  .ct-dd-btn { padding-block: 4px; } .ct-dd-btn .ico { width: 30px; height: 30px; }
  .ct-field textarea { min-height: 56px; }
  .ct-send { padding-block: 15px; }
}
@media (min-width: 641px) and (max-width: 960px) {
  .ct-field textarea { min-height: 56px; }
  .ct-card { padding: 22px; }
}

/* social links: beside the profile chip in Contact, under the clock in the footer */
.ct-reach .ct-profile { gap: 8px; }
.ct-social { display: inline-flex; gap: 6px; }
.ct-social a { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--white); border: 1px solid var(--line); color: var(--ink); transition: background .25s, color .25s, border-color .25s, translate .25s var(--ease-out); }
.ct-social a:hover { background: var(--ink); border-color: var(--ink); color: var(--white); translate: 0 -2px; }
a.ct-copy-btn { text-decoration: none; }
.ft-social { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; }
.ft-social a { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.18); color: var(--mist); transition: background .25s, color .25s, border-color .25s, translate .25s var(--ease-out); }
.ft-social a:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); translate: 0 -2px; }
.ct-social a:focus-visible, .ft-social a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
a.ft-copy { text-decoration: none; }

/* social icons in the top bar, before the call button; a centred row in the phone menu */
.nav-social { display: flex; align-items: center; gap: 4px; margin-left: 10px; }
.nav-social a { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--white); border: 1px solid rgba(255,255,255,.2); transition: background .25s, color .25s, border-color .25s; }
.nav-social a:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.nav-social a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (min-width: 1001px) {
  .site-header.is-solid .nav-social { margin-left: auto; }
  .site-header.is-solid .main-nav .btn { margin-left: 8px; }
}
@media (min-width: 1001px) and (max-width: 1180px) {
  .nav-social { display: none; }
}
@media (max-width: 1000px) {
  .nav-social { order: 2; justify-content: center; gap: 12px; margin: 20px 0 0; }
  .nav-social a { width: 44px; height: 44px; }
  .main-nav .btn { order: 1; }
}

/* form sending states; the hidden field only bots fill in */
.ct-status.is-error { color: #B42318; }
.ct-send:disabled { opacity: .7; cursor: progress; translate: none; }
.ct-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.ct-card .cf-turnstile { margin-top: 12px; }

/* wordmark partner logos need a wider plate than square marks */
.ax-logo.ax-logo-wide { width: 148px; padding: 6px 12px; }
@media (max-width: 640px) { .ax-logo.ax-logo-wide { width: 124px; } }