/* Pro Plumbers FL — production stylesheet
   Compiled from the Pro Plumbers FL Design System tokens + component specs. */

/* ---------- Fonts (self-hosted, latin subset) ---------- */
@font-face { font-family:'Barlow'; font-style:normal; font-weight:400; font-display:swap; src:url('assets/fonts/Barlow-400.woff2') format('woff2'); }
@font-face { font-family:'Barlow'; font-style:normal; font-weight:500; font-display:swap; src:url('assets/fonts/Barlow-500.woff2') format('woff2'); }
@font-face { font-family:'Barlow'; font-style:normal; font-weight:600; font-display:swap; src:url('assets/fonts/Barlow-600.woff2') format('woff2'); }
@font-face { font-family:'Barlow'; font-style:normal; font-weight:700; font-display:swap; src:url('assets/fonts/Barlow-700.woff2') format('woff2'); }
@font-face { font-family:'Barlow Condensed'; font-style:normal; font-weight:500; font-display:swap; src:url('assets/fonts/BarlowCondensed-500.woff2') format('woff2'); }
@font-face { font-family:'Barlow Condensed'; font-style:normal; font-weight:600; font-display:swap; src:url('assets/fonts/BarlowCondensed-600.woff2') format('woff2'); }
@font-face { font-family:'Barlow Condensed'; font-style:normal; font-weight:700; font-display:swap; src:url('assets/fonts/BarlowCondensed-700.woff2') format('woff2'); }

/* ---------- Tokens ---------- */
:root {
  --navy-950:#081420; --navy-900:#0D1F30; --navy-800:#12263A; --navy-700:#1B3A56; --navy-600:#26506F; --navy-500:#35688C;
  --gold-600:#D99A17; --gold-500:#F0B429; --gold-400:#F7C948; --gold-300:#FAD97A;
  --gold-700:#8A6100; /* WCAG AA text-on-light gold (>=4.5:1 on white/gray surfaces) */
  --wa-green:#25D366; --wa-green-dark:#1DA851; /* WhatsApp brand; navy-900 text = 8.4:1 / 5.4:1 AA */
  --white:#FFFFFF; --gray-50:#F5F7FA; --gray-100:#EBEFF3; --gray-200:#D9E0E7; --gray-400:#9AA9B7; --gray-500:#6E8090; --gray-600:#51626F; --ink:#14212C;
  --success:#2E7D4F; --danger:#B3402E;
  --surface-page:var(--white); --surface-alt:var(--gray-50); --surface-dark:var(--navy-800); --surface-darker:var(--navy-900); --surface-card:var(--white);
  --text-heading:var(--navy-900); --text-body:var(--ink); --text-muted:var(--gray-600); --text-on-dark:var(--white); --text-on-dark-muted:#B8C6D2; --text-on-gold:var(--navy-900);
  --accent:var(--gold-500); --accent-hover:var(--gold-400); --accent-pressed:var(--gold-600); --link:var(--navy-600);
  --border-subtle:var(--gray-200); --border-strong:var(--gray-400); --focus-ring:var(--gold-500);

  --font-display:'Barlow Condensed','Arial Narrow',sans-serif;
  --font-body:'Barlow','Helvetica Neue',sans-serif;
  --text-hero:64px; --text-h1:48px; --text-h2:36px; --text-h3:24px; --text-lg:19px; --text-md:17px; --text-sm:15px; --text-xs:13px;
  --leading-tight:1.05; --leading-snug:1.25; --leading-body:1.6;
  --tracking-label:0.08em; --weight-display:700; --weight-heading:600; --weight-body:400; --weight-medium:500; --weight-semibold:600;

  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px;
  --container-max:1160px; --container-pad:24px;
  --radius-sm:4px; --radius-md:8px; --radius-lg:12px;
  --shadow-card:0 1px 3px rgba(13,31,48,0.08), 0 4px 16px rgba(13,31,48,0.07);
  --shadow-raised:0 8px 32px rgba(13,31,48,0.16);
  --ease-out:cubic-bezier(0.2,0.6,0.2,1); --dur-fast:120ms; --dur-base:200ms;
}

/* ---------- Base ---------- */
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; font-family:var(--font-body); font-size:var(--text-md); line-height:var(--leading-body); color:var(--text-body); background:var(--surface-page); -webkit-font-smoothing:antialiased; }
h1,h2,h3,h4 { font-family:var(--font-display); color:var(--text-heading); line-height:var(--leading-tight); margin:0; text-wrap:balance; }
p { margin:0; text-wrap:pretty; }
a { color:var(--link); }
img { max-width:100%; display:block; }
:focus-visible { outline:2px solid var(--focus-ring); outline-offset:2px; }
button { font:inherit; }

/* ---------- Buttons ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--font-body); font-weight:600; text-decoration:none; white-space:nowrap; border:1.5px solid transparent; border-radius:var(--radius-md); cursor:pointer; transition:background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.btn:active { transform:translateY(1px); }
.btn-sm { padding:8px 16px; font-size:15px; min-height:36px; }
.btn-md { padding:12px 22px; font-size:16px; min-height:48px; }
.btn-lg { padding:14px 28px; font-size:18px; min-height:56px; }
.btn-primary { background:var(--gold-500); color:var(--navy-900); }
.btn-primary:hover { background:var(--gold-400); }
.btn-primary:active { background:var(--gold-600); }
.btn-secondary { background:transparent; color:var(--navy-800); border-color:var(--navy-800); }
.btn-secondary:hover { background:rgba(18,38,58,0.06); }
.btn-secondary.on-dark { color:var(--white); border-color:var(--white); }
.btn-secondary.on-dark:hover { background:rgba(255,255,255,0.10); }
.btn-whatsapp { background:var(--wa-green); color:var(--navy-900); border-color:transparent; }
.btn-whatsapp:hover { background:var(--wa-green-dark); color:var(--navy-900); }
.btn-whatsapp:active { background:var(--wa-green-dark); }
.btn-whatsapp .wa-ico { width:1.2em; height:1.2em; flex:none; }
.wa-link { color:var(--wa-green) !important; display:inline-flex; align-items:center; gap:6px; }
.wa-link .wa-ico { width:1em; height:1em; flex:none; }
.btn-ghost { background:transparent; color:var(--navy-800); }
.btn-ghost:hover { background:rgba(18,38,58,0.06); }
.btn-ghost.on-dark { color:var(--white); }
.btn-ghost.on-dark:hover { background:rgba(255,255,255,0.10); }

/* ---------- Badge ---------- */
.badge { display:inline-flex; align-items:center; gap:6px; font-family:var(--font-body); font-weight:600; font-size:13px; letter-spacing:0.04em; text-transform:uppercase; padding:5px 10px; border-radius:var(--radius-sm); white-space:nowrap; border:1px solid transparent; }
.badge-gold { background:var(--gold-500); color:var(--navy-900); }
.badge-navy { background:var(--navy-800); color:var(--white); }
.badge-outline { background:transparent; color:var(--text-muted); border-color:var(--border-strong); }
.badge-onDark { background:rgba(255,255,255,0.10); color:var(--white); border-color:rgba(255,255,255,0.18); }

/* ---------- Section heading ---------- */
.sh { display:flex; flex-direction:column; gap:10px; text-align:left; align-items:flex-start; }
.sh.center { text-align:center; align-items:center; }
.sh .sh-eyebrow { font-family:var(--font-body); font-weight:600; font-size:14px; letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--gold-700); }
.sh.on-dark .sh-eyebrow { color:var(--gold-400); }
.sh .sh-title { font-family:var(--font-display); font-weight:600; font-size:var(--text-h2); line-height:var(--leading-tight); margin:0; color:var(--text-heading); }
.sh .sh-title.h1 { font-size:var(--text-h1); }
.sh.on-dark .sh-title { color:var(--white); }
.sh .sh-lede { font-family:var(--font-body); font-size:var(--text-lg); line-height:1.55; margin:0; max-width:620px; color:var(--text-muted); }
.sh.on-dark .sh-lede { color:var(--text-on-dark-muted); }
@media (max-width:640px){ .sh .sh-title { font-size:clamp(28px,7vw,36px); } .sh .sh-title.h1 { font-size:clamp(32px,8vw,48px); } }

/* ---------- Photo placeholder ---------- */
.pp { border-radius:var(--radius-md); overflow:hidden; position:relative; background:repeating-linear-gradient(45deg, var(--gray-100), var(--gray-100) 12px, var(--gray-50) 12px, var(--gray-50) 24px); border:1px dashed var(--gray-400); display:flex; align-items:center; justify-content:center; }
.pp.dark { background:repeating-linear-gradient(45deg, var(--navy-900), var(--navy-900) 12px, var(--navy-800) 12px, var(--navy-800) 24px); border:none; }
.pp-inner { text-align:center; padding:16px; display:flex; flex-direction:column; gap:4px; align-items:center; }
.pp-label { font-family:var(--font-body); font-weight:600; font-size:12px; letter-spacing:0.06em; text-transform:uppercase; color:var(--gray-600); }
.pp.dark .pp-label { color:var(--text-on-dark-muted); }
.pp-note { font-family:var(--font-body); font-size:13px; line-height:1.4; color:var(--text-muted); max-width:220px; }
.pp.dark .pp-note { color:var(--text-on-dark-muted); }

/* ---------- Service card ---------- */
.svc-card { display:flex; flex-direction:column; text-decoration:none; background:var(--surface-card); border:1px solid var(--border-subtle); border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-card); transition:box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); }
.svc-card:hover { border-color:var(--border-strong); box-shadow:var(--shadow-raised); }
.svc-card .pp { border:none; border-bottom:1px solid var(--border-subtle); border-radius:0; }
.svc-card-body { display:flex; flex-direction:column; gap:8px; padding:18px 20px 20px; }
.svc-card-body h3 { font-family:var(--font-display); font-weight:600; font-size:24px; line-height:1.1; margin:0; color:var(--text-heading); }
.svc-card-body p { font-family:var(--font-body); font-size:15px; line-height:1.5; margin:0; color:var(--text-muted); }
.svc-card-more { font-family:var(--font-body); font-weight:600; font-size:15px; color:var(--gold-700); display:inline-flex; align-items:center; gap:6px; }
.svc-card-more .arr { transition:transform var(--dur-fast) var(--ease-out); }
.svc-card:hover .svc-card-more .arr { transform:translateX(3px); }

/* ---------- Trust strip ---------- */
.trust-strip { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px 0; padding:14px 24px; background:var(--navy-900); border-top:1px solid rgba(255,255,255,0.10); border-bottom:1px solid rgba(255,255,255,0.10); }
.trust-strip.light { background:var(--gray-50); border-top:1px solid var(--border-subtle); border-bottom:1px solid var(--border-subtle); }
.trust-strip .ts-item { font-family:var(--font-body); font-weight:600; font-size:14px; letter-spacing:0.06em; text-transform:uppercase; color:var(--white); white-space:nowrap; }
.trust-strip.light .ts-item { color:var(--navy-800); }
.trust-strip .ts-dot { color:var(--gold-500); margin:0 16px; font-weight:700; }

/* ---------- Site header ---------- */
.site-header { background:var(--navy-800); color:var(--white); position:sticky; top:0; z-index:50; }
.site-header .hdr-row { display:flex; align-items:center; gap:24px; padding:0 24px; height:72px; max-width:var(--container-max); margin:0 auto; }
.site-header .hdr-logo { flex:none; display:flex; align-items:center; text-decoration:none; }
.site-header .hdr-logo img { height:34px; width:auto; }
.site-header nav.hdr-nav { display:flex; gap:4px; flex:1; justify-content:center; min-width:0; }
.site-header nav.hdr-nav a { font-family:var(--font-body); font-weight:500; font-size:15px; color:var(--text-on-dark-muted); text-decoration:none; padding:8px 12px; border-radius:var(--radius-sm); white-space:nowrap; transition:color var(--dur-fast) var(--ease-out); }
.site-header nav.hdr-nav a:hover { color:var(--white); }
.site-header nav.hdr-nav a.active { color:var(--gold-400); }
.site-header .hdr-right { display:flex; align-items:center; gap:16px; justify-content:flex-end; }
.site-header .hdr-phone { font-family:var(--font-display); font-weight:700; font-size:22px; color:var(--white); text-decoration:none; letter-spacing:0.02em; white-space:nowrap; }
.site-header .hdr-call-m { display:none; }
.site-header .hdr-burger { display:none; }
.site-header .hdr-mobile-nav { display:none; }
@media (max-width:959px) {
  .site-header nav.hdr-nav, .site-header .hdr-phone, .site-header .hdr-call { display:none; }
  .site-header .hdr-right { flex:1 1 auto; }
  .site-header .hdr-call-m { display:flex; align-items:center; justify-content:center; height:44px; min-width:44px; padding:0 14px; border-radius:var(--radius-sm); background:var(--gold-500); color:var(--navy-900); text-decoration:none; font-family:var(--font-body); font-weight:700; font-size:14px; white-space:nowrap; }
  .site-header .hdr-burger { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; width:44px; height:44px; flex:none; background:transparent; border:1.5px solid rgba(255,255,255,0.35); border-radius:var(--radius-sm); cursor:pointer; padding:0; }
  .site-header .hdr-burger span { width:20px; height:2px; background:#fff; border-radius:2px; transition:transform var(--dur-base) var(--ease-out), opacity var(--dur-fast) var(--ease-out); }
  .site-header.menu-open .hdr-burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .site-header.menu-open .hdr-burger span:nth-child(2){ opacity:0; }
  .site-header.menu-open .hdr-burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
  .site-header.menu-open .hdr-mobile-nav { display:flex; flex-direction:column; padding:4px 12px 12px; border-top:1px solid rgba(255,255,255,0.12); }
  .site-header .hdr-mobile-nav a { padding:14px 12px; font-family:var(--font-body); font-weight:600; font-size:16px; color:var(--white); text-decoration:none; border-bottom:1px solid rgba(255,255,255,0.08); }
  .site-header .hdr-mobile-nav a.active { color:var(--gold-400); }
}

/* ---------- Footer ---------- */
.site-footer { background:var(--navy-900); color:var(--white); padding:48px 24px 24px; }
.site-footer .ft-grid { max-width:var(--container-max); margin:0 auto; display:grid; grid-template-columns:2fr 1fr 1fr; gap:32px; }
@media (max-width:760px){ .site-footer .ft-grid { grid-template-columns:1fr; } }
.site-footer .ft-brand { display:flex; flex-direction:column; gap:12px; }
.site-footer .ft-brand img { height:40px; width:auto; align-self:flex-start; }
.site-footer .ft-nap { margin:0; font-family:var(--font-body); font-size:15px; line-height:1.6; color:var(--text-on-dark-muted); }
.site-footer .ft-h { font-family:var(--font-body); font-weight:600; font-size:13px; letter-spacing:0.08em; text-transform:uppercase; color:var(--gold-400); }
.site-footer .ft-col { display:flex; flex-direction:column; gap:8px; }
.site-footer .ft-col a, .site-footer .ft-col span { font-family:var(--font-body); font-size:15px; color:var(--text-on-dark-muted); text-decoration:none; }
.site-footer .ft-col a:hover { color:var(--white); }
.site-footer .ft-areas { display:grid; grid-template-columns:1fr 1fr; gap:6px 16px; }
.site-footer .ft-areas a { font-family:var(--font-body); font-size:15px; color:var(--text-on-dark-muted); text-decoration:none; }
.site-footer .ft-areas a:hover { color:var(--white); }
.site-footer .ft-bottom { max-width:var(--container-max); margin:32px auto 0; padding-top:16px; border-top:1px solid rgba(255,255,255,0.10); font-family:var(--font-body); font-size:13px; color:var(--text-on-dark-muted); display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; }
.site-footer .ft-bottom a { color:var(--text-on-dark-muted); text-decoration:none; }
.site-footer .ft-bottom a:hover { color:var(--white); }

/* ---------- CTA band ---------- */
.cta-band { background:var(--navy-800); padding:64px 24px; text-align:center; }
.cta-band .cta-inner { max-width:720px; margin:0 auto; display:flex; flex-direction:column; align-items:center; gap:16px; }
.cta-band h2 { font-family:var(--font-display); font-weight:700; font-size:var(--text-h2); line-height:1.05; margin:0; color:var(--white); }
.cta-band .cta-lede { font-family:var(--font-body); font-size:18px; line-height:1.5; margin:0; color:var(--text-on-dark-muted); }
.cta-band .cta-btns { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:8px; }
.cta-band .cta-fine { font-family:var(--font-body); font-size:13px; margin:0; color:var(--text-on-dark-muted); }

/* ---------- FAQ (details/summary) ---------- */
.faq { display:flex; flex-direction:column; border:1px solid var(--border-subtle); border-radius:var(--radius-md); background:var(--white); overflow:hidden; }
.faq details { border-top:1px solid var(--border-subtle); }
.faq details:first-child { border-top:none; }
.faq summary { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 20px; min-height:56px; cursor:pointer; text-align:left; font-family:var(--font-body); font-weight:600; font-size:17px; color:var(--text-heading); list-style:none; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:''; width:10px; height:10px; flex:none; border-right:2px solid var(--gold-600); border-bottom:2px solid var(--gold-600); transform:rotate(45deg); transition:transform var(--dur-base) var(--ease-out); }
.faq details[open] summary::after { transform:rotate(-135deg) translate(-2px,-2px); }
.faq .faq-a { margin:0; padding:0 20px 18px; font-family:var(--font-body); font-size:16px; line-height:1.6; color:var(--text-muted); }

/* ---------- Timeline ---------- */
.timeline { display:flex; flex-direction:column; position:relative; padding-left:24px; }
.timeline::before { content:''; position:absolute; left:5px; top:8px; bottom:8px; width:2px; background:var(--gray-200); }
.tl-item { position:relative; padding-bottom:28px; }
.tl-item:last-child { padding-bottom:0; }
.tl-item::before { content:''; position:absolute; left:-24px; top:6px; width:12px; height:12px; border-radius:50%; background:var(--gold-500); border:2px solid var(--white); box-shadow:0 0 0 2px var(--gold-500); }
.tl-item .tl-year { font-family:var(--font-display); font-weight:700; font-size:26px; line-height:1; color:var(--navy-800); display:block; }
.tl-item .tl-title { font-family:var(--font-body); font-weight:600; font-size:17px; color:var(--text-heading); display:block; margin-top:4px; }
.tl-item .tl-detail { margin:4px 0 0; font-family:var(--font-body); font-size:15px; line-height:1.55; color:var(--text-muted); max-width:520px; }

/* ---------- Forms ---------- */
.field { display:flex; flex-direction:column; gap:6px; }
.field label { font-family:var(--font-body); font-weight:600; font-size:14px; color:var(--text-heading); }
.field label .req { color:var(--danger); }
.field input, .field select, .field textarea { font-family:var(--font-body); font-size:16px; color:var(--text-body); background:var(--white); border:1.5px solid var(--border-subtle); border-radius:var(--radius-sm); padding:12px 14px; min-height:48px; width:100%; }
.field textarea { min-height:110px; resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color:var(--navy-600); outline:2px solid var(--focus-ring); outline-offset:1px; }
.hp-field { position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }

/* ---------- Sticky mobile call button ---------- */
.sticky-call { display:none; }
@media (max-width:959px) {
  .sticky-call { position:fixed; right:16px; bottom:16px; z-index:60; display:flex; align-items:center; gap:8px; background:var(--gold-500); color:var(--navy-900); font-family:var(--font-body); font-weight:700; font-size:16px; padding:14px 20px; border-radius:999px; text-decoration:none; box-shadow:var(--shadow-raised); white-space:nowrap; }
}

/* ---------- Floating chat assistant button (off until PPCONFIG.aiAssistantWidget) ---------- */
.chat-fab { position:fixed; left:16px; bottom:16px; z-index:60; display:flex; align-items:center; gap:8px; background:var(--navy-800); color:var(--white); font-family:var(--font-body); font-weight:600; font-size:15px; padding:12px 18px; border-radius:999px; text-decoration:none; box-shadow:var(--shadow-raised); border:1px solid rgba(255,255,255,0.25); white-space:nowrap; }
.chat-fab:hover { background:var(--navy-700); }
@media (max-width:479px){ .chat-fab { font-size:13px; padding:10px 14px; } }

/* ---------- Filter chips (Work / Learning Center) ---------- */
.chip { font-family:var(--font-body); font-weight:600; font-size:14px; padding:8px 16px; border-radius:var(--radius-sm); cursor:pointer; border:1.5px solid var(--border-subtle); background:var(--white); color:var(--text-heading); transition:background var(--dur-fast) ease-out, color var(--dur-fast) ease-out, border-color var(--dur-fast) ease-out; }
.chip.active { border-color:var(--navy-800); background:var(--navy-800); color:var(--white); }

/* ---------- Legal pages ---------- */
.legal-prose { max-width:760px; margin:0 auto; font-family:var(--font-body); font-size:16px; line-height:1.7; color:var(--text-body); display:flex; flex-direction:column; gap:14px; }
.legal-prose h2 { font-family:var(--font-display); font-weight:600; font-size:26px; margin:18px 0 0; color:var(--text-heading); }
.legal-prose ul { margin:0; padding-left:22px; display:flex; flex-direction:column; gap:8px; }
.legal-prose a { color:var(--link); }
.legal-updated { font-size:14px; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.05em; font-weight:600; }
.legal-callout { border:1px solid var(--border-subtle); background:var(--gray-50); border-radius:var(--radius-sm); padding:12px 16px; font-size:18px; }
.form-consent { margin:0; font-family:var(--font-body); font-size:13px; line-height:1.5; color:var(--text-muted); }
.ft-legal a { color:var(--text-on-dark-muted); text-decoration:none; }
.ft-legal a:hover { color:var(--white); }

/* ---------- Utility ---------- */
.container { max-width:var(--container-max); margin:0 auto; padding:0 var(--container-pad); }
[hidden] { display:none !important; }
.visually-hidden { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.preview-note { background:var(--gold-300); color:var(--navy-900); font-family:var(--font-body); font-size:13px; font-weight:600; text-align:center; padding:6px 12px; }

/* generated hover states */
.sh-hov-1:hover { box-shadow:var(--shadow-raised); }
.sh-hov-2:hover { color:var(--gold-600); }
.sh-hov-3:hover { box-shadow:var(--shadow-card);border-color:var(--border-strong); }