/* ==========================================================================
   SHABABEEK - COMPONENT SYSTEM
   Every rule uses CSS logical properties (inline-start/end, margin-inline,
   padding-block) so Arabic RTL is a genuine mirror of the layout rather
   than translated text jammed into an LTR shell.
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-block-start: 6rem;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-relaxed);
  letter-spacing: var(--ls-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--w-extra);
  letter-spacing: var(--ls-heading);
  line-height: var(--lh-snug);
  margin: 0;
  text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

::selection { background: var(--c-teal-100); color: var(--c-navy-800); }

.skip-link {
  position: absolute;
  inset-block-start: -100px;
  inset-inline-start: var(--s-4);
  z-index: var(--z-overlay);
  background: var(--c-navy-800);
  color: var(--text-invert);
  padding: var(--s-3) var(--s-5);
  border-radius: var(--r-md);
  font-size: var(--t-small);
  font-weight: var(--w-semibold);
  transition: inset-block-start var(--d-base) var(--ease);
}
.skip-link:focus { inset-block-start: var(--s-4); }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ==========================================================================
   LAYOUT PRIMITIVES
   ========================================================================== */

.wrap {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--wide { max-width: var(--container-wide); }
.wrap--text { max-width: var(--container-text); }

.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: var(--section-y-tight); }
.section--alt { background: var(--ground-alt); }
.section--invert {
  background: var(--ground-invert);
  color: var(--text-invert);
}
.section--invert h1, .section--invert h2, .section--invert h3, .section--invert h4 { color: var(--text-invert); }
.section--invert .lead, .section--invert .prose { color: var(--text-invert-muted); }

/* Hairline dividers that sit flush with the container, not the viewport.
   Reads as considered rather than as a default border. */
.rule {
  border: 0;
  border-block-start: var(--win-frame) solid var(--line);
  margin: 0;
}
.section--invert .rule { border-color: var(--line-invert); }

/* ==========================================================================
   TYPE COMPONENTS
   ========================================================================== */

.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-body);
  font-size: var(--t-eyebrow);
  font-weight: var(--w-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
  margin-block-end: var(--s-5);
}
.eyebrow::before {
  content: "";
  inline-size: var(--s-6);
  block-size: var(--win-frame);
  background: currentColor;
  flex: none;
}
.section--invert .eyebrow { color: var(--accent-invert); }
[dir="rtl"] .eyebrow { text-transform: none; }

.h-hero {
  font-size: var(--t-hero);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-hero);
}
.h1 { font-size: var(--t-h1); line-height: var(--lh-tight); }
.h2 { font-size: var(--t-h2); }
.h3 { font-size: var(--t-h3); font-weight: var(--w-bold); }
.h4 { font-size: var(--t-h4); font-weight: var(--w-bold); letter-spacing: -0.012em; }

.lead {
  font-size: var(--t-lead);
  line-height: var(--lh-normal);
  color: var(--text-muted);
  font-weight: var(--w-regular);
}
.prose { color: var(--text-muted); }
.prose > * + * { margin-block-start: var(--s-4); }
.prose strong { color: var(--text); font-weight: var(--w-semibold); }
.section--invert .prose strong { color: var(--text-invert); }

/* Accent word inside a heading - the one place amber appears in type. */
.gild { color: var(--premium); }
.section--invert .gild { color: var(--premium-invert); }
.teal { color: var(--accent); }
.section--invert .teal { color: var(--accent-invert); }

/* ==========================================================================
   BUTTONS
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-6);
  font-family: var(--font-body);
  font-size: var(--t-small);
  font-weight: var(--w-semibold);
  letter-spacing: 0;
  border: var(--win-frame) solid transparent;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background var(--d-base) var(--ease),
              color var(--d-base) var(--ease),
              border-color var(--d-base) var(--ease),
              transform var(--d-base) var(--ease);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

/* The arrow nudges forward on hover - and in RTL it points and nudges the
   other way, because a forward arrow in Arabic points left. */
.btn__arrow {
  inline-size: 1em;
  flex: none;
  transition: transform var(--d-base) var(--ease);
}
[dir="rtl"] .btn__arrow { transform: scaleX(-1); }
.btn:hover .btn__arrow { transform: translateX(4px); }
[dir="rtl"] .btn:hover .btn__arrow { transform: scaleX(-1) translateX(4px); }

.btn--primary { background: var(--c-navy-800); color: var(--text-invert); }
.btn--primary:hover { background: var(--c-navy-700); }

.btn--accent { background: var(--c-teal-600); color: var(--text-invert); }
.btn--accent:hover { background: var(--c-teal-500); }

.btn--ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--line);
}
.btn--ghost:hover { border-color: var(--c-navy-800); background: var(--c-white); }

.btn--on-dark { background: var(--c-white); color: var(--c-navy-800); }
.btn--on-dark:hover { background: var(--c-ivory-100); }

.btn--ghost-dark {
  background: transparent;
  color: var(--text-invert);
  border-color: var(--c-navy-400);
}
.btn--ghost-dark:hover { border-color: var(--c-white); background: rgba(255,255,255,0.06); }

.btn--lg { padding: var(--s-5) var(--s-7); font-size: var(--t-body); }
.btn--block { width: 100%; }

/* Text link with an underline that draws in from the leading edge. */
.link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-weight: var(--w-semibold);
  font-size: var(--t-small);
  color: var(--accent);
  position: relative;
  padding-block-end: 2px;
}
.link::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  inline-size: 0;
  block-size: var(--win-frame);
  background: currentColor;
  transition: inline-size var(--d-base) var(--ease);
}
.link:hover::after { inline-size: 100%; }
.link svg { inline-size: 0.85em; flex: none; transition: transform var(--d-base) var(--ease); }
[dir="rtl"] .link svg { transform: scaleX(-1); }
.link:hover svg { transform: translateX(3px); }
[dir="rtl"] .link:hover svg { transform: scaleX(-1) translateX(3px); }
.section--invert .link { color: var(--accent-invert); }

/* ==========================================================================
   WINDOW DESIGN LANGUAGE
   The core brand device. A .window is a framed portal; .window__pane holds
   the content; .window__grid overlays the mullions. Photography, gradients,
   maps, or video all sit inside the same frame system.
   ========================================================================== */

.window {
  position: relative;
  display: block;
  border: var(--win-frame) solid var(--line);
  padding: var(--win-inset);
  background: var(--surface);
  overflow: hidden;
}
.section--invert .window,
.window--dark {
  border-color: var(--line-invert);
  background: var(--surface-invert);
}

.window__pane {
  position: relative;
  overflow: hidden;
  background: var(--c-navy-800);
  aspect-ratio: var(--win-ratio-landscape);
}
.window--portrait  .window__pane { aspect-ratio: var(--win-ratio-portrait); }
.window--panorama  .window__pane { aspect-ratio: var(--win-ratio-panorama); }
.window--tall      .window__pane { aspect-ratio: var(--win-ratio-tall); }
.window--free      .window__pane { aspect-ratio: auto; }

/* Mullions - the crossbars. Sits above the image, below any caption.
   Pointer-events off so it never blocks a link underneath. */
.window__grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}
.window__grid::before,
.window__grid::after {
  content: "";
  position: absolute;
  background: rgba(253, 252, 250, 0.28);
}
.window__grid::before { inset-block: 0; inset-inline-start: 50%; inline-size: var(--win-frame); }
.window__grid::after  { inset-inline: 0; inset-block-start: 50%; block-size: var(--win-frame); }

/* Thirds variant - for wider frames where a single cross reads too plain. */
.window__grid--thirds::before { inset-inline-start: 33.333%; }
.window__grid--thirds::after  { inset-block-start: 50%; }
.window__grid--thirds > i {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 66.666%;
  inline-size: var(--win-frame);
  background: rgba(253, 252, 250, 0.28);
}

/* ---------------------------------------------------------------------------
   PANE FILLS
   Standing in for photography. Each is a layered composition suggesting
   architecture, light through glass, or a city grid - not a flat swatch.
   In the WordPress build these become <img> with the same frame around them;
   the class names double as the art-direction brief for each slot.
   --------------------------------------------------------------------------- */

.fill {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Amsterdam canal light - warm low sun across water */
.fill--canal {
  background:
    linear-gradient(190deg, rgba(223,162,60,0.30) 0%, rgba(223,162,60,0) 42%),
    linear-gradient(0deg,   rgba(5,18,31,0.85) 0%,  rgba(5,18,31,0) 55%),
    linear-gradient(140deg, #14405C 0%, #0B2338 48%, #081A2B 100%);
}
/* Modern Dutch architecture - glass curtain wall */
.fill--arch {
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.055) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(0deg,  rgba(255,255,255,0.055) 0 1px, transparent 1px 62px),
    linear-gradient(160deg, #1B5563 0%, #0E3345 55%, #081A2B 100%);
}
/* Workshop / training room - people around a table, teal cast */
.fill--workshop {
  background:
    radial-gradient(120% 90% at 22% 18%, rgba(42,196,180,0.34) 0%, transparent 58%),
    radial-gradient(90% 80% at 82% 88%, rgba(223,162,60,0.20) 0%, transparent 60%),
    linear-gradient(150deg, #0F3B48 0%, #0A2436 60%, #081A2B 100%);
}
/* Innovation lab - cool, technical */
.fill--lab {
  background:
    conic-gradient(from 210deg at 68% 32%, rgba(42,196,180,0.30), transparent 42%),
    linear-gradient(200deg, #103A4E 0%, #0A2133 70%, #05121F 100%);
}
/* Delegation / group learning - warmer, human */
.fill--group {
  background:
    radial-gradient(100% 100% at 78% 12%, rgba(223,162,60,0.30) 0%, transparent 55%),
    radial-gradient(80% 90% at 10% 92%, rgba(42,196,180,0.22) 0%, transparent 62%),
    linear-gradient(165deg, #16394A 0%, #0C2334 65%, #081A2B 100%);
}
/* Market / port - Rotterdam, containers, trade */
.fill--market {
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,0.05) 0 2px, transparent 2px 26px),
    linear-gradient(175deg, #0E4A52 0%, #0A2A3A 58%, #05121F 100%);
}
/* University / institution - stone, formal */
.fill--campus {
  background:
    linear-gradient(0deg, rgba(5,18,31,0.78) 0%, rgba(5,18,31,0.10) 60%),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.06) 0 1px, transparent 1px 78px),
    linear-gradient(150deg, #234B5C 0%, #10303F 62%, #081A2B 100%);
}
/* Network / ecosystem map - nodes and links */
.fill--network {
  background:
    radial-gradient(circle at 20% 30%, rgba(42,196,180,0.55) 0 2px, transparent 3px),
    radial-gradient(circle at 62% 18%, rgba(42,196,180,0.45) 0 2px, transparent 3px),
    radial-gradient(circle at 82% 52%, rgba(223,162,60,0.55) 0 2px, transparent 3px),
    radial-gradient(circle at 38% 68%, rgba(42,196,180,0.45) 0 2px, transparent 3px),
    radial-gradient(circle at 72% 84%, rgba(42,196,180,0.35) 0 2px, transparent 3px),
    linear-gradient(160deg, #0D2E40 0%, #081A2B 100%);
}

/* Grain overlay. Keeps the flat fills from looking like plastic and gives
   the whole palette a printed, editorial quality. */
.fill::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.5;
  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='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.22'/%3E%3C/svg%3E");
}

/* Photography slot label - visible only in prototype mode so the client can
   see exactly what image each frame expects. Toggled off via body class. */
.slot {
  position: absolute;
  inset-block-end: var(--s-3);
  inset-inline-start: var(--s-3);
  z-index: 3;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.72);
  background: rgba(5,18,31,0.55);
  backdrop-filter: blur(6px);
  border: var(--win-frame) solid rgba(255,255,255,0.16);
  border-radius: var(--r-pill);
  padding: 0.3rem 0.7rem;
  pointer-events: none;
}
body.slots-off .slot { display: none; }

/* ==========================================================================
   HEADER
   ========================================================================== */

.header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--z-header);
  transition: background var(--d-base) var(--ease),
              border-color var(--d-base) var(--ease),
              backdrop-filter var(--d-base) var(--ease);
  border-block-end: var(--win-frame) solid transparent;
}
.header__inner {
  display: flex;
  align-items: center;
  gap: var(--s-6);
  min-block-size: 5rem;
}
.header.is-stuck {
  background: rgba(253, 252, 250, 0.88);
  backdrop-filter: blur(16px) saturate(140%);
  border-block-end-color: var(--line);
}
.header.is-stuck .header__inner { min-block-size: 4.25rem; }

/* On pages with a navy hero the header starts transparent-on-dark and
   flips to light once stuck. */
.header--on-dark:not(.is-stuck) { color: var(--text-invert); }
.header--on-dark:not(.is-stuck) .nav__link { color: rgba(255,255,255,0.82); }
.header--on-dark:not(.is-stuck) .nav__link:hover,
.header--on-dark:not(.is-stuck) .nav__link[aria-current="page"] { color: var(--c-white); }
.header--on-dark:not(.is-stuck) .lang__btn { color: rgba(255,255,255,0.82); border-color: rgba(255,255,255,0.24); }
.header--on-dark:not(.is-stuck) .btn--primary { background: var(--c-white); color: var(--c-navy-800); }
.header--on-dark:not(.is-stuck) .burger span { background: var(--c-white); }

/* Logo - the mark is a four-pane window, which is the brand in one glyph. */
.logo { display: flex; align-items: center; gap: var(--s-3); flex: none; }
.logo__mark { inline-size: 2rem; block-size: 2rem; flex: none; }
.logo__mark rect { fill: none; stroke: currentColor; stroke-width: 1.6; }
.logo__mark .pane-lit { fill: var(--c-teal-500); stroke: none; opacity: 0.9; }
.logo__word {
  font-family: var(--font-display);
  font-weight: var(--w-extra);
  font-size: 1.1875rem;
  letter-spacing: -0.03em;
}
.logo__word i {
  display: block;
  font-style: normal;
  font-family: var(--font-body);
  font-size: 0.5625rem;
  font-weight: var(--w-medium);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.55;
  margin-block-start: 1px;
}
[dir="rtl"] .logo__word i { letter-spacing: 0.04em; text-transform: none; }

.nav { display: flex; align-items: center; gap: var(--s-2); margin-inline-start: auto; }
.nav__link {
  padding: var(--s-3) var(--s-4);
  font-size: var(--t-small);
  font-weight: var(--w-medium);
  color: var(--text-muted);
  border-radius: var(--r-md);
  transition: color var(--d-fast) var(--ease);
  position: relative;
}
.nav__link:hover { color: var(--text); }
.nav__link[aria-current="page"] { color: var(--text); font-weight: var(--w-semibold); }
.nav__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  inset-block-end: 2px;
  inset-inline: var(--s-4);
  block-size: var(--win-frame);
  background: var(--accent);
}
.header--on-dark:not(.is-stuck) .nav__link[aria-current="page"]::after { background: var(--accent-invert); }

.header__actions { display: flex; align-items: center; gap: var(--s-3); flex: none; }

/* Language switcher */
.lang { position: relative; }
.lang__btn {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  font-size: var(--t-micro);
  font-weight: var(--w-semibold);
  letter-spacing: 0.06em;
  color: var(--text-muted);
  background: transparent;
  border: var(--win-frame) solid var(--line);
  border-radius: var(--r-pill);
  transition: border-color var(--d-fast) var(--ease), color var(--d-fast) var(--ease);
}
.lang__btn:hover { color: var(--text); border-color: var(--c-navy-400); }
.lang__btn svg { inline-size: 0.7em; transition: transform var(--d-fast) var(--ease); }
.lang__btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.lang__menu {
  position: absolute;
  inset-block-start: calc(100% + var(--s-2));
  inset-inline-end: 0;
  min-inline-size: 11rem;
  background: var(--surface);
  border: var(--win-frame) solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--e-2);
  padding: var(--s-2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--d-fast) var(--ease),
              transform var(--d-fast) var(--ease),
              visibility var(--d-fast);
}
.lang__menu[data-open="true"] { opacity: 1; visibility: visible; transform: translateY(0); }
.lang__item {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  inline-size: 100%;
  padding: var(--s-3) var(--s-3);
  background: transparent;
  border: 0;
  border-radius: var(--r-sm);
  font-size: var(--t-small);
  color: var(--text);
  text-align: start;
  transition: background var(--d-fast) var(--ease);
}
.lang__item:hover { background: var(--ground-alt); }
.lang__item[aria-current="true"] { color: var(--accent); font-weight: var(--w-semibold); }
.lang__item small { color: var(--text-faint); font-size: var(--t-micro); margin-inline-start: auto; }

/* Mobile toggle */
.burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  background: transparent;
  border: 0;
  padding: 0;
}
.burger span {
  display: block;
  inline-size: 22px;
  block-size: 1.5px;
  background: var(--text);
  margin-inline: auto;
  transition: transform var(--d-base) var(--ease), opacity var(--d-fast) var(--ease);
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

@media (max-width: 1024px) {
  .burger { display: flex; }
  .nav {
    position: fixed;
    inset-block-start: 4.25rem;
    inset-inline: 0;
    inset-block-end: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--surface);
    border-block-start: var(--win-frame) solid var(--line);
    padding: var(--s-5) var(--gutter) var(--s-9);
    margin: 0;
    overflow-y: auto;
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--d-base) var(--ease),
                transform var(--d-base) var(--ease),
                visibility var(--d-base);
  }
  .nav[data-open="true"] { opacity: 1; visibility: visible; transform: translateY(0); }
  .nav__link {
    padding: var(--s-5) 0;
    font-size: var(--t-h4);
    font-family: var(--font-display);
    font-weight: var(--w-bold);
    color: var(--text);
    border-block-end: var(--win-frame) solid var(--line);
    border-radius: 0;
  }
  .nav__link[aria-current="page"]::after { display: none; }
  .nav__link[aria-current="page"] { color: var(--accent); }
  .header__actions .btn--primary { display: none; }
  .nav__cta { margin-block-start: var(--s-6); }
}
@media (min-width: 1025px) { .nav__cta { display: none; } }

/* ==========================================================================
   HERO
   ========================================================================== */

.hero {
  position: relative;
  background: var(--c-navy-900);
  color: var(--text-invert);
  padding-block: clamp(8rem, 6rem + 10vw, 12rem) var(--section-y);
  overflow: hidden;
  isolation: isolate;
}
.hero__bg { position: absolute; inset: 0; z-index: -2; }
.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to var(--grad-dir, right),
    rgba(5,18,31,0.94) 0%,
    rgba(5,18,31,0.80) 45%,
    rgba(5,18,31,0.42) 100%);
}
[dir="rtl"] .hero__bg::after { --grad-dir: left; }

/* A faint architectural grid across the whole hero - the window motif at
   environmental scale. */
.hero__mullions {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.045) 0 1px, transparent 1px 12.5%),
    repeating-linear-gradient(0deg,  rgba(255,255,255,0.045) 0 1px, transparent 1px 33.333%);
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(var(--s-7), 4vw, var(--s-11));
  align-items: center;
}
@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__art { display: none; }
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--t-micro);
  font-weight: var(--w-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-invert);
  border: var(--win-frame) solid rgba(42,196,180,0.32);
  border-radius: var(--r-pill);
  padding: var(--s-2) var(--s-4);
  margin-block-end: var(--s-6);
}
[dir="rtl"] .hero__eyebrow { text-transform: none; letter-spacing: 0.02em; }
.hero__eyebrow i {
  inline-size: 6px; block-size: 6px; border-radius: 50%;
  background: var(--accent-invert); flex: none;
}

.hero h1 { margin-block-end: var(--s-5); }
.hero__sub {
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 1rem + 0.9vw, 1.625rem);
  font-weight: var(--w-medium);
  letter-spacing: -0.01em;
  color: var(--premium-invert);
  margin-block-end: var(--s-6);
}
.hero__desc {
  font-size: var(--t-lead);
  line-height: var(--lh-normal);
  color: var(--text-invert-muted);
  max-width: 46ch;
  margin-block-end: var(--s-8);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-4); }

/* Hero art - three stacked window panels, offset, revealing "through" to
   different fills. This is the signature composition. */
.hero__art { position: relative; }
.hero__stack {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
  align-items: end;
}
.hero__stack .window { background: transparent; border-color: rgba(255,255,255,0.16); }
.hero__stack .window:nth-child(1) { transform: translateY(var(--s-7)); }
.hero__stack .window:nth-child(3) { transform: translateY(calc(var(--s-6) * -1)); }
.hero__stack .window__pane { aspect-ratio: var(--win-ratio-tall); }

/* Service strip beneath the hero */
.strip {
  border-block-start: var(--win-frame) solid rgba(255,255,255,0.12);
  margin-block-start: var(--section-y-tight);
  padding-block-start: var(--s-6);
}
.strip__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4) var(--s-6);
  font-family: var(--font-display);
  font-size: var(--t-small);
  font-weight: var(--w-semibold);
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.72);
}
.strip__list li { display: flex; align-items: center; gap: var(--s-6); }
.strip__list li:not(:last-child)::after {
  content: "";
  inline-size: 4px; block-size: 4px;
  border-radius: 50%;
  background: var(--accent-invert);
  opacity: 0.7;
}

/* ==========================================================================
   PAGE HEADER (inner pages)
   ========================================================================== */

.pagehead {
  position: relative;
  background: var(--c-navy-800);
  color: var(--text-invert);
  padding-block: clamp(7.5rem, 6rem + 8vw, 10.5rem) var(--section-y-tight);
  overflow: hidden;
  isolation: isolate;
}
.pagehead__mullions {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 16.666%),
    repeating-linear-gradient(0deg,  rgba(255,255,255,0.04) 0 1px, transparent 1px 50%);
}
.pagehead__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.7fr);
  gap: clamp(var(--s-6), 4vw, var(--s-10));
  align-items: end;
}
@media (max-width: 860px) { .pagehead__grid { grid-template-columns: 1fr; } }
.pagehead h1 { margin-block-end: var(--s-5); }
.pagehead .lead { color: var(--text-invert-muted); max-width: 52ch; }

.crumbs {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--t-micro);
  color: var(--c-navy-400);
  margin-block-end: var(--s-6);
}
.crumbs a:hover { color: var(--c-white); }
.crumbs span[aria-hidden] { opacity: 0.5; }
[dir="rtl"] .crumbs span[aria-hidden] { transform: scaleX(-1); }

/* ==========================================================================
   CARDS
   ========================================================================== */

.grid { display: grid; gap: var(--s-5); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1024px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}

/* Service card - a window you look through, with the frame lifting on hover.
   The --mx/--my custom properties are set by JS for the cursor response. */
.scard {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: var(--win-frame) solid var(--line);
  overflow: hidden;
  transition: transform var(--d-base) var(--ease),
              box-shadow var(--d-base) var(--ease),
              border-color var(--d-base) var(--ease);
}
.scard:hover {
  transform: translateY(-6px);
  box-shadow: var(--e-2);
  border-color: var(--c-navy-600);
}
.scard__pane {
  position: relative;
  aspect-ratio: var(--win-ratio-landscape);
  overflow: hidden;
  background: var(--c-navy-800);
}
.scard__pane .fill {
  transition: transform var(--d-slow) var(--ease-out);
  transform: scale(1.01);
}
.scard:hover .scard__pane .fill { transform: scale(1.07); }
.scard__num {
  position: absolute;
  inset-block-start: var(--s-4);
  inset-inline-start: var(--s-4);
  z-index: 3;
  font-family: var(--font-display);
  font-size: var(--t-micro);
  font-weight: var(--w-bold);
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.68);
}
.scard__body {
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  flex: 1;
}
.scard__body h3 { color: var(--text); }
.scard__body p { color: var(--text-muted); font-size: var(--t-small); flex: 1; }
.scard__tags {
  display: flex; flex-wrap: wrap; gap: var(--s-2);
  margin-block-start: var(--s-2);
}
.scard__foot { margin-block-start: var(--s-4); }

.tag {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: var(--w-semibold);
  letter-spacing: 0.04em;
  color: var(--text-muted);
  background: var(--ground-alt);
  border: var(--win-frame) solid var(--line);
  border-radius: var(--r-pill);
  padding: 0.28rem 0.6rem;
}
.tag--accent { color: var(--accent); background: var(--c-teal-100); border-color: transparent; }
.tag--premium { color: var(--premium); background: var(--c-amber-200); border-color: transparent; }

/* Audience pathway card - flat, typographic, with a sliding accent edge. */
.pcard {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-7) var(--s-6);
  background: var(--surface);
  border: var(--win-frame) solid var(--line);
  overflow: hidden;
  transition: background var(--d-base) var(--ease), border-color var(--d-base) var(--ease);
}
.pcard::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: 3px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--d-base) var(--ease);
}
[dir="rtl"] .pcard::before { transform-origin: top; }
.pcard:hover::before { transform: scaleY(1); }
.pcard:hover { border-color: var(--c-navy-600); }
.pcard__icon {
  inline-size: 2.5rem; block-size: 2.5rem;
  color: var(--accent);
}
.pcard__icon svg { inline-size: 100%; block-size: 100%; stroke: currentColor; fill: none; stroke-width: 1.25; }
.pcard p { font-size: var(--t-small); color: var(--text-muted); flex: 1; }
.pcard ul { display: flex; flex-direction: column; gap: var(--s-2); }
.pcard ul li {
  font-size: var(--t-small);
  color: var(--text-muted);
  padding-inline-start: var(--s-5);
  position: relative;
}
.pcard ul li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.6em;
  inline-size: var(--s-3);
  block-size: var(--win-frame);
  background: var(--accent);
}

/* Insight / article card */
.icard {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: var(--win-frame) solid var(--line);
  overflow: hidden;
  transition: transform var(--d-base) var(--ease), box-shadow var(--d-base) var(--ease);
}
.icard:hover { transform: translateY(-4px); box-shadow: var(--e-1); }
.icard__pane { position: relative; aspect-ratio: var(--win-ratio-panorama); overflow: hidden; background: var(--c-navy-800); }
.icard__body { padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); flex: 1; }
.icard__meta {
  display: flex; align-items: center; gap: var(--s-3);
  font-size: var(--t-micro); color: var(--text-faint);
}
.icard__meta .tag { padding: 0.2rem 0.5rem; }
.icard h3 { font-size: var(--t-h4); }
.icard p { font-size: var(--t-small); color: var(--text-muted); flex: 1; }

/* Programme module card - numbered, list-like, for curriculum */
.mod {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: var(--s-5);
  padding-block: var(--s-6);
  border-block-end: var(--win-frame) solid var(--line);
  align-items: start;
}
.mod:last-child { border-block-end: 0; }
.mod__num {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: var(--w-extra);
  color: var(--line);
  letter-spacing: -0.03em;
  line-height: 1;
}
.mod h4 { margin-block-end: var(--s-2); }
.mod p { font-size: var(--t-small); color: var(--text-muted); }
.mod__tags { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-block-start: var(--s-3); }
@media (max-width: 600px) {
  .mod { grid-template-columns: 1fr; gap: var(--s-2); }
  .mod__num { font-size: var(--t-h4); }
}

/* Testimonial */
.quote {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  padding: var(--s-7);
  background: var(--surface);
  border: var(--win-frame) solid var(--line);
}
.section--invert .quote { background: var(--surface-invert); border-color: var(--line-invert); }
.quote__mark {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: var(--w-extra);
  line-height: 0.6;
  color: var(--premium);
  height: 1.5rem;
}
.section--invert .quote__mark { color: var(--premium-invert); }
.quote blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--t-h4);
  font-weight: var(--w-medium);
  line-height: var(--lh-normal);
  letter-spacing: -0.012em;
  flex: 1;
}
.quote figcaption { display: flex; align-items: center; gap: var(--s-4); }
.quote__avatar {
  inline-size: 2.75rem; block-size: 2.75rem;
  border-radius: 50%;
  flex: none;
  position: relative;
  overflow: hidden;
  background: var(--c-navy-700);
}
.quote__who { font-size: var(--t-small); font-weight: var(--w-semibold); }
.quote__role { font-size: var(--t-micro); color: var(--text-faint); }
.section--invert .quote__role { color: var(--c-navy-400); }

/* Partner logo plate. Designed to look composed while empty - each plate is
   a small window with a wordmark placeholder, so the section never reads as
   a broken image grid before real logos arrive. */
.logos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  border: var(--win-frame) solid var(--line);
  border-inline-end: 0;
  border-block-end: 0;
}
.logos__cell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-block-size: 6.5rem;
  padding: var(--s-5);
  border-inline-end: var(--win-frame) solid var(--line);
  border-block-end: var(--win-frame) solid var(--line);
  transition: background var(--d-base) var(--ease);
}
.logos__cell:hover { background: var(--surface); }
.logos__cell span {
  font-family: var(--font-display);
  font-size: var(--t-small);
  font-weight: var(--w-bold);
  letter-spacing: 0.02em;
  color: var(--text-faint);
  text-align: center;
  transition: color var(--d-base) var(--ease);
}
.logos__cell:hover span { color: var(--text); }

/* ==========================================================================
   JOURNEY / PROCESS
   ========================================================================== */

.journey {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border-block-start: var(--win-frame) solid var(--line);
}
.section--invert .journey { border-block-start-color: var(--line-invert); }
@media (max-width: 900px) { .journey { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .journey { grid-template-columns: 1fr; } }

.jstep {
  padding: var(--s-7) var(--s-5) var(--s-7) 0;
  padding-inline-end: var(--s-5);
  position: relative;
}
.jstep:not(:last-child) { border-inline-end: var(--win-frame) solid var(--line); }
.section--invert .jstep:not(:last-child) { border-inline-end-color: var(--line-invert); }
@media (max-width: 900px) {
  .jstep:nth-child(2n) { border-inline-end: 0; }
  .jstep:nth-child(-n+2) { border-block-end: var(--win-frame) solid var(--line); }
}
@media (max-width: 520px) {
  .jstep { border-inline-end: 0 !important; border-block-end: var(--win-frame) solid var(--line); }
  .jstep:last-child { border-block-end: 0; }
}
.jstep__num {
  font-family: var(--font-display);
  font-size: var(--t-micro);
  font-weight: var(--w-bold);
  letter-spacing: 0.14em;
  color: var(--accent);
  margin-block-end: var(--s-4);
}
.section--invert .jstep__num { color: var(--accent-invert); }
/* The marker sits on the top rule - a node on the timeline. */
.jstep__num::before {
  content: "";
  position: absolute;
  inset-block-start: -4px;
  inset-inline-start: 0;
  inline-size: 7px; block-size: 7px;
  background: var(--accent);
  border-radius: 50%;
}
.section--invert .jstep__num::before { background: var(--accent-invert); }
.jstep h3 { font-size: var(--t-h4); margin-block-end: var(--s-3); }
.jstep p { font-size: var(--t-small); color: var(--text-muted); }

/* Arrow chain — Learn → Experience → Connect → Grow */
.chain {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4);
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 1rem + 0.7vw, 1.5rem);
  font-weight: var(--w-bold);
  letter-spacing: -0.02em;
}
.chain li { display: flex; align-items: center; gap: var(--s-4); }
.chain li:not(:last-child)::after {
  content: "";
  inline-size: var(--s-6);
  block-size: var(--win-frame);
  background: var(--premium-invert);
  position: relative;
}
.chain li:nth-child(1) { color: var(--c-white); }
.chain li:nth-child(2) { color: rgba(255,255,255,0.86); }
.chain li:nth-child(3) { color: var(--accent-invert); }
.chain li:nth-child(4) { color: var(--premium-invert); }

/* ==========================================================================
   STATS / COUNTERS
   ========================================================================== */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--s-6);
}
.stat__val {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 2rem + 2.6vw, 4rem);
  font-weight: var(--w-extra);
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--text);
  display: flex;
  align-items: baseline;
  gap: 0.05em;
}
.section--invert .stat__val { color: var(--c-white); }
.stat__val sup {
  font-size: 0.42em;
  font-weight: var(--w-bold);
  color: var(--premium);
  top: -0.9em;
  letter-spacing: 0;
}
.section--invert .stat__val sup { color: var(--premium-invert); }
.stat__label {
  font-size: var(--t-small);
  color: var(--text-muted);
  margin-block-start: var(--s-3);
  padding-block-start: var(--s-3);
  border-block-start: var(--win-frame) solid var(--line);
}
.section--invert .stat__label { color: var(--text-invert-muted); border-block-start-color: var(--line-invert); }

/* Placeholder state, for before real impact numbers exist. */
.stat--tbd .stat__val { color: var(--line); }
.section--invert .stat--tbd .stat__val { color: var(--c-navy-600); }

/* ==========================================================================
   SPLIT / FEATURE SECTIONS
   ========================================================================== */

.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(var(--s-7), 5vw, var(--s-11));
  align-items: center;
}
.split--art-first > *:first-child { order: 1; }
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: var(--s-8); }
  .split--art-first > *:first-child { order: 0; }
}

/* Offset window pair — layered grid composition */
.winpair { position: relative; }
.winpair__a { position: relative; z-index: 2; }
.winpair__b {
  position: absolute;
  inset-block-end: calc(var(--s-9) * -1);
  inset-inline-end: calc(var(--s-7) * -1);
  inline-size: 52%;
  z-index: 3;
  box-shadow: var(--e-2);
}
@media (max-width: 900px) {
  .winpair__b { position: relative; inset: auto; inline-size: 70%; margin-block-start: calc(var(--s-7) * -1); margin-inline-start: auto; }
}

/* Feature list with window-tick markers */
.flist { display: flex; flex-direction: column; }
.flist li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-4);
  padding-block: var(--s-5);
  border-block-end: var(--win-frame) solid var(--line);
  align-items: start;
}
.section--invert .flist li { border-block-end-color: var(--line-invert); }
.flist li:last-child { border-block-end: 0; }
.flist__mark {
  inline-size: 1.5rem; block-size: 1.5rem;
  border: var(--win-frame) solid var(--accent);
  position: relative;
  flex: none;
  margin-block-start: 0.15rem;
}
.flist__mark::before, .flist__mark::after {
  content: ""; position: absolute; background: var(--accent); opacity: 0.55;
}
.flist__mark::before { inset-block: 0; inset-inline-start: 50%; inline-size: var(--win-frame); }
.flist__mark::after { inset-inline: 0; inset-block-start: 50%; block-size: var(--win-frame); }
.section--invert .flist__mark { border-color: var(--accent-invert); }
.section--invert .flist__mark::before, .section--invert .flist__mark::after { background: var(--accent-invert); }
.flist h4 { margin-block-end: var(--s-2); }
.flist p { font-size: var(--t-small); color: var(--text-muted); }
.section--invert .flist p { color: var(--text-invert-muted); }

/* ==========================================================================
   FINAL CTA
   ========================================================================== */

.cta {
  position: relative;
  background: var(--c-navy-900);
  color: var(--text-invert);
  overflow: hidden;
  isolation: isolate;
}
.cta__mullions {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 10%),
    repeating-linear-gradient(0deg,  rgba(255,255,255,0.05) 0 1px, transparent 1px 25%);
}
.cta__glow {
  position: absolute;
  z-index: -1;
  inset-block-start: -30%;
  inset-inline-end: -10%;
  inline-size: 55rem; block-size: 55rem;
  background: radial-gradient(circle, rgba(18,168,153,0.22) 0%, transparent 62%);
  pointer-events: none;
}
.cta__inner {
  padding-block: clamp(5rem, 4rem + 6vw, 8.5rem);
  text-align: center;
  max-width: 62ch;
  margin-inline: auto;
}
.cta h2 { margin-block-end: var(--s-5); }
.cta p { color: var(--text-invert-muted); font-size: var(--t-lead); line-height: var(--lh-normal); margin-block-end: var(--s-8); }
.cta__actions { display: flex; flex-wrap: wrap; gap: var(--s-4); justify-content: center; }

/* ==========================================================================
   FORMS
   ========================================================================== */

.form { display: flex; flex-direction: column; gap: var(--s-5); }
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
@media (max-width: 620px) { .form__row { grid-template-columns: 1fr; } }

.field { display: flex; flex-direction: column; gap: var(--s-2); }
.field label {
  font-size: var(--t-small);
  font-weight: var(--w-semibold);
  color: var(--text);
}
.field label .req { color: var(--premium); }
.field .hint { font-size: var(--t-micro); color: var(--text-faint); }

.input, .select, .textarea {
  font: inherit;
  font-size: var(--t-small);
  color: var(--text);
  background: var(--surface);
  border: var(--win-frame) solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-4);
  inline-size: 100%;
  transition: border-color var(--d-fast) var(--ease), box-shadow var(--d-fast) var(--ease);
}
.input::placeholder, .textarea::placeholder { color: var(--text-faint); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--focus);
  box-shadow: 0 0 0 3px rgba(18,168,153,0.15);
}
.textarea { min-block-size: 8rem; resize: vertical; }
.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%234C5F6E' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--s-4) center;
  background-size: 12px;
  padding-inline-end: var(--s-9);
}
[dir="rtl"] .select { background-position: left var(--s-4) center; }

/* Choice chips - lets a visitor self-identify without a dropdown */
.chips { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.chip span {
  display: block;
  font-size: var(--t-small);
  font-weight: var(--w-medium);
  padding: var(--s-3) var(--s-5);
  border: var(--win-frame) solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--text-muted);
  transition: all var(--d-fast) var(--ease);
}
.chip input:hover + span { border-color: var(--c-navy-400); color: var(--text); }
.chip input:checked + span {
  background: var(--c-navy-800);
  border-color: var(--c-navy-800);
  color: var(--text-invert);
}
.chip input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }

/* GDPR consent - deliberately explicit, unticked by default, purpose stated */
.consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-4);
  padding: var(--s-5);
  background: var(--ground-alt);
  border: var(--win-frame) solid var(--line);
  border-radius: var(--r-md);
}
.consent input[type="checkbox"] {
  inline-size: 1.15rem; block-size: 1.15rem;
  margin-block-start: 0.15rem;
  accent-color: var(--c-teal-600);
  flex: none;
}
.consent p { font-size: var(--t-micro); color: var(--text-muted); line-height: var(--lh-normal); }
.consent a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

/* ==========================================================================
   ACCORDION (FAQ)
   ========================================================================== */

.acc { border-block-start: var(--win-frame) solid var(--line); }
.acc__item { border-block-end: var(--win-frame) solid var(--line); }
.acc__btn {
  inline-size: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  padding: var(--s-6) 0;
  background: transparent;
  border: 0;
  text-align: start;
  font-family: var(--font-display);
  font-size: var(--t-h4);
  font-weight: var(--w-bold);
  letter-spacing: -0.012em;
  color: var(--text);
}
.acc__btn:hover { color: var(--accent); }
.acc__sign {
  position: relative;
  inline-size: 1.25rem; block-size: 1.25rem;
  flex: none;
}
.acc__sign::before, .acc__sign::after {
  content: ""; position: absolute; background: var(--accent);
  transition: transform var(--d-base) var(--ease), opacity var(--d-base) var(--ease);
}
.acc__sign::before { inset-inline: 0; inset-block-start: 50%; block-size: 1.5px; }
.acc__sign::after  { inset-block: 0; inset-inline-start: 50%; inline-size: 1.5px; }
.acc__btn[aria-expanded="true"] .acc__sign::after { transform: scaleY(0); }
.acc__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--d-base) var(--ease);
}
.acc__panel[data-open="true"] { grid-template-rows: 1fr; }
.acc__panel > div { overflow: hidden; }
.acc__panel p {
  font-size: var(--t-small);
  color: var(--text-muted);
  padding-block-end: var(--s-6);
  max-width: 62ch;
}

/* ==========================================================================
   FILTER BAR (Insights)
   ========================================================================== */

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  padding-block-end: var(--s-6);
  border-block-end: var(--win-frame) solid var(--line);
  margin-block-end: var(--s-8);
}
.filter {
  font-size: var(--t-small);
  font-weight: var(--w-medium);
  padding: var(--s-3) var(--s-5);
  border: var(--win-frame) solid var(--line);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--text-muted);
  transition: all var(--d-fast) var(--ease);
}
.filter:hover { border-color: var(--c-navy-400); color: var(--text); }
.filter[aria-pressed="true"] {
  background: var(--c-navy-800);
  border-color: var(--c-navy-800);
  color: var(--text-invert);
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.footer {
  background: var(--c-navy-900);
  color: var(--text-invert-muted);
  padding-block: var(--s-11) var(--s-7);
  font-size: var(--t-small);
}
.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: var(--s-8) var(--s-6);
  padding-block-end: var(--s-9);
  border-block-end: var(--win-frame) solid var(--line-invert);
}
@media (max-width: 900px) { .footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .footer__top { grid-template-columns: 1fr; } }

.footer .logo { color: var(--c-white); margin-block-end: var(--s-5); }
.footer__blurb { max-width: 34ch; line-height: var(--lh-normal); }
.footer h4, .footer .foot-h {
  color: var(--c-white);
  font-size: var(--t-micro);
  font-weight: var(--w-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-block-end: var(--s-5);
}
[dir="rtl"] .footer h4, .footer .foot-h { text-transform: none; letter-spacing: 0.02em; }
.footer ul { display: flex; flex-direction: column; gap: var(--s-3); }
.footer a { transition: color var(--d-fast) var(--ease); }
.footer a:hover { color: var(--c-white); }
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding-block-start: var(--s-6);
  font-size: var(--t-micro);
  color: var(--c-navy-400);
}
.footer__legal { display: flex; flex-wrap: wrap; gap: var(--s-5); }

/* ==========================================================================
   SCROLL REVEAL
   Opacity + a short translate. The window variant animates a clip-path so
   the frame appears to open - used sparingly on hero and feature art.
   ========================================================================== */

[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity var(--d-reveal) var(--ease-out),
              transform var(--d-reveal) var(--ease-out);
  transition-delay: var(--delay, 0ms);
}
[data-reveal].is-in { opacity: 1; transform: none; }

[data-reveal="open"] {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 100% 0);
  transition: clip-path var(--d-reveal) var(--ease-out);
  transition-delay: var(--delay, 0ms);
}
[data-reveal="open"].is-in { clip-path: inset(0 0 0 0); }

/* Progressive text - each line rises independently. */
[data-reveal="lines"] > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--d-slow) var(--ease-out), transform var(--d-slow) var(--ease-out);
}
[data-reveal="lines"].is-in > * { opacity: 1; transform: none; }
[data-reveal="lines"].is-in > *:nth-child(1) { transition-delay: 0ms; }
[data-reveal="lines"].is-in > *:nth-child(2) { transition-delay: 90ms; }
[data-reveal="lines"].is-in > *:nth-child(3) { transition-delay: 180ms; }
[data-reveal="lines"].is-in > *:nth-child(4) { transition-delay: 270ms; }
[data-reveal="lines"].is-in > *:nth-child(5) { transition-delay: 360ms; }
[data-reveal="lines"].is-in > *:nth-child(6) { transition-delay: 450ms; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal], [data-reveal="lines"] > * { opacity: 1; transform: none; }
  [data-reveal="open"] { clip-path: none; }
}

/* ==========================================================================
   UTILITIES
   ========================================================================== */

.stack > * + * { margin-block-start: var(--s-5); }
.stack-lg > * + * { margin-block-start: var(--s-8); }
.center { text-align: center; margin-inline: auto; }
.mw-sm { max-width: 44ch; }
.mw-md { max-width: 56ch; }
.mw-lg { max-width: 70ch; }
.mb-0 { margin-block-end: 0; }
.mbe-5 { margin-block-end: var(--s-5); }
.mbe-6 { margin-block-end: var(--s-6); }
.mbe-8 { margin-block-end: var(--s-8); }
.mbe-9 { margin-block-end: var(--s-9); }
.mbs-6 { margin-block-start: var(--s-6); }
.mbs-8 { margin-block-start: var(--s-8); }
.mbs-9 { margin-block-start: var(--s-9); }
.flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.justify-between { justify-content: space-between; }
.gap-3 { gap: var(--s-3); }
.gap-4 { gap: var(--s-4); }
.gap-5 { gap: var(--s-5); }
.gap-6 { gap: var(--s-6); }

/* Section head — heading left, supporting text right. Collapses on mobile. */
.shead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: clamp(var(--s-5), 4vw, var(--s-9));
  align-items: end;
  margin-block-end: var(--s-9);
}
@media (max-width: 860px) { .shead { grid-template-columns: 1fr; align-items: start; gap: var(--s-5); } }

/* Prototype notice bar */
.protobar {
  background: var(--c-navy-800);
  color: var(--text-invert-muted);
  font-size: var(--t-micro);
  padding-block: var(--s-3);
}
.protobar__inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); justify-content: center; text-align: center; }
.protobar strong { color: var(--c-white); font-weight: var(--w-semibold); }
.protobar button {
  background: transparent;
  border: var(--win-frame) solid var(--c-navy-600);
  color: var(--text-invert-muted);
  border-radius: var(--r-pill);
  padding: 0.25rem 0.7rem;
  font-size: 0.6875rem;
  font-weight: var(--w-semibold);
  transition: all var(--d-fast) var(--ease);
}
.protobar button:hover { border-color: var(--c-white); color: var(--c-white); }

/* Print — strip motion, chrome, and dark grounds. */
@media print {
  .header, .protobar, .cta, .footer { display: none; }
  [data-reveal] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .hero, .pagehead { background: none; color: #000; padding-block: 2rem; }
}

/* ==========================================================================
   WORDPRESS BLOCK EDITOR BRIDGE
   The prototype used hand-written markup. WordPress wraps things in its own
   containers, so these rules make core blocks inherit the design system
   instead of fighting it. Everything here maps a core class onto an existing
   component — no new visual decisions.
   ========================================================================== */

/* Query loops are laid out by .grid on the wrapper; the inner list must not
   introduce its own grid or the columns double up. */
.wp-block-post-template {
  display: contents;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Featured images inside cards fill the pane, matching the .fill behaviour. */
.icard__pane img,
.scard__pane img,
.window__pane img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  z-index: 1;
}
.icard__pane figure,
.scard__pane figure,
.window__pane figure { margin: 0; }

/* post-terms renders inline links; style them as tags without extra markup. */
.icard__meta .wp-block-post-terms a,
.scard__tags .wp-block-post-terms a {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: var(--w-semibold);
  letter-spacing: 0.04em;
  color: var(--accent);
  background: var(--c-teal-100);
  border-radius: var(--r-pill);
  padding: 0.2rem 0.5rem;
  margin-inline-end: var(--s-2);
}
.eyebrow.wp-block-post-terms a { color: inherit; background: none; padding: 0; }

/* Core buttons: our .btn classes are applied to the wrapper, so push the
   relevant properties through to the actual anchor. */
.wp-block-button.btn { display: inline-flex; }
.wp-block-button.btn > .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  border-radius: var(--r-pill);
  font-size: var(--t-small);
  font-weight: var(--w-semibold);
  padding: var(--s-4) var(--s-6);
  border: var(--win-frame) solid transparent;
  transition: background var(--d-base) var(--ease), color var(--d-base) var(--ease),
              border-color var(--d-base) var(--ease), transform var(--d-base) var(--ease);
}
.wp-block-button.btn > .wp-block-button__link:hover { transform: translateY(-2px); }
.wp-block-button.btn--primary   > .wp-block-button__link { background: var(--c-navy-800); color: var(--text-invert); }
.wp-block-button.btn--accent    > .wp-block-button__link { background: var(--c-teal-600); color: var(--text-invert); }
.wp-block-button.btn--on-dark   > .wp-block-button__link { background: var(--c-white); color: var(--c-navy-800); }
.wp-block-button.btn--ghost     > .wp-block-button__link { background: transparent; color: var(--text); border-color: var(--line); }
.wp-block-button.btn--ghost-dark> .wp-block-button__link { background: transparent; color: var(--text-invert); border-color: var(--c-navy-400); }
.wp-block-button.btn--lg        > .wp-block-button__link { padding: var(--s-5) var(--s-7); font-size: var(--t-body); }

/* Columns used for the footer and page-head grids should not add their own gap
   on top of the component's. */
.footer__top.wp-block-columns,
.pagehead__grid.wp-block-columns { gap: var(--s-8) var(--s-6); margin-block-end: 0; }
@media (max-width: 781px) {
  .pagehead__grid.wp-block-columns { gap: var(--s-6); }
}

/* Navigation block, restyled as the site nav. */
.wp-block-navigation .wp-block-navigation-item__content {
  padding: var(--s-3) var(--s-4);
  font-size: var(--t-small);
  font-weight: var(--w-medium);
  color: var(--text-muted);
  text-decoration: none;
}
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content {
  color: var(--text);
  font-weight: var(--w-semibold);
}
.header--on-dark:not(.is-stuck) .wp-block-navigation .wp-block-navigation-item__content { color: rgba(255,255,255,0.82); }
.header--on-dark:not(.is-stuck) .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content { color: var(--c-white); }

/* Site title reuses the logo wordmark treatment. */
.wp-block-site-title { font-family: var(--font-display); font-weight: var(--w-extra); letter-spacing: -0.03em; }
.wp-block-site-title a { text-decoration: none; }

/* Pagination */
.wp-block-query-pagination {
  grid-column: 1 / -1;
  display: flex;
  gap: var(--s-3);
  justify-content: center;
  margin-block-start: var(--s-9);
  padding-block-start: var(--s-6);
  border-block-start: var(--win-frame) solid var(--line);
}
.wp-block-query-pagination a,
.wp-block-query-pagination span {
  padding: var(--s-3) var(--s-4);
  border: var(--win-frame) solid var(--line);
  border-radius: var(--r-pill);
  font-size: var(--t-small);
  text-decoration: none;
  color: var(--text-muted);
}
.wp-block-query-pagination .current {
  background: var(--c-navy-800);
  border-color: var(--c-navy-800);
  color: var(--text-invert);
}

/* Editor canvas: reproduce the page ground so what editors see matches. */
.editor-styles-wrapper { background: var(--ground); }

/* ==========================================================================
   v1.0.1 CORRECTIONS
   Found by testing the theme on a real install. Kept as a clearly marked block
   rather than edited inline, so the diff against v1.0.0 is readable.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Button wrapper painted a background it should never have had.

   In the prototype `.btn--primary` was the anchor itself. WordPress puts that
   class on the wrapper <div> and the real link is `.wp-block-button__link`
   inside it. The on-dark override therefore filled the wrapper white while the
   inner link stayed navy — producing a white pill floating behind the button.

   Rule: wrappers never paint. Only the anchor does.
   -------------------------------------------------------------------------- */
.wp-block-button.btn,
.header--on-dark:not(.is-stuck) .wp-block-button.btn--primary,
.header--on-dark:not(.is-stuck) .wp-block-button.btn--accent {
  background: none;
  border: 0;
}

.header--on-dark:not(.is-stuck) .wp-block-button.btn--primary > .wp-block-button__link {
  background: var(--c-white);
  color: var(--c-navy-800);
}
.header--on-dark:not(.is-stuck) .wp-block-button.btn--primary > .wp-block-button__link:hover {
  background: var(--c-ivory-100);
}

/* --------------------------------------------------------------------------
   2. Buttons stretched to the full height of the header.

   WordPress flex layout leaves items stretching, so a 59px link sat inside a
   92px wrapper and overflowed the header band.
   -------------------------------------------------------------------------- */
.header__actions,
.header__actions .wp-block-buttons,
.header__actions .wp-block-button {
  align-items: center;
  align-self: center;
}
.header__actions .wp-block-button > .wp-block-button__link {
  padding-block: var(--s-3);
  line-height: 1.2;
}

/* --------------------------------------------------------------------------
   3. Hero was 1190px tall, pushing both calls to action below the fold.

   The headline max of 6.5rem was set for a wide desktop mock and wrapped to
   three lines in a real browser window. 4.75rem keeps the same presence and
   fits on two lines, and the reduced top padding brings the CTAs into view on
   a standard laptop.
   -------------------------------------------------------------------------- */
:root {
  --t-hero: clamp(2.5rem, 1.35rem + 4.1vw, 4.75rem);
}
.hero {
  padding-block: clamp(6.5rem, 5rem + 5vw, 8.5rem) var(--section-y-tight);
}
.hero__desc { max-width: 42ch; }

/* --------------------------------------------------------------------------
   4. Above-the-fold content must not animate in.

   The hero is the Largest Contentful Paint element. Fading it from opacity 0
   over 900ms means the browser records LCP at the end of the animation, and a
   visitor briefly sees an empty navy panel. Everything below the fold keeps
   its reveal; the hero renders immediately.
   -------------------------------------------------------------------------- */
.hero [data-reveal],
.hero [data-reveal="lines"] > *,
.pagehead [data-reveal],
.pagehead [data-reveal="lines"] > * {
  opacity: 1;
  transform: none;
  clip-path: none;
  transition: none;
}
/* The window panels are decorative, so they may still open. */
.hero__stack [data-reveal="open"] {
  clip-path: inset(0 0 100% 0);
  transition: clip-path var(--d-reveal) var(--ease-out);
}
.hero__stack [data-reveal="open"].is-in { clip-path: inset(0 0 0 0); }

/* --------------------------------------------------------------------------
   5. Safety net: if JavaScript fails, content must still be readable.

   [data-reveal] starts at opacity 0. Without this, a JS error anywhere on the
   page leaves most of the site invisible. site.js sets .js on <html> on boot,
   so the reveal styles only apply once we know JS is running.
   -------------------------------------------------------------------------- */
html:not(.js) [data-reveal],
html:not(.js) [data-reveal="lines"] > * {
  opacity: 1 !important;
  transform: none !important;
  clip-path: none !important;
}


/* ==========================================================================
   v1.0.2 CORRECTIONS
   ========================================================================== */

/* 1. The fixed header sat underneath the WordPress admin bar. Only logged-in
      users saw it, which is why it survived testing — but every editor and
      client reviewing the site saw a broken header. */
.admin-bar .header { inset-block-start: var(--wp-admin--admin-bar--height, 32px); }
@media screen and (max-width: 782px) {
  .admin-bar .header { inset-block-start: 46px; }
}

/* 2. Seven navigation items wrapped onto a second line, breaking the header
      band. Nowrap plus tighter padding keeps them on one row until the mobile
      overlay takes over. */
.header .wp-block-navigation { flex-wrap: nowrap; }
.header .wp-block-navigation .wp-block-navigation-item__content {
  padding-inline: var(--s-3);
  white-space: nowrap;
}
@media (min-width: 1025px) and (max-width: 1240px) {
  .header .wp-block-navigation .wp-block-navigation-item__content {
    padding-inline: var(--s-2);
    font-size: var(--t-micro);
  }
}

/* 3. Mobile overlay: let the core overlay own its positioning and background
      instead of fighting the theme's desktop nav rules. */
@media (max-width: 1024px) {
  .header .wp-block-navigation__responsive-container.is-menu-open {
    background: var(--surface);
    padding-block-start: var(--s-9);
  }
  .header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
    font-size: var(--t-h4);
    font-family: var(--font-display);
    font-weight: var(--w-bold);
    color: var(--text);
    padding-block: var(--s-4);
  }
}


/* ==========================================================================
   CONTACT FORM 7 BRIDGE
   CF7 wraps every control in its own spans. These rules map that output onto
   the existing form components so the rendered form matches the design, and so
   validation states use the brand palette rather than CF7's defaults.
   ========================================================================== */

.wpcf7-form-control-wrap { display: block; }
.wpcf7 form.wpcf7-form p { margin: 0; }
.wpcf7 .input, .wpcf7 .select, .wpcf7 .textarea { max-inline-size: 100%; }

/* Chips: CF7 renders choices as span.wpcf7-list-item > label > input + span.
   Hide the native control, style the label. */
.chips .wpcf7-form-control { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.chips .wpcf7-list-item { margin: 0; }
.chips .wpcf7-list-item > label { display: block; cursor: pointer; margin: 0; }
.chips .wpcf7-list-item input[type="radio"],
.chips .wpcf7-list-item input[type="checkbox"] {
  position: absolute; opacity: 0; inline-size: 1px; block-size: 1px;
}
.chips .wpcf7-list-item-label {
  display: block;
  font-size: var(--t-small);
  font-weight: var(--w-medium);
  padding: var(--s-3) var(--s-5);
  border: var(--win-frame) solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--text-muted);
  transition: background var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease), color var(--d-fast) var(--ease);
}
.chips .wpcf7-list-item > label:hover .wpcf7-list-item-label { border-color: var(--c-navy-400); color: var(--text); }
.chips .wpcf7-list-item input:checked + .wpcf7-list-item-label {
  background: var(--c-navy-800); border-color: var(--c-navy-800); color: var(--text-invert);
}
.chips .wpcf7-list-item input:focus-visible + .wpcf7-list-item-label {
  outline: 2px solid var(--focus); outline-offset: 2px;
}

/* Consent: real checkbox, unticked by default, purpose stated. */
.consent .wpcf7-form-control { display: block; }
.consent .wpcf7-list-item { margin: 0; }
.consent .wpcf7-list-item > label {
  display: grid; grid-template-columns: auto 1fr; gap: var(--s-4); align-items: start; cursor: pointer;
}
.consent .wpcf7-list-item input[type="checkbox"] {
  inline-size: 1.15rem; block-size: 1.15rem; margin-block-start: 0.15rem; accent-color: var(--c-teal-600); flex: none;
}
.consent .wpcf7-list-item-label { font-size: var(--t-micro); color: var(--text-muted); line-height: var(--lh-normal); }

/* Submit + spinner */
.wpcf7 input[type="submit"].btn { inline-size: 100%; border: 0; cursor: pointer; }
.wpcf7 .wpcf7-spinner { margin-inline-start: var(--s-4); background-color: var(--accent); }

/* Validation and response messages in the brand palette. */
.wpcf7 .wpcf7-not-valid-tip {
  display: block; font-size: var(--t-micro); font-weight: var(--w-medium); color: #A5321F; margin-block-start: var(--s-2);
}
.wpcf7 .input.wpcf7-not-valid, .wpcf7 .textarea.wpcf7-not-valid, .wpcf7 .select.wpcf7-not-valid {
  border-color: #A5321F; box-shadow: 0 0 0 3px rgba(165, 50, 31, 0.12);
}
.wpcf7 .wpcf7-response-output {
  margin: var(--s-6) 0 0; padding: var(--s-5);
  border: var(--win-frame) solid var(--line); border-radius: var(--r-md);
  font-size: var(--t-small); line-height: var(--lh-normal); background: var(--ground-alt);
}
.wpcf7 form.sent .wpcf7-response-output { border-color: var(--accent); background: var(--c-teal-100); color: var(--c-navy-800); }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output { border-color: var(--premium); background: var(--c-amber-200); color: var(--c-navy-800); }
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output { border-color: #A5321F; background: #FBEAE6; color: #6E1F13; }

.wpcf7 .screen-reader-response {
  position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%);
}