/* =========================================================
   SOLID — Plumbing & Gas
   Concept: premium home-services brand. Deep ink neutrals,
   ONE confident teal-green accent (trust + water, not literal),
   oversized editorial Fraunces display + clean Hanken Grotesk.
   ========================================================= */

:root {
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.85rem);
  --text-sm: clamp(0.875rem, 0.82rem + 0.3vw, 0.95rem);
  --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --text-lg: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.3vw, 2.125rem);
  --text-2xl: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
  --text-3xl: clamp(2.75rem, 1.5rem + 5vw, 5.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;

  --radius-sm: .5rem; --radius-md: .75rem; --radius-lg: 1.25rem; --radius-xl: 1.75rem; --radius-full: 9999px;
  --transition: 220ms cubic-bezier(.16,1,.3,1);
  --content: 1140px;

  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Hanken Grotesk', 'Helvetica Neue', sans-serif;
}

/* LIGHT */
:root, [data-theme="light"] {
  --color-bg: #f6f5f1;          /* warm paper */
  --color-surface: #ffffff;
  --color-surface-2: #faf9f6;
  --color-offset: #edebe4;
  --color-border: #e0ddd4;

  --color-text: #181a18;
  --color-text-muted: #5f6360;
  --color-text-faint: #a2a59f;
  --color-inverse: #f6f5f1;

  --color-ink: #14201c;          /* dark section bg */
  --color-ink-text: #e8eae6;
  --color-ink-muted: #9aa49f;
  --color-ink-border: #2a3a34;

  --color-accent: #0f8f6f;       /* teal-green */
  --color-accent-hover: #0c7a5e;
  --color-accent-soft: #d6ece4;

  --shadow-sm: 0 1px 2px rgba(20,32,28,.05);
  --shadow-md: 0 10px 30px rgba(20,32,28,.08);
  --shadow-lg: 0 24px 60px rgba(20,32,28,.14);
}

/* DARK */
[data-theme="dark"] {
  --color-bg: #0f1311;
  --color-surface: #161b18;
  --color-surface-2: #1a201d;
  --color-offset: #1d2421;
  --color-border: #29302c;

  --color-text: #e9ebe7;
  --color-text-muted: #9aa39d;
  --color-text-faint: #666d68;
  --color-inverse: #0f1311;

  --color-ink: #0a0f0d;
  --color-ink-text: #e8eae6;
  --color-ink-muted: #8b958f;
  --color-ink-border: #222b27;

  --color-accent: #2bb88f;
  --color-accent-hover: #45c79f;
  --color-accent-soft: #15302a;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 10px 30px rgba(0,0,0,.5);
  --shadow-lg: 0 24px 60px rgba(0,0,0,.6);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg:#0f1311; --color-surface:#161b18; --color-surface-2:#1a201d; --color-offset:#1d2421;
    --color-border:#29302c; --color-text:#e9ebe7; --color-text-muted:#9aa39d; --color-text-faint:#666d68;
    --color-ink:#0a0f0d; --color-accent:#2bb88f; --color-accent-hover:#45c79f; --color-accent-soft:#15302a;
  }
}

/* ---------- 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:90px; }
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,svg { display:block; max-width:100%; height:auto; }
ul[role="list"] { list-style:none; }
input,button,textarea,select { font:inherit; color:inherit; }
button { cursor:pointer; background:none; border:none; }
a { color:inherit; text-decoration:none; }
h1,h2,h3,h4 { line-height:1.05; font-family:var(--font-display); font-weight:600; letter-spacing:-.02em; text-wrap:balance; }
p { text-wrap:pretty; }
em { font-style:italic; }
::selection { background:var(--color-accent-soft); color:var(--color-text); }
:focus-visible { outline:2px solid var(--color-accent); outline-offset:3px; border-radius:var(--radius-sm); }
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
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; }

.container { width:100%; max-width:var(--content); margin-inline:auto; padding-inline:var(--space-6); }

/* ---------- BUTTONS ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2); padding:var(--space-3) var(--space-5); border-radius:var(--radius-full); font-weight:600; font-size:var(--text-sm); border:1.5px solid transparent; white-space:nowrap; }
.btn--lg { padding:var(--space-4) var(--space-8); font-size:var(--text-base); }
.btn--block { width:100%; }
.btn--solid { background:var(--color-text); color:var(--color-inverse); }
.btn--solid:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); }
.btn--accent { background:var(--color-accent); color:#fff; }
.btn--accent:hover { background:var(--color-accent-hover); transform:translateY(-2px); box-shadow:var(--shadow-md); }
.btn--outline { background:transparent; border-color:var(--color-border); color:var(--color-text); }
.btn--outline:hover { border-color:var(--color-text); transform:translateY(-2px); }

/* ---------- HEADER ---------- */
.header { position:sticky; top:0; z-index:60; background:color-mix(in oklab,var(--color-bg) 86%,transparent); backdrop-filter:blur(14px); border-bottom:1px solid transparent; }
.header--scrolled { border-bottom-color:var(--color-border); }
.header__inner { display:flex; align-items:center; gap:var(--space-6); height:74px; }
.logo { display:inline-flex; align-items:center; gap:var(--space-3); color:var(--color-text); }
.logo__brand { height:44px; width:auto; object-fit:contain; display:block; }
.logo__brand--footer { height:36px; }
.logo__mark { color:var(--color-text); flex-shrink:0; }
.logo__word { font-family:var(--font-display); font-weight:600; font-size:1.45rem; letter-spacing:-.03em; }
.logo__dot { color:var(--color-accent); }
.nav { display:flex; gap:var(--space-6); margin-left:auto; font-size:var(--text-sm); font-weight:500; }
.nav a { color:var(--color-text-muted); }
.nav a:hover { color:var(--color-text); }
.header__actions { display:flex; align-items:center; gap:var(--space-3); }
.icon-btn { width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center; border-radius:var(--radius-full); color:var(--color-text-muted); border:1px solid var(--color-border); }
.icon-btn:hover { color:var(--color-text); background:var(--color-offset); }
@media (max-width:880px){ .nav{display:none} .header__call span{display:none} .header__call{padding:var(--space-3)} }

/* ---------- HERO ---------- */
.hero { padding-top:clamp(var(--space-16),9vw,var(--space-32)); padding-bottom:var(--space-12); }
.hero__inner { max-width:900px; }
.badge { display:inline-flex; align-items:center; gap:var(--space-2); padding:var(--space-2) var(--space-4); border-radius:var(--radius-full); background:var(--color-surface); border:1px solid var(--color-border); font-size:var(--text-xs); font-weight:500; color:var(--color-text-muted); box-shadow:var(--shadow-sm); }
.badge__dot { width:8px; height:8px; border-radius:50%; background:var(--color-accent); box-shadow:0 0 0 4px var(--color-accent-soft); }
.hero__title { font-size:var(--text-3xl); font-weight:600; margin-top:var(--space-6); letter-spacing:-.035em; }
.hero__title em { color:var(--color-accent); font-style:italic; font-weight:500; }
.hero__title .amp { font-style:italic; font-weight:400; padding-inline:.12em; }
.hero__lead { font-size:var(--text-lg); color:var(--color-text-muted); max-width:60ch; margin-top:var(--space-6); }
.hero__cta { display:flex; flex-wrap:wrap; gap:var(--space-4); margin-top:var(--space-8); }

/* stats */
.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-4); margin-top:clamp(var(--space-12),7vw,var(--space-20)); padding-top:var(--space-8); border-top:1px solid var(--color-border); }
.stats__item dt { font-family:var(--font-display); font-size:var(--text-xl); font-weight:600; letter-spacing:-.02em; }
.stats__item dd { font-size:var(--text-sm); color:var(--color-text-muted); margin-top:var(--space-1); }
@media (max-width:680px){ .stats{grid-template-columns:repeat(2,1fr); gap:var(--space-8) var(--space-4)} }

/* ---------- SECTIONS ---------- */
.section { padding-block:clamp(var(--space-16),9vw,var(--space-24)); }
.section__head { max-width:760px; margin-bottom:clamp(var(--space-10),5vw,var(--space-16)); }
.eyebrow { display:inline-block; font-size:var(--text-xs); font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--color-text-faint); margin-bottom:var(--space-4); }
.eyebrow--accent { color:var(--color-accent); }
.section__title { font-size:var(--text-2xl); font-weight:600; letter-spacing:-.025em; }

/* ---------- SERVICES (editorial list) ---------- */
.svc-list { display:grid; }
.svc { display:flex; align-items:flex-start; gap:var(--space-6); padding-block:var(--space-8); border-top:1px solid var(--color-border); }
.svc:last-child { border-bottom:1px solid var(--color-border); }
.svc__no { font-family:var(--font-display); font-size:var(--text-lg); color:var(--color-text-faint); font-weight:500; min-width:2.5ch; }
.svc__body { flex:1; }
.svc__body h3 { font-size:var(--text-xl); margin-bottom:var(--space-2); transition:color var(--transition); }
.svc__body p { color:var(--color-text-muted); max-width:62ch; }
.svc__pill { align-self:center; font-size:var(--text-xs); font-weight:700; letter-spacing:.06em; color:var(--color-accent); border:1px solid var(--color-accent); padding:var(--space-1) var(--space-3); border-radius:var(--radius-full); }
.svc:hover { background:var(--color-surface); }
.svc:hover .svc__body h3 { color:var(--color-accent); }
.svc { padding-inline:var(--space-4); margin-inline:calc(var(--space-4)*-1); border-radius:var(--radius-md); transition:background var(--transition); }
@media (max-width:560px){ .svc{flex-wrap:wrap; gap:var(--space-2) var(--space-4)} .svc__pill{order:3} }

/* ---------- APPROACH (ink) ---------- */
.section--ink { background:var(--color-ink); color:var(--color-ink-text); }
.section--ink .section__title { color:var(--color-ink-text); }
.approach__layout { display:grid; grid-template-columns:1fr 1fr; gap:clamp(var(--space-10),6vw,var(--space-20)); align-items:start; }
.approach__intro p { color:var(--color-ink-muted); margin-top:var(--space-5); max-width:44ch; }
.approach__cta { margin-top:var(--space-8); }
.steps { display:grid; gap:var(--space-6); }
.step { background:color-mix(in oklab,var(--color-ink-text) 4%,transparent); border:1px solid var(--color-ink-border); border-radius:var(--radius-lg); padding:var(--space-6) var(--space-8); position:relative; }
.step__no { position:absolute; top:var(--space-6); right:var(--space-8); font-family:var(--font-display); font-size:var(--text-2xl); color:var(--color-accent); opacity:.5; }
.step h3 { font-size:var(--text-lg); margin-bottom:var(--space-2); color:var(--color-ink-text); }
.step p { color:var(--color-ink-muted); font-size:var(--text-sm); max-width:48ch; }
@media (max-width:820px){ .approach__layout{grid-template-columns:1fr} }

/* ---------- REVIEWS ---------- */
.rev-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-5); }
.rev { background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:var(--space-8); display:flex; flex-direction:column; }
.rev:hover { box-shadow:var(--shadow-md); transform:translateY(-3px); }
.rev__stars { color:var(--color-accent); letter-spacing:2px; margin-bottom:var(--space-4); }
.rev blockquote { font-family:var(--font-display); font-size:var(--text-lg); font-weight:400; line-height:1.4; letter-spacing:-.01em; }
.rev figcaption { margin-top:var(--space-6); font-size:var(--text-sm); color:var(--color-text-muted); }
.rev figcaption strong { color:var(--color-text); }
@media (max-width:880px){ .rev-grid{grid-template-columns:1fr} }

/* ---------- BOOKING ---------- */
.section--book { background:var(--color-offset); }
.book__layout { display:grid; grid-template-columns:1fr 1fr; gap:clamp(var(--space-10),6vw,var(--space-16)); align-items:start; }
.book__pitch p { color:var(--color-text-muted); margin-top:var(--space-4); max-width:44ch; }
.book__perks { margin-top:var(--space-6); display:grid; gap:var(--space-3); }
.book__perks li { position:relative; padding-left:var(--space-6); font-size:var(--text-sm); }
.book__perks li::before { content:""; position:absolute; left:0; top:.55em; width:8px; height:8px; border-radius:50%; background:var(--color-accent); }
.book__or { margin-top:var(--space-8); padding-top:var(--space-6); border-top:1px solid var(--color-border); }
.book__or span { display:block; font-size:var(--text-sm); color:var(--color-text-muted); margin-bottom:var(--space-1); }
.book__phone { font-family:var(--font-display); font-size:var(--text-xl); font-weight:600; color:var(--color-text); }
.book__phone:hover { color:var(--color-accent); }

.book__form { background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-xl); padding:clamp(var(--space-6),3vw,var(--space-8)); box-shadow:var(--shadow-md); }
.field { margin-bottom:var(--space-4); }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-4); }
.field label { display:block; font-size:var(--text-sm); font-weight:600; margin-bottom:var(--space-2); }
.field label span { color:var(--color-text-faint); font-weight:400; }
.field input,.field select,.field textarea { width:100%; padding:var(--space-3) var(--space-4); border-radius:var(--radius-md); border:1px solid var(--color-border); 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-accent); box-shadow:0 0 0 3px var(--color-accent-soft); }
.field textarea { resize:vertical; }
.book__fineprint { font-size:var(--text-xs); color:var(--color-text-faint); margin-top:var(--space-3); text-align:center; }
.book__success { margin-top:var(--space-4); padding:var(--space-4); border-radius:var(--radius-md); background:var(--color-accent-soft); border:1px solid var(--color-accent); font-size:var(--text-sm); }
.book__success a { color:var(--color-accent-hover); font-weight:600; }
@media (max-width:820px){ .book__layout{grid-template-columns:1fr; gap:var(--space-10)} }

/* ---------- FOOTER ---------- */
.footer { background:var(--color-ink); color:var(--color-ink-muted); padding-top:clamp(var(--space-12),6vw,var(--space-20)); }
.footer__inner { display:grid; grid-template-columns:2fr 1fr 1fr; gap:var(--space-10); padding-bottom:var(--space-12); }
.logo--footer { color:var(--color-ink-text); }
.logo--footer .logo__mark, .logo--footer svg { color:var(--color-ink-text); }
.footer__brand p { margin-top:var(--space-4); font-size:var(--text-sm); max-width:34ch; }
.footer__col h4 { font-family:var(--font-body); color:var(--color-ink-text); font-size:var(--text-sm); text-transform:uppercase; letter-spacing:.1em; margin-bottom:var(--space-4); }
.footer__col a,.footer__col span { display:block; font-size:var(--text-sm); margin-bottom:var(--space-2); }
.footer__col a:hover { color:var(--color-ink-text); }
.footer__bottom { display:flex; justify-content:space-between; flex-wrap:wrap; gap:var(--space-3); padding-block:var(--space-6); border-top:1px solid var(--color-ink-border); font-size:var(--text-xs); }
@media (max-width:720px){ .footer__inner{grid-template-columns:1fr 1fr} }
@media (max-width:460px){ .footer__inner{grid-template-columns:1fr} }

/* ---------- STICKY CALL BAR ---------- */
.callbar { position:fixed; bottom:0; left:0; right:0; z-index:70; display:none; gap:var(--space-3); padding:var(--space-3); background:color-mix(in oklab,var(--color-surface) 92%,transparent); backdrop-filter:blur(14px); border-top:1px solid var(--color-border); }
.callbar a { flex:1; display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2); padding:var(--space-4); border-radius:var(--radius-full); font-weight:600; font-size:var(--text-sm); }
.callbar__call { background:var(--color-text); color:var(--color-inverse); }
.callbar__book { background:var(--color-accent); color:#fff; }
@media (max-width:880px){ .callbar{display:flex} body{padding-bottom:78px} }