/*
Theme Name:        Verity Cannabis Compliance
Theme URI:         https://veritycannabiscompliance.com
Author:            Verity Cannabis Compliance
Author URI:        https://veritycannabiscompliance.com
Description:       Custom WordPress theme for Verity Cannabis Compliance — Oregon's cannabis compliance authority. A single-page marketing theme with editable hero, services, ROI, and contact sections via the Customizer.
Version:           1.0.0
Requires at least: 6.0
Tested up to:      6.5
Requires PHP:      7.4
License:           GNU General Public License v2 or later
License URI:       https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:       verity-cannabis
Tags:              one-page, custom-logo, custom-menu, custom-colors, threaded-comments, translation-ready
*/

/* ── RESET & BASE ───────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; font-size: 16px; }

    /* ── BRAND TOKENS ───────────────────────────────────────── */
    :root {
      --charcoal:   #2A2D2E;
      --charcoal-d: #1A1C1D;
      --charcoal-m: #3D4142;
      --green:      #3B5E45;
      --green-m:    #4E7A5C;
      --green-l:    #6B9B78;
      --green-p:    #EFF5F1;
      --green-pp:   #F5FAF6;
      --gold:       #C4922A;
      --gold-l:     #F9F0E0;
      --cream:      #F8F7F4;
      --white:      #FFFFFF;
      --border:     #E0DDD8;
      --text:       #2A2D2E;
      --muted:      #6B7280;
      --rule:       rgba(42,45,46,0.12);

      --serif:  'Playfair Display', Georgia, serif;
      --sans:   'DM Sans', system-ui, sans-serif;

      --nav-h: 72px;
    }

    body {
      font-family: var(--sans);
      font-size: 16px;
      color: var(--text);
      background: var(--cream);
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
    }

    img { display: block; max-width: 100%; }
    a { color: inherit; text-decoration: none; }

    /* ── UTILITIES ──────────────────────────────────────────── */
    .container {
      max-width: 1060px;
      margin: 0 auto;
      padding: 0 32px;
    }

    .section-label {
      font-family: var(--sans);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 2.5px;
      text-transform: uppercase;
      color: var(--green-m);
      margin-bottom: 20px;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .section-label::before {
      content: '';
      display: block;
      width: 24px;
      height: 1.5px;
      background: var(--green-m);
      flex-shrink: 0;
    }

    .serif { font-family: var(--serif); }

    /* ── ANIMATIONS ─────────────────────────────────────────── */
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(24px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes fadeIn {
      from { opacity: 0; }
      to   { opacity: 1; }
    }
    @keyframes drawLine {
      from { width: 0; }
      to   { width: 100%; }
    }
    @keyframes scaleIn {
      from { opacity: 0; transform: scale(0.94); }
      to   { opacity: 1; transform: scale(1); }
    }

    .animate-1 { animation: fadeUp 0.7s ease both; }
    .animate-2 { animation: fadeUp 0.7s 0.12s ease both; }
    .animate-3 { animation: fadeUp 0.7s 0.24s ease both; }
    .animate-4 { animation: fadeUp 0.7s 0.36s ease both; }
    .animate-5 { animation: fadeUp 0.7s 0.48s ease both; }

    /* ── NAVIGATION ─────────────────────────────────────────── */
    nav {
      position: fixed;
      top: 0; left: 0; right: 0;
      height: var(--nav-h);
      z-index: 100;
      background: rgba(248, 247, 244, 0.92);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-bottom: 1px solid var(--rule);
      transition: background 0.3s, box-shadow 0.3s;
    }
    nav.scrolled {
      background: rgba(248, 247, 244, 0.98);
      box-shadow: 0 2px 20px rgba(42,45,46,0.08);
    }
    .nav-inner {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .nav-logo {
      display: flex;
      align-items: center;
      gap: 6px;
      text-decoration: none;
    }
    .nav-wordmark {
      display: flex;
      flex-direction: column;
      line-height: 1;
    }
    .nav-wordmark-top {
      font-family: var(--serif);
      font-size: 20.7px;
      font-weight: 700;
      color: var(--charcoal);
      letter-spacing: -0.3px;
    }
    .nav-wordmark-sub {
      font-family: var(--sans);
      font-size: 10.4px;
      font-weight: 500;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--green-m);
      margin-top: 2px;
    }
    .nav-links {
      display: flex;
      align-items: center;
      gap: 36px;
      list-style: none;
    }
    .nav-links a {
      font-size: 13px;
      font-weight: 500;
      color: var(--muted);
      letter-spacing: 0.2px;
      transition: color 0.2s;
    }
    .nav-links a:hover { color: var(--charcoal); }
    .nav-cta {
      background: var(--charcoal);
      color: var(--white) !important;
      padding: 9px 20px;
      border-radius: 4px;
      font-size: 13px !important;
      font-weight: 600 !important;
      letter-spacing: 0.3px;
      transition: background 0.2s !important;
    }
    .nav-cta:hover { background: var(--green) !important; color: var(--white) !important; }

    /* ── HERO ───────────────────────────────────────────────── */
    #hero {
      min-height: 100vh;
      background: var(--charcoal-d);
      display: flex;
      flex-direction: column;
      justify-content: center;
      position: relative;
      overflow: hidden;
      padding-top: var(--nav-h);
    }

    /* Subtle texture overlay */
    #hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image:
        repeating-linear-gradient(
          0deg,
          transparent,
          transparent 59px,
          rgba(255,255,255,0.02) 59px,
          rgba(255,255,255,0.02) 60px
        ),
        repeating-linear-gradient(
          90deg,
          transparent,
          transparent 59px,
          rgba(255,255,255,0.02) 59px,
          rgba(255,255,255,0.02) 60px
        );
      pointer-events: none;
    }

    /* Green accent bar — left edge */
    #hero::after {
      content: '';
      position: absolute;
      left: 0; top: 0; bottom: 0;
      width: 3px;
      background: linear-gradient(to bottom, transparent, var(--green), var(--green-l), transparent);
    }

    .hero-inner {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 80px;
      align-items: center;
      padding: 100px 0;
    }

    .hero-eyebrow {
      font-family: var(--sans);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: var(--green-l);
      margin-bottom: 28px;
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .hero-eyebrow::before {
      content: '';
      display: block;
      width: 32px;
      height: 1px;
      background: var(--green-l);
    }

    .hero-headline {
      font-family: var(--serif);
      font-size: clamp(42px, 5.5vw, 68px);
      font-weight: 900;
      line-height: 1.04;
      color: var(--white);
      letter-spacing: -1.5px;
      margin-bottom: 28px;
    }
    .hero-headline em {
      font-style: italic;
      color: var(--green-l);
    }

    .hero-sub {
      font-size: 17px;
      font-weight: 300;
      line-height: 1.75;
      color: rgba(255,255,255,0.65);
      max-width: 520px;
      margin-bottom: 48px;
    }

    .hero-actions {
      display: flex;
      gap: 16px;
      align-items: center;
      flex-wrap: wrap;
    }

    .btn-primary {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: var(--green);
      color: var(--white);
      padding: 14px 28px;
      border-radius: 4px;
      font-size: 14px;
      font-weight: 600;
      letter-spacing: 0.3px;
      transition: background 0.2s, transform 0.2s;
      border: none;
      cursor: pointer;
      text-decoration: none;
    }
    .btn-primary:hover { background: var(--green-m); transform: translateY(-1px); }

    .btn-ghost {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: rgba(255,255,255,0.6);
      font-size: 14px;
      font-weight: 500;
      letter-spacing: 0.3px;
      transition: color 0.2s;
      text-decoration: none;
      padding: 14px 0;
    }
    .btn-ghost:hover { color: var(--white); }
    .btn-ghost-arrow { transition: transform 0.2s; }
    .btn-ghost:hover .btn-ghost-arrow { transform: translateX(4px); }

    /* Large shield mark in hero */
    .hero-mark {
      opacity: 0.12;
      flex-shrink: 0;
    }

    /* Stat strip */
    .hero-stats {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 0;
      border-top: 1px solid rgba(255,255,255,0.08);
      padding-top: 48px;
      margin-top: 48px;
    }
    .hero-stat {
      padding-right: 32px;
      border-right: 1px solid rgba(255,255,255,0.08);
    }
    .hero-stat:last-child { border-right: none; padding-left: 32px; padding-right: 0; }
    .hero-stat:nth-child(2) { padding-left: 32px; }
    .hero-stat-num {
      font-family: var(--serif);
      font-size: 36px;
      font-weight: 700;
      color: var(--white);
      line-height: 1;
      margin-bottom: 6px;
    }
    .hero-stat-label {
      font-size: 12px;
      font-weight: 400;
      color: rgba(255,255,255,0.45);
      line-height: 1.5;
    }

    /* ── PROBLEM SECTION ────────────────────────────────────── */
    #problem {
      background: var(--cream);
      padding: 120px 0;
      position: relative;
    }

    .problem-grid {
      display: grid;
      grid-template-columns: 5fr 4fr;
      gap: 80px;
      align-items: start;
    }

    .problem-headline {
      font-family: var(--serif);
      font-size: clamp(32px, 3.5vw, 48px);
      font-weight: 700;
      line-height: 1.15;
      letter-spacing: -0.8px;
      color: var(--charcoal);
      margin-bottom: 28px;
    }
    .problem-headline em {
      font-style: italic;
      color: var(--green);
    }

    .problem-body {
      font-size: 16px;
      line-height: 1.85;
      color: #4B5563;
      margin-bottom: 20px;
    }

    .problem-pull {
      font-family: var(--serif);
      font-size: 22px;
      font-weight: 400;
      font-style: italic;
      color: var(--charcoal);
      line-height: 1.5;
      border-left: 3px solid var(--green);
      padding-left: 24px;
      margin: 36px 0;
    }

    /* Fine cards */
    .fine-stack {
      display: flex;
      flex-direction: column;
      gap: 12px;
      position: sticky;
      top: calc(var(--nav-h) + 32px);
    }

    .fine-card {
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 20px 22px;
      position: relative;
      overflow: hidden;
    }
    .fine-card::before {
      content: '';
      position: absolute;
      left: 0; top: 0; bottom: 0;
      width: 3px;
    }
    .fine-card.critical::before { background: #DC2626; }
    .fine-card.major::before    { background: #EA580C; }
    .fine-card.retainer::before { background: var(--green); }

    .fine-label {
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      margin-bottom: 6px;
    }
    .fine-card.critical .fine-label { color: #DC2626; }
    .fine-card.major    .fine-label { color: #EA580C; }
    .fine-card.retainer .fine-label { color: var(--green); }

    .fine-amount {
      font-family: var(--serif);
      font-size: 28px;
      font-weight: 700;
      line-height: 1;
      margin-bottom: 4px;
    }
    .fine-card.critical .fine-amount { color: #DC2626; }
    .fine-card.major    .fine-amount { color: #EA580C; }
    .fine-card.retainer .fine-amount { color: var(--green); }

    .fine-desc {
      font-size: 12.5px;
      color: var(--muted);
      line-height: 1.5;
    }

    .fine-vs {
      text-align: center;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 1px;
      text-transform: uppercase;
      color: var(--muted);
      padding: 4px 0;
    }

    /* ── WHO WE ARE ─────────────────────────────────────────── */
    #about {
      background: var(--charcoal);
      padding: 120px 0;
      position: relative;
      overflow: hidden;
    }
    #about::before {
      content: '';
      position: absolute;
      right: -120px; top: -120px;
      width: 500px; height: 500px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(107,155,120,0.08) 0%, transparent 70%);
      pointer-events: none;
    }

    .about-grid {
      position: relative;
      min-height: 800px;
    }

    .about-mark {
      position: absolute;
      left: 0;
      top: 0;
      z-index: 0;
    }

    .about-section-label {
      font-family: var(--sans);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 2.5px;
      text-transform: uppercase;
      color: var(--green-l);
      margin-bottom: 20px;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .about-section-label::before {
      content: '';
      display: block;
      width: 24px;
      height: 1.5px;
      background: var(--green-l);
    }

    .about-headline {
      font-family: var(--serif);
      font-size: clamp(30px, 3vw, 42px);
      font-weight: 700;
      line-height: 1.2;
      letter-spacing: -0.5px;
      color: var(--white);
      margin-bottom: 24px;
    }
    .about-headline em { font-style: italic; color: var(--green-l); }

    .about-body {
      font-size: 16px;
      font-weight: 300;
      line-height: 1.85;
      color: rgba(255,255,255,0.65);
      margin-bottom: 16px;
    }

    .about-pillars {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      margin-top: 36px;
    }
    .pillar {
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 8px;
      padding: 18px 20px;
      transition: background 0.2s, border-color 0.2s;
    }
    .pillar:hover {
      background: rgba(107,155,120,0.1);
      border-color: rgba(107,155,120,0.3);
    }
    .pillar-title {
      font-family: var(--serif);
      font-size: 16px;
      font-weight: 700;
      color: var(--white);
      margin-bottom: 6px;
    }
    .pillar-desc {
      font-size: 13px;
      font-weight: 300;
      color: rgba(255,255,255,0.5);
      line-height: 1.6;
    }

    /* ── SERVICES ───────────────────────────────────────────── */
    #services {
      background: var(--cream);
      padding: 120px 0;
    }

    .services-header {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 60px;
      align-items: end;
      margin-bottom: 64px;
      padding-bottom: 48px;
      border-bottom: 1px solid var(--rule);
    }

    .services-headline {
      font-family: var(--serif);
      font-size: clamp(32px, 3.5vw, 48px);
      font-weight: 700;
      line-height: 1.15;
      letter-spacing: -0.8px;
      color: var(--charcoal);
    }
    .services-headline em { font-style: italic; color: var(--green); }

    .services-intro {
      font-size: 15px;
      line-height: 1.8;
      color: var(--muted);
    }

    /* Service tiers */
    .tiers {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
      margin-bottom: 64px;
    }

    .tier {
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: 10px;
      overflow: hidden;
      transition: box-shadow 0.2s, transform 0.2s;
    }
    .tier:hover {
      box-shadow: 0 8px 32px rgba(42,45,46,0.1);
      transform: translateY(-2px);
    }
    .tier.featured {
      border-color: var(--green);
      box-shadow: 0 4px 24px rgba(59,94,69,0.15);
    }

    .tier-badge {
      background: var(--green);
      color: var(--white);
      text-align: center;
      padding: 6px;
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 1.5px;
      text-transform: uppercase;
    }

    .tier-header {
      padding: 28px 24px 20px;
      border-bottom: 1px solid var(--rule);
    }
    .tier-name {
      font-family: var(--serif);
      font-size: 24px;
      font-weight: 700;
      color: var(--charcoal);
      margin-bottom: 4px;
    }
    .tier-tag {
      font-size: 12px;
      color: var(--green-m);
      font-weight: 500;
      font-style: italic;
      margin-bottom: 16px;
    }
    .tier-price {
      display: flex;
      align-items: baseline;
      gap: 4px;
    }
    .tier-price-num {
      font-family: var(--serif);
      font-size: 32px;
      font-weight: 700;
      color: var(--charcoal);
    }
    .tier-price-period {
      font-size: 13px;
      color: var(--muted);
    }

    .tier-body {
      padding: 22px 24px;
    }
    .tier-item {
      display: flex;
      gap: 10px;
      align-items: flex-start;
      margin-bottom: 10px;
      font-size: 13.5px;
      color: #374151;
      line-height: 1.5;
    }
    .tier-check {
      color: var(--green);
      font-weight: 700;
      flex-shrink: 0;
      margin-top: 1px;
    }

    /* À la carte services */
    .alacarte-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
    }

    .alacarte-item {
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 20px 20px;
      display: flex;
      gap: 14px;
      align-items: flex-start;
      transition: border-color 0.2s;
    }
    .alacarte-item:hover { border-color: var(--green-l); }
    .alacarte-icon {
      font-size: 20px;
      flex-shrink: 0;
      margin-top: 2px;
    }
    .alacarte-name {
      font-size: 14px;
      font-weight: 600;
      color: var(--charcoal);
      margin-bottom: 3px;
      line-height: 1.35;
    }
    .alacarte-desc {
      font-size: 12.5px;
      color: var(--muted);
      line-height: 1.55;
    }

    .services-note {
      margin-top: 48px;
      padding: 28px 32px;
      background: var(--green-pp);
      border: 1px solid rgba(59,94,69,0.15);
      border-radius: 8px;
      display: flex;
      gap: 20px;
      align-items: center;
    }
    .services-note-text {
      font-size: 14.5px;
      line-height: 1.75;
      color: var(--charcoal);
    }
    .services-note-text strong { color: var(--green); }

    /* ── FINANCIAL CASE ─────────────────────────────────────── */
    #roi {
      background: var(--charcoal-d);
      padding: 120px 0;
      position: relative;
      overflow: hidden;
    }
    #roi::after {
      content: '';
      position: absolute;
      left: -200px; bottom: -200px;
      width: 600px; height: 600px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(59,94,69,0.15) 0%, transparent 70%);
      pointer-events: none;
    }

    .roi-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: center;
      position: relative;
      z-index: 1;
    }

    .roi-headline {
      font-family: var(--serif);
      font-size: clamp(32px, 3.5vw, 48px);
      font-weight: 700;
      line-height: 1.15;
      letter-spacing: -0.8px;
      color: var(--white);
      margin-bottom: 24px;
    }
    .roi-headline em { font-style: italic; color: var(--green-l); }

    .roi-body {
      font-size: 15px;
      font-weight: 300;
      line-height: 1.85;
      color: rgba(255,255,255,0.6);
      margin-bottom: 16px;
    }

    .roi-pull {
      font-family: var(--serif);
      font-size: 20px;
      font-style: italic;
      color: var(--green-l);
      line-height: 1.5;
      border-left: 2px solid var(--green);
      padding-left: 20px;
      margin: 28px 0;
    }

    /* Comparison table */
    .roi-table {
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 10px;
      overflow: hidden;
    }
    .roi-table-header {
      display: grid;
      grid-template-columns: 1fr 1fr;
      background: rgba(255,255,255,0.06);
      border-bottom: 1px solid rgba(255,255,255,0.08);
    }
    .roi-th {
      padding: 14px 22px;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 1.5px;
      text-transform: uppercase;
    }
    .roi-th.without { color: #F87171; border-right: 1px solid rgba(255,255,255,0.08); }
    .roi-th.with    { color: var(--green-l); }

    .roi-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    .roi-row:last-child { border-bottom: none; }
    .roi-cell {
      padding: 14px 22px;
      font-size: 13px;
      line-height: 1.5;
    }
    .roi-cell.without {
      color: rgba(248,113,113,0.9);
      border-right: 1px solid rgba(255,255,255,0.06);
    }
    .roi-cell.with {
      color: rgba(107,155,120,0.9);
    }

    /* ── CONTACT ────────────────────────────────────────────── */
    #contact {
      background: var(--cream);
      padding: 120px 0;
    }

    .contact-grid {
      display: grid;
      grid-template-columns: 5fr 4fr;
      gap: 80px;
      align-items: start;
    }

    .contact-headline {
      font-family: var(--serif);
      font-size: clamp(36px, 4vw, 56px);
      font-weight: 700;
      line-height: 1.1;
      letter-spacing: -1px;
      color: var(--charcoal);
      margin-bottom: 24px;
    }
    .contact-headline em { font-style: italic; color: var(--green); }

    .contact-body {
      font-size: 16px;
      line-height: 1.8;
      color: var(--muted);
      margin-bottom: 40px;
      max-width: 440px;
    }

    .contact-actions {
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .contact-link {
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 20px 24px;
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: 8px;
      text-decoration: none;
      transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
    }
    .contact-link:hover {
      border-color: var(--green);
      box-shadow: 0 4px 20px rgba(59,94,69,0.1);
      transform: translateX(4px);
    }
    .contact-link-icon {
      width: 40px;
      height: 40px;
      background: var(--green-pp);
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      flex-shrink: 0;
    }
    .contact-link-text strong {
      display: block;
      font-size: 14px;
      font-weight: 600;
      color: var(--charcoal);
      margin-bottom: 2px;
    }
    .contact-link-text span {
      font-size: 13px;
      color: var(--muted);
    }
    .contact-link-arrow {
      margin-left: auto;
      color: var(--green);
      font-size: 18px;
      transition: transform 0.2s;
    }
    .contact-link:hover .contact-link-arrow { transform: translateX(4px); }

    /* Trust indicators */
    .trust-block {
      padding-top: 16px;
    }
    .trust-label {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 20px;
    }
    .trust-items {
      display: flex;
      flex-direction: column;
      gap: 14px;
    }
    .trust-item {
      display: flex;
      gap: 12px;
      align-items: flex-start;
      font-size: 14px;
      color: var(--charcoal);
      line-height: 1.5;
    }
    .trust-check {
      width: 20px;
      height: 20px;
      background: var(--green-pp);
      border: 1.5px solid var(--green-l);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      color: var(--green);
      font-weight: 700;
      flex-shrink: 0;
      margin-top: 1px;
    }

    /* ── FOOTER ─────────────────────────────────────────────── */
    footer {
      background: var(--charcoal-d);
      padding: 40px 0;
      border-top: 1px solid rgba(255,255,255,0.06);
    }
    .footer-inner {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 16px;
    }
    .footer-left {
      display: flex;
      align-items: center;
      gap: 14px;
    }
    .footer-wordmark {
      font-family: var(--serif);
      font-size: 16px;
      font-weight: 700;
      color: rgba(255,255,255,0.7);
    }
    .footer-divider {
      width: 1px;
      height: 18px;
      background: rgba(255,255,255,0.12);
    }
    .footer-tag {
      font-size: 12px;
      color: rgba(255,255,255,0.3);
    }
    .footer-right {
      font-size: 12px;
      color: rgba(255,255,255,0.25);
    }
    .footer-links {
      display: flex;
      gap: 24px;
      margin-bottom: 8px;
    }
    .footer-links a {
      font-size: 12px;
      color: rgba(255,255,255,0.3);
      transition: color 0.2s;
    }
    .footer-links a:hover { color: rgba(255,255,255,0.6); }

    /* ── SVG MARK ───────────────────────────────────────────── */
    .mark { display: block; }

    /* ── RESPONSIVE ─────────────────────────────────────────── */
    @media (max-width: 768px) {
      .container { padding: 0 20px; }
      .hero-inner { grid-template-columns: 1fr; gap: 48px; }
      .hero-mark { display: none; }
      .hero-stats { grid-template-columns: 1fr; gap: 24px; }
      .hero-stat { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.08); padding: 0 0 24px; }
      .hero-stat:last-child { border-bottom: none; }
      .hero-stat:nth-child(2) { padding-left: 0; }
      .problem-grid { grid-template-columns: 1fr; }
      .fine-stack { position: static; }
      .about-grid { grid-template-columns: 1fr; gap: 40px; }
      .about-mark { display: none; }
      .about-grid { min-height: auto; }
      .about-pillars { grid-template-columns: 1fr; }
      .services-header { grid-template-columns: 1fr; gap: 20px; }
      .tiers { grid-template-columns: 1fr; }
      .alacarte-grid { grid-template-columns: 1fr; }
      .roi-grid { grid-template-columns: 1fr; gap: 48px; }
      .contact-grid { grid-template-columns: 1fr; gap: 48px; }
      .nav-links { display: none; }
    }