/*!
 * site.css (generated)
 * Do not edit this file directly.
 * Edit files in src/styles/ and run the build.
 */


/*! ---------- START: 00-fonts.css ---------- */
/* Self-hosted fonts.
 *
 * Previously loaded from fonts.googleapis.com on all 64 pages, which sent
 * every visitor's IP address to Google before a single word rendered, with
 * no consent. That is a live question under Quebec Law 25 and GDPR (a
 * Munich court ruled against it in 2022), and it also put a render-blocking
 * request to a third-party origin on the critical path.
 *
 * Both families are OFL licensed, so self-hosting is permitted.
 *
 * These are variable fonts: one file per family per subset covers the whole
 * 200 to 800 weight axis, so four files replace the eighteen static faces
 * the old request implied. Note that weights above 800 (about.css uses 850
 * and 900) are outside the axis and will still clamp to 800.
 */

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/assets/fonts/plus-jakarta-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/assets/fonts/plus-jakarta-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/assets/fonts/manrope-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/assets/fonts/manrope-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/*! ---------- END: 00-fonts.css ---------- */


/*! ---------- START: 00-tokens.css ---------- */
/* Tokens only (colors, fonts, sizing variables). Move :root here. */
/* 00-tokens.css
   Design tokens only (colors, fonts, sizing variables)
*/

:root {
  --navy-deep: #0A1628;
  --navy-mid: #1E3A8A;
  --navy-light: #2E4A8E;
  --gold: #C9A961;
  --gold-dark: #B8934E;
  /* A darker gold, defined for the same reason --gold-500 was: #C9A961 is
     only 2.25:1 on white, failing even the 3:1 large-text threshold, and
     no shade of gold reaches the 4.5:1 small-text minimum without reading
     as olive/brown rather than gold. P2-3's fix for the five originally-
     flagged small-text selectors (.section-subtitle, .service-link,
     .step-label, .hero-highlight, .btn-gold) was to switch them to
     --navy-mid/--navy-deep instead of a darker gold - see those rules'
     own comments. --gold-500 (3.12:1, clears large text only) remains for
     any large/bold-text gold accent that still wants to stay gold.
     Known remaining gaps, not fixed in this round: .service-detail-card
     p.service-cred, .testimonial-text strong, and .step-cta - see each
     rule's own comment. */
  --gold-500: #B88A3B;
  --slate: #475569;
  --slate-light: #64748B;
  --gray-50: #F8FAFC;
  --gray-100: #F1F5F9;
  --gray-200: #E2E8F0;
  /* Continues the existing scale (these are Tailwind slate values).
     Added because .link-card:hover referenced --gray-300 while nothing
     defined it, so the hover border silently fell back to inherit. */
  --gray-300: #CBD5E1;
  --white: #FFFFFF;

  --font-display: "Plus Jakarta Sans", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

  --container-max: 1200px;
  --header-height: 76px;
}
/*! ---------- END: 00-tokens.css ---------- */


/*! ---------- START: 01-base.css ---------- */
/* Reset + base element defaults (body, a, img, etc.). */
/* 01-base.css
   Reset + base element styles
*/

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 24px);
}

body {
  font-family: var(--font-body);
  color: var(--navy-deep);
  background-color: var(--white);
  line-height: 1.6;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
  height: auto;
}
/*! ---------- END: 01-base.css ---------- */


/*! ---------- START: 02-layout.css ---------- */
/* Layout primitives (container, section spacing, header/footer layout, grids). */
/* 02-layout.css
   Site layout primitives (container, section spacing, page shell)

   What this file does:
   - Defines global spacing rhythm (sections), container width, and page shell behavior
   - Provides section spacing modifiers (tight/compact/flush) to reduce large gaps where needed
*/

/* Page "shell" layout (sticky footer) */
.page-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.page-shell .site-footer {
  margin-top: auto;
}

/* -------------------------------------------------------
   Section spacing system (site-wide rhythm + modifiers)
   Why:
   - Avoid huge "double padding" gaps between consecutive sections
   - Let pages tighten spacing without rewriting global rules
-------------------------------------------------------- */

:root{
  /* Default vertical padding for sections (desktop) */
  --section-pad-y: 5.5rem;

  /* Optional tighter variants */
  --section-pad-y-tight: 3.5rem;
  --section-pad-y-compact: 2.25rem;

  /* Section header spacing */
  --section-header-gap: 3.5rem;
  --section-header-gap-tight: 2.25rem;
}

/* Layout */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 1.75rem;
}

/* Base section rhythm */
.section {
  padding: var(--section-pad-y) 0;
}

/* Tighten a specific section (use when the page feels too airy) */
.section--tight {
  padding: var(--section-pad-y-tight) 0;
}

/* Very compact (use sparingly, e.g., "OPEN ROLES" or short blocks) */
.section--compact {
  padding: var(--section-pad-y-compact) 0;
}

/* Remove only top or only bottom padding when two sections belong together */
.section--flush-top { padding-top: 0; }
.section--flush-bottom { padding-bottom: 0; }

/* Section header block */
.section-header {
  text-align: center;
  margin-bottom: var(--section-header-gap);
}

/* Tight header spacing (use when the header creates too much air) */
.section-header--tight {
  margin-bottom: var(--section-header-gap-tight);
}

.section-subtitle {
  font-size: 0.85rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  /* --gold is 2.25:1 on white, failing WCAG AA even for large text (see
     00-tokens.css); --navy-mid clears 4.5:1 for this small uppercase
     label, tracked as P2-3. */
  color: var(--navy-mid);
  font-weight: 700;
  margin-bottom: 0.75rem;
}

.section-header h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3vw, 2.7rem);
  letter-spacing: -0.02em;
}

.section-header p {
  max-width: 640px;
  margin: 1rem auto 0;
  color: var(--slate);
  font-size: 1rem;
}

/* Reusable hero section styling with gray-50 background */
.section.hero {
  padding: 100px 0 48px;
  background: linear-gradient(135deg, var(--gray-50), #fff);
}

/* Optional helper class you referenced earlier */
.section-hero {
  background: linear-gradient(135deg, var(--gray-50), #ffffff);
}

/* Page-specific spacing tweaks (kept here for now, later we can move to pages/case-studies.css) */
.page-case-studies .section-header {
  margin-bottom: 1.75rem;
}

.page-case-studies .case-studies-intro {
  padding-bottom: 0rem;
}

.page-case-studies .case-studies-grid {
  padding-top: 0rem;
}

/* Responsive layout adjustments */
@media (max-width: 768px) {
  :root{
    /* Reduce default section padding on mobile */
    --section-pad-y: 4.2rem;
    --section-pad-y-tight: 3.0rem;
    --section-pad-y-compact: 2.0rem;

    /* Reduce header spacing slightly on mobile */
    --section-header-gap: 2.75rem;
    --section-header-gap-tight: 2.0rem;
  }

  .container {
    padding-inline: 1.25rem;
  }
}
/*! ---------- END: 02-layout.css ---------- */


/*! ---------- START: 03-components.css ---------- */
/* 03-components.css
   Component styles only (no tokens, no reset/base, no layout primitives, no insights index/post CSS).
   This file covers: buttons, header/nav, hero, reusable cards/grids, forms, FAQ, CTA, footer, and component-level responsive rules.
*/

/* =========================
   Buttons
   ========================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 1.75rem;
  border-radius: 0.6rem;
  border: none;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.btn-primary {
  background: linear-gradient(135deg, var(--navy-mid), var(--navy-deep));
  color: var(--white);
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.25);
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.3);
}

.btn-secondary {
  background: transparent;
  border: 1.5px solid var(--navy-mid);
  color: var(--navy-mid);
}

.btn-secondary:hover {
  background: var(--navy-mid);
  color: var(--white);
}

.btn-gold {
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  /* White on gold is 2.25-2.87:1, failing WCAG AA (P2-3). Dark text on a
     gold/amber background reads clearly and keeps gold as the dominant
     button color. */
  color: var(--navy-deep);
  box-shadow: 0 10px 24px rgba(201, 169, 97, 0.35);
}

.btn-gold:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(201, 169, 97, 0.4);
}

.btn-tertiary {
  background: transparent;
  border: 1.5px solid rgba(148, 163, 184, 0.9); /* grey outline */
  color: rgba(226, 232, 240, 0.9);              /* light grey text */
}

.btn-tertiary:hover {
  background: rgba(15, 23, 42, 0.5);
  border-color: rgba(226, 232, 240, 1);
  color: #F9FAFB;
}

.btn-small {
  padding-inline: 1.1rem;
  padding-block: 0.6rem;
  font-size: 0.9rem;
}

.btn-full {
  width: 100%;
}

/* Optional icon inside buttons */
.btn-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.btn-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Ensure icons appear reliably on buttons */
.btn-with-icon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.btn-with-icon .btn-icon {
  display: inline-flex;
  line-height: 0;
}

.btn-with-icon svg {
  display: block;
}

/* =========================
   Header & nav
   ========================= */

.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  height: var(--header-height);
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid var(--gray-200);
  backdrop-filter: blur(12px);
  z-index: 50;
}

.nav {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.3rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.logo-accent {
  color: var(--gold);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  font-size: 0.95rem;
}

.nav-links a {
  color: var(--slate);
  font-weight: 500;
}

.nav-links a:hover {
  color: var(--navy-mid);
}

.nav-links a.lang-switch {
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--gray-300);
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--navy-mid);
}

.nav-links a.lang-switch:hover {
  border-color: var(--navy-mid);
  background: var(--gray-50);
}

.mobile-menu-toggle {
  display: none;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.mobile-menu-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  margin-bottom: 5px;
  background: var(--navy-deep);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* =========================
   Hero
   ========================= */

.hero {
  padding-top: calc(var(--header-height) + 3.5rem);
  padding-bottom: 4.5rem;
  background: radial-gradient(circle at top left, #EEF2FF, var(--white) 55%);
}

.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 3.25rem;
  align-items: center;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  border: 1px solid rgba(201, 169, 97, 0.4);
  background: linear-gradient(120deg, rgba(201, 169, 97, 0.18), rgba(201, 169, 97, 0.03));
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--navy-deep);
  margin-bottom: 1.4rem;
}

.badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--gold);
}

.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4vw, 3.6rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.03em;
}

.hero-highlight {
  /* --gold fails WCAG AA contrast on white at this size (P2-3). */
  color: var(--navy-mid);
}

.hero-subtitle {
  margin-top: 1.25rem;
  margin-bottom: 1.4rem;
  color: var(--slate);
  font-size: 1.02rem;
  max-width: 40rem;
}

.hero-meta {
  color: var(--slate-light);
  font-size: 0.9rem;
  margin-bottom: 1.8rem;
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-bottom: 2.4rem;
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.75rem;
}

.stat-number {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.7rem;
}

.stat-label {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--slate-light);
}

/* Hero visual card */

.hero-visual {
  display: flex;
  justify-content: center;
}

.hero-card {
  background: linear-gradient(140deg, var(--navy-deep), var(--navy-mid));
  color: var(--white);
  border-radius: 1.4rem;
  padding: 1.8rem 1.7rem;
  box-shadow: 0 24px 55px rgba(15, 23, 42, 0.6);
  max-width: 380px;
}

.hero-card-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.hero-card-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
}

.hero-card-caption {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.8);
}

.hero-card-body {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.92);
  margin-bottom: 1.3rem;
}

.hero-card-metrics {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.3rem;
}

.metric-label {
  display: block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.7;
  margin-bottom: 0.15rem;
}

.metric-value {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
}

.hero-card-footer {
  font-size: 0.8rem;
  opacity: 0.85;
}

/* =========================
   Credentials Section
   ========================= */
.credentials-section {
    padding: 100px 0;
    background: linear-gradient(180deg, var(--navy-deep) 0%, #0B1630 100%);
    color: var(--white);
    text-align: center;
}

.credentials-section .container {
    max-width: 900px;
}

/* Title - Only larger font size */
.credentials-title {
    font-size: clamp(2.25rem, 4vw, 3rem);
    font-weight: 700;
    color: var(--white);
    margin-bottom: 3.5rem;
    line-height: 1.3;
}

/* Content wrapper */
.credentials-content {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* All paragraphs same size - clean and consistent */
.credentials-content p {
    font-size: 1.125rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 400;
    margin: 0;
}

/* Last paragraph - just slightly bolder */
.credentials-content .client-statement {
    font-weight: 500;
    margin-top: 1rem;
}

/* =========================
   Responsive
   ========================= */
@media (max-width: 768px) {
    .credentials-section {
        padding: 80px 0;
    }
    
    .credentials-title {
        font-size: 2rem;
        margin-bottom: 2.5rem;
    }
    
    .credentials-content {
        gap: 1.5rem;
    }
    
    .credentials-content p {
        font-size: 1rem;
    }
}

/* Testimonial Section */
.testimonial-section {
    padding: 60px 0;
    background: var(--gray-50);
}

.testimonial-card {
    max-width: 900px;
    margin: 0 auto;
    background: var(--white);
    padding: 3rem;
    border-left: 4px solid var(--gold);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(10, 22, 40, 0.08);
}

.testimonial-text {
    font-size: 1.25rem;
    line-height: 1.8;
    color: var(--navy-deep);
    margin-bottom: 2rem;
    font-style: italic;
}

.testimonial-text strong {
    /* --gold fails WCAG AA contrast on white at this size. Known remaining
       gold-contrast gap (P2-3 follow-up), not fixed in this round. */
    color: var(--gold);
    font-weight: 700;
    font-style: normal;
}

.testimonial-attribution {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.testimonial-attribution strong {
    font-size: 1rem;
    color: var(--navy-deep);
}

.testimonial-attribution span {
    font-size: 0.9375rem;
    color: var(--slate);
}

/* =========================
   Icon tile
   ========================= */

.icon-tile {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: linear-gradient(135deg, #1E293B, #020617);
  border: 1px solid rgba(15, 23, 42, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  flex-shrink: 0;
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.25);
}

.icon-tile img {
  max-width: 70%;
  max-height: 70%;
  object-fit: contain;
}

/* Slightly softer version on the dark hero card */
.hero-card .icon-tile {
  background: rgba(15, 23, 42, 0.35);
  border: 1px solid rgba(148, 163, 184, 0.65);
  box-shadow: none;
}

/* =========================
   Cards & grids
   ========================= */

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
}

.card {
  background: var(--gray-50);
  border-radius: 1rem;
  border: 1px solid var(--gray-200);
  padding: 1.8rem 1.7rem;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.07);
  border-color: rgba(201, 169, 97, 0.5);
}

.card h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  margin-bottom: 0.5rem;
}

.card p {
  font-size: 0.96rem;
  color: var(--slate);
}

/* =========================
   Services
   ========================= */

.services {
  background: var(--white);
}

.service-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Service Details grid: 2 columns on desktop (gives 3 rows for 5 cards) */
.service-grid--details{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Center the last card on its own row (keeps the layout balanced) */
.service-grid--details > .service-detail-card:last-child{
  grid-column: 1 / -1;
  max-width: calc(50% - 1rem);
  justify-self: center;
}

@media (max-width: 768px){
  .service-grid--details > .service-detail-card:last-child{
    max-width: none;
  }
}

/* --gold fails WCAG AA contrast on white at this size (P2-3). */
.service-link { display: inline-block; margin-top: 0.75rem; font-size: 0.9rem; font-weight: 600; color: var(--navy-mid); }

/* Service credential - styled like step-labels */
/* --gold fails WCAG AA contrast on white at this size. Known remaining
   gold-contrast gap (P2-3 follow-up), not fixed in this round. */
.service-detail-card p.service-cred{
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 1.5rem;  /* Add more space before description */
  display: block;  /* Ensure it's block-level for proper spacing */
}

/* Add space after cred, before description */
.service-cred + .step-description {
  margin-top: 1.5rem;  /* Extra space between cred and description */
}

.service-card .icon-tile {
  margin-bottom: 0.75rem;
}

.service-meta {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--slate-light);
  margin-bottom: 0.75rem;
}

/* Service meta - bold, not all caps */
.service-meta {
  font-size: 0.85rem;
  font-weight: 700;  /* Make it bold */
  letter-spacing: 0.05em;  /* Reduce letter spacing since not uppercase */
  color: var(--slate-light);
  margin-bottom: 0.75rem;
  /* Remove text-transform: uppercase */
}

/* Hero card (Business Transformation) */
.service-card--hero {
  background: linear-gradient(135deg, #F8FAFC 0%, #FFFFFF 100%);
  border: 2px solid var(--gold);
  padding: 3rem;
  margin-bottom: 3rem;
}

/* Two-column layout for deliverables */
.service-deliverables-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  margin-top: 2rem;
}

/* Divider between strategic and technical */
.services-divider {
  text-align: center;
  margin: 4rem 0 3rem;
  padding-top: 3rem;
  border-top: 1px solid var(--gray-200);
}

.services-divider h3 {
  font-size: 1.5rem;
  margin-top: 0.5rem;
  color: var(--slate);
  font-weight: 600;
}

/* Technical services grid */
.service-grid--technical {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

@media (max-width: 1200px) {
  .service-grid--technical {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .service-deliverables-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .service-grid--technical {
    grid-template-columns: 1fr;
  }
}

/* =========================
   Offer stack
   ========================= */

.offer-stack {
  background: linear-gradient(180deg, var(--white), var(--gray-50));
}

.phases-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem; /* Reduced from 2rem */
}

.phase-card {
  background: var(--white);
  border-radius: 1.1rem;
  border: 1px solid var(--gray-200);
  padding: 1.5rem; /* Reduced from 1.8rem 1.7rem */
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.05);
}

/* UPDATED: Prominent phase labels with blue background */
.phase-label {
  background: linear-gradient(135deg, var(--navy-mid), var(--navy-deep));
  color: var(--white);
  padding: 0.4rem 1rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  display: inline-block;
  margin-bottom: 0.75rem; /* Reduced from 0.4rem */
  box-shadow: 0 4px 12px rgba(30, 58, 138, 0.25);
}

.phase-title {
  font-family: var(--font-display);
  font-size: 1.15rem; /* Slightly reduced from 1.2rem */
  margin-bottom: 0.75rem; /* Reduced from 1.4rem */
  line-height: 1.3;
}

/* Phase description */
.phase-description {
  color: var(--slate);
  font-size: 0.875rem; /* Reduced from 0.95rem */
  line-height: 1.5;
  margin-bottom: 1.25rem; /* Reduced from 1.5rem */
  font-style: italic;
}

.journey-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.85rem; /* Reduced from 1.1rem */
  margin-bottom: 1.25rem; /* Reduced from 1.4rem */
}

/* UPDATED: Smaller step numbers */
.step-number {
  width: 38px; /* Reduced from 48px */
  height: 38px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--navy-mid), var(--navy-deep));
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.1rem; /* Reduced from 1.25rem */
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.35); /* Softer shadow */
  flex-shrink: 0; /* Prevent shrinking */
}

.step-label {
  font-size: 0.7rem; /* Reduced from 0.75rem */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  /* --gold fails WCAG AA contrast on white at this size (P2-3). */
  color: var(--navy-mid);
  margin-bottom: 0.2rem; /* Reduced from 0.25rem */
}

.step-title {
  font-weight: 600;
  font-size: 0.95rem; /* Added explicit size */
  margin-bottom: 0.25rem; /* Slightly increased from 0.15rem for breathing room */
  line-height: 1.3;
}

.step-price {
  font-size: 0.85rem; /* Reduced from 0.9rem */
  font-family: var(--font-display);
  color: var(--navy-mid);
  margin-bottom: 0.5rem; /* Increased from 0.4rem */
}

.step-description {
  font-size: 0.875rem; /* Reduced from 0.9rem */
  color: var(--slate);
  margin-bottom: 0.5rem; /* Increased from 0.4rem */
  line-height: 1.6;
}

.step-timeline {
  font-size: 0.75rem; /* Reduced from 0.8rem */
  color: var(--slate-light);
  margin-bottom: 0.4rem; /* Increased from 0.3rem */
}

.step-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem; /* Reduced from 0.35rem */
  margin-bottom: 0.5rem; /* Added for spacing before CTA */
}

/* Small tags used across the site (not insights-specific) */
.tag {
  font-size: 0.75rem; /* Reduced from 0.78rem */
  padding: 0.2rem 0.55rem; /* Slightly tighter */
  border-radius: 999px;
  background: var(--gray-100);
  color: var(--navy-deep);
}

.section-cta {
  margin-top: 2.5rem; /* Reduced from 2.6rem */
  text-align: center;
  width: 100%;
  display: flex;
  gap: 16px;          /* adjust: 12 / 16 / 20 */
  flex-wrap: wrap;    /* prevents squish on mobile */
  justify-content: center;
  align-items: center;
}

/* Make the CTA span across the full phases grid */
.phases-grid .section-cta{
  grid-column: 1 / -1;
  justify-self: center;
}


/* Gold credential line inside service detail cards */
.service-detail-card p.service-cred {
  margin: 0.35rem 0 0.7rem;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--gold);
}

/* -------------------------
   Enterprise positioning enhancements
   ------------------------- */

/* Phase card variants for visual hierarchy */
.phase-card--explore {
  opacity: 0.95;
}

.phase-card--scale {
  position: relative;
  border: 2px solid var(--gold);
  background: linear-gradient(135deg, #F8FAFC 0%, #FFFFFF 100%);
  box-shadow: 0 16px 40px rgba(201, 169, 97, 0.15);
}

.phase-card--scale::before {
  content: 'ENTERPRISE PROGRAMS';
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, var(--gold), #B8934E);
  color: var(--white);
  padding: 0.25rem 1rem;
  border-radius: 4px;
  font-size: 0.7rem; /* Reduced from 0.75rem */
  font-weight: 700;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

/* Step qualifier (for enterprise requirements) */
.step-qualifier {
  background: var(--gray-50);
  border: 1px solid var(--gold);
  padding: 0.65rem 0.85rem; /* Reduced padding */
  margin: 0.75rem 0; /* Reduced from 1rem */
  font-size: 0.85rem; /* Reduced from 0.9rem */
  font-weight: 600;
  color: var(--navy-deep);
  border-radius: 4px;
  line-height: 1.5;
}

/* Step CTA link */
.step-cta {
  display: inline-block;
  margin-top: 0.75rem; /* Reduced from 1rem */
  /* --gold fails WCAG AA contrast on white at this size. Known remaining
     gold-contrast gap (P2-3 follow-up), not fixed in this round; sits in
     the same card as .step-label, which was. */
  color: var(--gold);
  font-weight: 600;
  text-decoration: none;
  font-size: 0.875rem; /* Reduced from 0.95rem */
  transition: all 0.2s ease;
  border-bottom: 2px solid transparent;
}

.step-cta:hover {
  color: var(--navy-mid);
  border-bottom-color: var(--gold);
}

.step-cta::after {
  content: ' →';
  display: inline-block;
  transition: transform 0.2s ease;
}

.step-cta:hover::after {
  transform: translateX(4px);
}

/* Make tags slightly more subtle in explore phase */
.phase-card--explore .step-tags {
  opacity: 0.9;
}

/* Responsive adjustments */
@media (max-width: 1200px) {
  .phases-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  
  .phase-card {
    max-width: 800px;
    margin: 0 auto;
  }
}

@media (max-width: 768px) {
  .phase-card {
    padding: 1.25rem;
  }
  
  .phase-card--scale::before {
    top: -10px;
    font-size: 0.65rem;
    padding: 0.2rem 0.75rem;
  }
  
  .step-qualifier {
    font-size: 0.8rem;
    padding: 0.55rem 0.75rem;
  }
  
/* Remove step-number styles entirely */
.step-number {
  display: none; /* Hide if HTML still has them */
}
  
  .journey-step {
    gap: 0.75rem;
  }
}

/* =========================
   Assessment
   ========================= */

.assessment {
  background: var(--white);
}

.assessment-card {
  max-width: 760px;
  margin: 0 auto;
  background: var(--gray-50);
  border-radius: 1.3rem;
  border: 1px solid var(--gray-200);
  padding: 2.3rem 2.1rem;
}

.assessment-header {
  display: flex;
  gap: 1.4rem;
  align-items: flex-start;
  margin-bottom: 1.4rem;
}

.assessment-header .icon-tile {
  margin-bottom: 0;
}

.assessment-header h3 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  margin-bottom: 0.3rem;
}

.assessment-header p {
  font-size: 0.95rem;
  color: var(--slate);
}

.assessment-list {
  list-style: disc;
  padding-left: 1.2rem;
  color: var(--slate);
  font-size: 0.95rem;
  margin-bottom: 1.6rem;
}

/* Tighter bullets inside Service detail cards (without affecting Assessment section) */
.service-detail-card .assessment-list li + li{
  margin-top: 0.12rem; /* was 0.4rem */
}

.assessment-list li + li {
  margin-top: 0.4rem;
}

.assessment-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  text-align: center;
}

.assessment-note {
  font-size: 0.8rem;
  color: var(--slate-light);
}

/* =========================
   About teaser
   ========================= */

.about-teaser {
  background: var(--gray-50);
}

.about-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* =========================
   Proof strip (dark variant)
   ========================= */

.about-teaser--dark{
  background:
    radial-gradient(1200px 600px at 18% 0%, rgba(47, 92, 170, 0.35), transparent 60%),
    radial-gradient(900px 520px at 92% 18%, rgba(184, 138, 59, 0.18), transparent 58%),
    linear-gradient(180deg, var(--navy-deep) 0%, #081225 100%);
}
/* Proof strip: no boxed container around stats */
.about-teaser--dark .hero-stats{
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.about-teaser--dark .stat-number{
  color: var(--gold);
}

.about-teaser--dark .stat-label{
  color: rgba(226, 232, 240, 0.85); /* light gray */
}


/* =========================
   Contact
   ========================= */

.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.3fr);
  gap: 2.2rem;
}

.contact-card {
  background: var(--gray-50);
  border-radius: 1rem;
  border: 1px solid var(--gray-200);
  padding: 1.7rem 1.6rem;
  margin-bottom: 1.4rem;
}

.contact-card h3 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}

.contact-card p {
  font-size: 0.9rem;
  color: var(--slate);
}

.contact-form-title {
  text-align: center;
  margin-bottom: 1.2rem;
  font-size: 1.25rem;
}

/* =========================
   Forms
   ========================= */

.gdbi-form label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
  color: var(--navy-deep);
}

.gdbi-form input[type="text"],
.gdbi-form input[type="email"],
.gdbi-form input[type="tel"],
.gdbi-form input[type="password"],
.gdbi-form input[type="url"],
.gdbi-form select,
.gdbi-form textarea {
  width: 100%;
  padding: 0.75rem 0.8rem;
  border-radius: 0.6rem;
  border: 1.5px solid var(--gray-200);
  background: var(--white);
  font-family: var(--font-body);
  /* 1rem (16px), not smaller: iOS Safari auto-zooms the page on focus for
     any text input under 16px, which is disruptive on a contact form. */
  font-size: 1rem;
  margin-bottom: 1rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.gdbi-form input[type="text"]:focus,
.gdbi-form input[type="email"]:focus,
.gdbi-form input[type="tel"]:focus,
.gdbi-form input[type="password"]:focus,
.gdbi-form select:focus,
.gdbi-form textarea:focus {
  outline: none;
  border-color: var(--navy-mid);
  box-shadow: 0 0 0 1px rgba(30, 64, 175, 0.2);
}

.field-note {
  margin-top: -8px;
  margin-bottom: 14px;
  font-size: 12px;
  opacity: 0.7;
}

.checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin-bottom: 0.9rem;
}

.checkbox-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin-top: 0.18rem;
  cursor: pointer;
}

.checkbox-row span {
  font-size: 0.82rem;
  color: var(--slate);
}
.checkbox-row a,
.job-form-consent a {
  color: var(--navy-mid);
  text-decoration: underline;
}
.checkbox-row a:hover,
.job-form-consent a:hover {
  color: var(--navy-deep);
}

.form-note {
  font-size: 0.8rem;
  color: var(--slate-light);
  margin-bottom: 0.8rem;
}

/* Error message under the form (used only for errors) */
.form-status {
  margin-top: 0.7rem;
  font-size: 0.85rem;
  text-align: center;
  color: #b91c1c; /* red for errors */
  display: none;
}

.form-status.visible {
  display: block;
}

/* Success state */
.form-success {
  display: none;
  margin-top: 1rem;
  font-size: 0.95rem;
  color: var(--slate);
}

.form-success h4 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  margin-bottom: 0.3rem;
}

.form-success p {
  font-size: 0.9rem;
  margin-bottom: 0.9rem;
}

/* When the card is in success state, hide the form and show success block */
.contact-card.success .gdbi-form {
  display: none;
}

.contact-card.success .form-success {
  display: block;
}

/* =========================
   FAQ
   ========================= */

.faq {
  background: var(--gray-50);
}

.faq-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.7rem;
}

.faq-item {
  background: var(--white);
  border-radius: 0.9rem;
  border: 1px solid var(--gray-200);
  padding: 1.5rem 1.4rem;
}

.faq-item h3 {
  font-size: 1.02rem;
  margin-bottom: 0.45rem;
}

.faq-item p {
  font-size: 0.95rem;
  color: var(--slate);
}

/* =========================
   CTA section
   ========================= */

.cta-section {
  background: linear-gradient(140deg, var(--navy-deep), var(--navy-mid));
  color: var(--white);
}

.cta-inner {
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}

.cta-inner h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3vw, 2.7rem);
  letter-spacing: -0.02em;
}

.cta-inner p {
  margin-top: 1rem;
  margin-bottom: 1.7rem;
  font-size: 1.02rem;
  color: rgba(255, 255, 255, 0.9);
}

.cta-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.9rem;
}

/* =========================
   Footer
   ========================= */

.site-footer {
  background: var(--navy-deep);
  color: var(--white);
  padding-top: 3rem;
  padding-bottom: 2rem;
}

.footer-content {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 2.2rem;
  margin-bottom: 2.2rem;
}

.footer-section h4 {
  font-size: 1rem;
  margin-bottom: 0.7rem;
  color: var(--gold);
}

.footer-section p {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.8);
}

.footer-section ul {
  list-style: none;
  padding-left: 0;
}

.footer-section li + li {
  margin-top: 0.25rem;
}

.footer-section a {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.85);
}

.footer-section a:hover {
  color: var(--gold);
}

.footer-bottom {
  border-top: 1px solid rgba(148, 163, 184, 0.4);
  padding-top: 1.2rem;
  text-align: center;
  font-size: 0.8rem;
  color: rgba(226, 232, 240, 0.9);
}

/* =========================
   Responsive (components only)
   ========================= */

@media (max-width: 1024px) {
  .hero-inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero-visual {
    order: -1;
    margin-bottom: 2.2rem;
  }

  .hero-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .card-grid,
  .service-grid,
  .about-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .phases-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer-content {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .contact-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 768px) {
  /* Mobile header menu behavior */
  .nav-links {
    position: absolute;
    inset-inline: 0;
    top: var(--header-height);
    background: rgba(255, 255, 255, 0.98);
    border-bottom: 1px solid var(--gray-200);
    padding: 0.9rem 1.5rem 1.1rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.9rem;
    display: none;
  }

  .nav-links.open {
    display: flex;
  }

  .mobile-menu-toggle {
    display: inline-block;
  }

  .mobile-menu-toggle.open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .mobile-menu-toggle.open span:nth-child(2) {
    opacity: 0;
  }

  .mobile-menu-toggle.open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* Single-column grids on small screens */
  .card-grid,
  .service-grid,
  .about-grid,
  .faq-grid,
  .phases-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero {
    padding-top: calc(var(--header-height) + 2.5rem);
  }

  .hero-card {
    max-width: 100%;
  }

  .footer-content {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* ---------- Split header (left title, right text) ---------- */
.split-head{
  display:grid;
  grid-template-columns: 1.05fr 1.5fr;
  gap: 28px;
  align-items:start;
  margin-bottom: 22px;
}

@media (max-width: 900px){
  .split-head{ grid-template-columns: 1fr; }
}

/* ---------- Link cards grid ---------- */
.link-cards{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

@media (max-width: 900px){
  .link-cards{ grid-template-columns: 1fr; }
}

/* ---------- Card ---------- */
.link-card{
  display:block;
  text-decoration:none;
  border-radius: 18px;
  padding: 18px 18px 16px;
  border: 1px solid var(--gray-200);
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
  color: inherit;
}

.link-card:hover{
  transform: translateY(-2px);
  border-color: var(--gray-300);
  box-shadow: 0 10px 22px rgba(0,0,0,0.08);
}

.link-card__icon{
  width: 88px;
  height: 88px;
  object-fit: contain;
  display:block;
  margin: 2px 0 14px;
}

.link-card__title{
  margin: 0 0 8px;
}

.link-card__text{
  margin: 0;
  opacity: 0.9;
}

/* ---------- Soft background variants ---------- */
/* Adjust these three colors to match your brand palette if needed */
.link-card--sand{ background: #E7DED2; }
.link-card--mint{ background: #C9DAD2; }
.link-card--lilac{ background: #D0D0E4; }

/* =========================
   Split header (Anthropic-like intro layout)
   ========================= */

.split-head{
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 3rem;
  align-items: start;
  margin-bottom: 2.75rem;
}

@media (max-width: 900px){
  .split-head{
    grid-template-columns: 1fr;
    gap: 1.6rem;
  }
}

/* Make Noème product cards pop on the grey section background */
.product-card{
  background: var(--white);
}
/* =========================================
   Highlight split section (reusable)
   - left: statement / title
   - right: explanation + optional CTA
   ========================================= */

.highlight-split{
  padding: 64px 0;
  background: radial-gradient(1200px 600px at 20% 0%, rgba(47, 92, 170, 0.35), transparent 60%),
              radial-gradient(900px 500px at 90% 20%, rgba(168, 120, 34, 0.18), transparent 55%),
              linear-gradient(180deg, #0B1630 0%, #081225 100%);
  color: var(--white);
}

.highlight-split__grid{
  display: grid;
  grid-template-columns: 1.05fr 1.5fr;
  gap: 48px;
  align-items: start;
}

.highlight-split__title{
  margin: 0;
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-size: clamp(32px, 3.2vw, 46px);
  color: var(--white);
}

.highlight-split__title--gold{
  color: var(--gold-500, #B88A3B); /* fallback if token not present */
}

.highlight-split__lead{
  margin: 0 0 12px;
  font-size: 18px;
  line-height: 1.6;
  font-weight: 600;
  color: rgba(255,255,255,0.92);
}

.highlight-split__text{
  margin: 0 0 18px;
  font-size: 16px;
  line-height: 1.7;
  color: rgba(255,255,255,0.86);
}

/* CTA area */
.highlight-split__cta{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: 14px;
}

/* Secondary button on dark backgrounds (keeps your existing button styles intact) */
.btn-on-dark{
  border-color: rgba(255,255,255,0.35);
  color: rgba(255,255,255,0.92);
}

.btn-on-dark:hover{
  border-color: rgba(255,255,255,0.55);
}

/* Responsive */
@media (max-width: 900px){
  .highlight-split{
    padding: 54px 0;
  }

  .highlight-split__grid{
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .highlight-split__cta{
    margin-top: 10px;
  }
}

/* =========================================
   Testimonial band (solo quote)
   ========================================= */

.testimonial-band{
  padding: 72px 0;
  background:
    radial-gradient(1200px 600px at 18% 0%, rgba(47, 92, 170, 0.35), transparent 60%),
    radial-gradient(900px 520px at 92% 18%, rgba(184, 138, 59, 0.18), transparent 58%),
    linear-gradient(180deg, #0B1630 0%, #081225 100%);
  color: var(--white);
}

/* Solo quote: no box, no chips, just typography */
/* Solo quote: centered block */
.testimonial-quote--solo{
  margin: 0 auto;            /* ✅ centers the whole block */
  padding: 0;
  border: 0;
  background: transparent;
  max-width: 980px;
  text-align: center;        /* ✅ centers the text */
}

/* Smaller, calmer typography */
.testimonial-quote--solo p{
  margin: 0 0 18px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(18px, 1.55vw, 24px);  /* ✅ smaller */
  line-height: 1.6;                       /* ✅ comfortable */
  color: var(--gold-500, #B88A3B);
}

/* Center the attribution too */
.testimonial-quote--solo footer{
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: center;       /* ✅ centers footer lines */
  font-family: var(--font-body);
  font-style: normal;
  color: rgba(255,255,255,0.82);
}

.testimonial-quote__name{
  font-weight: 700;
  color: rgba(255,255,255,0.92);
}

.testimonial-quote__role{
  color: rgba(255,255,255,0.72);
}

@media (max-width: 900px){
  .testimonial-band{
    padding: 58px 0;
  }
}
/* -------- Editorial split headers (headline left, copy right) -------- */

.split-head {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 28px;
  align-items: start;
  margin-bottom: 22px;
}

.split-head h2,
.split-head h1 {
  margin: 0;
}

.split-head p {
  margin: 0;
  color: var(--slate-light);
  line-height: 1.65;
  font-size: 16px;
}

@media (max-width: 900px) {
  .split-head {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

/* Shown only when JavaScript is unavailable. The forms still submit in
   that case (they now carry method/action so values travel in the request
   body rather than the URL), but forms.js is what renders the confirmation,
   so the visitor would otherwise get no feedback at all. */
.form-noscript-notice {
  margin: 0 0 20px;
  padding: 12px 16px;
  border-left: 3px solid var(--gold);
  background: var(--gray-50);
  color: var(--slate);
  font-size: 15px;
  line-height: 1.6;
}

/* Privacy policy and other long-form legal pages. Constrained measure and
   generous leading, since these are read carefully rather than scanned. */
.policy-container {
  max-width: 820px;
}
.policy-container h2 {
  margin: 40px 0 12px;
  font-size: 22px;
  line-height: 1.35;
  color: var(--navy-deep);
}
.policy-container p {
  margin: 0 0 14px;
  line-height: 1.75;
  color: var(--slate);
}
.policy-container a,
.policy-list a {
  color: var(--navy-mid);
  text-decoration: underline;
}
.policy-container a:hover,
.policy-list a:hover {
  color: var(--navy-deep);
}
.policy-list {
  margin: 0 0 18px;
  padding-left: 22px;
}
.policy-list li {
  margin-bottom: 8px;
  line-height: 1.7;
  color: var(--slate);
}
.policy-updated {
  color: var(--slate-light);
  font-size: 15px;
}

/* Cloudflare Turnstile widget row. */
.turnstile-row {
  margin: 18px 0;
}
.turnstile-row--failed {
  padding: 12px 14px;
  border-left: 3px solid var(--gold-dark);
  background: var(--gray-50);
}
.turnstile-fallback {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--slate);
}

/* Cookie preference center: a small persistent tab (bottom-right) that
   opens a modal with per-category detail and, for Analytics, a real
   toggle. Never auto-opens; consent stays denied until a visitor
   deliberately interacts with it. */
.cookie-tab {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border: none;
  border-radius: 50%;
  background: var(--gold);
  color: var(--navy-deep);
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(10, 22, 40, 0.3);
}
.cookie-tab:hover {
  background: var(--gold-dark);
}
.cookie-tab-icon {
  width: 26px;
  height: 26px;
}

.consent-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(10, 22, 40, 0.55);
}
/* The [hidden] attribute alone loses to the class rule above (equal
   specificity, author origin wins either way); this is what actually
   makes hiding the overlay via JS (`el.hidden = true`) take effect. */
.consent-modal-overlay[hidden] {
  display: none;
}
.consent-modal {
  width: 100%;
  max-width: 720px;
  max-height: 85vh;
  overflow-y: auto;
  border-radius: 12px;
  background: var(--white);
  box-shadow: 0 20px 60px rgba(10, 22, 40, 0.4);
}
.consent-modal-header {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--gray-200);
  background: var(--white);
}
.consent-modal-header h2 {
  margin: 0;
  font-size: 20px;
  color: var(--navy-deep);
}
.consent-modal-close {
  border: none;
  background: none;
  font-size: 24px;
  line-height: 1;
  color: var(--slate);
  cursor: pointer;
  padding: 4px 8px;
}
.consent-modal-close:hover {
  color: var(--navy-deep);
}
.consent-modal-body {
  padding: 20px 24px;
}
.consent-modal-body > p {
  margin: 0 0 20px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--slate);
}
.consent-modal-body > p a {
  color: var(--navy-mid);
  text-decoration: underline;
}
.consent-modal-footer {
  position: sticky;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  padding: 16px 24px;
  border-top: 1px solid var(--gray-200);
  background: var(--white);
}

.consent-category {
  border-top: 1px solid var(--gray-200);
}
.consent-category:first-of-type {
  border-top: none;
}
.consent-category-header {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 14px 4px;
  border: none;
  background: none;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  color: var(--navy-deep);
  text-align: left;
  cursor: pointer;
}
.consent-category-chevron {
  display: inline-block;
  transition: transform 0.15s ease;
  color: var(--slate-light);
}
.consent-category-chevron--open {
  transform: rotate(90deg);
}
.consent-category-name {
  flex: 1;
}
.consent-category-always {
  font-size: 13px;
  font-weight: 600;
  color: var(--navy-mid);
}
.consent-category-always--muted {
  font-weight: 400;
  color: var(--slate-light);
}
.consent-category-body {
  padding: 0 4px 16px 34px;
}
.consent-category-description {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--slate);
}
.consent-category-empty {
  margin: 0;
  padding: 10px 14px;
  border-radius: 6px;
  background: var(--gray-50);
  font-size: 14px;
  color: var(--slate-light);
}
.consent-category-table {
  font-size: 13px;
}

.consent-toggle {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
  flex-shrink: 0;
}
.consent-toggle-input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}
.consent-toggle-slider {
  position: absolute;
  inset: 0;
  border-radius: 11px;
  background: var(--gray-300);
  transition: background 0.15s ease;
}
.consent-toggle-slider::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--white);
  transition: transform 0.15s ease;
}
.consent-toggle-input:checked + .consent-toggle-slider {
  background: var(--navy-mid);
}
.consent-toggle-input:checked + .consent-toggle-slider::before {
  transform: translateX(18px);
}

/* Tables inside long-form legal pages (purpose/legal-basis/retention,
   cookies). Wrapped in .policy-table-wrap for horizontal scroll on
   narrow viewports, since these tables are too wide to reflow. */
.policy-table-wrap {
  margin: 0 0 22px;
  overflow-x: auto;
}
.policy-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: 15px;
}
.policy-table th,
.policy-table td {
  padding: 10px 14px;
  text-align: left;
  vertical-align: top;
  border: 1px solid var(--gray-200);
  line-height: 1.6;
  color: var(--slate);
}
.policy-table th {
  background: var(--gray-50);
  color: var(--navy-deep);
  font-weight: 600;
}
/*! ---------- END: 03-components.css ---------- */


/*! ---------- START: pages/insights-index.css ---------- */
/* Insights index only (filters + list layout). */
/* pages/insights-index.css
   Insights index page only (filters + list)
*/

.insights-index-top {
  display: flex;
  gap: 24px;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
}

.insights-index-title h1 {
  margin: 0;
}

.insights-index-intro {
  margin: 10px 0 0;
  max-width: 68ch;
}

.insights-filters {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  flex-wrap: wrap;
}

.insights-filter label {
  display: block;
  font-size: 0.85rem;
  color: var(--slate);
  margin-bottom: 6px;
}

.insights-filter select {
  min-width: 220px;
  padding: 10px 12px;
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  background: #fff;
  font-family: inherit;
}

.insights-list {
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(2, minmax(320px, 1fr));
  gap: 22px;
}

@media (max-width: 900px) {
  .insights-list {
    grid-template-columns: 1fr;
  }
}

.insights-item {
  padding: 18px 18px 16px;
  border: 1px solid var(--gray-200);
  border-radius: 14px;
  background: #fff;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.insights-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(10, 22, 40, 0.08);
  border-color: rgba(201, 169, 97, 0.55);
}

.insights-item-meta {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 0.85rem;
  margin-bottom: 10px;
}

.insights-item-meta .insights-topic {
  color: var(--gold);
  font-weight: 700;
}

.insights-item-meta .insights-date,
.insights-item-meta .insights-edition {
  color: var(--slate);
  font-weight: 600;
}

/* A series is a publication, not an audience, so it reads as a named thing
   rather than another neutral metadata field. --navy-mid is a real token;
   the earlier --navy-600 did not exist, and its fallback resolved to the exact
   colour of the edition badge it was supposed to differ from. */
.insights-item-meta .insights-series {
  color: var(--navy-mid);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.insights-item-title {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.2;
}

.insights-item-title a {
  color: var(--navy-deep);   /* black-ish */
  text-decoration: none;
}

.insights-item-title a:hover {
  color: var(--gold);       /* hover gold */
}

.insights-item-title a:visited {
  color: #6b7280;           /* visited gray */
}

.insights-item-excerpt {
  margin: 0 0 14px;
  color: var(--slate);
  line-height: 1.7;
}

.insights-item-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.insights-empty {
  margin-top: 18px;
  color: var(--slate);
}
/*! ---------- END: pages/insights-index.css ---------- */


/*! ---------- START: pages/insights-post.css ---------- */
/* Insights post only (article typography + callouts/timeline/checklists). */
/* pages/insights-post.css
   Insights post page only (post meta + typography)
*/

.insights-post-container {
  max-width: 860px;
}

.insights-post-meta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 10px;
  font-size: 0.9rem;
}

.insights-post-category {
  color: var(--gold);
  font-weight: 800;
}

.insights-post-date,
.insights-post-edition {
  color: var(--slate);
  font-weight: 600;
}

.insights-post-title {
  margin: 0 0 12px;
  color: var(--navy-deep);
}

.insights-post-description {
  margin: 0 0 14px;
  color: var(--slate);
  font-size: 1.05rem;
  line-height: 1.7;
}

.insights-post-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

/* Body typography */
.insights-post-body h2 {
  margin-top: 28px;
}

.insights-post-body p,
.insights-post-body li {
  line-height: 1.85;
}

/* Optional article helpers (if you still use these wrappers in templates) */
.article-wrap {
  max-width: 920px;
  margin: 0 auto;
}

.article-callout {
  border: 1px solid var(--gray-200);
  background: var(--gray-50);
  border-radius: 14px;
  padding: 16px 16px;
  margin: 18px 0;
}

.article-callout strong {
  display: inline-block;
  margin-bottom: 6px;
}

.article-divider {
  height: 1px;
  background: var(--gray-200);
  margin: 26px 0;
}
/**
 * src/styles/pages/insights-post.css
 *
 * What this file does:
 * - Adds rich “article formatting” blocks for insight posts only:
 *   callouts, critical alerts, timelines, step-by-step cards,
 *   case study boxes, and readable tables.
 *
 * Why:
 * - Lets you paste/keep nicely formatted HTML inside Markdown posts
 * - Avoids polluting global components CSS (03-components.css)
 *
 * IMPORTANT:
 * - Everything is scoped under .insights-post-body so it won't affect other pages.
 */

/* ---------------------------------------
   Base article spacing + typography polish
---------------------------------------- */

.insights-post-body {
  /* Keeps article content readable and consistent */
  font-size: 16px;
  line-height: 1.85;
}

.insights-post-body p {
  margin: 0 0 1rem;
  color: var(--navy-deep);
}

.insights-post-body p.lead,
.insights-post-body .lead {
  /* “Summary paragraph” style (like your Loi 25 page) */
  font-size: 1.1rem;
  line-height: 1.8;
  color: var(--slate);
  margin: 0 0 1.25rem;
}

.insights-post-body a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.insights-post-body a:hover {
  color: var(--gold);
}

.insights-post-body ul,
.insights-post-body ol {
  margin: 0 0 1.15rem;
  padding-left: 1.25rem;
}

.insights-post-body li {
  margin: 0.35rem 0;
}

.insights-post-body hr {
  border: 0;
  height: 1px;
  background: var(--gray-200);
  margin: 2rem 0;
}

/* Figures / images */
.insights-post-body figure {
  margin: 1.4rem 0;
}

.insights-post-body figure img {
  border-radius: 14px;
  border: 1px solid var(--gray-200);
}

.insights-post-body figcaption {
  margin-top: 0.6rem;
  font-size: 0.9rem;
  color: var(--slate);
}

/* Inline code / code blocks */
.insights-post-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.92em;
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  padding: 0.15em 0.35em;
  border-radius: 8px;
}

.insights-post-body pre {
  background: #0b1220;
  color: #e5e7eb;
  border-radius: 14px;
  padding: 16px 16px;
  overflow: auto;
  border: 1px solid rgba(226, 232, 240, 0.15);
  margin: 1.25rem 0;
}

.insights-post-body pre code {
  background: transparent;
  border: 0;
  padding: 0;
  color: inherit;
}

/* ---------------------------------------
   Callouts / summaries / alerts
---------------------------------------- */

/* Blue-gold “info” callout (supports Loi-25 HTML class name) */
.insights-post-body .callout {
  background: linear-gradient(
    135deg,
    rgba(30, 58, 138, 0.06),
    rgba(201, 169, 97, 0.06)
  );
  border: 1px solid var(--gray-200);
  border-radius: 16px;
  padding: 18px 18px;
  margin: 1.25rem 0;
}

.insights-post-body .callout strong {
  display: inline-block;
  margin-bottom: 0.35rem;
}

/* “Critical deadline / warning” box (supports Loi-25 HTML class name) */
.insights-post-body .warning-box,
.insights-post-body .critical-alert {
  background: linear-gradient(
    135deg,
    rgba(220, 38, 38, 0.08),
    rgba(220, 38, 38, 0.03)
  );
  border: 1px solid rgba(220, 38, 38, 0.22);
  border-radius: 16px;
  padding: 18px 18px;
  margin: 1.25rem 0;
}

.insights-post-body .warning-box h3,
.insights-post-body .critical-alert h3 {
  margin-top: 0;
}

/* Small “badge” row sometimes used under the hero */
.insights-post-body .post-badges {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 1.25rem;
}

.insights-post-body .post-badge {
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--gray-200);
  background: var(--gray-50);
  color: var(--navy-deep);
}

/* ---------------------------------------
   Case study box (supports Loi-25 HTML feel)
---------------------------------------- */

.insights-post-body .case-study-box {
  background: #ffffff;
  border: 1px solid var(--gray-200);
  border-radius: 16px;
  padding: 18px 18px;
  margin: 1.5rem 0;
}

.insights-post-body .case-study-box h3 {
  margin: 0 0 0.6rem;
}

.insights-post-body .case-study-box ul {
  margin-bottom: 0;
}

/* ---------------------------------------
   “10 essential measures” step-by-step list
   (supports a clean numbered card list)
---------------------------------------- */

.insights-post-body .measure-list {
  background: #ffffff;
  border: 1px solid var(--gray-200);
  border-radius: 16px;
  overflow: hidden; /* so separators are clean */
  margin: 1.6rem 0;
}

.insights-post-body .measure {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 16px;
  padding: 20px;
  border-top: 1px solid var(--gray-200);
}

.insights-post-body .measure:first-child {
  border-top: 0;
}

.insights-post-body .measure-number {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: var(--gold);
  color: #fff;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  line-height: 1;
}

.insights-post-body .measure h3 {
  margin: 0 0 0.45rem;
  line-height: 1.25;
}

.insights-post-body .measure p {
  margin: 0 0 0.75rem;
  color: var(--navy-deep);
}

.insights-post-body .measure .practical-tip,
.insights-post-body .measure .common-gap {
  margin: 0.5rem 0 0;
  padding: 12px 12px;
  border-radius: 12px;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  color: var(--slate);
}

/* ---------------------------------------
   Timeline (supports Loi-25 HTML class name)
---------------------------------------- */

.insights-post-body .timeline {
  position: relative;
  padding-left: 2.75rem;
  margin: 1.75rem 0;
}

.insights-post-body .timeline::before {
  /* vertical line */
  content: "";
  position: absolute;
  left: 1rem;
  top: 0.25rem;
  bottom: 0.25rem;
  width: 2px;
  background: rgba(201, 169, 97, 0.75);
  border-radius: 999px;
}

.insights-post-body .timeline-item {
  position: relative;
  padding: 0.25rem 0 1.25rem;
}

.insights-post-body .timeline-item:last-child {
  padding-bottom: 0;
}

.insights-post-body .timeline-item::before {
  /* marker */
  content: "";
  position: absolute;
  left: -2.05rem;
  top: 0.5rem;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: #ffffff;
  border: 3px solid var(--gold);
}

.insights-post-body .timeline-date {
  font-weight: 800;
  color: var(--navy-mid);
  margin: 0 0 0.35rem;
}

.insights-post-body .timeline-title {
  margin: 0 0 0.45rem;
  font-weight: 900;
}

.insights-post-body .timeline-item ul {
  margin: 0.5rem 0 0;
}

/* ---------------------------------------
   Tables (supports Loi-25 “comparison-table”)
---------------------------------------- */

/* Wrap tables so they scroll on mobile */
.insights-post-body .table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--gray-200);
  border-radius: 16px;
  margin: 1.5rem 0;
  background: #fff;
}

/* Default styling for any table inside post body */
.insights-post-body table {
  width: 100%;
  border-collapse: collapse;
  min-width: 640px; /* encourages horizontal scroll on small screens */
}

/* If the HTML uses class="comparison-table", style it the same */
.insights-post-body table.comparison-table,
.insights-post-body .comparison-table {
  width: 100%;
}

.insights-post-body thead th {
  background: linear-gradient(135deg, var(--navy-mid), var(--navy-deep));
  color: #ffffff;
  text-align: left;
  padding: 14px 14px;
  font-size: 0.92rem;
  letter-spacing: 0.01em;
}

.insights-post-body tbody td {
  padding: 14px 14px;
  border-bottom: 1px solid var(--gray-200);
  vertical-align: top;
}

.insights-post-body tbody tr:nth-child(even) td {
  background: var(--gray-50);
}

/* ---------------------------------------
   Quick “checklist” box
---------------------------------------- */

.insights-post-body .checklist {
  background: #ffffff;
  border: 1px solid var(--gray-200);
  border-radius: 16px;
  padding: 18px 18px;
  margin: 1.5rem 0;
}

.insights-post-body .checklist h3 {
  margin: 0 0 0.75rem;
}

.insights-post-body .checklist-item {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  align-items: start;
  padding: 10px 0;
  border-top: 1px solid var(--gray-200);
}

.insights-post-body .checklist-item:first-child {
  border-top: 0;
}

.insights-post-body .checklist-item::before {
  content: "✓";
  font-weight: 900;
  color: var(--gold);
  margin-top: 1px;
}
/* Related articles block, generated at build time in build-insights.mjs
   from shared category/tags with the current post. Reuses .link-cards/
   .link-card from 03-components.css rather than new grid CSS. */
.insights-related {
  margin: 40px 0 0;
  padding-top: 28px;
  border-top: 1px solid var(--gray-200);
}

.insights-related__title {
  margin: 0 0 18px;
  color: var(--navy-deep);
}

.insights-related__grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 900px) {
  .insights-related__grid {
    grid-template-columns: 1fr;
  }
}

/* Post page nav (Prev / Back / Next) */
/* Post page nav (Prev / Back / Next) */
.post-nav{
  margin: 28px 0 40px;
  padding-top: 18px;
  border-top: 1px solid var(--gray-200); /* subtle line only */
  background: transparent;

  display:flex;
  gap:12px;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
}

/* Ensure the buttons look centered even when they wrap */
.post-nav .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Mobile: stack nicely */
@media (max-width: 640px) {
  .post-nav {
    gap: 10px;
  }

  .post-nav__col,
  .post-nav__col--center,
  .post-nav__col--right {
    min-width: 100%;
    justify-content: center;
  }

  .post-nav .btn {
    width: 100%;
  }
}

/* Series badge. Filed here with the other .insights-post-* rules rather than in
   insights-index.css, which is where it was first written by mistake. */
.insights-post-meta .insights-post-series {
  color: var(--navy-mid);
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* ------------------------------------------------------------------ *
 * In-post media.
 *
 * New capability: none of the 27 posts written for this site contain an
 * image or a video, so there was no existing convention to follow. These
 * rules exist for the imported Squarespace posts.
 * ------------------------------------------------------------------ */

.insights-post-body figure {
  margin: 32px 0;
}

.insights-post-body figure img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  /* Wide source images (2500px) would otherwise dominate the column. */
  display: block;
}

.insights-post-body figcaption {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--slate);
  font-style: italic;
}

.insights-post-body img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 24px 0;
}

/* 16:9 without reserving space via padding hacks. aspect-ratio is supported
   everywhere this site targets, and it prevents the layout shift that an
   unsized iframe causes on load. */
.video-embed {
  margin: 32px 0;
  aspect-ratio: 16 / 9;
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  background: var(--navy-deep);
}

.video-embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
/*! ---------- END: pages/insights-post.css ---------- */


/*! ---------- START: pages/case-studies.css ---------- */
/**
 * case-studies.css
 *
 * What this file does:
 * - Styles the Case Studies grid + card internals
 * - Scoped to .page-case-studies so it won't affect other pages
 */

/* Grid wrapper (only the inner div should use .case-studies-grid) */
.page-case-studies .case-studies-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  margin-top: 18px;
}

/* Card internals */
.page-case-studies .case-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
}

.page-case-studies .case-meta {
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.75;
  margin-bottom: 4px;
}

.page-case-studies .case-subtitle {
  margin-top: 2px;
  opacity: 0.85;
}

/* Results list */
.page-case-studies .case-results {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}

.page-case-studies .case-results li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  align-items: start;
  line-height: 1.4;
}

.page-case-studies .case-results li::before {
  content: "✓";
  font-weight: 700;
  opacity: 0.8;
  margin-top: 1px;
}

/* CTA row inside each card */
.page-case-studies .case-actions {
  margin-top: auto;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
/*! ---------- END: pages/case-studies.css ---------- */


/*! ---------- START: pages/careers.css ---------- */
/* src/styles/pages/careers.css
   Careers page: filters, department sections, and job cards
   Scoped to .page-careers to avoid impacting other pages.
   
   This file should be copied to public/assets/css/careers.css by your build process.
*/

/* =========================
   Careers Filters
   ========================= */

.careers-filters {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: flex-end;
  margin: 24px 0 32px 0;
  padding: 0;
}

.careers-filter {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 200px;
  flex: 1;
}

.careers-filter span {
  font-size: 13px;
  font-weight: 500;
  color: var(--slate, #475569);
  text-transform: none;
}

.careers-filter select {
  border: 1px solid var(--gray-200, #e2e8f0);
  border-radius: 8px;
  padding: 10px 14px;
  background: var(--white, #fff);
  font-size: 14px;
  font-family: var(--font-body, 'Manrope', sans-serif);
  color: var(--navy-deep, #0A1628);
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.careers-filter select:hover {
  border-color: var(--slate, #475569);
}

.careers-filter select:focus {
  outline: none;
  border-color: var(--navy-mid, #1E3A8A);
  box-shadow: 0 0 0 3px rgba(30, 58, 138, 0.1);
}

.careers-filters .btn {
  margin-top: auto;
  white-space: nowrap;
}

/* =========================
   Department Sections (Notion-like grouping)
   ========================= */

.careers-dept-section {
  margin-top: 48px;
  margin-bottom: 24px;
}

.careers-dept-section:first-child {
  margin-top: 0;
}

.careers-dept-title {
  margin: 0 0 15px;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--navy-deep, #0A1628);
  font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
}

.careers-dept-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 18px;
}

/* =========================
   Compact Job Cards
   ========================= */

.job-card-compact {
  display: block;
  padding: 14px 16px;
  text-decoration: none;
  background: var(--white, #fff);
  border: 1px solid var(--gray-200, #e2e8f0);
  border-radius: 8px;
  transition: all 0.2s ease;
  color: inherit;
}

.job-card-compact:hover {
  border-color: var(--gold, #C9A961);
  box-shadow: 0 2px 8px rgba(10, 22, 40, 0.06);
}

.job-card-compact .job-title {
  margin: 0 0 6px;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--navy-deep, #0A1628);
  font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
}

.job-card-compact .job-meta {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--slate, #64748B);
  line-height: 1.4;
  display: flex;
  flex-wrap: wrap;
  gap: 0 8px;
}

.job-card-compact .job-meta-item {
  display: inline;
  white-space: nowrap;
}

.job-card-compact .job-dot {
  opacity: 0.5;
  margin: 0 4px;
}

/* Hide these if they still exist in HTML */
.job-card-compact .job-req,
.job-card-compact .job-link {
  display: none;
}

/* =========================
   Empty State
   ========================= */

.jobs-empty {
  margin-top: 32px;
  padding: 40px 20px;
  text-align: center;
  color: var(--slate, #475569);
  font-size: 15px;
  background: var(--gray-50, #F8FAFC);
  border-radius: 12px;
}

/* =========================
   Responsive Design
   ========================= */

@media (max-width: 980px) {
  .careers-dept-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }
  
  .careers-filters {
    gap: 12px;
  }
  
  .careers-filter {
    min-width: 180px;
  }
}

@media (max-width: 640px) {
  .careers-dept-grid {
    grid-template-columns: 1fr;
  }
  
  .careers-filters {
    flex-direction: column;
    align-items: stretch;
  }
  
  .careers-filter {
    width: 100%;
    min-width: 0;
  }
  
  .careers-filters .btn {
    width: 100%;
    margin-top: 8px;
  }
  
  .careers-dept-title {
    font-size: 1.25rem;
  }
}

/* =========================
   Integration with site.css
   ========================= */

/* Ensure consistent button styling */
.page-careers .btn-small {
  padding: 8px 16px;
  font-size: 13px;
}
/*! ---------- END: pages/careers.css ---------- */


/*! ---------- START: pages/job-post.css ---------- */
/* pages/job-post.css
   Job page styling + markdown resets (scoped to .page-job so insights styles don’t break jobs)
*/

/* Meta line under the job title */
.page-job .job-meta-line {
  margin: 14px auto 0;
  max-width: 760px;
  color: var(--slate);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* Job markdown container */
.page-job .job-body {
  max-width: 860px;
  margin: 0 auto;
}

/* Headings inside job body */
.page-job .job-body h2,
.page-job .job-body h3 {
  margin-top: 2rem;
}

/* IMPORTANT:
   Reset list styling for job pages so insights/case-study “checklist grid” styles do not apply here.
*/
.page-job .job-body ul,
.page-job .job-body ol {
  margin: 0.9rem 0 1.2rem;
  padding-left: 1.35rem;
  display: block;
}

.page-job .job-body ul { list-style: disc; }
.page-job .job-body ol { list-style: decimal; }

.page-job .job-body li {
  display: list-item !important;
  margin: 0.35rem 0;
  line-height: 1.7;
}

/* If any global stylesheet adds checkmarks with ::before, kill it for jobs */
.page-job .job-body li::before {
  content: none !important;
}

/* Language toggle */
.page-job .lang-toggle {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 10px 0 28px;
}

.page-job .lang-toggle .btn.is-active {
  box-shadow: 0 0 0 2px rgba(0,0,0,0.08) inset;
}

/* Apply form layout */
.page-job .job-apply-card {
  max-width: 860px;
  margin: 0 auto;
}

.page-job .job-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.page-job .job-form-field--full {
  grid-column: 1 / -1;
}

.page-job .job-form-field label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
}

/* Text inputs + selects */
.page-job .job-form-field input:not([type="checkbox"]),
.page-job .job-form-field select {
  width: 100%;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: #fff;
  /* Form controls don't inherit font/color from the page by default (the
     browser's own UA stylesheet gives them a separate "Control" font) -
     without this they silently render in the browser's default font
     instead of the site's own, which is what let the Places search box's
     mismatch go unnoticed next to fields with the same latent gap. */
  font: inherit;
  color: inherit;
}

/* CRITICAL FIX:
   Do NOT apply text-input styling to checkboxes (this caused the “checkbox in the middle” issue). */
.page-job .job-form-field input[type="checkbox"] {
  width: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  margin: 0;
}

/* Checkbox rows (new template uses .job-form-check) */
.page-job .job-form-check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  line-height: 1.5;
  color: var(--slate);
  font-weight: 500; /* keep it readable, not as heavy as field labels */
  margin: 2px 0 0;
}

.page-job .job-form-check input[type="checkbox"] {
  margin-top: 4px; /* aligns box with first line of text */
}

/* Backward compatibility: if any older pages still use .job-form-consent */
.page-job .job-form-consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  line-height: 1.5;
  color: var(--slate);
}

.page-job .job-form-consent input[type="checkbox"] {
  margin-top: 4px;
}

/* Actions row */
.page-job .job-form-actions {
  margin-top: 16px;
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
}

.page-job .job-form-status {
  margin: 0;
  color: var(--slate);
}

/* Responsive */
@media (max-width: 720px) {
  .page-job .job-form-grid {
    grid-template-columns: 1fr;
  }
}
/* Helper text under fields (why we ask / instructions) */
.page-job .job-form-help {
  margin: 6px 0 0;
  font-size: 0.9rem;
  color: var(--slate);
  opacity: 0.9;
  line-height: 1.5;
}

/* Textarea matches inputs visually */
.page-job .job-form-field textarea {
  width: 100%;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: #fff;
  resize: vertical;
  min-height: 220px;
  font: inherit;
  color: inherit;
}

/* Checkbox alignment (prevents “floating in the middle” issues) */
.page-job .job-form-consent input[type="checkbox"] {
  margin-top: 4px;
}
/*! ---------- END: pages/job-post.css ---------- */


/*! ---------- START: pages/about.css ---------- */
/**
 * about.css
 *
 * What this file does:
 * - Styles the Company / A propos page's hero and KPI band, which keep a
 *   deliberately distinct treatment (dark full-bleed metrics band has no
 *   equivalent section type elsewhere on the site)
 * - Adds a handful of narrow, content-specific classes (failure-pattern
 *   pill, executive bio avatar, location cards) that have no shared
 *   equivalent to reuse
 * - Everything else on this page (containers, section rhythm, section
 *   headers, card grids, icon tiles) uses the shared components from
 *   02-layout.css / 03-components.css directly, no page-specific class
 * - Scoped to .page-about so it won't affect other pages
 */

.page-about .about-hero {
  padding: clamp(5rem, 10vw, 7rem) 0 clamp(3.5rem, 6vw, 5rem);
  background: linear-gradient(180deg, #fff 0%, var(--gray-50) 100%);
  border-bottom: 3px solid var(--navy-deep);
}

/* Page label ("Company" / "Entreprise") uses the shared .section-subtitle
   directly in the HTML now, same as Insights' own page label
   (src/pages/insights.html) -- no page-specific class needed. */

.page-about .about-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4vw, 3.6rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--navy-deep);
  margin-bottom: 1.75rem;
  max-width: 55rem;
}

.page-about .about-hero-subtitle {
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--slate);
  max-width: 52rem;
  margin-bottom: 2.5rem;
  font-weight: 400;
}

.page-about .about-hero-cta {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
}

/* Existing KPI band right after the hero: the full-bleed navy background
   stays a deliberate exception (no other section type on the site is a
   dark full-bleed stats band), but the cards inside it now use the shared
   .card/.stat-number/.stat-label (see about.html) instead of their own
   near-duplicate recipe. */
.page-about .about-metrics-section {
  padding: clamp(4rem, 7vw, 5.5rem) 0;
  background: var(--navy-deep);
  position: relative;
  overflow: hidden;
}

.page-about .about-metrics-section::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(201, 165, 92, 0.08) 0%, transparent 70%);
}

.page-about .about-metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* .card's stat-number/stat-label are left-aligned by default; the KPI
   band's cards read better centered, matching how they always have. */
.page-about .about-metrics-grid .stat-number,
.page-about .about-metrics-grid .stat-label {
  text-align: center;
}

.page-about .about-metrics-grid .stat-number {
  font-size: clamp(2.4rem, 4vw, 3rem);
}

/* Why Programs Fail: category pill has no exact shared equivalent (.tag is
   a different shape/weight); kept as a narrow, scoped exception. */
.page-about .fail-pill {
  display: inline-flex;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  background: var(--navy-deep);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(10, 22, 40, 0.2);
  margin-bottom: 1.25rem;
}

/* Executive Team bio cards: initials avatar and credential line have no
   shared equivalent. */
.page-about .exec-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--navy-deep);
  color: var(--gold);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.1rem;
  margin-bottom: 1.25rem;
}

.page-about .exec-credentials {
  color: var(--gold);
  font-weight: 700;
  font-size: 0.85rem;
  margin: 0.35rem 0 0.5rem;
}

.page-about .exec-title {
  color: var(--slate);
  font-size: 0.9rem;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--gray-200);
}

.page-about .exec-card p {
  margin-bottom: 0.85rem;
}

.page-about .exec-card p:last-child {
  margin-bottom: 0;
}

/* Location cards (Where We've Operated) */
.page-about .location-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--navy-deep);
  margin-bottom: 0.35rem;
}

.page-about .location-detail {
  color: var(--slate);
  font-size: 0.9rem;
}

/* The closing CTA now uses the shared .cta-section/.cta-inner/.cta-buttons
   directly (see about.html) -- no page-specific CSS needed there, since
   .cta-inner's h2/p already inherit/set white text on the dark background
   and .section-subtitle (used here for the "Next Step" kicker) is already
   gold by default. */

@media (max-width: 980px) {
  .page-about .about-metrics-grid {
    grid-template-columns: 1fr;
    max-width: 450px;
  }
}
/*! ---------- END: pages/about.css ---------- */