/*
 Theme Name:  TrueNorth Solutions
 Theme URI:   https://truenorthgis.ca
 Description: Corporate marketing site for TrueNorth Solutions — IT services,
              GIS.Gov platform, custom software engineering.
 Version:     1.0.0
 Author:      TrueNorth Solutions
 Author URI:  https://truenorthgis.ca
 License:     GNU General Public License v2 or later
 License URI: https://www.gnu.org/licenses/gpl-2.0.html
 Text Domain: truenorth
 Tags:        corporate, technology, gis, responsive, accessibility
*/

/* ── CSS Custom Properties (Design Tokens) ─────────────────────────────────── */
:root {
    /* Brand colours — GIS.Gov blue + green */
    --clr-primary:        #1a4f8b;   /* deep municipal blue */
    --clr-primary-dark:   #113660;
    --clr-primary-light:  #d6e4f5;

    --clr-accent:         #2e7d32;   /* municipal green */
    --clr-accent-dark:    #1b5e20;
    --clr-accent-light:   #c8e6c9;

    /* Neutrals */
    --clr-bg:             #ffffff;
    --clr-surface:        #F5F7FA;
    --clr-border:         #CBD3DC;
    --clr-text:           #1A2636;
    --clr-text-muted:     #566578;
    --clr-white:          #ffffff;

    /* Typography */
    --font-sans:   "Inter", system-ui, -apple-system, sans-serif;
    --font-mono:   "Ubuntu Mono", monospace;
    --text-xs:    0.75rem;
    --text-sm:    0.875rem;
    --text-base:  1rem;
    --text-lg:    1.125rem;
    --text-xl:    1.25rem;
    --text-2xl:   1.5rem;
    --text-3xl:   1.875rem;
    --text-4xl:   2.25rem;
    --text-5xl:   3rem;

    /* Spacing */
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;

    /* Layout */
    --container-max: 1200px;
    --radius-sm:  0.25rem;
    --radius-md:  0.5rem;
    --radius-lg:  1rem;

    /* Shadows */
    --shadow-sm:  0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
    --shadow-md:  0 4px 6px rgba(0,0,0,.07), 0 2px 4px rgba(0,0,0,.06);
    --shadow-lg:  0 10px 15px rgba(0,0,0,.07), 0 4px 6px rgba(0,0,0,.05);

    /* Transitions */
    --transition-fast:   150ms ease;
    --transition-normal: 250ms ease;
}

/* ── Reset & Base ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; font-size: 16px; }

body {
    font-family: var(--font-sans);
    font-size:   var(--text-base);
    line-height: 1.7;
    color:       var(--clr-text);
    background:  var(--clr-bg);
    -webkit-font-smoothing: antialiased;
}

img, video, svg { display: block; max-width: 100%; height: auto; }

a {
    color:           var(--clr-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition:      color var(--transition-fast);
}
a:hover { color: var(--clr-primary-dark); }

/* ── Skip Link ──────────────────────────────────────────────────────────────── */
.skip-link {
    position:   absolute;
    top:        -3rem;
    left:       var(--space-4);
    padding:    var(--space-2) var(--space-4);
    background: var(--clr-primary);
    color:      var(--clr-white);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    font-weight:   700;
    z-index:    9999;
    transition: top var(--transition-fast);
}
.skip-link:focus { top: 0; }

/* ── Layout containers ─────────────────────────────────────────────────────── */
.container {
    width:     100%;
    max-width: var(--container-max);
    margin:    0 auto;
    padding:   0 var(--space-6);
}

/* ── Site Header ───────────────────────────────────────────────────────────── */
.site-header {
    position:   sticky;
    top:        0;
    z-index:    100;
    background: var(--clr-bg);
    border-bottom: 1px solid var(--clr-border);
    box-shadow: var(--shadow-sm);
}
.site-header__inner {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    height:          4rem;
    gap:             var(--space-6);
}

/* Logo */
.site-logo {
    display:     flex;
    align-items: center;
    gap:         var(--space-3);
    text-decoration: none;
    flex-shrink: 0;
}
.site-logo__mark {
    width:         2.5rem;
    height:        2.5rem;
    background:    var(--clr-primary);
    border-radius: var(--radius-md);
    display:       flex;
    align-items:   center;
    justify-content: center;
    color:         var(--clr-accent);
    font-weight:   800;
    font-size:     var(--text-xs);
    letter-spacing: 0.05em;
    flex-shrink:   0;
}
.site-logo__text {
    font-size:   var(--text-base);
    font-weight: 700;
    color:       var(--clr-text);
    line-height: 1.2;
}
.site-logo__text span {
    display:     block;
    font-size:   var(--text-xs);
    font-weight: 400;
    color:       var(--clr-text-muted);
}

/* Primary nav */
.primary-nav { display: flex; align-items: center; gap: var(--space-2); }
.primary-nav ul {
    list-style: none;
    display:    flex;
    gap:        var(--space-1);
}
.primary-nav a {
    display:     block;
    padding:     var(--space-2) var(--space-3);
    font-size:   var(--text-sm);
    font-weight: 500;
    color:       var(--clr-text);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition:  background var(--transition-fast), color var(--transition-fast);
}
.primary-nav a:hover,
.primary-nav .current-menu-item > a {
    background: var(--clr-primary-light);
    color:      var(--clr-primary);
}

.nav-cta {
    display:       inline-flex;
    align-items:   center;
    gap:           6px;
    padding:       8px 16px;
    background:    var(--clr-primary);
    color:         var(--clr-white) !important;
    border-radius: var(--radius-md);
    font-size:     var(--text-sm);
    font-weight:   600;
    text-decoration: none;
    white-space:   nowrap;
    transition:    background var(--transition-fast);
    flex-shrink:   0;
}
.nav-cta:hover { background: var(--clr-primary-dark) !important; color: var(--clr-white) !important; }

/* Hamburger */
.nav-toggle {
    display:    none;
    background: none;
    border:     none;
    cursor:     pointer;
    padding:    var(--space-2);
    color:      var(--clr-text);
}

/* ── Hero ───────────────────────────────────────────────────────────────────── */
.hero {
    padding:    var(--space-24) 0;
    background: linear-gradient(135deg, var(--clr-primary) 0%, var(--clr-primary-dark) 100%);
    color:      var(--clr-white);
    position:   relative;
    overflow:   hidden;
}
.hero::before {
    content:  "";
    position: absolute;
    inset:    0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
}
.hero__inner {
    display:     grid;
    grid-template-columns: 1fr 1fr;
    gap:         var(--space-16);
    align-items: center;
    position:    relative;
    z-index:     1;
}
.hero__badge {
    display:       inline-flex;
    align-items:   center;
    gap:           var(--space-2);
    padding:       var(--space-1) var(--space-3);
    background:    rgba(201,168,76,.2);
    border:        1px solid rgba(201,168,76,.4);
    border-radius: var(--radius-lg);
    font-size:     var(--text-xs);
    font-weight:   600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color:         var(--clr-accent);
    margin-bottom: var(--space-4);
}
.hero__title {
    font-size:   var(--text-5xl);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: var(--space-6);
}
.hero__title span { color: #7ec8e3; }
.hero__lead {
    font-size:    var(--text-lg);
    line-height:  1.8;
    opacity:      0.9;
    margin-bottom: var(--space-8);
}
.hero__actions { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.hero__visual {
    background:   rgba(255,255,255,.06);
    border:       1px solid rgba(255,255,255,.12);
    border-radius: var(--radius-lg);
    aspect-ratio: 4/3;
    display:      flex;
    flex-direction: column;
    align-items:  center;
    justify-content: center;
    gap:          var(--space-6);
    padding:      var(--space-8);
}
.hero-product-card {
    width:         100%;
    background:    rgba(255,255,255,.08);
    border:        1px solid rgba(255,255,255,.15);
    border-radius: var(--radius-md);
    padding:       var(--space-4) var(--space-6);
    display:       flex;
    align-items:   center;
    gap:           var(--space-4);
    text-decoration: none;
    transition:    background var(--transition-fast);
}
.hero-product-card:hover { background: rgba(255,255,255,.14); }
.hero-product-card__icon {
    width:         2.5rem;
    height:        2.5rem;
    background:    var(--clr-accent);
    border-radius: var(--radius-sm);
    display:       flex;
    align-items:   center;
    justify-content: center;
    flex-shrink:   0;
    color:         var(--clr-primary);
    font-weight:   800;
    font-size:     var(--text-xs);
}
.hero-product-card__body { flex: 1; }
.hero-product-card__name {
    font-size:   var(--text-sm);
    font-weight: 700;
    color:       var(--clr-white);
    line-height: 1.2;
}
.hero-product-card__desc {
    font-size:  var(--text-xs);
    color:      rgba(255,255,255,.65);
    margin-top: 2px;
}
.hero-product-card__arrow { color: rgba(255,255,255,.4); }

/* ── Buttons ────────────────────────────────────────────────────────────────── */
.btn {
    display:       inline-flex;
    align-items:   center;
    gap:           var(--space-2);
    padding:       var(--space-3) var(--space-6);
    border-radius: var(--radius-md);
    font-size:     var(--text-base);
    font-weight:   600;
    text-decoration: none;
    border:        2px solid transparent;
    cursor:        pointer;
    transition:    all var(--transition-fast);
    white-space:   nowrap;
}
.btn-primary {
    background: var(--clr-accent);
    color:      var(--clr-primary);
}
.btn-primary:hover { background: var(--clr-accent-dark); color: var(--clr-primary); }
.btn-outline {
    background:   transparent;
    color:        var(--clr-white);
    border-color: rgba(255,255,255,.5);
}
.btn-outline:hover { background: rgba(255,255,255,.1); border-color: var(--clr-white); }
.btn-solid {
    background: var(--clr-primary);
    color:      var(--clr-white);
}
.btn-solid:hover { background: var(--clr-primary-dark); }
.btn-solid-accent {
    background: var(--clr-accent);
    color:      var(--clr-primary);
}
.btn-solid-accent:hover { background: var(--clr-accent-dark); }

/* ── Services strip (home) ─────────────────────────────────────────────────── */
.services-strip {
    background:    var(--clr-surface);
    border-top:    1px solid var(--clr-border);
    border-bottom: 1px solid var(--clr-border);
    padding:       var(--space-12) 0;
}
.services-strip__grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   var(--space-8);
}
.service-pillar {
    display:    flex;
    flex-direction: column;
    align-items: flex-start;
    gap:        var(--space-3);
    padding:    var(--space-6);
    background: var(--clr-bg);
    border:     1px solid var(--clr-border);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color:      inherit;
    transition: box-shadow var(--transition-normal), transform var(--transition-normal);
}
.service-pillar:hover {
    box-shadow: var(--shadow-lg);
    transform:  translateY(-2px);
    color:      inherit;
}
.service-pillar__icon {
    width:         3rem;
    height:        3rem;
    background:    var(--clr-primary-light);
    border-radius: var(--radius-md);
    display:       flex;
    align-items:   center;
    justify-content: center;
    color:         var(--clr-primary);
}
.service-pillar__title {
    font-size:  var(--text-xl);
    font-weight: 700;
    color:      var(--clr-text);
}
.service-pillar__body {
    font-size:  var(--text-sm);
    color:      var(--clr-text-muted);
    line-height: 1.7;
    flex: 1;
}
.service-pillar__link {
    font-size:   var(--text-sm);
    font-weight: 600;
    color:       var(--clr-primary);
    text-decoration: none;
    display:     flex;
    align-items: center;
    gap:         4px;
}
.service-pillar__link:hover { color: var(--clr-primary-dark); }

/* ── Section generic ───────────────────────────────────────────────────────── */
.section { padding: var(--space-20) 0; }
.section--alt { background: var(--clr-surface); }
.section__header {
    text-align:    center;
    max-width:     640px;
    margin:        0 auto var(--space-12);
}
.section__eyebrow {
    display:       inline-block;
    font-size:     var(--text-xs);
    font-weight:   700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:         var(--clr-accent-dark);
    margin-bottom: var(--space-3);
}
.section__title {
    font-size:     var(--text-3xl);
    font-weight:   800;
    line-height:   1.2;
    color:         var(--clr-text);
    margin-bottom: var(--space-4);
}
.section__lead {
    font-size:  var(--text-lg);
    color:      var(--clr-text-muted);
    line-height: 1.7;
}

/* ── Feature cards (3-col grid) ─────────────────────────────────────────────── */
.features-grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   var(--space-6);
}
.feature-card {
    background:    var(--clr-bg);
    border:        1px solid var(--clr-border);
    border-radius: var(--radius-lg);
    padding:       var(--space-8);
    transition:    box-shadow var(--transition-normal), transform var(--transition-normal);
}
.feature-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.feature-card__icon {
    width:         3rem;
    height:        3rem;
    background:    var(--clr-primary-light);
    border-radius: var(--radius-md);
    display:       flex;
    align-items:   center;
    justify-content: center;
    margin-bottom: var(--space-4);
    color:         var(--clr-primary);
}
.feature-card__title {
    font-size:     var(--text-xl);
    font-weight:   700;
    color:         var(--clr-text);
    margin-bottom: var(--space-2);
}
.feature-card__body {
    font-size:  var(--text-base);
    color:      var(--clr-text-muted);
    line-height: 1.7;
}

/* ── Two-col split section ──────────────────────────────────────────────────── */
.split {
    display:     grid;
    grid-template-columns: 1fr 1fr;
    gap:         var(--space-16);
    align-items: center;
}
.split--reverse { direction: rtl; }
.split--reverse > * { direction: ltr; }
.split__visual {
    background:    var(--clr-primary-light);
    border:        1px solid var(--clr-border);
    border-radius: var(--radius-lg);
    aspect-ratio:  4/3;
    display:       flex;
    align-items:   center;
    justify-content: center;
    color:         var(--clr-primary);
    opacity:       0.6;
}
.split__content { }
.split__eyebrow {
    display:       inline-block;
    font-size:     var(--text-xs);
    font-weight:   700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:         var(--clr-accent-dark);
    margin-bottom: var(--space-3);
}
.split__title {
    font-size:     var(--text-3xl);
    font-weight:   800;
    line-height:   1.2;
    color:         var(--clr-text);
    margin-bottom: var(--space-4);
}
.split__body {
    font-size:   var(--text-base);
    color:       var(--clr-text-muted);
    line-height: 1.8;
    margin-bottom: var(--space-6);
}
.split__list {
    list-style: none;
    display:    flex;
    flex-direction: column;
    gap:        var(--space-2);
    margin-bottom: var(--space-8);
}
.split__list li {
    display:     flex;
    align-items: flex-start;
    gap:         var(--space-3);
    font-size:   var(--text-sm);
    color:       var(--clr-text);
}
.split__list li::before {
    content:    "✓";
    flex-shrink: 0;
    width:      1.25rem;
    height:     1.25rem;
    background: var(--clr-primary-light);
    border-radius: 50%;
    display:    flex;
    align-items: center;
    justify-content: center;
    font-size:  0.65rem;
    font-weight: 700;
    color:      var(--clr-primary);
    margin-top: 0.2rem;
}

/* ── Stats strip ───────────────────────────────────────────────────────────── */
.stats-strip {
    background:  var(--clr-primary);
    padding:     var(--space-12) 0;
    color:       var(--clr-white);
}
.stats-strip__grid {
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   var(--space-8);
    text-align:            center;
}
.stat__number {
    font-size:   var(--text-4xl);
    font-weight: 800;
    color:       var(--clr-accent);
    line-height: 1;
    margin-bottom: var(--space-1);
}
.stat__label {
    font-size:  var(--text-sm);
    color:      rgba(255,255,255,.75);
    font-weight: 500;
}

/* ── Credentials strip ─────────────────────────────────────────────────────── */
.creds-strip {
    background:    var(--clr-surface);
    border-top:    1px solid var(--clr-border);
    border-bottom: 1px solid var(--clr-border);
    padding:       var(--space-8) 0;
}
.creds-strip__inner {
    display:     flex;
    align-items: center;
    justify-content: center;
    flex-wrap:   wrap;
    gap:         var(--space-8);
}
.cred-badge {
    display:     flex;
    align-items: center;
    gap:         var(--space-3);
    font-size:   var(--text-sm);
    font-weight: 600;
    color:       var(--clr-text-muted);
}
.cred-badge__icon {
    width:         2.5rem;
    height:        2.5rem;
    background:    var(--clr-primary);
    border-radius: var(--radius-md);
    display:       flex;
    align-items:   center;
    justify-content: center;
    color:         var(--clr-accent);
    font-size:     var(--text-xs);
    font-weight:   800;
}

/* ── CTA Band ────────────────────────────────────────────────────────────────── */
.cta-band {
    background: linear-gradient(135deg, var(--clr-primary) 0%, var(--clr-primary-dark) 100%);
    color:      var(--clr-white);
    padding:    var(--space-20) 0;
    text-align: center;
}
.cta-band__title {
    font-size:     var(--text-4xl);
    font-weight:   800;
    margin-bottom: var(--space-4);
}
.cta-band__body {
    font-size:     var(--text-lg);
    opacity:       .9;
    max-width:     600px;
    margin:        0 auto var(--space-8);
}

/* ── Pricing table ──────────────────────────────────────────────────────────── */
.pricing-grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   var(--space-6);
    align-items:           start;
}
.pricing-card {
    background:    var(--clr-bg);
    border:        2px solid var(--clr-border);
    border-radius: var(--radius-lg);
    padding:       var(--space-8);
    position:      relative;
}
.pricing-card--featured {
    border-color: var(--clr-primary);
    box-shadow:   0 0 0 4px var(--clr-primary-light);
}
.pricing-card__badge {
    position:      absolute;
    top:           -0.75rem;
    left:          50%;
    transform:     translateX(-50%);
    background:    var(--clr-primary);
    color:         var(--clr-white);
    font-size:     var(--text-xs);
    font-weight:   700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding:       3px 12px;
    border-radius: var(--radius-lg);
}
.pricing-card__tier {
    font-size:   var(--text-sm);
    font-weight: 700;
    color:       var(--clr-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-2);
}
.pricing-card__price {
    font-size:     var(--text-4xl);
    font-weight:   800;
    color:         var(--clr-text);
    line-height:   1;
    margin-bottom: var(--space-1);
}
.pricing-card__price sup { font-size: var(--text-xl); vertical-align: super; }
.pricing-card__price sub { font-size: var(--text-sm); color: var(--clr-text-muted); font-weight: 400; }
.pricing-card__pop {
    font-size:     var(--text-sm);
    color:         var(--clr-text-muted);
    margin-bottom: var(--space-6);
}
.pricing-card__divider {
    border: none;
    border-top: 1px solid var(--clr-border);
    margin: var(--space-6) 0;
}
.pricing-card__features {
    list-style:  none;
    display:     flex;
    flex-direction: column;
    gap:         var(--space-2);
    margin-bottom: var(--space-6);
}
.pricing-card__features li {
    display:     flex;
    align-items: flex-start;
    gap:         var(--space-2);
    font-size:   var(--text-sm);
    color:       var(--clr-text);
}
.pricing-card__features li::before {
    content:    "✓";
    flex-shrink: 0;
    color:      var(--clr-primary);
    font-weight: 700;
    margin-top: 1px;
}
.pricing-card__cta { display: block; text-align: center; }

/* ── Page header ────────────────────────────────────────────────────────────── */
.page-header {
    background: linear-gradient(135deg, var(--clr-primary) 0%, var(--clr-primary-dark) 100%);
    color:      var(--clr-white);
    padding:    var(--space-16) 0;
}
.page-header__eyebrow {
    font-size:     var(--text-xs);
    font-weight:   700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:         var(--clr-accent);
    margin-bottom: var(--space-3);
}
.page-header__title {
    font-size:   var(--text-4xl);
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: var(--space-4);
}
.page-header__lead {
    font-size:  var(--text-lg);
    opacity:    0.85;
    max-width:  640px;
    line-height: 1.7;
}

/* ── Content area ───────────────────────────────────────────────────────────── */
.content-area { padding: var(--space-16) 0; }
.entry-content { max-width: 720px; }
.entry-content h1, .entry-content h2, .entry-content h3,
.entry-content h4, .entry-content h5, .entry-content h6 {
    font-weight: 700;
    line-height: 1.3;
    margin-top:  var(--space-8);
    margin-bottom: var(--space-3);
    color: var(--clr-text);
}
.entry-content p { margin-bottom: var(--space-4); }
.entry-content ul, .entry-content ol { margin-bottom: var(--space-4); padding-left: var(--space-6); }
.entry-content li { margin-bottom: var(--space-2); }
.entry-content a { color: var(--clr-primary); }
.entry-content blockquote {
    border-left:  4px solid var(--clr-accent);
    padding-left: var(--space-6);
    margin:       var(--space-6) 0;
    color:        var(--clr-text-muted);
    font-style:   italic;
}
.entry-content code {
    font-family:  var(--font-mono);
    font-size:    var(--text-sm);
    background:   var(--clr-surface);
    border:       1px solid var(--clr-border);
    border-radius: var(--radius-sm);
    padding:      0.1em 0.4em;
}
.entry-content pre {
    background:    var(--clr-text);
    color:         var(--clr-white);
    border-radius: var(--radius-md);
    padding:       var(--space-6);
    overflow-x:    auto;
    margin-bottom: var(--space-4);
}
.entry-content pre code { background: none; border: none; padding: 0; color: inherit; }

/* ── Contact layout ─────────────────────────────────────────────────────────── */
.contact-layout {
    display:     grid;
    grid-template-columns: 1fr 1fr;
    gap:         var(--space-16);
    align-items: start;
}
.contact-info__item {
    display:     flex;
    align-items: flex-start;
    gap:         var(--space-4);
    margin-bottom: var(--space-6);
}
.contact-info__icon {
    width:         2.5rem;
    height:        2.5rem;
    background:    var(--clr-primary-light);
    border-radius: var(--radius-md);
    display:       flex;
    align-items:   center;
    justify-content: center;
    color:         var(--clr-primary);
    flex-shrink:   0;
}
.contact-info__label { font-weight: 700; font-size: var(--text-sm); margin-bottom: 2px; }
.contact-info__value { font-size: var(--text-sm); color: var(--clr-text-muted); }

/* ── Contact form ───────────────────────────────────────────────────────────── */
.tn-form { display: flex; flex-direction: column; gap: var(--space-4); }
.tn-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.tn-form__field { display: flex; flex-direction: column; gap: var(--space-1); }
.tn-form label {
    font-size:   var(--text-sm);
    font-weight: 600;
    color:       var(--clr-text);
}
.tn-form input,
.tn-form textarea,
.tn-form select {
    padding:      var(--space-3) var(--space-4);
    border:       1px solid var(--clr-border);
    border-radius: var(--radius-md);
    font-family:  var(--font-sans);
    font-size:    var(--text-base);
    color:        var(--clr-text);
    background:   var(--clr-bg);
    transition:   border-color var(--transition-fast), box-shadow var(--transition-fast);
    width:        100%;
}
.tn-form input:focus,
.tn-form textarea:focus,
.tn-form select:focus {
    outline:      none;
    border-color: var(--clr-primary);
    box-shadow:   0 0 0 3px var(--clr-primary-light);
}
.tn-form textarea { resize: vertical; min-height: 7rem; }
.tn-form__status {
    padding:       var(--space-4);
    border-radius: var(--radius-md);
    font-size:     var(--text-sm);
    font-weight:   600;
    display:       none;
}
.tn-form__status--success {
    display:    block;
    background: #d1fae5;
    color:      #065f46;
    border:     1px solid #6ee7b7;
}
.tn-form__status--error {
    display:    block;
    background: #fee2e2;
    color:      #991b1b;
    border:     1px solid #fca5a5;
}

/* ── About layout ───────────────────────────────────────────────────────────── */
.about-bio {
    display:     grid;
    grid-template-columns: 1fr 2fr;
    gap:         var(--space-12);
    align-items: start;
}
.about-bio__portrait {
    background:    var(--clr-primary-light);
    border:        2px solid var(--clr-border);
    border-radius: var(--radius-lg);
    aspect-ratio:  1;
    display:       flex;
    align-items:   center;
    justify-content: center;
    color:         var(--clr-primary-dark);
    font-size:     var(--text-sm);
}
.credentials-grid {
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   var(--space-4);
    margin-top:            var(--space-8);
}
.credential-badge {
    background:    var(--clr-bg);
    border:        1px solid var(--clr-border);
    border-radius: var(--radius-lg);
    padding:       var(--space-6);
    text-align:    center;
}
.credential-badge__abbr {
    display:       block;
    font-size:     var(--text-2xl);
    font-weight:   800;
    color:         var(--clr-primary);
    margin-bottom: var(--space-1);
}
.credential-badge__name {
    font-size:  var(--text-xs);
    color:      var(--clr-text-muted);
    line-height: 1.4;
}

/* ── Site Footer ────────────────────────────────────────────────────────────── */
.site-footer {
    background: var(--clr-text);
    color:      rgba(255,255,255,.7);
    padding:    var(--space-16) 0 var(--space-8);
}
.site-footer__grid {
    display:               grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap:                   var(--space-12);
    margin-bottom:         var(--space-12);
}
.footer-brand__desc {
    font-size:     var(--text-sm);
    line-height:   1.8;
    margin-top:    var(--space-4);
    margin-bottom: var(--space-6);
}
.footer-brand__products {
    display:    flex;
    flex-direction: column;
    gap:        var(--space-2);
}
.footer-product-link {
    display:     flex;
    align-items: center;
    gap:         var(--space-2);
    font-size:   var(--text-sm);
    color:       rgba(255,255,255,.55);
    text-decoration: none;
    transition:  color var(--transition-fast);
}
.footer-product-link:hover { color: var(--clr-white); }
.footer-product-link__tag {
    font-size:     0.65rem;
    font-weight:   700;
    background:    var(--clr-accent);
    color:         var(--clr-primary);
    padding:       1px 6px;
    border-radius: var(--radius-sm);
}
.footer-widget__title {
    font-size:     var(--text-sm);
    font-weight:   700;
    color:         var(--clr-white);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: var(--space-4);
}
.footer-widget ul { list-style: none; }
.footer-widget li { margin-bottom: var(--space-2); }
.footer-widget a {
    font-size:       var(--text-sm);
    color:           rgba(255,255,255,.55);
    text-decoration: none;
    transition:      color var(--transition-fast);
}
.footer-widget a:hover { color: var(--clr-white); }
.site-footer__bottom {
    border-top:  1px solid rgba(255,255,255,.1);
    padding-top: var(--space-8);
    display:     flex;
    align-items: center;
    justify-content: space-between;
    font-size:   var(--text-sm);
    flex-wrap:   wrap;
    gap:         var(--space-4);
    color:       rgba(255,255,255,.5);
}
.footer-legal { display: flex; gap: var(--space-4); }
.footer-legal a { color: rgba(255,255,255,.5); text-decoration: none; }
.footer-legal a:hover { color: var(--clr-white); }

/* ── Responsive ─────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .hero__inner                 { grid-template-columns: 1fr; }
    .hero__visual                { display: none; }
    .services-strip__grid        { grid-template-columns: 1fr; }
    .features-grid               { grid-template-columns: repeat(2, 1fr); }
    .split                       { grid-template-columns: 1fr; }
    .split--reverse              { direction: ltr; }
    .split__visual               { display: none; }
    .pricing-grid                { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
    .stats-strip__grid           { grid-template-columns: repeat(2, 1fr); }
    .site-footer__grid           { grid-template-columns: 1fr 1fr; }
    .contact-layout              { grid-template-columns: 1fr; }
    .about-bio                   { grid-template-columns: 1fr; }
    .about-bio__portrait         { display: none; }
    .credentials-grid            { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .hero                        { padding: var(--space-16) 0; }
    .hero__title                 { font-size: var(--text-3xl); }
    .cta-band__title             { font-size: var(--text-3xl); }
    .features-grid               { grid-template-columns: 1fr; }
    .stats-strip__grid           { grid-template-columns: repeat(2, 1fr); }
    .site-footer__grid           { grid-template-columns: 1fr; }
    .site-footer__bottom         { flex-direction: column; text-align: center; }
    .tn-form__row                { grid-template-columns: 1fr; }
    .credentials-grid            { grid-template-columns: repeat(2, 1fr); }

    /* Mobile nav */
    .primary-nav {
        display:        none;
        position:       fixed;
        inset:          4rem 0 0;
        background:     var(--clr-bg);
        flex-direction: column;
        padding:        var(--space-6);
        border-top:     1px solid var(--clr-border);
        overflow-y:     auto;
        z-index:        99;
        gap:            var(--space-4);
    }
    .primary-nav.is-open { display: flex; }
    .primary-nav ul { flex-direction: column; gap: var(--space-1); }
    .primary-nav a { font-size: var(--text-base); padding: var(--space-3); }
    .nav-toggle { display: block; }
    .nav-cta { align-self: flex-start; }
}

/* ── WordPress block compatibility ──────────────────────────────────────────── */
.wp-block-image { margin: var(--space-6) 0; }
.wp-block-image img { border-radius: var(--radius-md); }
.wp-block-quote {
    border-left: 4px solid var(--clr-accent);
    padding-left: var(--space-6);
    margin: var(--space-6) 0;
    font-style: italic;
    color: var(--clr-text-muted);
}
.wp-block-separator { border-color: var(--clr-border); margin: var(--space-8) 0; }

/* ── Notice / alert boxes ────────────────────────────────────────────────────── */
.notice {
    padding:       var(--space-4) var(--space-6);
    border-radius: var(--radius-md);
    font-size:     var(--text-sm);
    border-left:   4px solid;
    margin-bottom: var(--space-4);
}
.notice--info    { background: var(--clr-primary-light); border-color: var(--clr-primary);  color: var(--clr-primary); }
.notice--success { background: #d1fae5; border-color: #10b981; color: #065f46; }
.notice--warning { background: #fffbeb; border-color: var(--clr-accent); color: #92400e; }

/* ═══════════════════════════════════════════════════════════════════════════════
   ENTERPRISE EXPANSION — new components for all product/grant/pilot templates
   Added: 2025 — TrueNorth Solutions
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── Sticky header ─────────────────────────────────────────────────────────── */
.site-header {
    position:   sticky;
    top:        0;
    z-index:    200;
    transition: box-shadow .2s ease, background .2s ease, padding .2s ease;
}
.site-header--scrolled {
    box-shadow: 0 2px 16px rgba(0,0,0,.12);
    background: rgba(255,255,255,.97);
    backdrop-filter: saturate(180%) blur(8px);
}

/* ── Nav dropdown ──────────────────────────────────────────────────────────── */
.primary-nav__list { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--space-2); align-items: center; }
.nav-dropdown { position: relative; }
.nav-dropdown__trigger {
    display:        inline-flex;
    align-items:    center;
    gap:            .3em;
    background:     none;
    border:         none;
    cursor:         pointer;
    font:           inherit;
    color:          inherit;
    padding:        var(--space-2) var(--space-3);
    border-radius:  var(--radius-sm);
    text-decoration: none;
    font-size:      var(--text-sm);
    font-weight:    500;
    white-space:    nowrap;
    transition:     color .15s, background .15s;
}
.nav-dropdown__trigger:hover,
.nav-dropdown__trigger[aria-expanded="true"] {
    color:       var(--clr-primary);
    background:  var(--clr-primary-light);
}
.nav-dropdown__chevron {
    width:  14px;
    height: 14px;
    flex-shrink: 0;
    transition: transform .2s ease;
}
.nav-dropdown__trigger[aria-expanded="true"] .nav-dropdown__chevron { transform: rotate(180deg); }
.nav-dropdown__menu {
    display:          none;
    position:         absolute;
    top:              calc(100% + 6px);
    left:             50%;
    transform:        translateX(-50%);
    min-width:        280px;
    background:       #fff;
    border:           1px solid var(--clr-border);
    border-radius:    var(--radius-lg);
    box-shadow:       0 8px 32px rgba(0,0,0,.12);
    padding:          var(--space-2);
    z-index:          300;
    list-style:       none;
    margin:           0;
}
.nav-dropdown.is-open .nav-dropdown__menu { display: block; }
.nav-dropdown__group-label {
    font-size:      var(--text-xs);
    font-weight:    700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color:          var(--clr-text-muted);
    padding:        var(--space-2) var(--space-3) var(--space-1);
}
.nav-dropdown__divider { height: 1px; background: var(--clr-border); margin: var(--space-2) var(--space-2); }
.nav-dropdown__item a {
    display:        flex;
    align-items:    flex-start;
    gap:            var(--space-3);
    padding:        var(--space-3);
    border-radius:  var(--radius-md);
    text-decoration: none;
    color:          var(--clr-text);
    transition:     background .15s;
}
.nav-dropdown__item a:hover { background: var(--clr-primary-light); }
.nav-dropdown__item--featured a { border-left: 3px solid var(--clr-primary); }
.nav-dropdown__item-icon {
    width:       36px;
    height:      36px;
    flex-shrink: 0;
    border-radius: var(--radius-sm);
    background:  var(--clr-primary-light);
    color:       var(--clr-primary);
    display:     flex;
    align-items: center;
    justify-content: center;
}
.nav-dropdown__item-content { flex: 1; }
.nav-dropdown__item-content strong { display: block; font-size: var(--text-sm); font-weight: 600; margin-bottom: 2px; }
.nav-dropdown__item-content small { font-size: var(--text-xs); color: var(--clr-text-muted); line-height: 1.4; }
.nav-toggle__open  { display: block; }
.nav-toggle__close { display: none; }
body.nav-is-open .nav-toggle__open  { display: none; }
body.nav-is-open .nav-toggle__close { display: block; }

/* ── Product hero (page-header variant) ────────────────────────────────────── */
.page-header--product { background: var(--clr-primary); color: #fff; }
.page-header--product .page-header__title { color: #fff; }
.page-header--product .page-header__sub   { color: rgba(255,255,255,.85); }
.product-hero {
    display:   grid;
    grid-template-columns: 1fr auto;
    gap:       var(--space-10);
    align-items: center;
}
@media (max-width: 860px) { .product-hero { grid-template-columns: 1fr; } }
.product-hero__content { max-width: 640px; }
.product-hero__actions { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-8); }
.product-hero__trust {
    display:     flex;
    flex-wrap:   wrap;
    gap:         var(--space-4) var(--space-6);
    margin-top:  var(--space-6);
    font-size:   var(--text-sm);
    color:       rgba(255,255,255,.8);
}
.product-hero__stats {
    display:   grid;
    grid-template-columns: repeat(2, 1fr);
    gap:       var(--space-4);
    padding:   var(--space-6);
    background: rgba(255,255,255,.1);
    border-radius: var(--radius-lg);
    backdrop-filter: blur(4px);
    min-width: 200px;
}
.product-stat { text-align: center; }
.product-stat__num { display: block; font-size: var(--text-2xl); font-weight: 800; color: #fff; }
.product-stat__lbl { font-size: var(--text-xs); color: rgba(255,255,255,.75); margin-top: 2px; display: block; }

/* ── Compliance banner ─────────────────────────────────────────────────────── */
.compliance-banner {
    background:  #f0f9ff;
    border-top:  3px solid var(--clr-primary);
    border-bottom: 1px solid var(--clr-border);
    padding:     var(--space-5) 0;
}
.compliance-banner__inner {
    display:     flex;
    align-items: center;
    gap:         var(--space-6);
    flex-wrap:   wrap;
}
.compliance-banner__badges { display: flex; gap: var(--space-2); flex-shrink: 0; }
.compliance-badge {
    font-size:     var(--text-xs);
    font-weight:   700;
    padding:       .25em .75em;
    border-radius: 9999px;
    background:    var(--clr-primary);
    color:         #fff;
    white-space:   nowrap;
}
.compliance-banner__inner p { margin: 0; font-size: var(--text-sm); flex: 1; min-width: 200px; }
@media (max-width: 640px) {
    .compliance-banner__inner { flex-direction: column; align-items: flex-start; }
}

/* ── Module sections ───────────────────────────────────────────────────────── */
.module-section { padding: var(--space-16) 0; }
.module-section--alt { background: var(--clr-bg-alt, #f8fafc); }
.module-section__header {
    display:         flex;
    align-items:     flex-start;
    gap:             var(--space-5);
    margin-bottom:   var(--space-10);
}
.module-section__icon {
    width:           56px;
    height:          56px;
    flex-shrink:     0;
    border-radius:   var(--radius-lg);
    background:      var(--clr-primary-light);
    color:           var(--clr-primary);
    display:         flex;
    align-items:     center;
    justify-content: center;
}
.module-section__title { font-size: var(--text-2xl); font-weight: 700; margin: 0 0 var(--space-2); }
.module-section__sub   { color: var(--clr-text-muted); margin: 0; max-width: 600px; }

/* ── Module grid ───────────────────────────────────────────────────────────── */
.module-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap:                   var(--space-5);
}
.module-grid--4col { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.module-card {
    background:    #fff;
    border:        1px solid var(--clr-border);
    border-radius: var(--radius-lg);
    padding:       var(--space-6);
    transition:    box-shadow .2s, transform .2s;
    position:      relative;
}
.module-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,.1); transform: translateY(-2px); }
.module-card--featured { border-color: var(--clr-primary); border-width: 2px; }
.module-card__badge {
    position:      absolute;
    top:           -1px;
    right:         var(--space-4);
    font-size:     var(--text-xs);
    font-weight:   700;
    padding:       .2em .7em;
    background:    var(--clr-primary);
    color:         #fff;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}
.module-card__icon {
    width:         36px;
    height:        36px;
    border-radius: var(--radius-sm);
    background:    var(--clr-primary-light);
    color:         var(--clr-primary);
    display:       flex;
    align-items:   center;
    justify-content: center;
    margin-bottom: var(--space-3);
}
.module-card__title { font-size: var(--text-base); font-weight: 600; margin: 0 0 var(--space-2); }
.module-card__body  { font-size: var(--text-sm); color: var(--clr-text-muted); margin: 0; line-height: 1.6; }

/* ── Technology grid ───────────────────────────────────────────────────────── */
.tech-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap:                   var(--space-5);
    margin-top:            var(--space-8);
}
.tech-card {
    background:    var(--clr-bg-alt, #f8fafc);
    border:        1px solid var(--clr-border);
    border-radius: var(--radius-lg);
    padding:       var(--space-6);
    transition:    box-shadow .2s;
}
.tech-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.08); }
.tech-card__icon {
    width:         48px;
    height:        48px;
    border-radius: var(--radius-md);
    background:    var(--clr-primary);
    color:         #fff;
    display:       flex;
    align-items:   center;
    justify-content: center;
    margin-bottom: var(--space-4);
}
.tech-card__title { font-size: var(--text-base); font-weight: 600; margin: 0 0 var(--space-2); }
.tech-card__body  { font-size: var(--text-sm); color: var(--clr-text-muted); margin: 0; line-height: 1.6; }
.section__intro { text-align: center; color: var(--clr-text-muted); max-width: 640px; margin: -.5rem auto var(--space-8); font-size: var(--text-lg); }

/* ── Comparison table ──────────────────────────────────────────────────────── */
.comparison-table-wrap { overflow-x: auto; border-radius: var(--radius-lg); border: 1px solid var(--clr-border); }
.comparison-table {
    width:       100%;
    border-collapse: collapse;
    font-size:   var(--text-sm);
}
.comparison-table th, .comparison-table td {
    padding:     var(--space-3) var(--space-5);
    text-align:  center;
    border-bottom: 1px solid var(--clr-border);
}
.comparison-table th:first-child,
.comparison-table td:first-child { text-align: left; font-weight: 500; }
.comparison-table thead th { background: var(--clr-bg-alt, #f8fafc); font-weight: 700; }
.comparison-table__tn { background: rgba(var(--clr-primary-rgb, 37,99,235), .05); font-weight: 700; color: var(--clr-primary); }
.comparison-table tbody tr:last-child td { border-bottom: none; }
.comparison-table tbody tr:hover { background: var(--clr-primary-light); }
.ct-check  { color: #16a34a; font-weight: 700; font-size: 1.1em; }
.ct-partial{ color: var(--clr-accent); font-weight: 700; font-size: 1.1em; }
.ct-cross  { color: #dc2626; font-weight: 700; font-size: 1.1em; }

/* ── Pricing additions ─────────────────────────────────────────────────────── */
.pricing-note {
    text-align: center;
    padding:    var(--space-6);
    font-size:  var(--text-sm);
    color:      var(--clr-text-muted);
}
.pricing-note a { color: var(--clr-primary); }
.btn-block { display: block; width: 100%; text-align: center; }
.btn-lg    { padding: var(--space-4) var(--space-8); font-size: var(--text-base); }
.btn-sm    { padding: var(--space-2) var(--space-4); font-size: var(--text-sm); }
.btn-solid {
    background: var(--clr-text);
    color:      #fff;
    border:     2px solid var(--clr-text);
}
.btn-solid:hover { background: transparent; color: var(--clr-text); }
.btn-outline-white {
    background:  transparent;
    color:       #fff;
    border:      2px solid rgba(255,255,255,.6);
}
.btn-outline-white:hover { background: rgba(255,255,255,.15); border-color: #fff; }

/* ── Homepage: Government levels grid ─────────────────────────────────────── */
.levels-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap:                   var(--space-5);
}
.level-card {
    background:    #fff;
    border:        1px solid var(--clr-border);
    border-radius: var(--radius-lg);
    padding:       var(--space-6);
    position:      relative;
    transition:    box-shadow .2s, transform .2s;
}
.level-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,.1); transform: translateY(-2px); }
.level-card--featured { border-color: var(--clr-primary); border-width: 2px; }
.level-card__badge, .level-card__badge--featured {
    font-size:     var(--text-xs);
    font-weight:   700;
    padding:       .25em .75em;
    border-radius: 9999px;
    display:       inline-block;
    margin-bottom: var(--space-3);
}
.level-card__badge           { background: var(--clr-bg-alt, #f0f4f8); color: var(--clr-text-muted); }
.level-card__badge--featured { background: var(--clr-primary); color: #fff; }
.level-card__pop   { font-size: var(--text-xs); color: var(--clr-text-muted); margin-bottom: var(--space-2); }
.level-card__title { font-size: var(--text-lg); font-weight: 700; margin: 0 0 var(--space-2); }
.level-card__modules { font-size: var(--text-sm); color: var(--clr-text-muted); margin-bottom: var(--space-4); }
.level-card__price { font-size: var(--text-xl); font-weight: 800; color: var(--clr-primary); }
.level-card__price small { font-size: var(--text-sm); font-weight: 400; color: var(--clr-text-muted); }

/* ── Grants callout banner ─────────────────────────────────────────────────── */
.grants-callout {
    background:  var(--clr-primary-light);
    border:      1px solid var(--clr-primary);
    border-radius: var(--radius-xl, 1rem);
    padding:     var(--space-6);
    margin:      0 auto var(--space-10);
    max-width:   860px;
}
.grants-callout--hero {
    border-radius: 0;
    margin:        0;
    max-width:     none;
    padding:       var(--space-8) 0;
    background:    var(--clr-primary);
    border:        none;
    color:         #fff;
}
.grants-callout--hero .grants-callout__inner { color: #fff; }
.grants-callout__inner {
    display:     flex;
    align-items: center;
    gap:         var(--space-6);
    flex-wrap:   wrap;
}
.grants-callout__icon {
    width:        52px;
    height:       52px;
    flex-shrink:  0;
    background:   var(--clr-primary);
    color:        #fff;
    border-radius: 50%;
    display:      flex;
    align-items:  center;
    justify-content: center;
}
.grants-callout--hero .grants-callout__icon { background: rgba(255,255,255,.2); }
.grants-callout__body { flex: 1; min-width: 220px; }
@media (max-width: 640px) { .grants-callout__inner { flex-direction: column; align-items: flex-start; } }

/* ── Grant cards ───────────────────────────────────────────────────────────── */
.grant-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap:                   var(--space-6);
    margin-top:            var(--space-8);
}
.grant-card {
    background:    #fff;
    border:        1px solid var(--clr-border);
    border-radius: var(--radius-lg);
    padding:       var(--space-6);
    display:       flex;
    flex-direction: column;
    gap:           var(--space-3);
}
.grant-card__header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2); }
.grant-badge {
    font-size:     var(--text-xs);
    font-weight:   700;
    padding:       .25em .75em;
    border-radius: 9999px;
}
.grant-badge--federal   { background: #dbeafe; color: #1d4ed8; }
.grant-badge--provincial{ background: #dcfce7; color: #15803d; }
.grant-card__eligible {
    display:     flex;
    align-items: center;
    gap:         .35em;
    font-size:   var(--text-xs);
    color:       #16a34a;
    font-weight: 600;
}
.grant-card__title  { font-size: var(--text-base); font-weight: 700; margin: 0; }
.grant-card__amount { font-size: var(--text-sm); font-weight: 600; color: var(--clr-primary); }
.grant-card__body   { font-size: var(--text-sm); color: var(--clr-text-muted); margin: 0; line-height: 1.7; }
.grant-card__details{ font-size: var(--text-xs); color: var(--clr-text-muted); display: flex; flex-direction: column; gap: var(--space-2); margin-top: auto; padding-top: var(--space-3); border-top: 1px solid var(--clr-border); }
.grant-card__details a { color: var(--clr-primary); }

/* ── Pilot page ────────────────────────────────────────────────────────────── */
.pilot-hero-badge {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           80px;
    height:          80px;
    border-radius:   50%;
    background:      #fff;
    color:           var(--clr-primary);
    font-size:       2rem;
    font-weight:     900;
    margin-bottom:   var(--space-6);
    border:          4px solid rgba(255,255,255,.3);
}
.pilot-includes { display: flex; flex-direction: column; gap: var(--space-6); max-width: 760px; margin: 0 auto; }
.include-item {
    display:    flex;
    gap:        var(--space-5);
    align-items: flex-start;
}
.include-item__check {
    width:          36px;
    height:         36px;
    flex-shrink:    0;
    border-radius:  50%;
    background:     var(--clr-primary);
    color:          #fff;
    display:        flex;
    align-items:    center;
    justify-content: center;
    font-size:      1.1rem;
    font-weight:    700;
}
.include-item strong { display: block; font-size: var(--text-base); margin-bottom: var(--space-1); }
.include-item p { margin: 0; font-size: var(--text-sm); color: var(--clr-text-muted); line-height: 1.7; }
.pilot-timeline { display: flex; flex-direction: column; gap: 0; max-width: 720px; margin: 0 auto; position: relative; }
.pilot-timeline::before {
    content:    '';
    position:   absolute;
    left:       52px;
    top:        0;
    bottom:     0;
    width:      2px;
    background: var(--clr-border);
}
.pilot-step {
    display:      flex;
    gap:          var(--space-6);
    padding:      var(--space-6) 0;
    align-items:  flex-start;
    position:     relative;
}
.pilot-step__week {
    width:          88px;
    flex-shrink:    0;
    font-size:      var(--text-xs);
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color:          var(--clr-primary);
    padding-top:    var(--space-1);
    text-align:     right;
    padding-right:  var(--space-5);
    position:       relative;
    z-index:        1;
}
.pilot-step__week::after {
    content:      '';
    position:     absolute;
    right:        -5px;
    top:          6px;
    width:        10px;
    height:       10px;
    border-radius: 50%;
    background:   var(--clr-primary);
    border:       2px solid #fff;
    box-shadow:   0 0 0 2px var(--clr-primary);
}
.pilot-step__content h3 { font-size: var(--text-base); margin: 0 0 var(--space-2); font-weight: 600; }
.pilot-step__content p  { margin: 0; font-size: var(--text-sm); color: var(--clr-text-muted); line-height: 1.7; }

/* ── FAQ list ──────────────────────────────────────────────────────────────── */
.faq-list    { display: flex; flex-direction: column; gap: var(--space-1); margin-top: var(--space-8); }
.faq-item    { border: 1px solid var(--clr-border); border-radius: var(--radius-md); padding: var(--space-5) var(--space-6); }
.faq-question{ font-size: var(--text-base); font-weight: 600; margin: 0 0 var(--space-3); }
.faq-answer  { margin: 0; font-size: var(--text-sm); color: var(--clr-text-muted); line-height: 1.7; }

/* ── LandGazette: AI steps ─────────────────────────────────────────────────── */
.ai-steps-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap:                   var(--space-6);
    margin-top:            var(--space-8);
}
.ai-step {
    text-align:    center;
    padding:       var(--space-6);
    background:    #fff;
    border:        1px solid var(--clr-border);
    border-radius: var(--radius-lg);
}
.ai-step__num {
    font-size:   2rem;
    font-weight: 900;
    color:       var(--clr-primary);
    opacity:     .3;
    line-height: 1;
    margin-bottom: var(--space-3);
}
.ai-step__title { font-size: var(--text-base); font-weight: 600; margin: 0 0 var(--space-2); }
.ai-step p { font-size: var(--text-sm); color: var(--clr-text-muted); margin: 0; line-height: 1.7; }

/* ── Footer cert badges & residency ───────────────────────────────────────── */
.footer-cert-badge {
    display:        inline-flex;
    align-items:    center;
    gap:            .4em;
    font-size:      var(--text-xs);
    padding:        .3em .7em;
    border-radius:  9999px;
    background:     rgba(255,255,255,.1);
    border:         1px solid rgba(255,255,255,.2);
    color:          rgba(255,255,255,.8);
    margin:         2px;
}
.footer-residency {
    font-size:      var(--text-xs);
    color:          rgba(255,255,255,.5);
    border-top:     1px solid rgba(255,255,255,.1);
    margin-top:     var(--space-4);
    padding-top:    var(--space-4);
    text-align:     center;
}

/* ── section--surface utility ──────────────────────────────────────────────── */
.section--surface { background: var(--clr-bg-alt, #f8fafc); }

/* ── Form row 2-col ────────────────────────────────────────────────────────── */
.tn-form__row--2col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
@media (max-width: 560px) { .tn-form__row--2col { grid-template-columns: 1fr; } }

/* ── features-grid 3-col variant ───────────────────────────────────────────── */
.features-grid--3col { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

/* ── split stacked ─────────────────────────────────────────────────────────── */
.split--stacked .split__list {
    margin:      var(--space-4) 0;
    padding-left: var(--space-6);
    display:     flex;
    flex-direction: column;
    gap:         var(--space-2);
}
.split--stacked .split__list li { font-size: var(--text-sm); color: var(--clr-text-muted); }

/* ── Scroll-to-top button ──────────────────────────────────────────────────── */
.scroll-top {
    position:      fixed;
    bottom:        var(--space-6);
    right:         var(--space-6);
    width:         44px;
    height:        44px;
    border-radius: 50%;
    background:    var(--clr-primary);
    color:         #fff;
    border:        none;
    cursor:        pointer;
    display:       flex;
    align-items:   center;
    justify-content: center;
    box-shadow:    0 2px 12px rgba(0,0,0,.2);
    opacity:       0;
    pointer-events: none;
    transition:    opacity .2s, transform .2s;
    z-index:       150;
}
.scroll-top.is-visible { opacity: 1; pointer-events: auto; }
.scroll-top:hover { transform: translateY(-2px); }