/* ===== ZAV AGENCY — Design System ===== */
:root {
  /* Type scale */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);

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

  /* Brand palette (ZAV) — light */
  --color-bg: #ffffff;
  --color-surface: #f4f7f8;
  --color-surface-2: #eaf1f2;
  --color-border: #d9e2e5;
  --color-ink: #0b1b2b;
  --color-text: #0b1b2b;
  --color-text-muted: #4a5b66;
  --color-text-faint: #8a9aa3;
  --color-text-inverse: #ffffff;
  --color-primary: #0a5c6b;
  --color-primary-hover: #084853;
  --color-primary-hi: #0c7a8c;
  --color-accent: #f5a623;
  --color-accent-hover: #e3960f;

  --radius-sm: 0.375rem; --radius-md: 0.5rem; --radius-lg: 0.875rem; --radius-xl: 1.25rem; --radius-full: 9999px;
  --transition: 200ms cubic-bezier(0.16,1,0.3,1);
  --shadow-sm: 0 1px 3px rgba(11,27,43,.08);
  --shadow-md: 0 8px 24px rgba(11,27,43,.10);
  --shadow-lg: 0 24px 60px rgba(11,27,43,.16);
  --content-wide: 1200px;
  --content-default: 960px;
  --content-narrow: 640px;

  --font-display: 'Cabinet Grotesk','Satoshi',-apple-system,'Segoe UI',sans-serif;
  --font-body: 'Satoshi','Inter',-apple-system,'Segoe UI',sans-serif;
}
[data-theme="dark"] {
  --color-bg: #0b1620;
  --color-surface: #10222c;
  --color-surface-2: #16303c;
  --color-border: #24404c;
  --color-text: #e4edf0;
  --color-text-muted: #a9bcc4;
  --color-text-faint: #6d828c;
  --color-text-inverse: #06131b;
  --color-primary: #38b0c0;
  --color-primary-hover: #55c2d0;
  --color-primary-hi: #55c2d0;
  --color-accent: #f5a623;
  --color-accent-hover: #ffb63f;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.4);
  --shadow-md: 0 8px 24px rgba(0,0,0,.45);
  --shadow-lg: 0 24px 60px rgba(0,0,0,.55);
}

/* ===== Base ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;scroll-behavior:smooth;scroll-padding-top:5rem}
body{min-height:100dvh;line-height:1.6;font-family:var(--font-body);font-size:var(--text-base);color:var(--color-text);background:var(--color-bg);transition:background var(--transition),color var(--transition)}
img,picture,svg{display:block;max-width:100%;height:auto}
ul[role=list]{list-style:none}
input,button,textarea,select{font:inherit;color:inherit}
h1,h2,h3,h4{text-wrap:balance;line-height:1.1;font-family:var(--font-display);font-weight:700;letter-spacing:-0.02em;color:var(--color-ink)}
[data-theme="dark"] h1,[data-theme="dark"] h2,[data-theme="dark"] h3,[data-theme="dark"] h4{color:var(--color-text)}
p{text-wrap:pretty}
a{color:inherit;text-decoration:none;transition:color var(--transition)}
button{cursor:pointer;background:none;border:none}
:focus-visible{outline:2px solid var(--color-primary);outline-offset:3px;border-radius:var(--radius-sm)}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}

/* ===== Layout ===== */
.container{width:100%;max-width:var(--content-wide);margin-inline:auto;padding-inline:var(--space-6)}
.section{padding-block:clamp(var(--space-16),8vw,var(--space-32))}
.eyebrow{display:inline-flex;align-items:center;gap:var(--space-2);font-family:var(--font-body);font-size:var(--text-xs);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--color-primary)}
.eyebrow::before{content:"";width:24px;height:2px;background:var(--color-accent);border-radius:2px}

/* ===== Buttons ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);font-family:var(--font-body);font-weight:600;font-size:var(--text-sm);padding:0.85em 1.5em;border-radius:var(--radius-full);transition:all var(--transition);white-space:nowrap;line-height:1}
.btn-primary{background:var(--color-accent);color:#0b1b2b;box-shadow:var(--shadow-sm)}
.btn-primary:hover{background:var(--color-accent-hover);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.btn-ghost{background:transparent;color:var(--color-text);border:1.5px solid var(--color-border)}
.btn-ghost:hover{border-color:var(--color-primary);color:var(--color-primary)}
.btn-teal{background:var(--color-primary);color:#fff}
.btn-teal:hover{background:var(--color-primary-hover);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.btn svg{width:1.1em;height:1.1em}

/* ===== Header ===== */
.header{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--color-bg) 88%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:border-color var(--transition),box-shadow var(--transition)}
.header--scrolled{border-color:var(--color-border);box-shadow:var(--shadow-sm)}
.nav{display:flex;align-items:center;gap:var(--space-8);height:5rem}
.brand{display:flex;align-items:center;gap:var(--space-3);flex-shrink:0}
.brand .logo{height:38px;width:auto}
.brand-name{font-family:var(--font-display);font-weight:700;font-size:1.35rem;letter-spacing:-0.02em;color:var(--color-ink)}
[data-theme="dark"] .brand-name{color:var(--color-text)}
.brand-name span{color:var(--color-primary)}
.nav-links{display:flex;align-items:center;gap:var(--space-6);margin-left:auto;font-size:var(--text-sm);font-weight:500}
.nav-links a{color:var(--color-text-muted);position:relative;padding-block:0.25rem}
.nav-links a:hover{color:var(--color-primary)}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:2px;background:var(--color-accent);transition:width var(--transition)}
.nav-links a:hover::after{width:100%}
.nav-actions{display:flex;align-items:center;gap:var(--space-3)}
.theme-toggle{display:grid;place-items:center;width:40px;height:40px;border-radius:var(--radius-full);color:var(--color-text-muted);border:1px solid var(--color-border)}
.theme-toggle:hover{color:var(--color-primary);border-color:var(--color-primary)}
.nav-call{display:inline-flex;align-items:center;gap:var(--space-2);font-weight:700;color:var(--color-ink);font-size:var(--text-sm)}
[data-theme="dark"] .nav-call{color:var(--color-text)}
.nav-call:hover{color:var(--color-primary)}
.nav-call svg{width:1.05em;height:1.05em;color:var(--color-primary)}
.burger{display:none;flex-direction:column;gap:5px;width:40px;height:40px;justify-content:center;align-items:center;border-radius:var(--radius-md)}
.burger span{display:block;width:22px;height:2px;background:var(--color-ink);border-radius:2px;transition:all var(--transition)}
[data-theme="dark"] .burger span{background:var(--color-text)}

/* ===== Mobile nav ===== */
.mobile-menu{position:fixed;inset:5rem 0 auto 0;background:var(--color-bg);border-bottom:1px solid var(--color-border);padding:var(--space-6);display:none;flex-direction:column;gap:var(--space-4);z-index:59;box-shadow:var(--shadow-lg)}
.mobile-menu.open{display:flex}
.mobile-menu a{font-size:var(--text-lg);font-weight:600;color:var(--color-text)}
.mobile-menu .btn{margin-top:var(--space-2)}

/* ===== Hero ===== */
.hero{position:relative;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.05fr 0.95fr;gap:var(--space-12);align-items:center;padding-block:clamp(var(--space-16),7vw,var(--space-24))}
.hero-title{font-size:var(--text-2xl);margin-block:var(--space-4) var(--space-5);color:var(--color-ink)}
[data-theme="dark"] .hero-title{color:var(--color-text)}
.hero-title em{font-style:normal;color:var(--color-primary)}
.hero-sub{font-size:var(--text-lg);color:var(--color-text-muted);max-width:46ch;margin-bottom:var(--space-8)}
.hero-cta{display:flex;flex-wrap:wrap;gap:var(--space-4)}
.hero-trust{display:flex;flex-wrap:wrap;gap:var(--space-6);margin-top:var(--space-10);padding-top:var(--space-8);border-top:1px solid var(--color-border)}
.trust-item{display:flex;flex-direction:column}
.trust-item strong{font-family:var(--font-display);font-size:var(--text-xl);color:var(--color-primary);line-height:1}
.trust-item span{font-size:var(--text-xs);color:var(--color-text-muted);margin-top:var(--space-1)}
.hero-media{position:relative}
.hero-media img{border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);width:100%;aspect-ratio:4/3.1;object-fit:cover}
.hero-badge{position:absolute;bottom:-1.5rem;left:-1.5rem;background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-4) var(--space-5);box-shadow:var(--shadow-md);display:flex;align-items:center;gap:var(--space-3)}
.hero-badge .ic{display:grid;place-items:center;width:42px;height:42px;border-radius:var(--radius-full);background:color-mix(in srgb,var(--color-primary) 14%,transparent);color:var(--color-primary)}
.hero-badge .ic svg{width:22px;height:22px}
.hero-badge strong{display:block;font-family:var(--font-display);font-size:var(--text-base);color:var(--color-ink)}
[data-theme="dark"] .hero-badge strong{color:var(--color-text)}
.hero-badge span{font-size:var(--text-xs);color:var(--color-text-muted)}

/* ===== Carrier strip ===== */
.carriers{background:var(--color-surface);border-block:1px solid var(--color-border)}
.carriers .container{padding-block:var(--space-8);display:flex;align-items:center;gap:var(--space-8);flex-wrap:wrap;justify-content:center}
.carriers p{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.12em;font-weight:600;color:var(--color-text-faint)}
.carrier-names{display:flex;flex-wrap:wrap;gap:var(--space-6) var(--space-8);align-items:center}
.carrier-names span{font-family:var(--font-display);font-weight:700;font-size:var(--text-lg);color:var(--color-text-faint);opacity:.85}

/* ===== Section heading ===== */
.sec-head{max-width:var(--content-narrow);margin-bottom:var(--space-12)}
.sec-head.center{margin-inline:auto;text-align:center}
.sec-head h2{font-size:var(--text-xl);margin-block:var(--space-3) var(--space-4)}
.sec-head p{color:var(--color-text-muted);font-size:var(--text-lg)}

/* ===== Services ===== */
.svc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-6)}
.svc-card{position:relative;border:1px solid var(--color-border);border-radius:var(--radius-xl);overflow:hidden;background:var(--color-bg);transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition);display:flex;flex-direction:column}
.svc-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--color-primary)}
.svc-card img{width:100%;aspect-ratio:16/10;object-fit:cover}
.svc-body{padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-3);flex:1}
.svc-body h3{font-size:var(--text-lg)}
.svc-body p{color:var(--color-text-muted);font-size:var(--text-sm);flex:1}
.svc-tag{display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--text-xs);font-weight:600;color:var(--color-primary);text-transform:uppercase;letter-spacing:.08em}
.svc-link{display:inline-flex;align-items:center;gap:var(--space-2);font-weight:600;font-size:var(--text-sm);color:var(--color-primary);margin-top:auto}
.svc-link svg{width:1.05em;height:1.05em;transition:transform var(--transition)}
.svc-card:hover .svc-link svg{transform:translateX(4px)}

/* ===== Why / Value ===== */
.why{background:var(--color-surface)}
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6)}
.why-card{background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-8)}
.why-card .ic{display:grid;place-items:center;width:52px;height:52px;border-radius:var(--radius-md);background:color-mix(in srgb,var(--color-primary) 12%,transparent);color:var(--color-primary);margin-bottom:var(--space-5)}
.why-card .ic svg{width:26px;height:26px}
.why-card h3{font-size:var(--text-lg);margin-bottom:var(--space-2)}
.why-card p{color:var(--color-text-muted);font-size:var(--text-sm)}

/* ===== Steps ===== */
.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-8)}
.step{position:relative}
.step-num{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:700;color:var(--color-accent);line-height:1}
.step h3{font-size:var(--text-lg);margin-block:var(--space-3) var(--space-2)}
.step p{color:var(--color-text-muted);font-size:var(--text-sm)}

/* ===== CTA band ===== */
.cta-band{background:linear-gradient(135deg,var(--color-primary),var(--color-primary-hi));color:#fff;border-radius:var(--radius-xl);padding:clamp(var(--space-10),5vw,var(--space-20));text-align:center;position:relative;overflow:hidden}
.cta-band h2{color:#fff;font-size:var(--text-xl);margin-bottom:var(--space-3)}
.cta-band p{color:rgba(255,255,255,.85);max-width:48ch;margin-inline:auto;margin-bottom:var(--space-8)}
.cta-band .hero-cta{justify-content:center}
.cta-band .btn-ghost{color:#fff;border-color:rgba(255,255,255,.4)}
.cta-band .btn-ghost:hover{border-color:#fff;color:#fff;background:rgba(255,255,255,.12)}

/* ===== Contact / Quote form ===== */
.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:var(--space-12);align-items:start}
.contact-info h2{font-size:var(--text-xl);margin-bottom:var(--space-4)}
.contact-info p{color:var(--color-text-muted);margin-bottom:var(--space-8)}
.contact-list{display:flex;flex-direction:column;gap:var(--space-5)}
.contact-list li{display:flex;gap:var(--space-4);align-items:flex-start}
.contact-list .ic{flex-shrink:0;display:grid;place-items:center;width:44px;height:44px;border-radius:var(--radius-md);background:color-mix(in srgb,var(--color-primary) 12%,transparent);color:var(--color-primary)}
.contact-list .ic svg{width:22px;height:22px}
.contact-list strong{display:block;font-family:var(--font-display);color:var(--color-ink);font-size:var(--text-base)}
[data-theme="dark"] .contact-list strong{color:var(--color-text)}
.contact-list a,.contact-list span{color:var(--color-text-muted);font-size:var(--text-sm)}
.contact-list a:hover{color:var(--color-primary)}

.form-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:clamp(var(--space-6),3vw,var(--space-10));box-shadow:var(--shadow-sm)}
.form-card h3{font-size:var(--text-lg);margin-bottom:var(--space-2)}
.form-card>p{color:var(--color-text-muted);font-size:var(--text-sm);margin-bottom:var(--space-6)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
.field{display:flex;flex-direction:column;gap:var(--space-2);margin-bottom:var(--space-4)}
.field label{font-size:var(--text-xs);font-weight:600;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.06em}
.field input,.field select,.field textarea{padding:0.75rem 0.9rem;border:1.5px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-bg);font-size:var(--text-sm);transition:border-color var(--transition),box-shadow var(--transition)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 18%,transparent)}
.form-card .btn{width:100%;margin-top:var(--space-2);padding-block:1em}
.form-note{font-size:var(--text-xs);color:var(--color-text-faint);margin-top:var(--space-4);text-align:center}
.form-success{display:none;text-align:center;padding:var(--space-8) 0}
.form-success.show{display:block}
.form-success .ic{display:grid;place-items:center;width:64px;height:64px;border-radius:var(--radius-full);background:color-mix(in srgb,#2e9e5b 16%,transparent);color:#2e9e5b;margin:0 auto var(--space-4)}
.form-success h3{margin-bottom:var(--space-2)}
.form-success p{color:var(--color-text-muted)}

/* ===== Footer ===== */
.footer{background:var(--color-ink);color:#c7d4db;padding-block:var(--space-16) var(--space-8)}
[data-theme="dark"] .footer{background:#06121a}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:var(--space-8);padding-bottom:var(--space-12);border-bottom:1px solid rgba(255,255,255,.1)}
.footer .brand-name{color:#fff}
.footer h4{color:#fff;font-family:var(--font-display);font-size:var(--text-sm);text-transform:uppercase;letter-spacing:.1em;margin-bottom:var(--space-4)}
.footer-col p{font-size:var(--text-sm);color:#9fb0b9;margin-block:var(--space-4)}
.footer-col ul{display:flex;flex-direction:column;gap:var(--space-3);font-size:var(--text-sm)}
.footer-col a{color:#9fb0b9}
.footer-col a:hover{color:#fff}
.footer-social{display:flex;gap:var(--space-3);margin-top:var(--space-5)}
.footer-social a{display:grid;place-items:center;width:40px;height:40px;border-radius:var(--radius-full);border:1px solid rgba(255,255,255,.18);color:#c7d4db}
.footer-social a:hover{background:var(--color-primary);border-color:var(--color-primary);color:#fff}
.footer-social svg{width:20px;height:20px}
.footer-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--space-4);padding-top:var(--space-8);font-size:var(--text-xs);color:#7d9099}
.footer-bottom a{color:#9fb0b9}
.footer-bottom a:hover{color:#fff}

/* ===== Sticky mobile bar ===== */
.mobile-bar{position:fixed;bottom:0;left:0;right:0;z-index:70;display:none;grid-template-columns:1fr 1fr;gap:1px;background:var(--color-border);box-shadow:0 -4px 20px rgba(11,27,43,.15)}
.mobile-bar a{display:flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-4);font-weight:700;font-size:var(--text-sm)}
.mobile-bar .call{background:var(--color-bg);color:var(--color-primary)}
.mobile-bar .quote{background:var(--color-accent);color:#0b1b2b}
.mobile-bar svg{width:1.1em;height:1.1em}

/* ===== Reveal animation ===== */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(0.16,1,0.3,1),transform .7s cubic-bezier(0.16,1,0.3,1)}
.reveal.in{opacity:1;transform:none}

/* ===== Responsive ===== */
@media (max-width:960px){
  .hero-grid{grid-template-columns:1fr;gap:var(--space-16)}
  .hero-media{order:-1}
  .contact-grid{grid-template-columns:1fr;gap:var(--space-10)}
  .why-grid,.steps-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .nav-links,.nav-call{display:none}
  .burger{display:flex}
  .svc-grid{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .mobile-bar{display:grid}
  body{padding-bottom:60px}
  .hero-badge{left:1rem;bottom:1rem}
}

/* ===== Carrier wall (wordmarks) ===== */
.carriers .container{flex-direction:column;gap:var(--space-6)}
.carrier-wall{display:flex;flex-wrap:wrap;gap:var(--space-3) var(--space-4);align-items:center;justify-content:center;max-width:var(--content-default)}
.carrier-chip{font-family:var(--font-display);font-weight:700;font-size:var(--text-sm);letter-spacing:-0.01em;color:var(--color-text-muted);background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-full);padding:0.5rem 1rem;transition:all var(--transition)}
.carrier-chip:hover{color:var(--color-primary);border-color:var(--color-primary);transform:translateY(-2px)}

/* ===== Specialty / subaccount links ===== */
.specialty-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6)}
.specialty-card{display:flex;flex-direction:column;gap:var(--space-3);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-8);transition:all var(--transition)}
.specialty-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--color-primary)}
.specialty-card h3{font-size:var(--text-lg)}
.specialty-card p{color:var(--color-text-muted);font-size:var(--text-sm);flex:1}
.specialty-link{display:inline-flex;align-items:center;gap:var(--space-2);font-weight:600;font-size:var(--text-sm);color:var(--color-primary);margin-top:auto}
.specialty-link svg{width:1.05em;height:1.05em;transition:transform var(--transition)}
.specialty-card:hover .specialty-link svg{transform:translateX(4px)}
.coverage-area{margin-top:var(--space-10);padding:var(--space-6) var(--space-8);background:color-mix(in srgb,var(--color-primary) 6%,transparent);border:1px solid var(--color-border);border-radius:var(--radius-lg);font-size:var(--text-base);color:var(--color-text-muted);text-align:center}
.coverage-area strong{color:var(--color-ink)}
[data-theme="dark"] .coverage-area strong{color:var(--color-text)}
.coverage-area em{font-style:normal;font-weight:600;color:var(--color-primary)}

/* ===== Sub-page hero / breadcrumbs ===== */
.page-hero{background:var(--color-surface);border-bottom:1px solid var(--color-border);padding-block:clamp(var(--space-12),6vw,var(--space-20))}
.crumbs{display:flex;gap:var(--space-2);align-items:center;font-size:var(--text-xs);color:var(--color-text-faint);margin-bottom:var(--space-4);flex-wrap:wrap}
.crumbs a{color:var(--color-text-muted)}
.crumbs a:hover{color:var(--color-primary)}
.crumbs span{color:var(--color-text-faint)}
.page-title{font-size:var(--text-2xl);color:var(--color-ink);max-width:20ch}
[data-theme="dark"] .page-title{color:var(--color-text)}
.page-lead{font-size:var(--text-lg);color:var(--color-text-muted);max-width:60ch;margin-top:var(--space-4)}

/* ===== Form pages ===== */
.form-section-title{font-family:var(--font-display);font-weight:700;font-size:var(--text-base);color:var(--color-ink);margin-block:var(--space-6) var(--space-4);padding-bottom:var(--space-2);border-bottom:1px solid var(--color-border)}
[data-theme="dark"] .form-section-title{color:var(--color-text)}
.form-section-title:first-of-type{margin-top:0}
.form-card.wide{max-width:var(--content-default);margin-inline:auto}
.check-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-3);margin-bottom:var(--space-4)}
.check{display:flex;align-items:flex-start;gap:var(--space-3);padding:0.75rem 0.9rem;border:1.5px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-bg);cursor:pointer;transition:all var(--transition);font-size:var(--text-sm)}
.check:hover{border-color:var(--color-primary)}
.check input{width:18px;height:18px;flex-shrink:0;margin-top:2px;accent-color:var(--color-primary)}
.check:has(input:checked){border-color:var(--color-primary);background:color-mix(in srgb,var(--color-primary) 8%,transparent)}
.form-intro{color:var(--color-text-muted);font-size:var(--text-base);max-width:65ch;margin-bottom:var(--space-8)}

/* ===== Blog ===== */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-8)}
.post-card{display:flex;flex-direction:column;border:1px solid var(--color-border);border-radius:var(--radius-xl);overflow:hidden;background:var(--color-bg);transition:all var(--transition)}
.post-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--color-primary)}
.post-card .thumb{aspect-ratio:16/10;overflow:hidden}
.post-card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform 500ms cubic-bezier(0.16,1,0.3,1)}
.post-card:hover .thumb img{transform:scale(1.05)}
.post-body{padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-3);flex:1}
.post-meta{display:flex;gap:var(--space-3);align-items:center;font-size:var(--text-xs);color:var(--color-text-faint)}
.post-cat{font-weight:600;color:var(--color-primary);text-transform:uppercase;letter-spacing:.06em}
.post-card h3{font-size:var(--text-lg);line-height:1.25}
.post-card p{color:var(--color-text-muted);font-size:var(--text-sm);flex:1}
.post-byline{font-size:var(--text-xs);color:var(--color-text-faint);margin-top:auto}
.post-byline strong{color:var(--color-text-muted);font-weight:600}
.blog-filters{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-bottom:var(--space-10)}
.blog-filter{font-size:var(--text-sm);font-weight:600;padding:0.5rem 1rem;border-radius:var(--radius-full);border:1.5px solid var(--color-border);color:var(--color-text-muted);transition:all var(--transition)}
.blog-filter:hover{border-color:var(--color-primary);color:var(--color-primary)}
.blog-filter.active{background:var(--color-primary);border-color:var(--color-primary);color:#fff}

/* ===== Article ===== */
.article-wrap{max-width:760px;margin-inline:auto}
.article-hero{aspect-ratio:16/8;border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-md);margin-bottom:var(--space-10)}
.article-hero img{width:100%;height:100%;object-fit:cover}
.article-body{font-size:var(--text-lg);line-height:1.75;color:var(--color-text)}
.article-body p{margin-bottom:var(--space-6)}
.article-body h2{font-size:var(--text-xl);margin-block:var(--space-10) var(--space-4)}
.article-body h3{font-size:var(--text-lg);margin-block:var(--space-8) var(--space-3)}
.article-body ul,.article-body ol{margin-bottom:var(--space-6);padding-left:var(--space-6);display:flex;flex-direction:column;gap:var(--space-2)}
.article-body li{color:var(--color-text)}
.article-body strong{color:var(--color-ink);font-weight:700}
[data-theme="dark"] .article-body strong{color:var(--color-text)}
.article-body a{color:var(--color-primary);text-decoration:underline;text-underline-offset:2px}
.article-body a:hover{color:var(--color-primary-hover)}
.article-meta{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center;font-size:var(--text-sm);color:var(--color-text-muted);margin-bottom:var(--space-8)}
.article-meta .dot{width:4px;height:4px;border-radius:50%;background:var(--color-text-faint)}
.article-author{display:flex;align-items:center;gap:var(--space-3);margin-top:var(--space-12);padding-top:var(--space-8);border-top:1px solid var(--color-border)}
.article-author .avatar{display:grid;place-items:center;width:52px;height:52px;border-radius:var(--radius-full);background:var(--color-primary);color:#fff;font-family:var(--font-display);font-weight:700;font-size:var(--text-lg);flex-shrink:0}
.article-author strong{display:block;font-family:var(--font-display);color:var(--color-ink)}
[data-theme="dark"] .article-author strong{color:var(--color-text)}
.article-author span{font-size:var(--text-sm);color:var(--color-text-muted)}
.article-cta{margin-top:var(--space-12);background:linear-gradient(135deg,var(--color-primary),var(--color-primary-hi));color:#fff;border-radius:var(--radius-xl);padding:clamp(var(--space-8),4vw,var(--space-12));text-align:center}
.article-cta h3{color:#fff;font-size:var(--text-lg);margin-bottom:var(--space-3)}
.article-cta p{color:rgba(255,255,255,.9);margin-bottom:var(--space-6);max-width:46ch;margin-inline:auto}
.article-faq{margin-top:var(--space-12)}
.article-faq h2{font-size:var(--text-xl);margin-bottom:var(--space-6)}
.faq-item{border:1px solid var(--color-border);border-radius:var(--radius-lg);margin-bottom:var(--space-3);overflow:hidden}
.faq-item summary{padding:var(--space-5) var(--space-6);font-family:var(--font-display);font-weight:600;font-size:var(--text-base);color:var(--color-ink);cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:var(--space-4)}
[data-theme="dark"] .faq-item summary{color:var(--color-text)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-size:1.4em;color:var(--color-primary);transition:transform var(--transition)}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item .faq-body{padding:0 var(--space-6) var(--space-5);color:var(--color-text-muted);font-size:var(--text-base)}

/* ===== About placeholder ===== */
.about-placeholder{max-width:640px;margin-inline:auto;text-align:center;padding-block:var(--space-16)}
.about-placeholder .ic{display:grid;place-items:center;width:72px;height:72px;border-radius:var(--radius-full);background:color-mix(in srgb,var(--color-primary) 12%,transparent);color:var(--color-primary);margin:0 auto var(--space-6)}
.about-placeholder h1{font-size:var(--text-xl);margin-bottom:var(--space-4)}
.about-placeholder p{color:var(--color-text-muted);margin-bottom:var(--space-6)}

@media (max-width:960px){
  .specialty-grid,.blog-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .specialty-grid,.blog-grid{grid-template-columns:1fr}
  .check-grid{grid-template-columns:1fr}
  .article-body{font-size:var(--text-base)}
}