/*
Theme Name: FPC-V14
Theme URI: https://franklinpikecomputing.com
Author: Franklin Pike Computing
Author URI: https://franklinpikecomputing.com
Description: Custom brochure + blog theme for Franklin Pike Computing — managed IT services, computer repair, network support, and AI setup & consulting for homes, businesses, and nonprofits in Floyd, VA and the New River Valley. One-page front page, a real WordPress blog for weekly posts, a linked Google review section, a real satellite Google Map overlay for the service area, and a direct-send contact form.
Version: 14.0
Requires at least: 5.9
Requires PHP: 7.4
Text Domain: fpc-v14
*/

  /* ============ TOKENS ============ */
  :root{
    --bg:#f4f7f8;
    --surface:#ffffff;
    --surface-tint:#eef3f4;
    --ink:#0d1b26;
    --ink-soft:#4c606c;
    --ink-faint:#7b8d97;
    --line:#dde5e8;
    --navy:#1d5183;
    --navy-deep:#12314f;
    --navy-panel:#2b6aa6;
    --teal:#00b8ab;
    --teal-bright:#0fe6d4;
    --violet:#8f6bff;
    --on-navy:#eaf2f4;
    --on-navy-soft:#9fb6c2;
    --shadow: 0 16px 32px -20px rgba(9,26,40,0.28);
    --shadow-lg: 0 28px 56px -24px rgba(9,26,40,0.32);
    --radius-card: 10px;
    --radius-sm: 6px;
    --radius-pill: 999px;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#0a1420;
      --surface:#101f30;
      --surface-tint:#0d1a29;
      --ink:#e9f1f4;
      --ink-soft:#a9bcc6;
      --ink-faint:#7690a0;
      --line:#213648;
      --navy:#1d5183;
      --navy-deep:#12314f;
      --navy-panel:#2b6aa6;
      --teal:#33f0df;
      --teal-bright:#4dfff0;
      --violet:#b39dff;
      --on-navy:#eaf2f4;
      --on-navy-soft:#9fb6c2;
      --shadow: 0 16px 36px -18px rgba(0,0,0,0.5);
      --shadow-lg: 0 28px 60px -20px rgba(0,0,0,0.55);
    }
  }
  :root[data-theme="dark"]{
    --bg:#0a1420;
    --surface:#101f30;
    --surface-tint:#0d1a29;
    --ink:#e9f1f4;
    --ink-soft:#a9bcc6;
    --ink-faint:#7690a0;
    --line:#213648;
    --navy:#1d5183;
    --navy-deep:#12314f;
    --navy-panel:#2b6aa6;
    --teal:#2bc4bd;
    --teal-bright:#34d6ce;
    --violet:#8a76e8;
    --on-navy:#eaf2f4;
    --on-navy-soft:#9fb6c2;
    --shadow: 0 16px 36px -18px rgba(0,0,0,0.5);
    --shadow-lg: 0 28px 60px -20px rgba(0,0,0,0.55);
  }

  *,*::before,*::after{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;} }

  body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:"Work Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size:16px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  img{max-width:100%; display:block;}
  a{color:inherit;}
  .wrap{width:100%; max-width:1180px; margin:0 auto; padding:0 24px;}

  h1,h2,h3{
    font-family:"Playfair Display", Georgia, "Times New Roman", serif;
    font-weight:700;
    line-height:1.14;
    letter-spacing:-0.012em;
    text-wrap:balance;
    margin:0;
    color:var(--ink);
  }
  .eyebrow{
    font-family:"IBM Plex Mono", ui-monospace, monospace;
    font-size:0.7rem;
    letter-spacing:0.15em;
    text-transform:uppercase;
    font-weight:600;
  }

  .btn{
    display:inline-flex; align-items:center; gap:10px;
    font-family:"Work Sans", sans-serif;
    font-weight:600; font-size:0.92rem; letter-spacing:0.005em;
    padding:14px 26px;
    border-radius:var(--radius-sm);
    border:1.5px solid transparent;
    cursor:pointer;
    text-decoration:none;
    transition:transform .16s ease, box-shadow .16s ease, background-color .16s ease, border-color .16s ease;
    white-space:nowrap;
  }
  .btn:hover{ transform:translateY(-1px); }
  .btn:active{ transform:translateY(0); }
  .btn:focus-visible{ outline:2.5px solid var(--teal-bright); outline-offset:3px; }
  .btn-primary{ background:var(--teal-bright); color:#04211f; border-color:var(--teal-bright); box-shadow:0 14px 28px -12px rgba(15,230,212,0.55); }
  .btn-primary:hover{ background:var(--teal); box-shadow:0 18px 34px -12px rgba(15,230,212,0.65); }
  .btn-ghost-dark{ background:transparent; color:var(--on-navy); border-color:rgba(234,242,244,0.3); }
  .btn-ghost-dark:hover{ border-color:var(--on-navy); background:rgba(234,242,244,0.05); }
  .btn-ghost-light{ background:transparent; color:var(--ink); border-color:var(--line); }
  .btn-ghost-light:hover{ border-color:var(--ink-faint); background:var(--surface-tint); }

  .diamond{
    width:7px; height:7px; background:var(--teal-bright);
    transform:rotate(45deg); flex:none;
  }
  .diamond-lg{ width:9px; height:9px; }

  /* ============ NAV ============ */
  header.site-nav{
    position:sticky; top:0; z-index:50;
    background:color-mix(in srgb, var(--surface) 94%, transparent);
    backdrop-filter:blur(12px);
    border-bottom:1px solid var(--line);
  }
  .nav-row{ display:flex; align-items:center; justify-content:space-between; padding:11px 0; gap:20px;}
  .brand{ display:flex; align-items:center; gap:12px; text-decoration:none; }
  .brand img{ height:40px; width:auto; }
  .brand-text{ font-family:"Zilla Slab", serif; font-weight:700; font-size:1.02rem; color:var(--ink); letter-spacing:0.01em; }
  .brand-text span{ display:block; font-family:"IBM Plex Mono", monospace; font-weight:500; font-size:0.62rem; color:var(--ink-faint); letter-spacing:0.1em; text-transform:uppercase; margin-top:2px;}
  nav.nav-links{ display:flex; align-items:center; gap:32px; }
  nav.nav-links a{ text-decoration:none; font-size:0.87rem; font-weight:600; color:var(--ink-soft); transition:color .15s ease; letter-spacing:0.01em; }
  nav.nav-links a:hover{ color:var(--ink); }
  .nav-right{ display:flex; align-items:center; gap:18px; }
  .nav-phone{ display:flex; align-items:center; gap:8px; font-family:"Zilla Slab", Georgia, serif; font-size:0.98rem; font-weight:600; letter-spacing:0.01em; text-decoration:none; color:var(--ink); }
  .nav-phone svg{ width:15px; height:15px; stroke:var(--teal); flex:none; }
  .menu-toggle{ display:none; background:none; border:1.5px solid var(--line); border-radius:var(--radius-sm); width:42px; height:38px; align-items:center; justify-content:center; cursor:pointer; }
  .menu-toggle span, .menu-toggle::before, .menu-toggle::after{ content:""; display:block; width:18px; height:2px; background:var(--ink); position:relative; }
  .menu-toggle{ flex-direction:column; gap:4px; }

  @media (max-width: 880px){
    nav.nav-links{ display:none; }
    .nav-phone span.txt{ display:none; }
    .menu-toggle{ display:flex; }
    header.site-nav.open nav.nav-links{
      display:flex; flex-direction:column; align-items:flex-start; gap:2px;
      position:absolute; top:100%; left:0; right:0; background:var(--surface);
      border-bottom:1px solid var(--line); padding:8px 24px 18px;
    }
    header.site-nav.open nav.nav-links a{ padding:10px 0; width:100%; border-bottom:1px solid var(--line); }
  }

  /* ============ HERO ============ */
  .hero{
    position:relative;
    background:radial-gradient(120% 140% at 82% -10%, var(--navy-panel) 0%, var(--navy) 45%, var(--navy-deep) 100%);
    color:var(--on-navy);
    overflow:hidden;
    padding:108px 0 92px;
    isolation:isolate;
  }
  .hero::after{
    content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
    background:
      radial-gradient(620px 400px at 90% 0%, rgba(143,107,255,0.36), transparent 65%),
      radial-gradient(700px 460px at 0% 100%, rgba(15,230,212,0.3), transparent 65%);
  }
  .hero-inner{ position:relative; z-index:1; display:grid; grid-template-columns:1.15fr 0.85fr; gap:56px; align-items:center; }
  @media (max-width:960px){ .hero-inner{ grid-template-columns:1fr; } }

  .hero-badge{ display:inline-flex; align-items:center; gap:9px; padding:7px 15px 7px 12px; background:rgba(15,230,212,0.2); border:1px solid rgba(77,255,240,0.45); border-radius:var(--radius-pill); color:var(--teal-bright); margin-bottom:28px; }
  .hero h1{ font-size:clamp(2.3rem, 4.4vw, 3.5rem); color:#fff; margin-bottom:24px; letter-spacing:-0.018em; }
  .hero h1 em{ font-style:normal; color:var(--teal-bright); }
  .hero .lede{ font-size:1.1rem; line-height:1.65; color:var(--on-navy-soft); max-width:46ch; margin-bottom:16px; }
  .hero .tagline{ font-family:"IBM Plex Mono", monospace; font-size:0.8rem; letter-spacing:0.05em; color:var(--on-navy-soft); margin-bottom:36px; }
  .hero .tagline b{ color:var(--teal-bright); font-weight:600; }
  .hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:44px; }
  .hero-facts{ display:flex; flex-wrap:wrap; gap:22px 32px; padding-top:28px; border-top:1px solid rgba(234,242,244,0.12); }
  .hero-fact{ display:flex; align-items:center; gap:10px; font-size:0.85rem; color:var(--on-navy-soft); }
  .hero-fact .diamond{ background:var(--teal-bright); }

  .hero-mark{ position:relative; display:flex; justify-content:center; }
  .hero-mark img{ width:min(320px, 88%); filter:drop-shadow(0 24px 44px rgba(0,0,0,0.4)); }

  /* ============ TRUST STRIP ============ */
  .trust-strip{ background:var(--surface); border-bottom:1px solid var(--line); }
  .trust-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; }
  .trust-item{ padding:28px 22px; text-align:center; border-left:1px solid var(--line); }
  .trust-item:first-child{ border-left:none; }
  .trust-item .num{ font-family:"Zilla Slab", serif; font-weight:700; font-size:1.4rem; letter-spacing:-0.01em; color:var(--navy); }
  @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .trust-item .num{ color:var(--teal-bright); } }
  :root[data-theme="dark"] .trust-item .num{ color:var(--teal-bright); }
  .trust-item .label{ font-size:0.8rem; color:var(--ink-soft); margin-top:5px; }
  @media (max-width:760px){ .trust-grid{ grid-template-columns:1fr 1fr; } .trust-item{ border-left:none; border-top:1px solid var(--line); } .trust-item:nth-child(odd){ border-right:1px solid var(--line); } }

  /* ============ SECTION SHELL ============ */
  section{ padding:100px 0; }
  .section-head{ max-width:640px; margin-bottom:56px; }
  .section-head .eyebrow{ color:var(--teal); display:flex; align-items:center; gap:9px; margin-bottom:16px; }
  .section-head .eyebrow .diamond{ background:var(--teal); }
  .section-head h2{ font-size:clamp(1.7rem, 3vw, 2.3rem); margin-bottom:16px; }
  .section-head p{ color:var(--ink-soft); font-size:1.03rem; max-width:56ch; }
  .section-tint{ background:var(--surface-tint); }

  /* ============ SERVICES ============ */
  .services-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
  .service-card{
    background:var(--surface); padding:32px 28px; display:flex; flex-direction:column; gap:16px;
    border:1px solid var(--line); border-radius:var(--radius-card);
    transition:box-shadow .18s ease, border-color .18s ease, transform .18s ease;
  }
  .service-card:hover{ box-shadow:var(--shadow); border-color:color-mix(in srgb, var(--teal) 35%, var(--line)); transform:translateY(-2px); }
  .service-icon{ width:44px; height:44px; clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%); background:var(--navy); display:flex; align-items:center; justify-content:center; flex:none; }
  .service-icon svg{ width:20px; height:20px; stroke:var(--teal-bright); }
  .service-card h3{ font-size:1.05rem; letter-spacing:-0.005em; }
  .service-card p{ color:var(--ink-soft); font-size:0.9rem; margin:0; line-height:1.6; }
  @media (max-width:900px){ .services-grid{ grid-template-columns:1fr 1fr; } }
  @media (max-width:600px){ .services-grid{ grid-template-columns:1fr; } }

  /* ============ WHY / COMPARE ============ */
  .compare-wrap{ background:var(--navy); color:var(--on-navy); border-radius:var(--radius-card); overflow:hidden; box-shadow:var(--shadow-lg); }
  .compare-grid{ display:grid; grid-template-columns:1fr 1fr; }
  @media (max-width:760px){ .compare-grid{ grid-template-columns:1fr; } }
  .compare-col{ padding:48px 44px; }
  .compare-col.fpc{ background:var(--navy-panel); position:relative; }
  .compare-col.fpc::before{ content:""; position:absolute; inset:0 0 0 0; border-left:3px solid var(--teal-bright); }
  .compare-col h3{ color:#fff; font-size:1.15rem; letter-spacing:-0.005em; margin-bottom:22px; }
  .compare-col.typical h3{ color:var(--on-navy-soft); }
  .compare-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:16px; }
  .compare-list li{ display:flex; gap:13px; font-size:0.92rem; line-height:1.5; color:var(--on-navy-soft); }
  .compare-col.fpc .compare-list li{ color:var(--on-navy); }
  .compare-list li svg{ width:16px; height:16px; flex:none; margin-top:3px; }
  .compare-col.fpc .compare-list li svg{ stroke:var(--teal-bright); }
  .compare-col.typical .compare-list li svg{ stroke:var(--on-navy-soft); opacity:0.55; }

  /* ============ ABOUT ============ */
  .about-grid{ display:grid; grid-template-columns:0.66fr 1fr; gap:60px; align-items:start; }
  @media (max-width:860px){ .about-grid{ grid-template-columns:1fr; gap:36px; } }
  .about-photo{ position:relative; }
  .avatar{
    aspect-ratio:1; width:100%; max-width:300px;
    background:linear-gradient(155deg, var(--teal-bright), var(--navy-panel) 55%, var(--violet));
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    box-shadow:var(--shadow-lg);
    padding:7px;
  }
  .avatar img{ width:100%; height:100%; object-fit:cover; border-radius:50%; display:block; }
  .avatar span{ font-family:"Zilla Slab", serif; font-weight:700; font-size:3.6rem; letter-spacing:-0.02em; color:var(--teal-bright); }
  .about-credentials{ margin-top:24px; padding:22px 24px; background:var(--surface-tint); border:1px solid var(--line); border-radius:var(--radius-sm); }
  .about-credentials .eyebrow{ color:var(--teal); margin-bottom:10px; display:block; }
  .about-credentials ul{ margin:0; padding-left:18px; color:var(--ink-soft); font-size:0.9rem; display:flex; flex-direction:column; gap:6px; }
  .about-copy h2{ font-size:clamp(1.7rem,3vw,2.2rem); margin-bottom:20px; }
  .about-copy p{ color:var(--ink-soft); font-size:1.02rem; margin:0 0 18px; }
  .about-copy p:last-of-type{ margin-bottom:28px; }

  /* ============ REVIEWS ============ */
  .reviews-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
  @media (max-width:900px){ .reviews-grid{ grid-template-columns:1fr; } }
  .review-card{ border:1px solid var(--line); border-radius:var(--radius-card); padding:28px 26px; background:var(--surface); display:flex; flex-direction:column; gap:16px; box-shadow:var(--shadow); }
  .review-source-tag{ font-family:"IBM Plex Mono", monospace; font-size:0.65rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-faint); background:var(--surface-tint); border:1px solid var(--line); border-radius:var(--radius-pill); padding:4px 10px; align-self:flex-start; }
  .review-stars{ display:flex; gap:3px; }
  .review-stars svg{ width:15px; height:15px; fill:var(--teal-bright); stroke:none; }
  .review-card p{ font-size:0.94rem; color:var(--ink-soft); margin:0; font-style:italic; line-height:1.6; }
  .review-who{ font-family:"IBM Plex Mono", monospace; font-size:0.72rem; color:var(--ink-faint); letter-spacing:0.02em; }
  .rating-summary{ display:flex; align-items:center; gap:10px; margin:18px 0 12px; }
  .rating-summary span{ font-size:0.92rem; color:var(--ink-soft); }
  .rating-summary strong{ color:var(--ink); font-family:"Zilla Slab", serif; }
  .rating-summary a{ text-decoration:none; border-bottom:1px dashed var(--ink-faint); transition:border-color .15s ease; }
  .rating-summary a:hover{ border-color:var(--teal); }
  .rating-summary a:hover span{ color:var(--teal); }

  /* ============ SERVICE AREA ============ */
  .area-wrap{ display:grid; grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr); gap:56px; align-items:center; }
  @media (max-width:860px){ .area-wrap{ grid-template-columns:1fr; } }
  .area-list{ display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
  .area-chip{ display:flex; align-items:center; gap:8px; padding:8px 14px; border:1px solid var(--line); border-radius:var(--radius-pill); font-size:0.84rem; font-weight:500; color:var(--ink-soft); background:var(--surface); transition:border-color .15s ease, color .15s ease, background-color .15s ease; }
  .area-chip .diamond{ width:6px; height:6px; }
  .area-chip[data-town]{ cursor:default; }
  .area-chip[data-town]:hover, .area-chip[data-town]:focus-visible{ border-color:var(--teal); color:var(--ink); background:color-mix(in srgb, var(--teal-bright) 10%, var(--surface)); }
  .area-chip[data-town]:focus-visible{ outline:2px solid var(--teal-bright); outline-offset:2px; }
  /* Real Google Map with hand-placed pins. The map lives at a fixed 500x400
     reference size (.map-scale-inner) so every pin's percentage position
     stays pixel-accurate to the underlying map tiles; .map-card scales the
     whole thing down as one rigid unit on narrow screens via --map-scale,
     so the map and its pins can never drift out of alignment with each
     other, only shrink together. */
  .map-card{
    --map-w: 500px; --map-h: 400px; --map-scale: 1;
    width: calc(var(--map-w) * var(--map-scale));
    height: calc(var(--map-h) * var(--map-scale));
    margin: 0 auto;
    position: relative;
  }
  .map-scale-inner{
    width: var(--map-w); height: var(--map-h);
    transform: scale(var(--map-scale));
    transform-origin: top left;
    position: relative;
  }
  @media (max-width:1080px){ .map-card{ --map-scale: 0.86; } }
  @media (max-width:860px){ .map-card{ --map-scale: 1; } }
  @media (max-width:560px){ .map-card{ --map-scale: 0.78; } }
  @media (max-width:440px){ .map-card{ --map-scale: 0.64; } }
  @media (max-width:370px){ .map-card{ --map-scale: 0.54; } }

  .map-frame{
    position:absolute; inset:0;
    border-radius:var(--radius-card);
    overflow:hidden;
    box-shadow:var(--shadow-lg);
    border:1px solid var(--line);
    background:var(--surface-tint);
  }
  .map-frame iframe{
    position:absolute; inset:0; width:100%; height:100%; border:0;
    pointer-events:none; /* static on purpose — see .map-open-link for the live map */
    filter:grayscale(0.35) contrast(1.05) saturate(0.9);
  }
  .map-pins{ position:absolute; inset:0; pointer-events:none; }
  /* .map-pin's own top/left (set inline, per marker) is the exact geo point
     with zero size — the dot and label are each positioned relative to
     that same point independently, so the label's height never shifts
     where the dot actually sits. */
  .map-pin{ position:absolute; }
  .map-pin-dot{
    position:absolute; top:0; left:0; transform:translate(-50%,-50%);
    width:10px; height:10px; border-radius:50%;
    background:var(--teal-bright); border:2px solid #fff;
    box-shadow:0 1px 4px rgba(9,26,40,0.45);
  }
  /* Hovering (or keyboard-focusing) a town chip toggles .is-active on the
     matching pin via JS — the dot pops and an expanding ring blinks out
     from it so it's easy to spot on the map. */
  .map-pin.is-active .map-pin-dot{ animation:fpc-pin-pop 0.9s ease-in-out infinite; }
  .map-pin.is-active .map-pin-dot::after{
    content:""; position:absolute; inset:-2px; border-radius:50%;
    border:2px solid var(--teal-bright); pointer-events:none;
    animation:fpc-pin-ring 0.9s ease-out infinite;
  }
  @keyframes fpc-pin-pop{
    0%,100%{ transform:translate(-50%,-50%) scale(1); }
    50%{ transform:translate(-50%,-50%) scale(1.5); }
  }
  @keyframes fpc-pin-ring{
    0%{ transform:scale(1); opacity:0.9; }
    100%{ transform:scale(2.6); opacity:0; }
  }
  /* Town names already appear on the satellite imagery itself, so the
     pin labels are kept for screen readers only (not shown as the old
     white chip) rather than dropped outright — this is the standard
     visually-hidden pattern, not display:none, so assistive tech still
     announces which pin is which. */
  .map-pin-label{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
  }

  .map-open-row{ text-align:center; margin-top:16px; }
  .map-open-link{
    display:inline-flex; align-items:center; gap:6px;
    font-size:0.85rem; font-weight:600; color:var(--teal);
    text-decoration:none; border-bottom:1px dashed var(--ink-faint);
  }
  .map-open-link:hover{ color:var(--teal); border-color:var(--teal); }

  /* ============ CONTACT ============ */
  .contact-section{ background:var(--navy); color:var(--on-navy); }
  .contact-grid{ display:grid; grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr); gap:60px; }
  @media (max-width:900px){ .contact-grid{ grid-template-columns:1fr; gap:44px; } }
  .contact-section .section-head h2{ color:#fff; }
  .contact-section .section-head p{ color:var(--on-navy-soft); }
  .contact-info-list{ display:flex; flex-direction:column; gap:22px; margin-top:8px; }
  .contact-info-item{ display:flex; gap:14px; align-items:flex-start; min-width:0; }
  .contact-info-item > div{ min-width:0; overflow-wrap:anywhere; }
  .contact-info-item svg{ width:19px; height:19px; stroke:var(--teal-bright); flex:none; margin-top:3px; }
  .contact-info-item a, .contact-info-item div{ color:var(--on-navy); text-decoration:none; font-size:0.98rem; }
  .contact-info-item .k{ display:block; font-family:"IBM Plex Mono", monospace; font-size:0.68rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--on-navy-soft); margin-bottom:3px; }
  .social-row{ display:flex; gap:12px; margin-top:30px; }
  .social-row a{ width:38px; height:38px; border:1px solid rgba(234,242,244,0.22); border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; text-decoration:none; transition:border-color .15s ease, background-color .15s ease; }
  .social-row a:hover{ border-color:var(--teal-bright); background:rgba(47,208,201,0.08); }
  .social-row svg{ width:16px; height:16px; stroke:var(--on-navy); }

  .contact-form{ background:var(--surface); color:var(--ink); border-radius:var(--radius-card); padding:38px; box-shadow:var(--shadow-lg); }
  .form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  @media (max-width:520px){ .form-row{ grid-template-columns:1fr; } }
  .field{ display:flex; flex-direction:column; gap:6px; margin-bottom:16px; }
  .field label{ font-size:0.79rem; font-weight:600; color:var(--ink-soft); }
  .field input, .field textarea{
    font-family:"Work Sans", sans-serif; font-size:0.94rem; padding:11px 13px;
    border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--bg); color:var(--ink);
    resize:vertical;
    transition:border-color .15s ease;
  }
  .field input:focus, .field textarea:focus{ outline:2px solid var(--teal-bright); outline-offset:1px; border-color:var(--teal-bright); }
  .form-note{ font-size:0.78rem; color:var(--ink-faint); margin-top:10px; }
  #formStatus{ font-size:0.85rem; margin-top:12px; min-height:1.2em; }
  #formStatus.error{ color:#c0392b; }
  .hp-field{ position:absolute; left:-9999px; top:-9999px; width:1px; height:1px; overflow:hidden; }
  .check-field{ display:flex; align-items:flex-end; gap:12px; }
  .check-field .field{ margin-bottom:0; flex:1; }
  .check-field input{ max-width:100px; }
  .check-question{ font-size:0.95rem; font-weight:700; color:var(--ink); font-family:"Zilla Slab", serif; white-space:nowrap; padding-bottom:11px; }

  /* ============ FOOTER ============ */
  footer{ background:var(--navy-deep); color:var(--on-navy-soft); padding:54px 0 28px; }
  .footer-grid{ display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:40px; padding-bottom:36px; border-bottom:1px solid rgba(234,242,244,0.12); }
  @media (max-width:760px){ .footer-grid{ grid-template-columns:1fr; gap:30px; } }
  .footer-grid img{ height:34px; margin-bottom:14px; }
  .footer-grid p{ font-size:0.88rem; max-width:32ch; }
  .footer-col h4{ font-family:"IBM Plex Mono", monospace; font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--on-navy); margin:0 0 16px; }
  .footer-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
  .footer-col a{ text-decoration:none; font-size:0.9rem; color:var(--on-navy-soft); }
  .footer-col a:hover{ color:var(--teal-bright); }
  .footer-bottom{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; padding-top:24px; font-size:0.8rem; }

  .skip-link{ position:absolute; left:-999px; top:0; background:var(--teal-bright); color:#04211f; padding:10px 16px; z-index:100; }
  .skip-link:focus{ left:12px; top:12px; }

  /* ============ BLOG: TEASER / CARDS ============ */
  #blog-teaser{ background:var(--surface); }
  .blog-card{ text-decoration:none; cursor:pointer; }
  .blog-card-thumb{ margin:-32px -28px 4px; border-radius:var(--radius-card) var(--radius-card) 0 0; overflow:hidden; aspect-ratio:16/10; background:var(--navy); }
  .blog-card-thumb img{ width:100%; height:100%; object-fit:cover; }
  .blog-card-thumb-placeholder{ display:flex; align-items:center; justify-content:center; background:radial-gradient(120% 140% at 82% -10%, var(--navy-panel) 0%, var(--navy) 45%, var(--navy-deep) 100%); }
  .blog-card-thumb-placeholder img{ width:auto; height:36%; object-fit:contain; opacity:0.9; }
  .blog-card-date{ font-family:"IBM Plex Mono", monospace; font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-faint); }
  .blog-card h3{ font-size:1.05rem; letter-spacing:-0.005em; }
  .blog-card-more{ margin-top:auto; font-size:0.85rem; font-weight:600; color:var(--teal); }
  .blog-grid{ margin-bottom:56px; }

  .blog-empty{ background:var(--surface-tint); border:1px dashed var(--line); border-radius:var(--radius-card); padding:32px; text-align:center; color:var(--ink-soft); }
  .blog-empty-lg{ padding:64px 32px; display:flex; flex-direction:column; align-items:center; gap:20px; }
  .blog-empty-lg p{ font-size:1.05rem; max-width:44ch; }

  /* ============ BLOG: HERO / LISTING ============ */
  .blog-hero{
    position:relative;
    background:radial-gradient(120% 140% at 82% -10%, var(--navy-panel) 0%, var(--navy) 45%, var(--navy-deep) 100%);
    color:var(--on-navy);
    padding:76px 0 64px;
  }
  .blog-hero .eyebrow{ color:var(--teal-bright); display:flex; align-items:center; gap:9px; margin-bottom:18px; }
  .blog-hero .eyebrow .diamond{ background:var(--teal-bright); }
  .blog-hero h1{ font-size:clamp(2rem, 3.8vw, 2.9rem); color:#fff; margin-bottom:16px; letter-spacing:-0.016em; }
  .blog-hero .lede{ font-size:1.05rem; line-height:1.65; color:var(--on-navy-soft); max-width:56ch; margin:0; }

  .blog-pagination{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
  .blog-pagination .page-numbers{
    display:inline-flex; align-items:center; justify-content:center;
    min-width:40px; height:40px; padding:0 12px;
    border:1.5px solid var(--line); border-radius:var(--radius-sm);
    text-decoration:none; font-size:0.88rem; font-weight:600; color:var(--ink-soft);
  }
  .blog-pagination .page-numbers.current{ background:var(--navy); border-color:var(--navy); color:#fff; }
  .blog-pagination .page-numbers:hover:not(.current){ border-color:var(--teal); color:var(--ink); }
  .blog-pagination .page-numbers.dots{ border-color:transparent; }

  /* ============ BLOG: SINGLE POST ============ */
  .post-hero{
    background:radial-gradient(120% 140% at 82% -10%, var(--navy-panel) 0%, var(--navy) 45%, var(--navy-deep) 100%);
    color:var(--on-navy);
    padding:64px 0 52px;
  }
  .post-back{ display:inline-block; text-decoration:none; font-size:0.85rem; font-weight:600; color:var(--teal-bright); margin-bottom:22px; }
  .post-back:hover{ color:#fff; }
  .post-hero .eyebrow{ color:var(--teal-bright); display:flex; align-items:center; gap:9px; margin-bottom:16px; }
  .post-hero .eyebrow .diamond{ background:var(--teal-bright); }
  .post-hero h1{ font-size:clamp(1.9rem, 3.6vw, 2.7rem); color:#fff; max-width:26ch; letter-spacing:-0.016em; }

  .post-featured-img{ margin-top:-40px; margin-bottom:0; position:relative; z-index:1; }
  .post-featured-img img{ width:100%; border-radius:var(--radius-card); box-shadow:var(--shadow-lg); }

  .post-content{ max-width:68ch; margin:0 auto; font-size:1.05rem; line-height:1.75; color:var(--ink); }
  .post-content > *:first-child{ margin-top:0; }
  .post-content h2{ font-size:1.5rem; margin:44px 0 18px; }
  .post-content h3{ font-size:1.2rem; margin:36px 0 14px; }
  .post-content p{ margin:0 0 22px; }
  .post-content ul, .post-content ol{ margin:0 0 22px; padding-left:1.4em; color:var(--ink); }
  .post-content li{ margin-bottom:8px; }
  .post-content a{ color:var(--teal); text-decoration:underline; text-decoration-color:color-mix(in srgb, var(--teal) 40%, transparent); text-underline-offset:3px; }
  .post-content a:hover{ text-decoration-color:var(--teal); }
  .post-content img{ border-radius:var(--radius-card); margin:8px 0 28px; }
  .post-content blockquote{
    margin:28px 0; padding:4px 0 4px 22px; border-left:3px solid var(--teal);
    font-family:"Zilla Slab", serif; font-style:italic; font-size:1.12rem; color:var(--ink-soft);
  }
  .post-content code{ background:var(--surface-tint); padding:2px 6px; border-radius:4px; font-size:0.9em; }
  .post-content pre{ background:var(--navy-deep); color:var(--on-navy); padding:18px 20px; border-radius:var(--radius-card); overflow-x:auto; margin:0 0 22px; }
  .post-content pre code{ background:none; padding:0; color:inherit; }

  .post-cta{
    max-width:68ch; margin:56px auto 0; padding:36px 32px; text-align:center;
    background:var(--surface-tint); border:1px solid var(--line); border-radius:var(--radius-card);
  }
  .post-cta h3{ font-size:1.25rem; margin-bottom:10px; }
  .post-cta p{ color:var(--ink-soft); margin:0 0 22px; }

  @media (max-width:640px){
    .blog-card-thumb{ margin:-32px -24px 4px; }
    .post-featured-img{ margin-top:0; }
    .post-content{ font-size:1rem; }
  }