/* ============================================================
   BASE — loaded on every page first: tokens, reset, type, buttons, forms, header, footer, bars,
   and every rule shared by more than one kind of page.
   Split out of styles.css in V0.22 (style refresh Phase 1, 2026-09-22); rules unchanged,
   order kept. base.css loads first, then this page type's file.
   ============================================================ */

/* ============================================================
   HOME STRATEGY LLC — HOME MAINTENANCE SUBSCRIPTION (+ painting)
   Stylesheet for myhomestrategy.com
   V0.10 (2026-08-28): subscription redesign — new rules are appended
   at the END of this file under "ADDED AUGUST 28 2026"; everything
   above that block is the painting-era stylesheet, still in use.
   ============================================================ */

/* Fonts — served from our own server (Phase 5, 2026-09-23; were Google Fonts). Both are SIL Open Font
   License. Variable files: one file covers every weight. latin-ext only downloads if a page needs it. */
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(fonts/dm-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(fonts/dm-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 600 700; font-display: swap;
  src: url(fonts/playfair-display-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 600 700; font-display: swap;
  src: url(fonts/playfair-display-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --navy: #0F2B3C;
  --navy-light: #163D54;
  --blue: #1F6FA8;         /* V0.22: today's --blue is the action blue now (links, small labels, selected
                              states: 5.4:1); the logo blue #2E86C1 is --brand, for icons and large type */
  --blue-light: #3498DB;
  --blue-pale: #EBF5FB;
  --blue-glow: #5DADE2;
  --teal: #1ABC9C;
  --white: #FFFFFF;
  --off-white: #F8FAFB;
  --gray-50: #F4F6F7;
  --gray-100: #E8ECEF;
  --gray-200: #D5DBDF;
  --gray-400: #95A5A6;
  --gray-600: #5D6D7E;
  --gray-800: #2C3E50;
  --text: #1C2833;
  --text-light: #44546A;   /* V0.22: paragraphs move to the refresh's --text-2 (7.7:1); --gray-600 stays #5D6D7E for meta */
  --gold: #D4A843;
  --radius: 8px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 3px rgba(15,43,60,0.06), 0 1px 2px rgba(15,43,60,0.04);
  --shadow: 0 4px 20px rgba(15,43,60,0.08);
  --shadow-lg: 0 12px 40px rgba(15,43,60,0.12);
  --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);

  /* V0.22 — THE BOLDER REFRESH TOKENS (style refresh Phase 1, 2026-09-22).
     Today's names above keep working: --navy is already the ink; --blue now carries the action
     blue. Buttons move to amber; icons and large display type use --brand. */
  --ink: #0F2B3C;          /* = --navy: headings, dark bands, text on amber */
  --ink-2: #0A1F2D;        /* footer, photo overlays */
  --brand: #2E86C1;        /* logo blue: icons, large display type, bars, accent borders - not small text */
  --action: #1F6FA8;       /* links, outline buttons, small blue labels (5.4:1) */
  --amber: #F2B544;        /* THE main button (navy text 8.0:1) and small highlights */
  --amber-2: #E6A42F;      /* amber hover */
  --amber-edge: #DB9E2C;   /* amber button border */
  --amber-ink: #8A5A00;    /* small warm labels on white (5.9:1) */
  --amber-wash: #FDF3DC;
  --text-2: #44546A;       /* body copy */
  --muted: #5D6D7E;        /* meta text only */
  --line: #DCE3E8;         /* hairlines, card borders */
  --field-line: #C9D3DA;   /* form field borders */
  --mist: #EEF3F6;         /* alternate sections, app backgrounds */
  --ok: #0E7C66; --ok-wash: #E3F4EF; --bad: #B42318;
  --r-sm: 8px; --r: 12px; --r-l: 18px;
  --sh-1: 0 1px 2px rgba(15,43,60,.07);
  --sh-2: 0 12px 32px rgba(15,43,60,.14);
  --nav-h: 72px;           /* the fixed header: 72px on phones, 96px from 600px up */
}

@media (min-width: 600px) { :root { --nav-h: 96px; } }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }

/* portal only (V0.16 C2): anchors and focused fields land below the fixed nav; public pages keep their V0.15 behaviour */
body {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--text);
  background: var(--white);
  line-height: 1.65;
  font-size: 16px;
  /* Josh, Sep 17 2026: "when the page is too short, the footer seems to make a
     gap up from the bottom of the page." A short page (the portal Overview on a
     tall screen) ran out of content before the viewport did and left a band
     under the footer. Fill the screen and pin the footer to the bottom of it.
     On phones body keeps its 74px padding for the fixed mobile bar — the
     padding sits inside the flex box, so the footer still clears the bar. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

html { min-height: 100%; }

/* The footer takes up whatever is left, so it always sits on the bottom edge. */
body > .footer { margin-top: auto; }

a { color: var(--action); text-decoration: none; transition: color var(--transition); }

a:hover { color: var(--navy); }
/* Phase 5: text for screen readers only (a heading or label the eye gets from the layout) */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
th:has(> .sr-only) { position: relative; }   /* keeps it inside a scrolling table instead of widening the page */
/* Phase 5 (Josh, Sep 23): a link inside a sentence is underlined, not told apart by colour alone (WCAG 1.4.1).
   Buttons, menus, cards and the footer keep their own look: only plain, class-less links in running text. */
main :is(p, dd, figcaption, blockquote, .admin-hint, .estb-hint, .area-note, .section-sub, .hero-promise, .hero-card-foot, .about-stat-value) a:not([class]) {
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}

img { max-width: 100%; display: block; }

.container { max-width: 1140px; margin: 0 auto; padding: 0 24px; }

/* ============================================================
   NAVIGATION
   ============================================================ */

.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--gray-100);
  transition: background var(--transition), box-shadow var(--transition);
}

.nav.scrolled { box-shadow: var(--shadow-sm); }

.nav-inner {
  max-width: 1140px; margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; justify-content: space-between;
  height: var(--nav-h);
}

.nav-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; }

.nav-logo-img { height: 61px; width: auto; display: block; }   /* V0.22: 240px wide in the 72px phone header */

@media (min-width: 600px) { .nav-logo-img { height: 80px; } }

.nav-logo-img--footer { height: 56px; width: auto; display: block; }

.nav-links { display: flex; align-items: center; gap: 8px; }

.nav-link {
  padding: 9px 11px; font-size: 15.5px; font-weight: 600;
  color: var(--text-2); border-radius: 6px;
  transition: color var(--transition), background var(--transition);
  white-space: nowrap;
}

.nav-link:hover { color: var(--navy); background: var(--gray-50); }

.nav-link.active { color: var(--navy); font-weight: 600; }

.nav-link.active:not(.nav-account) {   /* V0.22: the current page is underlined in amber */
  text-decoration: underline; text-decoration-color: var(--amber);
  text-decoration-thickness: 3px; text-underline-offset: 9px;
}

.nav-link-cta {   /* V0.22: the phone number is an outlined button; amber is kept for the main button */
  background: var(--white) !important; color: var(--ink) !important;
  font-weight: 700 !important; border-radius: var(--r) !important;
  box-shadow: inset 0 0 0 1.5px var(--ink);
}

.nav-link-cta:hover { background: var(--mist) !important; }

.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 9px 11px; }   /* V0.22: a 44 x 44px target (was 38 x 42) */

.nav-toggle span {
  display: block; width: 22px; height: 2px; background: var(--navy);
  margin: 5px 0; transition: var(--transition); border-radius: 2px;
}

/* ============================================================
   BUTTONS
   ============================================================ */

/* V0.22 (style refresh Phase 1): 52px buttons. The main button is amber with navy text
   (Josh, Sep 22 2026) - one main button style everywhere; the secondary is a navy outline. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 12px 24px; font-family: inherit; font-size: 16px; font-weight: 700;
  border-radius: var(--r); border: 1.5px solid transparent;
  cursor: pointer; transition: all var(--transition); text-decoration: none;
  line-height: 1.2;
}

.btn-primary { background: var(--amber); color: var(--ink); border-color: var(--amber-edge); }

.btn-primary:hover { background: var(--amber-2); border-color: var(--amber-edge); color: var(--ink); }

.btn-outline { background: transparent; color: var(--ink); border-color: var(--ink); }

.btn-outline:hover { border-color: var(--ink); color: var(--ink); background: var(--mist); }

.btn-block { width: 100%; text-align: center; }

.btn-sm { min-height: 44px; padding: 8px 16px; font-size: 15px; }

/* ============================================================
   HERO
   ============================================================ */

.hero {
  padding: calc(var(--nav-h) + 44px) 24px 80px;
  max-width: 1140px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 60px; align-items: center;
  min-height: 85vh;
}

/* ============================================================
   SECTIONS
   ============================================================ */

.section { padding: 80px 0; }

.section-tag {
  font-size: 13px; font-weight: 700; color: var(--blue);
  letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 12px;
  text-align: center;
}

.section-sub {
  font-size: 17px; color: var(--text-light); text-align: center;
  max-width: 620px; margin: 0 auto 48px; line-height: 1.7;
}

/* Page headers */
.page-header {
  padding: calc(var(--nav-h) + 44px) 24px 60px;
  background: linear-gradient(170deg, var(--off-white) 0%, var(--white) 100%);
  text-align: center;
}

.page-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(32px, 4.5vw, 48px); font-weight: 700;
  color: var(--navy); line-height: 1.15; margin-bottom: 16px;
}

/* ============================================================
   CONTACT PAGE
   ============================================================ */

.contact-form { display: flex; flex-direction: column; gap: 20px; }

.form-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }

.form-group { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

.form-group label { font-size: 15px; font-weight: 700; color: var(--navy); }

.req { color: var(--blue); }

/* V0.22: 52px fields with 17px text (never under 16px: iPhones zoom in), a 1.5px border and a
   clear focus ring. :where() keeps check boxes and radios out without raising specificity. */
.form-group input:where(:not([type=checkbox]):not([type=radio]):not([type=file])),
.form-group select,
.form-group textarea {
  min-height: 52px; padding: 12px 14px; border: 1.5px solid var(--field-line); border-radius: var(--r);
  font-family: inherit; font-size: 17px; color: var(--text);
  transition: border-color var(--transition), box-shadow var(--transition);
  background: var(--white);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none; border-color: var(--action);
  box-shadow: 0 0 0 4px rgba(31,111,168,0.18);
}

.form-group textarea { resize: vertical; }

.contact-card {
  background: var(--off-white); border-radius: var(--radius-lg);
  padding: 28px; border: 1px solid var(--gray-100);
}

.contact-card h3 { font-size: 16px; font-weight: 700; color: var(--navy); margin-bottom: 16px; }

.contact-card p { font-size: 14px; color: var(--text-light); line-height: 1.6; }

/* ============================================================
   FOOTER
   ============================================================ */

.footer { background: var(--ink-2); padding: 56px 0 0; }

.footer-inner {
  max-width: 1140px; margin: 0 auto; padding: 0 24px;
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.9fr) minmax(0, 1fr) minmax(0, 1.1fr); gap: 40px;
  padding-bottom: 48px;
}

.footer-brand p { font-size: 15px; color: rgba(255,255,255,0.78); margin-top: 16px; line-height: 1.6; }

/* V0.22: the column headings are <h2 class="footer-h"> (they were h4s after a page's h1/h2 -
   a skipped level for screen readers), in small amber capitals. */
.footer-h {
  font-family: inherit; font-size: 12.5px; font-weight: 800; line-height: 1.2; color: var(--amber);
  letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 10px;
}

.footer-links a,
.footer-contact a {
  display: flex; align-items: center; min-height: 44px; font-size: 15.5px; font-weight: 600;
  color: rgba(255,255,255,0.86); transition: color var(--transition);
}

.footer-links a:hover,
.footer-contact a:hover { color: var(--white); }

.footer-contact p { font-size: 15px; color: rgba(255,255,255,0.72); }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: 20px 24px;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px;
}

.footer-bottom p { font-size: 13px; color: rgba(255,255,255,0.62); }

.footer-legal { display: flex; align-items: center; gap: 10px; }

.footer-legal a { display: inline-flex; align-items: center; min-height: 44px;   /* V0.22: 44px targets (were 21px) */
  font-size: 13px; color: rgba(255,255,255,0.62); transition: color var(--transition); }

.footer-legal a:hover { color: rgba(255,255,255,0.75); }

.footer-legal-sep { font-size: 13px; color: rgba(255,255,255,0.35); }

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1fr); min-height: auto; padding-top: calc(var(--nav-h) + 24px); }
  .footer-inner { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .footer-bottom { flex-direction: column; align-items: center; text-align: center; }
}

/* Nav collapses to the hamburger at 1140px and below — above that the six links,
   the phone button and the account button all fit on one line without the
   logo being squeezed. See the "account button" block at the end of this file. */
@media (max-width: 1140px) {
  .nav-links {
      display: none; position: absolute; top: var(--nav-h); left: 0; right: 0;
      background: var(--white); flex-direction: column;
      padding: 16px; border-bottom: 1px solid var(--gray-100);
      box-shadow: var(--shadow);
    }
  .nav-links.open { display: flex; }
  .nav-toggle { display: block; }
  .nav-link { padding: 12px 16px; width: 100%; }
  .nav-link-cta { text-align: center; margin-top: 4px; }
}

@media (max-width: 640px) {
  .hero { padding: calc(var(--nav-h) + 14px) 20px 60px; gap: 32px; }
  .section { padding: 56px 0; }
  .page-header { padding: calc(var(--nav-h) + 24px) 20px 40px; }
  .page-title { font-size: 30px; }
  .form-row { grid-template-columns: minmax(0, 1fr); }
  }

/* ============================================================
   SERVICE CALENDAR PAGE
   ============================================================ */

/* ── 5-month calendar grid ── */
.cal-grid-five {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 20px;
  margin-bottom: 48px;
  padding-top: 14px;
}

.cal-month-season {
  background: var(--white);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-lg);
  overflow: visible;
  transition: box-shadow var(--transition), transform var(--transition);
  position: relative;
}

.cal-month-season:hover {
  box-shadow: var(--shadow);
  transform: translateY(-3px);
}

.cal-month-peak {
  border-color: var(--blue);
  box-shadow: var(--shadow-sm);
}

.cal-month-tag {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--blue);
  color: var(--white);
  padding: 3px 14px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  white-space: nowrap;
  z-index: 2;
}

.cal-month-header {
  background: var(--navy);
  color: var(--white);
  padding: 12px 16px;
  font-weight: 700;
  font-size: 16px;
  text-align: center;
  letter-spacing: 0.3px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.cal-daynames {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  background: var(--navy-light);
  padding: 6px 8px;
  gap: 2px;
}

.cal-daynames span {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,0.8);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.cal-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 3px;
  padding: 8px;
}

.cal-blank {
  aspect-ratio: 1;
}

.cal-day {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  cursor: default;
}

.cal-day:hover {
  transform: scale(1.15);
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  z-index: 1;
  position: relative;
}

/* Service colors */
.cal-yellow   { background: #FFF3CD; color: #856404; }

.cal-blue     { background: #CCE5FF; color: #004085; }

.cal-green    { background: #C3E6CB; color: #155724; }

.cal-red      { background: #F5C6CB; color: #721C24; }

.cal-purple   { background: #D6BCFA; color: #44337A; }

.cal-inactive { background: var(--gray-50); color: var(--gray-400); }

.cal-weekend  { background: var(--gray-50); color: var(--gray-400); }

/* ── Season summary cards ── */
.cal-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.cal-summary-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px;
  background: var(--white);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-lg);
  transition: box-shadow var(--transition);
}

.cal-summary-card:hover { box-shadow: var(--shadow-sm); }

.cal-summary-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--blue-pale);
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cal-summary-card strong {
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
  display: block;
  margin-bottom: 2px;
}

.cal-summary-card span {
  font-size: 14px;
  color: var(--text-light);
}

/* ── Calendar responsive ── */
@media (max-width: 1024px) {
  .cal-grid-five { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  .cal-grid-five { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .cal-summary { grid-template-columns: minmax(0, 1fr); }
      }

@media (max-width: 480px) {
  .cal-grid-five { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .cal-day { font-size: 12px; }
    }

/* ============================================================
   ADDED AUGUST 2026 — photos, FAQ, call bar, gallery
   ============================================================ */

/* ---- nav call button ---- */
.nav-call { display: inline-flex; align-items: center; gap: 0; white-space: nowrap; }

.nav-call svg { flex: none; }

.nav-call { min-width: 44px; justify-content: center; }   /* V0.22: the icon-only desktop button is still a 44px target */

/* Icon-only on the desktop nav row -- the number is still visible in the hero,
   footer, and the mobile sticky call bar, so this isn't a loss, it's freeing
   the ~110px the full digits cost so the rest of the row can breathe.
   Restored to full text in the stacked hamburger menu below, where there's
   no width pressure. Added Aug 23 2026 to fix the smushed logged-in nav.
   V0.18 (Sep 13 2026): on desktop the first click SLIDES the number open
   instead of dialing (tel: does nothing useful on most desktops); a second
   click on the open button follows the tel: link. main.js handles the click;
   below 1140px the number is always shown and the link dials straight away. */
.nav-call-text {
  display: inline-block; max-width: 0; overflow: hidden; opacity: 0; margin-left: 0;
  transition: max-width .35s ease, opacity .25s ease, margin-left .35s ease;
}

.nav-call.is-open .nav-call-text { max-width: 130px; opacity: 1; margin-left: 7px; }

@media (max-width: 1140px) {
  .nav-call { gap: 7px; }
  .nav-call-text { max-width: none; opacity: 1; margin-left: 0; transition: none; }
}

/* ---- sticky call / text bar (phones) ---- */
.mobile-bar { display: none; }

/* V0.22 (style refresh Phase 1): Call and Text as small icon buttons, the amber
   Free Estimate taking the rest of the row. On the Contact page footer.php prints only
   Call and Text (the visitor is already on the form) and adds .mobile-bar--two. */
@media (max-width: 768px) {
  .mobile-bar {
      display: grid; grid-template-columns: 58px 58px minmax(0, 1fr); gap: 8px;
      position: fixed; left: 0; right: 0; bottom: 0; z-index: 1200;
      background: rgba(255,255,255,0.97);
      backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
      border-top: 1px solid var(--line);
      box-shadow: 0 -6px 18px rgba(15,43,60,0.08);
      padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    }
  .mobile-bar--two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .mobile-bar-btn {
      display: inline-flex; align-items: center; justify-content: center; gap: 8px;
      min-height: 50px; padding: 4px 6px; border-radius: var(--r);
      font-size: 17px; font-weight: 700; line-height: 1.1; text-align: center; text-decoration: none;
    }
  .mobile-bar-btn--call, .mobile-bar-btn--text {
      flex-direction: column; gap: 2px; font-size: 12px;
      background: var(--white); color: var(--ink); border: 1.5px solid var(--line);
    }
  .mobile-bar-btn--call svg, .mobile-bar-btn--text svg { width: 20px; height: 20px; }
  .mobile-bar--two .mobile-bar-btn--call, .mobile-bar--two .mobile-bar-btn--text { flex-direction: row; gap: 8px; font-size: 16px; }
  .mobile-bar-btn--quote { background: var(--amber); color: var(--ink); border: 1.5px solid var(--amber-edge); white-space: nowrap; }
  .mobile-bar-btn:hover { color: var(--ink); }
  .mobile-bar-btn--call:hover, .mobile-bar-btn--text:hover { background: var(--mist); }
  .mobile-bar-btn--quote:hover { color: var(--ink); background: var(--amber-2); }
  body { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
  .footer-bottom { padding-bottom: 8px; }
}

/* ---------------------------------------------------------------------------
   PHOTO FRAMES
   Every photo on the site sits in a frame with a FIXED shape, and the photo
   fills that shape with object-fit: cover — cropped to fit, never squashed.
   That is what keeps the page tidy no matter what came off the phone:
   a 4:3 shot and a 16:9 shot land in the same box and the rows still line up.
   Never set only a max-height on a photo; that clamps the height while the
   width stays at 100% and the picture distorts.
--------------------------------------------------------------------------- */

/* ---- before / after ---- */
.ba-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 28px; }

.ba-grid--single { grid-template-columns: minmax(0, 1fr); max-width: 760px; margin: 32px auto 0; }

.ba-card { margin: 0; background: #fff; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); }

.ba-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2px; background: var(--gray-200); }

.ba-half { position: relative; background: var(--gray-50); }

.ba-img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }

.ba-label {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 999px; color: #fff;
}

.ba-label--before { background: rgba(15,43,60,0.85); }

.ba-label--after { background: var(--amber); color: var(--ink); }

.ba-caption { padding: 14px 16px; font-size: 14px; color: var(--text-light); }

/* ---------------------------------------------------------------------------
   BEFORE / AFTER SLIDER
   The two photos are stacked exactly on top of each other. The BEFORE photo
   sits on top inside .ba-clip, which is clipped at --ba-pos: left of the
   divider you see the before, right of it the after.
   The drag control is a transparent range input covering the photo.
--------------------------------------------------------------------------- */

.ba-slider { --ba-pos: 50%; max-width: 900px; margin: 32px auto 0; }

.ba-slider--wide { max-width: 1040px; }

.ba-stage {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--gray-100);
  box-shadow: var(--shadow-lg);
  touch-action: pan-y;
  user-select: none;
}

@media (max-width: 560px) {
  .ba-stage { aspect-ratio: 4 / 3; }
}

.ba-frame { position: absolute; inset: 0; }

.ba-frame[hidden] { display: none; }

.ba-layer {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  pointer-events: none;
}

/* The before photo, clipped at the divider. The image itself is never
   resized — only the amount of it you can see changes. */
.ba-clip {
  position: absolute; inset: 0;
  clip-path: inset(0 calc(100% - var(--ba-pos)) 0 0);
}

.ba-tag {
  position: absolute; top: 14px; z-index: 3;
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: #fff;
  padding: 5px 11px; border-radius: 999px;
  pointer-events: none;
  transition: opacity var(--transition);
}

.ba-tag--before { left: 14px; background: rgba(15,43,60,0.82); }

.ba-tag--after  { right: 14px; background: var(--amber); color: var(--ink); }

.ba-slider[data-ba-edge="left"]  .ba-tag--before { opacity: 0; }

.ba-slider[data-ba-edge="right"] .ba-tag--after  { opacity: 0; }

.ba-divider {
  position: absolute; top: 0; bottom: 0; z-index: 4;
  left: var(--ba-pos);
  width: 3px; margin-left: -1.5px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(15,43,60,0.18), 0 2px 10px rgba(0,0,0,0.35);
  pointer-events: none;
}

.ba-knob {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 46px; height: 46px; border-radius: 50%;
  background: #fff; color: var(--navy);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 14px rgba(0,0,0,0.32);
  transition: transform var(--transition);
}

.ba-slider.is-dragging .ba-knob { transform: translate(-50%, -50%) scale(1.08); }

/* Transparent, full-size range input: gives mouse drag, touch drag,
   click-to-jump and arrow-key control with no custom drag code. */
.ba-range {
  position: absolute; inset: 0; z-index: 5;
  width: 100%; height: 100%; margin: 0;
  opacity: 0; cursor: ew-resize;
  -webkit-appearance: none; appearance: none; background: transparent;
}

.ba-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 52px; height: 100%; cursor: ew-resize;
}

.ba-range::-moz-range-thumb {
  width: 52px; height: 400px; border: 0; border-radius: 0; cursor: ew-resize;
}

.ba-range:focus-visible { outline: none; }

.ba-slider:has(.ba-range:focus-visible) .ba-knob {
  box-shadow: 0 0 0 4px rgba(26,188,156,0.55), 0 3px 14px rgba(0,0,0,0.32);
}

.ba-slider-caption {
  margin: 16px 0 0; text-align: center;
  font-size: 15px; color: var(--text-light);
}

.ba-slider-hint {
  margin: 4px 0 0; text-align: center;
  font-size: 13px; color: var(--muted);
}

/* ---- thumbnail picker under the slider ---- */
.ba-thumbs {
  display: flex; gap: 12px;
  margin-top: 20px; padding: 4px 2px 12px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}

.ba-thumbs::-webkit-scrollbar { height: 8px; }

.ba-thumbs::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 999px; }

.ba-thumb {
  flex: 0 0 auto; width: 158px;
  scroll-snap-align: start;
  padding: 0 0 8px; margin: 0;
  background: #fff; border: 2px solid transparent;
  border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-sm);
  cursor: pointer; text-align: left;
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}

.ba-thumb:hover { transform: translateY(-2px); box-shadow: var(--shadow); }

.ba-thumb.is-active { border-color: var(--amber); box-shadow: 0 0 0 3px rgba(242,181,68,.35), var(--shadow); }

.ba-thumb-imgs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1px; background: var(--gray-200); }

.ba-thumb-img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; display: block; }

.ba-thumb-label {
  display: block; padding: 8px 10px 0;
  font-size: 12px; line-height: 1.35; color: var(--text-light);
}

.ba-thumb.is-active .ba-thumb-label { color: var(--navy); font-weight: 600; }

@media (max-width: 560px) {
  .ba-thumb { width: 132px; }
}

/* With JavaScript off the slider still renders as a clean 50/50 split —
   the divider position is set in the markup, not by script. */
/* ---- small form helpers ---- */
.field-hint { display: block; margin-top: 6px; font-size: 13px; color: var(--text-light); }

.field-optional { font-weight: 400; color: var(--muted); font-size: 13px; }

/* ============================================================
   ADDED AUGUST 23 2026 — customer account button (nav) and
   Customer Portal block (footer)

   Why it exists: V0.9 pulled "Log In" out of the nav and left the only
   path in as a plain text link at the bottom of the footer's Contact
   column, which returning customers could not find. The account button
   below sits at the top right — where people look for a login — but is
   styled as a quiet outlined button so it never competes with the blue
   phone CTA next to it. Deliberately short ("Log In", not "Customer Log
   In"): at the 1140px container the whole row leaves only ~34px of slack,
   and the longer label does not fit without shrinking the logo. The
   footer block spells it out in full instead.
   ============================================================ */

.nav-account {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  margin-left: 4px; padding: 7px 16px; min-height: 44px;   /* V0.22: 44px target (was 39px) */
  font-size: 14px; font-weight: 600;
  color: var(--navy);
  border: 1px solid var(--gray-200); border-radius: var(--radius);
  background: var(--white);
}

.nav-account:hover {
  color: var(--navy); background: var(--gray-50); border-color: var(--gray-400);
}

.nav-account.active { background: var(--gray-50); border-color: var(--gray-400); }

.nav-account svg { flex: none; opacity: 0.6; }

/* In the stacked hamburger menu it becomes a full-width row, set off from
   the marketing links by a rule so it still reads as a separate thing. */
@media (max-width: 1140px) {
  .nav-account {
      width: 100%; margin-left: 0; margin-top: 12px; padding-top: 12px; padding-bottom: 12px;
      justify-content: center;
      border: none; border-top: 1px solid var(--gray-100); border-radius: 0;
    }
  .nav-account:hover { background: var(--gray-50); border-color: var(--gray-100); }
}

/* ---- footer Customer Portal column ---- */
.footer-portal p {
  font-size: 15px; color: rgba(255,255,255,0.72);
  line-height: 1.6; margin-bottom: 16px;
}

.footer-portal-btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  padding: 10px 18px; border-radius: var(--r);
  font-size: 15px; font-weight: 700;
  color: var(--white); background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.25);
  transition: background var(--transition), border-color var(--transition);
}

.footer-portal-btn:hover {
  color: var(--white); background: rgba(255,255,255,0.16);
  border-color: rgba(255,255,255,0.5);
}

.footer-portal-btn svg { flex: none; opacity: 0.75; }

/* ─────────────────────────────────────────────────────────────
   FORM VALIDATION FEEDBACK  (added 2026-08-23)
   Why this exists: on iOS Safari a `required` CHECKBOX that hasn't been
   ticked blocks the submit and shows NO bubble at all — the button simply
   does nothing, with no page movement and no message. Josh hit exactly that
   on the signup form. The forms now validate in JavaScript and show the
   message themselves, so a blocked submit is always visible on every device.
   ───────────────────────────────────────────────────────────── */

.hs-form-error {
  display: none;
  background: #FEE;
  border: 1px solid #FCC;
  color: #C33;
  padding: 12px 14px;
  border-radius: 8px;
  margin: 14px 0 4px;
  font-size: 14px;
  line-height: 1.45;
}

.hs-form-error.is-shown { display: block; }

/* The control that is actually blocking the submit. */
.hs-invalid,
input.hs-invalid,
textarea.hs-invalid,
select.hs-invalid {
  border-color: #C33 !important;
  box-shadow: 0 0 0 3px rgba(204, 51, 51, 0.12) !important;
}

.hs-invalid-mark { outline: 2px solid #C33; outline-offset: 3px; border-radius: 4px; }

/* ─────────────────────────────────────────────────────────────
   reCAPTCHA ON NARROW SCREENS  (added 2026-08-23)
   Google renders the v2 widget at a FIXED 304px. The form cards are only
   ~260-280px wide inside their padding on a phone, so the widget ran off the
   right edge and got clipped. Scaling it down is Google's own sanctioned fix
   (the widget must not be restyled, but it may be transformed).
   Applies to contact.php, quote.php and signup.php alike.
   ───────────────────────────────────────────────────────────── */

@media (max-width: 420px) {
  .g-recaptcha {
      transform: scale(0.85);
      -webkit-transform: scale(0.85);
      transform-origin: 0 0;
      -webkit-transform-origin: 0 0;
      height: 66px;              /* 78px * 0.85, so it reserves the right space */
    }
}

/* ─────────────────────────────────────────────────────────────
   PHONE OVERFLOW FIXES  (added 2026-08-23)

   Josh reported on his phone that the hamburger, the sticky bottom bar and
   things on the signup form were all "clipping off the right", and guessed the
   whole page was shifted. He was right, and there were two separate causes.

   (1) THE BIG ONE — a <select> stretching the entire page.
       contact.php's price-feedback dropdown has long option labels. A <select>
       sizes itself to its WIDEST OPTION, and as a block/flex/grid child its
       `min-width: auto` means it refuses to shrink. That one control measured
       407px, which forced the LAYOUT VIEWPORT itself out to 431px on a 360px
       phone — so every fixed and full-width element on the page (the nav, the
       hamburger, the sticky call bar) was laid out 431px wide and the right
       end of each fell off the screen. One dropdown, whole page broken.

       `min-width: 0` lets it shrink to the column. The closed control
       truncates its label with an ellipsis; the open list still shows the full
       text, so nothing is lost.
   ───────────────────────────────────────────────────────────── */

.form-group input,
.form-group select,
.form-group textarea,
.contact-form select {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.form-group select,
select {
  text-overflow: ellipsis;
}

/* NOTE on why `width: 100%` is the operative part, not `min-width: 0`:
   these controls never had a width set. They only LOOKED full-width because
   `.form-group` is a flex column, which stretches its children. Stretching
   does not change a control's intrinsic contribution to layout — a <select>
   still reports the width of its longest <option>, and that is what was
   inflating the page. An explicit percentage width removes the intrinsic
   contribution entirely. Appearance is unchanged; they were already rendering
   at 100% of the column. */
/* (2) The sticky call bar's buttons.
       `flex: 1 1 0` looks like it shares the row evenly, but a flex item's
       default `min-width: auto` stops it shrinking below its own content. On a
       narrow phone — or any phone with iOS Dynamic Type set larger — "Text a
       Photo" refuses to shrink, the row overflows, and "Free Estimate" is
       pushed off the edge. `min-width: 0` makes the thirds real. */
@media (max-width: 768px) {
  .mobile-bar-btn {
      min-width: 0;
      overflow: hidden;
    }
  .mobile-bar-btn svg { flex: 0 0 auto; }
}

/* Very narrow phones: buy the row a little more room rather than clipping. */
@media (max-width: 360px) {
  .mobile-bar { grid-template-columns: 52px 52px minmax(0, 1fr); gap: 6px; padding-left: 6px; padding-right: 6px; }
  .mobile-bar--two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .mobile-bar-btn--quote { font-size: 16px; }
}

/* (3) The nav logo on phones — why the hamburger was cut off.

       `.nav-logo-img` is `height: 80px; width: auto`, which works out to 315px
       wide at the logo's 720x183 aspect. The nav row then needs
       24 (padding) + 315 (logo) + 38 (hamburger) + 24 (padding) = 401px.
       On a 360px phone the hamburger's right edge landed at 377px — 17px of it
       off the screen. It clipped on anything narrower than about 377px, which
       is most phones in portrait.

       Josh set the floor on 2026-08-23: 240px wide / 61px tall on phones.
       Height is what's declared (width follows from the aspect ratio), and it
       only applies below 420px — tablets and desktop keep the full 80px.
       This replaces the old "never shrink the logo" rule: there is a minimum
       now, and this is it. Don't go below 240px wide without asking him. */
@media (max-width: 420px) {
  .nav-logo-img { height: 61px; }
  /* 240px wide at 720:183 */
}

/* Even at 240px the row is 24+240+38+24 = 326px, so a 320px phone is 6px over.
   Trim the nav padding there rather than shrinking the logo any further. */
@media (max-width: 340px) {
  .nav-inner { padding-left: 12px; padding-right: 12px; }
}

/* ─────────────────────────────────────────────────────────────
   GOOGLE PLACES ADDRESS BOX  (added 2026-08-23)

   PlaceAutocompleteElement brings its OWN input and its own Material styling
   inside a shadow root — the site's `.form-group input` rules cannot reach it.
   Left alone it looked nothing like the rest of the form, and on Josh's machine
   it rendered as a BLACK BOX on a white page, because the component follows the
   operating system's colour scheme and his is set to dark.

   Two fixes, both required:
     1. `color-scheme: light` pins it to the light theme regardless of the
        visitor's OS setting. The rest of this site has no dark mode, so a
        component that follows the OS is simply wrong here.
     2. The `--gmp-mat-*` custom properties are the documented way in; they DO
        pierce the shadow root. Ordinary selectors do not.
   ───────────────────────────────────────────────────────────── */

.hs-address-ac {
  color-scheme: light;                 /* never follow the visitor's dark mode */
  display: block;
  width: 100%;

  /* Match .form-group input exactly. */
  --gmp-mat-color-surface: var(--white);
  --gmp-mat-color-on-surface: var(--text);
  --gmp-mat-color-on-surface-variant: var(--text-light);
  --gmp-mat-color-neutral-container: var(--white);
  --gmp-mat-color-secondary-container: var(--blue-pale);
  --gmp-mat-color-on-secondary-container: var(--navy);
  --gmp-mat-color-outline-decorative: var(--gray-200);
  --gmp-mat-font-family: 'DM Sans', system-ui, -apple-system, sans-serif;

  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  background: var(--white);
}

.hs-address-ac:focus-within {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(46, 134, 193, 0.12);
}

/* The suggestion list, if it renders outside the element. Google's default
   z-index (1000) sits UNDER this site's nav (1100) and sticky mobile bar
   (1200), which would hide suggestions behind them on a phone. */
.pac-container,
.gmp-place-autocomplete-list,
[class*="place-autocomplete"] [role="listbox"] {
  z-index: 2000 !important;
}

.pac-container {
  border-radius: 8px;
  border: 1px solid var(--gray-200);
  box-shadow: 0 8px 24px rgba(15, 43, 60, 0.12);
  font-family: 'DM Sans', system-ui, sans-serif;
}

.pac-item { padding: 8px 12px; font-size: 14px; cursor: pointer; }

.pac-item:hover { background: var(--gray-50); }

.pac-item-query { font-size: 14px; color: var(--navy); }

/* ============================================================
   ADDED AUGUST 28 2026 — THE SUBSCRIPTION REDESIGN (V0.10)
   Home page hero + seasonal featured cards, the public Services
   catalog, How It Works, the portal sidebar layout, the configurator
   with its blue/green/magenta bar, and the visit calendar.
   ============================================================ */

:root {
  --green: #1E9E6A;
  --green-pale: #E6F6EE;
  --magenta: #C2378F;
  --magenta-pale: #FBE9F4;
  --amber-pale: #FFF6DF;
  --amber-text: #8A5A00;
}

/* ---- the "what a visit is" strip on the home page ---- */
.visit-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }

@media (max-width: 980px) {
  .visit-strip { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-inline: auto; }
}

.visit-step { background: var(--white); border: 1px solid var(--gray-100); border-radius: var(--radius-lg); padding: 28px; }

.visit-step-icon { width: 48px; height: 48px; border-radius: 12px; background: var(--blue-pale); color: var(--brand); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }

.visit-step h3 { font-size: 17px; font-weight: 700; color: var(--navy); margin-bottom: 8px; }

.visit-step p { font-size: 15px; color: var(--text-light); line-height: 1.6; }

/* ---- public services catalog ---- */
.svc-group { padding: 64px 0; }

.svc-group:nth-of-type(even) { background: var(--off-white); }

.svc-jump { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 8px 0 0; }

.svc-jump a { font-size: 14px; font-weight: 600; color: var(--navy); background: #fff; border: 1px solid var(--gray-200); border-radius: 999px; padding: 8px 16px; transition: all var(--transition); }

.svc-jump a:hover { background: var(--navy); color: #fff; border-color: var(--navy); }

/* ---- how it works: numbered steps with a rail ---- */
.steps { max-width: 860px; margin: 0 auto; display: grid; gap: 0; }

.step { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 24px; padding: 28px 0; border-bottom: 1px solid var(--gray-100); }

.step:last-child { border-bottom: none; }

.step h3 { font-size: 20px; font-weight: 700; color: var(--navy); margin-bottom: 8px; }

.step p { font-size: 16px; color: var(--text-light); line-height: 1.7; margin-bottom: 8px; }

.step ul { margin: 8px 0 0 20px; color: var(--text-light); font-size: 15px; line-height: 1.65; }

.step li { margin-bottom: 6px; }

.hiw-cal-spring { background: #C3E6CB; color: #155724; }

.hiw-cal-summer { background: #FFF3CD; color: #856404; }

.hiw-cal-fall   { background: #F5C6CB; color: #721C24; }

.hiw-cal-winter { background: #CCE5FF; color: #004085; }

/* ---- shared "quiet notice" ---- */
.notice { background: var(--blue-pale); border-left: 3px solid var(--brand); border-radius: 0 var(--radius) var(--radius) 0; padding: 14px 18px; font-size: 14.5px; color: var(--navy); line-height: 1.6; }

.interest-opt { position: relative; }

.interest-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }

.interest-opt label {
  display: flex; flex-direction: column; gap: 4px; cursor: pointer;
  border: 2px solid var(--gray-200); border-radius: var(--radius); padding: 14px 16px;
  font-size: 15px; font-weight: 700; color: var(--navy); transition: all var(--transition);
  width: 100%; min-width: 0; box-sizing: border-box;
}

.interest-opt label small { font-size: 13px; font-weight: 400; color: var(--text-light); line-height: 1.45; }

.interest-opt input:checked + label { border-color: var(--blue); background: var(--blue-pale); }

.interest-opt input:focus-visible + label { box-shadow: 0 0 0 3px rgba(46,134,193,.25); }

.interest-opt input.hs-invalid + label { border-color: #C33 !important; box-shadow: 0 0 0 3px rgba(204,51,51,.12); }

/* ============================================================
   CUSTOMER PORTAL — left sidebar layout (Josh, 2026-08-28)
   ============================================================ */

.portal-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 36px; align-items: start; }

.portal-side { position: sticky; top: calc(var(--nav-h) + 16px); }

.portal-who { padding: 0 6px 16px; border-bottom: 1px solid var(--gray-100); margin-bottom: 12px; }

.portal-who-name { font-family: 'Playfair Display', serif; font-size: 20px; color: var(--navy); line-height: 1.2; }

.portal-nav { display: flex; flex-direction: column; gap: 2px; }

.portal-nav a {
  display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: var(--radius);
  font-size: 15px; font-weight: 500; color: var(--gray-600); transition: all var(--transition);
}

.portal-nav a svg { flex: none; opacity: .75; }

.portal-nav a:hover { background: var(--gray-50); color: var(--navy); }

.portal-nav a.active { background: var(--blue-pale); color: var(--navy); font-weight: 700; }

.portal-nav a.active svg { opacity: 1; color: var(--brand); }

.portal-nav-sep { height: 1px; background: var(--gray-100); margin: 10px 8px; }

.portal-nav .portal-nav-badge { margin-left: auto; font-size: 11px; font-weight: 700; background: var(--magenta); color: #fff; border-radius: 999px; padding: 2px 8px; }

.portal-menu-btn { display: none; }

.portal-main { min-width: 0; }

.portal-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }

.portal-head h1 { font-family: 'Playfair Display', serif; font-size: clamp(24px, 3vw, 34px); color: var(--navy); line-height: 1.15; }

.portal-head p { color: var(--text-light); font-size: 15px; margin-top: 4px; }

.pstat { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--gray-100); font-size: 14px; }

.pstat:last-child { border-bottom: none; }

.pstat span:first-child { color: var(--text-light); }

.pstat span:last-child { font-weight: 600; color: var(--navy); text-align: right; }

.pill { display: inline-block; padding: 3px 10px; border-radius: 100px; font-size: 12px; font-weight: 700; white-space: nowrap; }

.pill--amber { background: var(--amber-pale); color: var(--amber-text); }

.pill--green { background: var(--green-pale); color: #14563B; }

.pill--blue { background: var(--blue-pale); color: var(--navy); }

.pill--gray { background: var(--gray-50); color: var(--gray-600); }

.empty-note { text-align: center; padding: 28px 12px; color: var(--text-light); font-size: 15px; }

.ptile { background: var(--white); border: 1px solid var(--gray-100); border-radius: var(--radius-lg); padding: 20px 22px; box-shadow: var(--shadow-sm); }

.ptile-label { font-size: 12.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--text-light); margin-bottom: 6px; }

.ptile-value { font-family: 'Playfair Display', serif; font-size: 26px; color: var(--navy); line-height: 1.15; }

@media (max-width: 900px) {
  .portal-layout { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .portal-side { position: static; }
  .portal-menu-btn {
      display: flex; align-items: center; justify-content: space-between; width: 100%;
      background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius);
      padding: 12px 16px; font-family: inherit; font-size: 15px; font-weight: 700; color: var(--navy); cursor: pointer;
    }
  .portal-who { display: none; }
  .portal-nav { display: none; margin-top: 8px; background: var(--white); border: 1px solid var(--gray-100); border-radius: var(--radius); padding: 8px; box-shadow: var(--shadow); }
  .portal-nav.open { display: flex; }
}

.ptile--due { border-color: var(--amber-text); }

.ptile--due .ptile-value { color: var(--amber-text); }

.pgrid-tag--before { background: rgba(15,43,60,0.82); }

.pgrid-tag--after { background: var(--amber); color: var(--ink); }

.cfg-item { position: relative; }

.cfg-item > input { position: absolute; opacity: 0; width: 1px; height: 1px; }

.cfg-item > label {
  display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 14px; align-items: start; cursor: pointer;
  background: var(--white); border: 1.5px solid var(--gray-200); border-radius: var(--radius); padding: 14px 16px;
  transition: all var(--transition);
}

.cfg-item > input:checked + label { border-color: var(--blue); background: var(--blue-pale); }

.cfg-item > input:focus-visible + label { box-shadow: 0 0 0 3px rgba(46,134,193,.25); }

.cfg-item > input:disabled + label { opacity: .55; cursor: not-allowed; }

.cfg-box { width: 22px; height: 22px; border-radius: 6px; border: 2px solid var(--gray-400); margin-top: 1px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 13px; font-weight: 700; }

.cfg-item > input:checked + label .cfg-box { background: var(--blue); border-color: var(--blue); }

.cfg-item > input:checked + label .cfg-box::after { content: "\2713"; }

/* the bar: blue floor · green services · magenta savings */

.vcal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; background: var(--navy); color: #fff; }

.vcal-head b { font-size: 16px; }

.vcal-head a, .vcal-head button { white-space: nowrap; color: #fff; background: rgba(255,255,255,.12); border: none; border-radius: 6px; padding: 6px 12px; font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }

.vcal-head a:hover, .vcal-head button:hover { background: rgba(255,255,255,.22); color: #fff; }

.vcal-daynames { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); background: var(--navy-light); padding: 6px 8px; }

.vcal-daynames span { text-align: center; font-size: 11px; font-weight: 700; color: rgba(255,255,255,.8); text-transform: uppercase; letter-spacing: .3px; }

.vcal-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 10px 14px 14px; font-size: 13px; color: var(--text-light); border-top: 1px solid var(--gray-100); }

.vcal-legend span { display: inline-flex; align-items: center; gap: 6px; }

.vcal-legend i { width: 14px; height: 14px; border-radius: 4px; display: inline-block; border: 1.5px solid var(--gray-200); background: #fff; }

.vcal-legend i.route { background: var(--green-pale); border-color: var(--green); }

.vcal-legend i.req { background: var(--amber-pale); border-color: var(--gold); }

.vcal-legend i.flag { background: var(--magenta); border-color: var(--magenta); border-radius: 50%; }

/* the "!" explainer — a small card that appears under the calendar for the focused/selected route day */

@media (max-width: 480px) {
  .vcal-head b { font-size: 14px; }
  .vcal-head a, .vcal-head button { padding: 6px 9px; font-size: 12px; }
}

/* ============================================================
   ADDED AUGUST 28 2026 (evening) — HOME PAGE REBUILT TO THE
   CONVERSION CRITIQUE: problem chips, maintenance-manager strip,
   four-step calendar, season grid, pricing explainer, sample
   visit report, before/after Home Strategy, fit lists, painting
   band, local-by-design note.
   ============================================================ */

.chip { padding: 9px 16px; background: var(--white); border: 1px solid var(--gray-200); border-radius: 999px; font-size: 14.5px; font-weight: 500; color: var(--navy); }

/* before / after Home Strategy */
.ba-hs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; max-width: 980px; margin: 0 auto; }

.ba-hs-col { border-radius: var(--radius-lg); padding: 30px 34px; }

.ba-hs-col h3 { font-size: 13px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; margin-bottom: 14px; }

.ba-hs-col--before { background: var(--white); border: 1px solid var(--gray-100); }

.ba-hs-col--before h3 { color: var(--gray-400); }

.ba-hs-col--before ul { list-style: none; margin: 0; }

.ba-hs-col--before li { font-family: 'Playfair Display', serif; font-size: 17px; color: var(--gray-600); padding: 7px 0; border-bottom: 1px dashed var(--gray-100); line-height: 1.4; }

.ba-hs-col--before li:last-child { border-bottom: none; }

.ba-hs-col--after { background: var(--navy); color: #fff; }

.ba-hs-col--after h3 { color: var(--blue-glow); }

.ba-hs-lead { font-family: 'Playfair Display', serif; font-size: 24px; margin-bottom: 12px; }

.ba-hs-foot { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.15); font-size: 15px; color: rgba(255,255,255,.8); }

@media (max-width: 800px) {
  .ba-hs { grid-template-columns: minmax(0, 1fr); }
}

/* How It Works: founding band without the price table */

.cfgq { display: none; border: 1.5px solid var(--blue); border-top: 0; border-radius: 0 0 var(--radius) var(--radius); background: var(--white); padding: 14px 16px 6px; }

.cfgq-block { padding: 6px 0 12px; }

.cfgq-block + .cfgq-block { border-top: 1px dashed var(--gray-200); padding-top: 12px; }

.cfgq-label { font-size: 14px; font-weight: 600; color: var(--navy); margin-bottom: 8px; }

.cfgq-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }

.cfgq-card { position: relative; display: flex; gap: 10px; align-items: flex-start; border: 1.5px solid var(--gray-200); border-radius: var(--radius); padding: 10px 12px; cursor: pointer; background: var(--white); min-height: 44px; }

.cfgq-card input { position: absolute; opacity: 0; width: 1px; height: 1px; }

.cfgq-card:has(input:checked) { border-color: var(--blue); background: var(--blue-pale); }

.cfgq-card:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(46,134,193,.25); }

.cfgq-card img { width: 56px; height: 56px; object-fit: cover; border-radius: 6px; flex: none; background: var(--gray-50); }

.cfgq-card-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

.cfgq-card-title { font-size: 13.5px; font-weight: 600; color: var(--navy); line-height: 1.35; }

.cfgq-card-desc { font-size: 12.5px; color: var(--text-light); line-height: 1.45; }

.cfgq-card-note { font-size: 11.5px; color: var(--text-light); }

.cfgq-delta { display: inline-block; font-size: 12px; font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; }

.cfgq-delta--less { color: var(--green); }

.cfgq-delta--zero { color: var(--text-light); font-weight: 500; }

.cfgq-stepper { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.cfgq-stepper input { width: 64px; text-align: center; padding: 8px 6px; font-size: 15px; font-weight: 600; min-height: 44px; }

.cfgq-step { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--gray-300); background: var(--white); font-size: 20px; line-height: 1; color: var(--navy); cursor: pointer; }

.cfgq-step:hover { border-color: var(--blue); color: var(--blue); }

.cfgq-perunit { font-size: 12.5px; color: var(--text-light); }

.cfgq-yes { position: relative; display: flex; gap: 10px; align-items: flex-start; cursor: pointer; font-size: 14px; color: var(--navy); line-height: 1.45; min-height: 44px; padding: 6px 0; }

.cfgq-yes input { position: absolute; opacity: 0; width: 1px; height: 1px; }

.cfgq-yes .cfg-box { flex: none; }

.cfgq-yes input:checked + .cfg-box { background: var(--blue); border-color: var(--blue); }

.cfgq-yes input:checked + .cfg-box::after { content: "\2713"; }

.cfgq-yes input:focus-visible + .cfg-box { box-shadow: 0 0 0 3px rgba(46,134,193,.25); }

@media print {
  .nav,
  .portal-side,
  .footer,
  .mobile-bar,
  .notice { display: none !important; }
  .portal-layout { display: block; }
  body { background: #fff; }
}

/* ── Visits cards + cancellation (V0.16 Phase C, C4) ── */
.vseasons { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }

.vseason { border: 1.5px solid var(--gray-200); border-radius: var(--radius); padding: 12px 14px; background: var(--white); }

.vseason--open { border-color: var(--green); background: var(--green-pale); }

.vseason--sched { border-color: var(--brand); background: var(--blue-pale); }

.vseason-name { font-weight: 700; color: var(--navy); font-size: 15px; }

.vseason-name small { font-weight: 500; color: var(--text-light); font-size: 12px; margin-left: 4px; }

.vseason-state { font-size: 13.5px; color: var(--navy); margin-top: 4px; line-height: 1.4; }

.vseason--open .vseason-state { color: #14563B; font-weight: 600; }

.vseason--wait .vseason-state { color: var(--text-light); }

.vseason-sub { font-size: 12.5px; color: var(--text-light); margin-top: 6px; line-height: 1.45; }

/* ============================================================
   V0.16 PHASE D (2026-09-10) — SIGNING AN ESTIMATE (sign.php)
   The document is a real PDF drawn by PDF.js; every control here
   is positioned in PERCENTAGES over that page, so it re-scales
   itself on resize and rotation instead of drifting off its line.
   ============================================================ */

.sgn-back { color: var(--text-light); font-size: 14px; text-decoration: none; white-space: nowrap; }

.sgn-back:hover { color: var(--blue); }

@keyframes sgnPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(212,168,67,.55); }
  50%      { box-shadow: 0 0 0 6px rgba(212,168,67,0); }
}

@keyframes sgnMissing {
  0%, 100% { box-shadow: 0 0 0 0 rgba(204,51,51,.55); }
  50%      { box-shadow: 0 0 0 6px rgba(204,51,51,0); }
}

@media (max-width: 640px) {
  .sgn-back span { display: none; }
}

/* =============================================================================
   V0.17 (2026-09-10) — ASSESSMENT SCHEDULING, THE ADMIN CALENDAR, NOTICES
   schedule.php (public booking), admin_cal.php (Calendar tab), portal notices
   and the refund card. The picker reuses .vcal from the portal's visit calendar.
   ============================================================================= */

/* ===========================================================================
   V0.21 (Sep 17 2026) — BOOK YOUR PAINTING JOB (/schedule)
   The day picker: whole days, no time slots. A start day lights up the whole
   run so the customer sees exactly which days they are taking, then the hold
   card counts the hour down while they pay the deposit.
   =========================================================================== */

.pnotice--refund { background: var(--green-pale); border-left-color: var(--green); }

.acal-chip--assessment { background: var(--amber-pale); color: var(--amber-text); border-color: #F0D9A8; }

.acal-chip--visit { background: var(--green-pale); color: #14563B; border-color: #BFE5D0; }

.acal-chip--entry { background: var(--gray-100); color: var(--navy); border-color: var(--gray-200); }

/* ===========================================================================
   YOUR WORK — full screen, save image, video pairs (Website V0.19, Sep 14 2026)
   =========================================================================== */

/* ---- the slider's tool row ---- */
.ba-tools { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }

.ba-tool {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border: 1px solid var(--gray-200); border-radius: 999px;
  background: #fff; color: var(--navy); font: inherit; font-size: 13.5px; font-weight: 600;
  cursor: pointer; transition: border-color var(--transition), background var(--transition);
}

.ba-tool:hover { border-color: var(--navy); }

.ba-tool:disabled { opacity: .6; cursor: default; }

.ba-tool--light { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.35); color: #fff; }

.ba-tool--light:hover { background: rgba(255,255,255,0.22); border-color: #fff; }

.ba-tool-note { flex-basis: 100%; text-align: center; font-size: 12.5px; color: var(--text-light); min-height: 1em; }

.ba-tool-note:empty { display: none; }

/* ---- lightbox ---- */
.hs-lightbox {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; flex-direction: column;
  background: #0b1a25; color: #fff;
  padding: max(10px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
}

.hs-lightbox[hidden] { display: none; }

body.hs-lightbox-open { overflow: hidden; }

.hs-lightbox-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 4px 10px; }

.hs-lightbox-cap { font-size: 15px; color: rgba(255,255,255,0.85); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.hs-lightbox-tools { display: flex; gap: 8px; flex-shrink: 0; }

.hs-lightbox-body { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }

.hs-lightbox-body .ba-slider--lightbox { margin: 0; max-width: 100%; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }

.hs-lightbox-body .ba-slider--lightbox .ba-stage {
  aspect-ratio: auto; width: 100%; height: 100%; max-width: 100%; max-height: 100%;   /* main.js sets the exact size from the photo's shape */
  border-radius: 10px; box-shadow: none; background: #000;
}

.hs-lightbox-body .ba-slider--lightbox .ba-layer { object-fit: contain; background: #000; }

.hs-lightbox-img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 10px; }

.hs-lightbox-note { margin: 8px 0 0; text-align: center; font-size: 13px; color: rgba(255,255,255,0.75); min-height: 1.2em; }

.hs-lightbox:fullscreen { padding: 12px; }

/* ---- synced video pairs ---- */
.vpair { --vp-gap: 6px; max-width: 1040px; margin: 0 auto; }

.vpair-stage { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: #0b1a25; box-shadow: var(--shadow-lg); }

.vpair-frame { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--vp-gap); background: #0b1a25; }

.vpair-frame[hidden] { display: none; }

.vpair-half { position: relative; min-width: 0; background: #000; }

.vpair-video { display: block; width: 100%; height: auto; max-height: 72vh; object-fit: contain; background: #000; }

.vpair[data-orient="portrait"] .vpair-video { aspect-ratio: 9 / 16; max-height: 78vh; }

.vpair[data-orient="landscape"] .vpair-video { aspect-ratio: 16 / 9; }

.vpair-half .ba-tag { position: absolute; top: 12px; z-index: 2; }

.vpair-half .ba-tag--before { left: 12px; }

.vpair-half .ba-tag--after { left: 12px; right: auto; }

.vpair-bigplay {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3;
  width: 74px; height: 74px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(15,43,60,0.78); color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 24px rgba(0,0,0,0.35); transition: transform var(--transition), background var(--transition);
}

.vpair-bigplay:hover { background: var(--teal); transform: translate(-50%, -50%) scale(1.06); }

.vpair.is-playing .vpair-bigplay { display: none; }

.vpair-controls {
  display: flex; align-items: center; gap: 10px;
  margin-top: 12px; padding: 8px 12px; border-radius: 999px;
  background: var(--gray-50); border: 1px solid var(--gray-100);
}

.vpair-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--navy); color: #fff; cursor: pointer; flex-shrink: 0; }

.vpair-btn:hover { background: var(--teal); }

.vpair-btn[data-vp-full] { background: #fff; color: var(--navy); border: 1px solid var(--gray-200); }

.vpair-btn[data-vp-full]:hover { border-color: var(--navy); }

.vpair .vp-ico-pause { display: none; }

.vpair.is-playing .vp-ico-play { display: none; }

.vpair.is-playing .vp-ico-pause { display: block; }

.vpair-scrub { flex: 1; min-width: 0; width: 100%; height: 6px; accent-color: var(--teal); cursor: pointer; }

.vpair-time { font-size: 13px; color: var(--text-light); font-variant-numeric: tabular-nums; white-space: nowrap; }

.vpair-thumb { display: flex; align-items: center; justify-content: center; background: var(--gray-200) center / cover no-repeat; color: rgba(255,255,255,0.9); }

.vpair-thumb svg { filter: drop-shadow(0 1px 3px rgba(0,0,0,0.6)); }

.vpair-exit { display: none; }

.vpair.is-full {
  position: fixed; inset: 0; z-index: 10000; max-width: none; margin: 0;
  background: #0b1a25; padding: max(52px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)) !important;
  display: flex; flex-direction: column;
}

.vpair.is-full .vpair-stage { flex: 1; min-height: 0; border-radius: 10px; box-shadow: none; display: flex; align-items: center; }

.vpair.is-full .vpair-frame { width: 100%; }

.vpair.is-full .vpair-half { display: flex; align-items: center; justify-content: center; }

.vpair.is-full .vpair-video { max-height: calc(100vh - 150px); aspect-ratio: auto; }

.vpair.is-full .ba-thumbs, .vpair.is-full .ba-slider-hint { display: none; }

.vpair.is-full .ba-slider-caption { color: rgba(255,255,255,0.85); margin-top: 8px; }

.vpair.is-full .vpair-controls { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.15); }

.vpair.is-full .vpair-time { color: rgba(255,255,255,0.8); }

.vpair.is-full .vpair-exit { display: block; position: absolute; top: 12px; right: 14px; z-index: 5; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.35); background: rgba(255,255,255,0.12); color: #fff; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }

@media (max-width: 640px) {
  /* a landscape pair is unreadable at half a phone's width — stack it; portrait clips sit side by side */
  .vpair[data-orient="landscape"] .vpair-frame { grid-template-columns: minmax(0, 1fr); }
  .vpair[data-orient="landscape"] .vpair-video { max-height: 40vh; }
  .vpair-controls { gap: 8px; padding: 6px 8px; }
  .vpair-time { font-size: 12px; }
  .vpair-bigplay { width: 60px; height: 60px; }
}

/* ============================================================
   V0.19 (Sep 15 2026) — ADMIN: sidebar layout + Dashboard + Notifications
   The sidebar itself reuses the customer portal's .portal-layout /
   .portal-side / .portal-nav / .portal-menu-btn rules above; these
   are only the admin-specific bits (no fixed site header on /admin,
   so no 120px top padding) and the two new views.
   ============================================================ */

.portal-menu-btn .portal-nav-badge { font-size: 11px; font-weight: 700; background: var(--magenta); color: #fff; border-radius: 999px; padding: 2px 8px; }

.ntf-icon--blue { background: var(--blue-pale); color: var(--brand); }

.ntf-icon--green { background: var(--green-pale); color: #14563B; }

.ntf-icon--amber { background: var(--amber-pale); color: var(--amber-text); }

.ntf-icon--magenta { background: var(--magenta-pale); color: var(--magenta); }

.pstat span { overflow-wrap: anywhere; }

.pstat .pill { white-space: normal; }

/* =====================================================================
   V0.20 (Sep 16 2026) — ESTIMATE BUILDER (Admin → Estimates, .estb-*) and
   the PUBLIC ESTIMATE PAGE on an invite code (/estimate, .esv-*).
   ===================================================================== */

.estb-hint { font-size: 12px; color: var(--text-light); font-weight: 400; }

/* =============================================================================
   V0.21 FAST-LANE FIX (2026-09-22) — the Contact page was 430px wide on phones.
   Google's address box (the gmp-place-autocomplete element main.js swaps in for
   the Property Address field) will not shrink below its own content width. It
   sits inside .contact-layout, a one-column grid on phones whose `1fr` column
   also refuses to shrink below its content, so the whole page was laid out
   430px wide on every phone narrower than that: the menu button and the right
   edge of the text were cut off. Only the live site shows it (the harness has
   no Places key). Two guards, either one alone fixes it:
     1. the phone grid column may shrink (minmax(0, 1fr) instead of 1fr);
     2. the address box never sets the width of anything around it.
   Checked against the live page at 320/360/375/390/414/430/768/1024/1280.
   ============================================================================= */

.hs-address-ac { contain: inline-size; min-width: 0; }

/* =============================================================================
   V0.21 PHASE 0 (2026-09-22) — Website Style Refresh, quick fixes 2-6.
   Plan: Website/Website Style Refresh - Game Plan.md, sections 6 and 7.
     2. the signing bar wraps (the sign page was 422px wide on phones, 793px on an iPad)
     3. no bottom padding where footer.php no longer prints the public bar
     4. form fields at 16px on phones, so iPhones stop zooming in on each one
     5. the account label never splits
     6. Admin > Settings: long values wrap instead of widening the table
   Found by the same test, added here: on a 320px phone the Sign Up reCAPTCHA
   (scaled to 85% below 420px) still ran 3px past the screen, because the card
   leaves only 190px for the form. 75% fits from 318px up.
   ============================================================================= */

/* 5. account label */
.pstat span:first-child { flex-shrink: 0; }
/* Sep 24 2026: a long label (a deposit invoice's "Deposit — EST 1056 · Mon Sep 28 – Tue Sep 29") may wrap between words instead of pushing the page wider */
.pstat span:first-child { flex-shrink: 1; min-width: min-content; overflow-wrap: normal; }

.pstat span:last-child { min-width: 0; overflow-wrap: anywhere; }

/* 3. no bottom padding without the bar */
@media (max-width: 768px) {
  body:not(:has(.mobile-bar)) { padding-bottom: 0; }
}

/* 4. fields at 16px (V0.22: 17px, the refresh's field size) */
.form-group input, .form-group select, .form-group textarea { font-size: 17px; }

@media (max-width: 768px) {
  .cfgq-stepper input { font-size: 16px; }
}

/* reCAPTCHA on the smallest phones (keeps the 0 0 origin from the 420px rule) */
@media (max-width: 360px) {
  .g-recaptcha { transform: scale(0.75); -webkit-transform: scale(0.75); height: 59px; }
}

/* =============================================================================
   V0.22 STYLE REFRESH PHASE 1 — FOUNDATION PIECES (2026-09-22)
   Plan: Website/Website Style Refresh - Game Plan.md, sections 4 and 6.
   Breakpoints for new work: 600 (large phone / small tablet), 900 (two columns),
   1141 (full desktop nav). Older rules above keep their own until each page is
   rebuilt in Phases 2-4.
   ============================================================================= */
/* chips: the existing .chip keeps its look as a tag; as a control it gets a 44px target
   and a navy "selected" state */
.chip { border: 1.5px solid var(--line); }

button.chip, label.chip, a.chip {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; font-family: inherit; font-weight: 600; cursor: pointer;
}

.chip[aria-pressed="true"], .chip.is-on, :checked + .chip { background: var(--ink); color: var(--white); border-color: var(--ink); }

/* cards: only where something is a separate object */
.card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: var(--sh-1); padding: 20px; }

@media (min-width: 600px) { .card { padding: 24px; } }

/* every page's content sits in <main> (header.php opens it, footer.php closes it) */
.site-main { display: block; }

/* the footer on phones: contact rows, Log In and the legal line - the quick links
   repeat the menu, so they drop out below 600px */
@media (max-width: 599.98px) {
  .footer { padding-top: 40px; }
  .footer-inner { gap: 24px; padding-bottom: 32px; }
  .footer-links { display: none; }
  .footer-portal p { display: none; }
}

/* =============================================================================
   V0.22 STYLE REFRESH PHASE 2 — SHARED PIECES (2026-09-22)
   ============================================================================= */
/* the dark main button (on the amber closing band, where amber-on-amber would vanish) */
.btn-ink { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn-ink:hover { background: var(--navy-light); border-color: var(--navy-light); color: #fff; }

/* a <picture> around a photo (WebP first) must not change the layout the <img> had */
.hs-pic { display: contents; }

/* the before/after slider: a 16:10 frame, the amber 48px handle (plan 4.5) */
.ba-stage { aspect-ratio: 16 / 10; border-radius: var(--r-l); box-shadow: var(--sh-2); }
@media (max-width: 560px) { .ba-stage { aspect-ratio: 16 / 10; } }
.ba-knob { width: 48px; height: 48px; background: var(--amber); color: var(--ink); box-shadow: 0 2px 10px rgba(10,31,45,.35); }
.ba-slider:has(.ba-range:focus-visible) .ba-knob { box-shadow: 0 0 0 4px rgba(31,111,168,.55), 0 2px 10px rgba(10,31,45,.35); }
.ba-tag { font-size: 12px; font-weight: 800; padding: 6px 11px; }
.ba-slider-hint { font-size: 14px; }
.ba-thumb-label { font-size: 13.5px; }

/* painting mode's menu (Painting · Our Work · How It Works · Contact · phone · Log In) is shorter
   than the full site's, so it stays on one row from 1000px instead of 1141px (it needs ~975px with
   the 315px logo; the phone button is icon-only until 1141px, where the number fits beside it, and there is
   no room to slide the number open, so in painting mode the button simply calls - main.js) */
@media (min-width: 1000px) and (max-width: 1140px) {
  .nav--paint .nav-links { display: flex; position: static; flex-direction: row; padding: 0; border: 0; box-shadow: none; background: none; }
  .nav--paint .nav-toggle { display: none; }
  .nav--paint .nav-link { padding: 9px 11px; width: auto; }
  .nav--paint .nav-link-cta { margin-top: 0; }
  .nav--paint .nav-call { gap: 0; }
  .nav--paint .nav-call-text { max-width: 0; opacity: 0; margin-left: 0; transition: max-width .35s ease, opacity .25s ease, margin-left .35s ease; }
  .nav--paint .nav-account { width: auto; margin: 0 0 0 4px; padding: 7px 16px; justify-content: flex-start;
    border: 1px solid var(--gray-200); border-radius: var(--radius); }
}
@media (min-width: 1141px) {
  .nav--paint .nav-call { padding-left: 14px; padding-right: 14px; }
  .nav--paint .nav-call-text { max-width: none; opacity: 1; margin-left: 7px; transition: none; }
}