/* =========================================================================
   aCubeMed — Design System
   Palette derived from the cube mark: deep navy inks, a mid-navy, a pale
   "top-face" sky, warm editorial paper. One disciplined azure accent.
   Type: Fraunces (display serif) · Inter Tight (body/UI) · JetBrains Mono (labels)
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300..600&family=Inter+Tight:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }
ul { list-style: none; padding: 0; }
:focus-visible { outline: 2px solid var(--azure); outline-offset: 3px; border-radius: 2px; }

/* ---------- Tokens ---------- */
:root {
  --ink:        #0A1A2E;   /* deepest navy — hero & dark sections */
  --ink-2:      #0E2338;   /* slightly lifted dark */
  --navy:       #16375A;   /* brand body navy */
  --navy-2:     #23507A;   /* lighter navy */
  --azure:      #4A86BE;   /* single accent */
  --azure-soft: #6FA3D2;
  --sky:        #CFDDEC;   /* cube light face */
  --sky-dim:    #A9C1D8;

  --paper:      #F4F1EA;   /* warm editorial paper */
  --paper-2:    #ECE7DC;
  --paper-line: rgba(16, 35, 58, 0.14);

  --ink-text:   #16283D;   /* body text on paper */
  --ink-mute:   #566476;   /* muted text on paper */
  --sky-text:   #C6D4E4;   /* body text on dark */
  --sky-mute:   #8598AD;   /* muted text on dark */
  --line-dark:  rgba(207, 221, 236, 0.16);

  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-sans: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --wrap: 1240px;
  --gutter: clamp(20px, 5vw, 64px);
  --radius: 4px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Base ---------- */
body {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-text);
  background: var(--paper);
  font-weight: 400;
  overflow-x: hidden;
}

/* Fluid display scale */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 400; line-height: 1.04; letter-spacing: -0.015em; }
.h-display { font-size: clamp(2.9rem, 7.2vw, 6.4rem); line-height: 0.98; letter-spacing: -0.03em; }
.h-1 { font-size: clamp(2.3rem, 5.2vw, 4.3rem); }
.h-2 { font-size: clamp(1.9rem, 3.6vw, 3.1rem); }
.h-3 { font-size: clamp(1.35rem, 2.2vw, 1.85rem); line-height: 1.12; }
.h-4 { font-size: 1.2rem; line-height: 1.25; letter-spacing: -0.01em; }

p { text-wrap: pretty; }
.lede { font-size: clamp(1.15rem, 1.8vw, 1.5rem); line-height: 1.5; letter-spacing: -0.01em; color: var(--ink-text); }
/* Body/intro copy must stay legible on dark sections (fixes low-contrast text
   above CTA buttons and section intros on navy/ink backgrounds). */
.surface-dark .lede, .surface-ink2 .lede, .surface-navy .lede { color: var(--sky-text); }
.surface-dark p.text-mute, .surface-ink2 p.text-mute, .surface-navy p.text-mute { color: var(--sky-mute); }
strong { font-weight: 600; }
em { font-style: italic; }

/* ---------- Layout helpers ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(72px, 11vw, 156px); position: relative; }
.section--tight { padding-block: clamp(56px, 8vw, 104px); }

.grid { display: grid; gap: clamp(24px, 3vw, 48px); }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-12 { grid-template-columns: repeat(12, 1fr); }
@media (max-width: 900px) { .cols-2, .cols-3 { grid-template-columns: 1fr; } }

/* Theme surfaces */
.surface-dark { background: var(--ink); color: var(--sky-text); }
.surface-dark h1, .surface-dark h2, .surface-dark h3, .surface-dark h4 { color: #F1F5FA; }
.surface-ink2 { background: var(--ink-2); color: var(--sky-text); }
.surface-ink2 h1,.surface-ink2 h2,.surface-ink2 h3,.surface-ink2 h4 { color:#F1F5FA; }
.surface-navy { background: var(--navy); color: var(--sky-text); }
.surface-navy h1,.surface-navy h2,.surface-navy h3,.surface-navy h4{ color:#F1F5FA; }
.surface-paper { background: var(--paper); color: var(--ink-text); }
.surface-paper2 { background: var(--paper-2); color: var(--ink-text); }

/* ---------- Eyebrow / labels ---------- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--azure);
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
}
.eyebrow::before {
  content: "";
  width: 22px; height: 1px;
  background: currentColor;
  display: inline-block;
  opacity: 0.7;
}
.surface-dark .eyebrow, .surface-ink2 .eyebrow, .surface-navy .eyebrow { color: var(--azure-soft); }
.eyebrow--plain::before { display: none; }

.mono-num {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  color: var(--azure);
  font-weight: 500;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.6em;
  font-family: var(--font-sans); font-weight: 500; font-size: 0.98rem;
  letter-spacing: 0.005em;
  padding: 0.92em 1.5em;
  border-radius: 2px;
  transition: background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease);
  border: 1px solid transparent;
  line-height: 1;
}
.btn .arw { transition: transform .45s var(--ease); }
.btn:hover .arw { transform: translateX(5px); }

.btn-primary { background: var(--navy); color: #fff; }
.btn-primary:hover { background: var(--ink); }
.surface-dark .btn-primary, .surface-navy .btn-primary, .surface-ink2 .btn-primary { background: var(--sky); color: var(--ink); }
.surface-dark .btn-primary:hover, .surface-navy .btn-primary:hover, .surface-ink2 .btn-primary:hover { background: #fff; }

.btn-ghost { border-color: var(--paper-line); color: var(--ink-text); background: transparent; }
.btn-ghost:hover { border-color: var(--navy); background: rgba(22,55,90,0.04); }
/* Outline buttons on ANY dark backdrop — including the hero and footer, which
   aren't tagged .surface-dark — need a light, clearly visible border + text. */
.surface-dark .btn-ghost, .surface-navy .btn-ghost, .surface-ink2 .btn-ghost,
.hero .btn-ghost, .page-hero .btn-ghost, .footer .btn-ghost {
  border-color: rgba(201, 217, 236, 0.38); color: #EDF3F9;
}
.surface-dark .btn-ghost:hover, .surface-navy .btn-ghost:hover, .surface-ink2 .btn-ghost:hover,
.hero .btn-ghost:hover, .page-hero .btn-ghost:hover, .footer .btn-ghost:hover {
  border-color: var(--sky); background: rgba(207, 221, 236, 0.10); color: #fff;
}

/* Text link with arrow */
.link-arw {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-weight: 500; font-size: 0.98rem; color: var(--navy);
  border-bottom: 1px solid transparent; padding-bottom: 2px;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.link-arw .arw { transition: transform .4s var(--ease); }
.link-arw:hover { color: var(--azure); border-color: currentColor; }
.link-arw:hover .arw { transform: translateX(4px); }
.surface-dark .link-arw, .surface-navy .link-arw, .surface-ink2 .link-arw { color: var(--sky); }
.surface-dark .link-arw:hover, .surface-navy .link-arw:hover, .surface-ink2 .link-arw:hover { color: #fff; }

/* ---------- Navigation ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px var(--gutter);
  transition: background .5s var(--ease), padding .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  background: rgba(9, 22, 38, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding-block: 12px;
  border-bottom: 1px solid var(--line-dark);
}
/* Nav on light pages (non-hero) uses a solid treatment immediately */
.nav--solid { background: rgba(9,22,38,0.9); border-bottom:1px solid var(--line-dark); }

.nav__brand { display: flex; align-items: center; gap: 12px; z-index: 2; }
.nav__brand svg, .nav__brand img { width: 34px; height: 34px; }
.nav__brand-text { display: flex; flex-direction: column; line-height: 1; }
.nav__brand-name { font-family: var(--font-sans); font-weight: 700; font-size: 1.15rem; letter-spacing: -0.01em; color: #fff; }
.nav__brand-name b { color: var(--sky); font-weight: 700; }
.nav__brand-tag { font-family: var(--font-mono); font-size: 0.55rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--sky-mute); margin-top: 4px; }

.nav__links { display: flex; align-items: center; gap: 4px; }
.nav__link {
  position: relative; padding: 10px 14px; font-size: 0.94rem; font-weight: 500;
  color: rgba(230,238,246,0.82); transition: color .3s var(--ease); border-radius: 2px;
}
.nav__link:hover, .nav__link[aria-current="page"] { color: #fff; }
.nav__link[aria-current="page"]::after {
  content:""; position:absolute; left:14px; right:14px; bottom:4px; height:1px; background: var(--azure);
}
.nav__actions { display: flex; align-items: center; gap: 14px; }
.nav__cta { padding: 0.7em 1.15em; font-size: 0.9rem; }

.nav__burger { display: none; width: 44px; height: 44px; flex-direction: column; justify-content: center; gap: 5px; align-items: flex-end; z-index: 2; }
.nav__burger span { display:block; height:2px; width:26px; background:#EAF0F6; transition: transform .4s var(--ease), opacity .3s var(--ease), width .4s var(--ease); }
.nav__burger span:nth-child(2){ width:20px; }
.nav__burger.is-x span:nth-child(1){ transform: translateY(7px) rotate(45deg); width:26px; }
.nav__burger.is-x span:nth-child(2){ opacity:0; }
.nav__burger.is-x span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); width:26px; }

/* Mobile menu overlay */
.mobile-menu {
  position: fixed; inset: 0; z-index: 99;
  background: var(--ink);
  display: flex; flex-direction: column; justify-content: center;
  padding: 96px var(--gutter) 48px;
  transform: translateY(-100%);
  transition: transform .6s var(--ease);
  visibility: hidden;
}
.mobile-menu.is-open { transform: translateY(0); visibility: visible; }
.mobile-menu__links { display: flex; flex-direction: column; gap: 2px; }
.mobile-menu__link {
  font-family: var(--font-display); font-size: clamp(1.9rem, 8vw, 2.9rem);
  color: #EAF0F6; padding: 10px 0; border-bottom: 1px solid var(--line-dark);
  display: flex; justify-content: space-between; align-items: baseline;
}
.mobile-menu__link .idx { font-family: var(--font-mono); font-size: 0.8rem; color: var(--azure); letter-spacing: 0.1em; }
.mobile-menu__foot { margin-top: 40px; display: flex; flex-direction: column; gap: 8px; color: var(--sky-mute); font-size: 0.9rem; }
.mobile-menu__foot a { color: var(--sky); }

body.menu-open { overflow: hidden; }

@media (max-width: 980px) {
  .nav__links, .nav__actions .nav__cta { display: none; }
  .nav__burger { display: flex; }
}

/* ---------- Cards ---------- */
.card { position: relative; }

.offer-card {
  display: block; padding: 34px 32px 30px; position: relative;
  border: 1px solid var(--paper-line); border-radius: var(--radius);
  background: var(--paper);
  transition: transform .5s var(--ease), border-color .5s var(--ease), background .5s var(--ease);
  overflow: hidden;
}
.offer-card:hover { transform: translateY(-4px); border-color: var(--navy); background: #fff; }
.offer-card__num { font-family: var(--font-mono); font-size: 0.76rem; letter-spacing: 0.14em; color: var(--azure); }
.offer-card__title { margin: 18px 0 12px; font-size: clamp(1.35rem,2vw,1.7rem); color: var(--navy); }
/* Offering cards keep a light paper background even inside dark sections, so their
   titles must stay navy — override the generic `.surface-dark h3` colour. */
.surface-dark .offer-card__title, .surface-ink2 .offer-card__title, .surface-navy .offer-card__title { color: var(--navy); }
.offer-card__desc { color: var(--ink-mute); font-size: 1rem; line-height: 1.6; }
.offer-card__more { margin-top: 22px; display: inline-flex; align-items: center; gap: 0.5em; font-weight:500; font-size:0.9rem; color: var(--navy); }
.offer-card .arw { transition: transform .4s var(--ease); }
.offer-card:hover .arw { transform: translateX(5px); }
.offer-card__rule { position:absolute; left:0; top:0; height:2px; width:0; background: var(--azure); transition: width .5s var(--ease); }
.offer-card:hover .offer-card__rule { width: 100%; }

/* Offering row (services page) */
.offer-row { display:grid; grid-template-columns: 110px 1fr; gap: clamp(20px,4vw,56px); padding-block: clamp(30px,4vw,52px); align-items:start; }
.offer-row__num { font-family: var(--font-mono); font-size:0.95rem; color: var(--azure); letter-spacing:0.1em; padding-top:10px; }
.offer-row__title { font-size: clamp(1.6rem,3vw,2.5rem); color:#F1F5FA; margin-bottom:16px; }
.offer-row__desc { color: var(--sky-text); max-width: 66ch; opacity:0.92; }
.offer-row__caps { display:flex; flex-wrap:wrap; gap:10px 10px; margin:26px 0 26px; }
.offer-row__caps li { font-family: var(--font-mono); font-size:0.74rem; letter-spacing:0.04em; color: var(--sky-mute); border:1px solid var(--line-dark); padding:7px 12px; border-radius:100px; }
.surface-paper .offer-row__title, .surface-paper2 .offer-row__title { color: var(--navy); }
.surface-paper .offer-row__desc, .surface-paper2 .offer-row__desc { color: var(--ink-mute); }
.surface-paper .offer-row__caps li, .surface-paper2 .offer-row__caps li { color: var(--ink-mute); border-color: var(--paper-line); }
@media (max-width:640px){ .offer-row { grid-template-columns:1fr; gap:10px; } .offer-row__num{ padding-top:0; } }

/* Feature block */
.feature { padding-top: 26px; border-top: 1px solid var(--line-dark); }
.surface-paper .feature, .surface-paper2 .feature { border-top-color: var(--paper-line); }
.feature__k { font-family: var(--font-mono); font-size:0.74rem; letter-spacing:0.14em; color: var(--azure); }
.feature__t { font-size: 1.28rem; margin: 16px 0 10px; }
.feature__d { color: inherit; opacity: 0.85; font-size: 0.98rem; line-height:1.6; }

/* Process step */
.step { display: grid; grid-template-columns: 96px 1fr; gap: clamp(20px,4vw,64px); padding-block: clamp(32px,5vw,56px); border-top: 1px solid var(--line-dark); align-items: start; }
.step__n { font-family: var(--font-mono); font-size: 0.9rem; color: var(--azure); letter-spacing: 0.1em; padding-top: 8px; }
.step__t { font-size: clamp(1.5rem, 2.6vw, 2.2rem); color: #F1F5FA; margin-bottom: 14px; }
.step__d { color: var(--sky-text); max-width: 60ch; opacity:0.9; }
@media (max-width:640px){ .step { grid-template-columns: 1fr; gap: 12px; } }

/* Stat in context */
.statline { display:flex; flex-wrap:wrap; gap: clamp(24px,5vw,72px); }
.stat__n { font-family: var(--font-display); font-size: clamp(2.4rem,5vw,4rem); line-height:1; color: var(--sky); }
.stat__l { margin-top: 10px; font-size: 0.92rem; color: var(--sky-mute); max-width: 24ch; }
.surface-paper .stat__n, .surface-paper2 .stat__n { color: var(--navy); }
.surface-paper .stat__l, .surface-paper2 .stat__l { color: var(--ink-mute); }

/* ---------- FAQ / accordion ---------- */
.faq { border-top: 1px solid var(--paper-line); }
.surface-dark .faq, .surface-navy .faq, .surface-ink2 .faq { border-top-color: var(--line-dark); }
.faq__item { border-bottom: 1px solid var(--paper-line); }
.surface-dark .faq__item, .surface-navy .faq__item, .surface-ink2 .faq__item { border-bottom-color: var(--line-dark); }
.faq__q { width:100%; display:flex; justify-content:space-between; align-items:center; gap:24px; text-align:left; padding: 26px 4px; font-family: var(--font-display); font-size: clamp(1.15rem,2vw,1.5rem); color: inherit; }
.faq__q .pm { position:relative; width:18px; height:18px; flex:none; }
.faq__q .pm::before,.faq__q .pm::after{ content:""; position:absolute; background: var(--azure); transition: transform .4s var(--ease); }
.faq__q .pm::before{ left:0; top:8px; width:18px; height:2px; }
.faq__q .pm::after{ left:8px; top:0; width:2px; height:18px; }
.faq__item.is-open .pm::after{ transform: scaleY(0); }
.faq__a { overflow:hidden; height:0; transition: height .45s var(--ease); }
.faq__a-inner { padding: 0 4px 28px; max-width: 68ch; color: var(--ink-mute); }
.surface-dark .faq__a-inner, .surface-navy .faq__a-inner, .surface-ink2 .faq__a-inner { color: var(--sky-text); opacity:0.85; }

/* ---------- Dividers & misc ---------- */
.rule { height:1px; background: var(--paper-line); border:0; }
.surface-dark .rule, .surface-navy .rule, .surface-ink2 .rule { background: var(--line-dark); }
.kicker-row { display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }

.tag {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-mute);
  border:1px solid var(--paper-line); padding: 6px 11px; border-radius: 100px;
}
.surface-dark .tag, .surface-navy .tag, .surface-ink2 .tag { color: var(--sky-mute); border-color: var(--line-dark); }

/* Big editorial statement */
.statement { font-family: var(--font-display); font-size: clamp(2rem, 4.6vw, 4rem); line-height: 1.05; letter-spacing: -0.02em; max-width: 20ch; }
.statement .dim { color: var(--sky-mute); }
.surface-paper .statement .dim, .surface-paper2 .statement .dim { color: var(--sky-dim); }

/* ---------- Footer ---------- */
.footer { background: var(--ink); color: var(--sky-text); padding-block: clamp(64px, 8vw, 104px) 40px; }
.footer__top { display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: clamp(32px,4vw,56px); }
@media (max-width: 900px){ .footer__top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .footer__top { grid-template-columns: 1fr; } }
.footer__brand-name { font-weight:700; font-size:1.3rem; color:#fff; }
.footer__brand-name b { color: var(--sky); }
.footer__blurb { margin-top: 16px; max-width: 34ch; color: var(--sky-mute); font-size: 0.96rem; }
.footer__col h4 { font-family: var(--font-mono); font-weight:500; text-transform:uppercase; letter-spacing:0.16em; font-size:0.72rem; color: var(--sky-mute); margin-bottom: 18px; }
.footer__col ul { display:flex; flex-direction:column; gap:11px; }
.footer__col a { color: var(--sky-text); font-size:0.96rem; transition: color .3s var(--ease); }
.footer__col a:hover { color:#fff; }
.footer__bottom { margin-top: clamp(48px,6vw,72px); padding-top: 28px; border-top:1px solid var(--line-dark); display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
.footer__legal { font-size:0.84rem; color: var(--sky-mute); }
.footer__socials { display:flex; gap:18px; }
.footer__socials a { font-family: var(--font-mono); font-size:0.78rem; letter-spacing:0.06em; color: var(--sky-mute); }
.footer__socials a:hover { color:#fff; }

/* ---------- Reveal animation (luxury fade + rise + soft focus) ---------- */
.reveal {
  opacity: 0;
  transform: translateY(42px);
  filter: blur(7px);
  transition:
    opacity 1.15s var(--ease),
    transform 1.25s var(--ease),
    filter 1.15s var(--ease);
}
.reveal.in { opacity: 1; transform: none; filter: blur(0); }
.reveal[data-d="1"]{ transition-delay:.12s; }
.reveal[data-d="2"]{ transition-delay:.24s; }
.reveal[data-d="3"]{ transition-delay:.36s; }
.reveal[data-d="4"]{ transition-delay:.48s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity:1 !important; transform:none !important; filter:none !important; transition:none !important; }
  .btn, .link-arw, .offer-card { transition: none !important; }
}

/* ---------- Hero ---------- */
.hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; background: var(--ink); }
.hero__canvas { position:absolute; inset:0; z-index:1; }
.hero__glow { position:absolute; inset:0; z-index:0; background:
  radial-gradient(120% 90% at 72% 20%, rgba(42,86,122,0.55) 0%, rgba(10,26,46,0) 55%),
  radial-gradient(90% 70% at 20% 90%, rgba(20,50,80,0.5) 0%, rgba(10,26,46,0) 60%); }
.hero__vignette { position:absolute; inset:0; z-index:2; pointer-events:none; background: linear-gradient(180deg, rgba(10,26,46,0.55) 0%, rgba(10,26,46,0) 22%, rgba(10,26,46,0) 55%, rgba(10,26,46,0.85) 100%); }
/* Fine film grain over the dark backdrops — removes gradient banding for a
   richer, more premium finish. Sits above the canvas but ignores pointer input. */
.hero::after, .page-hero::after {
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:140px 140px;
  opacity:0.05; mix-blend-mode:soft-light;
}
.hero::after { z-index:2; }
.page-hero::after { z-index:1; }
.hero__inner { position: relative; z-index: 3; width:100%; padding-bottom: clamp(48px, 8vh, 110px); }
.hero__title { font-size: clamp(2.9rem, 8vw, 7rem); line-height: 0.97; letter-spacing: -0.035em; color: #F4F8FC; max-width: 16ch; }
.hero__title .serif-alt { font-style: italic; font-weight:300; color: var(--sky); }
.hero__sub { margin-top: 28px; max-width: 52ch; color: var(--sky-text); font-size: clamp(1.05rem,1.6vw,1.35rem); line-height:1.5; }
.hero__cta { margin-top: 38px; display:flex; gap:16px; flex-wrap:wrap; }
.hero__scroll { position:absolute; z-index:3; right: var(--gutter); bottom: clamp(48px,8vh,110px); display:flex; align-items:center; gap:12px; writing-mode: vertical-rl; font-family: var(--font-mono); font-size:0.68rem; letter-spacing:0.24em; text-transform:uppercase; color: var(--sky-mute); }
.hero__scroll .bar { writing-mode: horizontal-tb; width:1px; height:54px; background: linear-gradient(var(--sky-mute), transparent); }
@media (max-width: 760px){ .hero__scroll { display:none; } }

/* Page hero (interior pages, no 3D full-bleed) */
.page-hero { position: relative; background: var(--ink); color: var(--sky-text); padding-top: clamp(140px, 20vh, 220px); padding-bottom: clamp(64px, 9vw, 120px); overflow: hidden; }
.page-hero__glow { position:absolute; inset:0; z-index:0; background: radial-gradient(90% 120% at 85% -10%, rgba(42,86,122,0.5), rgba(10,26,46,0) 55%); }
.page-hero__inner { position: relative; z-index: 2; }
.page-hero__title { font-size: clamp(2.6rem, 6vw, 5rem); line-height:1; letter-spacing:-0.03em; color:#F4F8FC; max-width: 18ch; }
.page-hero__sub { margin-top: 24px; max-width: 56ch; color: var(--sky-text); font-size: clamp(1.05rem,1.5vw,1.3rem); line-height:1.55; }
.page-hero__mark { position:absolute; right: -4%; top: 10%; width: min(42vw, 480px); opacity: 0.5; z-index:1; pointer-events:none; }
@media (max-width: 820px){ .page-hero__mark { display:none; } }

/* Breadcrumb */
.crumb { font-family: var(--font-mono); font-size:0.72rem; letter-spacing:0.14em; text-transform:uppercase; color: var(--sky-mute); margin-bottom: 26px; display:flex; gap:10px; align-items:center; }
.crumb a { color: var(--sky-mute); } .crumb a:hover{ color: var(--sky); }
.crumb span { color: var(--azure-soft); }

/* Two-col editorial intro */
.intro-grid { display:grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(32px,6vw,90px); align-items:start; }
@media (max-width: 860px){ .intro-grid { grid-template-columns:1fr; gap:28px; } }

/* List with markers */
.marklist { display:flex; flex-direction:column; gap: 14px; }
.marklist li { position:relative; padding-left: 26px; color: inherit; }
.marklist li::before { content:""; position:absolute; left:0; top:11px; width:9px; height:9px; background: var(--azure); transform: rotate(45deg); }

/* Insight cards */
.insight { display:flex; flex-direction:column; gap: 14px; padding: 30px 0; border-top:1px solid var(--paper-line); height:100%; }
.insight__meta { font-family: var(--font-mono); font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase; color: var(--azure); display:flex; gap:14px; }
.insight__t { font-size: clamp(1.25rem,1.9vw,1.6rem); color: var(--navy); line-height:1.14; }
.insight__x { color: var(--ink-mute); font-size:0.98rem; }
.insight:hover .insight__t { color: var(--azure); }
.surface-dark .insight, .surface-ink2 .insight, .surface-navy .insight { border-top-color: var(--line-dark); }
.surface-dark .insight__t, .surface-ink2 .insight__t, .surface-navy .insight__t { color: #F1F5FA; }
.surface-dark .insight__x, .surface-ink2 .insight__x, .surface-navy .insight__x { color: var(--sky-text); opacity: 0.82; }
.surface-dark .insight:hover .insight__t, .surface-ink2 .insight:hover .insight__t, .surface-navy .insight:hover .insight__t { color: var(--sky); }

/* CTA band */
.cta-band { text-align:left; }
.cta-band__title { font-family: var(--font-display); font-size: clamp(2.2rem,5vw,4.4rem); line-height:1.02; letter-spacing:-0.025em; color:#F4F8FC; max-width: 18ch; }

/* ---------- Forms (contact) ---------- */
.form { display:grid; gap: 22px; }
.form__row { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
@media (max-width:640px){ .form__row { grid-template-columns:1fr; } }
.field { display:flex; flex-direction:column; gap:8px; }
.field label { font-family: var(--font-mono); font-size:0.7rem; letter-spacing:0.14em; text-transform:uppercase; color: var(--sky-mute); }
.field input, .field select, .field textarea {
  font-family: var(--font-sans); font-size:1rem; color:#EAF0F6;
  background: rgba(255,255,255,0.03); border:1px solid var(--line-dark); border-radius:3px;
  padding:14px 15px; transition: border-color .3s var(--ease), background .3s var(--ease);
}
.field textarea { resize:vertical; min-height:130px; }
.field input:focus, .field select:focus, .field textarea:focus { outline:none; border-color: var(--azure); background: rgba(255,255,255,0.05); }
.field input::placeholder, .field textarea::placeholder { color: var(--sky-mute); opacity:0.7; }
.field select { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238598AD' stroke-width='1.5' fill='none'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 16px center; padding-right:38px; }
/* The native dropdown list renders on a white popup, so its options must be
   dark-on-white regardless of the (light) closed-select text color. */
.field select option, .field select optgroup { color: #16283D; background-color: #ffffff; }
.surface-paper .field label, .surface-paper2 .field label { color: var(--ink-mute); }
.surface-paper .field input, .surface-paper .field select, .surface-paper .field textarea,
.surface-paper2 .field input, .surface-paper2 .field select, .surface-paper2 .field textarea { color: var(--ink-text); background:#fff; border-color: var(--paper-line); }

/* ---------- Careers job rows ---------- */
.listrow { display:grid; grid-template-columns: 1fr auto; gap:20px; align-items:center; padding: 26px 4px; border-top:1px solid var(--paper-line); transition: padding-left .4s var(--ease); }
.surface-dark .listrow, .surface-navy .listrow, .surface-ink2 .listrow { border-top-color: var(--line-dark); }
.listrow:hover { padding-left:10px; }
.listrow:last-child { border-bottom:1px solid var(--paper-line); }
.surface-dark .listrow:last-child, .surface-navy .listrow:last-child, .surface-ink2 .listrow:last-child { border-bottom-color: var(--line-dark); }
.listrow__t { font-family: var(--font-display); font-size: clamp(1.2rem,2vw,1.55rem); color: inherit; }
.listrow__meta { display:flex; gap:14px; margin-top:8px; font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.06em; text-transform:uppercase; color: var(--ink-mute); }
.surface-dark .listrow__meta, .surface-navy .listrow__meta, .surface-ink2 .listrow__meta { color: var(--sky-mute); }
.listrow__cta { font-size:0.9rem; font-weight:500; color: var(--azure); white-space:nowrap; }

/* ---------- People / leadership ---------- */
.person { display:flex; flex-direction:column; gap:4px; padding-top:22px; border-top:1px solid var(--paper-line); }
.surface-dark .person, .surface-navy .person, .surface-ink2 .person { border-top-color: var(--line-dark); }
.person__mark { width:52px; height:52px; margin-bottom:14px; opacity:0.9; }
.person__name { font-family:var(--font-display); font-size:1.3rem; color: inherit; }
.person__role { font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase; color: var(--azure); }
.person__bio { margin-top:10px; font-size:0.95rem; color: var(--ink-mute); }
.surface-dark .person__bio, .surface-navy .person__bio, .surface-ink2 .person__bio { color: var(--sky-text); opacity:0.85; }

/* Timeline (about) */
.timeline__item { display:grid; grid-template-columns: 120px 1fr; gap: clamp(16px,3vw,40px); padding-block: 30px; border-top:1px solid var(--line-dark); }
.timeline__yr { font-family:var(--font-mono); font-size:0.9rem; color: var(--azure); letter-spacing:0.06em; }
.timeline__t { font-size:1.3rem; margin-bottom:8px; color:#F1F5FA; }
.timeline__d { color: var(--sky-text); opacity:0.88; max-width:60ch; }
@media (max-width:600px){ .timeline__item { grid-template-columns:1fr; gap:6px; } }

/* Contact detail block */
.contact-detail { padding-top:24px; border-top:1px solid var(--line-dark); }
.contact-detail h4 { font-family:var(--font-mono); font-weight:500; text-transform:uppercase; letter-spacing:0.14em; font-size:0.72rem; color: var(--sky-mute); margin-bottom:12px; }
.contact-detail p, .contact-detail a { color: var(--sky-text); font-size:1.02rem; }
.contact-detail a:hover { color:#fff; }
/* Light-surface variant so contact blocks stay legible on paper sections too. */
.surface-paper .contact-detail, .surface-paper2 .contact-detail { border-top-color: var(--paper-line); }
.surface-paper .contact-detail h4, .surface-paper2 .contact-detail h4 { color: var(--ink-mute); }
.surface-paper .contact-detail p, .surface-paper .contact-detail a,
.surface-paper2 .contact-detail p, .surface-paper2 .contact-detail a { color: var(--ink-text); }
.surface-paper .contact-detail a:hover, .surface-paper2 .contact-detail a:hover { color: var(--azure); }

/* ---------- Data-gap placeholder marker ---------- */
.todo {
  font-family: var(--font-mono); font-size: 0.82em; font-weight: 500;
  color: #c69042; background: rgba(198,144,66,0.12);
  border: 1px dashed rgba(198,144,66,0.55); border-radius: 3px;
  padding: 1px 8px; white-space: normal;
}
.surface-dark .todo, .surface-navy .todo, .surface-ink2 .todo, .footer .todo { color: #dcae6a; border-color: rgba(220,174,106,0.5); background: rgba(220,174,106,0.1); }

/* ---------- Testimonial / social proof ---------- */
.quote { font-family: var(--font-display); font-size: clamp(1.5rem, 3.2vw, 2.5rem); line-height: 1.24; letter-spacing: -0.015em; max-width: 24ch; }
.quote__cite { margin-top: 26px; font-family: var(--font-mono); font-size: 0.76rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--azure); }
.surface-dark .quote__cite, .surface-navy .quote__cite, .surface-ink2 .quote__cite { color: var(--azure-soft); }
.proofline { display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: baseline; font-family: var(--font-mono); font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sky-mute); }
.proofline b { font-family: var(--font-display); font-size: 1.6rem; font-weight: 400; color: var(--sky); text-transform: none; letter-spacing: -0.01em; margin-right: 4px; }
.surface-paper .proofline b, .surface-paper2 .proofline b { color: var(--navy); }
.surface-paper .proofline, .surface-paper2 .proofline { color: var(--ink-mute); }
.logobar { display: flex; flex-wrap: wrap; gap: 18px 22px; align-items: center; margin-top: 34px; }
.logobar span { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.06em; color: var(--sky-mute); border: 1px dashed var(--line-dark); padding: 16px 26px; border-radius: 5px; }
.surface-paper .logobar span, .surface-paper2 .logobar span { color: var(--ink-mute); border-color: var(--paper-line); }

/* Utility */
.mt-s{margin-top:12px}.mt-m{margin-top:24px}.mt-l{margin-top:40px}.mt-xl{margin-top:64px}
.mb-m{margin-bottom:24px}.mb-l{margin-bottom:40px}
.max-60{max-width:60ch}.max-52{max-width:52ch}.max-44{max-width:44ch}
.text-mute{color:var(--ink-mute)}.surface-dark .text-mute,.surface-navy .text-mute,.surface-ink2 .text-mute{color:var(--sky-mute)}
.center{text-align:center}
.flex-between{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.hide-mobile{}
@media(max-width:640px){.hide-mobile{display:none}}