/*
Theme Name:  Arlieo
Theme URI:   https://arlieo.com
Description: Custom theme for Arlieo — B2B fractional marketing for land-based, heavy and rural industry.
Version:     2.3.3
Author:      Arlieo
Author URI:  https://arlieo.com
Text Domain: arlieo
*/



/* ============================================================
   CLEAN REWRITE v2.0.0
   Single source of truth. One definition per component.
   No !important. No patch layers. Proper cascade.
   ============================================================ */


/* ============================================================
   1. SELF-HOSTED FONTS
   ============================================================ */

@font-face { font-family:'Bebas Neue'; src:url('fonts/BebasNeue-Regular.woff2') format('woff2'),url('fonts/BebasNeue-Regular.woff') format('woff'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Inter'; src:url('fonts/Inter-Regular.woff2') format('woff2'),url('fonts/Inter-Regular.woff') format('woff'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Inter'; src:url('fonts/Inter-Medium.woff2') format('woff2'),url('fonts/Inter-Medium.woff') format('woff'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Inter'; src:url('fonts/Inter-SemiBold.woff2') format('woff2'),url('fonts/Inter-SemiBold.woff') format('woff'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Inter'; src:url('fonts/Inter-Bold.woff2') format('woff2'),url('fonts/Inter-Bold.woff') format('woff'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'DM Mono'; src:url('fonts/DMMono-Regular.woff2') format('woff2'),url('fonts/DMMono-Regular.woff') format('woff'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'DM Mono'; src:url('fonts/DMMono-Medium.woff2') format('woff2'),url('fonts/DMMono-Medium.woff') format('woff'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'DM Mono'; src:url('fonts/DMMono-Italic.woff2') format('woff2'),url('fonts/DMMono-Italic.woff') format('woff'); font-weight:400; font-style:italic; font-display:swap; }


/* ============================================================
   2. DESIGN TOKENS
   ============================================================ */

:root {
    /* Palette primitives */
    --stone-100: #F7F5F0;
    --stone-90:  #EDEAE3;
    --stone-80:  #E0DDD6;
    --stone-60:  #C0BDB6;
    --stone-40:  #9E9B94;
    --stone-20:  #5C5A55;
    --stone-10:  #1E1D1A;
    --ink:       #111110;

    --green-vivid: #00E676;
    --green-forest:#006B30;
    --green-deep:  #004D22;

    /* Semantic — surfaces */
    --bg:          var(--stone-100);
    --bg-alt:      var(--stone-90);
    --bg-dark:     var(--stone-10);
    --bg-ink:      var(--ink);       /* slightly darker than --bg-dark — used for deepest dark sections */
    --bg-green:    var(--green-deep);

    /* Semantic — borders */
    --border:      var(--stone-60);
    --border-dark: rgba(255,255,255,0.10);

    /* Semantic — text on light */
    --text:        var(--stone-10);
    --text-body:   #2C2C2A;
    --text-muted:  #5F5E5A;

    /* Semantic — text on dark */
    --text-on-dark:      #FFFFFF;
    --text-on-dark-mid:  rgba(255,255,255,0.80);
    --text-on-dark-low:  rgba(255,255,255,0.55);

    /* Semantic — accent (RULE: never swap these)
       on-light = forest green for light backgrounds
       on-dark  = vivid green for dark/green backgrounds */
    --accent-light: var(--green-forest);  /* #006B30 */
    --accent-dark:  var(--green-vivid);   /* #00E676 */

    /* Typography */
    --f-display: 'Bebas Neue', Impact, sans-serif;
    --f-body:    'Inter', 'Helvetica Neue', Arial, sans-serif;
    --f-mono:    'DM Mono', 'Courier New', monospace;

    /* Easing */
    --ease:    cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out:cubic-bezier(0.16, 1, 0.3, 1);

    /* Layout */
    --max-w:  1320px;
    --nav-h:  80px;

    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.08);
    --shadow-md: 0 8px 28px rgba(0,0,0,0.12);

    /* Clip angles — diagonal section transitions */
    --clip-angle: 56px;
}


/* ============================================================
   3. RESET & BASE
   ============================================================ */

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

html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
/* WordPress admin bar: compensate fixed nav position when logged in */
.admin-bar .site-header { top: 32px; }
@media screen and (max-width: 782px) { .admin-bar .site-header { top: 46px; } }

body {
    background:   var(--bg);
    color:        var(--text-body);
    font-family:  var(--f-body);
    line-height:  1.65;
    -webkit-font-smoothing: antialiased;
    overflow-x:   hidden;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; font-size: inherit; }
ul, ol { list-style: none; }

h1, h2, h3, h4, h5, h6 {
    font-family:    var(--f-display);
    font-weight:    400;
    line-height:    0.92;
    letter-spacing: 0.5px;
    color:          var(--text);
}

p { max-width: 68ch; }
p.wide, .wide p, .full-width p { max-width: none; }


/* ============================================================
   4. UTILITIES
   ============================================================ */

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.container { width: 100%; max-width: var(--max-w); margin: 0 auto; padding: 0 48px; }

.t-accent-light { color: var(--accent-light); }
.t-accent-dark  { color: var(--accent-dark); }
.t-accent       { color: var(--accent-light); } /* default — override per section */
.t-white        { color: #fff; }
.t-muted        { color: var(--text-muted); }

/* Ghost numeral — decorative background number */
.ghost-num {
    position:       absolute;
    font-family:    var(--f-display);
    font-size:      clamp(200px, 28vw, 380px);
    line-height:    1;
    pointer-events: none;
    user-select:    none;
    letter-spacing: -8px;
    z-index:        0;
    /* Dark sections override opacity and colour via section class */
    color:          var(--stone-10);
    opacity:        0.035;
}

/* Scroll-triggered animations */
.anim-fade-up,
.anim-fade-in,
.anim-fade-left,
.anim-fade-right,
.anim-scale-up {
    opacity:    0;
    transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
    transition-delay: var(--anim-delay, 0ms);
}
.anim-fade-up    { transform: translateY(28px); }
.anim-fade-in    { transform: none; }
.anim-fade-left  { transform: translateX(-28px); }
.anim-fade-right { transform: translateX(28px); }
.anim-scale-up   { transform: scale(0.96); }

.anim-fade-up.visible,
.anim-fade-in.visible,
.anim-fade-left.visible,
.anim-fade-right.visible,
.anim-scale-up.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .anim-fade-up, .anim-fade-in, .anim-fade-left, .anim-fade-right, .anim-scale-up {
        opacity: 1; transform: none; transition: none;
    }
}


/* ============================================================
   5. NAVIGATION
   ============================================================ */

.site-header {
    position:   fixed;
    top: 0; left: 0; right: 0;
    z-index:    1000;
    height:     var(--nav-h);
    display:    flex;
    align-items: center;
    justify-content: space-between;
    padding:    0 48px;
    /* Always dark — clean, consistent, predictable */
    background: rgba(17, 17, 16, 0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    transition: background 0.35s var(--ease), border-color 0.35s var(--ease);
}
/* No scroll-based colour change — single consistent dark nav */

/* Logo */
.site-logo { display: flex; align-items: center; height: 48px; flex-shrink: 0; text-decoration: none; }
.site-logo svg { height: 40px; width: auto; display: block; }

/* The nav is always dark — show only the dark (white) logo; hide the light one.
   Both .logo-dark and .logo-light spans are output by PHP for flexibility;
   since the nav is permanently dark, only the dark (white) variant is needed. */
.site-logo .logo-light { display: none; }
.site-logo .logo-dark  { display: flex; align-items: center; }

/* Desktop nav */
.nav-primary { display: flex; align-items: center; gap: 36px; }

.nav-primary__list { display: flex; align-items: center; gap: 36px; list-style: none; }
.nav-primary__list li { margin: 0; padding: 0; }
.nav-primary__list a {
    font-family:    var(--f-mono);
    font-size:      13px;
    font-weight:    500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color:          rgba(255,255,255,0.75);
    text-decoration: none;
    transition:     color 0.2s var(--ease);
    white-space:    nowrap;
}
.nav-primary__list a:hover,
.nav-primary__list a[aria-current="page"] { color: var(--accent-dark); }

/* Nav CTA */
.nav-cta {
    display:        inline-flex;
    align-items:    center;
    font-family:    var(--f-mono);
    font-size:      11px;
    font-weight:    500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    background:     var(--accent-dark);   /* vivid green — always on dark nav */
    color:          var(--stone-10);
    padding:        11px 24px;
    text-decoration: none;
    white-space:    nowrap;
    transition:     background 0.2s var(--ease), transform 0.2s var(--ease);
}
.nav-cta:hover { background: #00FF85; transform: translateY(-1px); }
.nav-cta:focus-visible { outline: 3px solid var(--accent-dark); outline-offset: 3px; }

/* Mobile toggle */
.nav-toggle {
    display:        none;
    flex-direction: column;
    justify-content: center;
    gap:            6px;
    width:          40px;
    height:         40px;
    padding:        4px;
    cursor:         pointer;
    background:     none;
    border:         none;
}
.nav-toggle__bar {
    display:    block;
    width:      100%;
    height:     2px;
    background: rgba(255,255,255,0.85);
    transition: transform 0.3s var(--ease-out), opacity 0.3s var(--ease-out);
    transform-origin: center;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* Mobile nav drawer */
.nav-mobile {
    position:   fixed;
    top:        var(--nav-h);
    left: 0; right: 0; bottom: 0;
    background: var(--bg-ink);
    padding:    40px 24px;
    z-index:    999;
    opacity:    0;
    transform:  translateY(-8px);
    pointer-events: none;
    transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
    overflow-y: auto;
}
.nav-mobile.open { opacity: 1; transform: translateY(0); pointer-events: auto; }
.nav-mobile-links { display: flex; flex-direction: column; gap: 0; margin-bottom: 32px; }
.nav-mobile-link {
    font-family:    var(--f-mono);
    font-size:      13px;
    font-weight:    500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color:          rgba(255,255,255,0.75);
    padding:        20px 0;
    border-bottom:  1px solid rgba(255,255,255,0.08);
    display:        block;
    text-decoration: none;
    transition:     color 0.2s var(--ease);
}
.nav-mobile-link:hover { color: var(--accent-dark); }


/* ============================================================
   6. SKIP LINK
   ============================================================ */

.skip-link {
    position:    absolute;
    top:         -100px;
    left:        16px;
    z-index:     9999;
    background:  var(--accent-dark);
    color:       var(--stone-10);
    padding:     12px 20px;
    font-family: var(--f-mono);
    font-size:   11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    transition:  top 0.2s var(--ease);
}
.skip-link:focus { top: 16px; }


/* ============================================================
   7. BUTTONS
   ============================================================ */

/* Primary — light context default */
.btn-primary {
    display:        inline-flex;
    align-items:    center;
    justify-content: center;
    gap:            10px;
    font-family:    var(--f-mono);
    font-size:      12px;
    font-weight:    500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color:          #fff;
    background:     var(--accent-light); /* forest green on cream */
    padding:        16px 32px;
    border:         none;
    cursor:         pointer;
    white-space:    nowrap;
    transition:     background 0.25s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.btn-primary:hover { background: var(--stone-10); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-primary:focus-visible { outline: 3px solid var(--accent-light); outline-offset: 3px; }

/* Primary — dark context (used on dark/green sections) */
.on-dark .btn-primary,
.home-hero .btn-primary,
.home-execution .btn-primary,
.home-comparison .btn-primary,
.home-proof .btn-primary,
.home-cta .btn-primary,
.page-hero .btn-primary {
    background: var(--accent-dark);  /* vivid green on dark */
    color:      var(--stone-10);
}
.on-dark .btn-primary:hover,
.home-hero .btn-primary:hover,
.home-execution .btn-primary:hover,
.home-comparison .btn-primary:hover,
.home-proof .btn-primary:hover,
.home-cta .btn-primary:hover,
.page-hero .btn-primary:hover { background: #fff; color: var(--stone-10); transform: translateY(-2px); }

.btn-block { display: flex; width: 100%; }

/* Secondary */
.btn-secondary {
    display:        inline-flex;
    align-items:    center;
    justify-content: center;
    gap:            10px;
    font-family:    var(--f-mono);
    font-size:      11px;
    font-weight:    500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color:          var(--text);
    background:     transparent;
    padding:        14px 28px;
    border:         1px solid var(--border);
    cursor:         pointer;
    white-space:    nowrap;
    transition:     border-color 0.2s var(--ease), color 0.2s var(--ease), transform 0.2s var(--ease);
}
.btn-secondary:hover { border-color: var(--accent-light); color: var(--accent-light); transform: translateY(-1px); }

/* Ghost */
.btn-ghost {
    display:        inline-flex;
    align-items:    center;
    gap:            8px;
    font-family:    var(--f-mono);
    font-size:      11px;
    font-weight:    500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color:          rgba(255,255,255,0.60); /* designed for dark hero */
    background:     none;
    border:         none;
    cursor:         pointer;
    padding:        0;
    white-space:    nowrap;
    transition:     color 0.2s var(--ease), gap 0.3s var(--ease-out);
}
.btn-ghost::after { content: '↓'; display: inline-block; transition: transform 0.3s var(--ease-out); }
.btn-ghost:hover { color: #fff; gap: 14px; }
.btn-ghost:hover::after { transform: translateY(4px); }


/* ============================================================
   8. SECTION LABELS & HEADINGS (shared across all sections)
   ============================================================ */

.section-label {
    font-family:    var(--f-mono);
    font-size:      11px;
    font-weight:    500;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    display:        flex;
    align-items:    center;
    gap:            12px;
    margin-bottom:  24px;
    /* Colour set by section context below */
}
.section-label::before {
    content:    '';
    display:    block;
    width:      20px;
    height:     1px;
    flex-shrink: 0;
}

/* Light section label — forest green */
.section-label { color: var(--accent-light); }
.section-label::before { background: var(--accent-light); }

/* Dark/green section label — vivid green (applied via parent) */
.home-hero .section-label,
.home-execution .section-label,
.home-comparison .section-label,
.home-proof .section-label,
.home-cta .section-label,
.page-hero .section-label { color: var(--accent-dark); }
.home-hero .section-label::before,
.home-execution .section-label::before,
.home-comparison .section-label::before,
.home-proof .section-label::before,
.home-cta .section-label::before,
.page-hero .section-label::before { background: var(--accent-dark); }

.section-heading {
    font-family:    var(--f-display);
    font-size:      clamp(44px, 5.5vw, 80px);
    line-height:    0.92;
    letter-spacing: 0.5px;
    margin-bottom:  0;
}

/* t-accent inside section — depends on section background */
/* Light sections */
.home-problem .t-accent,
.home-sector .t-accent,
.home-services .t-accent,
.home-insights .t-accent { color: var(--accent-light); }

/* Dark/green sections */
.home-hero .t-accent,
.home-execution .t-accent,
.home-comparison .t-accent,
.home-proof .t-accent,
.home-cta .t-accent { color: var(--accent-dark); }


/* ============================================================
   9. FOOTER
   ============================================================ */

.site-footer {
    background:   var(--bg);
    border-top:   1px solid var(--border);
    padding:      72px 48px 40px;
}

.footer-grid {
    display:               grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap:                   56px;
    margin-bottom:         56px;
    padding-bottom:        56px;
    border-bottom:         1px solid var(--border);
}

.footer-logo { display: flex; align-items: center; height: 32px; margin-bottom: 20px; }
.footer-logo svg { height: 26px; width: auto; }
.footer-tagline { font-size: 14px; line-height: 1.75; color: var(--text-muted); max-width: 240px; }

.footer-col-heading {
    font-family:    var(--f-mono);
    font-size:      10px;
    font-weight:    500;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color:          var(--text-muted);
    margin-bottom:  20px;
    display:        block;
}
.footer-link {
    display:     block;
    font-size:   14px;
    color:       var(--text-muted);
    margin-bottom: 10px;
    transition:  color 0.2s var(--ease);
}
a.footer-link:hover { color: var(--accent-light); }

.footer-base { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; }
.footer-legal {
    font-family:    var(--f-mono);
    font-size:      10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color:          var(--text-muted);
}
.footer-legal-links { display: flex; gap: 28px; }
.footer-legal-links a {
    font-family:    var(--f-mono);
    font-size:      10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color:          var(--text-muted);
    transition:     color 0.2s var(--ease);
}
.footer-legal-links a:hover { color: var(--accent-light); }


/* ============================================================
   10. PAGE HERO (inner pages)
   ============================================================ */

.page-hero {
    position:   relative;
    min-height: 480px;
    display:    flex;
    align-items: flex-end;
    padding:    calc(var(--nav-h) + 80px) 48px 72px;
    overflow:   hidden;
    background: var(--bg-dark);
}
.page-hero__bg { position: absolute; inset: 0; z-index: 0; }
.page-hero__bg-img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; opacity: 0.40; }
.page-hero__overlay {
    position:   absolute;
    inset:      0;
    z-index:    1;
    background: linear-gradient(135deg, rgba(17,17,16,0.82) 0%, rgba(17,17,16,0.60) 60%, rgba(17,17,16,0.40) 100%);
}
.page-hero__overlay--solid { background: linear-gradient(135deg, rgba(17,17,16,0.92) 0%, rgba(17,17,16,0.80) 100%); }
.page-hero__content { position: relative; z-index: 2; max-width: var(--max-w); width: 100%; }
.page-hero__label { margin-bottom: 20px; }
.page-hero__title {
    font-family:    var(--f-display);
    font-size:      clamp(44px, 6vw, 88px);
    line-height:    0.92;
    color:          #fff;
    margin-bottom:  20px;
}
.page-hero__sub { font-size: 17px; line-height: 1.75; color: rgba(255,255,255,0.82); max-width: 600px; }


/* ============================================================
   11. BREADCRUMBS
   ============================================================ */

.breadcrumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 24px; }
.breadcrumbs a,
.breadcrumbs span { font-family: var(--f-mono); font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; }
.breadcrumbs a { color: rgba(255,255,255,0.55); text-decoration: none; transition: color 0.2s var(--ease); }
.breadcrumbs a:hover { color: var(--accent-dark); }
.breadcrumbs__separator { color: rgba(255,255,255,0.25); margin: 0 4px; }
.breadcrumbs span[aria-current] { color: rgba(255,255,255,0.82); }


/* ============================================================
   12. HOMEPAGE — SECTION BACKGROUNDS & DIAGONAL TRANSITIONS

   Rhythm: DARK hero → DARK cred strip → CREAM gaps →
           GREEN execution → DARK comparison → CREAM sector →
           GREEN proof → CREAM services → DARK cta

   Diagonal joins use clip-path polygon.
   Overlap via margin-top negative + z-index layering.
   ============================================================ */

/* ── 12a. HERO — dark ──────────────────────────────────────── */

.home-hero {
    position:   relative;
    width:      100%;
    overflow:   hidden;
    background: var(--bg-ink);
    z-index:    1;
}

.home-hero__bg-wrap {
    position:   absolute;
    inset:      0;
    z-index:    0;
}
.home-hero__bg-img {
    width:           100%;
    height:          100%;
    object-fit:      cover;
    object-position: 30% center;
    display:         block;
    opacity:         0.25;
    filter:          contrast(1.1) saturate(0.7);
}
.home-hero__overlay {
    position:   absolute;
    inset:      0;
    z-index:    1;
    background: linear-gradient(
        105deg,
        rgba(17,17,16,0.98) 0%,
        rgba(17,17,16,0.92) 35%,
        rgba(17,17,16,0.75) 65%,
        rgba(17,17,16,0.50) 100%
    );
}

.home-hero__inner {
    position:              relative;
    z-index:               2;
    display:               grid;
    grid-template-columns: 1fr 400px;
    align-items:           center;
    gap:                   64px;
    padding:               calc(var(--nav-h) + 40px) 32px 56px;
    max-width:             calc(var(--max-w) + 96px);
    margin:                0 auto;
}

.home-hero__left { display: flex; flex-direction: column; }

.home-hero__eyebrow {
    font-family:    var(--f-mono);
    font-size:      11px;
    font-weight:    500;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color:          var(--accent-dark);
    margin-bottom:  20px;
    display:        flex;
    align-items:    center;
    gap:            14px;
}
.home-hero__eyebrow::before { content: ''; width: 28px; height: 1px; background: var(--accent-dark); flex-shrink: 0; }

.home-hero__h1 {
    font-family:    var(--f-display);
    font-size:      clamp(48px, 5.5vw, 88px);
    line-height:    0.86;
    letter-spacing: 0.5px;
    color:          #fff;
}
.home-hero__h1-line   { display: block; }

.home-hero__divider { width: 64px; height: 2px; background: var(--accent-dark); margin: 24px 0; }

.home-hero__sub {
    font-size:  17px;
    line-height: 1.75;
    color:      rgba(255,255,255,0.75);
    max-width:  none;
}

.home-hero__actions { display: flex; align-items: center; gap: 28px; margin-top: 28px; flex-wrap: wrap; }

/* Hero metric cards */
.home-hero__metrics {
    display:        flex;
    flex-direction: column;
    gap:            1px;
    background:     rgba(255,255,255,0.08); /* gap colour */
    border:         1px solid rgba(255,255,255,0.10);
}

.metric-card {
    background: rgba(255,255,255,0.05);
    padding:    24px 28px;
    transition: background 0.2s var(--ease);
}
.metric-card:hover { background: rgba(255,255,255,0.09); }
.metric-card--accent { background: rgba(0,230,118,0.10); border-left: 2px solid var(--accent-dark); }
.metric-card--accent:hover { background: rgba(0,230,118,0.15); }

.metric-card__label {
    font-family:    var(--f-mono);
    font-size:      10px;
    font-weight:    500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color:          rgba(255,255,255,0.50);
    margin-bottom:  10px;
    display:        block;
    max-width:      none;
}
.metric-card--accent .metric-card__label { color: var(--accent-dark); }

.metric-card__value {
    font-family:    var(--f-display);
    font-size:      52px;
    line-height:    1;
    color:          #fff;
    letter-spacing: -1px;
}
.metric-card__unit { font-size: 24px; color: var(--accent-dark); }
.metric-card__desc { font-size: 13px; line-height: 1.65; color: rgba(255,255,255,0.50); margin-top: 10px; max-width: none; }

/* ── 12b. CREDENTIAL STRIP — dark, no gap with hero ──────── */

.cred-strip {
    display:        flex;
    background:     #0D0D0B;
    border-top:     1px solid rgba(255,255,255,0.06);
    position:       relative;
    z-index:        2;
    /* Extra bottom padding so the home-problem diagonal clip-path
       does not eat into the cred-strip content. Value = clip-angle + visual buffer. */
    padding-bottom: calc(var(--clip-angle) + 16px);
}
.cred-strip__item {
    flex:       1;
    padding:    20px 32px;
    border-right: 1px solid rgba(255,255,255,0.08);
    transition: background 0.2s var(--ease);
}
.cred-strip__item:last-child { border-right: none; }
.cred-strip__item:hover { background: rgba(255,255,255,0.04); }
.cred-strip__pre {
    font-family:    var(--f-mono);
    font-size:      10px;
    font-weight:    500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color:          var(--accent-dark);
    display:        block;
    margin-bottom:  4px;
}
.cred-strip__val { font-size: 14px; font-weight: 500; color: rgba(255,255,255,0.85); }

/* ── 12c. THREE GAPS — cream, clips up from dark cred strip ─ */

.home-problem {
    background:     var(--bg);
    clip-path:      polygon(0 var(--clip-angle), 100% 0, 100% 100%, 0 100%);
    padding-top:    calc(96px + var(--clip-angle));
    padding-bottom: 0;
    margin-top:     calc(-1 * var(--clip-angle));
    position:       relative;
    z-index:        3;
    overflow:       hidden;
}
.home-problem__header {
    padding:     0 48px 56px;
    max-width:   calc(var(--max-w) + 96px);
    margin:      0 auto;
    width:       100%;
}

/* ── Three Gaps — 3-col side by side grid ── */
.gap-grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   1px;
    background:            rgba(0,0,0,0.12);
    margin:                0 48px 96px;
}
.gap-card {
    background:  #EDE8DF;
    padding:     40px 36px;
}
.gap-card__num {
    font-family:   var(--f-display);
    font-size:     56px;
    color:         rgba(0,107,48,0.15);
    line-height:   1;
    margin-bottom: 12px;
}
.gap-card__title {
    font-family:    var(--f-display);
    font-size:      20px;
    letter-spacing: 0.5px;
    color:          var(--text);
    line-height:    1;
    margin-bottom:  14px;
}
.gap-card__body {
    font-size:     15px;
    line-height:   1.75;
    color:         var(--text-body);
    margin-bottom: 20px;
}
.gap-card__resolve {
    font-size:    14px;
    line-height:  1.65;
    color:        var(--accent-light);
    border-left:  2px solid var(--accent-light);
    padding-left: 14px;
}

/* ── 12d. EXECUTION — deep forest green ─────────────────────
   Clips out of Three Gaps at bottom, into Comparison at top.
   ─────────────────────────────────────────────────────────── */

.home-execution {
    background:     #004D22;
    clip-path:      polygon(0 var(--clip-angle), 100% 0, 100% calc(100% - var(--clip-angle)), 0 100%);
    padding-top:    calc(112px + var(--clip-angle));
    padding-bottom: calc(112px + var(--clip-angle));
    margin-top:     calc(-1 * var(--clip-angle));
    position:       relative;
    z-index:        4;
    overflow:       hidden;
}
.home-execution__header {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   80px;
    align-items:           end;
    padding:               0 48px;
    max-width:             calc(var(--max-w) + 96px);
    margin:                0 auto 56px;
}
.home-execution .section-heading { color: #fff; }
.home-execution__sub { font-size: 16px; line-height: 1.80; color: rgba(255,255,255,0.72); max-width: none; }

/* Bento grid */
.bento {
    display:               grid;
    grid-template-columns: repeat(12, 1fr);
    gap:                   1px;
    background:            rgba(255,255,255,0.10);
    border:                1px solid rgba(255,255,255,0.10);
    padding:               0 48px;
    max-width:             calc(var(--max-w) + 96px);
    margin:                0 auto;
}
.bento__cell {
    background: rgba(255,255,255,0.06);
    padding:    36px 32px;
    position:   relative;
    transition: background 0.25s var(--ease);
}
.bento__cell:hover { background: rgba(255,255,255,0.10); }
.bento__cell--8 { grid-column: span 8; }
.bento__cell--7 { grid-column: span 7; }
.bento__cell--5 { grid-column: span 5; }
.bento__cell--4 { grid-column: span 4; }
.bento__cell--featured {
    background:  rgba(0,230,118,0.10);
    border-left: 2px solid var(--accent-dark);
}
.bento__cell--featured:hover { background: rgba(0,230,118,0.15); }

.bento__heading {
    font-family:    var(--f-display);
    font-size:      28px;
    letter-spacing: 0.5px;
    color:          #fff;
    margin-bottom:  12px;
    line-height:    1;
}
.bento__body { font-size: 15px; line-height: 1.72; color: rgba(255,255,255,0.72); max-width: none; }

.badge {
    display:        inline-block;
    font-family:    var(--f-mono);
    font-size:      10px;
    font-weight:    500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding:        5px 12px;
    border:         1px solid rgba(0,230,118,0.35);
    color:          var(--accent-dark);
    margin-top:     18px;
}

/* Channel stack inside bento */
.channel-stack { margin-top: 24px; border: 1px solid rgba(255,255,255,0.12); }
.channel-stack__row {
    display:        flex;
    align-items:    center;
    justify-content: space-between;
    padding:        13px 16px;
    border-bottom:  1px solid rgba(255,255,255,0.08);
    gap:            16px;
    transition:     background 0.2s var(--ease);
}
.channel-stack__row:last-child { border-bottom: none; }
.channel-stack__row:hover { background: rgba(255,255,255,0.05); }
.channel-stack__name {
    font-family:    var(--f-mono);
    font-size:      11px;
    font-weight:    500;
    letter-spacing: 1px;
    text-transform: uppercase;
    color:          rgba(255,255,255,0.85);
    flex-shrink:    0;
}
.channel-stack__desc { font-size: 12px; color: rgba(255,255,255,0.50); flex: 1; max-width: none; }
.channel-stack__dot  { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-dark); flex-shrink: 0; }

/* ── 12e. COMPARISON — dark charcoal ────────────────────────── */

.home-comparison {
    background:     var(--bg-ink);
    clip-path:      polygon(0 var(--clip-angle), 100% 0, 100% calc(100% - var(--clip-angle)), 0 100%);
    padding-top:    calc(96px + var(--clip-angle));
    padding-bottom: calc(96px + var(--clip-angle));
    margin-top:     calc(-1 * var(--clip-angle));
    position:       relative;
    z-index:        5;
    overflow:       hidden;
}
.home-comparison .section-heading { color: #fff; }
.home-comparison .ghost-num { color: #fff; opacity: 0.025; }
.home-comparison__inner {
    padding:   0 48px;
    max-width: calc(var(--max-w) + 96px);
    margin:    0 auto;
}

/* Comparison table — dark context */
.comparison-table {
    width:            100%;
    border-collapse:  collapse;
    border:           1px solid rgba(255,255,255,0.10);
    margin-top:       48px;
}
.comparison-table th {
    font-family:    var(--f-mono);
    font-size:      10px;
    font-weight:    500;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding:        20px 24px;
    border-bottom:  2px solid rgba(255,255,255,0.10);
    background:     rgba(255,255,255,0.04);
    color:          rgba(255,255,255,0.45);
    text-align:     left;
}
.comparison-table th.comparison-table__hl {
    background: rgba(0,230,118,0.12);
    color:      var(--accent-dark);
}
.comparison-table td {
    padding:      18px 24px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    font-size:    14px;
    line-height:  1.55;
    color:        rgba(255,255,255,0.70);
    vertical-align: top;
    max-width:    none;
}
.comparison-table tr:last-child td { border-bottom: none; }
.comparison-table__label {
    font-family:    var(--f-mono);
    font-size:      10px;
    font-weight:    500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color:          rgba(255,255,255,0.35);
    border-right:   1px solid rgba(255,255,255,0.08);
    white-space:    nowrap;
}
.comparison-table__hl {
    background: rgba(0,230,118,0.07);
    color:      rgba(255,255,255,0.90);
    font-weight: 500;
}
.comparison-table tr:hover td { background: rgba(255,255,255,0.03); }
.comparison-table tr:hover .comparison-table__hl { background: rgba(0,230,118,0.12); }

/* ── 12f. SECTOR FLUENCY — cream ────────────────────────────── */

.home-sector {
    background:     var(--bg);
    clip-path:      polygon(0 0, 100% var(--clip-angle), 100% calc(100% - var(--clip-angle)), 0 100%);
    padding-top:    calc(112px + var(--clip-angle));
    padding-bottom: calc(112px + var(--clip-angle));
    margin-top:     calc(-1 * var(--clip-angle));
    position:       relative;
    z-index:        6;
    overflow:       hidden;
}
.home-sector__header {
    display:               grid;
    grid-template-columns: 1fr 520px;
    gap:                   80px;
    align-items:           start;
    padding:               0 48px;
    max-width:             calc(var(--max-w) + 96px);
    margin:                0 auto 64px;
}
.home-sector__quote {
    font-family:    var(--f-display);
    font-size:      clamp(28px, 3.5vw, 46px);
    line-height:    1.05;
    color:          var(--text);
    border-left:    3px solid var(--accent-light);
    padding-left:   28px;
    font-style:     normal;
}
.home-sector__copy { font-size: 16px; line-height: 1.80; color: var(--text-body); max-width: none; margin-bottom: 16px; }
.home-sector .ghost-num { color: var(--stone-10); opacity: 0.03; }

.sector-grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   1px;
    background:            var(--border);
    border:                1px solid var(--border);
    padding:               0 48px;
    max-width:             calc(var(--max-w) + 96px);
    margin:                0 auto;
}
.sector-card {
    background: var(--bg-alt);
    padding:    32px 28px;
    transition: background 0.25s var(--ease);
    border-bottom: 2px solid transparent;
}
.sector-card:hover { background: var(--bg); border-bottom-color: var(--accent-light); }
.sector-card__num  {
    font-family: var(--f-display);
    font-size:   40px;
    color:       var(--border);
    line-height: 1;
    margin-bottom: 10px;
    transition:  color 0.25s var(--ease);
}
.sector-card:hover .sector-card__num { color: var(--accent-light); }
.sector-card__name { font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 10px; max-width: none; }
.sector-card__text { font-size: 14px; line-height: 1.70; color: var(--text-body); max-width: none; }

/* ── 12g. PROOF / TESTIMONIAL — deep forest green ─────────── */

.home-proof {
    background:     #004D22;
    clip-path:      polygon(0 var(--clip-angle), 100% 0, 100% calc(100% - var(--clip-angle)), 0 100%);
    padding-top:    calc(96px + var(--clip-angle));
    padding-bottom: calc(96px + var(--clip-angle));
    margin-top:     calc(-1 * var(--clip-angle));
    position:       relative;
    z-index:        7;
    overflow:       hidden;
}
.home-proof .ghost-num { color: rgba(255,255,255,0.025); }

.proof-split {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   1px;
    background:            rgba(255,255,255,0.08);
    border:                1px solid rgba(255,255,255,0.10);
    max-width:             calc(var(--max-w) + 96px);
    margin:                0 auto;
    padding:               0 48px;
}
.proof-split__left {
    background: rgba(0,0,0,0.20);
    padding:    56px 48px;
    position:   relative;
}
.proof-split__left::before {
    content:     '\201C';
    position:    absolute;
    top:         20px;
    left:        32px;
    font-family: var(--f-display);
    font-size:   120px;
    line-height: 1;
    color:       var(--accent-dark);
    opacity:     0.25;
    pointer-events: none;
}
.proof-split__quote p {
    font-size:   19px;
    line-height: 1.75;
    color:       rgba(255,255,255,0.92);
    max-width:   none;
    position:    relative;
    z-index:     1;
}
.proof-split__attr {
    display:     block;
    margin-top:  28px;
    position:    relative;
    z-index:     1;
    font-family: var(--f-mono);
    font-size:   10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color:       rgba(255,255,255,0.65);
}
.proof-split__attr strong {
    display:        block;
    font-family:    var(--f-mono);
    font-size:      10px;
    font-weight:    500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color:          var(--accent-dark);
    margin-bottom:  4px;
}

.proof-split__right {
    display:         flex;
    flex-direction:  column;
    background:      transparent;
}
.proof-stat {
    flex:       1;
    padding:    44px 40px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.proof-stat:last-child { border-bottom: none; }
.proof-stat__num   { font-family: var(--f-display); font-size: 72px; line-height: 1; color: var(--accent-dark); margin-bottom: 8px; }
.proof-stat__label {
    font-family:    var(--f-mono);
    font-size:      10px;
    font-weight:    500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color:          rgba(255,255,255,0.45);
    margin-bottom:  10px;
    display:        block;
}
.proof-stat__desc { font-size: 14px; line-height: 1.70; color: rgba(255,255,255,0.65); max-width: none; }

/* ── 12h. SERVICES — cream, clips from green proof ─────────── */

.home-services {
    background:     var(--bg);
    clip-path:      polygon(0 0, 100% var(--clip-angle), 100% 100%, 0 100%);
    padding-top:    calc(112px + var(--clip-angle));
    padding-bottom: 112px;
    margin-top:     calc(-1 * var(--clip-angle));
    position:       relative;
    z-index:        8;
    overflow:       hidden;
}
.home-services__header {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   80px;
    align-items:           end;
    padding:               0 48px;
    max-width:             calc(var(--max-w) + 96px);
    margin:                0 auto 64px;
}
.home-services .section-heading { color: var(--text); }
.home-services__sub { font-size: 16px; line-height: 1.80; color: var(--text-body); max-width: none; }
.home-services .ghost-num { color: var(--stone-10); opacity: 0.03; }

.service-cards {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   1px;
    background:            var(--border);
    border:                1px solid var(--border);
    padding:               0 48px;
    max-width:             calc(var(--max-w) + 96px);
    margin:                0 auto;
}
.service-card {
    background:    var(--bg-alt);
    padding:       40px 32px;
    display:       flex;
    flex-direction: column;
    min-height:    340px;
    border-bottom: 3px solid transparent;
    transition:    background 0.25s var(--ease), border-color 0.25s var(--ease);
}
.service-card:hover { background: var(--bg); border-bottom-color: var(--accent-light); }
.service-card__num {
    font-family:  var(--f-display);
    font-size:    80px;
    line-height:  1;
    color:        var(--border);
    margin-bottom: auto;
    padding-bottom: 16px;
    transition:   color 0.25s var(--ease);
}
.service-card:hover .service-card__num { color: var(--accent-light); }
.service-card__heading { font-family: var(--f-display); font-size: 30px; color: var(--text); letter-spacing: 0.5px; line-height: 1; margin-bottom: 12px; }
.service-card__body { font-size: 15px; line-height: 1.75; color: var(--text-body); margin-bottom: 24px; flex: 1; max-width: none; }
.service-card__link {
    font-family:    var(--f-mono);
    font-size:      10px;
    font-weight:    500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color:          var(--accent-light);
    display:        flex;
    align-items:    center;
    gap:            8px;
    transition:     gap 0.3s var(--ease-out), color 0.2s var(--ease);
}
.service-card__link::after { content: '→'; }
.service-card:hover .service-card__link { gap: 14px; }

/* ── 12i. INSIGHTS PREVIEW — cream, continues from services ── */

.home-insights {
    background:  var(--bg);
    padding:     96px 48px;
    border-top:  1px solid var(--border);
    position:    relative;
    z-index:     4;
}
.home-insights__header {
    display:               grid;
    grid-template-columns: 1fr auto;
    align-items:           end;
    gap:                   40px;
    max-width:             var(--max-w);
    margin:                0 auto 56px;
}
.insights-grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   1px;
    background:            var(--border);
    border:                1px solid var(--border);
    max-width:             var(--max-w);
    margin:                0 auto;
}
.insight-card { background: var(--bg); display: flex; flex-direction: column; transition: background 0.2s var(--ease); }
.insight-card:hover { background: var(--bg-alt); }
.insight-card__image-wrap { display: block; overflow: hidden; aspect-ratio: 16/9; }
.insight-card__image { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s var(--ease-out); }
.insight-card:hover .insight-card__image { transform: scale(1.04); }
.insight-card__body { padding: 28px; display: flex; flex-direction: column; flex: 1; }
.insight-card__cat {
    font-family:    var(--f-mono);
    font-size:      10px;
    font-weight:    500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color:          var(--accent-light);
    margin-bottom:  10px;
    display:        block;
}
.insight-card__heading { font-family: var(--f-display); font-size: 24px; line-height: 1.05; color: var(--text); margin-bottom: 10px; }
.insight-card__heading a { text-decoration: none; color: inherit; transition: color 0.2s var(--ease); }
.insight-card__heading a:hover { color: var(--accent-light); }
.insight-card__excerpt { font-size: 14px; line-height: 1.65; color: var(--text-muted); margin-bottom: 20px; flex: 1; max-width: none; }
.insight-card__meta { display: flex; gap: 20px; font-family: var(--f-mono); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); margin-top: auto; }
.insight-card__read { color: var(--accent-light); }

/* ── 12j. CTA — dark charcoal, final section ────────────────── */

.home-cta {
    background:  var(--bg-ink);
    clip-path:   polygon(0 var(--clip-angle), 100% 0, 100% 100%, 0 100%);
    padding-top: calc(96px + var(--clip-angle));
    padding-bottom: 96px;
    margin-top:  calc(-1 * var(--clip-angle));
    position:    relative;
    z-index:     9;
    overflow:    hidden;
}
.home-cta .section-heading { color: #fff; }
.home-cta .ghost-num { color: rgba(255,255,255,0.025); }

.home-cta__inner { display: none; } /* replaced by banner */

.home-cta__banner {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             48px;
    max-width:       calc(var(--max-w) + 96px);
    margin:          0 auto;
    padding:         0 48px;
    position:        relative;
    z-index:         1;
}
.home-cta__banner-text { flex: 1; }
.home-cta__sub {
    font-size:   16px;
    color:       rgba(255,255,255,0.55);
    margin-top:  10px;
    line-height: 1.5;
}
.home-cta__left { display: flex; flex-direction: column; }
.home-cta__body { font-size: 16px; line-height: 1.80; color: rgba(255,255,255,0.72); margin-bottom: 16px; max-width: none; }

.home-cta__panel {
    background:  rgba(255,255,255,0.06);
    border:      1px solid rgba(255,255,255,0.12);
    padding:     40px;
    position:    relative;
}
.home-cta__panel::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--accent-dark); }
.home-cta__panel-heading { font-family: var(--f-display); font-size: 28px; color: #fff; line-height: 1; margin-bottom: 6px; }
.home-cta__panel-sub {
    display:        block;
    font-family:    var(--f-mono);
    font-size:      10px;
    font-weight:    500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color:          rgba(255,255,255,0.40);
    margin-bottom:  28px;
}

.agenda { list-style: none; margin-bottom: 28px; }
.agenda__item {
    display:       flex;
    align-items:   flex-start;
    gap:           14px;
    padding:       12px 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    font-size:     14px;
    color:         rgba(255,255,255,0.72);
    line-height:   1.55;
    max-width:     none;
}
.agenda__item:last-child { border-bottom: none; }
.agenda__item strong {
    font-family:    var(--f-mono);
    font-size:      10px;
    font-weight:    500;
    letter-spacing: 1px;
    text-transform: uppercase;
    color:          var(--accent-dark);
    flex-shrink:    0;
    min-width:      52px;
    padding-top:    2px;
}

.home-cta__qualifier {
    font-family:    var(--f-mono);
    font-size:      10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color:          rgba(255,255,255,0.35);
    text-align:     center;
    margin-top:     14px;
    line-height:    1.6;
    max-width:      none;
}
.home-cta__trust {
    margin-top:  20px;
    padding-top: 20px;
    border-top:  1px solid rgba(255,255,255,0.08);
    font-size:   13px;
    font-style:  italic;
    color:       rgba(255,255,255,0.50);
    line-height: 1.65;
    max-width:   none;
}


/* ============================================================
   13. INNER PAGE SECTIONS
   ============================================================ */

.page-section { padding: 96px 0; position: relative; overflow: hidden; }

.page-section__inner { padding: 0 48px; max-width: calc(var(--max-w) + 96px); margin: 0 auto; }
.page-section__inner--split { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.page-section__inner--narrow { max-width: 760px; margin: 0 auto; padding: 0 48px; }

/* Numbered sequence */
.numbered-sequence { margin-top: 56px; }
.numbered-sequence__item {
    display:       grid;
    grid-template-columns: 88px 1fr;
    gap:           36px;
    padding:       48px 0;
    border-bottom: 1px solid var(--border);
    align-items:   start;
}
.numbered-sequence__item:first-child { border-top: 1px solid var(--border); }
.numbered-sequence__num {
    font-family:  var(--f-display);
    font-size:    64px;
    color:        var(--border);
    line-height:  1;
    transition:   color 0.25s var(--ease);
}
.numbered-sequence__item:hover .numbered-sequence__num { color: var(--accent-light); }
.numbered-sequence__content h3 { font-family: var(--f-display); font-size: 28px; color: var(--text); margin-bottom: 12px; line-height: 1; }
.numbered-sequence__content p  { font-size: 15px; line-height: 1.80; color: var(--text-body); max-width: none; }

/* Feature list */
.feature-list { display: flex; flex-direction: column; gap: 20px; margin-top: 28px; }
.feature-list__item { display: flex; align-items: flex-start; gap: 16px; }
.feature-list__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-light); flex-shrink: 0; margin-top: 8px; }
.feature-list__item p { font-size: 15px; line-height: 1.75; color: var(--text-body); max-width: none; }

/* Accordion */
.accordion { border-top: 1px solid var(--border); }
.accordion__item { border-bottom: 1px solid var(--border); }
.accordion__trigger {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    width:           100%;
    padding:         22px 0;
    background:      none;
    border:          none;
    cursor:          pointer;
    font-family:     var(--f-body);
    font-size:       16px;
    font-weight:     500;
    color:           var(--text);
    text-align:      left;
    gap:             20px;
    transition:      color 0.2s var(--ease);
}
.accordion__trigger:hover { color: var(--accent-light); }
.accordion__trigger[aria-expanded="true"] { color: var(--accent-light); }
.accordion__icon {
    width:        22px;
    height:       22px;
    flex-shrink:  0;
    border:       1px solid var(--border);
    position:     relative;
}
.accordion__icon::before, .accordion__icon::after {
    content:    '';
    position:   absolute;
    background: var(--text-muted);
    top: 50%; left: 50%;
    transform:  translate(-50%, -50%);
    transition: transform 0.3s var(--ease-out), opacity 0.3s var(--ease-out);
}
.accordion__icon::before { width: 10px; height: 1.5px; }
.accordion__icon::after  { width: 1.5px; height: 10px; }
.accordion__trigger[aria-expanded="true"] .accordion__icon::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.accordion__body { padding: 0 0 22px; font-size: 15px; line-height: 1.80; color: var(--text-body); }
.accordion__body[hidden] { display: none; }

/* CTA section — inner pages */
.cta-section {
    background:  var(--bg-ink);
    padding:     96px 48px;
    position:    relative;
    overflow:    hidden;
}
.cta-section .section-heading { color: #fff; }
.cta-section .section-label { color: var(--accent-dark); }
.cta-section .section-label::before { background: var(--accent-dark); }
.cta-section__inner { display: grid; grid-template-columns: 1fr 360px; align-items: center; gap: 80px; max-width: calc(var(--max-w) + 96px); margin: 0 auto; position: relative; z-index: 1; }
.cta-section__left { display: flex; flex-direction: column; }
.cta-section__body { font-size: 16px; line-height: 1.80; color: rgba(255,255,255,0.72); margin-bottom: 28px; max-width: none; }
.cta-section__qualifier { font-family: var(--f-mono); font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,0.40); margin-top: 12px; max-width: none; }
.cta-section .ghost-num { color: rgba(255,255,255,0.025); }


/* ============================================================
   14. DISCOVERY PAGE
   ============================================================ */

.discovery-layout {
    display:               grid;
    grid-template-columns: 1fr 420px;
    gap:                   80px;
    padding:               80px 48px;
    max-width:             calc(var(--max-w) + 96px);
    margin:                0 auto;
    align-items:           start;
}
.discovery-layout__left  { display: flex; flex-direction: column; gap: 64px; }
.discovery-layout__right { position: sticky; top: calc(var(--nav-h) + 32px); }

.disc-block__heading    { font-family: var(--f-display); font-size: clamp(28px, 3vw, 44px); line-height: 1; color: var(--text); margin: 20px 0; }
.disc-block__subheading { font-family: var(--f-display); font-size: 28px; line-height: 1; color: var(--text); margin: 16px 0; }
.disc-block p { font-size: 16px; line-height: 1.80; color: var(--text-body); margin-bottom: 16px; max-width: none; }

.disc-agenda { margin-top: 28px; }
.disc-agenda__item { display: grid; grid-template-columns: 72px 1fr; gap: 24px; padding: 24px 0; border-bottom: 1px solid var(--border); align-items: start; }
.disc-agenda__item:first-child { border-top: 1px solid var(--border); }
.disc-agenda__time { font-family: var(--f-display); font-size: 32px; color: var(--accent-light); line-height: 1; }
.disc-agenda__content strong { font-size: 14px; font-weight: 600; color: var(--text); display: block; margin-bottom: 6px; }
.disc-agenda__content p { font-size: 14px; line-height: 1.65; color: var(--text-muted); max-width: none; margin: 0; }

.disc-criteria { margin-top: 24px; border: 1px solid var(--border); }
.disc-criteria__item { display: flex; align-items: flex-start; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--border); font-size: 14px; color: var(--text-body); line-height: 1.55; max-width: none; }
.disc-criteria__item:last-child { border-bottom: none; }
.disc-criteria__item--yes .disc-criteria__icon { color: var(--accent-light); font-weight: 700; flex-shrink: 0; }
.disc-criteria__item--no  .disc-criteria__icon { color: var(--text-muted); flex-shrink: 0; }
.disc-trust { border-left: 3px solid var(--accent-light); padding: 20px 24px; font-size: 16px; line-height: 1.80; color: var(--text-body); font-style: italic; max-width: none; }

.disc-form-panel { background: var(--bg-alt); border: 1px solid var(--border); position: relative; }
.disc-form-panel::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--accent-light); }
.disc-form-panel__header { padding: 32px 36px 0; }
.disc-form-panel__heading { font-family: var(--f-display); font-size: 28px; color: var(--text); line-height: 1; margin-bottom: 8px; }
.disc-form-panel__sub { font-family: var(--f-mono); font-size: 10px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; color: var(--text-muted); display: block; }
.disc-form-panel__body { padding: 28px 36px; }
.disc-form-panel__footer { padding: 0 36px 32px; font-size: 12px; color: var(--text-muted); font-style: italic; line-height: 1.65; border-top: 1px solid var(--border); padding-top: 18px; margin-top: 8px; max-width: none; }


/* ============================================================
   15. INSIGHTS ARCHIVE & SINGLE
   ============================================================ */

.insights-section { padding: 72px 0; }
.insights-section .insights-grid { max-width: calc(var(--max-w) + 96px); margin: 48px auto 0; padding: 0 48px; }

.insights-filter { padding: 24px 48px; border-bottom: 1px solid var(--border); background: var(--bg-alt); }
.insights-filter__inner { display: flex; gap: 8px; flex-wrap: wrap; max-width: var(--max-w); margin: 0 auto; }
.insights-filter__btn {
    font-family:    var(--f-mono);
    font-size:      10px;
    font-weight:    500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding:        8px 16px;
    border:         1px solid var(--border);
    background:     transparent;
    color:          var(--text-muted);
    cursor:         pointer;
    text-decoration: none;
    display:        inline-block;
    transition:     border-color 0.2s var(--ease), color 0.2s var(--ease), background 0.2s var(--ease);
}
.insights-filter__btn:hover,
.insights-filter__btn--active { border-color: var(--accent-light); color: var(--accent-light); background: rgba(0,107,48,0.05); }

.pagination { display: flex; gap: 8px; justify-content: center; margin-top: 72px; flex-wrap: wrap; }
.pagination .page-numbers { font-family: var(--f-mono); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; padding: 10px 18px; border: 1px solid var(--border); color: var(--text-muted); text-decoration: none; transition: all 0.2s var(--ease); }
.pagination .page-numbers:hover, .pagination .page-numbers.current { border-color: var(--accent-light); color: var(--accent-light); background: rgba(0,107,48,0.05); }

/* Single article */
.article-hero { position: relative; min-height: 360px; display: flex; flex-direction: column; justify-content: flex-end; border-bottom: 1px solid var(--border); overflow: hidden; background: var(--bg-dark); }
.article-hero__image { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0.40; }
.article-hero__content { position: relative; z-index: 1; padding: calc(var(--nav-h) + 64px) 48px 56px; max-width: calc(var(--max-w) + 96px); margin: 0 auto; width: 100%; }
.article-hero__cats { display: flex; gap: 8px; margin-bottom: 20px; }
.article-hero__title { font-family: var(--f-display); font-size: clamp(36px, 5vw, 72px); line-height: 0.95; color: #fff; margin-bottom: 24px; }
.article-hero__meta { display: flex; gap: 24px; font-family: var(--f-mono); font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,0.50); }

.article-layout { display: grid; grid-template-columns: 1fr 280px; gap: 72px; max-width: calc(var(--max-w) + 96px); margin: 0 auto; padding: 72px 48px; align-items: start; }
.article-body { min-width: 0; }
.prose { font-size: 17px; line-height: 1.85; color: var(--text-body); }
.prose h2 { font-family: var(--f-display); font-size: 40px; color: var(--text); margin: 56px 0 16px; line-height: 1; }
.prose h3 { font-family: var(--f-display); font-size: 30px; color: var(--text); margin: 40px 0 12px; line-height: 1; }
.prose p { margin-bottom: 24px; max-width: none; }
.prose strong { color: var(--text); font-weight: 600; }
.prose ul, .prose ol { padding-left: 1.5em; margin-bottom: 24px; }
.prose li { margin-bottom: 10px; }
.prose a { color: var(--accent-light); text-decoration: underline; text-underline-offset: 3px; }

.article-sidebar { position: sticky; top: calc(var(--nav-h) + 32px); }
.sidebar-cta { background: var(--bg-alt); border: 1px solid var(--border); padding: 32px; position: relative; margin-bottom: 20px; }
.sidebar-cta::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--accent-light); }
.sidebar-cta__heading { font-family: var(--f-display); font-size: 24px; color: var(--text); line-height: 1; margin: 16px 0; }
.sidebar-cta__body { font-size: 14px; line-height: 1.70; color: var(--text-muted); margin-bottom: 24px; max-width: none; }
.sidebar-back { padding-top: 8px; }
.sidebar-back__link { font-family: var(--f-mono); font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted); transition: color 0.2s var(--ease); }
.sidebar-back__link:hover { color: var(--accent-light); }

.article-nav { display: flex; justify-content: space-between; gap: 24px; margin-top: 72px; padding-top: 36px; border-top: 1px solid var(--border); }
.article-nav__link { display: flex; flex-direction: column; gap: 6px; text-decoration: none; max-width: 45%; }
.article-nav__link--next { align-items: flex-end; text-align: right; }
.article-nav__label { font-family: var(--f-mono); font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted); }
.article-nav__title { font-size: 15px; font-weight: 500; color: var(--text); transition: color 0.2s var(--ease); }
.article-nav__link:hover .article-nav__title { color: var(--accent-light); }

.related-insights { border-top: 1px solid var(--border); padding: 96px 48px; }
.related-insights__inner { max-width: calc(var(--max-w) + 96px); margin: 0 auto; }
.article-faqs { margin-top: 64px; padding-top: 48px; border-top: 1px solid var(--border); }
.article-faqs h2 { font-family: var(--f-display); font-size: 40px; color: var(--text); margin-bottom: 28px; line-height: 1; }


/* ============================================================
   16. CONTACT & LEGAL PAGES
   ============================================================ */

.contact-section { padding: 80px 0; }
.contact-section__inner { padding: 0 48px; max-width: calc(var(--max-w) + 96px); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.contact-routing { display: flex; flex-direction: column; gap: 48px; }
.contact-routing__heading { font-family: var(--f-display); font-size: clamp(28px, 3vw, 44px); line-height: 1; color: var(--text); margin: 20px 0; }
.contact-routing__subheading { font-family: var(--f-display); font-size: 24px; line-height: 1; color: var(--text); margin: 16px 0 14px; }
.contact-routing p { font-size: 16px; line-height: 1.80; color: var(--text-body); margin-bottom: 14px; max-width: none; }
.contact-routing__qualifier { font-family: var(--f-mono); font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted); margin-top: 12px; }
.contact-routing__note { font-size: 14px; color: var(--text-muted); line-height: 1.70; margin-top: 18px; max-width: none; }
.contact-detail { display: flex; gap: 20px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--border); }
.contact-detail__label { font-family: var(--f-mono); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--text-muted); flex-shrink: 0; min-width: 52px; }
.contact-detail__value { font-size: 16px; color: var(--text); font-weight: 500; transition: color 0.2s var(--ease); }
.contact-detail__value:hover { color: var(--accent-light); }
.contact-form-wrap { }
.contact-form-wrap__heading { font-family: var(--f-display); font-size: 28px; color: var(--text); margin-bottom: 28px; line-height: 1; }


/* ============================================================
   17. 404 PAGE
   ============================================================ */

.error-404 {
    min-height:  calc(100vh - var(--nav-h));
    display:     flex;
    align-items: center;
    justify-content: center;
    text-align:  center;
    padding:     96px 48px;
    position:    relative;
    overflow:    hidden;
    background:  var(--bg);
}
.error-404__num {
    position:    absolute;
    font-family: var(--f-display);
    font-size:   clamp(200px, 40vw, 500px);
    line-height: 1;
    color:       var(--stone-10);
    opacity:     0.04;
    pointer-events: none;
    user-select: none;
    top:         50%;
    left:        50%;
    transform:   translate(-50%, -50%);
}
.error-404__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 24px; max-width: 560px; }
.error-404__heading { font-family: var(--f-display); font-size: clamp(48px, 6vw, 88px); color: var(--text); line-height: 0.92; }
.error-404__body { font-size: 16px; line-height: 1.75; color: var(--text-body); max-width: none; }
.error-404__actions { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }


/* ============================================================
   18. HUBSPOT FORM OVERRIDES
   ============================================================ */

.hs-form-field label { font-family: var(--f-mono); font-size: 10px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; color: var(--text-muted); display: block; margin-bottom: 8px; }
.hs-input, .hs-form input[type="text"], .hs-form input[type="email"], .hs-form input[type="tel"], .hs-form textarea, .hs-form select {
    width:          100%;
    padding:        12px 16px;
    background:     var(--bg);
    border:         1px solid var(--border);
    border-radius:  0;
    font-family:    var(--f-body);
    font-size:      15px;
    color:          var(--text);
    outline:        none;
    transition:     border-color 0.2s var(--ease);
    -webkit-appearance: none;
}
.hs-input:focus, .hs-form input:focus, .hs-form textarea:focus { border-color: var(--accent-light); }
.hs-form textarea { min-height: 120px; resize: vertical; }
.hs-error-msgs li { font-size: 12px; color: #B91C1C; margin-top: 4px; list-style: none; }
.hs-button { font-family: var(--f-mono); font-size: 12px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; color: #fff; background: var(--accent-light); padding: 16px 32px; border: none; cursor: pointer; width: 100%; transition: background 0.25s var(--ease); }
.hs-button:hover { background: var(--stone-10); }
.legal-consent-container { font-size: 12px; color: var(--text-muted); line-height: 1.6; margin-top: 12px; }


/* ============================================================
   19. ANIMATIONS (IntersectionObserver)
   ============================================================ */

/* Handled in section 4 via .anim-* classes */


/* ============================================================
   20. ACCESSIBILITY
   ============================================================ */

:focus-visible { outline: 3px solid var(--accent-light); outline-offset: 3px; }


.skip-link { position: absolute; top: -100px; left: 16px; z-index: 9999; background: var(--accent-dark); color: var(--stone-10); padding: 12px 20px; font-family: var(--f-mono); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; }
.skip-link:focus { top: 16px; }


/* ============================================================
   21. WORDPRESS CORE COMPATIBILITY
   ============================================================ */

.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: 13px; color: var(--text-muted); margin-top: 8px; font-style: italic; }
.alignwide { margin-left: auto; margin-right: auto; max-width: 100%; }
.alignfull { margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); max-width: 100vw; }
img.alignleft  { float: left; margin: 0 24px 16px 0; }
img.alignright { float: right; margin: 0 0 16px 24px; }


/* ============================================================
   22. RESPONSIVE
   ============================================================ */

/* Tablet — 1080px */
@media (max-width: 1080px) {
    :root { --clip-angle: 40px; }

    .home-hero__inner { grid-template-columns: 1fr; gap: 48px; }
    .home-hero__metrics { max-width: 480px; }
    .home-problem__header,
    .home-execution__header,
    .home-services__header,
    .home-cta__inner,
    .page-section__inner--split,
    .discovery-layout,
    .contact-section__inner,
    .cta-section__inner { grid-template-columns: 1fr; gap: 48px; }
    .bento__cell--8, .bento__cell--7 { grid-column: span 12; }
    .bento__cell--5, .bento__cell--4 { grid-column: span 6; }
    .proof-split { grid-template-columns: 1fr; }
    .service-cards, .sector-grid { grid-template-columns: 1fr 1fr; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .insights-grid { grid-template-columns: 1fr 1fr; }
    .article-layout { grid-template-columns: 1fr; }
}

/* Mobile — 768px */
@media (max-width: 768px) {
    .gap-grid { grid-template-columns: 1fr; margin: 0 20px 64px; }
    .gap-card { padding: 24px 20px; }
    .sector-strip { padding: 14px 20px; justify-content: flex-start; flex-wrap: wrap; gap: 8px; }
    .sector-strip__item { padding: 4px 10px; }
    .home-cta__banner { flex-direction: column; align-items: flex-start; gap: 20px; }
    :root { --nav-h: 64px; --clip-angle: 28px; }

    .site-header { padding: 0 20px; }
    .nav-primary { display: none; }
    .nav-toggle  { display: flex; }

    .home-hero__inner,
    .home-problem__header,
    .home-execution__header,
    .home-services__header,
    .home-cta__inner,
    .home-comparison__inner,
    .home-insights,
    .home-proof .proof-split,
    .page-section__inner,
    .page-section__inner--narrow,
    .page-section__inner--split,
    .discovery-layout,
    .contact-section__inner,
    .cta-section__inner,
    .article-layout,
    .article-hero__content,
    .related-insights,
    .insights-section .insights-grid { padding-left: 24px; padding-right: 24px; }

    .home-hero__inner { padding-top: calc(var(--nav-h) + 32px); padding-bottom: 48px; }
    .home-hero__h1 { font-size: clamp(60px, 15vw, 100px); }


    .bento__cell--8, .bento__cell--7,
    .bento__cell--5, .bento__cell--4 { grid-column: span 12; }
    .bento { padding: 0 24px; }
    .sector-grid, .service-cards, .insights-grid { grid-template-columns: 1fr; }

    .problem-row { grid-template-columns: 56px 1fr; gap: 20px; padding: 36px 24px; }
    .cred-strip { flex-direction: column; }
    .cred-strip__item { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.08); }

    .section-heading { font-size: clamp(36px, 10vw, 60px); }
    .footer-grid { grid-template-columns: 1fr; gap: 32px; }
    .site-footer { padding: 56px 24px 36px; }

    .insights-filter { padding: 20px 24px; }
    .article-hero__content { padding: calc(var(--nav-h) + 40px) 24px 40px; }
}

/* Small mobile — 480px */
@media (max-width: 480px) {
    .home-hero__actions { flex-direction: column; align-items: stretch; }
    .btn-primary, .btn-secondary { text-align: center; justify-content: center; }
    .error-404__actions { flex-direction: column; }
}

/* ============================================================
   23. MISSING UTILITY CLASSES
   ============================================================ */

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.insight-card__date {
    font-family:    var(--f-mono);
    font-size:      10px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color:          var(--text-muted);
}

/* Footer social link */
.footer-social {
    display:     inline-flex;
    align-items: center;
    justify-content: center;
    width:       36px;
    height:      36px;
    color:       var(--text-muted);
    border:      1px solid var(--border);
    margin-top:  20px;
    transition:  color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.footer-social:hover { color: var(--accent-light); border-color: var(--accent-light); }