:root {
      --sf: 'Space Grotesk', sans-serif;
      --bf: 'Inter', sans-serif;
      --deep-sea: #0a1628;
      --purple: #8b5cf6;
      --blue: #00adff;
      --mint: #00d9c0;
      --white: #ffffff;
      --gray-200: #e5e7eb;
      --gray-300: #d1d5db;
      --gray-400: #9ca3af;
      --gray-500: #6b7280;
    }

    /* --- Reset & Base (§0.4) --- */
    *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      font-family: var(--bf);
      font-size: 1rem;
      line-height: 1.5;
      color: var(--gray-300);
      background: linear-gradient(135deg, #0a1628 0%, #0d1a2d 50%, #0a1628 100%);
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    .hero-sustain{
        padding-top:12rem; padding-bottom:6rem;
    }

    /* --- Tailwind Utility Equivalents (§0.1, §0.2, §0.3) --- */
    .text-sm { font-size: 0.875rem; line-height: 1.25rem; }
    .text-base { font-size: 1rem; line-height: 1.5rem; }
    .text-lg { font-size: 1.125rem; line-height: 1.75rem; }
    .text-xl { font-size: 1.25rem; line-height: 1.75rem; }
    .text-2xl { font-size: 1.5rem; line-height: 2rem; }
    .text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
    .text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
    .text-5xl { font-size: 3rem; line-height: 1; }
    .text-xs { font-size: 0.75rem; line-height: 1rem; }

    .font-bold { font-weight: 700; }
    .font-semibold { font-weight: 600; }
    .font-medium { font-weight: 500; }
    .font-heading { font-family: var(--sf); }
    .font-body { font-family: var(--bf); }

    .text-white { color: var(--white); }
    .text-gray-200 { color: var(--gray-200); }
    .text-gray-300 { color: var(--gray-300); }
    .text-gray-400 { color: var(--gray-400); }

    .text-center { text-align: center; }
    .leading-relaxed { line-height: 1.625; }
    .italic { font-style: italic; }
    .not-italic { font-style: normal; }

    .mb-2 { margin-bottom: 0.5rem; }
    .mb-3 { margin-bottom: 0.75rem; }
    .mb-4 { margin-bottom: 1rem; }
    .mb-6 { margin-bottom: 1.5rem; }
    .mb-8 { margin-bottom: 2rem; }
    .mb-12 { margin-bottom: 3rem; }
    .mt-2 { margin-top: 0.5rem; }
    .mt-3 { margin-top: 0.75rem; }
    .mt-4 { margin-top: 1rem; }

    .p-6 { padding: 1.5rem; }
    .px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
    .py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
    .py-20 { padding-top: 5rem; padding-bottom: 5rem; }

    .relative { position: relative; }
    .z-10 { z-index: 10; }

    .max-w-7xl { max-width: 80rem; }
    .max-w-4xl { max-width: 56rem; }
    .mx-auto { margin-left: auto; margin-right: auto; }

    .flex { display: flex; }
    .flex-wrap { flex-wrap: wrap; }
    .items-center { align-items: center; }
    .items-start { align-items: flex-start; }
    .justify-center { justify-content: center; }
    .gap-2 { gap: 0.5rem; }
    .gap-3 { gap: 0.75rem; }
    .gap-4 { gap: 1rem; }

    .rounded-2xl { border-radius: 1rem; }
    .rounded-lg { border-radius: 0.5rem; }

    .inline-flex { display: inline-flex; }
    .ge-crp-link {
      color: #a78bfa;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 0.875rem;
      font-weight: 500;
      font-family: 'Inter', sans-serif;
      transition: color 0.3s;
    }
    .ge-crp-link:hover { color: #ffffff; }
    .ge-crp-link:hover span { transform: translateX(4px); }
    .ge-crp-link span { transition: transform 0.3s; }
    /* --- Accessibility --- */
    a:focus-visible, button:focus-visible {
      outline: 2px solid var(--purple);
      outline-offset: 2px;
      border-radius: 4px;
    }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
      }
    }
    .skip-link {
      position: absolute; top: -40px; left: 0;
      background: var(--purple); color: white;
      padding: 8px 16px; z-index: 100;
      border-radius: 0 0 8px 0; font-weight: 500;
      font-family: var(--bf);
    }
    .skip-link:focus { top: 0; }
    .sr-only {
      position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
      overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
    }

    /* --- Gradient Text (§2, Cross-Page Spec) --- */
    .grad-text {
      color: #8b5cf6; /* fallback */
      background: linear-gradient(90deg, #8b5cf6 0%, #00adff 50%, #00d9c0 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    /* --- Ambient Background Layers --- */
    .ambient-glow-1 {
      position: fixed; inset: 0; pointer-events: none; z-index: 0;
      background: radial-gradient(ellipse 80% 50% at 70% 20%, rgba(139,92,246,0.06) 0%, transparent 50%);
    }
    .ambient-glow-2 {
      position: fixed; inset: 0; pointer-events: none; z-index: 0;
      background: radial-gradient(ellipse 60% 40% at 30% 70%, rgba(139,92,246,0.04) 0%, transparent 50%);
    }

    /* --- Neural Canvas --- */
    #neural-canvas {
      position: fixed; inset: 0; pointer-events: none; z-index: 0;
    }

    /* --- Glass Card (§5.2 SoR) --- */
    .glass {
      background: rgba(255,255,255,0.05);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 1rem;
      padding: 1.5rem;
      box-shadow: 0 8px 32px rgba(0,0,0,0.3);
      transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
      overflow: hidden;
    }
    .glass::before {
      content: '';
      position: absolute; inset: 0;
      background: radial-gradient(ellipse at 50% 0%, rgba(139,92,246,0.08) 0%, transparent 60%);
      opacity: 0; transition: opacity 0.5s; pointer-events: none;
    }
    .glass:hover {
      background: rgba(255,255,255,0.07);
      backdrop-filter: blur(24px) saturate(1.1);
      -webkit-backdrop-filter: blur(24px) saturate(1.1);
      border-color: rgba(139,92,246,0.2);
      box-shadow: 0 8px 32px rgba(0,0,0,0.35), 0 0 20px rgba(139,92,246,0.08);
      transform: translateY(-2px);
    }
    .glass:hover::before { opacity: 1; }
    .glass > * { position: relative; z-index: 1; }

    /* --- Feature Card: Light Glass (per Feature Card Spec, March 2026) --- */
    .light-card {
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 0.75rem;
      padding: 1.75rem 1.5rem;
      box-shadow: none;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      position: relative;
      overflow: hidden;
      transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .light-card:hover {
      background: rgba(255,255,255,0.07);
      border-color: rgba(139,92,246,0.2);
      box-shadow: 0 8px 32px rgba(0,0,0,0.35), 0 0 20px rgba(139,92,246,0.08);
      transform: translateY(-2px);
    }
    .light-card .card-glow {
      position: absolute; inset: 0;
      background: radial-gradient(ellipse at 50% 0%, rgba(139,92,246,0.08) 0%, transparent 60%);
      opacity: 0; transition: opacity 0.5s; pointer-events: none;
    }
    .light-card:hover .card-glow { opacity: 1; }
    .light-card .card-content { position: relative; z-index: 1; }

    /* --- Glass Image Padding (§5, Cross-Page Spec) --- */
    .glass img, .light-card img { padding: 1rem 0; }

    /* --- Primary Button (§5.1 SoR, §0.10 Cross-Page Spec) --- */
    .btn-primary {
      position: relative;
      overflow: hidden;
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 12px 24px;
      min-height: 44px;
      border-radius: 8px;
      font-family: var(--bf);
      font-size: 14px;
      font-weight: 500;
      color: white;
      text-decoration: none;
      background: rgba(139,92,246,0.8);
      border: 1px solid rgba(139,92,246,0.5);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      box-shadow: 0 4px 16px rgba(0,0,0,0.2);
      transition: all 0.3s;
      cursor: pointer;
    }
    .btn-primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 32px rgba(139,92,246,0.3);
    }
    .btn-primary .btn-fill {
      position: absolute; inset: 0;
      background: linear-gradient(90deg, #8b5cf6, #00adff);
      transform: translateX(-100%);
      transition: transform 0.5s;
    }
    .btn-primary:hover .btn-fill { transform: translateX(0); }
    .btn-primary .btn-text,
    .btn-primary .btn-arrow { position: relative; z-index: 1; }
    .btn-primary:hover .btn-arrow { transform: translateX(4px); }
    .btn-primary .btn-arrow { transition: transform 0.3s; }

    /* --- Secondary Button (§0.10 Cross-Page Spec — stroke-dasharray: 1000, overflow: visible, unique gradient IDs) --- */
    .btn-secondary {
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 12px 24px;
      min-height: 44px;
      border-radius: 8px;
      font-family: var(--bf);
      font-size: 14px;
      font-weight: 500;
      color: white;
      text-decoration: none;
      background: rgba(255,255,255,0.05);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      transition: all 0.3s;
      cursor: pointer;
      overflow: visible;
    }
    .btn-secondary:hover {
      background: rgba(255,255,255,0.1);
      transform: translateY(-2px);
    }
    .btn-secondary .btn-border-static {
      position: absolute; inset: 0; border-radius: 8px;
      border: 1px solid rgba(255,255,255,0.2);
      transition: opacity 0.3s; pointer-events: none;
    }
    .btn-secondary:hover .btn-border-static { opacity: 0; }
    .btn-secondary .border-svg {
      position: absolute; inset: 0; width: 100%; height: 100%;
      overflow: visible;
    }
    .btn-secondary .border-svg rect {
      stroke-dasharray: 1000;
      stroke-dashoffset: 1000;
      transition: stroke-dashoffset 0.6s ease-out;
    }
    .btn-secondary:hover .border-svg rect { stroke-dashoffset: 0; }
    .btn-secondary .btn-glow {
      position: absolute; inset: 0; border-radius: 8px;
      box-shadow: 0 0 20px rgba(139,92,246,0.3);
      opacity: 0; transition: opacity 0.3s; pointer-events: none;
    }
    .btn-secondary:hover .btn-glow { opacity: 1; }
    .btn-secondary .btn-text,
    .btn-secondary .btn-arrow { position: relative; z-index: 1; }
    .btn-secondary:hover .btn-arrow { transform: translateX(4px); }
    .btn-secondary .btn-arrow { transition: transform 0.3s; }

    /* --- Stat Gradient (SoR §2.4) --- */
    .stat-value {
      font-family: var(--sf);
      font-weight: 700;
      font-size: 2.25rem;
      line-height: 2.5rem;
      background: linear-gradient(135deg, #00d9c0 0%, #00d9c0 70%, #00adff 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      filter: drop-shadow(0 0 12px rgba(0,217,192,0.7)) drop-shadow(0 0 24px rgba(0,217,192,0.5));
    }
    @media (min-width: 768px) {
      .stat-value { font-size: 3rem; line-height: 1; }
    }

    /* --- Layout Grids --- */
    .hero-grid {
      display: grid;
      grid-template-columns: 2fr 3fr;
      gap: 3rem;
      align-items: center;
    }
    .stats-cards-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.5rem;
    }
    .pledges-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
      gap: 1.5rem;
    }

    /* --- Hero Title --- */
    .hero-title {
      font-size: 3rem;
      font-weight: 700;
      color: white;
      line-height: 1.1;
      margin-bottom: 24px;
      font-family: var(--sf);
    }

    /* --- Responsive (§10, §0.11) --- */
    @media (min-width: 1200px) {
      .px-6 { padding-left: 2.5rem; padding-right: 2.5rem; }
    }
    @media (max-width: 900px) {
      .stats-cards-grid { grid-template-columns: repeat(2, 1fr) !important; }
    }
    @media (max-width: 768px) {
        .py-20 {
    padding-top: 2rem;
    padding-bottom: 2rem;
}
        .hero-sustain{
        padding-top:2rem; padding-bottom:2rem;
    }
      .hero-grid { grid-template-columns: 1fr !important; gap: 2.5rem !important; }
      .hero-grid > div:last-child { padding-top: 0 !important; }
    }
    @media (max-width: 640px) {
      .hero-title { font-size: 2.25rem; }
    }
    @media (max-width: 500px) {
      .stats-cards-grid { grid-template-columns: 1fr !important; }
    }

    /* --- Commitment Card: Gradient Border Wrapper (§7.2.2 technique) --- */
    .commitment-card-wrap {
      padding: 2px;
      border-radius: 18px;
      background: linear-gradient(135deg,
        rgba(0,217,192,.4), rgba(0,173,255,.25), rgba(139,92,246,.4));
      transition: all .5s cubic-bezier(.4,0,.2,1);
    }
    .commitment-card-wrap:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 32px rgba(0,0,0,.35),
                  0 0 20px rgba(0,217,192,.12);
    }
    .commitment-card-wrap .glass-inner {
      background: linear-gradient(
        rgba(255,255,255,.05), rgba(255,255,255,.05)
      ), #0a1628;
      border: none;
      border-radius: 16px;
      padding: 2.5rem 2rem;
      position: relative;
      overflow: hidden;
    }
    .commitment-card-wrap .glass-inner::before {
      content: '';
      position: absolute; inset: 0;
      background: radial-gradient(ellipse at 30% 50%, rgba(0,217,192,0.06) 0%, transparent 50%);
      pointer-events: none;
    }
    .commitment-layout {
      display: grid;
      grid-template-columns: auto 1px 1fr;
      gap: 2.5rem;
      align-items: center;
    }
    .commitment-logo-zone {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1rem;
      padding: 0 1rem;
    }
    .commitment-logo-zone img {
      width: 90px;
      height: auto;
      padding: 0 !important;
      filter: drop-shadow(0 0 16px rgba(0,217,192,0.3));
      transition: filter 0.5s;
    }
    .commitment-card-wrap:hover .commitment-logo-zone img {
      filter: drop-shadow(0 0 24px rgba(0,217,192,0.5));
    }
    .commitment-divider {
      width: 1px;
      height: 80%;
      min-height: 80px;
      background: linear-gradient(180deg,
        transparent 0%, rgba(0,217,192,0.4) 20%,
        rgba(0,173,255,0.3) 50%,
        rgba(139,92,246,0.4) 80%, transparent 100%);
      align-self: center;
    }
    .commitment-content {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
      position: relative;
      z-index: 1;
    }
    .commitment-quote-row {
      display: flex;
      align-items: center;
      gap: 1rem;
      padding-top: 1.5rem;
      margin-top: 0.5rem;
      border-top: 1px solid rgba(255,255,255,0.06);
    }
    .headshot-wrap {
      width: 58px;
      height: 58px;
      flex-shrink: 0;
      border-radius: 50%;
      padding: 2px;
      background: linear-gradient(135deg, #8b5cf6, #00adff, #00d9c0);
      box-shadow: 0 0 16px rgba(139,92,246,0.25);
      transition: box-shadow 0.5s;
    }
    .commitment-card-wrap:hover .headshot-wrap {
      box-shadow: 0 0 24px rgba(139,92,246,0.4);
    }
    .headshot-wrap img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 50%;
      display: block;
      padding: 0 !important;
    }
    .quote-attribution {
      background: linear-gradient(90deg, #8b5cf6, #00adff);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    @media (max-width: 768px) {
      .commitment-layout {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
        text-align: center;
      }
      .commitment-divider {
        width: 60%;
        height: 1px;
        min-height: unset;
        background: linear-gradient(90deg,
          transparent 0%, rgba(0,217,192,0.4) 20%,
          rgba(0,173,255,0.3) 50%,
          rgba(139,92,246,0.4) 80%, transparent 100%);
        margin: 0 auto;
      }
      .commitment-quote-row {
        justify-content: center;
      }
    }

    /* --- Hero Floating Nodes --- */
    .hero-image-zone {
      position: relative;
    }
    .hero-node {
      position: absolute;
      border-radius: 50%;
      pointer-events: none;
      animation: heroFloat 6s ease-in-out infinite;
    }
    .hero-node-1 {
      width: 8px; height: 8px;
      background: rgba(139,92,246,0.6);
      top: 12%; right: 8%;
      animation-delay: 0s;
      box-shadow: 0 0 12px rgba(139,92,246,0.4);
    }
    .hero-node-2 {
      width: 5px; height: 5px;
      background: rgba(0,173,255,0.5);
      top: 28%; left: 5%;
      animation-delay: -1.5s;
      animation-duration: 7s;
      box-shadow: 0 0 10px rgba(0,173,255,0.3);
    }
    .hero-node-3 {
      width: 10px; height: 10px;
      background: rgba(0,217,192,0.5);
      bottom: 22%; right: 12%;
      animation-delay: -3s;
      animation-duration: 8s;
      box-shadow: 0 0 16px rgba(0,217,192,0.35);
    }
    .hero-node-4 {
      width: 6px; height: 6px;
      background: rgba(139,92,246,0.45);
      top: 55%; left: 12%;
      animation-delay: -2s;
      animation-duration: 5.5s;
      box-shadow: 0 0 10px rgba(139,92,246,0.3);
    }
    .hero-node-5 {
      width: 4px; height: 4px;
      background: rgba(0,173,255,0.6);
      top: 8%; left: 40%;
      animation-delay: -4s;
      animation-duration: 6.5s;
      box-shadow: 0 0 8px rgba(0,173,255,0.3);
    }
    .hero-node-6 {
      width: 7px; height: 7px;
      background: rgba(0,217,192,0.4);
      bottom: 35%; left: 25%;
      animation-delay: -1s;
      animation-duration: 7.5s;
      box-shadow: 0 0 12px rgba(0,217,192,0.3);
    }
    .hero-node-7 {
      width: 3px; height: 3px;
      background: rgba(139,92,246,0.7);
      bottom: 10%; right: 35%;
      animation-delay: -3.5s;
      animation-duration: 5s;
      box-shadow: 0 0 8px rgba(139,92,246,0.4);
    }
    @keyframes heroFloat {
      0%, 100% { transform: translateY(0) translateX(0); opacity: 0.7; }
      25% { transform: translateY(-12px) translateX(6px); opacity: 1; }
      50% { transform: translateY(-6px) translateX(-4px); opacity: 0.5; }
      75% { transform: translateY(-16px) translateX(8px); opacity: 0.9; }
    }
    @media (prefers-reduced-motion: reduce) {
      .hero-node { animation: none !important; opacity: 0.6; }
    }

    /* --- Stat Card Icons (CSS mask technique, §3 Cross-Page Spec) --- */
    .stat-icon {
      width: 3rem;
      height: 3rem;
      margin: 0 auto 1rem;
      background: linear-gradient(135deg, #8b5cf6, #00adff, #00d9c0);
      -webkit-mask-size: contain;
      -webkit-mask-repeat: no-repeat;
      -webkit-mask-position: center;
      mask-size: contain;
      mask-repeat: no-repeat;
      mask-position: center;
    }
    .stat-icon-globe {
      -webkit-mask-image: url('https://www.growthengineering.co.uk/wp-content/uploads/2026/03/Globe.svg');
      mask-image: url('https://www.growthengineering.co.uk/wp-content/uploads/2026/03/Globe.svg');
    }
    .stat-icon-growth {
      -webkit-mask-image: url('https://www.growthengineering.co.uk/wp-content/uploads/2026/03/Growth.svg');
      mask-image: url('https://www.growthengineering.co.uk/wp-content/uploads/2026/03/Growth.svg');
    }
    .stat-icon-achievement {
      -webkit-mask-image: url('https://www.growthengineering.co.uk/wp-content/uploads/2026/03/Achievement.svg');
      mask-image: url('https://www.growthengineering.co.uk/wp-content/uploads/2026/03/Achievement.svg');
    }

    /* --- Links in body text --- */
    a.body-link {
      color: var(--blue);
      text-decoration: underline;
      transition: color 0.3s;
    }
    a.body-link:hover { color: var(--white); }
    a.mint-link {
      color: var(--mint);
      text-decoration: underline;
      transition: color 0.3s;
    }
    a.mint-link:hover { color: var(--white); }