/* ============================================================
   NCC — Nippon Consultant Company
   Shared site system. Editorial-financial posture on the NCC
   brand palette: crimson, ink, warm neutral. Inter throughout,
   weight + tracking carry the hierarchy. All color literals are
   restricted to the registered NCC brand set.
   ============================================================ */

/* ---- Tokens ---------------------------------------------- */
:root {
  --bg:       #ffffff;
  --ink:      #1a1a1a;
  --crimson:  #c01d2e;
  --surface:  #f6f4f2;
  --muted:    #606670;
  --border:   #e3e3e3;

  /* rgb component tokens (same registered hexes, for rgba/overlays) */
  --ink-rgb:      26, 26, 26;
  --crimson-rgb:  192, 29, 46;
  --bg-rgb:       255, 255, 255;
  --surface-rgb:  246, 244, 242;

  /* lighter crimson tint for text on ink panels (WCAG: 5.06:1 on #1a1a1a) */
  --crimson-on-ink: #e0616e;

  --font: "Inter", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  --maxw: 1240px;
  --gutter: clamp(20px, 5vw, 64px);
  --radius: 8px;

  --shadow-sm: 0 1px 2px rgba(var(--ink-rgb), 0.06);
  --shadow-md: 0 16px 40px -18px rgba(var(--ink-rgb), 0.22);
  --shadow-lg: 0 40px 90px -30px rgba(var(--ink-rgb), 0.34);

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

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
::selection { background: rgba(var(--crimson-rgb), 0.18); color: var(--ink); }

/* ---- Focus visibility (WCAG 2.4.7 / 2.4.11 / 2.4.13) ----- */
:focus-visible { outline: 2px solid var(--crimson); outline-offset: 3px; border-radius: 3px; }
.panel-ink :focus-visible, .foot :focus-visible { outline-color: var(--bg); }
[data-nav-theme="dark"] .nav:not(.is-stuck) :focus-visible { outline-color: var(--bg); }
/* …but controls sitting on a light surface inside an ink section (e.g. the
   contact card) need the dark ring back, or the focus outline is white-on-white. */
.panel-ink .contact-card :focus-visible, .panel-ink .card :focus-visible { outline-color: var(--crimson); }
/* Skip to content */
.skip-link {
  position: fixed; left: 16px; top: 12px; z-index: 300;
  background: var(--ink); color: var(--bg); padding: 11px 18px;
  border-radius: var(--radius); font-weight: 600; font-size: 0.9rem; letter-spacing: 0.01em;
  transform: translateY(-160%); transition: transform 0.2s var(--ease);
}
.skip-link:focus { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .skip-link { transition: none; } }

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

.lede { max-width: 62ch; }
.measure { max-width: 56ch; }

/* ---- Type ------------------------------------------------ */
.eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--crimson);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: "";
  width: 26px; height: 1px;
  background: var(--crimson);
  display: inline-block;
  transform: scaleX(var(--eb, 1)); /* drawn in on scroll by site.js; defaults to full so no-JS/reduced shows it */
  transform-origin: left center;
}
.eyebrow--muted { color: var(--muted); }
.eyebrow--muted::before { background: var(--muted); }

.display {
  font-weight: 800;
  font-size: clamp(2.6rem, 6.4vw, 5.4rem);
  line-height: 0.98;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
h1, .h1 { font-weight: 800; font-size: clamp(2.2rem, 4.6vw, 3.6rem); line-height: 1.04; letter-spacing: -0.025em; text-wrap: balance; }
h2, .h2 { font-weight: 800; font-size: clamp(1.7rem, 3.2vw, 2.7rem); line-height: 1.08; letter-spacing: -0.02em; text-wrap: balance; }
h3, .h3 { font-weight: 700; font-size: clamp(1.18rem, 1.7vw, 1.5rem); line-height: 1.2; letter-spacing: -0.01em; }
.kicker { font-weight: 600; font-size: 0.95rem; letter-spacing: 0.01em; }

p.body { font-size: clamp(1.02rem, 1.2vw, 1.16rem); color: rgba(var(--ink-rgb), 0.82); text-wrap: pretty; }
.muted { color: var(--muted); }
.crimson { color: var(--crimson); }
.tnum { font-variant-numeric: tabular-nums; }

.metalabel {
  font-size: 11px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted);
}

/* ---- Buttons --------------------------------------------- */
.btn {
  --bw: 1px;
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 600; font-size: 0.95rem; letter-spacing: 0.01em;
  padding: 14px 24px; border-radius: 999px;
  border: var(--bw) solid transparent;
  cursor: pointer; position: relative;
  transition: transform 0.4s var(--ease), background 0.25s, color 0.25s, border-color 0.25s, box-shadow 0.3s, filter 0.18s, opacity 0.2s;
}
[data-magnetic] { will-change: transform; }
.btn svg { width: 17px; height: 17px; transition: transform 0.4s var(--ease), opacity 0.2s; }
.btn--primary { background: var(--crimson); color: var(--bg); box-shadow: 0 12px 30px -12px rgba(var(--crimson-rgb), 0.6); }
.btn--primary:hover { box-shadow: 0 18px 44px -14px rgba(var(--crimson-rgb), 0.72); }
.btn--primary:hover svg { transform: translateX(4px); }
.btn--ghost { border-color: var(--border); color: var(--ink); background: transparent; }
.btn--ghost:hover { border-color: var(--ink); background: var(--ink); color: var(--bg); }
.btn--ghost:hover svg { transform: translateX(4px); }
.btn--onink { border-color: rgba(var(--bg-rgb), 0.28); color: var(--bg); }
.btn--onink:hover { background: var(--bg); color: var(--ink); border-color: var(--bg); }

/* Pressed feedback — filter-based so it survives the inline transform GSAP
   writes on magnetic CTAs (a CSS transform would be overridden). */
.btn:active { filter: brightness(0.93); }
@media (prefers-reduced-motion: reduce) { .btn:active { filter: none; } }

/* Disabled + in-flight (loading) states for form submits */
.btn:disabled, .btn[aria-disabled="true"] { cursor: not-allowed; opacity: 0.5; box-shadow: none; filter: none; }
.btn.is-loading { color: transparent; pointer-events: none; cursor: progress; }
.btn.is-loading svg { opacity: 0; }
.btn.is-loading::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid rgba(var(--bg-rgb), 0.4); border-top-color: var(--bg);
  animation: btnspin 0.7s linear infinite;
}
@keyframes btnspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .btn.is-loading::after { animation: none; } }

.textlink {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; letter-spacing: 0.01em;
  border-bottom: 1px solid transparent; padding-bottom: 2px;
  transition: border-color 0.25s;
}
.textlink svg { width: 15px; height: 15px; transition: transform 0.3s var(--ease); }
.textlink:hover { border-color: currentColor; }
.textlink:hover svg { transform: translateX(4px); }
.textlink--crimson { color: var(--crimson); }

/* ---- Top 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 0.4s var(--ease), box-shadow 0.4s var(--ease), padding 0.4s var(--ease);
}
.nav::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(var(--bg-rgb), 0.92);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--border);
  opacity: 0; transition: opacity 0.4s var(--ease);
}
.nav.is-stuck { padding-block: 12px; }
.nav.is-stuck::after { opacity: 1; }
.nav__brand { display: inline-flex; align-items: center; gap: 12px; z-index: 2; }
.nav__brand img { height: 34px; width: auto; }
.nav__brand .wordmark { font-weight: 800; letter-spacing: -0.01em; font-size: 1.02rem; line-height: 1; }
.nav__brand .wordmark span { display: block; font-size: 10px; font-weight: 600; letter-spacing: 0.18em; color: var(--muted); text-transform: uppercase; margin-top: 3px; }
.nav__links { display: flex; align-items: center; gap: 4px; }
.nav__links a {
  font-size: 0.92rem; font-weight: 500; color: rgba(var(--ink-rgb), 0.74);
  padding: 9px 15px; border-radius: 999px; position: relative;
  white-space: nowrap;
  transition: color 0.25s, background 0.25s;
}
.nav__links a:hover, .nav__links a.is-active { color: var(--ink); }
/* inset hairline so the pill still reads on the surface-colored subheroes */
.nav__links a.is-active { background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); }
/* hover/focus underline — wipes in left→right; active link uses the pill instead */
.nav__links a::after {
  content: ""; position: absolute; left: 15px; right: 15px; bottom: 5px; height: 1px;
  background: var(--crimson); transform: scaleX(0); transform-origin: left center;
  transition: transform 0.2s var(--ease);
}
.nav__links a:hover::after, .nav__links a:focus-visible::after { transform: scaleX(1); }
.nav__links a.is-active::after { display: none; }
@media (prefers-reduced-motion: reduce) { .nav__links a::after { transition: none; } }
.nav__cta { display: inline-flex; align-items: center; white-space: nowrap; }
.nav__toggle { display: none; }

/* keeps brand + 4 links + CTA on one line down to the 921px drawer breakpoint */
@media (max-width: 1160px) {
  .nav__links { gap: 2px; }
  .nav__links a { padding: 9px 11px; font-size: 0.88rem; }
  .nav__links a::after { left: 11px; right: 11px; }
  .nav__cta { padding: 12px 18px; }
}

@media (max-width: 920px) {
  .nav__links, .nav__cta { display: none; }
  .nav__toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border: 1px solid var(--border);
    border-radius: 10px; background: rgba(var(--bg-rgb), 0.7); cursor: pointer; z-index: 2;
  }
  .nav__toggle span { width: 18px; height: 2px; background: var(--ink); position: relative; transition: transform 0.3s var(--ease); }
  .nav__toggle span::before, .nav__toggle span::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: var(--ink); transition: transform 0.3s var(--ease), top 0.3s var(--ease); }
  .nav__toggle span::before { top: -6px; } .nav__toggle span::after { top: 6px; }
  body.menu-open .nav__toggle span { background: transparent; }
  body.menu-open .nav__toggle span::before { top: 0; transform: rotate(45deg); }
  body.menu-open .nav__toggle span::after { top: 0; transform: rotate(-45deg); }
}

/* Mobile drawer */
.drawer {
  position: fixed; inset: 0; z-index: 90;
  background: var(--bg); padding: 96px var(--gutter) 40px;
  display: flex; flex-direction: column; gap: 6px;
  transform: translateY(-100%); transition: transform 0.5s var(--ease);
  visibility: hidden;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
body.menu-open { overflow: hidden; }
body.menu-open .drawer { transform: translateY(0); visibility: visible; }
.drawer a { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.02em; padding: 14px 0; border-bottom: 1px solid var(--border); }
.drawer a:last-of-type { border-bottom: 0; }
.drawer a.is-active { color: var(--crimson); }
.drawer .btn { margin-top: 22px; align-self: flex-start; font-size: 1rem; letter-spacing: 0.01em; padding: 14px 28px; border-bottom: 0; }
.drawer__foot { margin-top: auto; padding-top: 24px; border-top: 1px solid var(--border); }
.drawer .drawer__foot a { font-size: 0.95rem; font-weight: 500; color: var(--muted); border-bottom: 0; padding: 4px 0; }
/* Tall tablet viewports: scale the takeover's type/rhythm up so 4 links + CTA
   compose the screen instead of leaving a half-empty cream band. Gated on
   min-height so short landscape phones keep the compact drawer; the CTA pill's
   own padding/size stays untouched (only its margin scales). */
@media (min-height: 900px) and (max-width: 920px) {
  .drawer { padding-top: 128px; gap: 10px; }
  .drawer > a:not(.btn) { font-size: 2.1rem; padding: 22px 0; }
  .drawer .btn { margin-top: 36px; }
}

/* Nav over a dark top section — light text until the nav becomes stuck
   (at which point the white backdrop appears and dark text returns). */
body[data-nav-theme="dark"] .nav:not(.is-stuck) .nav__brand .wordmark { color: var(--bg); }
body[data-nav-theme="dark"] .nav:not(.is-stuck) .nav__brand .wordmark span { color: rgba(var(--bg-rgb), 0.66); }
body[data-nav-theme="dark"] .nav:not(.is-stuck) .nav__links a { color: rgba(var(--bg-rgb), 0.82); }
body[data-nav-theme="dark"] .nav:not(.is-stuck) .nav__links a:hover { color: var(--bg); }
body[data-nav-theme="dark"] .nav:not(.is-stuck) .nav__links a.is-active { color: var(--bg); background: rgba(var(--bg-rgb), 0.14); box-shadow: none; }
body[data-nav-theme="dark"] .nav:not(.is-stuck) .nav__toggle { border-color: rgba(var(--bg-rgb), 0.34); background: rgba(var(--bg-rgb), 0.08); }
body[data-nav-theme="dark"] .nav:not(.is-stuck) .nav__toggle span,
body[data-nav-theme="dark"] .nav:not(.is-stuck) .nav__toggle span::before,
body[data-nav-theme="dark"] .nav:not(.is-stuck) .nav__toggle span::after { background: var(--bg); }

/* Drawer open over a dark-nav page: the drawer surface is white, so restore ink
   controls/wordmark (the not-yet-stuck dark nav would otherwise be white-on-white). */
body[data-nav-theme="dark"].menu-open .nav:not(.is-stuck) .nav__brand .wordmark { color: var(--ink); }
body[data-nav-theme="dark"].menu-open .nav:not(.is-stuck) .nav__brand .wordmark span { color: var(--muted); }
body[data-nav-theme="dark"].menu-open .nav:not(.is-stuck) .nav__toggle { border-color: var(--border); background: rgba(var(--bg-rgb), 0.7); }
body[data-nav-theme="dark"].menu-open .nav:not(.is-stuck) .nav__toggle span { background: transparent; }
body[data-nav-theme="dark"].menu-open .nav:not(.is-stuck) .nav__toggle span::before,
body[data-nav-theme="dark"].menu-open .nav:not(.is-stuck) .nav__toggle span::after { background: var(--ink); }

/* ---- Cards & surfaces ------------------------------------ */
.card {
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
  padding: clamp(22px, 2.4vw, 34px); position: relative;
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), border-color 0.4s;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: rgba(var(--ink-rgb), 0.18); }
.card__num { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; color: var(--crimson); font-variant-numeric: tabular-nums; }
.card h3 { margin-top: 14px; }
.card p { margin-top: 10px; color: rgba(var(--ink-rgb), 0.74); font-size: 0.98rem; }

.panel-surface { background: var(--surface); }
.panel-ink { background: var(--ink); color: var(--bg); }
.panel-ink .muted { color: rgba(var(--bg-rgb), 0.6); }
.panel-ink p.body { color: rgba(var(--bg-rgb), 0.78); }
/* crimson text on the ink surface needs the lighter tint to hit AA contrast */
.panel-ink .eyebrow:not(.eyebrow--muted) { color: var(--crimson-on-ink); }
.panel-ink .eyebrow:not(.eyebrow--muted)::before { background: var(--crimson-on-ink); }
.panel-ink .crimson { color: var(--crimson-on-ink); }
.panel-ink .pillar__n, .panel-ink .stepper__when { color: var(--crimson-on-ink); }
.panel-ink .stepper__when::before { background: var(--crimson-on-ink); }
.panel-ink .eyebrow--muted { color: rgba(var(--bg-rgb), 0.6); }
.panel-ink .eyebrow--muted::before { background: rgba(var(--bg-rgb), 0.4); }
/* muted copy inside the white contact card sits on a light surface, not the ink */
.panel-ink .contact-card .muted { color: var(--muted); }

.hr { height: 1px; background: var(--border); border: 0; }
.hr--ink { background: rgba(var(--bg-rgb), 0.14); }

/* ---- Stat figure ----------------------------------------- */
.figure { font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.03em; line-height: 0.9; color: var(--crimson); }
.figure--xl { font-size: clamp(3.4rem, 8vw, 7rem); }
.figure--lg { font-size: clamp(2.6rem, 5vw, 4.2rem); }
.figure--ink { color: var(--ink); }

/* ---- Motion utilities (driven by GSAP; safe defaults) ---- */
.reveal { opacity: 0; }
.reveal-up { opacity: 0; transform: translateY(28px); }
.reveal-rise { opacity: 0; transform: translateY(56px); }
.parallax { will-change: transform; }
.split-line { display: block; overflow: hidden; padding-bottom: 0.14em; margin-bottom: -0.14em; }
/* inline-block so GSAP yPercent transforms apply (transforms no-op on inline spans) */
.split-line > span { display: inline-block; will-change: transform; }
.no-js .reveal, .no-js .reveal-up, .no-js .reveal-rise { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-up, .reveal-rise { opacity: 1 !important; transform: none !important; }
}

/* ---- Footer ---------------------------------------------- */
.foot { background: var(--ink); color: var(--bg); padding-block: clamp(64px, 8vw, 104px); }
.foot a.muted-link { color: rgba(var(--bg-rgb), 0.62); transition: color 0.25s; }
.foot a.muted-link:hover { color: var(--bg); }
.foot__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 48px; }
.foot__col h4 { font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(var(--bg-rgb), 0.5); margin-bottom: 18px; }
.foot__col a, .foot__col p { display: block; color: rgba(var(--bg-rgb), 0.74); font-size: 0.96rem; padding: 5px 0; }
/* The full logo asset has a baked-in white background, so the footer mirrors the
   header lockup instead: transparent mark + live text, sitting directly on the ink. */
.foot__lockup { display: inline-flex; align-items: center; gap: 12px; }
.foot__lockup img { height: 40px; width: auto; }
.foot__lockup .wordmark { font-weight: 800; font-size: 1.05rem; line-height: 1; letter-spacing: -0.01em; color: var(--bg); }
.foot__lockup .wordmark span { display: block; font-size: 10px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(var(--bg-rgb), 0.6); margin-top: 3px; }
.foot__legal { margin-top: 56px; padding-top: 24px; border-top: 1px solid rgba(var(--bg-rgb), 0.14); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 0.84rem; color: rgba(var(--bg-rgb), 0.5); }
@media (max-width: 760px) { .foot__grid { grid-template-columns: 1fr; gap: 36px; } }

/* ---- Generic grids --------------------------------------- */
.grid { display: grid; gap: clamp(16px, 1.8vw, 24px); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  /* a 3-item set is 3-across or stacked, never 2+1: let a lone third item span the row */
  .grid-3 > :nth-child(3):last-child { grid-column: 1 / -1; }
}
@media (max-width: 620px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.split--sticky { align-items: start; }
@media (max-width: 880px) { .split { grid-template-columns: 1fr; gap: 40px; } }

.flow > * + * { margin-top: 22px; }
.tag { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--border); border-radius: 999px; padding: 5px 12px; }

/* ---- Mandate imagery (shared figure system) -------------- */
/* isolation scopes the tint's multiply blend to the figure itself, so it can only
   ever blend with the image below it — never with section-level backdrop layers. */
.mfigure { position: relative; overflow: hidden; isolation: isolate; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); aspect-ratio: 3 / 2; }
.mfigure--wide { aspect-ratio: 16 / 9; }
.mfigure__media { position: absolute; inset: -6% 0; z-index: 0; }
.mfigure__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.8s var(--ease); }
.mfigure:hover .mfigure__media img { transform: scale(1.05); }
.mfigure { transition: border-color 0.5s var(--ease), box-shadow 0.5s var(--ease); }
.mfigure__tint { position: absolute; inset: 0; z-index: 1; background: rgba(var(--crimson-rgb), 0); mix-blend-mode: multiply; transition: background 0.55s var(--ease); pointer-events: none; }
.mfigure:hover { border-color: rgba(var(--crimson-rgb), 0.5); box-shadow: var(--shadow-md); }
.mfigure:hover .mfigure__tint { background: rgba(var(--crimson-rgb), 0.16); }
.mfigure::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: var(--radius); box-shadow: inset 0 0 0 rgba(var(--crimson-rgb), 0); transition: box-shadow 0.55s var(--ease); pointer-events: none; }
.mfigure:hover::after { box-shadow: inset 0 0 44px rgba(var(--crimson-rgb), 0.22); }
.mfigure__tag { position: absolute; left: 14px; top: 14px; z-index: 3; display: inline-flex; align-items: center; gap: 8px; background: rgba(var(--bg-rgb), 0.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid var(--border); border-radius: 999px; padding: 7px 13px; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--crimson); font-variant-numeric: tabular-nums; }
.mfigure__corner { position: absolute; z-index: 3; width: 30px; height: 30px; fill: none; stroke: var(--crimson); stroke-width: 2; }
.mfigure__corner--br { right: 12px; bottom: 12px; }
@media (prefers-reduced-motion: reduce) { .mfigure__media img { transition: none; } }

/* Home: sector cards with imagery */
.sector-card { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 60px); align-items: center; padding: clamp(28px, 3.6vw, 56px) 0; border-top: 1px solid var(--border); }
.sector-card:last-of-type { border-bottom: 1px solid var(--border); }
.sector-card--rev .mfigure { order: 2; }
.sector-card__body .count { font-variant-numeric: tabular-nums; color: var(--crimson); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.12em; }
.sector-card__body h3 { font-size: clamp(1.4rem, 2.6vw, 2.1rem); font-weight: 800; letter-spacing: -0.02em; margin-top: 10px; }
.sector-card__body .tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; }
.sector-card__body .textlink { margin-top: 22px; }
@media (max-width: 760px) {
  .sector-card { grid-template-columns: 1fr; gap: 20px; padding: 32px 0; }
  .sector-card .mfigure { order: -1; }
  .sector-card--rev .mfigure { order: -1; }
}

/* Track-record: sector image stacked above title */
.sector__media { margin-bottom: 22px; }
.clients-banner { margin: 0 0 clamp(36px, 5vw, 56px); }
.clients-banner .mfigure { border-color: rgba(var(--bg-rgb), 0.16); background: var(--surface); }

/* ============================================================
   Ambient graphics — blended imagery + animated SVG motifs that
   sit BEHIND content and melt into the page (no boxes).
   ============================================================ */

/* keep section content above ambient layers */
.section { isolation: isolate; }
.section > .wrap { position: relative; z-index: 2; }

/* ambient layer container */
.amb { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.amb svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.amb--right { left: auto; right: 0; width: min(62%, 760px); }
.amb--fade-l { -webkit-mask-image: linear-gradient(90deg, transparent, var(--ink) 38%); mask-image: linear-gradient(90deg, transparent, var(--ink) 38%); }

/* flowing contour lines (relationship/corridor feel) */
.amb__flow path { fill: none; stroke: rgba(var(--crimson-rgb), 0.13); stroke-width: 1.3; stroke-dasharray: 5 11; animation: ambFlow 16s linear infinite; }
.amb__flow path:nth-child(2) { stroke: rgba(var(--ink-rgb), 0.07); animation-duration: 22s; }
.amb__flow path:nth-child(3) { stroke: rgba(var(--crimson-rgb), 0.08); animation-duration: 28s; }
@keyframes ambFlow { to { stroke-dashoffset: -192; } }

/* drifting node network */
.amb__net line { stroke: rgba(var(--ink-rgb), 0.07); stroke-width: 1; }
.amb__net circle { fill: rgba(var(--crimson-rgb), 0.45); }
.amb__net .nfade { animation: ambPulse 5s ease-in-out infinite; }
.amb__net .nfade:nth-child(odd) { animation-delay: 1.4s; }
@keyframes ambPulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }

/* on dark (ink) panels, flip the ambient to light strokes */
.panel-ink .amb__flow path,
[data-amb-dark] .amb__flow path { stroke: rgba(var(--bg-rgb), 0.16); }
.panel-ink .amb__flow path:nth-child(2),
[data-amb-dark] .amb__flow path:nth-child(2) { stroke: rgba(var(--bg-rgb), 0.10); }
.panel-ink .amb__net line { stroke: rgba(var(--bg-rgb), 0.10); }
.panel-ink .amb__net circle { fill: rgba(var(--bg-rgb), 0.6); }

/* Blended (de-boxed) imagery — edges melt into the page */
.bleed { position: relative; z-index: 1; }
.bleed img { display: block; width: 100%; height: auto; }
.bleed--soft img { -webkit-mask-image: radial-gradient(125% 130% at 50% 42%, var(--ink) 52%, transparent 100%); mask-image: radial-gradient(125% 130% at 50% 42%, var(--ink) 52%, transparent 100%); }
.bleed--right img { -webkit-mask-image: linear-gradient(90deg, transparent 0%, var(--ink) 42%); mask-image: linear-gradient(90deg, transparent 0%, var(--ink) 42%); }
.bleed--band img { -webkit-mask-image: linear-gradient(90deg, transparent, var(--ink) 14% 86%, transparent); mask-image: linear-gradient(90deg, transparent, var(--ink) 14% 86%, transparent); }

/* GSAP draw-in connector (relationship arrows / links) */
.draw path, .draw line, .draw polyline { fill: none; stroke: var(--crimson); stroke-width: 2; }
.draw .lab { fill: var(--muted); }

/* De-boxed (blended) figure — melts into the page, no border/box */
.mfigure--bleed { border-color: transparent; background: transparent; }
.mfigure--bleed::after { display: none; }
.mfigure--bleed .mfigure__corner { display: none; }
.mfigure--bleed .mfigure__media { inset: 0; }
.mfigure--bleed .mfigure__media img {
  -webkit-mask-image: linear-gradient(to right, transparent, var(--ink) 7%, var(--ink) 93%, transparent), linear-gradient(to bottom, transparent, var(--ink) 7%, var(--ink) 93%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, var(--ink) 7%, var(--ink) 93%, transparent), linear-gradient(to bottom, transparent, var(--ink) 7%, var(--ink) 93%, transparent);
  mask-composite: intersect;
}
.mfigure--bleed:hover { border-color: transparent; box-shadow: none; }
.mfigure--bleed .mfigure__tag { background: rgba(var(--bg-rgb), 0.62); border-color: transparent; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.panel-ink .mfigure--bleed .mfigure__tag { background: rgba(var(--ink-rgb), 0.5); color: var(--bg); }

/* ---- Animated motion overlay for content figures -----------
   Flowing corridor lines + pulsing nodes layered over a mandate
   illustration — same crimson language as .visual-band__trace.
   Injected by site.js into .mfigure--bleed figures. Sits at z-index 2
   (above the image + tint, below the tag/corner at z-index 3), is
   clipped by the figure's overflow:hidden so it can never spill past the
   image at any viewport, and is edge-masked to match the figure's own
   bleed fade so lines never float in the transparent margin. */
.img-fx { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; color: var(--crimson); opacity: 0.55; }
.img-fx svg { width: 100%; height: 100%; display: block; }

/* shared motion primitives — each figure composes its own set below */
.img-fx .fx-flow, .img-fx .fx-stroke, .img-fx .fx-ring { fill: none; stroke: currentColor; vector-effect: non-scaling-stroke; }
.img-fx .fx-flow { stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 5 16; animation: fxFlow 4.8s linear infinite; }      /* energy travelling along a line */
.img-fx .fx-flow.g2 { animation-duration: 6.8s; animation-direction: reverse; opacity: 0.6; }
.img-fx .fx-stroke { stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; opacity: 0.5; }                              /* static connective tissue */
.img-fx .fx-node { fill: currentColor; stroke: none; animation: fxNode 3.2s ease-in-out infinite; }                                 /* pulsing endpoint */
.img-fx .fx-node.d1 { animation-delay: 0.7s; } .img-fx .fx-node.d2 { animation-delay: 1.4s; } .img-fx .fx-node.d3 { animation-delay: 2.1s; }
.img-fx .fx-spark { fill: currentColor; stroke: none; transform-box: view-box; animation: fxSpark 4s ease-in-out infinite; }        /* rising heat/steam */
.img-fx .fx-spark.s2 { animation-delay: 1.3s; } .img-fx .fx-spark.s3 { animation-delay: 2.5s; }
.img-fx .fx-ring { stroke-width: 1.5; transform-box: view-box; transform-origin: 800px 460px; animation: fxRing 3.8s ease-out infinite; } /* expanding therapy ring */
.img-fx .fx-ring.r2 { animation-delay: 1.27s; } .img-fx .fx-ring.r3 { animation-delay: 2.53s; }
.img-fx .fx-dot { fill: currentColor; stroke: none; animation: fxRide 5s linear infinite; }                                         /* rides an offset-path */
.img-fx .fx-dot.b { animation-duration: 6.6s; animation-delay: 1.6s; opacity: 0.72; }
.img-fx .fx-sweep { transform-box: view-box; animation: fxSweep 5.4s ease-in-out infinite; }                                        /* survey scan bar */
@keyframes fxFlow { to { stroke-dashoffset: -220; } }
@keyframes fxNode { 0%, 100% { opacity: 0.28; } 50% { opacity: 1; } }
@keyframes fxSpark { 0% { transform: translateY(10px); opacity: 0; } 28% { opacity: 1; } 100% { transform: translateY(-66px); opacity: 0; } }
@keyframes fxRing { 0% { transform: scale(0.16); opacity: 0.85; } 78% { opacity: 0.12; } 100% { transform: scale(1.55); opacity: 0; } }
@keyframes fxRide { from { offset-distance: 0%; } to { offset-distance: 100%; } }
@keyframes fxSweep { 0% { transform: translateX(-200px); opacity: 0; } 12% { opacity: 0.85; } 88% { opacity: 0.85; } 100% { transform: translateX(1920px); opacity: 0; } }

/* per-figure rider trajectories — the dots/packets follow the illustration's own forms */
.img-fx--cyber .fx-dot { offset-path: path("M250 720 C 600 670 950 722 1250 670"); }
.img-fx--health .fx-dot { offset-path: path("M1410 560 a70 40 0 1 0 140 0 a70 40 0 1 0 -140 0"); animation-duration: 5.6s; }
.img-fx--orbit .fx-dot { offset-path: path("M460 400 a520 240 0 1 0 1040 0 a520 240 0 1 0 -1040 0"); animation-duration: 14s; }
.img-fx--orbit .fx-dot.b { offset-path: path("M680 400 a300 360 0 1 0 600 0 a300 360 0 1 0 -600 0"); animation-duration: 18s; animation-delay: 2s; }

/* containment + edge fades — figure overflow clips; mask fades to match each image's own edge */
.mfigure--bleed .img-fx {
  -webkit-mask-image: linear-gradient(to right, transparent, var(--ink) 7%, var(--ink) 93%, transparent), linear-gradient(to bottom, transparent, var(--ink) 7%, var(--ink) 93%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, var(--ink) 7%, var(--ink) 93%, transparent), linear-gradient(to bottom, transparent, var(--ink) 7%, var(--ink) 93%, transparent);
  mask-composite: intersect;
}
/* on the sub-page heroes the overlay lives inside the art layer, so it inherits the
   art's own opacity + multiply blend — the motion sits at the same weight as the engraving. */
.subhero__art .img-fx { opacity: 1; -webkit-mask-image: linear-gradient(90deg, transparent, var(--ink) 22%, var(--ink) 100%); mask-image: linear-gradient(90deg, transparent, var(--ink) 22%, var(--ink) 100%); }
.panel-ink .img-fx { opacity: 0.62; }
@media (max-width: 760px) { .mfigure--bleed .img-fx { opacity: 0.4; } }
/* At widths where the art drops to near-invisible opacity, still the fx loops
   (static linework keeps reading as part of the engraving; saves compositing). */
@media (max-width: 860px) { .subhero__art .img-fx * { animation-play-state: paused; } }
@media (max-width: 760px) { .mfigure--bleed .img-fx * { animation-play-state: paused; } }
@media (prefers-reduced-motion: reduce) { .img-fx, .img-fx * { animation: none !important; } }

/* Blended illustration used as a faint, edge-masked section background */
.amb-img { position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: min(52%, 600px); z-index: 0; opacity: 0.4; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, var(--ink) 50%); mask-image: linear-gradient(90deg, transparent, var(--ink) 50%); }
.amb-img--faint { opacity: 0.26; }
.amb-img img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: contain; display: block; animation: ambFloatY 13s ease-in-out infinite; }
.panel-ink .amb-img { opacity: 0.36; }
@keyframes ambFloatY { 0%, 100% { transform: translateY(-9px); } 50% { transform: translateY(9px); } }
@media (max-width: 860px) { .amb-img { width: 88%; opacity: 0.14; } .amb-img--faint { opacity: 0.1; } }

@media (prefers-reduced-motion: reduce) {
  .amb__flow path, .amb__net .nfade, .amb-img img { animation: none; }
}

/* ---- Subpage hero band ----------------------------------- */
.subhero { position: relative; overflow: hidden; padding-top: clamp(140px, 18vh, 220px); padding-bottom: clamp(48px, 7vw, 92px); }
.subhero > .wrap { position: relative; z-index: 2; }
.subhero .display { max-width: 16ch; }
.subhero--visual { min-height: min(78vh, 720px); display: grid; align-items: center; }
.subhero__art { position: absolute; right: max(-22vw, -280px); bottom: max(-8vw, -104px); z-index: 0; width: min(76vw, 1180px); opacity: 0.46; mix-blend-mode: multiply; pointer-events: none; }
.subhero__art img { width: 100%; height: auto; display: block; -webkit-mask-image: linear-gradient(90deg, transparent 0%, var(--ink) 16%, var(--ink) 88%, transparent 100%), linear-gradient(180deg, transparent 0%, var(--ink) 10%, var(--ink) 92%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0%, var(--ink) 16%, var(--ink) 88%, transparent 100%), linear-gradient(180deg, transparent 0%, var(--ink) 10%, var(--ink) 92%, transparent 100%); mask-composite: intersect; animation: ambFloatY 15s ease-in-out infinite; }
.subhero__art--ink { inset: 0 0 0 auto; width: min(72vw, 1220px); opacity: 0.78; mix-blend-mode: normal; }
.subhero__art--ink img { height: 100%; object-fit: cover; object-position: center right; -webkit-mask-image: linear-gradient(90deg, transparent 0%, var(--ink) 25%, var(--ink) 100%); mask-image: linear-gradient(90deg, transparent 0%, var(--ink) 25%, var(--ink) 100%); }
@media (max-width: 860px) {
  .subhero--visual { min-height: auto; }
  .subhero__art { right: -78vw; bottom: -8vw; width: 166vw; opacity: 0.16; }
  .subhero__art--ink { right: -84vw; width: 172vw; opacity: 0.34; }
}
@media (prefers-reduced-motion: reduce) { .subhero__art img { animation: none; } }
.crumb { font-size: 0.85rem; color: var(--muted); margin-bottom: 22px; display: flex; gap: 10px; align-items: center; }
/* layout-neutral hit-area enlargement (≥24px tall tap target) */
.crumb a { padding: 8px 4px; margin: -8px -4px; }
.crumb a:hover { color: var(--ink); }

/* ---- Sub-page module hover (Approach JBIC · Thesis catalyst · Team profile) ----
   Subtle lift/crimson-edge feedback to match the home .card/.pillar system.
   Reveal-in is already handled by the GSAP reveal/stagger engine. */
.jbic .node, .catalyst > div { transition: transform 0.4s var(--ease), border-color 0.4s var(--ease); }
.jbic .node:hover { transform: translateY(-4px); border-color: rgba(var(--bg-rgb), 0.34); }
.catalyst > div:hover { transform: translateY(-4px); background: rgba(var(--crimson-rgb), 0.03); }
.profile__photo { transition: border-color 0.4s var(--ease); }
.profile:hover .profile__photo { border-color: rgba(var(--crimson-rgb), 0.45); }
@media (prefers-reduced-motion: reduce) {
  .jbic .node, .catalyst > div, .profile__photo { transition: none; }
}