/* ============ Andrew's Landscaping — Design System ============
   Art direction: earthy, premium outdoor-living brand.
   Deep forest green primary + warm stone/sand neutrals.
   Typography: Fraunces (display serif) + Plus Jakarta Sans (body).
================================================================ */

:root, [data-theme="light"] {
  /* Surfaces — warm stone/sand */
  --color-bg: #f6f4ee;
  --color-surface: #fbfaf6;
  --color-surface-2: #ffffff;
  --color-surface-offset: #efece3;
  --color-surface-dynamic: #e7e3d7;
  --color-divider: #ddd8ca;
  --color-border: #d0cabb;

  /* Text — deep charcoal-green */
  --color-text: #1f2a22;
  --color-text-muted: #5f6b61;
  --color-text-faint: #9aa398;
  --color-text-inverse: #f8f6ef;

  /* Primary — forest green */
  --color-primary: #2f6b3f;
  --color-primary-hover: #245532;
  --color-primary-active: #1a3e25;
  --color-primary-soft: #e3ecdf;

  /* Accent — warm terracotta/gold for highlights */
  --color-accent: #c17a2f;
  --color-accent-hover: #a5641f;

  --radius-sm: 0.375rem;
  --radius-md: 0.625rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 9999px;

  --transition: 200ms cubic-bezier(0.16, 1, 0.3, 1);

  --shadow-sm: 0 1px 3px rgba(31,42,34,0.08);
  --shadow-md: 0 6px 20px rgba(31,42,34,0.10);
  --shadow-lg: 0 18px 44px rgba(31,42,34,0.16);

  --content-narrow: 680px;
  --content-default: 1040px;
  --content-wide: 1280px;

  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Plus Jakarta Sans', 'Helvetica Neue', system-ui, sans-serif;

  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.85rem);
  --text-sm: clamp(0.875rem, 0.82rem + 0.25vw, 0.95rem);
  --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.075rem);
  --text-lg: clamp(1.15rem, 1rem + 0.6vw, 1.4rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.2vw, 2.15rem);
  --text-2xl: clamp(2.1rem, 1.4rem + 2.6vw, 3.4rem);
  --text-hero: clamp(2.6rem, 1.4rem + 4.6vw, 5rem);

  --space-1:.25rem; --space-2:.5rem; --space-3:.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;
}

[data-theme="dark"] {
  --color-bg: #141814;
  --color-surface: #1a201a;
  --color-surface-2: #1f261f;
  --color-surface-offset: #1c221c;
  --color-surface-dynamic: #29312a;
  --color-divider: #2a322b;
  --color-border: #38423a;
  --color-text: #e4e6df;
  --color-text-muted: #97a094;
  --color-text-faint: #636d62;
  --color-text-inverse: #141814;
  --color-primary: #5fa06e;
  --color-primary-hover: #74b382;
  --color-primary-active: #4a8a58;
  --color-primary-soft: #23302650;
  --color-accent: #e0a05a;
  --color-accent-hover: #eab074;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
  --shadow-md: 0 6px 20px rgba(0,0,0,0.4);
  --shadow-lg: 0 18px 44px rgba(0,0,0,0.5);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg:#141814; --color-surface:#1a201a; --color-surface-2:#1f261f;
    --color-surface-offset:#1c221c; --color-surface-dynamic:#29312a;
    --color-divider:#2a322b; --color-border:#38423a; --color-text:#e4e6df;
    --color-text-muted:#97a094; --color-text-faint:#636d62; --color-text-inverse:#141814;
    --color-primary:#5fa06e; --color-primary-hover:#74b382; --color-primary-active:#4a8a58;
    --color-primary-soft:#23302650; --color-accent:#e0a05a; --color-accent-hover:#eab074;
  }
}

/* ============ 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);overflow-x:hidden}
img,picture,video,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{font-family:var(--font-display);line-height:1.1;text-wrap:balance;font-weight:600;letter-spacing:-0.01em}
p{text-wrap:pretty}
a{color:inherit;text-decoration:none}
button{cursor:pointer;background:none;border:none}
::selection{background:var(--color-primary-soft);color:var(--color-text)}
:focus-visible{outline:2px solid var(--color-primary);outline-offset:3px;border-radius:var(--radius-sm)}
a,button,input,textarea,select{transition:color var(--transition),background var(--transition),border-color var(--transition),box-shadow var(--transition),transform var(--transition)}
.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}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* ============ Layout helpers ============ */
.container{width:100%;max-width:var(--content-wide);margin-inline:auto;padding-inline:clamp(1.25rem,4vw,2.5rem)}
.container-narrow{max-width:var(--content-default)}
.section{padding-block:clamp(var(--space-16),8vw,var(--space-32))}
.section-sm{padding-block:clamp(var(--space-12),5vw,var(--space-20))}
.eyebrow{font-family:var(--font-body);font-size:var(--text-sm);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--color-primary);display:inline-flex;align-items:center;gap:.6rem}
.eyebrow::before{content:"";width:1.75rem;height:2px;background:var(--color-accent);border-radius:2px}
[data-theme=dark] .eyebrow{color:var(--color-primary)}
.section-title{font-size:var(--text-2xl);margin-block:var(--space-4) var(--space-5);max-width:20ch}
.lead{font-size:var(--text-lg);color:var(--color-text-muted);max-width:56ch;line-height:1.55}

/* ============ Buttons ============ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;font-family:var(--font-body);font-weight:600;font-size:var(--text-sm);padding:.85rem 1.6rem;border-radius:var(--radius-full);white-space:nowrap;line-height:1}
.btn-primary{background:var(--color-primary);color:#fff;box-shadow:var(--shadow-sm)}
.btn-primary:hover{background:var(--color-primary-hover);transform:translateY(-2px);box-shadow:var(--shadow-md)}
[data-theme=dark] .btn-primary{color:var(--color-text-inverse)}
.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);transform:translateY(-2px)}
.btn-white{background:#fff;color:var(--color-primary)}
.btn-white:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.btn-lg{padding:1.05rem 2rem;font-size:var(--text-base)}

/* ============ Header ============ */
.header{position:sticky;top:0;z-index:50;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-divider);box-shadow:var(--shadow-sm)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);height:4.5rem}
.brand{display:flex;align-items:center;gap:.6rem;font-family:var(--font-display);font-weight:600;font-size:1.25rem;color:var(--color-text);letter-spacing:-0.02em}
.brand svg{color:var(--color-primary);flex-shrink:0}
.nav-links{display:flex;align-items:center;gap:var(--space-6);list-style:none}
.nav-links a{font-size:var(--text-sm);font-weight:500;color:var(--color-text-muted)}
.nav-links a:hover,.nav-links a.active{color:var(--color-primary)}
.nav-actions{display:flex;align-items:center;gap:var(--space-3)}
.theme-toggle{width:2.4rem;height:2.4rem;display:grid;place-items:center;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-phone{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;font-size:var(--text-sm);color:var(--color-primary)}
.menu-btn{display:none;width:2.6rem;height:2.6rem;place-items:center;color:var(--color-text)}
.mobile-menu{display:none}

@media (max-width:860px){
  .nav-links,.nav-phone,.nav-actions .btn-primary,.nav-actions .theme-toggle{display:none}
  .menu-btn{display:grid}
  .mobile-menu{display:block;position:fixed;inset:4.5rem 0 auto 0;background:var(--color-surface);border-bottom:1px solid var(--color-divider);padding:var(--space-6);transform:translateY(-120%);transition:transform var(--transition);z-index:49;box-shadow:var(--shadow-lg)}
  .mobile-menu.open{transform:translateY(0)}
  .mobile-menu ul{list-style:none;display:flex;flex-direction:column;gap:var(--space-2)}
  .mobile-menu a{display:block;padding:.85rem 0;font-size:var(--text-lg);font-weight:500;border-bottom:1px solid var(--color-divider)}
  .mobile-menu .btn{margin-top:var(--space-4);width:100%}
}

/* ============ Hero ============ */
.hero{position:relative;min-height:88vh;display:flex;align-items:center;color:#fff;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:-2}
.hero-bg img{width:100%;height:100%;object-fit:cover}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,rgba(20,30,22,.86) 0%,rgba(20,30,22,.62) 45%,rgba(20,30,22,.28) 100%)}
.hero-inner{position:relative;z-index:1;padding-block:var(--space-24);max-width:44rem}
.hero h1{font-size:var(--text-hero);color:#fff;line-height:1.02;margin-bottom:var(--space-5)}
.hero h1 em{font-style:italic;color:#e9c48f}
.hero-sub{font-size:var(--text-lg);color:rgba(255,255,255,.9);max-width:40ch;margin-bottom:var(--space-8)}
.hero-cta{display:flex;flex-wrap:wrap;gap:var(--space-4);align-items:center}
.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 rgba(255,255,255,.2)}
.hero-trust .stat{display:flex;flex-direction:column}
.hero-trust .num{font-family:var(--font-display);font-size:var(--text-xl);font-weight:600;color:#fff;line-height:1}
.hero-trust .lbl{font-size:var(--text-xs);color:rgba(255,255,255,.75);text-transform:uppercase;letter-spacing:.08em;margin-top:.35rem}

/* ============ Trust bar ============ */
.trustbar{background:var(--color-primary);color:#fff}
.trustbar .container{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-6) var(--space-12);padding-block:var(--space-5);text-align:center}
.trustbar .item{display:inline-flex;align-items:center;gap:.6rem;font-size:var(--text-sm);font-weight:600}
[data-theme=dark] .trustbar{color:var(--color-text-inverse)}

/* ============ Services grid ============ */
.grid{display:grid;gap:var(--space-6)}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.svc-card{background:var(--color-surface);border:1px solid var(--color-divider);border-radius:var(--radius-lg);overflow:hidden;display:flex;flex-direction:column;transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition)}
.svc-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:var(--color-primary)}
.svc-card .img{aspect-ratio:4/3;overflow:hidden;background:var(--color-surface-dynamic)}
.svc-card .img img{width:100%;height:100%;object-fit:cover;transition:transform 500ms cubic-bezier(0.16,1,0.3,1)}
.svc-card:hover .img img{transform:scale(1.06)}
.svc-card .body{padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-3);flex:1}
.svc-card h3{font-size:var(--text-lg)}
.svc-card p{font-size:var(--text-sm);color:var(--color-text-muted);flex:1}
.svc-card .more{font-size:var(--text-sm);font-weight:700;color:var(--color-primary);display:inline-flex;align-items:center;gap:.4rem}
.svc-card:hover .more{gap:.7rem}

/* ============ Feature/alternating ============ */
.feature{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.feature.reverse .feature-media{order:2}
.feature-media{border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-lg);aspect-ratio:5/4}
.feature-media img{width:100%;height:100%;object-fit:cover}
.feature ul{list-style:none;display:flex;flex-direction:column;gap:var(--space-3);margin-top:var(--space-5)}
.feature li{display:flex;gap:.7rem;font-size:var(--text-base);color:var(--color-text-muted)}
.feature li svg{color:var(--color-primary);flex-shrink:0;margin-top:.2rem}
@media (max-width:820px){.feature{grid-template-columns:1fr}.feature.reverse .feature-media{order:0}}

/* ============ Gallery ============ */
.gallery-grid{columns:3;column-gap:var(--space-4)}
.gallery-grid figure{break-inside:avoid;margin-bottom:var(--space-4);border-radius:var(--radius-md);overflow:hidden;position:relative;box-shadow:var(--shadow-sm)}
.gallery-grid img{width:100%;transition:transform 500ms}
.gallery-grid figure:hover img{transform:scale(1.05)}
.gallery-grid figcaption{position:absolute;left:0;right:0;bottom:0;padding:1.4rem .9rem .7rem;font-size:var(--text-xs);font-weight:600;color:#fff;background:linear-gradient(transparent,rgba(20,30,22,.8));opacity:0;transition:opacity var(--transition)}
.gallery-grid figure:hover figcaption{opacity:1}
@media (max-width:900px){.gallery-grid{columns:2}}
@media (max-width:520px){.gallery-grid{columns:1}}

/* ============ Testimonials ============ */
.tcard{background:var(--color-surface);border:1px solid var(--color-divider);border-radius:var(--radius-lg);padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-4)}
.tcard .stars{color:var(--color-accent);display:flex;gap:.15rem}
.tcard blockquote{font-size:var(--text-base);color:var(--color-text);line-height:1.6}
.tcard .who{display:flex;align-items:center;gap:.75rem;margin-top:auto}
.tcard .avatar{width:2.6rem;height:2.6rem;border-radius:var(--radius-full);background:var(--color-primary);color:#fff;display:grid;place-items:center;font-weight:700;font-family:var(--font-display)}
.tcard .who .name{font-weight:700;font-size:var(--text-sm)}
.tcard .who .loc{font-size:var(--text-xs);color:var(--color-text-muted)}

/* ============ CTA band ============ */
.cta-band{position:relative;color:#fff;overflow:hidden;border-radius:var(--radius-xl)}
.cta-band-bg{position:absolute;inset:0;z-index:-2}
.cta-band-bg img{width:100%;height:100%;object-fit:cover}
.cta-band-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(26,62,37,.92),rgba(26,62,37,.72))}
.cta-band .inner{position:relative;z-index:1;padding:clamp(2.5rem,6vw,4.5rem);text-align:center;display:flex;flex-direction:column;align-items:center;gap:var(--space-5)}
.cta-band h2{font-size:var(--text-2xl);color:#fff}
.cta-band p{color:rgba(255,255,255,.9);max-width:48ch}
.cta-band .hero-cta{justify-content:center}

/* ============ Contact / form ============ */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem)}
@media (max-width:820px){.contact-grid{grid-template-columns:1fr}}
.contact-info{display:flex;flex-direction:column;gap:var(--space-5)}
.info-row{display:flex;gap:var(--space-4);align-items:flex-start}
.info-row .ic{width:2.8rem;height:2.8rem;border-radius:var(--radius-md);background:var(--color-primary-soft);color:var(--color-primary);display:grid;place-items:center;flex-shrink:0}
[data-theme=dark] .info-row .ic{background:var(--color-surface-dynamic)}
.info-row .label{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-faint);font-weight:700}
.info-row .val{font-size:var(--text-lg);font-weight:600;color:var(--color-text)}
.info-row a.val:hover{color:var(--color-primary)}
form.quote{background:var(--color-surface);border:1px solid var(--color-divider);border-radius:var(--radius-lg);padding:clamp(1.5rem,4vw,2.5rem);display:flex;flex-direction:column;gap:var(--space-4)}
.field{display:flex;flex-direction:column;gap:.4rem}
.field label{font-size:var(--text-sm);font-weight:600}
.field input,.field select,.field textarea{padding:.8rem 1rem;border:1.5px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface-2);font-size:var(--text-sm)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-soft)}
.field textarea{resize:vertical;min-height:110px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
@media (max-width:520px){.form-row{grid-template-columns:1fr}}
.form-note{font-size:var(--text-xs);color:var(--color-text-faint);text-align:center}
.form-success{display:none;background:var(--color-primary-soft);color:var(--color-primary-active);padding:var(--space-4);border-radius:var(--radius-md);font-weight:600;font-size:var(--text-sm);text-align:center}

/* ============ Page hero (interior) ============ */
.page-hero{background:var(--color-surface-offset);border-bottom:1px solid var(--color-divider);padding-block:clamp(3rem,7vw,5rem)}
.page-hero h1{font-size:var(--text-2xl);margin-block:var(--space-3)}
.page-hero p{font-size:var(--text-lg);color:var(--color-text-muted);max-width:60ch}
.breadcrumb{font-size:var(--text-xs);color:var(--color-text-faint);text-transform:uppercase;letter-spacing:.08em;font-weight:600}
.breadcrumb a:hover{color:var(--color-primary)}

/* ============ Service detail ============ */
.svc-detail{display:grid;grid-template-columns:1.3fr .7fr;gap:clamp(2rem,5vw,4rem);align-items:start}
@media (max-width:900px){.svc-detail{grid-template-columns:1fr}}
.svc-detail-main h2{font-size:var(--text-xl);margin-top:var(--space-8);margin-bottom:var(--space-3)}
.svc-detail-main p{color:var(--color-text-muted);margin-bottom:var(--space-4)}
.svc-detail-main ul{margin:var(--space-4) 0;padding-left:0;list-style:none;display:grid;gap:var(--space-3)}
.svc-detail-main ul li{display:flex;gap:.6rem;color:var(--color-text-muted)}
.svc-detail-main ul li svg{color:var(--color-primary);flex-shrink:0;margin-top:.25rem}
.svc-sidebar{position:sticky;top:6rem;background:var(--color-surface);border:1px solid var(--color-divider);border-radius:var(--radius-lg);padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-4)}
.svc-sidebar h3{font-size:var(--text-lg)}
.svc-list{list-style:none;display:flex;flex-direction:column;gap:.2rem}
.svc-list a{display:block;padding:.6rem .8rem;border-radius:var(--radius-sm);font-size:var(--text-sm);font-weight:500;color:var(--color-text-muted)}
.svc-list a:hover,.svc-list a.active{background:var(--color-primary-soft);color:var(--color-primary)}
[data-theme=dark] .svc-list a:hover,[data-theme=dark] .svc-list a.active{background:var(--color-surface-dynamic)}

/* ============ Footer ============ */
.footer{background:#16201a;color:#c9d2c9;padding-block:var(--space-16) var(--space-8);margin-top:var(--space-8)}
.footer a{color:#c9d2c9}
.footer a:hover{color:#fff}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:var(--space-8)}
@media (max-width:820px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.footer-grid{grid-template-columns:1fr}}
.footer .brand{color:#fff;margin-bottom:var(--space-4)}
.footer .brand svg{color:#7dc08c}
.footer h4{font-family:var(--font-body);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.1em;color:#7f8c7f;margin-bottom:var(--space-4);font-weight:700}
.footer ul{list-style:none;display:flex;flex-direction:column;gap:var(--space-2)}
.footer ul a{font-size:var(--text-sm)}
.footer .desc{font-size:var(--text-sm);color:#9aa89a;max-width:34ch;line-height:1.6}
.footer .foot-phone{font-family:var(--font-display);font-size:var(--text-lg);color:#fff;font-weight:600;margin-top:var(--space-2)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:var(--space-12);padding-top:var(--space-6);display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-3);font-size:var(--text-xs);color:#7f8c7f}

/* reveal on scroll */
.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}

/* ============ Google review badge ============ */
.gbadge{display:inline-flex;align-items:center;gap:.75rem;background:var(--color-surface);border:1px solid var(--color-divider);border-radius:var(--radius-full);padding:.55rem 1.1rem .55rem .9rem;box-shadow:var(--shadow-sm);transition:transform var(--transition),box-shadow var(--transition)}
.gbadge:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.gbadge-txt{display:flex;flex-direction:column;line-height:1.15;font-size:var(--text-sm)}
.gbadge-txt strong{font-family:var(--font-display);font-size:1.15rem;color:var(--color-text)}
.gbadge .stars{color:var(--color-accent);display:inline-flex;gap:.05rem;margin:.1rem 0}
.gbadge-sub{font-size:var(--text-xs);color:var(--color-text-muted)}

/* ============ Map embed ============ */
.map-embed{border:0;width:100%;height:100%;min-height:340px;border-radius:var(--radius-lg);filter:grayscale(0.1)}
.map-wrap{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md);border:1px solid var(--color-divider)}

/* ============ Reviews page grid ============ */
.reviews-masonry{columns:3;column-gap:var(--space-6)}
.reviews-masonry .tcard{break-inside:avoid;margin-bottom:var(--space-6)}
@media (max-width:900px){.reviews-masonry{columns:2}}
@media (max-width:600px){.reviews-masonry{columns:1}}

/* ============ Chips / service area tags ============ */
.chips{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:var(--space-5)}
.chip{display:inline-flex;align-items:center;gap:.4rem;padding:.45rem .9rem;border-radius:var(--radius-full);background:var(--color-primary-soft);color:var(--color-primary);font-size:var(--text-sm);font-weight:600}
[data-theme=dark] .chip{background:var(--color-surface-dynamic)}

/* ============ Stat cards ============ */
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--space-4);margin-top:var(--space-8)}
.stat-card{background:var(--color-surface);border:1px solid var(--color-divider);border-radius:var(--radius-lg);padding:var(--space-6);text-align:center}
.stat-card .big{font-family:var(--font-display);font-size:var(--text-xl);color:var(--color-primary);font-weight:600;line-height:1}
.stat-card .cap{font-size:var(--text-xs);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.06em;margin-top:.5rem}