/* ═══════════════════════════════════════════════════════════
       TRUEWATT — Editorial engineering journal homepage
       Single-file production-grade demo. Built to score against
       the Anti-AI Rubric in /Users/.../files/05-ANTI-AI-RUBRIC.md
       ═══════════════════════════════════════════════════════════ */

    :root {
      /* Canonical palette per /Users/.../files/A2.png (rev 2026-05-09) */
      --tw-blue:        #1A5FA8;       /* TrueWatt Blue · Pantone 7683 C */
      --tw-midnight:    #15314B;       /* Midnight Blue · Pantone 302 C */
      --tw-midnight-90: rgba(21, 49, 75, 0.92);
      --tw-teal:        #4AB3C8;       /* Agama Teal · Pantone 7702 C */
      --tw-orange:      #ED7222;       /* TrueWatt Orange · Pantone 7579 C */
      --tw-orange-deep: #C85A14;       /* darker hover */
      --tw-amber:       #EE9130;       /* Solar Amber · Pantone 7570 C */
      --tw-amber-light: #F0A833;       /* Reflective Amber · Pantone 7548 C */
      --tw-yellow:      #F5D98A;       /* Bright Yellow · Pantone 7548 C */
      --tw-verified:    #2AA84A;       /* Verified Green · Pantone 7739 C — pure green, NOT teal */
      --tw-forest:      #3B8952;       /* Forest Green · Pantone 7735 C */
      --tw-alert:       #AC372D;       /* Alert Red · Pantone 7621 C */
      --tw-terra:       #6F230D;       /* Deep Terracotta · Pantone 490 C */
      --tw-cream:       #F5EFE6;
      --tw-cream-warm:  #FAF4E6;
      --tw-paper:       #F8F1E1;
      --tw-offwhite:    #FAFAF8;
      --tw-ink-100:     #F5F5F3;
      --tw-ink-200:     #E8E5DD;
      --tw-ink-400:     #A39E91;
      --tw-ink-600:     #6B6B68;
      --tw-ink-800:     #2A2A28;
      --tw-line:        rgba(21, 49, 75, 0.14);

      --serif:    'Fraunces', 'Times New Roman', Georgia, serif;
      --sans:     'Inter Tight', -apple-system, BlinkMacSystemFont, sans-serif;
      --mono:     'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

      --maxw: 1280px;
      --gutter: clamp(20px, 4vw, 64px);
      --ease: cubic-bezier(0.22, 1, 0.36, 1);
    }

    *, *::before, *::after { box-sizing: border-box; }
    html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
    body {
      margin: 0;
      font-family: var(--sans);
      font-size: 17px;
      line-height: 1.55;
      color: var(--tw-ink-800);
      background: var(--tw-paper);
      background-image:
        url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.78' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.55  0 0 0 0 0.45  0 0 0 0 0.30  0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      overflow-x: hidden;
    }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
      html { scroll-behavior: auto; }
    }

    img, svg { display: block; max-width: 100%; }
    a { color: inherit; text-decoration: none; }
    button { font: inherit; cursor: pointer; }

    /* ─── Skip link for screen readers / keyboard users */
    .skip {
      position: absolute;
      left: 12px; top: 12px;
      background: var(--tw-cream);
      color: var(--tw-midnight);
      padding: 10px 16px;
      border-radius: 6px;
      font-family: var(--sans);
      font-weight: 600;
      font-size: 14px;
      z-index: 999;
      transform: translateY(-200%);
      transition: transform 200ms var(--ease);
    }
    .skip:focus { transform: translateY(0); outline: 2px solid var(--tw-orange); outline-offset: 2px; }

    .display {
      font-family: var(--serif);
      font-weight: 600;
      font-variation-settings: "opsz" 144;
      letter-spacing: -0.025em;
      line-height: 0.97;
      text-wrap: balance;
    }
    .em-italic {
      font-family: var(--serif);
      font-style: italic;
      font-weight: 600;
      color: var(--tw-orange);
    }
    .eyebrow {
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      font-weight: 500;
      color: var(--tw-orange-deep);
    }
    .eyebrow--cream { color: var(--tw-orange); opacity: 0.95; }
    .eyebrow--midnight { color: var(--tw-midnight); }

    /* ═══════════════════ NAV ═══════════════════ */
    .nav {
      position: fixed;
      top: 0; left: 0; right: 0;
      height: 76px;
      padding: 0 var(--gutter);
      display: flex;
      align-items: center;
      justify-content: space-between;
      z-index: 100;
      background: transparent;
      transition: background 320ms var(--ease), backdrop-filter 320ms var(--ease), border-color 320ms var(--ease);
      border-bottom: 1px solid transparent;
    }
    .nav.scrolled {
      background: var(--tw-midnight-90);
      backdrop-filter: blur(14px) saturate(140%);
      -webkit-backdrop-filter: blur(14px) saturate(140%);
      border-bottom-color: rgba(245, 239, 230, 0.10);
    }
    .nav__brand {
      font-family: var(--serif);
      font-weight: 600;
      font-size: 26px;
      letter-spacing: -0.02em;
      color: var(--tw-cream);
      display: flex;
      align-items: center;
      gap: 14px;
    }
    .nav__brand .truem { color: var(--tw-cream); }
    .nav__brand .wattm { color: var(--tw-orange); font-style: italic; font-weight: 500; }
    .nav__brand-strap {
      font-family: var(--mono);
      font-size: 9.5px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: rgba(245, 239, 230, 0.6);
      line-height: 1.3;
      padding-left: 14px;
      border-left: 1px solid rgba(245, 239, 230, 0.18);
      max-width: 180px;
    }
    .nav__links {
      display: flex;
      gap: 36px;
      align-items: center;
    }
    .nav__link {
      font-family: var(--sans);
      font-weight: 500;
      font-size: 14px;
      color: var(--tw-cream);
      opacity: 0.86;
      letter-spacing: 0.01em;
      position: relative;
      padding: 6px 0;
      transition: opacity 200ms var(--ease);
    }
    .nav__link::after {
      content: '';
      position: absolute;
      left: 0; right: 0; bottom: 0;
      height: 1.5px;
      background: var(--tw-orange);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 280ms var(--ease);
    }
    .nav__link:hover { opacity: 1; }
    .nav__link:hover::after { transform: scaleX(1); }

    /* CTA — cream-on-midnight per user request, NOT orange */
    .nav__cta {
      font-family: var(--sans);
      font-weight: 600;
      font-size: 14px;
      color: var(--tw-midnight);
      background: var(--tw-cream);
      padding: 10px 20px 11px;
      border-radius: 999px;
      transition: transform 200ms var(--ease), box-shadow 200ms var(--ease), background 200ms var(--ease);
      box-shadow: 0 1px 0 rgba(0,0,0,0.05);
    }
    .nav__cta:hover {
      background: var(--tw-yellow);
      transform: translateY(-1px);
      box-shadow: 0 6px 18px rgba(0,0,0,0.18);
    }
    .nav__cta-arrow { display: inline-block; margin-left: 6px; transition: transform 200ms var(--ease); }
    .nav__cta:hover .nav__cta-arrow { transform: translateX(3px); }

    .nav__hamburger {
      display: none;
      flex-direction: column;
      gap: 5px;
      background: transparent;
      border: 0;
      padding: 10px;
      width: 44px;
      height: 44px;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      position: relative;
      z-index: 102;
    }
    .nav__hamburger span {
      width: 22px;
      height: 1.5px;
      background: var(--tw-cream);
      transition: transform 240ms var(--ease), opacity 200ms var(--ease);
      transform-origin: center;
    }
    .nav.is-open .nav__hamburger span:nth-child(1) {
      transform: translateY(6.5px) rotate(45deg);
    }
    .nav.is-open .nav__hamburger span:nth-child(2) {
      opacity: 0;
    }
    .nav.is-open .nav__hamburger span:nth-child(3) {
      transform: translateY(-6.5px) rotate(-45deg);
    }

    /* Tablet (601-900px): hide mega-nav links, keep CTA + hamburger */
    @media (max-width: 900px) {
      .nav__links, .nav__brand-strap { display: none; }
      .nav__hamburger { display: flex; }
      .nav__brand { font-size: 22px; }
    }
    /* Phone (≤ 600px): also hide the cream CTA — the hamburger menu carries it */
    @media (max-width: 600px) {
      .nav { padding: 0 18px; height: 64px; }
      .nav__cta { display: none; }
      .nav__brand { font-size: 20px; gap: 0; }
    }
    @media (max-width: 380px) {
      .nav__brand { font-size: 18px; }
    }

    /* Mobile drawer overlay */
    .nav-drawer {
      position: fixed;
      inset: 0;
      background: var(--tw-midnight);
      color: var(--tw-cream);
      z-index: 101;
      display: flex;
      flex-direction: column;
      padding: 90px 28px 32px;
      transform: translateX(100%);
      transition: transform 360ms var(--ease);
      overflow-y: auto;
      visibility: hidden;
    }
    .nav-drawer.is-open {
      transform: translateX(0);
      visibility: visible;
    }
    .nav-drawer::before {
      content: '';
      position: absolute;
      top: -30vh; right: -20vw;
      width: 70vh; height: 70vh;
      background: radial-gradient(circle at center, rgba(245, 216, 186, 0.16) 0%, transparent 60%);
      pointer-events: none;
    }
    .nav-drawer__list {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 4px;
      position: relative;
    }
    .nav-drawer__list a {
      display: block;
      padding: 18px 6px;
      font-family: var(--serif);
      font-weight: 600;
      font-size: 28px;
      letter-spacing: -0.018em;
      color: var(--tw-cream);
      border-bottom: 1px solid rgba(245, 239, 230, 0.10);
      transition: color 200ms var(--ease), padding-left 200ms var(--ease);
    }
    .nav-drawer__list a:hover {
      color: var(--tw-orange);
      padding-left: 16px;
    }
    .nav-drawer__cta {
      margin-top: auto;
      padding-top: 24px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      position: relative;
    }
    .nav-drawer__cta-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      background: var(--tw-orange);
      color: var(--tw-cream);
      font-family: var(--sans);
      font-weight: 600;
      font-size: 16px;
      padding: 18px 24px 19px;
      border-radius: 999px;
      text-align: center;
      box-shadow: 0 12px 26px -10px rgba(237, 114, 34, 0.55);
    }
    .nav-drawer__contact {
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.06em;
      color: rgba(245, 239, 230, 0.6);
      line-height: 1.7;
      text-align: center;
      padding-top: 14px;
    }
    .nav-drawer__contact a {
      color: var(--tw-cream);
      text-decoration: underline;
      text-decoration-color: rgba(245, 239, 230, 0.3);
      text-underline-offset: 3px;
    }
    /* Lock body scroll while drawer open */
    body.no-scroll { overflow: hidden; }
    @media (min-width: 901px) {
      .nav-drawer { display: none !important; }
    }

    /* ═══════════════════ DIESEL TICKER ═══════════════════ */
    .ticker {
      position: relative;
      background: var(--tw-orange);
      color: var(--tw-cream);
      height: 38px;
      overflow: hidden;
      display: flex;
      align-items: center;
      border-bottom: 1px solid rgba(0,0,0,0.10);
      z-index: 90;
    }
    .ticker__track {
      display: flex;
      gap: 56px;
      white-space: nowrap;
      animation: tickerScroll 48s linear infinite;
      padding-left: 56px;
    }
    .ticker__item {
      display: flex; align-items: center; gap: 14px;
      font-family: var(--mono);
      font-size: 12px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      font-weight: 500;
    }
    .ticker__dot {
      width: 8px; height: 8px;
      border-radius: 50%;
      background: var(--tw-cream);
      animation: tickerPulse 1.6s ease-in-out infinite;
    }
    @keyframes tickerScroll {
      0%   { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }
    @keyframes tickerPulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50%      { opacity: 0.4; transform: scale(0.7); }
    }

    /* ═══════════════════ HERO ═══════════════════ */
    .hero {
      position: relative;
      background:
        linear-gradient(115deg, rgba(21, 49, 75, 0.94) 0%, rgba(21, 49, 75, 0.78) 50%, rgba(21, 49, 75, 0.55) 100%),
        url("https://images.unsplash.com/photo-1613665813446-82a78c468a1d?w=2400&q=70&auto=format&fit=crop") center/cover no-repeat,
        var(--tw-midnight);
      color: var(--tw-cream);
      padding: 140px var(--gutter) 96px;
      overflow: hidden;
      isolation: isolate;
    }
    .hero::before {
      content: '';
      position: absolute;
      top: -50vh; right: -25vw;
      width: 130vh; height: 130vh;
      background:
        repeating-conic-gradient(
          from 110deg at 50% 50%,
          rgba(245, 216, 186, 0.18) 0deg 0.6deg,
          transparent 0.6deg 7deg
        );
      -webkit-mask-image: radial-gradient(circle at center, #000 18%, transparent 62%);
              mask-image: radial-gradient(circle at center, #000 18%, transparent 62%);
      pointer-events: none;
      z-index: 0;
      animation: rayDrift 240s linear infinite;
    }
    @keyframes rayDrift {
      from { transform: rotate(0deg); }
      to   { transform: rotate(8deg); }
    }
    .hero::after {
      content: '';
      position: absolute;
      top: -30vh; right: -8vw;
      width: 60vh; height: 60vh;
      background: radial-gradient(circle at center,
        rgba(245, 216, 186, 0.40) 0%,
        rgba(237, 114, 34, 0.18) 25%,
        transparent 60%);
      filter: blur(8px);
      pointer-events: none;
      z-index: 0;
    }

    .hero__inner {
      position: relative;
      max-width: var(--maxw);
      margin: 0 auto;
      display: grid;
      grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
      gap: 0;
      align-items: end;
      min-height: 78vh;
      z-index: 2;
    }

    .hero__copy {
      max-width: 640px;
      animation: heroIn 1.1s var(--ease) both;
    }
    @keyframes heroIn {
      0% { opacity: 0; transform: translateY(28px); }
      100% { opacity: 1; transform: translateY(0); }
    }

    .hero__eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 28px;
    }
    .hero__eyebrow .dot {
      width: 6px; height: 6px;
      border-radius: 50%;
      background: var(--tw-orange);
    }

    .hero__h1 {
      font-family: var(--serif);
      font-weight: 600;
      font-variation-settings: "opsz" 144;
      font-size: clamp(48px, 7.5vw, 108px);
      line-height: 0.94;
      letter-spacing: -0.035em;
      color: var(--tw-cream);
      text-wrap: balance;
      margin: 0 0 22px;
    }
    .hero__h1 .em {
      font-style: italic;
      font-weight: 500;
      color: var(--tw-orange);
    }

    .hero__strap {
      font-family: var(--serif);
      font-weight: 500;
      font-size: clamp(20px, 2.2vw, 26px);
      line-height: 1.3;
      color: rgba(245, 239, 230, 0.78);
      margin: 0 0 28px;
      letter-spacing: -0.01em;
    }
    .hero__strap b { color: var(--tw-cream); font-weight: 600; }

    .hero__body {
      font-size: 17.5px;
      line-height: 1.6;
      color: rgba(245, 239, 230, 0.80);
      max-width: 520px;
      margin: 0 0 40px;
    }

    .hero__cta {
      display: inline-flex;
      align-items: center;
      gap: 14px;
      background: var(--tw-orange);
      color: var(--tw-cream);
      font-family: var(--sans);
      font-weight: 600;
      font-size: 16px;
      letter-spacing: 0.005em;
      padding: 18px 28px 19px;
      border-radius: 999px;
      transition: transform 220ms var(--ease), box-shadow 220ms var(--ease), background 220ms var(--ease);
      box-shadow: 0 12px 30px -10px rgba(237, 114, 34, 0.55);
    }
    .hero__cta:hover {
      background: var(--tw-amber);
      transform: translateY(-2px);
      box-shadow: 0 18px 38px -10px rgba(237, 114, 34, 0.7);
    }
    .hero__cta::after {
      content: '→';
      font-family: var(--serif);
      font-style: italic;
      font-weight: 500;
      transition: transform 220ms var(--ease);
    }
    .hero__cta:hover::after { transform: translateX(4px); }

    .hero__second {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-left: 22px;
      color: rgba(245, 239, 230, 0.85);
      font-weight: 500;
      font-size: 15px;
      padding: 18px 0 19px;
      transition: color 200ms var(--ease);
    }
    .hero__second:hover { color: var(--tw-cream); }
    .hero__second::after { content: '↓'; opacity: 0.6; }

    .hero__mascot-wrap {
      position: relative;
      align-self: end;
      justify-self: end;
      width: 100%;
      max-width: 520px;
      animation: heroIn 1.3s 0.2s var(--ease) both;
    }
    .hero__mascot {
      width: 100%;
      height: auto;
      filter: drop-shadow(0 36px 60px rgba(0,0,0,0.4));
    }
    .hero__cartouche {
      position: absolute;
      top: 22%;
      right: -8px;
      transform: translateX(35%);
      background: var(--tw-cream);
      color: var(--tw-midnight);
      padding: 14px 18px;
      border-radius: 4px;
      max-width: 220px;
      font-family: var(--sans);
      font-size: 14px;
      line-height: 1.5;
      box-shadow: 0 18px 40px -8px rgba(0,0,0,0.35);
      transform-origin: top left;
      animation: cartoucheIn 1.4s 0.6s var(--ease) both;
    }
    @keyframes cartoucheIn {
      0%   { opacity: 0; transform: translateX(35%) translateY(8px) rotate(-2deg); }
      100% { opacity: 1; transform: translateX(35%) translateY(0) rotate(-2deg); }
    }
    .hero__cartouche::before {
      content: '';
      position: absolute;
      top: -10px; left: 24px;
      width: 0; height: 0;
      border: 8px solid transparent;
      border-bottom-color: var(--tw-cream);
    }
    .hero__cartouche-eye {
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--tw-orange);
      font-weight: 600;
      margin-bottom: 8px;
    }
    .hero__cartouche-q {
      font-family: var(--serif);
      font-style: italic;
      font-weight: 500;
      font-size: 17px;
      line-height: 1.35;
    }
    .hero__cartouche-q em {
      font-style: italic;
      color: var(--tw-orange);
    }

    .hero__scroll-cue {
      position: absolute;
      bottom: 36px;
      left: 50%;
      transform: translateX(-50%);
      font-family: var(--mono);
      font-size: 10.5px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: rgba(245, 239, 230, 0.5);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      z-index: 3;
    }
    .hero__scroll-cue::after {
      content: '';
      width: 1px;
      height: 38px;
      background: linear-gradient(180deg, rgba(245, 239, 230, 0.5), transparent);
      animation: scrollCue 2.4s ease-in-out infinite;
    }
    @keyframes scrollCue {
      0%, 100% { transform: scaleY(1); transform-origin: top; opacity: 0.4; }
      50% { transform: scaleY(1.4); opacity: 1; }
    }

    @media (max-width: 900px) {
      .hero { padding: 120px 24px 80px; }
      .hero__inner { grid-template-columns: 1fr; min-height: auto; gap: 40px; }
      .hero__mascot-wrap { max-width: 320px; margin: 0 auto; }
      .hero__cartouche { transform: translateX(0) rotate(-2deg); }
      .hero__scroll-cue { display: none; }
    }

    /* ═══════════════════ STATS ═══════════════════ */
    .stats {
      max-width: var(--maxw);
      margin: 0 auto;
      padding: 80px var(--gutter) 64px;
      display: grid;
      grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
      gap: 64px;
      align-items: start;
    }
    .stats__lede { position: sticky; top: 110px; }
    .stats__lede h2 {
      font-family: var(--serif);
      font-weight: 600;
      font-size: clamp(34px, 4vw, 52px);
      line-height: 1.02;
      letter-spacing: -0.025em;
      color: var(--tw-midnight);
      margin: 14px 0 0;
      text-wrap: balance;
    }
    .stats__lede h2 em { font-style: italic; color: var(--tw-orange-deep); }
    .stats__numbers {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0;
      border-top: 1px solid var(--tw-line);
    }
    .stat {
      padding: 32px 24px 32px 0;
      border-bottom: 1px solid var(--tw-line);
      position: relative;
    }
    .stat:nth-child(odd) { padding-right: 32px; border-right: 1px solid var(--tw-line); }
    .stat:nth-child(even) { padding-left: 32px; }
    .stat__num {
      font-family: var(--serif);
      font-weight: 600;
      font-size: clamp(48px, 6vw, 80px);
      line-height: 0.95;
      letter-spacing: -0.04em;
      color: var(--tw-midnight);
      display: flex;
      align-items: flex-start;
      gap: 6px;
    }
    .stat__num .unit {
      font-family: var(--serif);
      font-style: italic;
      font-weight: 500;
      font-size: 0.45em;
      color: var(--tw-orange);
      padding-top: 0.45em;
    }
    .stat__count { font-variant-numeric: tabular-nums; }
    .stat__label {
      font-family: var(--sans);
      font-weight: 500;
      font-size: 15px;
      line-height: 1.45;
      color: var(--tw-ink-800);
      margin-top: 16px;
      max-width: 260px;
    }
    .stat__source {
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--tw-ink-400);
      margin-top: 14px;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .stat__source::before {
      content: '';
      display: inline-block;
      width: 18px; height: 1px;
      background: var(--tw-ink-400);
    }

    @media (max-width: 900px) {
      .stats { grid-template-columns: 1fr; padding: 56px 24px 48px; gap: 32px; }
      .stats__lede { position: relative; top: 0; }
      .stats__numbers { grid-template-columns: 1fr; }
      .stat:nth-child(odd) { padding-right: 0; border-right: 0; }
      .stat:nth-child(even) { padding-left: 0; }
    }

    /* ═══════════════════ FIVE DIFFERENTIATORS ═══════════════════ */
    .diff {
      background: var(--tw-cream);
      padding: 96px var(--gutter);
      position: relative;
    }
    .diff__inner { max-width: var(--maxw); margin: 0 auto; }
    .diff__head {
      display: grid;
      grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
      gap: 40px;
      align-items: end;
      margin-bottom: 48px;
    }
    .diff__head h2 {
      font-family: var(--serif);
      font-weight: 600;
      font-size: clamp(34px, 4vw, 56px);
      line-height: 1.02;
      letter-spacing: -0.025em;
      color: var(--tw-midnight);
      margin: 18px 0 0;
      text-wrap: balance;
    }
    .diff__head p {
      font-size: 17px;
      color: var(--tw-ink-800);
      line-height: 1.55;
      margin: 0;
      max-width: 480px;
    }

    .diff__grid {
      display: grid;
      grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
      gap: 24px;
    }
    .diff__lead {
      background: var(--tw-midnight);
      color: var(--tw-cream);
      border-radius: 18px;
      padding: 48px;
      position: relative;
      overflow: hidden;
      min-height: 540px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    .diff__lead::after {
      content: '';
      position: absolute;
      bottom: -50%; right: -20%;
      width: 70%; height: 100%;
      background: radial-gradient(circle at center, rgba(245, 216, 186, 0.18) 0%, transparent 60%);
      pointer-events: none;
    }
    .diff__num {
      font-family: var(--serif);
      font-weight: 600;
      font-style: italic;
      font-size: 96px;
      line-height: 0.85;
      color: var(--tw-orange);
      letter-spacing: -0.04em;
    }
    .diff__lead h3 {
      font-family: var(--serif);
      font-weight: 600;
      font-size: 36px;
      line-height: 1.08;
      letter-spacing: -0.02em;
      margin: 32px 0 16px;
      max-width: 380px;
    }
    .diff__lead p {
      font-size: 16px;
      line-height: 1.6;
      color: rgba(245, 239, 230, 0.78);
      max-width: 440px;
      margin: 0;
    }
    .diff__lead-tag {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--tw-yellow);
      background: rgba(245, 216, 186, 0.12);
      border: 1px solid rgba(245, 216, 186, 0.2);
      padding: 6px 12px;
      border-radius: 999px;
      width: max-content;
      margin-top: 32px;
      position: relative; z-index: 2;
    }

    .diff__small-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr 1fr;
      gap: 24px;
    }
    .diff__small {
      background: var(--tw-cream-warm);
      border: 1px solid var(--tw-line);
      border-radius: 14px;
      padding: 28px 24px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      position: relative;
      transition: transform 220ms var(--ease), box-shadow 220ms var(--ease), border-color 220ms var(--ease);
    }
    .diff__small:hover {
      transform: translateY(-3px);
      box-shadow: 0 18px 40px -16px rgba(21, 49, 75, 0.15);
      border-color: rgba(21, 49, 75, 0.25);
    }
    .diff__small-num {
      font-family: var(--serif);
      font-weight: 600;
      font-style: italic;
      font-size: 36px;
      line-height: 0.9;
      color: var(--tw-orange);
      letter-spacing: -0.04em;
    }
    .diff__small h4 {
      font-family: var(--serif);
      font-weight: 600;
      font-size: 19px;
      line-height: 1.2;
      color: var(--tw-midnight);
      margin: 0;
      letter-spacing: -0.01em;
    }
    .diff__small p {
      font-size: 14.5px;
      line-height: 1.55;
      color: var(--tw-ink-800);
      margin: 0;
    }
    .diff__small--verified {
      border-left: 3px solid var(--tw-verified);
    }
    .diff__small--verified .diff__small-num {
      color: var(--tw-verified);
    }

    @media (max-width: 900px) {
      .diff { padding: 64px 24px; }
      .diff__head { grid-template-columns: 1fr; gap: 24px; }
      .diff__grid { grid-template-columns: 1fr; }
      .diff__lead { padding: 32px; min-height: auto; }
      .diff__small-grid { grid-template-columns: 1fr; }
    }

    /* ═══════════════════ FOUNDER CREDENTIALS ═══════════════════ */
    .founders {
      max-width: var(--maxw);
      margin: 0 auto;
      padding: 96px var(--gutter);
    }
    .founders__head {
      display: grid;
      grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
      gap: 48px;
      align-items: end;
      margin-bottom: 56px;
    }
    .founders__head h2 {
      font-family: var(--serif);
      font-weight: 600;
      font-size: clamp(36px, 4.4vw, 60px);
      line-height: 1.0;
      letter-spacing: -0.028em;
      color: var(--tw-midnight);
      margin: 18px 0 0;
      text-wrap: balance;
    }
    .founders__head h2 em { font-style: italic; color: var(--tw-orange-deep); }

    .founders__grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
    }
    .founder-card {
      position: relative;
      background: var(--tw-paper);
      border: 1px solid var(--tw-line);
      border-radius: 16px;
      padding: 40px 36px 36px;
      overflow: hidden;
    }
    .founder-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 4px;
    }
    .founder-card--ekene::before { background: var(--tw-orange); }
    .founder-card--alice::before { background: var(--tw-blue); }

    .founder-card__credential {
      font-family: var(--serif);
      font-weight: 600;
      font-size: clamp(22px, 2.4vw, 30px);
      line-height: 1.12;
      letter-spacing: -0.02em;
      color: var(--tw-midnight);
      margin-bottom: 24px;
      text-wrap: balance;
    }
    .founder-card__credential em { font-style: italic; color: var(--tw-orange-deep); }
    .founder-card__name {
      font-family: var(--sans);
      font-weight: 600;
      font-size: 16px;
      color: var(--tw-midnight);
      margin: 0 0 4px;
    }
    .founder-card__role {
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--tw-orange-deep);
      margin: 0 0 18px;
    }
    .founder-card__bio {
      font-size: 15px;
      line-height: 1.55;
      color: var(--tw-ink-800);
      margin: 0 0 20px;
    }
    .founder-card__contact {
      font-family: var(--mono);
      font-size: 12px;
      color: var(--tw-ink-600);
      letter-spacing: 0.04em;
      padding-top: 20px;
      border-top: 1px solid var(--tw-line);
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .founder-card__contact a {
      color: var(--tw-blue);
      text-decoration: underline;
      text-decoration-color: rgba(26, 95, 171, 0.3);
      text-underline-offset: 3px;
    }

    @media (max-width: 900px) {
      .founders { padding: 64px 24px; }
      .founders__head { grid-template-columns: 1fr; gap: 18px; }
      .founders__grid { grid-template-columns: 1fr; }
    }

    /* ═══════════════════ ENGINEERING SPECIFICITY ═══════════════════ */
    .engineering {
      background: var(--tw-midnight);
      color: var(--tw-cream);
      padding: 112px var(--gutter);
      position: relative;
      overflow: hidden;
    }
    .engineering::before {
      content: '';
      position: absolute;
      bottom: -40%; left: -10%;
      width: 60%; height: 80%;
      background: radial-gradient(circle at 30% 50%, rgba(74, 179, 200, 0.18) 0%, transparent 55%);
      pointer-events: none;
    }
    .engineering__inner {
      max-width: 980px;
      margin: 0 auto;
      position: relative;
    }
    .engineering__eyebrow {
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--tw-orange);
      margin-bottom: 32px;
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .engineering__eyebrow::before, .engineering__eyebrow::after {
      content: '';
      flex: 1;
      height: 1px;
      background: rgba(245, 239, 230, 0.18);
    }
    .engineering__quote {
      font-family: var(--serif);
      font-weight: 500;
      font-style: italic;
      font-size: clamp(22px, 2.4vw, 32px);
      line-height: 1.35;
      letter-spacing: -0.012em;
      color: var(--tw-cream);
      text-wrap: balance;
      margin: 0 0 44px;
    }
    .engineering__quote b {
      font-style: normal;
      font-weight: 600;
      color: var(--tw-amber-light);
    }
    .engineering__quote span.spec {
      font-family: var(--mono);
      font-style: normal;
      font-weight: 500;
      font-size: 0.78em;
      color: var(--tw-yellow);
      letter-spacing: 0.04em;
      padding: 1px 8px;
      background: rgba(245, 216, 186, 0.10);
      border: 1px solid rgba(245, 216, 186, 0.22);
      border-radius: 4px;
      margin: 0 2px;
      vertical-align: 0.06em;
    }
    .engineering__sig {
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: rgba(245, 239, 230, 0.56);
      display: flex;
      gap: 24px;
      flex-wrap: wrap;
    }
    .engineering__sig span { display: flex; align-items: center; gap: 8px; }
    .engineering__sig span::before {
      content: '';
      width: 6px; height: 6px;
      background: var(--tw-verified);
      border-radius: 50%;
    }

    @media (max-width: 900px) {
      .engineering { padding: 72px 24px; }
    }

    /* ═══════════════════ COMPARISON TABLE ═══════════════════ */
    .compare {
      background: var(--tw-paper);
      padding: 112px var(--gutter);
    }
    .compare__inner { max-width: var(--maxw); margin: 0 auto; }
    .compare__head {
      display: grid;
      grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
      gap: 48px;
      align-items: end;
      margin-bottom: 56px;
    }
    .compare__head h2 {
      font-family: var(--serif);
      font-weight: 600;
      font-size: clamp(36px, 4.4vw, 60px);
      line-height: 1.0;
      letter-spacing: -0.028em;
      color: var(--tw-midnight);
      margin: 18px 0 0;
      text-wrap: balance;
    }
    .compare__head h2 em { font-style: italic; color: var(--tw-forest); }
    .compare__head p { color: var(--tw-ink-800); font-size: 17px; line-height: 1.55; max-width: 440px; }

    .compare__table {
      display: grid;
      grid-template-columns: minmax(180px, 1.6fr) 2fr 2fr;
      border: 1px solid var(--tw-line);
      border-radius: 16px;
      overflow: hidden;
      background: var(--tw-cream-warm);
    }
    .compare__hcell {
      padding: 22px 28px;
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      font-weight: 600;
      color: var(--tw-cream);
      display: flex; align-items: center; gap: 10px;
    }
    .compare__hcell:nth-child(1) {
      background: var(--tw-midnight);
      color: rgba(245, 239, 230, 0.7);
      letter-spacing: 0.16em;
    }
    .compare__hcell:nth-child(2) {
      background: var(--tw-ink-600);
      color: var(--tw-cream);
    }
    .compare__hcell:nth-child(3) {
      background: var(--tw-forest);
      color: var(--tw-cream);
    }
    .compare__hcell-tag {
      background: rgba(245, 239, 230, 0.18);
      padding: 3px 8px;
      border-radius: 999px;
      font-size: 10px;
      letter-spacing: 0.16em;
    }
    .compare__cell {
      padding: 22px 28px;
      border-top: 1px solid var(--tw-line);
      font-size: 15px;
      line-height: 1.5;
      color: var(--tw-ink-800);
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .compare__cell--label {
      background: var(--tw-cream);
      font-family: var(--sans);
      font-weight: 600;
      color: var(--tw-midnight);
      font-size: 14px;
    }
    .compare__cell--typical {
      color: var(--tw-ink-600);
      font-style: italic;
    }
    .compare__cell--tw {
      background: rgba(59, 139, 82, 0.06);
      color: var(--tw-midnight);
      font-weight: 500;
    }
    .compare__cell--tw::before {
      content: '✓';
      color: var(--tw-forest);
      font-weight: 700;
      font-size: 16px;
      flex: 0 0 auto;
    }
    .compare__cell--typical::before {
      content: '○';
      color: var(--tw-ink-400);
      font-size: 14px;
      flex: 0 0 auto;
    }

    .compare__footer {
      margin-top: 32px;
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 32px;
      align-items: end;
    }
    .compare__footer p {
      font-family: var(--serif);
      font-style: italic;
      font-weight: 500;
      font-size: clamp(18px, 1.9vw, 24px);
      line-height: 1.4;
      color: var(--tw-forest);
      margin: 0;
      max-width: 600px;
    }
    .compare__pointer {
      display: flex;
      align-items: end;
      gap: 14px;
    }
    .compare__pointer-img {
      width: 100px;
      filter: drop-shadow(0 12px 20px rgba(0,0,0,0.15));
    }
    .compare__pointer-note {
      font-family: var(--mono);
      font-size: 10.5px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--tw-ink-600);
      max-width: 130px;
      line-height: 1.5;
      padding-bottom: 8px;
    }

    @media (max-width: 900px) {
      .compare { padding: 72px 24px; }
      .compare__head { grid-template-columns: 1fr; gap: 18px; }
      .compare__table { grid-template-columns: 1fr; }
      .compare__hcell, .compare__cell { padding: 16px 20px; }
      .compare__cell--label { border-bottom: 1px solid var(--tw-line); }
      .compare__footer { grid-template-columns: 1fr; }
    }

    /* ═══════════════════ BOM ═══════════════════ */
    .bom {
      max-width: var(--maxw);
      margin: 0 auto;
      padding: 96px var(--gutter);
    }
    .bom__head {
      display: grid;
      grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
      gap: 48px;
      align-items: end;
      margin-bottom: 48px;
    }
    .bom__head h2 {
      font-family: var(--serif);
      font-weight: 600;
      font-size: clamp(36px, 4.4vw, 56px);
      line-height: 1.0;
      letter-spacing: -0.028em;
      color: var(--tw-midnight);
      margin: 18px 0 0;
      text-wrap: balance;
    }
    .bom__head h2 em { font-style: italic; color: var(--tw-orange-deep); }
    .bom__head p { color: var(--tw-ink-800); font-size: 17px; line-height: 1.55; max-width: 440px; margin: 0; }

    .bom__cats {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 20px;
    }
    .bom__cat {
      background: var(--tw-cream);
      border: 1px solid var(--tw-line);
      border-radius: 14px;
      padding: 0;
      overflow: hidden;
    }
    .bom__cat-head {
      padding: 14px 20px;
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      font-weight: 600;
      color: var(--tw-cream);
      display: flex; align-items: center; justify-content: space-between;
    }
    .bom__cat-head--panels { background: var(--tw-blue); }
    .bom__cat-head--inverters { background: var(--tw-orange); }
    .bom__cat-head--batteries { background: var(--tw-forest); }
    .bom__cat-head-count {
      font-size: 9.5px;
      opacity: 0.85;
      background: rgba(245, 239, 230, 0.18);
      padding: 3px 8px;
      border-radius: 999px;
    }
    .bom__list { padding: 18px 22px 22px; display: flex; flex-direction: column; gap: 14px; }
    .bom__item {
      display: flex;
      flex-direction: column;
      gap: 4px;
      padding-bottom: 14px;
      border-bottom: 1px dashed var(--tw-line);
    }
    .bom__item:last-child { border-bottom: 0; padding-bottom: 0; }
    .bom__item-name {
      font-family: var(--serif);
      font-weight: 600;
      font-size: 19px;
      color: var(--tw-midnight);
      letter-spacing: -0.01em;
    }
    .bom__item-spec {
      font-family: var(--mono);
      font-size: 11.5px;
      color: var(--tw-ink-600);
      line-height: 1.55;
      letter-spacing: 0.02em;
    }
    .bom__footer {
      margin-top: 28px;
      padding: 16px 20px;
      background: var(--tw-cream-warm);
      border: 1px solid var(--tw-line);
      border-radius: 10px;
      font-family: var(--mono);
      font-size: 11.5px;
      letter-spacing: 0.04em;
      color: var(--tw-ink-600);
      line-height: 1.6;
    }

    @media (max-width: 900px) {
      .bom { padding: 64px 24px; }
      .bom__head { grid-template-columns: 1fr; gap: 18px; }
      .bom__cats { grid-template-columns: 1fr; }
    }

    /* ═══════════════════ CASE STUDY ═══════════════════ */
    .case {
      background: var(--tw-cream);
      padding: 112px var(--gutter);
    }
    .case__inner {
      max-width: var(--maxw);
      margin: 0 auto;
      display: grid;
      grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
      gap: 56px;
      align-items: start;
    }
    .case__visual {
      position: relative;
    }
    .case__photo {
      width: 100%;
      aspect-ratio: 4 / 3;
      border-radius: 14px;
      position: relative;
      overflow: hidden;
      box-shadow: 0 28px 60px -22px rgba(21, 49, 75, 0.5);
      background: var(--tw-midnight);
    }
    .case__photo-img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }
    .case__photo::after {
      /* Subtle bottom-shade so caption text always reads */
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, transparent 45%, rgba(21, 49, 75, 0.72) 100%);
      pointer-events: none;
    }
    .case__photo-caption {
      position: absolute;
      left: 22px;
      bottom: 22px;
      right: 22px;
      z-index: 2;
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--tw-cream);
      display: flex;
      justify-content: space-between;
      align-items: end;
      gap: 16px;
    }
    @media (max-width: 600px) {
      .case__photo-caption {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
      }
      .case__photo-caption-tag {
        text-align: left !important;
        max-width: 100% !important;
        font-size: 13px !important;
      }
    }
    .case__photo-caption-loc {
      background: rgba(21, 49, 75, 0.7);
      backdrop-filter: blur(6px);
      padding: 8px 14px;
      border-radius: 999px;
      font-weight: 600;
    }
    .case__photo-caption-tag {
      max-width: 240px;
      text-align: right;
      line-height: 1.5;
      opacity: 0.95;
      font-style: italic;
      letter-spacing: 0.06em;
      text-transform: none;
      font-family: var(--serif);
      font-size: 14px;
    }
    .case__photo-stamp {
      position: absolute;
      top: 22px; left: 22px;
      z-index: 2;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: var(--tw-verified);
      color: var(--tw-cream);
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      font-weight: 600;
      padding: 7px 12px 6px;
      border-radius: 4px;
      box-shadow: 0 8px 18px rgba(42, 168, 74, 0.4);
    }
    .case__photo-stamp::before { content: '✓'; font-weight: 800; }

    .case__copy { padding-top: 12px; }
    .case__pill {
      display: inline-block;
      background: var(--tw-alert);
      color: var(--tw-cream);
      font-family: var(--mono);
      font-size: 10.5px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      font-weight: 600;
      padding: 6px 12px 5px;
      border-radius: 3px;
      margin-bottom: 24px;
    }
    .case__title {
      font-family: var(--serif);
      font-weight: 600;
      font-size: clamp(28px, 3.4vw, 44px);
      line-height: 1.05;
      letter-spacing: -0.022em;
      color: var(--tw-midnight);
      margin: 0 0 20px;
      text-wrap: balance;
    }
    .case__title em { font-style: italic; color: var(--tw-orange-deep); }
    .case__body {
      font-size: 16px;
      line-height: 1.6;
      color: var(--tw-ink-800);
      margin: 0 0 28px;
    }
    .case__outcomes {
      list-style: none;
      padding: 0;
      margin: 0 0 28px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .case__outcomes li {
      display: grid;
      grid-template-columns: 64px 1fr;
      gap: 14px;
      align-items: baseline;
      font-size: 15px;
      color: var(--tw-ink-800);
    }
    .case__outcomes-num {
      font-family: var(--serif);
      font-weight: 600;
      font-size: 22px;
      letter-spacing: -0.02em;
      color: var(--tw-orange-deep);
      text-align: right;
    }
    .case__pull {
      padding: 20px 24px;
      border-left: 3px solid var(--tw-orange);
      background: var(--tw-cream-warm);
      border-radius: 0 10px 10px 0;
      font-family: var(--serif);
      font-style: italic;
      font-weight: 500;
      font-size: 17px;
      line-height: 1.45;
      color: var(--tw-midnight);
    }
    .case__methodology {
      margin-top: 16px;
      font-family: var(--mono);
      font-size: 10.5px;
      letter-spacing: 0.04em;
      color: var(--tw-ink-600);
      line-height: 1.6;
    }

    @media (max-width: 900px) {
      .case { padding: 64px 24px; }
      .case__inner { grid-template-columns: 1fr; gap: 32px; }
    }

    /* ═══════════════════ TRACK-RECORD GALLERY ═══════════════════ */
    /* "200+ projects across UK / Spain / Germany" — earned with photographs.
       Stock placeholders today; real photographer shots replace these later. */
    .gallery {
      max-width: var(--maxw);
      margin: 0 auto;
      padding: 96px var(--gutter) 80px;
    }
    .gallery__head {
      display: grid;
      grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
      gap: 48px;
      align-items: end;
      margin-bottom: 40px;
    }
    .gallery__head h2 {
      font-family: var(--serif);
      font-weight: 600;
      font-size: clamp(34px, 4vw, 56px);
      line-height: 1.0;
      letter-spacing: -0.028em;
      color: var(--tw-midnight);
      margin: 18px 0 0;
      text-wrap: balance;
    }
    .gallery__head h2 em { font-style: italic; color: var(--tw-orange-deep); }
    .gallery__head p { color: var(--tw-ink-800); font-size: 17px; line-height: 1.55; max-width: 480px; margin: 0; }

    .gallery__grid {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 14px;
      grid-auto-rows: 220px;
    }
    .gallery__card {
      position: relative;
      border-radius: 12px;
      overflow: hidden;
      background: var(--tw-midnight);
      box-shadow: 0 18px 40px -22px rgba(21, 49, 75, 0.4);
      transition: transform 360ms var(--ease), box-shadow 360ms var(--ease);
      isolation: isolate;
    }
    .gallery__card:hover {
      transform: translateY(-4px);
      box-shadow: 0 28px 50px -22px rgba(21, 49, 75, 0.55);
    }
    .gallery__card img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 700ms var(--ease);
    }
    .gallery__card:hover img { transform: scale(1.04); }
    .gallery__card::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, transparent 30%, rgba(21, 49, 75, 0.86) 100%);
      pointer-events: none;
    }
    .gallery__caption {
      position: absolute;
      left: 18px; right: 18px; bottom: 16px;
      z-index: 2;
      color: var(--tw-cream);
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .gallery__caption-loc {
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: rgba(245, 239, 230, 0.78);
      font-weight: 500;
    }
    .gallery__caption-title {
      font-family: var(--serif);
      font-weight: 600;
      font-size: 18px;
      line-height: 1.2;
      letter-spacing: -0.01em;
    }
    .gallery__caption-spec {
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.04em;
      color: rgba(245, 239, 230, 0.62);
      margin-top: 4px;
    }
    .gallery__flag {
      position: absolute;
      top: 14px; left: 14px;
      z-index: 2;
      font-family: var(--mono);
      font-size: 9.5px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      font-weight: 600;
      color: var(--tw-midnight);
      background: var(--tw-cream);
      padding: 5px 9px 4px;
      border-radius: 999px;
    }
    /* Asymmetric grid: feature card spans more columns */
    .gallery__card--feature { grid-column: span 6; grid-row: span 2; }
    .gallery__card--wide { grid-column: span 6; }
    .gallery__card--small { grid-column: span 3; }
    .gallery__card--mid { grid-column: span 4; }

    .gallery__note {
      margin-top: 28px;
      padding: 14px 18px;
      background: var(--tw-cream-warm);
      border: 1px dashed var(--tw-line);
      border-radius: 8px;
      display: flex;
      align-items: center;
      gap: 12px;
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.04em;
      color: var(--tw-ink-600);
      line-height: 1.55;
    }
    .gallery__note::before {
      content: 'INT';
      flex: 0 0 auto;
      font-weight: 700;
      font-size: 9.5px;
      letter-spacing: 0.18em;
      color: var(--tw-orange-deep);
      background: rgba(237, 114, 34, 0.12);
      padding: 4px 8px 3px;
      border-radius: 4px;
    }

    @media (max-width: 1100px) {
      .gallery__grid { grid-auto-rows: 180px; }
      .gallery__card--feature { grid-column: span 12; grid-row: span 1; }
      .gallery__card--wide { grid-column: span 12; }
      .gallery__card--small { grid-column: span 6; }
      .gallery__card--mid { grid-column: span 6; }
    }
    @media (max-width: 700px) {
      .gallery { padding: 64px 24px 56px; }
      .gallery__head { grid-template-columns: 1fr; gap: 18px; }
      .gallery__grid { grid-auto-rows: 200px; }
      .gallery__card--small, .gallery__card--mid { grid-column: span 12; }
    }

    /* ═══════════════════ PROCESS ═══════════════════ */
    .process {
      max-width: var(--maxw);
      margin: 0 auto;
      padding: 112px var(--gutter);
    }
    .process__head {
      max-width: 760px;
      margin-bottom: 56px;
    }
    .process__head h2 {
      font-family: var(--serif);
      font-weight: 600;
      font-size: clamp(36px, 4.4vw, 60px);
      line-height: 1.0;
      letter-spacing: -0.028em;
      color: var(--tw-midnight);
      margin: 18px 0 16px;
      text-wrap: balance;
    }
    .process__head h2 em { font-style: italic; color: var(--tw-orange-deep); }
    .process__head p { color: var(--tw-ink-800); font-size: 17px; line-height: 1.55; max-width: 600px; margin: 0; }

    .process__timeline {
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 0;
      padding-left: 0;
    }
    .process__step {
      display: grid;
      grid-template-columns: 80px minmax(0, 1fr) minmax(0, 1.4fr);
      gap: 32px;
      padding: 36px 0;
      border-top: 1px solid var(--tw-line);
      align-items: baseline;
      position: relative;
    }
    .process__step:last-child { border-bottom: 1px solid var(--tw-line); }
    .process__step-num {
      font-family: var(--serif);
      font-weight: 600;
      font-style: italic;
      font-size: 56px;
      line-height: 1;
      letter-spacing: -0.04em;
      color: var(--tw-orange);
    }
    .process__step-title {
      font-family: var(--serif);
      font-weight: 600;
      font-size: clamp(22px, 2.2vw, 28px);
      line-height: 1.15;
      color: var(--tw-midnight);
      letter-spacing: -0.018em;
      padding-top: 12px;
    }
    .process__step-body {
      font-size: 16px;
      line-height: 1.6;
      color: var(--tw-ink-800);
      padding-top: 14px;
    }
    .process__step-body b {
      color: var(--tw-midnight);
      font-weight: 600;
    }
    .process__step:hover .process__step-num {
      color: var(--tw-orange-deep);
    }

    @media (max-width: 900px) {
      .process { padding: 72px 24px; }
      .process__step { grid-template-columns: 64px 1fr; gap: 16px; }
      .process__step-body { grid-column: 1 / -1; padding-top: 4px; }
    }

    /* ═══════════════════ "IF…" ACCOUNTABILITY ═══════════════════ */
    .ifgrid {
      background: var(--tw-forest);
      color: var(--tw-cream);
      padding: 96px var(--gutter);
      position: relative;
      overflow: hidden;
    }
    .ifgrid::before {
      content: '';
      position: absolute;
      top: -20%; right: -10%;
      width: 50%; height: 70%;
      background: radial-gradient(circle at center, rgba(245, 239, 230, 0.10) 0%, transparent 65%);
      pointer-events: none;
    }
    .ifgrid__inner { max-width: var(--maxw); margin: 0 auto; position: relative; }
    .ifgrid__head { max-width: 720px; margin-bottom: 48px; }
    .ifgrid__head .eyebrow { color: var(--tw-yellow); }
    .ifgrid__head h2 {
      font-family: var(--serif);
      font-weight: 600;
      font-size: clamp(32px, 3.8vw, 48px);
      line-height: 1.05;
      letter-spacing: -0.024em;
      color: var(--tw-cream);
      margin: 14px 0 0;
      text-wrap: balance;
    }
    .ifgrid__cards {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 16px;
    }
    .ifcard {
      background: var(--tw-midnight);
      border-radius: 12px;
      padding: 24px 22px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      transition: transform 220ms var(--ease);
    }
    .ifcard:hover { transform: translateY(-4px); }
    .ifcard__q {
      font-family: var(--serif);
      font-weight: 600;
      font-size: 17px;
      line-height: 1.25;
      color: var(--tw-cream);
      letter-spacing: -0.005em;
    }
    .ifcard__q::before {
      content: 'IF';
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.22em;
      color: var(--tw-yellow);
      font-weight: 600;
      display: block;
      margin-bottom: 6px;
    }
    .ifcard__a {
      font-size: 13.5px;
      line-height: 1.55;
      color: rgba(245, 239, 230, 0.72);
    }
    .ifgrid__close {
      margin-top: 48px;
      max-width: 760px;
      font-family: var(--serif);
      font-style: italic;
      font-weight: 500;
      font-size: clamp(20px, 2.2vw, 26px);
      line-height: 1.4;
      color: var(--tw-yellow);
    }

    @media (max-width: 1100px) {
      .ifgrid__cards { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 600px) {
      .ifgrid { padding: 64px 24px; }
      .ifgrid__cards { grid-template-columns: 1fr; }
    }

    /* ═══════════════════ ROADMAP ═══════════════════ */
    .roadmap {
      max-width: var(--maxw);
      margin: 0 auto;
      padding: 96px var(--gutter) 64px;
      display: grid;
      grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
      gap: 48px;
      align-items: start;
    }
    .roadmap__lede h2 {
      font-family: var(--serif);
      font-weight: 600;
      font-size: clamp(28px, 3vw, 40px);
      line-height: 1.05;
      letter-spacing: -0.022em;
      color: var(--tw-midnight);
      margin: 14px 0 0;
      text-wrap: balance;
    }
    .roadmap__lede h2 em { font-style: italic; color: var(--tw-orange-deep); }
    .roadmap__copy { color: var(--tw-ink-800); font-size: 16px; line-height: 1.6; }
    .roadmap__copy p:first-child { margin-top: 0; }
    .roadmap__chips {
      margin-top: 24px;
      display: flex; flex-wrap: wrap; gap: 10px;
    }
    .roadmap__chip {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: var(--tw-cream);
      border: 1px solid var(--tw-line);
      padding: 8px 14px;
      border-radius: 999px;
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--tw-midnight);
    }
    .roadmap__chip::before {
      content: '';
      width: 8px; height: 8px;
      border-radius: 50%;
      background: var(--tw-teal);
    }

    @media (max-width: 900px) {
      .roadmap { grid-template-columns: 1fr; padding: 64px 24px 48px; gap: 18px; }
    }

    /* ═══════════════════ CLOSING CTA ═══════════════════ */
    .closing {
      background: var(--tw-midnight);
      color: var(--tw-cream);
      padding: 120px var(--gutter);
      position: relative;
      overflow: hidden;
    }
    .closing::before {
      content: '';
      position: absolute;
      bottom: -30%; right: -10%;
      width: 50%; height: 80%;
      background: radial-gradient(circle at center, rgba(237, 114, 34, 0.18) 0%, transparent 55%);
      pointer-events: none;
    }
    .closing__inner {
      max-width: var(--maxw);
      margin: 0 auto;
      display: grid;
      grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
      gap: 48px;
      align-items: end;
      position: relative;
    }
    .closing__copy h2 {
      font-family: var(--serif);
      font-weight: 600;
      font-size: clamp(40px, 5.4vw, 84px);
      line-height: 0.98;
      letter-spacing: -0.03em;
      color: var(--tw-cream);
      margin: 18px 0 24px;
      text-wrap: balance;
    }
    .closing__copy h2 em { font-style: italic; color: var(--tw-orange); }
    .closing__copy p {
      font-size: 17px;
      line-height: 1.55;
      color: rgba(245, 239, 230, 0.78);
      max-width: 540px;
      margin: 0 0 36px;
    }
    .closing__actions {
      display: flex;
      gap: 16px;
      align-items: center;
      flex-wrap: wrap;
    }
    .closing__cta {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      background: var(--tw-orange);
      color: var(--tw-cream);
      font-family: var(--sans);
      font-weight: 600;
      font-size: 16px;
      padding: 18px 28px 19px;
      border-radius: 999px;
      transition: transform 220ms var(--ease), box-shadow 220ms var(--ease), background 220ms var(--ease);
    }
    .closing__cta:hover {
      background: var(--tw-amber);
      transform: translateY(-2px);
      box-shadow: 0 18px 36px -10px rgba(237, 114, 34, 0.6);
    }
    .closing__email {
      font-family: var(--mono);
      font-size: 13px;
      letter-spacing: 0.04em;
      color: var(--tw-cream);
      text-decoration: underline;
      text-decoration-color: rgba(245, 239, 230, 0.4);
      text-underline-offset: 5px;
      padding: 18px 0 19px;
    }
    .closing__mascot {
      align-self: end;
      width: 100%;
      max-width: 360px;
      filter: drop-shadow(0 28px 50px rgba(0,0,0,0.5));
    }

    @media (max-width: 900px) {
      .closing { padding: 80px 24px; }
      .closing__inner { grid-template-columns: 1fr; gap: 28px; }
      .closing__mascot { max-width: 220px; align-self: center; }
    }

    /* ═══════════════════ CONTACT FORM (in closing section) ═══════════════════ */
    .form-grid {
      display: grid;
      grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
      gap: 32px;
      margin-top: 36px;
      align-items: start;
    }
    .form-card {
      background: var(--tw-cream);
      color: var(--tw-ink-800);
      border-radius: 16px;
      padding: 36px;
      box-shadow: 0 28px 60px -22px rgba(21, 49, 75, 0.55);
      position: relative;
      isolation: isolate;
    }
    .form-card__head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 16px;
      padding-bottom: 18px;
      border-bottom: 1px solid var(--tw-line);
      margin-bottom: 22px;
    }
    .form-card__title {
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--tw-orange-deep);
      font-weight: 600;
    }
    .form-card__hint {
      font-family: var(--mono);
      font-size: 10.5px;
      letter-spacing: 0.06em;
      color: var(--tw-ink-600);
    }

    .form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      margin-bottom: 16px;
    }
    .form-row--single { grid-template-columns: 1fr; }
    @media (max-width: 720px) { .form-row { grid-template-columns: 1fr; } }

    .field {
      display: flex;
      flex-direction: column;
      gap: 6px;
      position: relative;
    }
    .field__label {
      font-family: var(--sans);
      font-weight: 600;
      font-size: 13px;
      color: var(--tw-midnight);
      letter-spacing: 0.005em;
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 8px;
    }
    .field__opt {
      font-family: var(--mono);
      font-size: 9.5px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      font-weight: 500;
      color: var(--tw-ink-400);
    }
    .field__input,
    .field__select,
    .field__textarea {
      font-family: var(--sans);
      font-size: 15px;
      line-height: 1.45;
      color: var(--tw-midnight);
      background: #FFFFFF;
      border: 1px solid var(--tw-line);
      border-radius: 8px;
      padding: 12px 14px;
      width: 100%;
      transition: border-color 180ms var(--ease), box-shadow 180ms var(--ease);
      -webkit-appearance: none;
      appearance: none;
    }
    .field__input::placeholder,
    .field__textarea::placeholder { color: var(--tw-ink-400); }
    .field__input:focus,
    .field__select:focus,
    .field__textarea:focus {
      outline: none;
      border-color: var(--tw-orange);
      box-shadow: 0 0 0 3px rgba(237, 114, 34, 0.18);
    }
    .field__input[aria-invalid="true"],
    .field__select[aria-invalid="true"],
    .field__textarea[aria-invalid="true"] {
      border-color: var(--tw-alert);
      box-shadow: 0 0 0 3px rgba(172, 55, 45, 0.16);
    }
    .field__textarea {
      resize: vertical;
      min-height: 120px;
      font-family: var(--sans);
    }
    .field__select {
      background-image:
        linear-gradient(45deg, transparent 50%, var(--tw-midnight) 50%),
        linear-gradient(135deg, var(--tw-midnight) 50%, transparent 50%);
      background-position:
        calc(100% - 18px) 50%,
        calc(100% - 13px) 50%;
      background-size:
        5px 5px,
        5px 5px;
      background-repeat: no-repeat;
      padding-right: 36px;
    }
    .field__error {
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.04em;
      color: var(--tw-alert);
      min-height: 0;
      max-height: 0;
      overflow: hidden;
      transition: max-height 200ms var(--ease);
    }
    .field--has-error .field__error {
      max-height: 40px;
      margin-top: 2px;
    }

    .field--checkbox {
      flex-direction: row;
      align-items: flex-start;
      gap: 10px;
      padding: 14px 0 4px;
      cursor: pointer;
    }
    .field--checkbox input {
      flex: 0 0 auto;
      width: 18px; height: 18px;
      margin-top: 2px;
      accent-color: var(--tw-orange);
      cursor: pointer;
    }
    .field--checkbox span {
      font-size: 13.5px;
      line-height: 1.5;
      color: var(--tw-ink-800);
    }
    .field--checkbox a {
      color: var(--tw-blue);
      text-decoration: underline;
      text-decoration-color: rgba(26, 95, 168, 0.3);
      text-underline-offset: 3px;
    }

    /* Honeypot — visually hidden but in the DOM */
    .field--honeypot {
      position: absolute;
      left: -10000px;
      width: 1px;
      height: 1px;
      overflow: hidden;
    }

    .turnstile-wrap { margin-top: 18px; min-height: 65px; }

    .form-card__submit {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      background: var(--tw-orange);
      color: var(--tw-cream);
      font-family: var(--sans);
      font-weight: 600;
      font-size: 16px;
      padding: 16px 28px 17px;
      border-radius: 999px;
      border: 0;
      margin-top: 18px;
      transition: transform 200ms var(--ease), box-shadow 200ms var(--ease), background 200ms var(--ease), opacity 200ms;
      box-shadow: 0 12px 24px -10px rgba(237, 114, 34, 0.55);
    }
    .form-card__submit:hover:not(:disabled) {
      background: var(--tw-amber);
      transform: translateY(-2px);
      box-shadow: 0 18px 32px -10px rgba(237, 114, 34, 0.7);
    }
    .form-card__submit:disabled {
      opacity: 0.6;
      cursor: not-allowed;
      box-shadow: none;
      transform: none;
    }
    .form-card__submit-arrow { transition: transform 200ms var(--ease); }
    .form-card__submit:hover:not(:disabled) .form-card__submit-arrow { transform: translateX(3px); }

    .form-card__spinner {
      width: 14px; height: 14px;
      border: 2px solid rgba(245, 239, 230, 0.4);
      border-top-color: var(--tw-cream);
      border-radius: 50%;
      animation: formSpin 0.8s linear infinite;
      display: none;
    }
    .form-card.is-submitting .form-card__spinner { display: inline-block; }
    .form-card.is-submitting .form-card__submit-arrow { display: none; }
    @keyframes formSpin { to { transform: rotate(360deg); } }

    .form-card__server-error {
      display: none;
      margin-top: 14px;
      padding: 12px 16px;
      background: rgba(172, 55, 45, 0.08);
      border-left: 3px solid var(--tw-alert);
      border-radius: 0 8px 8px 0;
      font-size: 14px;
      color: var(--tw-alert);
      line-height: 1.5;
    }
    .form-card.has-server-error .form-card__server-error { display: block; }

    .form-card__success {
      display: none;
      padding: 16px 4px 4px;
    }
    .form-card.is-success .form-card__form { display: none; }
    .form-card.is-success .form-card__success { display: block; }
    .form-card__success h3 {
      font-family: var(--serif);
      font-weight: 600;
      font-size: 26px;
      line-height: 1.2;
      letter-spacing: -0.018em;
      color: var(--tw-midnight);
      margin: 12px 0 12px;
      text-wrap: balance;
    }
    .form-card__success p {
      font-size: 15.5px;
      line-height: 1.6;
      color: var(--tw-ink-800);
      margin: 0;
      max-width: 520px;
    }
    .form-card__success-mark {
      width: 56px; height: 56px;
      border-radius: 50%;
      background: var(--tw-verified);
      color: var(--tw-cream);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28px;
      font-weight: 700;
      box-shadow: 0 12px 28px -8px rgba(42, 168, 74, 0.5);
    }

    /* Sidebar — founder contact cards in the form grid */
    .form-sidebar {
      color: var(--tw-cream);
      padding: 16px 4px 0 16px;
    }
    .form-sidebar__eye {
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--tw-orange);
      margin-bottom: 16px;
      font-weight: 600;
    }
    .founder-mini {
      padding: 18px 0;
      border-bottom: 1px solid rgba(245, 239, 230, 0.14);
    }
    .founder-mini:last-of-type { border-bottom: 0; }
    .founder-mini__name {
      font-family: var(--serif);
      font-weight: 600;
      font-size: 19px;
      color: var(--tw-cream);
      letter-spacing: -0.01em;
      margin: 0 0 4px;
    }
    .founder-mini__role {
      font-family: var(--mono);
      font-size: 10.5px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: rgba(245, 239, 230, 0.55);
      margin: 0 0 10px;
    }
    .founder-mini__contact {
      font-family: var(--mono);
      font-size: 12px;
      color: rgba(245, 239, 230, 0.78);
      letter-spacing: 0.02em;
      display: flex;
      flex-direction: column;
      gap: 3px;
    }
    .founder-mini__contact a {
      color: var(--tw-cream);
      text-decoration: underline;
      text-decoration-color: rgba(245, 239, 230, 0.3);
      text-underline-offset: 3px;
      transition: text-decoration-color 200ms var(--ease);
    }
    .founder-mini__contact a:hover { text-decoration-color: var(--tw-cream); }

    .form-sidebar__security {
      margin-top: 22px;
      padding-top: 22px;
      border-top: 1px dashed rgba(245, 239, 230, 0.16);
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.06em;
      color: rgba(245, 239, 230, 0.5);
      line-height: 1.65;
    }
    .form-sidebar__security strong {
      color: var(--tw-verified);
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      font-size: 9.5px;
      display: block;
      margin-bottom: 4px;
    }

    @media (max-width: 1000px) {
      .form-grid { grid-template-columns: 1fr; gap: 24px; }
      .form-card { padding: 28px 24px; }
      .form-sidebar { padding: 0; }
    }

    /* Closing section overrides — single column, narrower copy */
    .closing__inner--stacked { grid-template-columns: 1fr !important; gap: 0 !important; }
    .closing__copy--narrow { max-width: 760px; }

    /* Consent error always visible (renders below the checkbox row) */
    .field__error--inline { display: block; margin-top: 0; }

    /* Inline link styles inside form success copy */
    .form-success-link { color: var(--tw-blue); text-decoration: underline; text-underline-offset: 3px; }

    /* ═══════════════════ FOOTER ═══════════════════ */
    .footer {
      background: var(--tw-midnight);
      color: var(--tw-cream);
      padding: 56px var(--gutter) 28px;
      border-top: 1px solid rgba(245, 239, 230, 0.10);
    }
    .footer__inner {
      max-width: var(--maxw);
      margin: 0 auto;
      display: grid;
      grid-template-columns: minmax(0, 4fr) repeat(4, minmax(0, 1fr));
      gap: 40px;
      padding-bottom: 36px;
      border-bottom: 1px solid rgba(245, 239, 230, 0.10);
    }
    .footer__brand {
      font-family: var(--serif);
      font-weight: 600;
      font-size: 22px;
    }
    .footer__brand .truem { color: var(--tw-cream); }
    .footer__brand .wattm { color: var(--tw-orange); font-style: italic; font-weight: 500; }
    .footer__strap {
      font-family: var(--serif);
      font-style: italic;
      font-size: 16px;
      color: rgba(245, 239, 230, 0.7);
      margin-top: 12px;
      max-width: 280px;
      line-height: 1.4;
    }
    .footer__col h5 {
      font-family: var(--mono);
      font-size: 10.5px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--tw-orange);
      margin: 0 0 16px;
      font-weight: 600;
    }
    .footer__col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
    .footer__col a {
      font-size: 14px;
      color: rgba(245, 239, 230, 0.78);
      transition: color 200ms var(--ease);
    }
    .footer__col a:hover { color: var(--tw-cream); }
    .footer__col-soon::after {
      content: 'Soon';
      font-family: var(--mono);
      font-size: 9px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--tw-orange);
      background: rgba(237, 114, 34, 0.16);
      padding: 1px 7px 0;
      border-radius: 999px;
      margin-left: 8px;
      vertical-align: 1px;
    }
    .footer__legal {
      max-width: var(--maxw);
      margin: 0 auto;
      padding-top: 28px;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 16px;
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.06em;
      color: rgba(245, 239, 230, 0.5);
    }

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

    /* ═══════════════════ EQUIPMENT PASSPORT (sticky right sidebar) ═══════════════════ */
    .passport {
      position: fixed;
      right: 24px;
      top: 50%;
      width: 280px;
      max-height: 70vh;
      background: var(--tw-midnight);
      color: var(--tw-cream);
      border-radius: 14px;
      padding: 18px 18px 14px;
      z-index: 50;
      box-shadow: 0 22px 50px -16px rgba(21, 49, 75, 0.5);
      opacity: 0;
      pointer-events: none;
      transform: translateY(-50%) translateX(20px);
      transition: opacity 320ms var(--ease), transform 320ms var(--ease);
      font-family: var(--mono);
      overflow: hidden;
    }
    .passport.is-active {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(-50%) translateX(0);
    }
    .passport__head {
      display: flex;
      align-items: center;
      gap: 10px;
      padding-bottom: 14px;
      border-bottom: 1px solid rgba(245, 239, 230, 0.14);
      margin-bottom: 14px;
    }
    .passport__live {
      width: 8px; height: 8px;
      border-radius: 50%;
      background: var(--tw-verified);
      animation: passportPulse 1.4s ease-in-out infinite;
      flex-shrink: 0;
    }
    @keyframes passportPulse {
      0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(42, 168, 74, 0.7); }
      50%      { opacity: 0.6; box-shadow: 0 0 0 6px rgba(42, 168, 74, 0); }
    }
    .passport__title {
      font-size: 10px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--tw-cream);
      font-weight: 600;
    }
    .passport__subtitle {
      font-size: 9px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: rgba(245, 239, 230, 0.5);
      margin-top: 2px;
    }
    .passport__count {
      margin-left: auto;
      font-size: 10px;
      letter-spacing: 0.12em;
      color: var(--tw-orange);
      font-weight: 600;
      padding: 3px 8px;
      background: rgba(237, 114, 34, 0.14);
      border-radius: 999px;
    }
    .passport__body {
      max-height: 50vh;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      gap: 8px;
      padding-right: 4px;
      scrollbar-width: thin;
      scrollbar-color: rgba(245, 239, 230, 0.2) transparent;
    }
    .passport__body::-webkit-scrollbar { width: 4px; }
    .passport__body::-webkit-scrollbar-thumb { background: rgba(245, 239, 230, 0.2); border-radius: 2px; }
    .passport__entry {
      padding: 8px 10px;
      background: rgba(245, 239, 230, 0.04);
      border-radius: 6px;
      border-left: 2px solid var(--tw-verified);
      opacity: 0;
      transform: translateX(8px);
      transition: opacity 360ms var(--ease), transform 360ms var(--ease);
    }
    .passport__entry.is-revealed {
      opacity: 1;
      transform: translateX(0);
    }
    .passport__entry-code {
      font-size: 10.5px;
      font-weight: 600;
      letter-spacing: 0.04em;
      color: var(--tw-cream);
      line-height: 1.3;
    }
    .passport__entry-meta {
      font-size: 9px;
      letter-spacing: 0.08em;
      color: rgba(245, 239, 230, 0.5);
      margin-top: 4px;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .passport__entry-ok {
      color: var(--tw-verified);
      font-weight: 700;
      font-size: 11px;
    }
    .passport__foot {
      margin-top: 14px;
      padding-top: 10px;
      border-top: 1px solid rgba(245, 239, 230, 0.10);
      font-size: 9px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: rgba(245, 239, 230, 0.4);
      text-align: center;
    }

    @media (max-width: 1280px) { .passport { display: none; } }

    /* ═══════════════════ INLINE PASSPORT (mobile fallback) ═══════════════════ */
    /* Shown only when the floating sticky sidebar is hidden (< 1280px),
       so mobile / tablet readers still see the Equipment Passport payoff. */
    .passport-inline {
      display: none;
      max-width: var(--maxw);
      margin: 0 auto;
      padding: 56px var(--gutter) 0;
    }
    .passport-inline__card {
      background: var(--tw-midnight);
      color: var(--tw-cream);
      border-radius: 14px;
      padding: 24px 22px 22px;
      font-family: var(--mono);
      box-shadow: 0 22px 50px -22px rgba(21, 49, 75, 0.4);
    }
    .passport-inline__head {
      display: flex;
      align-items: center;
      gap: 10px;
      padding-bottom: 14px;
      border-bottom: 1px solid rgba(245, 239, 230, 0.14);
      margin-bottom: 14px;
    }
    .passport-inline__live {
      width: 8px; height: 8px;
      border-radius: 50%;
      background: var(--tw-verified);
      animation: passportPulse 1.4s ease-in-out infinite;
      flex-shrink: 0;
    }
    .passport-inline__title {
      font-size: 11px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--tw-cream);
      font-weight: 600;
    }
    .passport-inline__subtitle {
      font-size: 9.5px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: rgba(245, 239, 230, 0.5);
      margin-top: 3px;
    }
    .passport-inline__count {
      margin-left: auto;
      font-size: 10px;
      letter-spacing: 0.12em;
      color: var(--tw-orange);
      font-weight: 600;
      padding: 3px 9px;
      background: rgba(237, 114, 34, 0.14);
      border-radius: 999px;
    }
    .passport-inline__list {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }
    .passport-inline__entry {
      padding: 10px 12px;
      background: rgba(245, 239, 230, 0.04);
      border-radius: 6px;
      border-left: 2px solid var(--tw-verified);
    }
    .passport-inline__entry-code {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.04em;
      color: var(--tw-cream);
      line-height: 1.3;
    }
    .passport-inline__entry-meta {
      font-size: 9.5px;
      letter-spacing: 0.06em;
      color: rgba(245, 239, 230, 0.55);
      margin-top: 4px;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .passport-inline__entry-meta .ok {
      color: var(--tw-verified);
      font-weight: 700;
      font-size: 11px;
    }
    .passport-inline__caption {
      font-family: var(--sans);
      font-size: 13px;
      line-height: 1.55;
      color: rgba(245, 239, 230, 0.78);
      margin: 0 0 14px;
      max-width: 520px;
    }
    @media (max-width: 1280px) { .passport-inline { display: block; } }
    @media (max-width: 600px) {
      .passport-inline__list { grid-template-columns: 1fr; }
    }

    /* ═══════════════════ Visibility helpers ═══════════════════ */
    .reveal {
      opacity: 0;
      transform: translateY(24px);
      transition: opacity 700ms var(--ease), transform 700ms var(--ease);
    }
    .reveal.is-visible {
      opacity: 1;
      transform: translateY(0);
    }