/* =========================================================================
   KALOCKSCO — Handyman · Electrical · Remodeling
   styles.css  ·  Single source of truth for design tokens
   Rebrand the whole site by editing the :root variables below.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. DESIGN TOKENS
   ------------------------------------------------------------------------- */
:root {
  /* Brand palette ------------------------------------------------------- */
  /* --- Santa Monica palette, re-skinned: TEAL primary ----------------- */
  --sm-teal-1:        #0E7A80;   /* primary surface / headings            */
  --sm-teal-2:        #0B6065;   /* deeper teal — hero / CTA bands         */
  --sm-teal-3:        #084A4E;   /* deepest teal — footer                  */
  --sm-teal-br:       #2BC2C9;   /* bright teal — light tints              */
  --sm-orange:        #FB4D1A;   /* sun — accent + borders                 */
  --sm-orange-dark:   #DD3D0E;   /* orange hover / dark accent             */
  --sm-gold:          #F9B23A;   /* beach — YELLOW: buttons & highlights   */
  --sm-gold-dark:     #DD971C;   /* yellow hover                           */
  --sm-charcoal:      #333333;   /* logo wordmark — body text              */
  --klein:            #002FA7;   /* International Klein Blue — accent       */
  --klein-deep:       #001F7A;   /* darker IKB for gradients               */

  /* --- Semantic roles (every component references THESE) --------------- */
  --color-navy:        var(--sm-teal-1);      /* primary surface / heading */
  --color-navy-deep:   var(--sm-teal-2);      /* darker surface            */
  --color-navy-darker: var(--sm-teal-3);      /* deepest surface (footer)  */
  --color-amber:       var(--sm-orange);      /* accent + borders          */
  --color-amber-dark:  var(--sm-orange-dark); /* accent hover              */
  --color-teal:        var(--sm-teal-br);
  --color-teal-dark:   var(--sm-teal-1);
  --color-gold:        var(--sm-gold);        /* yellow: buttons/highlights*/
  --color-gold-dark:   var(--sm-gold-dark);
  --color-ink:         var(--sm-charcoal);    /* primary body text         */
  --color-muted:       #5B6573;   /* secondary text                        */
  --color-line:        #E3E7ED;   /* hairline borders                      */
  --color-surface:     #FFFFFF;   /* cards / panels                        */
  --color-bg:          #F1FAFB;   /* page background sections (teal tint)   */
  --color-bg-alt:      #E1F4F5;   /* alternating section background         */
  --color-success:     var(--sm-teal-1);      /* checkmarks / verified     */
  --color-star:        var(--sm-gold);        /* review stars (yellow)     */
  /* neutral + semantic UI colors (NOT part of the 4-colour brand palette) */
  --color-white:       #FFFFFF;   /* solid white — text on dark, field bg  */
  --ok-bg:             #E7F6EE;   --ok-fg:     #1C7C45;   /* success msg   */
  --err-bg:            #FCEBEA;   --err-fg:    #B3261E;   /* error msg     */
  --danger:            #B53A2C;   --danger-bg: #FCEAE8;   /* remove button */
  --tint-line:         #D4DAE3;   /* card hover border                     */
  --tint-cool:         #DDE6F2;   /* admin toggle hover                    */

  /* Typography ---------------------------------------------------------- */
  --font-head: "Poppins", "Segoe UI", Arial, sans-serif;
  --font-body: "Inter", "Segoe UI", Arial, sans-serif;

  /* --fs-hero cut 30%; every other text token cut 15% (2026-07-02 density pass) */
  --fs-hero:    clamp(1.47rem, 1.8vw + 0.7rem, 2.28rem);
  --fs-h2:      clamp(1.45rem, 2.1vw + 0.85rem, 2.21rem);
  --fs-h3:      clamp(0.98rem, 0.85vw + 0.77rem, 1.19rem);
  --fs-lead:    clamp(0.89rem, 0.5vw + 0.81rem, 1.06rem);
  --fs-body:    0.85rem;
  --fs-small:   0.74rem;

  /* Spacing & layout ---------------------------------------------------- */
  --space-section: clamp(3.5rem, 7vw, 6.5rem);
  --container:     1180px;
  --gutter:        clamp(1.1rem, 4vw, 2rem);
  --radius:        14px;
  --radius-sm:     9px;
  --radius-pill:   999px;

  /* Effects ------------------------------------------------------------- */
  --shadow-sm: 0 1px 3px rgba(20, 32, 50, 0.08);
  --shadow-md: 0 8px 26px rgba(20, 32, 50, 0.10);
  --shadow-lg: 0 18px 50px rgba(20, 32, 50, 0.16);
  --ring:      0 0 0 3px color-mix(in srgb, var(--sm-orange) 35%, transparent);

  /* Skin highlight trio for effects/glow — Beach Vibe = orange (flips per skin, §21) */
  --fx:        #FB4D1A;   /* main highlight                       */
  --fx-soft:   #FF8A5B;   /* lighter — glow text on dark surfaces */
  --fx-bright: #FFB48F;   /* brightest — hover                    */
  --fx-ink:    #3A1505;   /* dark text that sits on the highlight */

  --nav-h: 72px;
  --transition: 0.22s ease;
}

/* -------------------------------------------------------------------------
   2. RESET & BASE
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

/* scrollbar-gutter: stable reserves the scrollbar's width on every page, so
   navigating between a short page (no scrollbar) and a long one (scrollbar)
   doesn't shift the layout width — kills the sticky-header "shake". */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--color-ink);
  background: var(--color-surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { font-family: var(--font-head); line-height: 1.15; font-weight: 700; color: var(--color-navy); }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul { list-style: none; padding: 0; }
button { font-family: inherit; cursor: pointer; }

:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 6px; }

/* -------------------------------------------------------------------------
   3. LAYOUT HELPERS
   ------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--space-section); }
.section--alt { background: var(--color-bg); }
.section--navy { background: var(--color-navy); color: var(--color-white); }
.section--navy h2, .section--navy h3 { color: var(--color-white); }

.section-head { max-width: 680px; margin-inline: auto; text-align: center; margin-bottom: clamp(2rem, 4vw, 3rem); }
.section-head .eyebrow { color: var(--klein); }
.section-head h2 { font-size: var(--fs-h2); margin-top: 0.4rem; }
.section-head p { color: var(--color-muted); font-size: var(--fs-lead); margin-top: 0.8rem; }

.eyebrow {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fs-small);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* -------------------------------------------------------------------------
   4. BUTTONS
   ------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1rem;
  padding: 0.85rem 1.6rem;
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  transition: transform var(--transition), background var(--transition),
              box-shadow var(--transition), color var(--transition);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--color-gold); color: var(--color-navy); border-color: var(--sm-orange); box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--color-gold-dark); border-color: var(--sm-orange-dark); box-shadow: var(--shadow-md); }

.btn--ghost { background: transparent; color: var(--color-white); border-color: rgba(255,255,255,0.55); }
.btn--ghost:hover { background: rgba(255,255,255,0.12); border-color: var(--color-white); }

.btn--dark { background: var(--color-navy); color: var(--color-white); }
.btn--dark:hover { background: var(--color-navy-deep); }

.btn--lg { padding: 1.05rem 2rem; font-size: 1.08rem; }
.btn--block { width: 100%; }

.btn svg { width: 1.15em; height: 1.15em; }

/* -------------------------------------------------------------------------
   5. HEADER / NAV
   ------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,0.92);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: none;
  /* padding-bottom = stripe height (9px) + 5px gap below the pill button */
  padding: 14px 0 14px;
}
/* slim tricolor accent band along the header's bottom edge */
.site-header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 9px;
  background: var(--accent-stripe);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  /* positioning context for the open dropdown panels, so they anchor to THIS
     centered content column (i.e., under the hamburger) — not to the
     full-width header, which drifts away from the button on wide monitors */
  position: relative;
}
.brand { display: flex; align-items: center; gap: 0.6rem; font-family: var(--font-head); font-weight: 800; font-size: 1.4rem; color: var(--color-navy); letter-spacing: -0.01em; }
.brand .brand-mark {
  display: grid; place-items: center;
  width: 38px; height: 38px;
  background: var(--color-navy); color: var(--color-gold);
  border-radius: 10px; font-size: 1.1rem; font-weight: 800;
}
.brand .brand-amp { color: var(--color-gold); }

/* PUBLIC nav is ALWAYS collapsed to the hamburger (every window size) — the
   header shows only the brand + "Get a Free Quote"; all nav items + PRO live
   in the dropdown. (The admin .dash-nav still shows its row on desktop, §18.) */
.nav-links { display: none; }
.nav-links.is-open {
  display: flex;
  /* top = row bottom + the header's 14px bottom padding, so the panel sits
     flush under the header edge with NO hover gap (a gap would fire the
     header's mouseleave-close while travelling from the hamburger down) */
  position: absolute; top: calc(100% + 14px); left: 0; right: 0;
  flex-direction: column; align-items: flex-start; gap: 0;
  background: var(--color-white); border-bottom: 1px solid var(--color-line);
  box-shadow: var(--shadow-md); padding: 0.5rem var(--gutter) 1rem; z-index: 90;
}
.nav-links.is-open a { width: 100%; padding: 0.85rem 0.6rem; border-radius: 0; border-bottom: 1px solid var(--color-line); text-align: right; }
.nav-links.is-open a.is-active { border-radius: var(--radius-sm); }
/* Above phone size, the open menu is a compact panel whose RIGHT EDGE lines
   up with the hamburger (right: 0 of the centered .nav column), instead of a
   full-screen-wide sheet. */
@media (min-width: 640px) {
  .nav-links.is-open {
    left: auto; right: var(--gutter); width: 300px;
    border: 1px solid var(--color-line);
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  }
}

/* A couple of quick links kept in the bar on WIDER screens (Services, Gallery);
   hidden on narrow, where everything lives in the hamburger. */
.nav-quick { display: none; }
@media (min-width: 900px) {
  /* margin-right:auto glues the quick links to the brand on the LEFT and
     pushes the CTA cluster to the right (auto margins win over the .nav's
     space-between), instead of the links floating mid-header. */
  .nav-quick { display: flex; align-items: center; gap: 0.3rem; margin-right: auto; margin-left: 0.6rem; }
}

/* Shared nav-link style — same active/hover treatment on the public site nav
   (.nav-links), the wide-screen quick links (.nav-quick), and the admin
   dashboard nav (.dash-nav, §18) so every header looks/behaves the same. */
.nav-links a, .nav-quick a, .dash-nav a {
  font-family: var(--font-head); font-weight: 600; font-size: 0.9rem;
  color: var(--color-navy); padding: 0.45rem 0.85rem; border-radius: var(--radius-pill);
  white-space: nowrap; transition: background var(--transition), color var(--transition);
}
.nav-links a:hover, .nav-quick a:hover, .dash-nav a:hover { background: var(--color-bg-alt); }
.nav-links a.is-active, .nav-quick a.is-active, .dash-nav a.is-active { background: var(--color-navy); color: var(--color-white); }

/* today's date — DASHBOARDS ONLY, floated to the right edge of the page title
   so the title stays left and the date sits right on the same line
   (js/main.js → initTodayDate). Quiet, corporate; not part of the heading weight. */
h1 > .site-date {
  float: right; font-family: var(--font-head); font-weight: 500;
  font-size: 0.8rem; color: var(--color-muted); letter-spacing: 0.01em;
  white-space: nowrap; margin-left: 1rem; padding-top: 0.35em;
}

.nav-cta { display: flex; align-items: center; gap: 1rem; }
/* header phone — a tap-to-call PILL (icon + number). SAME size AND the SAME
   colour scheme as the primary "Get a Free Quote" button: filled gold pill,
   on-gold ink text, matching border. The two pills are visually identical
   (only the content differs). Hidden on phones (sticky call bar carries "Call"). */
.nav-phone {
  display: none; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.85rem 1.6rem; border-radius: var(--radius-pill);
  background: var(--color-gold); border: 2px solid var(--sm-orange);
  font-family: var(--font-head); font-weight: 600; font-size: 1rem;
  color: var(--color-navy); white-space: nowrap; box-shadow: var(--shadow-sm);
  transition: transform var(--transition), background var(--transition),
              box-shadow var(--transition), color var(--transition);
}
.nav-phone svg { width: 1.15em; height: 1.15em; flex: none; }
.nav-phone:hover { transform: translateY(-2px); background: var(--color-gold-dark); border-color: var(--sm-orange-dark); box-shadow: var(--shadow-md); }
.nav-phone:active { transform: translateY(0); }
@media (min-width: 640px) { .nav-phone { display: inline-flex; } }
@media (max-width: 600px) {
  .nav-cta { gap: 0.6rem; }
  .nav-cta .btn { padding: 0.55rem 0.9rem; font-size: 0.85rem; }
}

/* social proof always in sight: "★ 4.6 (47)" chip → scrolls to reviews.
   Hidden on the smallest screens to keep the minimal bar. */
.nav-rating { display: none; align-items: center; gap: 0.3rem; font-family: var(--font-head); font-weight: 700; font-size: 0.85rem; color: var(--color-navy); white-space: nowrap; }
.nav-rating .nr-star { color: var(--color-star); }
.nav-rating .nr-count { color: var(--color-muted); font-weight: 600; }
@media (min-width: 640px) { .nav-rating { display: inline-flex; } }

/* Owner entrance — discreet "PRO" bubble that lives INSIDE .nav-links (so it
   collapses into the hamburger with the other menu items on narrow screens) →
   dashboard (login-gated). Scoped to beat the shared .nav-links a pill style;
   uses brand tokens so it matches the active skin. */
.nav-links a.btn-pro {
  color: var(--color-gold); background: color-mix(in srgb, var(--color-gold) 12%, transparent);
  border: 1.5px solid color-mix(in srgb, var(--color-gold) 55%, transparent);
  font-weight: 800; font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.4rem 0.7rem;   /* border-radius (pill) inherited from .nav-links a */
}
.nav-links a.btn-pro:hover { background: var(--color-gold); color: var(--color-bg); box-shadow: var(--shadow-sm); }
/* In the open dropdown it drops the bubble and becomes a normal full-width row —
   same size as the other items so it's clearly legible, kept a distinct gold. */
.nav-links.is-open a.btn-pro {
  background: transparent; border: 0; border-bottom: 1px solid var(--color-line);
  font-size: 0.9rem; letter-spacing: normal; color: var(--color-gold-dark);
}

.nav-toggle { display: none; background: none; border: none; padding: 0.4rem; color: var(--color-navy); }
.nav-toggle svg { width: 28px; height: 28px; }
/* PUBLIC hamburger (#navToggle) is shown at ALL sizes; the admin one (#dashToggle)
   only appears ≤1000px (see §16) so the dashboard keeps its desktop row. */
#navToggle { display: inline-flex; }

/* -------------------------------------------------------------------------
   6. HERO
   ------------------------------------------------------------------------- */
.hero {
  position: relative;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--sm-teal-3) 94%, transparent), color-mix(in srgb, var(--sm-teal-2) 86%, transparent)),
    url("../img/hero.jpg") center/cover no-repeat;
  background-color: var(--color-navy-deep);
  color: var(--color-white);
  padding-block: clamp(3.5rem, 8vw, 7rem);
}
.hero-grid { display: grid; gap: 2.5rem; align-items: start; }
.hero h1 { color: var(--color-white); font-size: var(--fs-hero); letter-spacing: -0.02em; line-height: 1.2; }
.hero h1 .accent { color: var(--color-amber); }
.hero .lead { font-size: var(--fs-lead); color: rgba(255,255,255,0.86); margin-top: 1.1rem; max-width: 36ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.8rem; }
.hero-trust { display: flex; flex-wrap: wrap; gap: 1.4rem 2rem; margin-top: 2.2rem; padding-top: 1.6rem; border-top: 1px solid rgba(255,255,255,0.16); }
.hero-trust .ht-item { display: flex; flex-direction: column; }
.hero-trust .ht-num { font-family: var(--font-head); font-weight: 800; font-size: 1.6rem; color: var(--color-gold); line-height: 1; }
.hero-trust .ht-label { font-size: var(--fs-small); color: rgba(255,255,255,0.78); margin-top: 0.3rem; }

/* Hero quote card */
.hero-card {
  background: var(--color-surface);
  color: var(--color-ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: clamp(1.5rem, 3vw, 2.1rem);
}
.hero-card h3 { font-size: 1.35rem; }
.hero-card p.sub { color: var(--color-muted); font-size: var(--fs-small); margin-top: 0.25rem; margin-bottom: 1.2rem; }

/* -------------------------------------------------------------------------
   7. FORMS
   ------------------------------------------------------------------------- */
.field { margin-bottom: 0.9rem; }
.field label { display: block; font-size: var(--fs-small); font-weight: 600; margin-bottom: 0.35rem; color: var(--color-navy); }
.field input, .field select, .field textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.75rem 0.9rem;
  border: 1.5px solid var(--color-line);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  color: var(--color-ink);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--color-amber);
  box-shadow: var(--ring);
  outline: none;
}
.field textarea { resize: vertical; min-height: 96px; }
.form-note { font-size: var(--fs-small); color: var(--color-muted); margin-top: 0.6rem; text-align: center; }
.form-status { display: none; margin-top: 0.8rem; padding: 0.7rem 1rem; border-radius: var(--radius-sm); font-size: var(--fs-small); }
.form-status.is-ok { display: block; background: var(--ok-bg); color: var(--ok-fg); }
.form-status.is-err { display: block; background: var(--err-bg); color: var(--err-fg); }

/* -------------------------------------------------------------------------
   8. TRUST BAR / BADGES
   ------------------------------------------------------------------------- */
.trustbar { background: var(--color-surface); border-bottom: 1px solid var(--color-line); }
.trustbar-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 2.4rem; padding-block: 1.3rem; text-align: center; }
.trust-item { display: inline-flex; align-items: center; gap: 0.55rem; font-weight: 600; color: var(--color-navy); font-size: 0.95rem; }
.trust-item svg { width: 1.4em; height: 1.4em; color: var(--klein); flex: none; }

/* -------------------------------------------------------------------------
   9. SERVICES
   ------------------------------------------------------------------------- */
.cards { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: 1.7rem;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--tint-line); }
.card .icon {
  display: grid; place-items: center;
  width: 54px; height: 54px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--sm-orange), var(--sm-gold));
  color: var(--color-white);
  margin-bottom: 1rem;
}
.card .icon svg { width: 28px; height: 28px; }
.card h3 { font-size: var(--fs-h3); margin-bottom: 0.5rem; }
.card p { color: var(--color-muted); font-size: 0.96rem; }
.card ul { margin-top: 0.9rem; display: grid; gap: 0.4rem; }
.card ul li { position: relative; padding-left: 1.4rem; font-size: 0.92rem; color: var(--color-ink); }
.card ul li::before {
  content: ""; position: absolute; left: 0; top: 0.55em;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--color-amber);
}

/* -------------------------------------------------------------------------
   10. WHY US
   ------------------------------------------------------------------------- */
.why-grid { display: grid; gap: 2.4rem; align-items: center; grid-template-columns: 1fr; }
.why-list { display: grid; gap: 1.3rem; margin-top: 1.6rem; }
.why-item { display: flex; gap: 1rem; }
.why-item .why-ico {
  flex: none; display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 12px;
  background: color-mix(in srgb, var(--sm-teal-br) 16%, transparent); color: var(--color-teal-dark);
}
.why-item .why-ico svg { width: 24px; height: 24px; }
.why-item h3 { font-size: 1.12rem; margin-bottom: 0.2rem; }
.why-item p { color: var(--color-muted); font-size: 0.95rem; }
.why-media { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-md); min-height: 320px; background: var(--color-bg-alt) center/cover no-repeat; }

/* -------------------------------------------------------------------------
   11. REVIEWS
   ------------------------------------------------------------------------- */
.reviews-grid { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.review {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: 1.6rem;
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
}
.stars { display: inline-flex; gap: 2px; color: var(--color-star); margin-bottom: 0.7rem; }
.stars svg { width: 18px; height: 18px; }
.review p.quote { font-size: 0.98rem; color: var(--color-ink); flex: 1; }
.review .reviewer { display: flex; align-items: center; gap: 0.7rem; margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--color-line); }
.review .avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--color-navy); color: var(--color-amber); display: grid; place-items: center; font-family: var(--font-head); font-weight: 700; }
.review .who strong { display: block; font-size: 0.95rem; color: var(--color-navy); }
.review .who span { font-size: var(--fs-small); color: var(--color-muted); }

.rating-summary { display: flex; align-items: center; justify-content: center; gap: 0.8rem; margin-top: 1.2rem; flex-wrap: wrap; }
.rating-summary .big { font-family: var(--font-head); font-weight: 800; font-size: 2.2rem; color: var(--color-navy); }
.rating-summary .stars svg { width: 22px; height: 22px; }

/* -------------------------------------------------------------------------
   12. SERVICE AREA / CTA BAND
   ------------------------------------------------------------------------- */
.cta-band { background: linear-gradient(135deg, var(--klein), var(--klein-deep)); color: var(--color-white); text-align: center; }
.cta-band h2 { color: var(--color-white); font-size: var(--fs-h2); }
.cta-band p { color: rgba(255,255,255,0.85); font-size: var(--fs-lead); max-width: 56ch; margin: 0.9rem auto 1.8rem; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }

.area-tags { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; margin-top: 1.4rem; }
.area-tags span { background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.18); padding: 0.4rem 0.95rem; border-radius: var(--radius-pill); font-size: var(--fs-small); }

/* -------------------------------------------------------------------------
   13. CONTACT
   ------------------------------------------------------------------------- */
.contact-grid { display: grid; gap: 2.4rem; grid-template-columns: 1fr; }
.contact-info .ci-item { display: flex; gap: 0.9rem; margin-bottom: 1.3rem; }
.contact-info .ci-ico { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: var(--color-navy); color: var(--color-amber); }
.contact-info .ci-ico svg { width: 22px; height: 22px; }
.contact-info h3 { font-size: 1.05rem; margin-bottom: 0.15rem; }
.contact-info a, .contact-info p { color: var(--color-muted); }
.contact-info a:hover { color: var(--color-amber-dark); }
.contact-form-wrap { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius); padding: clamp(1.5rem, 3vw, 2.2rem); box-shadow: var(--shadow-md); }

/* -------------------------------------------------------------------------
   14. FOOTER
   ------------------------------------------------------------------------- */
/* Footer: slim two-line accent — thin orange + thin Klein blue — above the teal body.
   Band orange is its own token so it can be tuned without touching site accents. */
:root {
  --band-orange: var(--sm-orange);
  /* slim tricolor accent — orange · yellow · Klein blue (reused by header + footer) */
  --accent-stripe: linear-gradient(to bottom,
    var(--band-orange) 0 3px,
    var(--sm-gold)     3px 6px,
    var(--klein)       6px 9px);
}
.site-footer {
  position: relative;
  background: var(--color-navy-darker);
  color: rgba(255,255,255,0.78);
  padding-block: 3rem 1.6rem;
}
.site-footer::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 9px;
  background: var(--accent-stripe);
}
.footer-grid { display: grid; gap: 2rem; grid-template-columns: 1fr; }
.site-footer .brand { color: var(--color-white); margin-bottom: 0.8rem; }
.site-footer h4 { color: var(--color-white); font-size: 1rem; margin-bottom: 0.9rem; }
.site-footer a { color: rgba(255,255,255,0.78); transition: color var(--transition); }
.site-footer a:hover { color: var(--color-amber); }
.footer-links { display: grid; gap: 0.5rem; }
.footer-contact li { display: flex; gap: 0.55rem; align-items: flex-start; margin-bottom: 0.5rem; font-size: 0.95rem; }
.footer-contact svg { width: 1.05em; height: 1.05em; color: var(--color-amber); flex: none; margin-top: 0.25rem; }
.footer-bottom { margin-top: 2.2rem; padding-top: 1.4rem; border-top: 1px solid rgba(255,255,255,0.12); display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; justify-content: space-between; font-size: var(--fs-small); }
.footer-bottom .license { color: rgba(255,255,255,0.6); }

/* -------------------------------------------------------------------------
   15. FLOATING MOBILE CALL BAR
   ------------------------------------------------------------------------- */
.callbar {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  background: var(--color-navy); border-top: 1px solid rgba(255,255,255,0.12);
  padding: 0.6rem var(--gutter);
  gap: 0.7rem;
}
.callbar .btn { flex: 1; }

/* -------------------------------------------------------------------------
   16. RESPONSIVE
   ------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .hero-grid { grid-template-columns: 1.1fr 0.9fr; }
  .why-grid { grid-template-columns: 1fr 1fr; }
  .contact-grid { grid-template-columns: 0.9fr 1.1fr; }
  .footer-grid { grid-template-columns: 1.6fr 1fr 1.4fr; }
}

/* Admin dashboard nav (.dash-nav) collapses to its hamburger (#dashToggle)
   ≤1150px (10 nav pills need ~1150px to fit on one row). The PUBLIC nav
   (.nav-links / #navToggle) is always collapsed — its rules live in §5. */
@media (max-width: 1150px) {
  #dashToggle { display: inline-flex; }
}

@media (max-width: 640px) {
  .callbar { display: flex; }
  /* room for the floating call bar — ONLY on pages that actually have one
     (otherwise it's a 70px empty band under the footer) */
  body:has(.callbar) { padding-bottom: 70px; }
  .hero-trust { gap: 1rem 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* =========================================================================
   17. BILLING TOOL (billing.html, invoice.php)
   Reuses the tokens/components above; no new color values.
   ========================================================================= */
.billing-page { background: var(--color-bg); display: flex; flex-direction: column; min-height: 100vh; }
.billing-page > .site-footer { margin-top: auto; }   /* pin footer to the bottom on short pages */
.bill-wrap { padding-block: 1.6rem 3rem; }
.bill-head h1 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.bill-head .muted { color: var(--color-muted); margin-top: 0.25rem; }

.nav-back { font-family: var(--font-head); font-weight: 600; color: var(--color-navy); margin-right: 0.4rem; }
.nav-back:hover { color: var(--color-amber-dark); }

/* Extra button variant: outlined on light */
.btn--ghost-dark { background: transparent; color: var(--color-navy); border-color: var(--sm-orange); }
.btn--ghost-dark:hover { background: var(--color-bg-alt); border-color: var(--color-navy); }
.btn[disabled] { opacity: 0.6; cursor: default; transform: none; }

/* Panels */
.panel {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  margin-bottom: 1.1rem;
  overflow: hidden;
}
.panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 1.3rem;
  border-bottom: 1px solid var(--color-line);
}
.panel-head h2 { font-size: 1.15rem; }
.panel-body { padding: 1.3rem; }
.panel.is-collapsed .panel-body { display: none; }
.catalog-box.is-collapsed { display: none; }
.panel-toggle {
  background: var(--color-bg-alt); border: 1px solid var(--color-line);
  color: var(--color-navy); font-family: var(--font-head); font-weight: 600;
  font-size: 0.82rem; padding: 0.4rem 0.9rem; border-radius: var(--radius-pill);
}
.panel-toggle:hover { background: var(--tint-cool); }

.panel .sub { font-size: 0.95rem; margin: 1.2rem 0 0.6rem; color: var(--color-navy); }
.panel .sub:first-child { margin-top: 0; }
.hint { font-size: var(--fs-small); color: var(--color-muted); margin-bottom: 0.8rem; }
.hint-inline { font-weight: 400; color: var(--color-muted); font-size: 0.8rem; }
.inline-status { font-size: var(--fs-small); margin-left: 0.7rem; color: var(--color-teal-dark); }

/* Field grids */
.grid-2 { display: grid; gap: 0.4rem 1rem; grid-template-columns: 1fr; }
.grid-4 { display: grid; gap: 0.4rem 1rem; grid-template-columns: 1fr 1fr; }
@media (min-width: 620px) {
  .grid-2 { grid-template-columns: 1fr 1fr; }
  .grid-4 { grid-template-columns: 1fr 1fr 1fr 1fr; }
}

/* Line-item rows (labour + materials) */
.li-row {
  display: grid; gap: 0.5rem; align-items: center; margin-bottom: 0.55rem;
}
.li-row--labour { grid-template-columns: 1.6fr 0.9fr 0.6fr 0.7fr 0.8fr auto; }
.li-row--mat    { grid-template-columns: 1fr 1.4fr 0.6fr 0.8fr 0.8fr auto; }
.li-row input, .li-row select { padding: 0.6rem 0.6rem; }
.li-head {
  font-family: var(--font-head); font-weight: 600; font-size: 0.78rem;
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-muted);
  margin-bottom: 0.5rem;
}
.li-amt { font-family: var(--font-mono, monospace); font-weight: 600; text-align: right; color: var(--color-navy); }
.row-rm {
  background: transparent; border: none; color: var(--danger); font-size: 1rem;
  width: 32px; height: 32px; border-radius: 8px;
}
.row-rm:hover { background: var(--danger-bg); }
.btn-add { margin-top: 0.3rem; font-size: 0.9rem; padding: 0.6rem 1.1rem; }
.task-row { display: grid; grid-template-columns: 1fr auto; gap: 0.5rem; margin-bottom: 0.5rem; }

/* Catalog */
.catalog-box { background: var(--color-bg); border: 1px dashed var(--color-line); border-radius: var(--radius-sm); padding: 1.1rem; margin-bottom: 1.3rem; }
.catalog-list { margin-top: 1rem; display: grid; gap: 0.8rem; }
.cat-group { }
.cat-name { font-family: var(--font-head); font-weight: 700; color: var(--color-navy); font-size: 0.9rem; margin-bottom: 0.35rem; }
.cat-item {
  display: flex; justify-content: space-between; gap: 1rem; width: 100%; text-align: left;
  background: var(--color-surface); border: 1px solid var(--color-line); border-radius: 8px;
  padding: 0.5rem 0.8rem; font-size: 0.9rem; color: var(--color-ink); margin-bottom: 0.3rem;
}
.cat-item:hover { border-color: var(--color-amber); background: color-mix(in srgb, var(--sm-orange) 6%, var(--color-white)); }
.cat-item em { color: var(--color-muted); font-style: normal; font-size: 0.82rem; }

/* Totals */
.panel--totals { background: var(--color-navy); border: none; }
.panel--totals .totals { color: var(--color-white); }
.tot-row { display: flex; justify-content: space-between; padding: 0.4rem 0; font-size: 1.02rem; }
.tot-row span:first-child { color: rgba(255,255,255,0.82); }
.tot-grand { border-top: 2px solid rgba(255,255,255,0.2); margin-top: 0.4rem; padding-top: 0.8rem; font-family: var(--font-head); font-weight: 800; font-size: 1.4rem; }
.tot-grand span:last-child { color: var(--color-gold); }

/* Actions + result */
.action-bar { position: sticky; bottom: 0; z-index: 20; padding: 0.9rem 0; background: linear-gradient(to top, var(--color-bg) 70%, transparent); }
.action-bar .btn { width: 100%; }
.result-box { border: 2px solid var(--color-teal); }
.result-title { font-size: 1.2rem; color: var(--color-navy); }
.result-email { font-size: var(--fs-small); color: var(--color-muted); margin: 0.4rem 0 1rem; }
.result-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.result-actions .btn { flex: 1 1 auto; }

/* Compact footer variant (gallery/admin/portal pages): only the copyright row,
   so drop the homepage footer's tall top padding + the divider spacing that
   assume grid content sits above — kills the empty dark band. */
.bill-footer { margin-top: 2rem; padding-block: 1.6rem; }
.bill-footer .footer-bottom { margin-top: 0; padding-top: 0.4rem; border-top: 0; }

/* Off-screen invoice render host (used for print + PDF capture) */
.invoice-print-host { position: absolute; left: -10000px; top: 0; width: 720px; background: var(--color-white); }

@media (min-width: 880px) {
  .action-bar .btn { width: auto; min-width: 280px; }
}

/* Stack line items on small screens with field labels */
@media (max-width: 700px) {
  .li-head { display: none; }
  .li-row--labour, .li-row--mat {
    grid-template-columns: 1fr 1fr;
    border: 1px solid var(--color-line); border-radius: var(--radius-sm);
    padding: 0.8rem; gap: 0.5rem; position: relative;
  }
  .li-row--labour > *:first-child, .li-row--mat > *:first-child { grid-column: 1 / -1; }
  .li-amt { grid-column: 1 / -1; text-align: left; padding-top: 0.2rem; }
  .row-rm { position: absolute; top: 0.4rem; right: 0.4rem; }
}

/* PRINT: show only the rendered invoice */
@media print {
  .billing-page > .site-header,
  .billing-page > .bill-wrap,
  .billing-page > .site-footer,
  .billing-page > datalist { display: none !important; }
  .billing-page .invoice-print-host { position: static; left: 0; width: auto; }
  .billing-page { background: var(--color-white); padding: 0; }
}

/* =========================================================================
   18. OWNER DASHBOARD · PROJECT · REPORTS
   ========================================================================= */
/* Top nav (admin pages) — link style shared with the public nav, see §5.
   nowrap keeps the header a constant height on every page: with wrap, a page
   that has a vertical scrollbar is ~15px narrower and could tip the row onto a
   2nd line, making the header "jump" taller when switching tabs. */
.dash-nav { display: flex; gap: 0.4rem; flex-wrap: nowrap; align-items: center; }

/* Admin top nav collapses into the hamburger on smaller screens, exactly like
   the public site nav (§16) — no more sideways-scrolling pill row. Above the
   breakpoint it's a normal pill row and the toggle is hidden (see §5
   .nav-toggle base rule + the max-width:1150px reveal in §16). */
@media (max-width: 1150px) {
  .dash-nav { display: none; }
  .dash-nav.is-open {
    display: flex;
    /* anchored to the centered .nav column (position:relative, §5) so it sits
       flush under the hamburger; +14px = the header's bottom padding, keeping
       the hover chain contiguous for the mouseleave-close */
    position: absolute; top: calc(100% + 14px); left: 0; right: 0;
    flex-direction: column; align-items: flex-start; gap: 0;
    background: var(--color-white); border-bottom: 1px solid var(--color-line);
    box-shadow: var(--shadow-md); padding: 0.5rem var(--gutter) 1rem; z-index: 90;
  }
  .dash-nav.is-open a { width: 100%; padding: 0.85rem 0.6rem; border-radius: 0; border-bottom: 1px solid var(--color-line); text-align: right; }
  .dash-nav.is-open a.is-active { border-radius: var(--radius-sm); }
}
/* Tablet range (640–1150px): compact panel whose right edge lines up with the
   hamburger, instead of a full-width sheet. */
@media (min-width: 640px) and (max-width: 1150px) {
  .dash-nav.is-open {
    left: auto; right: var(--gutter); width: 300px;
    border: 1px solid var(--color-line);
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  }
}

/* Status badge */
.badge { display: inline-block; font-family: var(--font-head); font-weight: 700; font-size: 0.7rem;
  text-transform: uppercase; letter-spacing: 0.04em; padding: 0.2rem 0.6rem; border-radius: var(--radius-pill); }
.badge--open { background: color-mix(in srgb, var(--sm-teal-br) 18%, transparent); color: var(--color-teal-dark); }
.badge--done { background: color-mix(in srgb, var(--sm-orange) 14%, transparent); color: var(--color-amber-dark); }

/* Dashboard layout */
.dash-grid { display: grid; gap: 1.1rem; grid-template-columns: 1fr; }
@media (min-width: 820px) { .dash-grid { grid-template-columns: 1fr 1fr; } }

.proj-list { display: grid; gap: 0.9rem; grid-template-columns: 1fr; }
@media (min-width: 620px) { .proj-list { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .proj-list { grid-template-columns: 1fr 1fr 1fr; } }
.proj-card {
  display: block; background: var(--color-surface); border: 1px solid var(--color-line);
  border-left: 4px solid var(--color-navy); border-radius: var(--radius); padding: 1rem 1.1rem;
  box-shadow: var(--shadow-sm); transition: transform var(--transition), box-shadow var(--transition);
}
.proj-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-left-color: var(--color-amber); }
.pc-top { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; }
.pc-top strong { font-family: var(--font-head); color: var(--color-navy); }
.pc-client { color: var(--color-ink); font-size: 0.92rem; margin-top: 0.3rem; }
.pc-loc { color: var(--color-muted); }
.pc-foot { display: flex; justify-content: space-between; margin-top: 0.7rem; padding-top: 0.6rem; border-top: 1px solid var(--color-line); }
.pc-id { font-family: var(--font-mono, monospace); font-size: 0.78rem; color: var(--color-muted); }
.pc-total { font-family: var(--font-head); font-weight: 800; color: var(--color-navy); }

/* expandable project card (client dashboard) — click the card to open it */
.proj-card--open { padding: 0; cursor: pointer; }
.proj-card--open > summary {
  list-style: none; padding: 1rem 1.1rem 1rem 2rem; position: relative; cursor: pointer;
}
.proj-card--open > summary::-webkit-details-marker { display: none; }
/* disclosure chevron on the left, rotates when open */
.proj-card--open > summary::before {
  content: ""; position: absolute; left: 0.9rem; top: 1.35rem;
  width: 0.5rem; height: 0.5rem; border-right: 2px solid var(--color-muted);
  border-bottom: 2px solid var(--color-muted); transform: rotate(-45deg);
  transition: transform var(--transition);
}
.proj-card--open[open] > summary::before { transform: rotate(45deg); }
.proj-card--open[open] { border-left-color: var(--color-amber); }
.proj-detail { padding: 0 1.1rem 1.1rem 2rem; }
.proj-detail .pd-scope { color: var(--color-ink); font-size: 0.92rem; margin: 0 0 0.6rem; }
.proj-detail .pd-sub {
  font-family: var(--font-head); font-weight: 700; font-size: 0.75rem; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--color-muted); margin: 0.9rem 0 0.4rem;
}
.proj-detail .rtable { font-size: 0.85rem; }

/* Project header meta */
.ph-meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; font-size: 0.95rem; }

/* Tabs */
.tabs { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 1rem; border-bottom: 2px solid var(--color-line); }
.tab {
  background: transparent; border: none; border-bottom: 3px solid transparent; margin-bottom: -2px;
  font-family: var(--font-head); font-weight: 600; font-size: 0.95rem; color: var(--color-muted);
  padding: 0.6rem 0.9rem; cursor: pointer;
}
.tab:hover { color: var(--color-navy); }
.tab.is-active { color: var(--color-navy); border-bottom-color: var(--color-amber); }
.tab-pane { display: none; }
.tab-pane.is-active { display: block; }

/* Timeline */
.tl-row {
  display: grid; grid-template-columns: auto auto 1fr auto auto; gap: 0.7rem; align-items: center;
  padding: 0.7rem 0.4rem; border-bottom: 1px solid var(--color-line);
}
.tl-date { font-family: var(--font-mono, monospace); font-size: 0.8rem; color: var(--color-muted); white-space: nowrap; }
.tl-icon { font-size: 1.1rem; }
.tl-body { display: flex; flex-direction: column; min-width: 0; }
.tl-body strong { color: var(--color-navy); font-size: 0.96rem; }
.tl-sub { color: var(--color-muted); font-size: 0.82rem; }
.tl-amt { font-family: var(--font-head); font-weight: 700; color: var(--color-navy); white-space: nowrap; }
.tl-task { border-left: 3px solid var(--color-teal); }
.tl-material { border-left: 3px solid var(--color-amber); }

.photo-chip { color: var(--color-teal-dark); font-weight: 600; }
.photo-chip:hover { color: var(--color-amber-dark); }

/* Gallery */
.gallery { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.9rem; }
.gal-item { display: inline-flex; align-items: center; gap: 0.4rem; background: var(--color-bg);
  border: 1px solid var(--color-line); border-radius: var(--radius-pill); padding: 0.3rem 0.4rem 0.3rem 0.8rem; font-size: 0.85rem; }
.gal-item a { color: var(--color-navy); }

/* Filters */
.filters { display: grid; gap: 0.6rem 1rem; grid-template-columns: 1fr 1fr; align-items: end; }
@media (min-width: 820px) { .filters { grid-template-columns: 1.4fr 1fr 1fr 1.4fr auto; } }
.filters-actions { display: flex; gap: 0.5rem; }

/* Report table */
.table-scroll { overflow-x: auto; }
.rtable { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.rtable th, .rtable td { padding: 0.6rem 0.7rem; text-align: left; border-bottom: 1px solid var(--color-line); white-space: nowrap; }
.rtable thead th { font-family: var(--font-head); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--color-muted); background: var(--color-bg); position: sticky; top: 0; }
.rtable th.sortable { cursor: pointer; user-select: none; }
.rtable th.sortable:hover { color: var(--color-navy); }
.rtable tbody tr:hover { background: var(--color-bg); }
/* rows with a destination are fully clickable (same target as their Open/View
   button) — pointer + slightly stronger hover so it reads as clickable */
.rtable tbody tr[data-href] { cursor: pointer; }
.rtable tbody tr[data-href]:hover { background: var(--color-bg-alt); }

/* shared admin list component (js/admin-table.js) — date-group headers,
   sortable columns, expandable detail rows */
.rtable th.sortable.is-sorted { color: var(--color-navy); }
.rtable tr.rt-group td {
  background: var(--color-bg-alt); font-family: var(--font-head); font-weight: 700;
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--color-navy);
  white-space: nowrap; padding-top: 0.5rem; padding-bottom: 0.5rem;
}
.rtable tr.rt-group .rt-group-count { margin-left: 0.6rem; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--color-muted); }
.rtable .rt-toggle-cell { width: 2.2rem; text-align: center; }
.rtable .rt-toggle {
  background: none; border: 1px solid var(--color-line); border-radius: 6px; width: 1.7rem; height: 1.7rem;
  color: var(--color-muted); font-size: 0.85rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center;
}
.rtable .rt-toggle:hover { background: var(--color-bg); color: var(--color-navy); }
.rtable tr.rt-detail-row td { background: var(--color-bg); white-space: normal; }
.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; }
.btn-mini { display: inline-block; font-family: var(--font-head); font-weight: 600; font-size: 0.8rem;
  background: var(--color-navy); color: var(--color-white); padding: 0.3rem 0.7rem; border-radius: var(--radius-pill); }
.btn-mini:hover { background: var(--color-navy-deep); }

/* Portal tiles (dashboard) */
.portal-grid { display: grid; gap: 1.1rem; grid-template-columns: 1fr; }
@media (min-width: 560px) { .portal-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .portal-grid { grid-template-columns: 1fr 1fr 1fr; } }
.portal-tile {
  display: flex; flex-direction: column; gap: 0.3rem;
  background: var(--color-surface); border: 1px solid var(--color-line);
  border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.portal-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--color-amber); }
.pt-ico {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 13px;
  background: linear-gradient(135deg, var(--sm-teal-1), var(--sm-teal-2)); color: var(--color-white); margin-bottom: 0.6rem;
}
.pt-ico svg { width: 26px; height: 26px; }
.pt-title { font-family: var(--font-head); font-weight: 700; font-size: 1.15rem; color: var(--color-navy); }
.pt-desc { color: var(--color-muted); font-size: 0.9rem; }

/* Narrow form pages */
.form-narrow { max-width: 720px; }
.bill-head--row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.grid-3 { display: grid; gap: 0.4rem 1rem; grid-template-columns: 1fr; }
@media (min-width: 560px) { .grid-3 { grid-template-columns: 2fr 1fr 1fr; } }
.link-accent { color: var(--color-amber-dark); font-weight: 600; }
.link-accent:hover { text-decoration: underline; }

/* Timeline reflow on mobile (keeps delete accessible) */
@media (max-width: 640px) {
  .tl-row {
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "date amt rm" "body body body";
    gap: 0.3rem 0.6rem; padding: 0.7rem 0.2rem;
  }
  .tl-date { grid-area: date; }
  .tl-amt  { grid-area: amt; text-align: right; }
  .tl-row .row-rm { grid-area: rm; }
  .tl-icon { display: none; }
  .tl-body { grid-area: body; }
}

/* =========================================================================
   19. CHECKBOX CHIPS (quote form: skills, preferred reply)
   ========================================================================= */
.check-group { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.15rem; }
/* selector beats ".field label" (which would otherwise force display:block) */
.check-group .check-item {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-size: 0.9rem; font-weight: 500; color: var(--color-ink);
  background: var(--color-bg); border: 1.5px solid var(--color-line);
  border-radius: var(--radius-pill); padding: 0.45rem 0.85rem; margin: 0; cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}
.check-group .check-item:hover { border-color: var(--color-navy); }
.check-group .check-item input { accent-color: var(--sm-orange); width: 16px; height: 16px; margin: 0; flex: none; }
.check-group .check-item:has(input:checked) { border-color: var(--sm-orange); background: color-mix(in srgb, var(--sm-orange) 5%, var(--color-white)); color: var(--color-navy); font-weight: 600; }

/* =========================================================================
   20. REVIEWS MANAGER (admin)
   ========================================================================= */
#rvList { display: grid; gap: 0.8rem; }
.rv-card { border: 1px solid var(--color-line); border-left: 4px solid var(--color-navy); border-radius: var(--radius-sm); padding: 0.8rem 1rem; background: var(--color-surface); }
.rv-card-top { display: flex; align-items: center; gap: 0.6rem; }
.rv-card-top strong { color: var(--color-navy); font-family: var(--font-head); }
.rv-stars { color: var(--color-gold); letter-spacing: 1px; }
.rv-card-top .row-rm { margin-left: auto; }
.rv-meta { font-size: var(--fs-small); color: var(--color-muted); margin-top: 0.1rem; }
.rv-quote { margin-top: 0.4rem; color: var(--color-ink); font-size: 0.95rem; }

/* =========================================================================
   21. SKINS
   Default (:root above) = "Beach Vibe" (the original teal / sand / yellow;
   internal slug stays santa-monica-beach).
   Two light, elegant alternates, chosen from the dashboard and applied
   site-wide via <html data-theme="…"> (see inc/theme.php):
     ivory-ink          — warm ivory + charcoal ink + muted teal
     oil-rubbed-bronze  — warm ivory + deep oil-rubbed bronze
   Components read semantic tokens, so most flip from the token blocks below;
   the grouped rules afterward fix the few spots that reuse one token as both
   a foreground and a background.
   ========================================================================= */

/* ---- Ivory & Ink ---- (warm ivory + charcoal INK, monochrome — no color) */
[data-theme="ivory-ink"] {
  --sm-gold:#2E2B25;     --sm-gold-dark:#1A1813;     /* accent = warm charcoal ink */
  --sm-orange:#2E2B25;   --sm-orange-dark:#1A1813;
  --color-gold:#2E2B25;  --color-gold-dark:#1A1813;
  --color-amber:#2E2B25; --color-amber-dark:#1A1813;
  --color-teal:#2E2B25;  --color-teal-dark:#1A1813;
  --color-navy:#26231E;  --color-navy-deep:#1A1813; --color-navy-darker:#13110C;
  --klein:#2E2B25;       --klein-deep:#1A1813;
  --color-ink:#262420;   --color-muted:#6F6A60;
  --color-line:#E6DFCC;  --tint-line:#DAD2BC; --tint-cool:#EEE7D6;
  --color-surface:#FFFFFF; --color-bg:#F5F1E7; --color-bg-alt:#EFE8D8;
  --color-star:#2E2B25;  --color-success:#4A463C;
  --ring:0 0 0 3px color-mix(in srgb, var(--color-gold) 28%, transparent);
  --fx:#002FA7; --fx-soft:#3D6BFF; --fx-bright:#6E92FF; --fx-ink:#FFFFFF; /* Klein blue effects */
}

/* ---- Oil-Rubbed Bronze & Ivory ---- */
[data-theme="oil-rubbed-bronze"] {
  --sm-gold:#6B533A;     --sm-gold-dark:#523F2B;
  --sm-orange:#6B533A;   --sm-orange-dark:#523F2B;
  --color-gold:#6B533A;  --color-gold-dark:#523F2B;
  --color-amber:#6B533A; --color-amber-dark:#523F2B;
  --color-teal:#6B533A;  --color-teal-dark:#523F2B;
  --color-navy:#3A2E20;  --color-navy-deep:#2A2118; --color-navy-darker:#1F1811;
  --klein:#6B533A;       --klein-deep:#523F2B;
  --color-ink:#2E2620;   --color-muted:#7C7163;
  --color-line:#E6DDCA;  --tint-line:#DAD0BA; --tint-cool:#EEE6D6;
  --color-surface:#FFFFFF; --color-bg:#F6F1E6; --color-bg-alt:#EFE7D7;
  --color-star:#6B533A;  --color-success:#6E8B5E;
  --ring:0 0 0 3px color-mix(in srgb, var(--color-gold) 35%, transparent);
  --fx:#D4B26A; --fx-soft:#F1D98F; --fx-bright:#FBE9B0; --fx-ink:#2A2118; /* antique gold effects */
}

/* ---- shared across the elegant alternates (token-driven) ---- */
[data-theme="ivory-ink"] body,
[data-theme="oil-rubbed-bronze"] body { background: var(--color-bg); }

[data-theme="ivory-ink"] .brand .brand-mark,
[data-theme="oil-rubbed-bronze"] .brand .brand-mark { background: var(--color-gold); color: var(--color-bg); }

[data-theme="ivory-ink"] .btn--primary,
[data-theme="ivory-ink"] .nav-phone,
[data-theme="oil-rubbed-bronze"] .btn--primary,
[data-theme="oil-rubbed-bronze"] .nav-phone { color: var(--color-bg); }

/* same gold-on-dark pairing as .btn--primary: ivory numbers on filled wizard dots */
[data-theme="ivory-ink"] .wiz-dot.is-active,
[data-theme="oil-rubbed-bronze"] .wiz-dot.is-active { color: var(--color-bg); }

[data-theme="ivory-ink"] .pt-ico,
[data-theme="oil-rubbed-bronze"] .pt-ico { background: linear-gradient(135deg, var(--color-gold), var(--color-gold-dark)); color: var(--color-bg); }

[data-theme="ivory-ink"] .hero,
[data-theme="oil-rubbed-bronze"] .hero {
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-navy-darker) 62%, transparent), color-mix(in srgb, var(--color-navy-deep) 34%, transparent)), url("../img/hero.jpg") center/cover no-repeat;
  background-color: var(--color-navy-darker);
}

[data-theme="ivory-ink"] .check-group .check-item:has(input:checked),
[data-theme="oil-rubbed-bronze"] .check-group .check-item:has(input:checked) {
  border-color: var(--color-gold); background: color-mix(in srgb, var(--color-gold) 14%, var(--color-surface)); color: var(--color-ink);
}
[data-theme="ivory-ink"] .badge--open,
[data-theme="oil-rubbed-bronze"] .badge--open { background: color-mix(in srgb, var(--color-gold) 16%, transparent); color: var(--color-gold-dark); }
[data-theme="ivory-ink"] .badge--done,
[data-theme="oil-rubbed-bronze"] .badge--done { background: color-mix(in srgb, var(--color-success) 18%, transparent); color: var(--color-success); }

/* =========================================================================
   22. SKIN FLAIR (highlight + glow) — shared rules, per-skin highlight color
   Each skin defines the --fx / --fx-soft / --fx-bright / --fx-ink trio (§1 +
   §21); these rules apply that highlight identically to every skin:
     Beach Vibe = orange · Ivory & Ink = Klein blue · Oil-Rubbed Bronze = gold
   ========================================================================= */

/* highlight accents */
/* eyebrows — !important to beat the per-eyebrow inline color="var(--color-amber)" on the homepage */
[data-theme] .eyebrow { color: var(--fx) !important; }
[data-theme] .hero h1 .accent {
  color: var(--fx-soft);
  text-shadow: 0 0 30px color-mix(in srgb, var(--fx) 72%, transparent);
}
/* marker-highlight headline: a gold stroke PAINTS ITSELF behind each accent
   word on load, one word after the other, and STAYS — the text flips to the
   skin's on-gold ink once its stroke lands. Unmissable and permanent, not a
   passing shimmer. Token-only (fx / fx-soft / fx-ink).
   box-decoration-break keeps the stroke intact when a phrase wraps. */
[data-theme] .hero h1 .accent {
  padding: 0 0.12em;
  margin: 0;
  border-radius: var(--radius);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  text-shadow: none;
  /* ONE gradient: gold base + bright shimmer band in the middle. Width grows
     0% → 100% on paint. Position slides left-right for the shimmer sweep. */
  background-repeat: no-repeat;
  background-image: linear-gradient(105deg,
    var(--fx) 0%, var(--fx) 42%,
    color-mix(in srgb, var(--fx-bright) 55%, white) 50%,
    var(--fx) 58%, var(--fx) 100%);
  /* band sized to the LETTERFORMS in em (cap-top → below descenders), not to
     the font's ~1.4em metric box: 1.08em band inside 1.2em lines leaves a
     guaranteed 0.12em gap between wrapped lines at any font size */
  background-size: 0 1.08em;
  background-position: left 0.26em;
  animation: hero-marker-paint 0.7s ease-out both;
}
[data-theme] .hero h1 .accent:nth-of-type(2) { animation-delay: 0.35s; }
[data-theme] .hero h1 .accent:nth-of-type(3) { animation-delay: 0.7s; }
[data-theme] .hero h1 .accent:nth-of-type(4) { animation-delay: 1.05s; }
[data-theme] .hero h1 .accent:nth-of-type(5) { animation-delay: 1.4s; }
/* paint: width grows 0% → 100%, text color flips when done. Position stays
   fixed left so no shimmer sweep, just clean gold paint. */
@keyframes hero-marker-paint {
  0%        { background-size: 0 1.08em;    color: var(--fx-soft); }
  60%       { background-size: 100% 1.08em; color: var(--fx-soft); }
  85%, 100% { background-size: 100% 1.08em; color: var(--fx-ink); }
}
@media (prefers-reduced-motion: reduce) {
  [data-theme] .hero h1 .accent { animation: none; background-size: 100% 1.08em; color: var(--fx-ink); }
}
[data-theme] .hero-trust .ht-num {
  color: var(--fx-soft);
  text-shadow: 0 0 16px color-mix(in srgb, var(--fx) 45%, transparent);
}
[data-theme] .brand .brand-amp { color: var(--fx); }

/* Ivory & Ink: Klein blue is dark, so eyebrows on the dark hero / CTA band use
   the brighter tint to stay legible */
[data-theme="ivory-ink"] .hero .eyebrow,
[data-theme="ivory-ink"] .cta-band .eyebrow { color: var(--fx-soft) !important; }

/* highlight glow in the hero (radial wash, top-right).
   Overlay kept light so the real jobsite photo reads clearly — the darker
   top-left corner plus the text-shadow below keep the headline legible. */
[data-theme] .hero {
  background:
    radial-gradient(72% 95% at 78% 14%, color-mix(in srgb, var(--fx) 18%, transparent), transparent 60%),
    linear-gradient(135deg, color-mix(in srgb, var(--color-navy-darker) 62%, transparent), color-mix(in srgb, var(--color-navy-deep) 34%, transparent)),
    url("../img/hero.jpg") center/cover no-repeat;
  background-color: var(--color-navy-darker);
}
[data-theme] .hero h1,
[data-theme] .hero .lead { text-shadow: 0 2px 14px rgba(0,0,0,0.55); }

/* glowing primary CTA — shared by the phone pill so both header pills glow
   identically (item: "identical colour scheme as Get a Free Quote") */
[data-theme] .btn--primary,
[data-theme] .nav-phone {
  border-color: color-mix(in srgb, var(--fx) 70%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--fx) 70%, transparent),
              0 10px 30px color-mix(in srgb, var(--fx) 40%, transparent);
}
[data-theme] .btn--primary:hover,
[data-theme] .nav-phone:hover {
  border-color: var(--fx);
  box-shadow: 0 0 0 1px var(--fx),
              0 14px 42px color-mix(in srgb, var(--fx) 58%, transparent);
  transform: translateY(-2px);
}

/* brand mark + hero card glow */
[data-theme] .brand .brand-mark {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--fx) 40%, transparent),
              0 0 20px color-mix(in srgb, var(--fx) 55%, transparent);
}
[data-theme] .hero-card {
  border: 1px solid color-mix(in srgb, var(--fx) 50%, transparent);
  box-shadow: var(--shadow-lg), 0 0 52px color-mix(in srgb, var(--fx) 20%, transparent);
}

/* service / why cards: highlight edge + glow on hover */
[data-theme] .card { transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); }
[data-theme] .card:hover {
  border-color: color-mix(in srgb, var(--fx) 70%, transparent);
  box-shadow: var(--shadow-md), 0 0 32px color-mix(in srgb, var(--fx) 22%, transparent);
}

/* ---- icon "logotypes": high-contrast highlight + glow ---- */
/* contact-info tiles: deep tile, bright highlight icon, ring + glow */
[data-theme] .contact-info .ci-ico {
  background: linear-gradient(150deg, color-mix(in srgb, var(--fx) 24%, var(--color-navy)), var(--color-navy));
  color: var(--fx-soft);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fx) 32%, transparent),
              0 0 18px color-mix(in srgb, var(--fx) 20%, transparent);
}
/* review avatar: highlight disc, contrast initial, glow ring */
[data-theme] .review .avatar {
  background: linear-gradient(135deg, var(--fx-soft), var(--fx));
  color: var(--fx-ink);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--fx) 38%, transparent),
              0 0 16px color-mix(in srgb, var(--fx) 28%, transparent);
}
/* gallery slide-number badge: same brand color as the "Ka" mark / primary button */
[data-theme] .gal-num {
  background: var(--color-gold);
  color: var(--color-bg);
  box-shadow: 0 0 14px color-mix(in srgb, var(--color-gold) 35%, transparent);
}
/* gallery prev/next button: same brand color as the "Ka" mark / primary button */
[data-theme] .gal-btn {
  background: var(--color-gold);
  color: var(--color-bg);
  border-color: color-mix(in srgb, var(--color-gold) 60%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-gold) 45%, transparent),
              0 6px 18px color-mix(in srgb, var(--color-gold) 32%, transparent);
}
[data-theme] .gal-btn:hover {
  background: var(--color-gold-dark);
  border-color: var(--color-gold);
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px var(--color-gold), 0 10px 26px color-mix(in srgb, var(--color-gold) 48%, transparent);
}

/* =========================================================================
   23. QUOTE FORM EXTRAS (lead-gen)
   ========================================================================= */
/* honeypot — hidden from people, visible to bots (no layout/scroll impact) */
.hp-field { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ZIP service-area note */
.svc-note { font-size: var(--fs-small); color: var(--color-muted); margin-top: 0.35rem; min-height: 1.15em; }
.svc-note.is-ok { color: var(--color-success); font-weight: 600; }

/* emergency call-now shortcut (revealed when "Emergency" timeframe is picked) */
.emergency-call {
  display: flex; align-items: center; gap: 0.5rem; margin-top: 0.6rem; padding: 0.6rem 0.9rem;
  border-radius: var(--radius-sm); font-family: var(--font-head); font-weight: 700; font-size: 0.95rem;
  background: color-mix(in srgb, var(--color-amber) 14%, var(--color-surface));
  color: var(--color-amber-dark);
  border: 1px solid color-mix(in srgb, var(--color-amber) 40%, transparent);
}
.emergency-call:hover { background: color-mix(in srgb, var(--color-amber) 24%, var(--color-surface)); }

/* photo drop zone */
.field .file-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.file-drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.35rem;
  text-align: center; padding: 1.4rem 1rem; cursor: pointer;
  border: 2px dashed var(--color-line); border-radius: var(--radius-sm);
  background: var(--color-bg); color: var(--color-muted);
  transition: border-color var(--transition), background var(--transition), color var(--transition);
}
.file-drop:hover, .file-drop.is-drag { border-color: var(--color-amber); background: color-mix(in srgb, var(--color-amber) 7%, var(--color-bg)); color: var(--color-ink); }
.file-drop svg { width: 26px; height: 26px; color: var(--color-amber); }
.file-drop-text { font-weight: 500; }
.file-drop strong { color: var(--color-amber-dark); }
.file-drop-hint { font-size: var(--fs-small); color: var(--color-muted); }
.file-list { list-style: none; margin: 0.6rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.file-list li {
  display: inline-flex; align-items: center; gap: 0.4rem; font-size: var(--fs-small);
  background: var(--color-bg-alt); border: 1px solid var(--color-line); border-radius: var(--radius-pill);
  padding: 0.3rem 0.75rem; color: var(--color-ink);
}
.file-remove { background: none; border: 0; padding: 0 0.1rem; cursor: pointer; color: var(--err-fg); font-weight: 700; font-size: 0.9em; line-height: 1; }
.file-list li.file-note { background: none; border: 0; color: var(--err-fg); }

/* trust strip above the submit button */
.trust-strip {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.2rem;
  margin: 0.4rem 0 1.1rem; font-size: var(--fs-small); color: var(--color-muted);
}
.trust-strip span { display: inline-flex; align-items: center; gap: 0.35rem; }
.trust-strip strong { color: var(--color-ink); }
/* compact variant inside the hero quote card */
.trust-strip--form { gap: 0.3rem 0.9rem; margin: 0.2rem 0 0.5rem; font-size: 0.8rem; }

/* the reply-speed promise, shown BEFORE submitting */
.reply-promise {
  text-align: center; font-size: var(--fs-small); color: var(--color-success);
  font-weight: 600; margin: 0 0 0.8rem;
}

/* secondary path to the detailed quote form — a real button, not a footnote.
   white-space:normal overrides .btn's nowrap: the long label must wrap, or its
   min-content width blows the hero column open on ~768-800px viewports. */
.expert-cta { margin-top: 0.8rem; font-size: 0.92rem; padding: 0.7rem 1rem; white-space: normal; }

/* hero card choose-your-path (simple / detailed / live chat / call now) */
.quote-choice { display: grid; gap: 0.7rem; }
.quote-choice .sub { margin-bottom: 0.3rem; }
.qc-option {
  display: block; width: 100%; text-align: left; cursor: pointer; font: inherit;
  background: var(--color-surface); border: 1.5px solid var(--color-line);
  border-radius: var(--radius-sm); padding: 1rem 1.1rem; text-decoration: none;
  transition: border-color var(--transition), background var(--transition);
}
.qc-option:hover { border-color: var(--color-gold); background: color-mix(in srgb, var(--color-gold) 7%, var(--color-surface)); }
.qc-title { display: block; font-family: var(--font-head); font-weight: 700; color: var(--color-navy); }
.qc-hint { display: block; font-size: var(--fs-small); color: var(--color-muted); margin-top: 0.2rem; }
.qc-call-label { text-align: center; font-size: var(--fs-small); color: var(--color-muted); margin: 0.5rem 0 0.5rem; }
.qc-call { text-align: center; margin: 0; }

/* phone pill — same hover language as .btn (lift + shadow). Every accent
   token (gold/amber/klein/teal) collapses to the same bronze under this
   skin by design, so "its own color" has to come from --color-navy (the
   skin's dark ink tone) — the one token that actually reads as a distinct
   color next to the gold Free-Quote button, not another shade of it. */
.phone-pill {
  display: inline-flex; align-items: center; gap: 0.5rem; white-space: nowrap;
  padding: 0.6rem 1.3rem; border-radius: var(--radius-pill);
  background: var(--color-navy); border: 1px solid var(--color-navy); color: var(--color-white);
  font-family: var(--font-head); font-weight: 700; font-size: 0.92rem;
  transition: var(--transition);
}
.phone-pill svg { width: 1.05em; height: 1.05em; flex: none; }
.phone-pill:hover { transform: translateY(-2px); background: var(--color-navy-deep); border-color: var(--color-navy-deep); box-shadow: var(--shadow-md); }
.phone-pill:active { transform: translateY(0); }
.qc-back { background: none; border: 0; padding: 0; margin: 0 0 0.6rem; cursor: pointer; font: inherit; font-size: var(--fs-small); color: var(--color-muted); }
.qc-back:hover { color: var(--color-ink); }

/* homepage contact section: panel that hands off to the wizard page */
.wizard-entry h3 { font-family: var(--font-head); font-size: 1.3rem; color: var(--color-navy); margin-bottom: 0.5rem; }
.wizard-entry > p { color: var(--color-muted); margin-bottom: 1rem; }
.wizard-entry .next-steps { margin-bottom: 1.2rem; }
.wizard-entry .trust-strip { margin-top: 1rem; }

/* ---- Detailed Estimate wizard (detailed-quote.php) ---- */
.wiz-wrap { max-width: 640px; margin: 0 auto; }
.wiz-progress { counter-reset: wiz; display: flex; gap: 0.7rem; justify-content: center; margin: 0.4rem 0 0.3rem; }
.wiz-dot {
  counter-increment: wiz;
  width: 36px; height: 36px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-bg-alt); color: var(--color-muted);
  border: 1.5px solid var(--color-line);
  font-family: var(--font-head); font-weight: 700; font-size: 0.95rem;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.wiz-dot::before { content: counter(wiz); }
.wiz-dot.is-active { background: var(--color-gold); color: var(--color-navy); border-color: var(--color-gold); }
.wiz-count { text-align: center; font-size: var(--fs-small); color: var(--color-muted); margin-bottom: 1.2rem; }
.wiz-step { display: none; border: 0; padding: 0; margin: 0; }
.wiz-step.is-active { display: block; }
.wiz-q { font-family: var(--font-head); font-weight: 700; font-size: 1.15rem; color: var(--color-navy); margin-bottom: 0.9rem; padding: 0; }
.wiz-options { display: grid; gap: 0.55rem; }
.wiz-option {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.85rem 1rem; border: 1.5px solid var(--color-line); border-radius: var(--radius-sm);
  background: var(--color-surface); cursor: pointer; font-weight: 500; color: var(--color-ink);
  transition: border-color var(--transition), background var(--transition);
}
.wiz-option:hover { border-color: var(--color-gold); }
.wiz-option input { accent-color: var(--color-gold); width: 18px; height: 18px; margin: 0; flex: none; }
.wiz-option:has(input:checked) {
  border-color: var(--color-gold);
  background: color-mix(in srgb, var(--color-gold) 10%, var(--color-surface));
  font-weight: 600;
}
.wiz-err { min-height: 1.2em; font-size: var(--fs-small); color: var(--err-fg); margin-top: 0.5rem; }
.wiz-err:not(:empty) {
  font-weight: 600;
  background: color-mix(in srgb, var(--err-fg) 8%, var(--color-surface));
  border: 1px solid color-mix(in srgb, var(--err-fg) 35%, transparent);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.9rem;
}
.wiz-nav { display: flex; gap: 0.8rem; justify-content: space-between; margin-top: 1.4rem; }
.wiz-nav .btn { flex: 1; }
/* .btn's display would beat the [hidden] attribute — wizard.js drives which
   button shows per step (Next on steps 1-3, Send My Request only on the last) */
.wiz-nav .btn[hidden] { display: none; }

/* one real testimonial under the hero quote form (pulled from content/reviews.csv) */
.hero-review {
  margin: 1.1rem 0 0; padding: 0.8rem 1rem 0.7rem;
  border-top: 1px solid var(--color-line);
  font-size: var(--fs-small); color: var(--color-muted);
}
.hero-review-stars { color: var(--color-star); letter-spacing: 0.1em; font-size: 0.9rem; }
.hero-review p { margin: 0.25rem 0 0.3rem; color: var(--color-ink); font-style: italic; line-height: 1.5; }
.hero-review cite { font-style: normal; font-weight: 600; color: var(--color-navy); }

/* "what happens next" steps below the button */
.next-steps { list-style: none; counter-reset: ns; margin: 1.1rem 0 0; padding: 0; display: grid; gap: 0.55rem; }
.next-steps li { counter-increment: ns; display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.95rem; color: var(--color-ink); }
.next-steps li::before {
  content: counter(ns); flex: none; width: 24px; height: 24px; margin-top: 1px; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--font-head); font-weight: 700; font-size: 0.8rem;
  background: var(--color-amber); color: var(--color-white);
}

/* =========================================================================
   24. SKIN FLAIR — highlight polish for the lead-gen form extras (§23)
   ========================================================================= */
[data-theme] .file-drop:hover,
[data-theme] .file-drop.is-drag { border-color: var(--fx); background: color-mix(in srgb, var(--fx) 8%, var(--color-bg)); }
[data-theme] .file-drop svg,
[data-theme] .file-drop strong { color: var(--fx); }
[data-theme] .next-steps li::before {
  background: var(--fx); color: var(--fx-ink);
  box-shadow: 0 0 10px color-mix(in srgb, var(--fx) 30%, transparent);
}
[data-theme] .emergency-call {
  background: color-mix(in srgb, var(--fx) 14%, var(--color-surface));
  color: var(--fx);
  border-color: color-mix(in srgb, var(--fx) 45%, transparent);
  box-shadow: 0 0 14px color-mix(in srgb, var(--fx) 18%, transparent);
}
[data-theme] .emergency-call:hover { background: color-mix(in srgb, var(--fx) 22%, var(--color-surface)); }
/* footer contact icons + link hover: brighter tint for contrast on the dark footer */
[data-theme] .footer-contact svg { color: var(--fx-soft); }
[data-theme] .site-footer a:hover { color: var(--fx-soft); }