/*
Theme Name: Inscora
Theme URI: https://inscora.com
Author: Inscora
Version: 1.1.1
Text Domain: inscora
*/

/* ─── Figma Scale Tokens (exact values from design file) ────────────
   Scale/8=8  Scale/12=12  Scale/16=16  Scale/20=20  Scale/24=24
   Scale/32=32  Scale/40=40  Scale/48=48  Scale/64=64
   Scale/96=96  Scale/160=160  Scale/320=320
────────────────────────────────────────────────────────────────── */
:root {
  --white:           #ffffff;
  --black:           #151a1f;
  --grey-50:         #f9fafa;
  --grey-100:        #f1f1f2;
  --grey-200:        #e6e7e9;
  --grey-300:        #d2d4d7;
  --grey-600:        #4d5560;
  --grey-900:        #141a23;
  --primary-400:     #0066ff;
  --primary-700:     #0048b2;
  --secondary-700:   #003087;
  --accent-400:      #82c91e;
  --surface-page:    #151a1f;

  --font-serif:      'PT Serif', Georgia, serif;
  --font-sans:       'DM Sans', sans-serif;
  --font-display:    'Donegal One', Georgia, serif;

  /* Exact Figma scale values */
  --scale-8:   8px;
  --scale-12:  12px;
  --scale-16:  16px;
  --scale-20:  20px;
  --scale-24:  24px;
  --scale-32:  32px;
  --scale-40:  40px;
  --scale-48:  48px;
  --scale-64:  64px;
  --scale-96:  96px;
  --scale-160: 160px;
  --scale-320: 320px;

  /* Horizontal page padding — 240px desktop, 96px tablet, 32px mobile */
  --px: 160px;          /* desktop 1201–1439px */

  --radius-sm:       16px;
  --radius-md:       24px;
  --radius-pill:     40px;
  --radius-card-top: 32px;
}

/* ─── Reset ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  background: var(--white);
  color: var(--black);
  -webkit-font-smoothing: antialiased;
  /* Prevent WP from adding side padding to body */
  padding: 0 !important;
  margin: 0 !important;
}
img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
p { margin: 0; }

/* ─── Typography ─────────────────────────────────────────────────── */
.h1 {
  font-family: var(--font-serif); font-size: 96px; font-weight: 400;
  line-height: 1.1; letter-spacing: -0.96px;
}
.h2 {
  font-family: var(--font-serif); font-size: 60px; font-weight: 400;
  line-height: 1.2; letter-spacing: -0.6px;
}
.h3 {
  font-family: var(--font-serif); font-size: 44px; font-weight: 400;
  line-height: 1.2; letter-spacing: -0.44px;
}
.lead         { font-family: var(--font-sans); font-size: 24px; font-weight: 400; line-height: 1.3; }
.body-xl      { font-family: var(--font-sans); font-size: 20px; font-weight: 400; line-height: 1.4; }
.body-xl-med  { font-family: var(--font-sans); font-size: 20px; font-weight: 500; line-height: 1.4; }
.card-title   { font-family: var(--font-display); font-size: 24px; font-weight: 400; line-height: 1.3; }
.body-default { font-family: var(--font-sans); font-size: 16px; font-weight: 400; line-height: 1.4; }
.cta-label    { font-family: var(--font-sans); font-size: 16px; font-weight: 700; line-height: 1; text-transform: uppercase; letter-spacing: 0.02em; }

/* ─── Buttons ────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: var(--scale-12) var(--scale-20);
  border-radius: var(--radius-pill);
  font-family: var(--font-sans); font-size: 16px; font-weight: 700;
  text-transform: uppercase; line-height: 1; white-space: nowrap;
  cursor: pointer; transition: opacity .2s; border: none;
}
.btn:hover { opacity: .88; }
.btn-primary       { background: var(--primary-400); border: 1px solid var(--primary-400); color: var(--white); }
.btn-outline-white { background: transparent; border: 1px solid var(--white); color: var(--white); transition: background .2s, color .2s, border-color .2s; }
.btn-outline-white:hover { background: var(--white); color: var(--black); border-color: var(--white); opacity: 1; }

/* ─── THE KEY FIX: Strip WP width constraint only ───────────────────
   We target only what causes the 790px issue:
   - is-layout-flow (we swap constrained → flow in PHP)
   - the post content wrapper
   - WP container classes
   We do NOT strip padding/margin from the sections themselves.
────────────────────────────────────────────────────────────────── */
.is-layout-flow,
.is-layout-flow > *,
.wp-block-post-content,
.entry-content,
#main-content,
main {
  max-width: 100% !important;
  width: 100% !important;
}

/* Remove left/right padding that WP adds to the content wrapper
   (the sections apply their OWN padding via --px, so this is safe) */
.wp-block-post-content,
.entry-content,
#main-content {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* WP container wrappers — only kill the width, keep everything else */
[class*="wp-container-"] {
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ACF block outer wrapper — zero out WP's automatic spacing */
[class^="wp-block-acf-inscora-"] {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  /* NO padding here — each section template controls its own padding */
}

/* Full/wide aligned blocks */
.alignfull,
.wp-block[data-align="full"] {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}

/* ─── Navigation ─────────────────────────────────────────────────── */
.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: var(--black);
  border-bottom: 1px solid var(--grey-600);
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--scale-32) 96px;
  height: 110px; width: 100%;
  /* Hide/show on scroll — JS adds .nav-hidden to translate up */
  transition: transform .35s cubic-bezier(.4, 0, .2, 1);
}

/* JS adds this class when scrolling down */
.site-nav.nav-hidden {
  transform: translateY(-100%);
}

/* No body padding — the hero sits behind the fixed nav at z-index 0
   All scrollable content sits above both via z-index */
.nav-logo-text {
  font-family: var(--font-serif); font-size: 26px;
  color: var(--white); letter-spacing: -0.5px;
}
.nav-links { display: flex; gap: var(--scale-32); align-items: center; }
.nav-links ul { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--scale-32); align-items: center; }
.nav-links li { margin: 0; padding: 0; }
.nav-links a, .nav-links li a {
  color: var(--white); font-family: var(--font-sans);
  font-size: 16px; font-weight: 700; text-transform: uppercase; text-decoration: none;
}
.nav-links a:hover { opacity: .75; }
/* sub-menu visibility handled below */
.nav-dropdown { display: flex; align-items: center; gap: var(--scale-8); cursor: pointer; }
.nav-dropdown svg { width: 10px; height: 5px; fill: var(--white); flex-shrink: 0; }
.nav-right { display: flex; gap: var(--scale-32); align-items: center; }
.nav-right .lang { color: var(--white); font-family: var(--font-sans); font-size: 16px; font-weight: 700; text-transform: uppercase; }

/* ─── Hero ───────────────────────────────────────────────────────── */
.section-hero {
  background: #151a1f;
  /* Horizontal padding only — vertical centering handled by justify-content.
     padding-top: 110px offsets the fixed nav so content never hides behind it. */
  padding: 110px var(--px) 0;
  min-height: 100vh;             /* fill the full viewport height */
  display: flex;
  flex-direction: column;
  gap: var(--scale-32);
  align-items: flex-start;
  justify-content: center;       /* vertically centre content in the hero */
  position: relative;
  overflow: hidden;
}
/* No gradient overlay — clean #151A1F background by default */
.section-hero::before {
  content: none;
}

/* ── Hero: sticky positioning so it stays behind the scrolling intro ──
   The hero acts as a backdrop — it stays fixed while the next section
   slides over it as the user scrolls, exactly like Whoop.com.
   position: sticky keeps it in the flow so page height is preserved.
────────────────────────────────────────────────────────────────── */
.section-hero {
  position: sticky;
  top: 0; /* hero anchors to very top — nav floats above it at z-index 100 */
}

/* EVERY section after the hero must sit above it with z-index so
   the hero doesn't bleed through as they scroll over it.
   The adjacent sibling + general sibling selectors cover all blocks. */
.section-hero ~ * {
  position: relative;
  z-index: 2;
}

/* Rounded top corners on the first section that slides over the hero */
.section-hero + * {
  border-radius: var(--radius-card-top) var(--radius-card-top) 0 0;
}
.section-hero .hero-bg { position: absolute; inset: 0; }
.section-hero .hero-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .4; }
.section-hero h1   { color: var(--white); max-width: 100%; position: relative; z-index: 1; }
.section-hero .lead { color: var(--grey-200); max-width: 75%; position: relative; z-index: 1; }

/* ─── Stats ──────────────────────────────────────────────────────── */
.section-stats {
  background: var(--grey-50);
  border-radius: var(--radius-card-top) var(--radius-card-top) 0 0;
  padding: var(--scale-96) var(--px);
  display: flex; flex-direction: column; gap: var(--scale-48);
}
.stats-intro { display: flex; flex-direction: column; gap: var(--scale-32); max-width: 100%; }
.stats-intro .h2 { color: var(--primary-700); }
.stats-intro .body-xl { color: var(--black); max-width: 75%; }
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--scale-32); }
.stat-card {
  background: var(--grey-100); border-radius: var(--radius-md);
  padding: var(--scale-64) var(--scale-32) var(--scale-32);
  display: flex; flex-direction: column; gap: 54px;
}
.stat-number {
  font-family: var(--font-serif); font-size: 128px; line-height: 1;
  color: var(--primary-400); letter-spacing: -1.28px; font-weight: 400;
}
.stat-number sup { font-size: 64px; vertical-align: super; line-height: 0; }

/* ── Gap Tile — matches Figma 170:1544 ───────────────────────────────
   Three rows: top icon | text (flex:1, centred) | bottom icon.
   Text fills the middle and is perfectly vertically centred.
────────────────────────────────────────────────────────────────── */
.stat-card--gap {
  background: var(--grey-50);
  border-radius: var(--scale-24);
  padding: var(--scale-32);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0;
  min-height: 280px;
}

/* Empty invisible spacer */
.stat-card--empty {
  background: transparent;
  border: none;
  box-shadow: none;
  pointer-events: none;
}

/* Icon containers — 48×48px */
.gap-tile-icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gap-tile-icon img,
.gap-tile-icon svg {
  width: 48px;
  height: 48px;
  object-fit: contain;
  display: block;
}

/* Top icon — top-left */
.gap-tile-icon--top { align-self: flex-start; }

/* Middle text area — grows to fill space, perfectly centres the label */
.gap-tile-middle {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--scale-16) 0;
}

/* Centre label — PT Serif 32px, black, centred, tracking -0.32px */
.gap-tile-text {
  font-family: var(--font-serif);
  font-size: 32px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.32px;
  color: var(--black);
  text-align: center;
  margin: 0;
  width: 100%;
}

/* Bottom icon — bottom-right */
.gap-tile-icon--bottom { align-self: flex-end; }

/* ─── Dark section intro ─────────────────────────────────────────── */
.section-dark-intro {
  background: var(--surface-page);
  padding: var(--scale-96) var(--px) var(--scale-48);
  display: flex; flex-direction: column; gap: var(--scale-24);
}
.section-dark-intro .h2 { color: var(--white); max-width: 75%; }
.section-dark-intro .body-xl { color: var(--grey-200); max-width: 75%; }

/* ─── Dark card grid ─────────────────────────────────────────────── */
.section-dark-cards {
  background: var(--surface-page);
  padding: 0 var(--px) var(--scale-96);
  display: grid; gap: var(--scale-24);
}
.section-dark-cards.cols-2 { grid-template-columns: repeat(2, 1fr); }
.section-dark-cards.cols-3 { grid-template-columns: repeat(3, 1fr); }
.section-dark-cards.cols-4 { grid-template-columns: repeat(4, 1fr); }
.dark-card {
  background: var(--black);
  border: 1px solid var(--grey-600);
  border-radius: var(--radius-sm);
  padding: var(--scale-32);
  display: flex;
  flex-direction: column;
  gap: var(--scale-24);
}
.dark-card .card-title { color: var(--accent-400); }

/* ─── Mission banner ─────────────────────────────────────────────── */
.section-mission {
  background: var(--surface-page);
  position: relative; overflow: hidden;
  padding: var(--scale-320) var(--px);
  display: flex; flex-direction: column; gap: var(--scale-24);
  align-items: flex-start;
}
.mission-bg {
  position: absolute; inset: 0;
  background: transparent;
}
.mission-bg img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; opacity: .5;
}
.section-mission .h2 { color: var(--white); max-width: 100%; position: relative; z-index: 1; }
.section-mission .body-xl { max-width: 75%; position: relative; z-index: 1; }
.section-mission .h2 em { font-style: italic; }
.section-mission .btn { position: relative; z-index: 1; }

/* ─── Light benefits ─────────────────────────────────────────────── */
.section-light-intro {
  background: var(--grey-50);
  padding: var(--scale-96) var(--px) var(--scale-48);
}
.section-light-intro .h2 { color: var(--primary-700); }
.section-light-cards {
  background: var(--grey-50);
  padding: 0 var(--px) var(--scale-24);
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--scale-24);
}
.section-light-cards.last { padding-bottom: var(--scale-96); }
.light-card {
  background: var(--white);
  border: 1px solid var(--grey-300);
  border-radius: var(--radius-sm);
  padding: var(--scale-32);
  display: flex; gap: var(--scale-24); align-items: flex-start;
  box-shadow: 0 0 32px 0 rgba(0,0,0,.08);
  text-decoration: none;   /* reset for <a> tags */
  color: inherit;
}
.light-card .icon { flex-shrink: 0; width: 48px; height: 48px; }
.light-card .icon img, .light-card .icon svg { width: 48px; height: 48px; object-fit: contain; }
.light-card .text { display: flex; flex-direction: column; gap: var(--scale-16); }
.light-card .card-title { color: var(--black); }
.light-card .body-default { color: var(--grey-900); }

/* ── Linked card hover state ──────────────────────────────────────── */
.light-card--linked {
  cursor: pointer;
  transition:
    box-shadow .25s ease,
    border-color .25s ease,
    transform .25s ease;
}
.light-card--linked:hover {
  box-shadow:
    0 0 0 2px var(--primary-400),   /* blue ring replaces grey border */
    0 8px 40px 0 rgba(0,0,0,.14);   /* deeper lift shadow */
  border-color: var(--primary-400);
  transform: translateY(-3px);       /* subtle lift */
}
.light-card--linked:hover .card-title {
  color: var(--primary-400);        /* title turns blue on hover */
}

/* ─── CTA ────────────────────────────────────────────────────────── */
.section-cta {
  background: var(--surface-page);
  padding: var(--scale-96) var(--px);
}
.cta-inner { display: flex; flex-direction: column; gap: var(--scale-48); max-width: 100%; }
.cta-text { display: flex; flex-direction: column; gap: var(--scale-24); }
.cta-text .h2  { color: var(--white); }
.cta-text .body-xl { color: var(--grey-200); max-width: 75%; }
.cta-bottom { display: flex; flex-direction: column; gap: var(--scale-32); align-items: flex-start; }
.cta-bottom .h3 { color: var(--white); }

/* ─── Footer ─────────────────────────────────────────────────────── */
.site-footer {
  background: var(--secondary-700);
  padding: var(--scale-32) 96px;
  display: flex; flex-direction: column; gap: var(--scale-64);
}
.footer-top { display: flex; flex-direction: column; gap: var(--scale-32); }
.footer-row { display: flex; align-items: center; justify-content: space-between; }
.footer-logo-text { font-family: var(--font-serif); font-size: 26px; color: var(--white); }
.footer-logins { display: flex; gap: var(--scale-24); align-items: center; flex-wrap: wrap; }
.footer-social { display: flex; gap: var(--scale-24); align-items: center; }
.footer-social a svg { width: 24px; height: 24px; fill: var(--white); display: block; transition: fill .2s; }
.footer-social a { transition: opacity .2s; }
.footer-social a:hover { opacity: 1; }
.footer-social a:hover svg { fill: var(--accent-400); }
.footer-bottom {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-sans); font-size: 18px; font-weight: 400;
  color: var(--white); line-height: 1.4; flex-wrap: wrap; gap: var(--scale-16);
}
.footer-links { display: flex; gap: var(--scale-32); align-items: center; }
.footer-links a { color: var(--white); text-decoration: underline; font-size: 18px; }

/* ─── Responsive ─────────────────────────────────────────────────── */

/* Large desktop — 1440px and wider */
@media (min-width: 1440px) {
  :root { --px: 240px; }
  .section-contact { padding-bottom: 188px; }
}

@media (max-width: 1200px) {
  :root { --px: 96px; }
  .h1 { font-size: 64px; }
  .h2 { font-size: 44px; }
  .stat-number { font-size: 80px; }
  .stat-number sup { font-size: 40px; }
}
@media (max-width: 1280px) {
  /* On tablet: let text spread full width — 75% of a narrow container is too cramped */
  .stats-intro .h2,
  .stats-intro .body-xl,
  .section-dark-intro .h2,
  .section-dark-intro .body-xl,
  .intro-content .h2,
  .intro-content .h3,
  .intro-content .body-xl,
  .cta-inner .h2,
  .cta-text .body-xl,
  .section-light-intro .h2 { max-width: 100% !important; }
}

@media (max-width: 900px) {
  :root { --px: 32px; }
  .h1 { font-size: 44px; }
  .h2 { font-size: 32px; }
  .h3 { font-size: 28px; }
  .lead { font-size: 20px; }
  .site-nav { padding: 16px 24px; height: auto; flex-wrap: wrap; gap: 16px; }
  .nav-links { display: none; }
  .stats-grid { grid-template-columns: 1fr; }
  .section-dark-cards.cols-4,
  .section-dark-cards.cols-3,
  .section-dark-cards.cols-2 { grid-template-columns: 1fr; }
  .section-light-cards { grid-template-columns: 1fr; }
  .section-hero { padding: 110px var(--px) 0; min-height: 100svh; } /* nav offset + full viewport */
  .section-mission { padding: 120px var(--px); }
  .footer-row { flex-direction: column; gap: 24px; align-items: flex-start; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  /* Full width on mobile — every text block uses all available space */
  .stats-intro .h2,
  .stats-intro .body-xl,
  .section-dark-intro .h2,
  .section-dark-intro .body-xl,
  .intro-content .h2,
  .intro-content .h3,
  .intro-content .body-xl,
  .cta-inner .h2,
  .cta-text .body-xl,
  .section-hero .lead,
  .section-light-intro .h2 { max-width: 100% !important; }
}

/* ─── Hero: video & image background ────────────────────────────────
   Matches Figma node 170:1434 — full-cover bg, dark overlay
────────────────────────────────────────────────────────────────── */
.section-hero .hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

/* Shared styles for both img and video backgrounds */
.section-hero .hero-bg img,
.section-hero .hero-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: .5;
  display: block;
}

/* No overlay — pure #151A1F background shows through behind the video */
.section-hero .hero-bg-overlay {
  position: absolute;
  inset: 0;
  background: transparent;
}

/* All direct children of hero sit above the background */
.section-hero > *:not(.hero-bg) {
  position: relative;
  z-index: 1;
}

/* ─── Hero: optional top pill button (breadcrumb style) ─────────────
   Matches Figma "Breadcrumb" component — outlined pill, grey-200 text
────────────────────────────────────────────────────────────────── */
.hero-top-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--scale-16) var(--scale-24);
  border: 1px solid var(--white);
  border-radius: var(--radius-pill);        /* 40px — matches CTA button */
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  color: var(--grey-200);
  text-decoration: none;
  transition: opacity .2s;
  white-space: nowrap;
  align-self: flex-start;                   /* don't stretch full width */
}
.hero-top-btn:hover {
  opacity: .75;
}

/* ══════════════════════════════════════════════════════════════════
   TEXT & IMAGE BLOCK
   Matches Figma nodes 170:1451 (dark, text-left) & 170:1460 (light, text-right)
══════════════════════════════════════════════════════════════════ */

.section-text-image {
  display: flex;
  gap: var(--scale-96);
  align-items: center;
  padding: var(--scale-96);
  width: 100%;
}

/* Theme backgrounds */
.ti-bg-dark  { background: var(--surface-page); }
.ti-bg-light { background: var(--grey-50); }

/* Text column — equal flex share */
.ti-text {
  flex: 1 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--scale-24);
  min-width: 0;
}

/* Title colours per theme */
.ti-title-dark  { color: var(--white); }
.ti-title-light { color: var(--primary-700); }

/* Body colours per theme */
.ti-body-dark  { color: var(--grey-200); }
.ti-body-light { color: var(--black); }

/* Image column — equal flex share, aspect-ratio locked */
.ti-image-wrap {
  flex: 1 0 0;
  min-width: 0;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.15);
  position: relative;
}

.ti-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* WYSIWYG output wrapper — inherits body-xl size and theme colour */
.ti-wysiwyg {
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.4;
}

/* <p> tags generated by the WYSIWYG editor */
.ti-wysiwyg p {
  margin: 0 0 0.75em;
  font-size: inherit;
  line-height: inherit;
  color: inherit;        /* picks up ti-body-dark / ti-body-light from parent */
}
.ti-wysiwyg p:last-child { margin-bottom: 0; }

/* Bold and italic */
.ti-wysiwyg strong,
.ti-wysiwyg b { font-weight: 700; }
.ti-wysiwyg em,
.ti-wysiwyg i { font-style: italic; }

/* Links */
.ti-wysiwyg a { color: var(--primary-400); text-decoration: underline; }

/* Ensure colour classes work when applied to the wrapper div */
.ti-wysiwyg.ti-body-dark  { color: var(--grey-200); }
.ti-wysiwyg.ti-body-light { color: var(--black); }

/* Video inside the media column — same sizing as the image */
.ti-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Placeholder shown when no image is uploaded yet */
.ti-image-placeholder {
  width: 100%;
  height: 100%;
  background: var(--grey-600);
  border-radius: var(--radius-md);
  min-height: 280px;
}

/* Responsive */

/* Tablet — stack to single column at hamburger breakpoint */
@media (max-width: 1280px) {
  .section-text-image {
    flex-direction: column;
    padding: var(--scale-96) var(--px);
    gap: var(--scale-48);
  }
  /* Image takes full width when stacked */
  .ti-image-wrap {
    flex: none;
    width: 100%;
    aspect-ratio: 16 / 9;
    /* Always below the text regardless of desktop position (left or right) */
    order: 2;
  }
  /* Text always on top */
  .ti-text { flex: none; width: 100%; order: 1; }
}

/* Mobile — tighter padding */
@media (max-width: 900px) {
  .section-text-image {
    padding: var(--scale-48) var(--px);
    gap: var(--scale-32);
  }
}


/* ══════════════════════════════════════════════════════════════════
   BULLET POINT TEXT BLOCK
   Matches Figma node 170:1477 — blue bar markers, stacked sections
══════════════════════════════════════════════════════════════════ */

.section-bullet-text {
  padding: var(--scale-96) var(--px);
  width: 100%;
}

.bt-inner {
  display: flex;
  flex-direction: column;
  gap: var(--scale-48);
  max-width: 100%;
}

/* H2 colours */
.bt-h2-dark  { color: var(--white); }
.bt-h2-light { color: var(--primary-700); }

/* Each section (H3 + body + bullets) */
.bt-section {
  display: flex;
  flex-direction: column;
  gap: var(--scale-24);
}

/* H3 colours */
.bt-h3-dark  { color: var(--primary-400); }   /* blue on dark bg */
.bt-h3-light { color: var(--primary-400); }   /* same blue on light bg — matches Figma */

/* Body paragraph colours */
/* ti-body-dark / ti-body-light already defined above — reused here */

/* Bullet rows container: bar column + text column */
/* Bullet container — single column, no separate bars column */
.bt-bullets {
  width: 100%;
}

/* The separate bars column is no longer used — bars are now ::before
   pseudo-elements on each <li> so they always align with their own text */
.bt-bars { display: none; }
.bt-bar  { display: none; }

/* Bullet text list */
.bt-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 36px;
}

/* Each bullet item — flex row with the bar pinned to the first line */
.bt-list li {
  display: flex;
  align-items: flex-start;   /* bar aligns to top of text, not middle */
  gap: var(--scale-16);
  line-height: 1.4;
  margin: 0;
  padding: 0;
}

/* The blue bar — pseudo-element tied to each <li>, always at the top */
.bt-list li::before {
  content: '';
  display: block;
  width: 6px;
  height: 28px;
  border-radius: 4px;
  background: var(--primary-400);
  flex-shrink: 0;
  margin-top: calc((1.4em - 28px) / 2); /* optically centre bar on first line */
}

/* Bullet text colours */
.bt-bullet-dark  { color: var(--grey-200); }
.bt-bullet-light { color: var(--black); }

/* Responsive */
@media (max-width: 900px) {
  .section-bullet-text { padding: var(--scale-48) var(--px); }
  .bt-inner { gap: var(--scale-32); }
}

/* ─── Text & Image: inline bullet list ──────────────────────────────
   Matches Figma node 170:1457 — disc bullets, 8px gap, indented 31.5px
────────────────────────────────────────────────────────────────── */
.ti-bullet-list {
  list-style: disc;
  padding-left: 31.5px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.4;
}
.ti-bullet-list li {
  padding: 0;
  margin: 0;
}
/* Bullet colour inherits from ti-body-dark / ti-body-light on the <ul> */
.ti-bullet-list.ti-body-dark  { color: var(--grey-200); }
.ti-bullet-list.ti-body-light { color: var(--black); }

/* ══════════════════════════════════════════════════════════════════
   INTRO BLOCK
   Matches Figma nodes 170:1329 / 170:1443
   Grey-50 bg, rounded top corners, stacked H2/H3/text rows,
   optional full-width image at bottom.
══════════════════════════════════════════════════════════════════ */

.section-intro {
  padding: var(--scale-96) var(--px);
  width: 100%;
}

/* Optional rounded top corners — matches Figma's rounded-tl/tr-32px */
.section-intro.intro-rounded-top {
  border-radius: var(--radius-card-top) var(--radius-card-top) 0 0;
}

/* Themes */
.intro-bg-light { background: var(--grey-50); }
.intro-bg-dark  { background: var(--surface-page); }

/* Content column — max 900px width, right padding matches Figma's pr-96 */
.intro-content {
  display: flex;
  flex-direction: column;
  gap: var(--scale-32);
  max-width: 100%;
  width: 100%;
}
.intro-content .body-xl { max-width: 75%; }

/* H2 colours */
.intro-h2-light { color: var(--primary-700); }
.intro-h2-dark  { color: var(--white); }

/* H3 colours */
.intro-h3-light { color: var(--primary-700); }
.intro-h3-dark  { color: var(--primary-400); }

/* Body text colours */
.intro-txt-light { color: var(--black); }
.intro-txt-dark  { color: var(--grey-200); }

/* Full-width image at the bottom of the intro block */
.intro-image-wrap {
  width: 100%;
  max-width: 100%;           /* breaks out of the 900px content column */
  margin-top: var(--scale-32);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.15);
  aspect-ratio: 16 / 9;  /* matches Figma's aspect-[641/362] */
}

.intro-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Override: image wrap should be full-width, not limited to 900px content */
.intro-content .intro-image-wrap {
  max-width: none;
  width: calc(100% + 0px); /* same as parent, image breaks out naturally */
}

@media (max-width: 900px) {
  .section-intro { padding: var(--scale-48) var(--px); }
  .intro-content { gap: var(--scale-24); }
}


/* ══════════════════════════════════════════════════════════════════
   IMAGE BLOCK
   Matches Figma node 170:1333 — full-width image, rounded corners,
   sits on its section background with horizontal page padding.
══════════════════════════════════════════════════════════════════ */

.section-imgblock {
  padding: 0 var(--px) var(--scale-48);
  width: 100%;
}

/* Theme backgrounds */
.imgblock-bg-light { background: var(--grey-50); }
.imgblock-bg-dark  { background: var(--surface-page); }

.imgblock-figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--scale-16);
}

/* Image — full width of the padded container, rounded corners */
.imgblock-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255,255,255,.15);
}

/* Placeholder when no image is uploaded */
.imgblock-placeholder {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--grey-100);
  border-radius: var(--radius-md);
  border: 1px dashed var(--grey-300);
}

/* Caption */
.imgblock-cap-light { color: var(--grey-600); }
.imgblock-cap-dark  { color: var(--grey-200); }

@media (max-width: 900px) {
  .section-imgblock { padding: 0 var(--px) var(--scale-32); }
}

/* ══════════════════════════════════════════════════════════════════
   VIDEO BLOCK
   Same layout as Image Block — full-width, rounded corners,
   light/dark background, optional caption.
══════════════════════════════════════════════════════════════════ */

.section-vidblock {
  padding: 0 var(--px) var(--scale-48);
  width: 100%;
}

.vidblock-bg-light { background: var(--grey-50); }
.vidblock-bg-dark  { background: var(--surface-page); }

.vidblock-figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--scale-16);
}

/* Wrapper gives the video its aspect ratio and rounded corners */
.vidblock-wrap {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.15);
  background: var(--black);        /* letterbox colour while loading */
  position: relative;
}

/* Video fills the wrapper exactly */
.vidblock-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Caption */
.vidblock-cap-light { color: var(--grey-600); }
.vidblock-cap-dark  { color: var(--grey-200); }

/* Placeholder shown in editor when no video is uploaded yet */
.vidblock-placeholder {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--grey-100);
  border-radius: var(--radius-md);
  border: 1px dashed var(--grey-300);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--scale-16);
}

.vidblock-placeholder-icon {
  font-size: 48px;
  color: var(--grey-600);
  line-height: 1;
}

@media (max-width: 900px) {
  .section-vidblock { padding: 0 var(--px) var(--scale-32); }
}

/* ─── Dark Card: optional body paragraph ────────────────────────────
   Matches Figma node I170:1555;30:59 — DM Sans 16px, grey-200, lh 1.4
────────────────────────────────────────────────────────────────── */
.dark-card-body {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--grey-200);
  margin: 0;
}

/* ══════════════════════════════════════════════════════════════════
   QUOTE BLOCK
   Matches Figma node 170:1628 — full-width, bg image/video at 60%
   opacity, large italic centred quote, attribution line.
══════════════════════════════════════════════════════════════════ */

.section-quote {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: var(--scale-320) var(--px);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Dark surface fallback when no bg is uploaded */
  background: var(--surface-page);
}

/* ── Background media ───────────────────────────────────────────── */
.quote-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.quote-bg-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  /* Figma: opacity-60 on the image layer */
  opacity: .6;
}

/* ── Colour overlays ────────────────────────────────────────────── */
.quote-overlay {
  position: absolute;
  inset: 0;
}

/* none — just the raw media */
.quote-overlay-none { background: transparent; }

/* dark — matches Figma: surface-page base + image at 60% on top */
.quote-overlay-dark {
  background: rgba(21, 26, 31, 0.55);
}

/* light — for bright background images */
.quote-overlay-light {
  background: rgba(255, 255, 255, 0.45);
}

/* blue — brand primary tint */
.quote-overlay-blue {
  background: rgba(0, 72, 178, 0.55);
}

/* ── Content ────────────────────────────────────────────────────── */
.quote-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--scale-24);
  align-items: center;
  text-align: center;
  max-width: 1100px;
  width: 100%;
}

/* Quote text — PT Serif Italic, 60px, white, centred
   Matches Figma: font-['PT_Serif:Italic'] italic text-[60px]
   leading-[64px] tracking-[-0.6px] text-white text-center */
.quote-text {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 60px;
  line-height: 1.2;
  letter-spacing: -0.6px;
  color: var(--white);
  text-align: center;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
}

/* Attribution — DM Sans Bold 18px white centred
   Matches Figma: font-['DM_Sans:Bold'] font-bold text-[18px]
   leading-[1.4] text-white text-center */
.quote-attribution {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--white);
  text-align: center;
  margin: 0;
}

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 1200px) {
  .quote-text { font-size: 44px; line-height: 1.1; }
}
@media (max-width: 900px) {
  .section-quote { padding: 120px var(--px); }
  .quote-text { font-size: 32px; letter-spacing: -0.32px; }
  .quote-attribution { font-size: 16px; }
}

/* ══════════════════════════════════════════════════════════════════
   ARTICLE GRID BLOCK
   Matches Figma node 170:1720 — grey-50 bg, 3-col grid of image tiles.
   460px tall cards, 32px radius, bottom-anchored content, hover zoom.
══════════════════════════════════════════════════════════════════ */

.section-articles {
  width: 100%;
  padding: var(--scale-96) var(--px) var(--scale-64);
  display: flex;
  flex-direction: column;
  gap: var(--scale-48);
}

.articles-bg-light { background: var(--grey-50); }
.articles-bg-dark  { background: var(--surface-page); }

/* ── Section title ───────────────────────────────────────────────── */
/* Matches Figma: PT Serif 64px, primary-700, letter-spacing -0.64px */
.articles-title {
  font-family: var(--font-serif);
  font-size: 64px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.64px;
  color: var(--primary-700);
  margin: 0;
}
.articles-bg-dark .articles-title { color: var(--white); }

/* ── Card row ────────────────────────────────────────────────────── */
.articles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--scale-32);
  width: 100%;
}

/* ── Individual card ─────────────────────────────────────────────── */
/* Matches Figma: h-[460px] rounded-[32px] p-[32px]
   justify-end (content at bottom), overflow hidden for img zoom */
.article-card {
  position: relative;
  height: 460px;
  border-radius: var(--radius-card-top);   /* 32px */
  overflow: hidden;                         /* clips the zooming image */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--scale-32);
  text-decoration: none;
  color: var(--white);
  /* Matches Figma shadow */
  box-shadow:
    0px -2px 16px 0px rgba(255,255,255,.6),
    0px 2px 32px 0px rgba(0,0,0,.08);
  cursor: pointer;
  /* Smooth transition for the card itself on hover */
  transition: box-shadow .35s ease;
}

/* Ghost placeholder — fills empty grid slots */
.article-card--ghost {
  visibility: hidden;
  pointer-events: none;
  box-shadow: none;
}

/* Slight shadow lift on hover */
.article-card:hover {
  box-shadow:
    0px -4px 20px 0px rgba(255,255,255,.7),
    0px 4px 40px 0px rgba(0,0,0,.18);
}

/* ── Background image layer ──────────────────────────────────────── */
.article-card-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* The image — zooms on card hover via transform */
.article-card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  /* Smooth zoom transition — 0.5s ease feels natural */
  transition: transform .5s ease;
  transform: scale(1);
  transform-origin: center center;
}

/* On hover: bump image by 15% (scale 1 → 1.15) */
.article-card:hover .article-card-img {
  transform: scale(1.15);
}

/* Placeholder background when no image is uploaded */
.article-card-placeholder {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--grey-600) 0%, var(--black) 100%);
  transition: transform .5s ease;
  transform: scale(1);
  transform-origin: center center;
}
.article-card:hover .article-card-placeholder {
  transform: scale(1.15);
}

/* Bottom gradient overlay — transparent top → rgba(0,0,0,0.5) bottom
   Matches Figma: bg-gradient-to-b from-transparent to-black/50 */
.article-card-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0) 40%,
    rgba(0, 0, 0, 0.5) 100%
  );
}

/* ── Card content (sits above bg) ────────────────────────────────── */
.article-card-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--scale-16);
  align-items: flex-start;
}

/* Arrow icon — 48×48px, matches Figma arrows_more_up SVG */
.article-card-arrow {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  /* Slight slide-up on hover for extra delight */
  transition: transform .35s ease;
}
.article-card:hover .article-card-arrow {
  transform: translate(3px, -3px);
}

/* Article title — DM Sans Bold 24px white
   Matches Figma: font-['DM_Sans:Bold'] font-bold text-[24px] text-white */
.article-card-title {
  font-family: var(--font-sans);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--white);
  margin: 0;
}

/* Empty state */
.articles-empty {
  font-family: var(--font-sans);
  font-size: 18px;
  color: var(--grey-600);
  text-align: center;
  padding: var(--scale-64) 0;
}

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .articles-grid { grid-template-columns: repeat(2, 1fr); }
  .articles-title { font-size: 48px; }
}
@media (max-width: 700px) {
  .articles-grid { grid-template-columns: 1fr; }
  .article-card { height: 360px; }
  .articles-title { font-size: 36px; }
  .section-articles { padding: var(--scale-48) var(--px); gap: var(--scale-32); }
}

/* ══════════════════════════════════════════════════════════════════
   HEADER & FOOTER LOGO + NAV MENU UPDATES
══════════════════════════════════════════════════════════════════ */

/* ── Nav logo wrapper ────────────────────────────────────────────── */
.nav-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}

/* Uploaded logo image — max 40px tall, auto width */
.nav-logo-img {
  height: 40px;
  width: auto;
  max-width: 200px;
  display: block;
  object-fit: contain;
}

/* Text fallback (shown when no image is uploaded) */
.nav-logo-text {
  font-family: var(--font-serif);
  font-size: 26px;
  color: var(--white);
  letter-spacing: -0.5px;
  line-height: 1;
}

/* ── Nav menu — WordPress default <ul><li> structure ────────────────
   WP outputs: .nav-menu > li.menu-item > a
                                         > ul.sub-menu > li > a
   The <li> is naturally the hover container — the link AND its
   submenu are both children of the same <li>, so CSS :hover on
   the <li> covers the entire group with no gap problems.
────────────────────────────────────────────────────────────────── */

/* Top-level <ul> */
.nav-links {
  display: flex;
  align-items: center;
}

.nav-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: var(--scale-32);
}

/* Each top-level <li> — the hover container */
.nav-menu > li {
  position: relative;
  margin: 0;
  padding: 0;
  /* Extend the hover area downward to cover the gap to the submenu */
  padding-bottom: 12px;
  margin-bottom: -12px;
}

/* Top-level links */
.nav-menu > li > a {
  color: var(--white);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--scale-8);
  white-space: nowrap;
  transition: color .2s;
}
.nav-menu > li > a:hover,
.nav-menu > li:hover > a        { color: var(--accent-400); }
.nav-menu > li.current-menu-item > a,
.nav-menu > li.current-menu-ancestor > a,
.nav-menu > li.current-menu-parent > a,
.nav-menu > li.current_page_ancestor > a { color: var(--accent-400); }

/* Dropdown chevron — WP adds it via CSS or we add via JS below */
.nav-menu > li.menu-item-has-children > a::after {
  content: '';
  display: inline-block;
  width: 10px;
  height: 5px;
  margin-left: var(--scale-8);
  background: currentColor;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transition: transform .2s;
  flex-shrink: 0;
}
.nav-menu > li.menu-item-has-children:hover > a::after {
  transform: rotate(180deg);
}

/* ── Submenu (WordPress .sub-menu) ───────────────────────────────────
   The <li> is the hover container — submenu is a child of the <li>
   so :hover on the <li> covers both the link AND the submenu.
   No gap, no timer, no JS needed.
────────────────────────────────────────────────────────────────── */
.nav-menu .sub-menu {
  list-style: none;
  margin: 0;
  padding: var(--scale-8) 0;
  position: absolute;
  top: 100%;
  left: 0;
  width: max-content;  /* hugs content width — no fixed min-width */
  background: var(--black);
  border: 1px solid var(--grey-600);
  border-radius: var(--radius-sm);
  z-index: 200;
  box-shadow: 0 8px 32px rgba(0,0,0,.4);
  /* Stack items vertically, left-aligned */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* Hidden by default */
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease, visibility .15s ease;
}

/* Show submenu when hovering the parent <li> */
.nav-menu > li:hover > .sub-menu {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

/* Submenu item links */
.nav-menu .sub-menu li {
  margin: 0;
  padding: 0;
}
.nav-menu .sub-menu li a {
  display: block;
  padding: var(--scale-12) var(--scale-20);
  color: var(--white);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  text-align: left;
  width: 100%;
  background: transparent;
  transition: color .15s;
}
.nav-menu .sub-menu li a:hover {
  background: transparent;
  color: var(--accent-400);
}
.nav-menu .sub-menu li.current-menu-item > a {
  color: var(--accent-400);
}



/* ── Footer logo wrapper ─────────────────────────────────────────── */
.footer-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}

/* Uploaded footer logo image */
.footer-logo-img {
  height: 40px;
  width: auto;
  max-width: 200px;
  display: block;
  object-fit: contain;
  /* Filter to white if needed: filter: brightness(0) invert(1); */
}

/* Text fallback */
.footer-logo-text {
  font-family: var(--font-serif);
  font-size: 26px;
  color: var(--white);
}

/* Footer legal menu links */
.footer-links .nav-link,
.footer-links a {
  color: var(--white);
  text-decoration: underline;
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 400;
  text-transform: none;
}

/* ─── Active nav item — stays green on current page and child pages ──
   WordPress adds these classes automatically to the <li> element.
────────────────────────────────────────────────────────────────── */
.nav-menu li.current-menu-item > a,
.nav-menu li.current-menu-ancestor > a,
.nav-menu li.current-menu-parent > a,
.nav-menu li.current_page_item > a,
.nav-menu li.current_page_ancestor > a,
.nav-menu li.current_page_parent > a {
  color: var(--accent-400) !important;
}

/* ─── Bullet Point Text: two-column layout with image ────────────────
   Matches Figma node 170:1579 — image (flex-1) + text (flex-1),
   96px gap, image has rounded-16 corners and light-tile shadow.
────────────────────────────────────────────────────────────────── */

/* Two-column section — flex row with 96px gap */
.bt-section--two-col {
  display: flex;
  flex-direction: row;
  gap: var(--scale-96);
  align-items: center;
}

/* Image column — equal flex share, fixed 391px height matching Figma */
.bt-section-image {
  flex: 1 0 0;
  min-width: 0;
}

.bt-section-img {
  width: 100%;
  height: 391px;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: var(--radius-sm);     /* 16px — matches Figma rounded-[Scale/16] */
  box-shadow: 0 0 32px 0 rgba(0,0,0,.08); /* Light Tiles effect from Figma */
}

/* Text column — equal flex share */
.bt-section--two-col .bt-section-text {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--scale-32);
}

/* Full-width (no image) — text fills the full bt-inner width */
.bt-section:not(.bt-section--two-col) .bt-section-text {
  display: flex;
  flex-direction: column;
  gap: var(--scale-24);
}

/* Responsive — stack on mobile */
@media (max-width: 900px) {
  .bt-section--two-col {
    flex-direction: column;
    gap: var(--scale-48);
  }
  .bt-section-img {
    height: 260px;
  }
}

/* ══════════════════════════════════════════════════════════════════
   LOGO CAROUSEL BLOCK
   Matches Figma nodes 255:1202 (title) + 255:1204 (carousel row)
   Grey-50 bg, white logo tiles 258×111px, radius-16, 24px gap,
   small arrow buttons on left and right.
══════════════════════════════════════════════════════════════════ */

.section-logo-carousel {
  width: 100%;
  padding: var(--scale-48) var(--scale-96) var(--scale-96);
  display: flex;
  flex-direction: column;
  gap: var(--scale-48);
}

.carousel-bg-light { background: var(--grey-50); }
.carousel-bg-dark  { background: var(--surface-page); }

/* ── Section title ────────────────────────────────────────────────── */
/* Matches Figma: PT Serif 60px, primary-700, tracking -0.6px */
.carousel-title {
  font-family: var(--font-serif);
  font-size: 60px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.6px;
  margin: 0;
}
.carousel-title-light { color: var(--primary-700); }
.carousel-title-dark  { color: var(--white); }

/* ── Outer wrapper: arrows + viewport in a row ───────────────────── */
.carousel-outer {
  display: flex;
  align-items: center;
  gap: var(--scale-32);
  width: 100%;
}

/* ── Arrow buttons ───────────────────────────────────────────────── */
/* Matches Figma: small arrow_back_ios icons, 20px tall */
.carousel-arrow {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--black);
  transition: color .2s, opacity .2s;
  padding: 0;
}
.carousel-bg-dark .carousel-arrow { color: var(--white); }
.carousel-arrow:hover { color: var(--primary-400); }
.carousel-arrow svg {
  width: 12px;
  height: 20px;
  display: block;
}

/* ── Viewport — clips the track, enables smooth horizontal scroll ─── */
.carousel-viewport {
  flex: 1;
  overflow: hidden;          /* hide scrollbar — JS handles scrolling */
  scroll-behavior: smooth;
  /* allow JS to set scrollLeft */
}

/* ── Track — all tiles in a single flex row ─────────────────────── */
.carousel-track {
  display: flex;
  gap: var(--scale-24);      /* 24px — matches Figma Scale/24 */
  align-items: center;
  /* No wrap — single scrollable row */
  flex-wrap: nowrap;
  /* Width is set by content — track overflows the viewport */
}

/* ── Logo tile ───────────────────────────────────────────────────── */
/* Matches Figma: bg-white, w-258px, h-111px, rounded-16 */
.carousel-tile {
  flex-shrink: 0;
  width: 258px;
  height: 111px;
  background: var(--white);
  border-radius: var(--radius-sm);    /* 16px */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: box-shadow .25s, transform .25s;
}

a.carousel-tile:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,.12);
  transform: translateY(-2px);
}

/* Logo image — fits inside tile, object-contain so logos aren't cropped */
.carousel-tile-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  padding: 16px;               /* breathing room around logo */
}

/* Empty placeholder tile */
.carousel-tile--empty {
  border: 1px dashed var(--grey-300);
  background: var(--grey-100);
  color: var(--grey-600);
  font-family: var(--font-sans);
  font-size: 14px;
}

/* Placeholder for upload state */
.carousel-tile-placeholder {
  width: 100%;
  height: 100%;
  background: var(--grey-100);
}

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 1200px) {
  .section-logo-carousel { padding: var(--scale-48) var(--scale-48) var(--scale-96); }
  .carousel-title { font-size: 44px; }
}
@media (max-width: 700px) {
  .carousel-title { font-size: 32px; }
  .carousel-tile { width: 180px; height: 80px; }
  .section-logo-carousel { padding: var(--scale-48) var(--scale-24) var(--scale-64); }
}


/* ── Fixed nav offset — non-hero pages ───────────────────────────────
   Pages that don't use the Hero block need top padding so content
   doesn't hide behind the fixed 110px nav bar.
   WordPress body classes target archives, standard pages, search etc.
────────────────────────────────────────────────────────────────── */
body.page:not(.home) > #main-content,
body.archive > #main-content,
body.blog > #main-content,
body.search > #main-content,
body.single > #main-content {
  padding-top: 110px;
}

/* ══════════════════════════════════════════════════════════════════
   ARTICLE PAGE (single.php)
   Matches Figma node 170:1780 — narrow centred reading column,
   grey-50 bg, PT Serif titles, DM Sans body.
══════════════════════════════════════════════════════════════════ */

/* Page background */
.article-page {
  background: var(--grey-50);
  width: 100%;
  min-height: 60vh;
  padding-top: 110px; /* compensate for fixed nav */
}

/* Narrow reading column — matches Figma px-444 (444px each side on 1680px) */
.article-container {
  max-width: 792px;          /* 1680 - 444*2 = 792px content width */
  margin: 0 auto;
  padding: var(--scale-96) var(--scale-32);
  display: flex;
  flex-direction: column;
  gap: var(--scale-24);
}

/* ── Ghost outline button (top + bottom) ─────────────────────────
   Matches Figma CtaGhost component:
   border: 1px solid --primary-400 (blue), text: --primary-400,
   padding: 16px 24px, border-radius: 32px, DM Sans Bold 16px uppercase
────────────────────────────────────────────────────────────────── */
.btn-ghost-blue {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--scale-16) var(--scale-24);
  border: 1px solid var(--primary-400);
  border-radius: var(--radius-card-top);   /* 32px */
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  color: var(--primary-400);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  white-space: nowrap;
  align-self: flex-start;
  transition: background .2s, color .2s;
}
.btn-ghost-blue:hover {
  background: var(--primary-400);
  color: var(--white);
}

.article-top-btn {
  margin-bottom: var(--scale-8);
}

.article-bot-btn-wrap {
  padding-top: var(--scale-32);
}

/* ── Article title — H1.article ──────────────────────────────────
   Matches Figma: PT Serif 56px, primary-700, tracking -0.56px,
   line-height Scale/64
────────────────────────────────────────────────────────────────── */
.article-title {
  font-family: var(--font-serif);
  font-size: 56px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.56px;
  color: var(--primary-700);
  margin: 0;
}

/* ── Date line ───────────────────────────────────────────────────
   Matches Figma: DM Sans Medium 14px, uppercase, primary-700
────────────────────────────────────────────────────────────────── */
.article-date {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--primary-700);
  margin: 0;
}

/* ── Hero image ──────────────────────────────────────────────────
   Matches Figma: aspect-[1665/1083], rounded-24
────────────────────────────────────────────────────────────────── */
.article-hero-img-wrap {
  width: 100%;
  border-radius: var(--radius-md);    /* 24px */
  overflow: hidden;
  aspect-ratio: 1665 / 1083;
}
.article-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* ── Subtitle (H6) ───────────────────────────────────────────────
   Matches Figma H6: PT Serif 28px, primary-700, tracking -0.28px
────────────────────────────────────────────────────────────────── */
.article-subtitle {
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.28px;
  color: var(--primary-700);
  margin: var(--scale-8) 0 0;
}

/* ── Body text ───────────────────────────────────────────────────
   Matches Figma p.large: DM Sans Regular 18px, #151A1F, lh 1.4
────────────────────────────────────────────────────────────────── */
.article-body {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--black);
  margin: 0;
}
.article-body p { margin-bottom: var(--scale-16); }
.article-body p:last-child { margin-bottom: 0; }
.article-body strong, .article-body b { font-weight: 700; }

/* Standard WP content formatting */
.article-wp-content p { margin-bottom: var(--scale-16); }
.article-wp-content h2 {
  font-family: var(--font-serif); font-size: 28px;
  color: var(--primary-700); margin: var(--scale-32) 0 var(--scale-8);
  letter-spacing: -0.28px; line-height: 1.2;
}
.article-wp-content h3 {
  font-family: var(--font-serif); font-size: 22px;
  color: var(--primary-700); margin: var(--scale-24) 0 var(--scale-8);
}
.article-wp-content img {
  border-radius: var(--radius-sm); max-width: 100%;
}
.article-wp-content a { color: var(--primary-400); text-decoration: underline; }

/* ── Inline figure/image ─────────────────────────────────────────── */
.article-figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--scale-12);
}
.article-inline-img {
  width: 100%;
  border-radius: var(--radius-sm);     /* 16px */
  display: block;
  object-fit: cover;
}
.article-caption {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--grey-600);
  line-height: 1.4;
}

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .article-container { padding: var(--scale-48) var(--scale-32); }
  .article-page { padding-top: 110px; } /* keep nav offset on mobile */
  .article-title { font-size: 36px; }
  .article-subtitle { font-size: 22px; }
}

/* ══════════════════════════════════════════════════════════════════
   MOBILE / TABLET HAMBURGER MENU
   Whoop-inspired: full-height dark drawer slides in from the right.
   Logo top-left, X close top-right, large nav items stacked,
   CTA button pinned to the bottom.
   Uses Inscora's existing design tokens throughout.
══════════════════════════════════════════════════════════════════ */

/* ── Hamburger button — hidden on desktop ────────────────────────── */
.nav-hamburger {
  display: none;           /* shown only at ≤1024px breakpoint below */
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 8px;
  margin-left: auto;
  flex-shrink: 0;
  z-index: 1001;
}

.hamburger-bar {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: transform .3s ease, opacity .3s ease;
}

/* ── Full-screen drawer ──────────────────────────────────────────── */
.mobile-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: min(420px, 100vw);
  height: 100dvh;           /* dynamic viewport height — handles mobile browser chrome */
  background: var(--black); /* #151A1F — matches site-nav */
  border-left: 1px solid var(--grey-600);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .35s cubic-bezier(.4, 0, .2, 1);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.mobile-drawer.is-open {
  transform: translateX(0);
}

/* ── Overlay backdrop ────────────────────────────────────────────── */
.mobile-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .6);
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;
}

.mobile-overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
}

/* Prevent body scroll when drawer is open */
body.drawer-open {
  overflow: hidden;
}

/* ── Drawer header ───────────────────────────────────────────────── */
.mobile-drawer-header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: var(--scale-20) var(--scale-32);
  border-bottom: 1px solid var(--grey-600);
  flex-shrink: 0;
}

/* Close button */
.mobile-drawer-close {
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--white);
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color .2s;
}
.mobile-drawer-close:hover { color: var(--accent-400); }
.mobile-drawer-close svg { width: 24px; height: 24px; }

/* ── Drawer nav area ─────────────────────────────────────────────── */
.mobile-drawer-nav {
  flex: 1;
  padding: 0;
  overflow-y: auto;
}

.mobile-nav-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Top-level nav items */
.mobile-nav-item {
  border-bottom: 1px solid var(--grey-600);
}

/* Row layout: link + optional toggle button side by side */
.mobile-nav-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.mobile-nav-link {
  flex: 1;
  display: block;
  padding: var(--scale-20) var(--scale-32);
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--white);
  text-decoration: none;
  transition: color .2s;
}
.mobile-nav-link:hover,
.mobile-nav-link.is-active { color: var(--accent-400); }

/* Accordion toggle chevron button */
.mobile-nav-toggle {
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--white);
  padding: var(--scale-20) var(--scale-32);
  display: flex;
  align-items: center;
  transition: color .2s;
  flex-shrink: 0;
}
.mobile-nav-toggle svg {
  width: 16px;
  height: 10px;
  transition: transform .25s ease;
}
.mobile-has-children.is-open .mobile-nav-toggle {
  color: var(--accent-400);
}
.mobile-has-children.is-open .mobile-nav-toggle svg {
  transform: rotate(180deg);
}

/* ── Sub-menu (accordion) ────────────────────────────────────────── */
.mobile-sub-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease;
  background: rgba(255,255,255,.03);
}

.mobile-has-children.is-open .mobile-sub-menu {
  max-height: 400px; /* large enough for any submenu */
}

.mobile-sub-item {
  border-top: 1px solid rgba(255,255,255,.06);
}

.mobile-sub-link {
  display: block;
  padding: var(--scale-16) var(--scale-32) var(--scale-16) calc(var(--scale-32) + 16px);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--grey-300);
  text-decoration: none;
  transition: color .2s;
}
.mobile-sub-link:hover,
.mobile-sub-link.is-active { color: var(--accent-400); }

/* ── Drawer footer: CTA ──────────────────────────────────────────── */
.mobile-drawer-footer {
  padding: var(--scale-32);
  border-top: 1px solid var(--grey-600);
  flex-shrink: 0;
}

.mobile-drawer-cta {
  width: 100%;               /* full width in the drawer */
  justify-content: center;
}

/* ── Responsive breakpoints ──────────────────────────────────────── */

/* Tablet + Mobile: show hamburger, hide desktop nav */
@media (max-width: 1280px) {
  .nav-links,
  .nav-right { display: none; }

  .nav-hamburger { display: flex; }
}

/* Desktop: hide mobile-only elements */
@media (min-width: 1281px) {
  .nav-hamburger,
  .mobile-drawer,
  .mobile-overlay { display: none !important; }
}

/* ══════════════════════════════════════════════════════════════════
   SCROLL-IN ANIMATIONS
   Fade + slide up on scroll, like Whoop.com.
   IntersectionObserver in header.php adds .is-visible when
   elements enter the viewport. Uses will-change for GPU compositing.
══════════════════════════════════════════════════════════════════ */

/* ── Initial hidden state ────────────────────────────────────────── */
.anim-fade-up {
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity .65s cubic-bezier(.4, 0, .2, 1),
    transform .65s cubic-bezier(.4, 0, .2, 1);
  will-change: opacity, transform;
}

/* ── Visible state — added by IntersectionObserver ───────────────── */
.anim-fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Staggered children — each child delays slightly after previous ─
   Apply .anim-stagger to the parent, children get auto-staggered.
   Works great for card grids, bullet lists, stat tiles, etc.
────────────────────────────────────────────────────────────────── */
.anim-stagger > * {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity .55s cubic-bezier(.4, 0, .2, 1),
    transform .55s cubic-bezier(.4, 0, .2, 1);
  will-change: opacity, transform;
}

.anim-stagger.is-visible > *:nth-child(1)  { transition-delay: .05s; }
.anim-stagger.is-visible > *:nth-child(2)  { transition-delay: .15s; }
.anim-stagger.is-visible > *:nth-child(3)  { transition-delay: .25s; }
.anim-stagger.is-visible > *:nth-child(4)  { transition-delay: .35s; }
.anim-stagger.is-visible > *:nth-child(5)  { transition-delay: .45s; }
.anim-stagger.is-visible > *:nth-child(6)  { transition-delay: .55s; }
.anim-stagger.is-visible > *:nth-child(n+7) { transition-delay: .6s; }

.anim-stagger.is-visible > * {
  opacity: 1;
  transform: translateY(0);
}

/* ── Respect prefers-reduced-motion ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .anim-fade-up,
  .anim-stagger > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ══════════════════════════════════════════════════════════════════
   CONTACT US BLOCK
   Matches Figma node 170:1836 — full dark section, H1, 3-col cards.
══════════════════════════════════════════════════════════════════ */

.section-contact {
  background: var(--black);
  padding: 240px var(--px) 160px; /* large desktop: top 240px, bottom 160px */
  display: flex;
  flex-direction: column;
  gap: var(--scale-32);
  position: relative;
  box-shadow: inset 0px 8px 32px 0px rgba(0,0,0,.5);
}

/* H1 — white, full width */
.contact-title {
  color: var(--white);
  max-width: 100%;
}

/* 3-column card grid */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--scale-32);
  width: 100%;
}

/* Card base — matches dark-card style but with deeper shadow */
.contact-card {
  background: var(--black);
  border: 1px solid var(--grey-600);
  border-radius: var(--radius-sm);    /* 16px */
  padding: var(--scale-32);
  display: flex;
  flex-direction: column;
  gap: var(--scale-24);
  box-shadow: 0 0 var(--scale-16) 0 rgba(0,0,0,.6);
  text-decoration: none;
  color: inherit;
}

/* Card title — Donegal One, accent green */
.contact-card-title {
  color: var(--accent-400);
}

/* Card body — grey-200 */
.contact-card-body {
  color: var(--grey-200);
  line-height: 1.4;
}

/* ── Linked card hover state ──────────────────────────────────────── */
.contact-card--linked {
  cursor: pointer;
  transition:
    box-shadow .25s ease,
    border-color .25s ease,
    transform .25s ease;
}
.contact-card--linked:hover {
  box-shadow:
    0 0 0 2px var(--primary-400),
    0 8px 40px 0 rgba(0,0,0,.5);
  border-color: var(--primary-400);
  transform: translateY(-3px);
}
.contact-card--linked:hover .contact-card-title {
  color: var(--primary-400);
}

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 1200px) {
  .section-contact { padding-top: 160px; padding-bottom: 120px; } /* large tablet */
}
@media (max-width: 1100px) {
  .contact-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .contact-grid { grid-template-columns: 1fr; }
  .section-contact { padding-top: 80px; padding-bottom: 80px; } /* mobile */
}