/* ============================================================
   VentSafe Solutions — design system
   Colours sampled directly from the logo:
     navy  #1b3149  (roof, wordmark)  — trust and authority
     blue  #2e7fbe  (wave, SOLUTIONS) — the supporting voice
     green #7fa744  (leaf, tagline)   — every call to action
   Change these six values and the whole site follows.
   ============================================================ */

:root {
  --navy-900: #101f33;
  --navy-800: #1b3149;   /* brand navy, straight off the logo */
  --navy-700: #274661;
  --navy-600: #33587a;
  --navy-100: #e2eaf2;
  --navy-50:  #f2f6fa;

  --blue:      #2e7fbe;  /* brand blue */
  --blue-dark: #24689e;
  --blue-50:   #eaf3fb;

  --accent:      #7fa744; /* brand green — reserved for actions */
  --accent-dark: #6a8f36;
  --accent-50:   #f2f7e9;

  --ink:     #17293c;
  --body:    #46566a;
  --muted:   #6d7f93;
  --line:    #dde5ee;
  --line-soft:#eef2f7;
  --white:   #ffffff;
  --bg:      #ffffff;

  --green:   #4a8b3f;
  --green-50:#eef6e9;
  --red:     #c0392b;
  --red-50:  #fdeeec;
  --amber:   #b7791f;
  --amber-50:#fdf6e7;

  --radius:    12px;
  --radius-lg: 18px;
  --shadow-sm: 0 1px 2px rgba(7,26,46,.06), 0 1px 3px rgba(7,26,46,.05);
  --shadow:    0 4px 6px -1px rgba(7,26,46,.08), 0 2px 4px -2px rgba(7,26,46,.06);
  --shadow-lg: 0 18px 40px -12px rgba(7,26,46,.22);

  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --wrap: 1180px;
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--body);
  background: var(--bg);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { color: var(--ink); line-height: 1.18; margin: 0 0 .5em; font-weight: 750; letter-spacing: -.02em; }
h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); }
h2 { font-size: clamp(1.65rem, 3.1vw, 2.35rem); }
h3 { font-size: 1.2rem; }
h4 { font-size: .95rem; }
p  { margin: 0 0 1.1em; }
a  { color: var(--navy-600); text-decoration: none; }
a:hover { color: var(--blue-dark); }
img { max-width: 100%; height: auto; display: block; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 22px; }
.lede { font-size: 1.16rem; color: var(--body); max-width: 62ch; }
.muted { color: var(--muted); }
.center { text-align: center; }
.center .lede { margin-left: auto; margin-right: auto; }

.skip-link {
  position: absolute; left: -9999px; top: 0; background: var(--navy-800);
  color: #fff; padding: 10px 16px; z-index: 200; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; color: #fff; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; border-radius: 10px; font-weight: 650; font-size: .96rem;
  border: 1.5px solid transparent; cursor: pointer; transition: all .16s ease;
  text-align: center; font-family: inherit; line-height: 1.2;
}
.btn-primary { background: var(--accent); color: #fff; box-shadow: 0 2px 8px rgba(127,167,68,.30); }
.btn-primary:hover { background: var(--accent-dark); color: #fff; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(127,167,68,.36); }
.btn-navy { background: var(--navy-800); color: #fff; }
.btn-navy:hover { background: var(--navy-700); color: #fff; }
.btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.btn-ghost:hover { background: rgba(255,255,255,.14); color: #fff; border-color: #fff; }
.btn-outline { background: #fff; color: var(--navy-800); border-color: var(--line); }
.btn-outline:hover { border-color: var(--navy-600); color: var(--navy-800); background: var(--navy-50); }
.btn-lg { padding: 15px 30px; font-size: 1.04rem; }
.btn-sm { padding: 7px 14px; font-size: .85rem; }
.btn-danger { background: var(--red-50); color: var(--red); border-color: #f3c9c3; }
.btn-danger:hover { background: var(--red); color: #fff; }
.btn:disabled, .btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }

/* ---------- Top bar ---------- */
.topbar { background: var(--navy-900); color: #b9c9da; font-size: .84rem; }
.topbar-inner { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 8px; padding-bottom: 8px; }
.topbar strong { color: #fff; }
.topbar-phone { color: #fff; display: inline-flex; align-items: center; gap: 6px; font-weight: 650; }
.topbar-phone:hover { color: #a3c46b; }

/* ---------- Header ---------- */
.site-header { background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 100; }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 14px; padding-bottom: 14px; }
.brand { display: flex; align-items: center; gap: 11px; }
.brand-mark { height: 44px; width: auto; flex: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name { font-weight: 800; color: var(--navy-800); font-size: 1.16rem; letter-spacing: -.02em; }
.brand-tag { font-size: .735rem; color: var(--accent-dark); font-weight: 650; text-transform: uppercase; letter-spacing: .07em; }

.site-nav { display: flex; align-items: center; gap: 26px; }
.site-nav a { color: var(--body); font-size: .93rem; font-weight: 550; }
.site-nav a:hover, .site-nav a.active { color: var(--navy-800); }
.site-nav a.active { font-weight: 700; }
.site-nav .nav-cta { color: #fff; }

.nav-toggle, .nav-burger { display: none; }

/* ---------- Hero ---------- */
.hero {
  background:
    radial-gradient(1100px 520px at 78% -12%, rgba(46,127,190,.34), transparent 64%),
    radial-gradient(760px 420px at 12% 108%, rgba(127,167,68,.20), transparent 62%),
    linear-gradient(158deg, var(--navy-900) 0%, var(--navy-800) 48%, var(--navy-700) 100%);
  color: #fff; padding: 84px 0 92px; position: relative; overflow: hidden;
}
.hero::after {
  content: ''; position: absolute; inset: 0; opacity: .35; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.11) 1px, transparent 1px);
  background-size: 26px 26px;
}
.hero .wrap { position: relative; z-index: 1; }
.hero-grid { display: grid; grid-template-columns: 1.12fr .88fr; gap: 56px; align-items: center; }
.hero h1 { color: #fff; margin-bottom: 18px; }
.hero h1 .accent { color: #74b3e4; }
.hero-sub { font-size: 1.19rem; color: #cfdcea; max-width: 54ch; margin-bottom: 28px; }
.hero-actions { display: flex; gap: 13px; flex-wrap: wrap; margin-bottom: 30px; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px; background: rgba(127,167,68,.18);
  border: 1px solid rgba(127,167,68,.48); color: #cfe3a8; padding: 6px 15px;
  border-radius: 999px; font-size: .79rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .09em; margin-bottom: 22px;
}

.hero-points { display: flex; flex-wrap: wrap; gap: 10px 26px; padding: 0; margin: 0; list-style: none; }
.hero-points li { display: flex; align-items: center; gap: 8px; color: #cfdcea; font-size: .94rem; }
.hero-points svg { color: #a3c46b; flex: none; }

/* Hero booking card */
.hero-card { background: #fff; border-radius: var(--radius-lg); padding: 26px; box-shadow: var(--shadow-lg); color: var(--body); }
.hero-card h3 { font-size: 1.18rem; margin-bottom: 4px; }
.hero-card .card-sub { font-size: .89rem; color: var(--muted); margin-bottom: 18px; }
.mini-service { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line-soft); font-size: .93rem; }
.mini-service:last-of-type { border-bottom: 0; }
.mini-service .ms-name { color: var(--ink); font-weight: 600; }
.mini-service .ms-price { color: var(--navy-700); font-weight: 750; white-space: nowrap; }
.hero-card .btn { width: 100%; margin-top: 16px; }
.hero-card .card-foot { text-align: center; font-size: .82rem; color: var(--muted); margin: 12px 0 0; }

/* ---------- Sections ---------- */
section { padding: 76px 0; }
section.tight { padding: 52px 0; }
.section-head { max-width: 68ch; margin-bottom: 44px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.kicker { color: var(--blue); font-weight: 750; text-transform: uppercase; letter-spacing: .1em; font-size: .79rem; margin-bottom: 10px; }
.bg-soft { background: var(--navy-50); }
.bg-navy { background: var(--navy-800); color: #cfdcea; }
.bg-navy h2, .bg-navy h3 { color: #fff; }

/* ---------- Trust strip ---------- */
.trust-strip { background: var(--navy-900); padding: 0; }
.trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(255,255,255,.1); }
.trust-item { background: var(--navy-900); padding: 30px 24px; text-align: center; }
.trust-stat { font-size: 2.3rem; font-weight: 800; color: var(--accent); line-height: 1; letter-spacing: -.03em; }
.trust-label { color: #fff; font-weight: 650; margin-top: 8px; font-size: .98rem; }
.trust-note { color: #93a7bb; font-size: .84rem; margin-top: 4px; }

/* ---------- Cards & grids ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }

.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; transition: all .18s ease; }
.card:hover { box-shadow: var(--shadow); border-color: #cfdae6; transform: translateY(-2px); }
.card h3 { margin-bottom: 8px; }
.card p:last-child { margin-bottom: 0; }

.icon-badge {
  width: 46px; height: 46px; border-radius: 11px; background: var(--accent-50);
  color: var(--accent-dark); display: grid; place-items: center; margin-bottom: 16px;
}
.icon-badge.navy { background: var(--navy-100); color: var(--navy-700); }

/* Service cards */
.service-card { display: flex; flex-direction: column; position: relative; scroll-margin-top: 100px; }
.service-card.featured { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-50); }
.badge-popular {
  position: absolute; top: -11px; right: 20px; background: var(--accent); color: #fff;
  font-size: .71rem; font-weight: 750; letter-spacing: .07em; text-transform: uppercase;
  padding: 4px 12px; border-radius: 999px;
}
.service-price { font-size: 2rem; font-weight: 800; color: var(--navy-800); letter-spacing: -.03em; line-height: 1; }
.service-price .per { font-size: .84rem; font-weight: 550; color: var(--muted); letter-spacing: 0; }
.service-meta { font-size: .85rem; color: var(--muted); margin: 6px 0 14px; display: flex; align-items: center; gap: 6px; }
.checks { list-style: none; padding: 0; margin: 0 0 22px; }
.checks li { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; font-size: .92rem; }
.checks svg { color: var(--green); flex: none; margin-top: 4px; }
.service-card .btn { margin-top: auto; }

/* Steps */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; counter-reset: step; }
.step { position: relative; padding-top: 8px; }
.step-num {
  width: 42px; height: 42px; border-radius: 50%; background: var(--navy-800); color: #fff;
  display: grid; place-items: center; font-weight: 750; margin-bottom: 14px; font-size: 1.05rem;
}
.step h3 { font-size: 1.06rem; }
.step p { font-size: .93rem; margin: 0; }

/* Warning signs */
.sign-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 30px; }
.sign-list li { display: flex; gap: 12px; align-items: flex-start; }
.sign-list svg { color: var(--amber); flex: none; margin-top: 3px; }
.sign-list strong { color: var(--ink); display: block; font-size: .98rem; }
.sign-list span { font-size: .9rem; }

/* Testimonials */
.quote-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; }
.stars { color: #f5a623; letter-spacing: 2px; margin-bottom: 12px; font-size: 1.05rem; }
.quote-card blockquote { margin: 0 0 16px; font-size: 1rem; color: var(--ink); line-height: 1.62; }
.quote-who { font-size: .88rem; color: var(--muted); }
.quote-who strong { color: var(--ink); display: block; }

/* Page hero */
.page-hero { background: linear-gradient(160deg, var(--navy-900), var(--navy-700)); color: #fff; padding: 58px 0; }
.page-hero h1 { color: #fff; margin-bottom: 10px; }
.page-hero .lede { color: #cfdcea; }

/* Call bar */
.callbar { background: linear-gradient(115deg, var(--navy-800) 0%, var(--blue) 78%, #4a9bd6 100%); color: #fff; padding: 46px 0; }
.callbar-inner { display: flex; justify-content: space-between; align-items: center; gap: 30px; flex-wrap: wrap; }
.callbar h2 { color: #fff; margin-bottom: 4px; font-size: 1.75rem; }
.callbar p { margin: 0; color: rgba(255,255,255,.94); }
.callbar-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.callbar .btn-primary { background: var(--accent); color: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.20); }
.callbar .btn-primary:hover { background: #fff; color: var(--navy-800); }

/* Areas */
.area-tags { display: flex; flex-wrap: wrap; gap: 9px; }
.area-tag { background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 7px 16px; font-size: .89rem; color: var(--ink); }

/* FAQ */
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  cursor: pointer; padding: 20px 0; font-weight: 650; color: var(--ink);
  font-size: 1.04rem; list-style: none; display: flex; justify-content: space-between; gap: 18px; align-items: center;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; color: var(--accent); font-size: 1.5rem; font-weight: 400; flex: none; line-height: 1; }
.faq-item[open] summary::after { content: '\2212'; }
.faq-item p { padding-bottom: 20px; margin: 0; max-width: 78ch; }

/* ---------- Forms ---------- */
.field { margin-bottom: 18px; }
.field label { display: block; font-weight: 650; color: var(--ink); font-size: .91rem; margin-bottom: 6px; }
.field .hint { font-weight: 400; color: var(--muted); font-size: .84rem; }
.field input, .field textarea, .field select {
  width: 100%; padding: 11px 14px; border: 1.5px solid var(--line); border-radius: 9px;
  font-family: inherit; font-size: .98rem; color: var(--ink); background: #fff; transition: border-color .14s;
}
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--navy-600); outline: none; box-shadow: 0 0 0 3px rgba(34,80,127,.12); }
.field textarea { min-height: 110px; resize: vertical; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.required { color: var(--red); }

.alert { padding: 14px 18px; border-radius: 10px; margin-bottom: 22px; font-size: .94rem; border: 1px solid; }
.alert-error   { background: var(--red-50);   border-color: #f3c9c3; color: #96271b; }
.alert-success { background: var(--green-50); border-color: #b9e4d2; color: #0b6b4a; }
.alert-info    { background: var(--navy-50);  border-color: #cfdae6; color: var(--navy-700); }
.alert-warn    { background: var(--amber-50); border-color: #efdcae; color: #85560f; }
.alert strong { display: block; margin-bottom: 3px; }

/* ---------- Booking flow ---------- */
.booking-shell { max-width: 940px; margin: 0 auto; }
.stepper { display: flex; align-items: center; justify-content: center; gap: 0; margin-bottom: 38px; flex-wrap: wrap; }
.stepper-item { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: .88rem; font-weight: 600; }
.stepper-dot { width: 27px; height: 27px; border-radius: 50%; background: var(--line); color: var(--muted); display: grid; place-items: center; font-size: .8rem; font-weight: 750; flex: none; }
.stepper-item.done .stepper-dot { background: var(--green); color: #fff; }
.stepper-item.current .stepper-dot { background: var(--accent); color: #fff; box-shadow: 0 0 0 4px rgba(127,167,68,.22); }
.stepper-item.current { color: var(--ink); }
.stepper-line { width: 46px; height: 2px; background: var(--line); margin: 0 12px; }

.pick-list { display: grid; gap: 14px; }
.pick-card {
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  border: 1.5px solid var(--line); border-radius: var(--radius); padding: 19px 22px;
  background: #fff; transition: all .15s ease; width: 100%; text-align: left; cursor: pointer; font-family: inherit;
}
.pick-card:hover { border-color: var(--accent); background: var(--accent-50); transform: translateX(3px); }
.pick-card .pc-name { font-weight: 700; color: var(--ink); font-size: 1.04rem; }
.pick-card .pc-desc { font-size: .89rem; color: var(--muted); margin-top: 3px; max-width: 56ch; }
.pick-card .pc-price { font-size: 1.35rem; font-weight: 800; color: var(--navy-800); white-space: nowrap; }
.pick-card .pc-dur { font-size: .8rem; color: var(--muted); text-align: right; }

/* Calendar */
.cal-layout { display: grid; grid-template-columns: 1fr 320px; gap: 30px; align-items: start; }
.calendar { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.cal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.cal-head h3 { margin: 0; font-size: 1.1rem; }
.cal-nav { display: flex; gap: 7px; }
.cal-nav a, .cal-nav span {
  width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--line);
  display: grid; place-items: center; color: var(--navy-700); font-size: 1.05rem; background: #fff;
}
.cal-nav a:hover { border-color: var(--navy-600); background: var(--navy-50); }
.cal-nav span { opacity: .35; cursor: not-allowed; }

.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-dow { text-align: center; font-size: .74rem; font-weight: 750; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; padding-bottom: 8px; }
.cal-day {
  aspect-ratio: 1; border-radius: 9px; border: 1.5px solid transparent; background: var(--navy-50);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  font-size: .95rem; font-weight: 650; color: var(--ink); cursor: pointer; transition: all .13s; position: relative;
}
.cal-day.empty { background: transparent; cursor: default; }
.cal-day.closed { background: #fff; color: #c3ccd6; cursor: not-allowed; border-color: var(--line-soft); }
.cal-day.open:hover { background: var(--accent-50); border-color: var(--accent); transform: scale(1.05); }
.cal-day.selected { background: var(--accent); color: #fff; border-color: var(--accent-dark); }
.cal-day .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--green); }
.cal-day.selected .dot { background: #fff; }
.cal-legend { display: flex; gap: 18px; margin-top: 16px; font-size: .82rem; color: var(--muted); flex-wrap: wrap; }
.cal-legend span { display: flex; align-items: center; gap: 6px; }
.legend-swatch { width: 13px; height: 13px; border-radius: 4px; display: inline-block; }

.slot-panel { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; position: sticky; top: 92px; }
.slot-panel h3 { font-size: 1.04rem; margin-bottom: 3px; }
.slot-panel .sp-date { font-size: .86rem; color: var(--muted); margin-bottom: 16px; }
.slot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.slot-btn {
  padding: 11px 8px; border: 1.5px solid var(--line); border-radius: 9px; background: #fff;
  font-size: .91rem; font-weight: 650; color: var(--ink); cursor: pointer; font-family: inherit; transition: all .13s;
}
.slot-btn:hover { border-color: var(--accent); background: var(--accent-50); }
.slot-empty { text-align: center; color: var(--muted); font-size: .91rem; padding: 26px 12px; }

.summary-box { background: var(--navy-50); border: 1px solid var(--navy-100); border-radius: var(--radius); padding: 20px; margin-bottom: 26px; }
.summary-row { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; font-size: .95rem; }
.summary-row .sr-label { color: var(--muted); }
.summary-row .sr-value { color: var(--ink); font-weight: 650; text-align: right; }
.summary-row.total { border-top: 1px solid var(--navy-100); margin-top: 8px; padding-top: 13px; font-size: 1.1rem; }
.summary-row.total .sr-value { color: var(--navy-800); font-weight: 800; }

/* Confirmation */
.confirm-hero { text-align: center; padding: 46px 0 20px; }
.confirm-check { width: 72px; height: 72px; border-radius: 50%; background: var(--green-50); color: var(--green); display: grid; place-items: center; margin: 0 auto 22px; }
.code-chip {
  display: inline-block; background: var(--navy-800); color: #fff; padding: 9px 22px;
  border-radius: 9px; font-size: 1.22rem; font-weight: 750; letter-spacing: .12em; font-family: ui-monospace, 'SF Mono', Menlo, monospace;
}

/* ---------- Admin ---------- */
.admin-body { background: var(--navy-50); }
.admin-topbar { background: var(--navy-900); color: #fff; padding: 13px 0; }
.admin-topbar .wrap { display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap; }
.admin-topbar .at-brand { font-weight: 750; color: #fff; display: flex; align-items: center; gap: 9px; }
.admin-nav { display: flex; gap: 6px; flex-wrap: wrap; }
.admin-nav a { color: #b9c9da; font-size: .9rem; padding: 6px 13px; border-radius: 8px; font-weight: 550; }
.admin-nav a:hover { background: rgba(255,255,255,.1); color: #fff; }
.admin-nav a.active { background: var(--blue); color: #fff; font-weight: 650; }
.admin-main { padding: 32px 0 70px; }
.admin-main h1 { font-size: 1.75rem; margin-bottom: 4px; }

.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 30px; }
.stat-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; }
.stat-card .sc-label { font-size: .79rem; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; font-weight: 700; }
.stat-card .sc-value { font-size: 1.95rem; font-weight: 800; color: var(--navy-800); letter-spacing: -.03em; line-height: 1.2; }
.stat-card .sc-sub { font-size: .84rem; color: var(--muted); }

.panel { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 26px; overflow: hidden; }
.panel-head { padding: 17px 22px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.panel-head h2 { margin: 0; font-size: 1.13rem; }
.panel-head p { margin: 2px 0 0; font-size: .87rem; color: var(--muted); }
.panel-body { padding: 22px; }

table.data { width: 100%; border-collapse: collapse; font-size: .92rem; }
table.data th {
  text-align: left; padding: 11px 14px; background: var(--navy-50); color: var(--muted);
  font-size: .76rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 750; white-space: nowrap;
}
table.data td { padding: 13px 14px; border-top: 1px solid var(--line-soft); vertical-align: top; }
table.data tr:hover td { background: #fafcfe; }
table.data .t-strong { color: var(--ink); font-weight: 650; }
table.data .t-sub { color: var(--muted); font-size: .85rem; }

.pill { display: inline-block; padding: 3px 11px; border-radius: 999px; font-size: .76rem; font-weight: 700; white-space: nowrap; }
.pill-green { background: var(--green-50); color: var(--green); }
.pill-orange{ background: var(--accent-50); color: var(--accent-dark); }
.pill-navy  { background: var(--navy-100); color: var(--navy-700); }
.pill-red   { background: var(--red-50); color: var(--red); }
.pill-amber { background: var(--amber-50); color: var(--amber); }
.pill-gray  { background: #eef1f4; color: var(--muted); }

.hours-row { display: grid; grid-template-columns: 120px 90px 1fr 1fr; gap: 14px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--line-soft); }
.hours-row:last-child { border-bottom: 0; }
.hours-row .hr-day { font-weight: 650; color: var(--ink); }
.hours-row input[type=time] { padding: 8px 11px; border: 1.5px solid var(--line); border-radius: 8px; font-family: inherit; font-size: .93rem; width: 100%; }
.switch { display: flex; align-items: center; gap: 8px; font-size: .88rem; color: var(--muted); cursor: pointer; }
.switch input { width: 17px; height: 17px; accent-color: var(--accent); cursor: pointer; }

.login-shell { min-height: 82vh; display: grid; place-items: center; padding: 40px 20px; }
.login-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 38px; max-width: 400px; width: 100%; box-shadow: var(--shadow-lg); }
.login-card h1 { font-size: 1.45rem; text-align: center; margin-bottom: 6px; }
.login-card .lc-sub { text-align: center; color: var(--muted); font-size: .92rem; margin-bottom: 26px; }

.inline-form { display: inline; }
.actions-cell { display: flex; gap: 6px; flex-wrap: wrap; }

.empty-state { text-align: center; padding: 52px 22px; color: var(--muted); }
.empty-state svg { color: var(--line); margin-bottom: 14px; }
.empty-state h3 { color: var(--body); font-size: 1.06rem; }

.env-banner { background: var(--amber-50); border-bottom: 1px solid #efdcae; color: #85560f; font-size: .85rem; padding: 9px 0; text-align: center; }
.env-banner strong { font-weight: 750; }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy-900); color: #93a7bb; padding: 54px 0 26px; font-size: .92rem; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 36px; padding-bottom: 34px; }
.footer-brand { color: #fff; font-weight: 800; font-size: 1.14rem; }
.footer-tag { color: #a3c46b; font-size: .84rem; font-weight: 650; text-transform: uppercase; letter-spacing: .07em; margin: 2px 0 14px; }
.footer-note { font-size: .88rem; line-height: 1.7; margin: 0; }
.site-footer h4 { color: #fff; text-transform: uppercase; letter-spacing: .08em; font-size: .77rem; margin-bottom: 14px; }
.site-footer a { color: #93a7bb; display: block; padding: 4px 0; }
.site-footer a:hover { color: #a3c46b; }
.footer-cta { display: inline-flex !important; color: #fff !important; margin-top: 10px; background: var(--accent); }
.footer-cta:hover { color: #fff !important; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); padding-top: 20px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: .85rem; }
.footer-links a { display: inline; }

.prose { max-width: 76ch; }
.prose h2 { margin-top: 1.9em; }
.prose h3 { margin-top: 1.5em; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li { margin-bottom: .5em; }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .grid-4, .steps { grid-template-columns: repeat(2, 1fr); }
  .cal-layout { grid-template-columns: 1fr; }
  .slot-panel { position: static; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .stat-row { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 780px) {
  body { font-size: 16px; }
  section { padding: 54px 0; }
  .grid-3, .grid-2, .sign-list { grid-template-columns: 1fr; }
  .trust-grid { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .topbar-inner { font-size: .78rem; }

  .nav-burger { display: flex; flex-direction: column; gap: 5px; cursor: pointer; padding: 8px; }
  .nav-burger span { width: 24px; height: 2.5px; background: var(--navy-800); border-radius: 2px; transition: .2s; }
  .site-nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0; background: #fff;
    flex-direction: column; align-items: stretch; gap: 0; padding: 10px 22px 20px;
    border-bottom: 1px solid var(--line); box-shadow: var(--shadow);
  }
  .nav-toggle:checked ~ .site-nav { display: flex; }
  .site-nav a { padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
  .site-nav .nav-cta { margin-top: 12px; border-bottom: 0; }
  .header-inner { position: relative; }

  .hero { padding: 54px 0 60px; }
  .callbar-inner { flex-direction: column; align-items: flex-start; }
  .hours-row { grid-template-columns: 1fr 1fr; gap: 10px; }
  .admin-main { padding: 22px 0 50px; }
  .table-scroll { overflow-x: auto; }
  .table-scroll table { min-width: 700px; }
}

@media print {
  .site-header, .topbar, .site-footer, .callbar, .admin-topbar, .btn { display: none !important; }
  body { font-size: 12pt; }
}

/* ---------- Logo lockups ---------- */
.footer-mark { height: 62px; width: auto; margin-bottom: 12px; }
/* logo-mark-light.png already has the navy recoloured for dark backgrounds. */
.admin-topbar .at-brand img { height: 26px; width: auto; }

/* ============================================================
   My Story — the fire page.
   Deliberately quieter than the rest of the site: no green
   buttons competing with the photos, lots of air, long measure.
   ============================================================ */
.story-hero {
  background: linear-gradient(165deg, #0a1521 0%, var(--navy-900) 55%, var(--navy-800) 100%);
  color: #fff; padding: 78px 0 70px;
}
.story-hero .eyebrow { background: rgba(192,57,43,.20); border-color: rgba(192,57,43,.50); color: #f0a79c; }
.story-hero .wrap { max-width: 720px; }
.story-hero h1 { color: #fff; max-width: 20ch; font-size: clamp(2.1rem, 4.4vw, 3.15rem); }
.story-hero .story-lede {
  font-size: 1.28rem; color: #cfdcea; max-width: 46ch; margin: 20px 0 0; line-height: 1.55;
}
.story-date {
  font-size: .82rem; letter-spacing: .13em; text-transform: uppercase;
  color: #7f95ad; font-weight: 700; margin-top: 26px;
}

/* The story text had no top padding at all, so the first paragraph began on the
   exact pixel the navy hero ended — the only section on the site butted flat
   against the band above it. That is what made it read as a stray sentence
   rather than the opening of the story. */
.story-body { padding: 64px 0 20px; }

/* The opening address — "I want you to look at these before you read anything
   else". Deliberately larger and darker than the body copy that follows: the
   hero lede above it is 1.28rem, and without this the type SHRANK as the reader
   crossed from the band into the story, at the exact moment they should be most
   held. The green rule marks it as spoken directly to the reader.

   Selector is `.story-body p.story-open`, not `.story-open`: the `.story-body p`
   rule below sets font-size at the same weight and would otherwise win on
   specificity and shrink this straight back to body size. */
.story-body p.story-open {
  font-size: 1.2rem;
  line-height: 1.72;
  color: var(--ink);
  max-width: 34em;
  border-left: 4px solid var(--accent);
  padding-left: 24px;
  margin-bottom: 1.2em;
}
.story-body .wrap { max-width: 720px; }
.story-body p { font-size: 1.11rem; line-height: 1.78; margin: 0 0 1.35em; }
.story-body h2 { font-size: clamp(1.5rem, 2.7vw, 1.95rem); margin: 2.1em 0 .7em; }
.story-body h2:first-child { margin-top: 0; }

.story-figure { margin: 46px 0; }
.story-figure img {
  width: 100%; height: auto; border-radius: var(--radius);
  box-shadow: var(--shadow-lg); display: block;
}
.story-figure figcaption {
  font-size: .89rem; color: var(--muted); margin-top: 12px; line-height: 1.55;
  padding-left: 14px; border-left: 3px solid var(--line);
}
/* Centre the wide photos on the text column.
   The old version subtracted from 720px — the wrap's full width — but the
   offset is applied from the content edge, which sits 22px inside the wrap's
   padding. Every wide photo therefore landed exactly 22px right of centre at
   every screen width. Using 50% resolves against the content box, so the
   arithmetic and the starting point finally agree. */
.story-figure.wide { margin-left: calc(50% - min(1080px, 92vw) / 2); width: min(1080px, 92vw); }

.story-pull {
  border-left: 4px solid var(--accent); padding: 6px 0 6px 26px; margin: 42px 0;
  font-size: 1.32rem; line-height: 1.55; color: var(--ink); font-weight: 600;
}

.story-callout {
  background: var(--navy-50); border: 1px solid var(--navy-100);
  border-radius: var(--radius); padding: 26px 30px; margin: 40px 0;
}
.story-callout h3 { font-size: 1.1rem; margin-bottom: 12px; }
.story-callout ul { margin: 0; padding-left: 1.15em; }
.story-callout li { margin-bottom: .55em; font-size: 1rem; }
.story-callout li:last-child { margin-bottom: 0; }

.story-sign { display: flex; gap: 14px; align-items: flex-start; padding: 13px 0; border-bottom: 1px solid var(--line-soft); }
.story-sign:last-child { border-bottom: 0; }
.story-sign svg { color: var(--red); flex: none; margin-top: 3px; }
.story-sign strong { color: var(--ink); display: block; font-size: 1rem; }
.story-sign span { font-size: .95rem; color: var(--body); }

.story-end {
  background: var(--navy-800); color: #cfdcea; padding: 56px 0; margin-top: 60px; text-align: center;
}
.story-end h2 { color: #fff; margin-bottom: 10px; }
.story-end p { max-width: 52ch; margin: 0 auto 26px; font-size: 1.06rem; }
.story-end .btn-outline { background: transparent; color: #fff; border-color: rgba(255,255,255,.45); }
.story-end .btn-outline:hover { background: rgba(255,255,255,.12); color: #fff; border-color: #fff; }

/* Home-page teaser */
.story-teaser { background: var(--navy-900); color: #cfdcea; padding: 0; overflow: hidden; }
.story-teaser-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; gap: 0; }
.story-teaser-photo { position: relative; min-height: 400px; background-size: cover; background-position: center; }
.story-teaser-photo::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 55%, var(--navy-900) 100%);
}
.story-teaser-text { padding: 62px 56px 62px 50px; align-self: center; }
.story-teaser-text h2 { color: #fff; font-size: clamp(1.6rem, 2.9vw, 2.15rem); margin-bottom: 14px; }
.story-teaser-text p { font-size: 1.06rem; line-height: 1.7; color: #b9c9da; }
.story-teaser-text .kicker { color: #e88b7d; }

@media (max-width: 900px) {
  .story-teaser-grid { grid-template-columns: 1fr; }
  .story-teaser-photo { min-height: 260px; }
  .story-teaser-photo::after { background: linear-gradient(180deg, transparent 55%, var(--navy-900) 100%); }
  .story-teaser-text { padding: 34px 22px 46px; }
  .story-figure.wide { margin-left: 0; width: 100%; }
  .story-body p { font-size: 1.05rem; }
  /* Less air on a phone — 64px of nothing is a lot of thumb-scrolling on a
     small screen, and the band edge is already obvious there. */
  .story-body { padding-top: 40px; }
  .story-open { font-size: 1.12rem; padding-left: 18px; }
  /* The size bump must survive the rule above, which targets every story
     paragraph and would otherwise shrink the opening line back down. */
  .story-body p.story-open { font-size: 1.12rem; }
}

/* ---------- Very small phones (iPhone SE and similar, ~320px) ----------
   Two-column grids still overflow at this width, so drop everything to one. */
@media (max-width: 460px) {
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .grid-4, .steps { grid-template-columns: 1fr; }
  .wrap { padding: 0 18px; }
  .hero-points { gap: 8px 18px; }
  .topbar-inner { flex-direction: column; align-items: flex-start; gap: 3px; }
  .story-pull { font-size: 1.15rem; padding-left: 18px; }
  .code-chip { font-size: 1.05rem; letter-spacing: .08em; }
  .stat-row { grid-template-columns: 1fr; }
  .slot-grid { grid-template-columns: 1fr 1fr; }

  /* Service picker: stack name above price so nothing has to stay on one line. */
  .pick-card { flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px 18px; }
  .pick-card > span { min-width: 0; }
  .pick-card .pc-dur { text-align: left; }
  .pick-card:hover { transform: none; }

  /* Calendar: tighten so seven columns fit a 320px screen. */
  .calendar { padding: 14px; }
  .cal-grid { gap: 4px; }
  .cal-day { font-size: .86rem; border-radius: 7px; }
  .cal-dow { font-size: .66rem; }
  .slot-panel { padding: 16px; }
  .cal-legend { gap: 10px; font-size: .78rem; }

  /* Keep the business name on one line next to the logo. */
  .brand-mark { height: 36px; }
  .brand-name { font-size: 1rem; }
  .brand-tag { font-size: .63rem; letter-spacing: .05em; }
  .brand { gap: 8px; }
}

/* ============================================================
   City landing pages
   ============================================================ */
.city-hero {
  background:
    radial-gradient(900px 440px at 82% -10%, rgba(46,127,190,.30), transparent 62%),
    linear-gradient(160deg, var(--navy-900) 0%, var(--navy-800) 60%, var(--navy-700) 100%);
  color: #fff; padding: 40px 0 62px;
}
.city-hero h1 { color: #fff; margin-bottom: 12px; font-size: clamp(1.95rem, 4vw, 2.9rem); }
.city-hero .lede { color: #cfdcea; max-width: 56ch; margin-bottom: 26px; }
.city-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 26px; }

.crumbs { font-size: .84rem; color: #8ba3bd; margin-bottom: 22px; }
.crumbs a { color: #b9c9da; }
.crumbs a:hover { color: #fff; }
.crumbs span { margin: 0 6px; }
.crumbs .current { color: #fff; margin: 0; font-weight: 600; }

.city-body { padding: 62px 0 20px; }
.city-grid { display: grid; grid-template-columns: 1fr 330px; gap: 48px; align-items: start; }
.city-main p { font-size: 1.08rem; line-height: 1.78; margin-bottom: 1.3em; max-width: 66ch; }
.city-main h2 { font-size: clamp(1.4rem, 2.5vw, 1.8rem); margin: 1.9em 0 .7em; }
.city-main h2:first-child { margin-top: 0; }
.city-finds { max-width: 66ch; }
.city-finds svg { color: var(--amber); }

.city-side { position: sticky; top: 92px; display: grid; gap: 18px; }
.city-card h3 { font-size: 1.1rem; margin-bottom: 14px; }
.city-card .card-foot { font-size: .84rem; color: var(--muted); margin: 12px 0 0; line-height: 1.55; }

.area-tag-link { transition: all .14s ease; }
.area-tag-link:hover {
  border-color: var(--accent); background: var(--accent-50);
  color: var(--accent-dark); transform: translateY(-1px);
}

.city-cta { background: var(--navy-50); border-top: 1px solid var(--navy-100); padding: 58px 0; margin-top: 44px; }
.city-cta h2 { margin-bottom: 10px; }

@media (max-width: 980px) {
  .city-grid { grid-template-columns: 1fr; gap: 34px; }
  .city-side { position: static; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  .city-side { grid-template-columns: 1fr; }
  .city-body { padding: 42px 0 10px; }
  .city-main p { font-size: 1.03rem; }
}

/* Footer now has five columns. */
.footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; }
@media (max-width: 1100px) { .footer-grid { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 1000px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px)  { .footer-grid { grid-template-columns: 1fr; } }

/* Service-area hub: cities with their own page read as a distinct group. */
.area-tags-hub .area-tag-link {
  border-color: #c5d9a4;
  background: var(--accent-50);
  color: var(--accent-dark);
  font-weight: 650;
}
.area-tags-hub .area-tag-link svg { opacity: .75; }
.area-tags-hub .area-tag-link:hover {
  background: var(--accent); color: #fff; border-color: var(--accent-dark);
}
.area-tags-hub .area-tag-link:hover svg { opacity: 1; }

/* Impossible to ignore: still running on the shipped admin password. */
.danger-banner {
  background: var(--red); color: #fff; padding: 12px 22px; text-align: center;
  font-size: .9rem; line-height: 1.5;
}
.danger-banner strong { display: block; font-size: .96rem; margin-bottom: 2px; }

/* ---------- Text wording editor ---------- */
.token-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.token {
  border: 1px solid var(--line); border-radius: 9px; padding: 11px 13px; background: #fff;
  display: flex; flex-direction: column; gap: 2px;
}
.token code {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: .87rem;
  color: var(--blue-dark); font-weight: 700;
}
.token-label { font-size: .84rem; color: var(--ink); }
.token-sample { font-size: .79rem; color: var(--muted); font-style: italic; }

.tpl-preview { background: var(--navy-50); border: 1px solid var(--navy-100); border-radius: 10px; padding: 16px; }
.tpl-preview-label {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .08em;
  font-weight: 750; color: var(--muted); margin-bottom: 10px;
}
.tpl-bubble {
  background: #e6f0ff; border-radius: 16px 16px 16px 4px; padding: 12px 16px;
  font-size: .96rem; line-height: 1.5; color: var(--ink); max-width: 460px;
}
.tpl-meta { font-size: .84rem; color: var(--muted); margin-top: 12px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ============================================================
   Availability grid
   ============================================================ */
.sched-scroll { overflow-x: auto; padding-bottom: 6px; }

.sched-grid {
  display: grid;
  grid-template-columns: 86px repeat(var(--slots), minmax(22px, 1fr));
  gap: 2px;
  min-width: 720px;
  user-select: none;
  /* Swiping must scroll by default. Paint mode is what takes the gesture over,
     and only after the owner explicitly turns it on. */
  touch-action: pan-x pan-y;
}
.sched-grid.paint-on { touch-action: none; }

.sched-corner { position: sticky; left: 0; background: #fff; z-index: 2; }

.sched-hour {
  font-size: .68rem; color: var(--muted); text-align: left;
  padding-bottom: 6px; font-weight: 700; white-space: nowrap;
}
.sched-hour.on-hour { color: var(--ink); }

.sched-day {
  position: sticky; left: 0; background: #fff; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  padding-right: 10px; font-size: .84rem; font-weight: 700; color: var(--ink);
}
.sd-clear {
  border: 1px solid var(--line); background: #fff; color: var(--muted);
  width: 20px; height: 20px; border-radius: 5px; cursor: pointer;
  line-height: 1; font-size: .9rem; padding: 0; flex: none;
}
.sd-clear:hover { border-color: var(--red); color: var(--red); }

.sched-cell { display: block; cursor: pointer; position: relative; }
.sched-cell input { position: absolute; opacity: 0; width: 0; height: 0; }
.sched-cell span {
  display: block; height: 30px; border-radius: 4px;
  background: #fff; border: 1px solid var(--line-soft);
  transition: background .08s ease, border-color .08s ease;
}
.sched-cell.on-hour span { border-left: 1px solid var(--line); }
.sched-cell:hover span { border-color: var(--accent); }
.sched-cell input:checked + span { background: var(--accent); border-color: var(--accent-dark); }
.sched-cell input:focus-visible + span { outline: 2px solid var(--navy-600); outline-offset: 1px; }

.sched-legend {
  display: flex; gap: 18px; align-items: center; flex-wrap: wrap;
  margin-top: 18px; font-size: .84rem; color: var(--body);
}
.sched-legend span { display: flex; align-items: center; gap: 7px; }
.sched-presets { display: flex; gap: 8px; flex-wrap: wrap; }

#sched-summary .sr-value.is-closed { color: var(--muted); font-weight: 500; }

@media (max-width: 700px) {
  .sched-grid { min-width: 620px; }
  .sched-cell span { height: 26px; }
}

/* ---------- Schedule touch controls ---------- */
.sched-touchbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 10px;
}

.paint-toggle {
  display: inline-flex; align-items: center; gap: 9px;
  border: 1.5px solid var(--line); background: #fff; border-radius: 999px;
  padding: 7px 15px 7px 11px; cursor: pointer; font-family: inherit;
  font-size: .88rem; font-weight: 650; color: var(--body);
}
.paint-toggle .pt-dot {
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--line); border: 1px solid #c9d3de; flex: none;
}
.paint-toggle .pt-state {
  font-size: .74rem; letter-spacing: .06em; color: var(--muted);
  background: var(--navy-50); border-radius: 5px; padding: 2px 7px;
}
.paint-toggle.is-on { border-color: var(--accent); background: var(--accent-50); color: var(--accent-dark); }
.paint-toggle.is-on .pt-dot { background: var(--accent); border-color: var(--accent-dark); }
.paint-toggle.is-on .pt-state { background: var(--accent); color: #fff; }

.sched-jumps { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sj-label { font-size: .8rem; color: var(--muted); font-weight: 650; }
.sched-jumps .btn.is-active { border-color: var(--navy-600); background: var(--navy-50); }

.sched-hint { font-size: .84rem; margin: 0 0 14px; }

/* A mouse has a scrollbar, so the toggle is only useful on touch. */
@media (pointer: fine) {
  .paint-toggle { display: none; }
  .sched-hint { display: none; }
}

/* Fatter targets and a visible scroll cue on a phone. */
@media (max-width: 700px) {
  .sched-scroll {
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    /* Fade the right edge so it reads as "there is more over here". */
    -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 92%, transparent 100%);
  }
  .sched-grid { min-width: 900px; }
  .sched-hour.on-hour { scroll-snap-align: start; }
  .sched-cell span { height: 34px; }
  .sched-touchbar { justify-content: flex-start; }
  /* The day-name column is frozen on the left, so a column that snaps to 0
     lands underneath it. Push the snap line past the names. */
  .sched-scroll { scroll-padding-left: 88px; }
  .sched-jumps .btn { padding: 6px 11px; font-size: .8rem; }
}

/* On a phone the toggle above says what the gesture does; this desktop tip
   contradicts it. */
@media (pointer: coarse) {
  .sched-legend .sched-tip-mouse { display: none; }
}

@media (max-width: 460px) {
  .sj-label { display: none; }
}

/* ============================================================
   Requests waiting for approval
   ============================================================ */
.panel-attention { border-color: #e8c37a; box-shadow: 0 1px 0 #f3e2bd, 0 10px 30px -18px rgba(133, 86, 15, .5); }
.panel-attention > .panel-head { background: var(--amber-50); border-bottom-color: #efdcae; }

.pending-row {
  display: grid;
  grid-template-columns: 92px 1fr 190px;
  gap: 16px;
  align-items: start;
  padding: 14px;
  border: 1px solid var(--line-soft);
  border-radius: 11px;
  background: #fff;
}
.pending-when {
  display: flex; flex-direction: column; gap: 2px;
  font-size: .92rem; color: var(--ink);
}
.pending-when span { color: var(--muted); font-size: .88rem; }
.pending-who .t-sub { margin-top: 2px; }
.pending-note {
  margin: 8px 0 6px; padding: 9px 11px; font-size: .89rem;
  background: var(--amber-50); border: 1px solid #efdcae; border-radius: 8px;
}
.pending-actions { display: grid; gap: 8px; }

/* On a phone the three columns become three stacked blocks, and the buttons
   go full width so they are easy to hit. */
@media (max-width: 760px) {
  .pending-row { grid-template-columns: 1fr; gap: 12px; }
  .pending-when { flex-direction: row; gap: 8px; align-items: baseline; }
  .pending-actions { grid-template-columns: 1fr 1fr; }
  .pending-actions a { grid-column: 1 / -1; }
}

/* ---------- SMS consent (carrier-required layout) ---------- */
.consent-box {
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 14px 16px;
  background: var(--navy-50);
  margin: 0 0 20px;
}
.consent-label {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  cursor: pointer;
  font-size: .87rem;
  line-height: 1.55;
  color: var(--body);
}
.consent-label input[type="checkbox"] {
  width: 20px; height: 20px; margin: 2px 0 0; flex: none;
  accent-color: var(--accent); cursor: pointer;
}
.consent-label strong { color: var(--ink); display: inline; }
.consent-optional {
  display: block; font-style: normal; font-size: .8rem;
  color: var(--muted); font-weight: 600; margin: 1px 0 4px;
}
.consent-alt {
  margin: 9px 0 0 32px; font-size: .82rem; color: var(--muted);
}

/* Sign-off at the end of the story — it is a personal account, so it reads
   as one. */
.story-signature {
  margin: 34px 0 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.5;
}
.story-signature span {
  display: block;
  font-size: .88rem;
  font-weight: 500;
  color: var(--muted);
}

/* ---------- Recording a payment on a job ----------
   Built for a phone held in one hand in somebody's driveway: targets big
   enough to hit without aiming, and the whole thing reachable with a thumb. */
.pay-form { margin: 0 0 4px; }
.pay-methods {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 10px;
}
.pay-method {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 10px;
  border: 1.5px solid var(--line);
  border-radius: 9px;
  font-size: .88rem;
  font-weight: 600;
  color: var(--body);
  cursor: pointer;
  background: #fff;
  min-height: 42px;
}
.pay-method input { accent-color: var(--accent); flex: none; width: 16px; height: 16px; }
/* Five options in a two-column grid leaves one odd. Let it take the whole
   width rather than wrapping its label onto two lines and standing taller
   than everything beside it. */
.pay-methods .pay-method:last-child:nth-child(odd) { grid-column: 1 / -1; }
.pay-method:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-50);
  color: var(--navy-800);
}
.pay-receipt {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .86rem;
  color: var(--body);
  margin: 0 0 12px;
  cursor: pointer;
}
.pay-receipt input { accent-color: var(--accent); width: 16px; height: 16px; flex: none; }

/* Under the three quotes: the link out to the full Google listing. Says "all
   reviews", never a count — a number here is wrong the day the next one
   lands. */
.reviews-more {
  margin-top: 30px;
  text-align: center;
}
/* Colours stated outright rather than inherited. This button sits on a white
   section, and the first version of it used the white-on-transparent style
   meant for the dark navy bands — invisible. Being explicit means a future
   class change cannot make it disappear again. */
.reviews-more .btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: #fff;
  color: var(--navy-800);
  border-color: var(--line);
}
.reviews-more .btn:hover {
  background: var(--navy-50);
  color: var(--navy-800);
  border-color: var(--navy-600);
}
.reviews-more .btn svg {
  color: #f4b400;
  flex: none;
}
.reviews-more .muted {
  margin: 14px 0 0;
  font-size: .86rem;
}