/* Jet Flow — one stylesheet, mobile first.
   Ahmed runs the dashboard on an iPhone 15 (393pt wide), so every layout starts
   at that width and widens, never the other way round. */

:root{
  --ink:#10151c; --ink-2:#414c5a; --ink-3:#6b7785;
  --line:#dfe4ea; --line-2:#eef1f5;
  --bg:#f6f8fa; --card:#fff;
  --brand:#0b5fa5; --brand-dark:#084a80; --brand-tint:#e8f1f9;
  --ok:#0f7a4d; --ok-tint:#e6f4ee;
  --warn:#9a5b00; --warn-tint:#fdf1de;
  --bad:#b3261e; --bad-tint:#fbeae9;
  --r:10px; --r-lg:14px;
  --shadow:0 1px 2px rgba(16,21,28,.06), 0 4px 14px rgba(16,21,28,.05);
  --tap:44px; /* minimum touch target */
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  padding-bottom:env(safe-area-inset-bottom);
}
h1,h2,h3{line-height:1.25; margin:0 0 .4em}
h1{font-size:1.5rem; letter-spacing:-.015em}
h2{font-size:1.15rem; letter-spacing:-.01em}
h3{font-size:1rem}
p{margin:0 0 1em}
a{color:var(--brand)}

.staging-bar{
  background:#3a2d00; color:#ffdf8a; font-size:.75rem; font-weight:600;
  letter-spacing:.04em; text-transform:uppercase; text-align:center;
  padding:.45rem .75rem; position:sticky; top:0; z-index:50;
}

.wrap{max-width:52rem; margin:0 auto; padding:1rem 1rem 4rem}
.wrap-narrow{max-width:34rem}

/* ---- header ---- */
.top{display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  padding:.9rem 1rem; background:var(--card); border-bottom:1px solid var(--line)}
.brand{display:flex; align-items:baseline; gap:.5rem; font-weight:700; letter-spacing:-.02em;
  color:var(--ink); text-decoration:none; font-size:1.05rem}
.brand span{font-weight:500; color:var(--ink-3); font-size:.8rem; letter-spacing:0}
/* Pages outside the public layout (e.g. the 404 page) still get a full-size tap target for the home link. */
.top .brand{min-height:44px; align-items:center}
.top nav{display:flex; gap:.25rem; flex-wrap:wrap}
.top nav a{
  display:inline-flex; align-items:center; min-height:36px; padding:0 .7rem;
  border-radius:8px; font-size:.875rem; font-weight:600; text-decoration:none; color:var(--ink-2);
}
.top nav a[aria-current="page"]{background:var(--brand-tint); color:var(--brand)}

/* ---- cards ---- */
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:1rem; box-shadow:var(--shadow); margin-bottom:.85rem}
.card-tight{padding:.75rem .85rem}
.card h2{margin-bottom:.6rem}
.muted{color:var(--ink-3)}
.small{font-size:.85rem}
.tiny{font-size:.78rem}

/* ---- buttons ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  min-height:var(--tap); padding:0 1.05rem; border-radius:var(--r);
  border:1px solid var(--line); background:var(--card); color:var(--ink);
  font:inherit; font-weight:600; font-size:.95rem; cursor:pointer; text-decoration:none;
}
.btn:hover{background:var(--line-2)}
.btn-primary{background:var(--brand); border-color:var(--brand); color:#fff}
.btn-primary:hover{background:var(--brand-dark)}
.btn-ok{background:var(--ok); border-color:var(--ok); color:#fff}
.btn-danger{background:var(--card); border-color:var(--bad); color:var(--bad)}
.btn-danger:hover{background:var(--bad-tint)}
.btn-sm{min-height:36px; padding:0 .7rem; font-size:.85rem}
.btn-block{display:flex; width:100%}
.btn-row{display:flex; gap:.5rem; flex-wrap:wrap}

/* ---- forms ---- */
label{display:block; font-weight:600; font-size:.875rem; margin:0 0 .3rem}
.field{margin-bottom:.9rem}
.hint{font-weight:400; color:var(--ink-3); font-size:.8rem; margin-top:.25rem}
/* Every text-like control, by exclusion rather than by listing types.
   Listing them individually had already missed `type=time`, which meant the
   after-hours "new time" field rendered 24px tall on a phone -- on the one
   form Ahmed fills in while a customer waits on the line. */
input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=submit]):not([type=button]),
select, textarea{
  width:100%; min-height:var(--tap); padding:.55rem .7rem;
  border:1px solid var(--line); border-radius:var(--r); background:#fff;
  font:inherit; color:var(--ink);
}
textarea{min-height:5rem; resize:vertical}
input:focus-visible,select:focus-visible,textarea:focus-visible,
.btn:focus-visible,a:focus-visible,.slot:focus-visible{
  outline:3px solid var(--brand); outline-offset:2px;
}
input[aria-invalid="true"]{border-color:var(--bad); background:var(--bad-tint)}
.err{color:var(--bad); font-size:.82rem; margin-top:.25rem; font-weight:600}

/* A checkbox and its text as ONE clickable row. Tapping anywhere in the row
   toggles the control, because the label wraps it -- this is a real hit area,
   not spacing that happens to measure 44px. */
/* Verified by tapping it: tools/touch-check.ts clicks the label edge and
   asserts the control's state actually changed.

   An earlier note here explained a "double toggle" caused by a wrapping
   label that also carried `for`. That explanation was WRONG and is removed
   rather than softened. The test failure that produced it was a bug in the
   test: Playwright's boundingBox() returns PAGE coordinates and mouse.click
   takes VIEWPORT coordinates, so on a scrolled page the harness was clicking
   somewhere else entirely. Nothing was wrong with the markup. */
.check-row{
  display:flex; align-items:center; gap:.7rem;
  min-height:var(--tap); padding:.5rem .1rem; cursor:pointer;
  font-weight:500;
}
.check-row input{flex:0 0 auto; width:22px; height:22px; margin:0}
.check-row span{flex:1}

/* ---- choice tiles ---- */
.choices{display:grid; gap:.6rem}
.choice{
  display:block; border:1.5px solid var(--line); border-radius:var(--r-lg);
  padding:.9rem 1rem; background:var(--card); cursor:pointer;
}
.choice:hover{border-color:var(--brand)}
.choice input{position:absolute; opacity:0; width:0; height:0}
.choice:has(input:checked){border-color:var(--brand); background:var(--brand-tint)}
.choice:has(input:focus-visible){outline:3px solid var(--brand); outline-offset:2px}
.choice b{display:block; font-size:1rem}
.choice .hint{margin-top:.2rem}

/* ---- slots ---- */
.slots{display:grid; grid-template-columns:repeat(auto-fill,minmax(7.5rem,1fr)); gap:.5rem}
.slot{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:var(--tap); padding:.4rem; border:1px solid var(--line);
  border-radius:var(--r); background:var(--card); font:inherit; font-weight:600;
  font-size:.92rem; cursor:pointer; text-decoration:none; color:var(--ink);
}
.slot:hover{border-color:var(--brand); background:var(--brand-tint)}
.slot-current{opacity:.6; cursor:default; border-style:dashed}
.slot-current small{display:block; font-size:.72rem; font-weight:600}
.slot .fee{font-size:.72rem; font-weight:700; color:var(--warn)}
.daybar{display:flex; gap:.4rem; overflow-x:auto; padding-bottom:.4rem; margin-bottom:.8rem;
  -webkit-overflow-scrolling:touch}
.daybar a{
  flex:0 0 auto; min-width:4.2rem; text-align:center; padding:.45rem .5rem;
  border:1px solid var(--line); border-radius:var(--r); background:var(--card);
  text-decoration:none; color:var(--ink); font-size:.82rem; line-height:1.25;
}
.daybar a b{display:block; font-size:1.05rem}
.daybar a[aria-current="page"]{background:var(--brand); border-color:var(--brand); color:#fff}

/* ---- badges + banners ---- */
.badge{display:inline-flex; align-items:center; gap:.25rem; padding:.12rem .5rem;
  border-radius:999px; font-size:.72rem; font-weight:700; letter-spacing:.02em;
  text-transform:uppercase; background:var(--line-2); color:var(--ink-2)}
.badge-ok{background:var(--ok-tint); color:var(--ok)}
.badge-warn{background:var(--warn-tint); color:var(--warn)}
.badge-bad{background:var(--bad-tint); color:var(--bad)}
.badge-brand{background:var(--brand-tint); color:var(--brand)}

.banner{border-radius:var(--r); padding:.7rem .85rem; margin-bottom:.85rem; font-size:.9rem;
  border:1px solid transparent}
.banner-ok{background:var(--ok-tint); border-color:#b7e0cd; color:#0b5638}
.banner-warn{background:var(--warn-tint); border-color:#f0d49a; color:#6f4200}
.banner-bad{background:var(--bad-tint); border-color:#f2c3bf; color:#8a1d17}
.banner-info{background:var(--brand-tint); border-color:#bcd8ee; color:#08436f}
.banner b{display:block; margin-bottom:.15rem}

/* ---- job rows ---- */
.job{display:flex; gap:.75rem; align-items:flex-start; padding:.75rem 0; border-top:1px solid var(--line-2)}
.job:first-of-type{border-top:0}
.job-time{flex:0 0 5rem; font-weight:700; font-size:.9rem; line-height:1.3}
.job-time span{display:block; font-weight:500; color:var(--ink-3); font-size:.78rem}
.job-main{flex:1; min-width:0}
.job-main b{display:block}
.job-main .addr{color:var(--ink-2); font-size:.87rem; overflow-wrap:anywhere}
.job-meta{display:flex; gap:.35rem; flex-wrap:wrap; margin-top:.35rem}

/* ---- countdown ---- */
.countdown{font-variant-numeric:tabular-nums; font-weight:800; font-size:1.35rem; letter-spacing:-.02em}
.countdown.urgent{color:var(--bad)}

.empty{text-align:center; color:var(--ink-3); padding:1.5rem 1rem; font-size:.92rem}
.dl{display:grid; grid-template-columns:auto 1fr; gap:.3rem .9rem; font-size:.9rem; margin:0}
.dl dt{color:var(--ink-3)}
.dl dd{margin:0; overflow-wrap:anywhere}
.stack>*+*{margin-top:.85rem}
hr{border:0; border-top:1px solid var(--line); margin:1rem 0}

@media (min-width:600px){
  .wrap{padding:1.5rem 1.5rem 4rem}
  .choices{grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}

/* ---- small utilities ----
   These exist because the Content-Security-Policy is `style-src 'self'`, which
   blocks inline style attributes. Keeping the CSP strict and adding four
   utility classes is a better trade than allowing 'unsafe-inline'. */
.mt-0{margin-top:0}      .mt-1{margin-top:.25rem}  .mt-2{margin-top:.5rem}
.mt-3{margin-top:.6rem}  .mt-4{margin-top:.8rem}
.mb-0{margin-bottom:0}   .mb-2{margin-bottom:.5rem} .mb-3{margin-bottom:.6rem}
.m-0{margin:0}
.inline{display:inline}
.block{display:block}
.pad-top{padding-top:3rem}
.wrap-any{overflow-wrap:anywhere}
.nowrap{white-space:nowrap}
.card-warn{border-color:var(--warn)}
.row-between{justify-content:space-between; align-items:center}

/* ---- touch targets ----
   .btn-sm is deliberately compact on a mouse-driven screen, but Ahmed runs the
   dashboard on a phone and taps "Done" on a callback with a thumb, often in a
   van. On a touch device every control gets the full 44px regardless of class.
   Keyed on pointer:coarse rather than width, because the input device is the
   thing that actually matters here. */
@media (pointer: coarse) {
  .btn-sm { min-height: var(--tap); padding-inline: .9rem; }
  .daybar a { min-height: var(--tap); display: flex; flex-direction: column;
              align-items: center; justify-content: center; }
  .top nav a { min-height: var(--tap); }

  /* A badge that is only a label can stay small. A badge that is a LINK is a
     tap target -- "Call" and "Directions" on a job row are the two things
     Ahmed presses most, often one-handed in a van. */
  .badge { padding-block: .3rem; font-size: .8rem; }   /* 12.8px: badges carry the requested time, the fee and the status */
  a.badge { min-height: var(--tap); padding-inline: .8rem; font-size: .8rem; }

  /* A 24px checkbox is a miss waiting to happen, and one of these records that
     a customer agreed to a new appointment time.

     Margin is SPACING, not hit area: enlarging the margin stops neighbours
     being mis-tapped but does not make the surrounding pixels toggle the
     control. The real fix is a clickable <label> wrapping it, which is what
     .choice and .check-row are -- the whole row toggles, and the row is the
     thing that is >= 44px tall. */
  input[type="checkbox"], input[type="radio"] { width: 24px; height: 24px; }
  .choice { padding-block: 1rem; }
  label.check-row { min-height: var(--tap); }
}

/* ==========================================================================
   PUBLIC SITE.
   The visual system follows the approved reference: warm off-white ground,
   teal primary on pill buttons and a facts band, navy secondary, slab-serif
   headings. Scoped to body.public so the staff dashboard keeps its own look.

   The slab face is SELF-HOSTED (one 34 KB variable file, Apache 2.0) because
   the CSP is style-src 'self' and the page makes no third-party request.
   Body text is the system sans; the identity lives in the headings.

   The accent is a deep water-teal, #0b7285, replacing the reference's orange
   at the owner's request. White on it is 5.6:1 (AA for button labels); the
   bright variant #5fd3e2 is reserved for text on navy (6.6:1). Measured,
   not eyeballed.
   ========================================================================== */
@font-face{
  font-family:"Roboto Slab"; font-style:normal; font-weight:400 900; font-display:swap;
  src:url(/static/fonts/roboto-slab-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
.public{
  --bg:#faf8f4; --fg:#1a1f2e; --card:#ffffff; --muted:#f0ece4; --muted-fg:#5c6470; --border:#e0d9cf;
  --accent:#0b7285; --accent-hover:#085c6b; --accent-soft:#e2f3f6; --accent-bright:#5fd3e2;
  --navy:#1a3a5c; --navy-deep:#122a44; --navy-line:#2b5178; --teal:#2ab8ca;
  --slab:"Roboto Slab",Georgia,"Times New Roman",serif;
  background:var(--bg); color:var(--fg); font-size:17px; line-height:1.55;
  padding-bottom:calc(5.25rem + env(safe-area-inset-bottom));
}
.public a{color:var(--navy)}
.public .wrap{max-width:72rem; padding:0 1.25rem; margin:0 auto}
.public h1,.public h2,.public h3,.public .slab{font-family:var(--slab)}
.public h2{font-size:clamp(1.7rem,3.4vw,2.4rem); line-height:1.15; letter-spacing:-.01em; font-weight:700; margin:0 0 1rem; color:var(--fg)}
.public h3{font-size:1.1rem; font-weight:700; margin:0 0 .35rem; color:var(--fg)}
.public .eyebrow{font-size:.78rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin:0 0 .7rem}
.public .eyebrow-light{color:var(--teal)}
.public .center{text-align:center}
.public .intro{color:var(--muted-fg); font-size:1.08rem; max-width:34rem; margin:0 auto 2.5rem}

/* notice */
.public .notice{background:var(--muted); color:var(--fg); border-bottom:1px solid var(--border); font-size:.9rem; text-align:center; padding:.5rem 1rem; line-height:1.4}
.public .notice a{font-weight:700; white-space:nowrap; display:inline-flex; align-items:center; min-height:var(--tap); padding:0; margin:-.6rem .15rem; color:var(--accent)}
@media (max-width:639px){ .public .notice-num{display:none} }

/* sticky nav */
.public .top{position:sticky; top:0; z-index:45; background:rgba(255,255,255,.94); backdrop-filter:blur(8px) saturate(1.2);
  border-bottom:1px solid var(--border); padding:0 1.25rem; height:64px; display:flex; align-items:center; justify-content:space-between; gap:1rem}
.public .brand{color:var(--navy); text-decoration:none; display:flex; align-items:center; gap:.55rem; min-height:var(--tap)}
.public .mark{width:36px; height:36px; flex:0 0 auto}
.public .mark-tile{fill:var(--navy)}
.public .mark-pipe{fill:none; stroke:#fff; stroke-width:4.5; stroke-linecap:round; stroke-linejoin:round}
.public .mark-jet{fill:none; stroke:var(--accent-bright); stroke-width:2.6; stroke-linecap:round}
.public .brand-text{font-family:var(--slab); font-weight:800; font-size:1.2rem; color:var(--navy); line-height:1}
.public .brand-text em{font-style:normal; color:var(--accent)}
.public .brand-text small{display:block; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; font-size:.7rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted-fg); margin-top:.25rem}
.public .navlinks{display:none; align-items:center; gap:1.6rem}
.public .navlinks a{font-size:.92rem; font-weight:500; color:var(--muted-fg); text-decoration:none; min-height:var(--tap); display:inline-flex; align-items:center}
.public .navlinks a:hover{color:var(--fg)}
.public .navlinks a.btn,.public .navlinks a.btn:hover{color:#fff}
.public .menu{position:relative}
.public .menu summary{list-style:none; cursor:pointer; width:var(--tap); height:var(--tap); display:grid; place-items:center; border-radius:10px}
.public .menu summary::-webkit-details-marker{display:none}
.public .menu summary span{display:block; width:20px; height:2px; background:var(--fg); box-shadow:0 -6px 0 var(--fg),0 6px 0 var(--fg)}
/* a closed <details> must hide its panel even though we set display on it */
.public .menu:not([open]) .menu-panel{display:none}
.public .menu-panel{position:absolute; right:0; top:calc(100% + .5rem); background:#fff; border:1px solid var(--border); border-radius:14px; box-shadow:0 12px 40px rgba(26,31,46,.14); padding:.5rem; min-width:14rem; display:grid}
.public .menu-panel a{padding:.7rem .9rem; border-radius:10px; text-decoration:none; color:var(--fg); font-weight:500; min-height:var(--tap); display:flex; align-items:center}
.public .menu-panel a:hover{background:var(--muted)}
.public .menu-panel .btn{margin-top:.35rem}
/* the Call button in the phone menu keeps its white text (the menu's link colour was overriding it: 2.9:1) */
.public .menu-panel a.btn-accent,.public .menu-panel a.btn-accent:hover{color:#fff}

/* buttons: pills */
.public .btn{border-radius:999px; font-weight:700; font-size:1rem; padding:0 1.35rem; min-height:48px}
.public .btn-primary,.public .btn-accent{background:var(--accent); border-color:var(--accent); color:#fff; box-shadow:0 8px 24px rgba(11,114,133,.25)}
.public .btn-primary:hover,.public .btn-accent:hover{background:var(--accent-hover); border-color:var(--accent-hover)}
.public .btn-navy{background:var(--navy); border-color:var(--navy); color:#fff}
.public .btn-navy:hover{background:var(--navy-deep); border-color:var(--navy-deep)}
.public .btn-ghost{background:transparent; border:2px solid rgba(255,255,255,.4); color:#fff}
.public .btn-ghost:hover{background:rgba(255,255,255,.1)}
.public .btn-xl{min-height:58px; padding:0 2rem; font-size:1.1rem}
.public .btn-sm{min-height:40px; padding:0 1.1rem; font-size:.9rem}
.public .btn-block{display:flex; width:100%}
.public .btn-icon{line-height:1}
.public .btn:focus-visible,.public a:focus-visible,.public summary:focus-visible{outline:3px solid var(--teal); outline-offset:3px}
.public .btn-lg{min-height:56px; padding:0 1.5rem; font-size:1.08rem}
.public .btn-row{margin-bottom:1.25rem}

/* hero */
.public .hero{position:relative; background:var(--navy); color:#fff; overflow:hidden; padding:3.5rem 0 3rem}
.public .hero::before{content:""; position:absolute; inset:0; background:linear-gradient(135deg,rgba(95,211,226,.16) 0%,transparent 60%); pointer-events:none}
.public .hero-art{position:absolute; right:-6rem; top:50%; transform:translateY(-50%); width:44rem; max-width:80vw; margin:0; opacity:.16; pointer-events:none}
.public .hero-art svg{display:block; width:100%; height:auto}
.public .art-accent{fill:var(--accent-bright)}
.public .art-accent-stroke{stroke:var(--accent-bright)}
.public .hero-grid{position:relative; display:grid; gap:2rem; align-items:center}
.public .hero-badge{display:inline-flex; align-items:center; gap:.5rem; background:rgba(95,211,226,.14); border:1px solid rgba(95,211,226,.45); color:#9fe4ee;
  font-size:.78rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:.4rem .8rem; border-radius:999px; margin-bottom:1.4rem}
.public .hero-badge i{width:7px; height:7px; border-radius:50%; background:var(--accent-bright); animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.public h1{font-size:clamp(2.3rem,5.6vw,3.6rem); line-height:1.08; letter-spacing:-.01em; font-weight:800; margin:0 0 1.1rem; color:#fff}
.public h1 em{font-style:normal; color:var(--accent-bright)}
/* booking pages: the hero's white headline must not leak onto a light page (it was invisible, 2026-10-04) */
.public .wrap-narrow h1{color:var(--fg); font-size:clamp(1.6rem,4.5vw,2.2rem); margin:0 0 .9rem}
.public .lead{font-size:1.12rem; line-height:1.6; color:#cbd5e1; max-width:30rem; margin:0 0 1.75rem}
.public .hero-cta{display:flex; gap:.8rem; flex-wrap:wrap; margin-bottom:1.75rem}
.public .hero-facts{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.6rem 1.5rem; font-size:.92rem; color:#cbd5e1}
.public .hero-facts li{display:flex; align-items:center; gap:.5rem}
.public .hero-facts li::before{content:"\2713"; color:var(--teal); font-weight:800}
.public .callcard{display:none; background:#fff; color:var(--fg); border-radius:18px; padding:1.75rem; box-shadow:0 30px 60px rgba(0,0,0,.35); max-width:24rem; justify-self:end; width:100%}
.public .callcard .eyebrow{color:var(--muted-fg); margin-bottom:.3rem; letter-spacing:.12em}
.public .callcard-num{font-family:var(--slab); font-size:1.75rem; font-weight:700; color:var(--navy); text-decoration:none; display:inline-flex; align-items:center; min-height:var(--tap); margin:0 0 .3rem; font-variant-numeric:tabular-nums}
.public .callcard-sub{color:var(--muted-fg); font-size:.92rem; margin:0 0 1.2rem}
.public .callcard ul{list-style:none; margin:0 0 1.4rem; padding:0; display:grid; gap:.6rem}
.public .callcard li{display:flex; align-items:center; gap:.7rem; font-size:.95rem}
.public .callcard li::before{content:"\2713"; flex:0 0 auto; width:22px; height:22px; border-radius:50%; background:var(--accent-soft); color:var(--accent); display:grid; place-items:center; font-size:.75rem; font-weight:800}
.public .callcard .fine{font-size:.8rem; color:var(--muted-fg); margin:.8rem 0 0; text-align:center}

/* facts band */
.public .band{background:var(--accent); color:#fff; padding:2.25rem 0}
.public .band-grid{display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; text-align:center}
.public .band b{display:block; font-family:var(--slab); font-size:2.2rem; font-weight:800; line-height:1; margin-bottom:.35rem}
.public .band span{font-size:.92rem; color:#e3f6f9; font-weight:500}

/* sections */
.public .section{padding:4rem 0}
.public .section-muted{background:var(--muted)}
.public .cards{display:grid; gap:1.25rem}
.public .card-s{background:var(--card); border:1px solid var(--border); border-radius:18px; padding:1.6rem; transition:box-shadow .25s,border-color .25s}
.public .card-s:hover{border-color:rgba(11,114,133,.4); box-shadow:0 18px 40px rgba(26,31,46,.08)}
.public .icon{width:46px; height:46px; border-radius:12px; background:var(--accent-soft); color:var(--accent); display:grid; place-items:center; margin-bottom:1rem}
.public .icon svg{width:24px; height:24px}
.public .card-s p{margin:0; color:var(--muted-fg); font-size:.95rem; line-height:1.55}
.public .card-s .pill{display:inline-block; margin-top:.8rem; font-size:.78rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); background:var(--accent-soft); border-radius:999px; padding:.25rem .6rem}

/* trust (navy) */
.public .trust{position:relative; background:var(--navy); color:#fff; padding:4.5rem 0; overflow:hidden}
.public .trust::before{content:""; position:absolute; inset:0; background:radial-gradient(circle at 72% 50%,rgba(42,184,202,.16),transparent 55%); pointer-events:none}
.public .trust-grid{position:relative; display:grid; gap:2.5rem; align-items:center}
.public .trust h2{color:#fff}
.public .trust .intro{color:#cbd5e1; margin:0 0 1.5rem; max-width:none; text-align:left}
.public .checks{list-style:none; margin:0; padding:0; display:grid; gap:.85rem}
.public .checks li{display:flex; gap:.8rem; align-items:flex-start; color:#dbe5f2}
.public .checks li::before{content:"\2713"; flex:0 0 auto; margin-top:.15rem; width:22px; height:22px; border-radius:50%; background:rgba(42,184,202,.2); border:1px solid rgba(42,184,202,.45); color:var(--teal); display:grid; place-items:center; font-size:.72rem; font-weight:800}
.public .glass{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
.public .glass div{background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); border-radius:18px; padding:1.4rem; backdrop-filter:blur(6px)}
.public .glass div:nth-child(2n){margin-top:1.5rem}
.public .glass div.g-teal{background:rgba(42,184,202,.18); border-color:rgba(42,184,202,.35)}
.public .glass div.g-accent{background:rgba(95,211,226,.18); border-color:rgba(95,211,226,.4)}
.public .glass .icon{background:rgba(255,255,255,.12); color:#fff; margin-bottom:.8rem}
.public .glass h3{color:#fff; margin-bottom:.3rem}
.public .glass p{margin:0; color:#b9c6d6; font-size:.9rem}

/* meet + note */
/* how it works */
.public .steps{list-style:none; counter-reset:step; margin:0; padding:0; display:grid; gap:1rem}
.public .steps li{counter-increment:step; position:relative; background:var(--card); border:1px solid var(--border); border-radius:18px; padding:1.4rem 1.4rem 1.3rem 4.4rem}
.public .steps li::before{content:counter(step); position:absolute; left:1.3rem; top:1.25rem; width:2.2rem; height:2.2rem; border-radius:50%; background:var(--accent); color:#fff; font-family:var(--slab); font-weight:800; display:grid; place-items:center}
.public .steps h3{font-size:1.08rem; margin:0 0 .35rem}
.public .steps p{margin:0; color:var(--muted-fg)}
/* about */
.public .about-card{background:var(--card); border:1px solid var(--border); border-radius:18px; padding:1.75rem; max-width:52rem; margin:0 auto}
.public .about-card p{color:var(--muted-fg); max-width:62ch; margin:0 0 .8rem}
.public .about-card p:last-child{margin-bottom:0}
.public .card-s .pill.pill-wrap{text-transform:none; letter-spacing:0; font-size:.86rem; line-height:1.35; white-space:normal}
.public .reviews{list-style:none; margin:0; padding:0; display:grid; gap:.75rem}
.public .reviews li{background:var(--card); border:1px solid var(--border); border-radius:14px; padding:1rem}

/* fees -- a slim strip at the foot of the page, not a feature section */
.public .fees-strip{background:var(--muted); border-top:1px solid var(--border); padding:1.75rem 0 2rem}
.public .fees-head{display:flex; flex-wrap:wrap; align-items:baseline; gap:.25rem 1.25rem; margin-bottom:1rem}
.public .fees-head h2{font-size:1.1rem; margin:0; color:var(--navy)}
.public .fees-head p{margin:0; font-size:.88rem; color:var(--muted-fg); flex:1 1 24rem}
.public .fees{display:grid; grid-template-columns:1fr; gap:.75rem 1.5rem; margin:0; font-size:.88rem}
.public .fee{border-bottom:1px solid var(--border); padding:0 0 .6rem}
.public .fee dt{font-weight:600; color:var(--fg); margin-bottom:.15rem}
.public .fee dt em{font-style:normal; color:var(--muted-fg)}
.public .fee dd{margin:0}
.public .fee dd b{font-family:var(--slab); font-size:1.05rem; color:var(--navy); font-variant-numeric:tabular-nums; white-space:nowrap}
.public .fee dd small{display:inline; font-size:.8rem; color:var(--muted-fg); line-height:1.4; margin-left:.35rem}
.public .fees-note{margin:.9rem 0 0; font-size:.82rem; color:var(--muted-fg)}
.public .note{color:var(--muted-fg); font-size:.95rem; margin:1rem 0 0; max-width:60ch}

/* contact */
.public .contact-grid{display:grid; gap:2.5rem; align-items:start}
.public .rows{display:grid; gap:1rem; margin-top:1.5rem}
.public .row{display:flex; align-items:center; gap:1rem}
.public .row .icon{margin:0; width:42px; height:42px; border-radius:50%}
.public .row small{display:block; font-size:.78rem; color:var(--muted-fg)}
.public .row b{font-size:1rem; color:var(--fg)}
.public .row a{text-decoration:none; font-weight:700; color:var(--fg); min-height:var(--tap); display:inline-flex; align-items:center}
.public .contact-card{background:var(--card); border:1px solid var(--border); border-radius:18px; padding:1.75rem; box-shadow:0 10px 30px rgba(26,31,46,.06)}
.public .hours{border-collapse:collapse; width:100%; font-size:1rem; margin:0 0 1.25rem}
.public .hours th,.public .hours td{text-align:left; padding:.65rem 0; border-bottom:1px solid var(--border); vertical-align:top}
.public .hours th{font-weight:700; color:var(--fg); padding-right:1rem}
.public .hours td{color:var(--muted-fg); font-variant-numeric:tabular-nums; white-space:nowrap}
.public .areas{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.5rem}
.public .areas li{background:var(--accent-soft); color:var(--accent); font-weight:700; border-radius:999px; padding:.4rem .85rem; font-size:.92rem}

/* faq */
.public .wrap-faq{max-width:48rem}
.public .faq{display:grid; gap:.6rem}
.public .faq details{background:var(--card); border:1px solid var(--border); border-radius:14px; padding:0 1.1rem}
.public .faq summary{list-style:none; cursor:pointer; font-weight:700; color:var(--fg); min-height:var(--tap); padding:.8rem 2.2rem .8rem 0; position:relative; display:flex; align-items:center}
.public .faq summary::-webkit-details-marker{display:none}
.public .faq summary::after{content:"+"; position:absolute; right:0; top:50%; transform:translateY(-50%); width:28px; height:28px; border-radius:50%; background:var(--accent-soft); color:var(--accent); display:grid; place-items:center; font-weight:800; line-height:1}
.public .faq details[open] summary::after{content:"\2013"}
.public .faq details p{margin:0 0 1rem; color:var(--muted-fg); font-size:.98rem}

/* footer */
.public .foot{background:var(--fg); color:#94a3b8; padding:2.5rem 0}
.public .foot .wrap{display:grid; gap:1rem; align-items:center; text-align:center}
.public .foot .brand{justify-content:center}
.public .foot .brand-text{color:#fff}
.public .foot .brand-text small{color:#94a3b8}
.public .foot .mark-tile{fill:#fff}
.public .foot .mark-pipe{stroke:var(--navy)}
.public .foot .mark-jet{stroke:var(--accent)}
.public .foot p{margin:0; font-size:.9rem}
.public .foot a.foot-tel{color:#fff; font-weight:700; text-decoration:none; min-height:var(--tap); display:inline-flex; align-items:center; justify-content:center}

/* fixed call bar -- phones only */
.public .callbar{position:fixed; left:0; right:0; bottom:0; z-index:40; padding:.65rem 1rem calc(.65rem + env(safe-area-inset-bottom));
  background:rgba(250,248,244,.94); backdrop-filter:saturate(1.2) blur(8px); border-top:1px solid var(--border); transition:transform .25s ease}
.public .callbar.is-parked{transform:translateY(120%)}

/* secondary pages keep the same system */
.public .card{background:var(--card); border-color:var(--border); border-radius:18px}
.public .card h1{font-size:clamp(1.6rem,4.5vw,2.1rem); color:var(--fg); margin-bottom:.9rem}
.public .banner-info{background:var(--accent-soft); border-color:#b5dfe6; color:#0a4d59}
.public .table{border-collapse:collapse; width:100%; font-size:1rem; margin:0 0 .5rem}
.public .table td{text-align:left; padding:.55rem 0; border-bottom:1px solid var(--border); vertical-align:top}
.public .table td:first-child{font-weight:700; color:var(--fg); padding-right:1rem}
.public .table td:last-child{color:var(--muted-fg); font-variant-numeric:tabular-nums; white-space:nowrap}
.nowrap{white-space:nowrap}

@media (min-width:640px){
  .public{padding-bottom:0}
  .public .callbar{display:none}
  .public .wrap{padding:0 1.5rem}
  .public .band-grid{grid-template-columns:repeat(4,1fr)}
  .public .cards{grid-template-columns:1fr 1fr}
  .public .steps{grid-template-columns:repeat(3,1fr)}
  .public .fees{grid-template-columns:1fr 1fr}
  .public .contact-grid{grid-template-columns:1fr 1fr; gap:3.5rem}
  .public .foot .wrap{grid-template-columns:auto 1fr auto; text-align:left}
  .public .foot .brand{justify-content:flex-start}
  .public .fees{grid-template-columns:repeat(4,1fr)}
}
@media (min-width:860px){
  .public .navlinks{display:flex}
  .public .menu{display:none}
  .public .hero{padding:5.5rem 0 5rem}
  .public .hero-grid{grid-template-columns:1.15fr .85fr; gap:3rem}
  .public .callcard{display:block}
  .public .cards{grid-template-columns:repeat(3,1fr)}
  .public .trust-grid{grid-template-columns:1fr 1fr; gap:4rem}
}
@media (max-width:639px){
  .public .top nav.navlinks{display:none}
}

/* the one honest line about the confirmation text */
.textline{margin:.9rem 0 0; padding:.7rem .9rem; border-radius:10px; font-size:.92rem; line-height:1.45; background:var(--muted, #f0ece4); border:1px solid var(--border, #e0d9cf)}
.textline-problem{background:#fff4e5; border-color:#f0c48a}
.textline-delivered{background:#e8f6ee; border-color:#a6d8bb}

/* legal pages */
.public .legal{max-width:46rem; padding-block:2rem 4rem}
.public .legal h1{font-size:clamp(1.8rem,4vw,2.4rem); margin:0 0 .6rem; color:var(--fg)}   /* the public theme makes h1 white for the dark hero; these pages have none */
.public .legal h2{font-size:1.15rem; margin:1.8rem 0 .4rem}
.public .legal p,.public .legal li{color:var(--muted-fg); max-width:65ch}
.public .legal blockquote{margin:.6rem 0; padding:.8rem 1rem; border-left:4px solid var(--accent); background:var(--card); border-radius:0 10px 10px 0; color:var(--fg)}
.public .legal .samples li{margin:.5rem 0; padding:.6rem .8rem; background:var(--card); border:1px solid var(--border); border-radius:10px; color:var(--fg)}
.public .lead-legal{font-size:1.1rem}
.public .foot-legal{margin:.4rem 0 0; font-size:.85rem}
.public .foot-legal a{color:#cbd5e1; display:inline-block; padding:.45rem .15rem; min-height:24px}
/* pages without the full menu keep their phone number visible on a phone */
.public .top nav.navlinks.always{display:flex}
/* plain pages (booking paused, cannot book): breathing room and the legal line */
.page-gap{margin-top:1.25rem}
.foot-mini{max-width:40rem; margin:1.5rem auto 2rem; padding:0 1rem; font-size:.85rem; color:var(--ink-3)}
.foot-mini a{display:inline-block; padding:.45rem .15rem; min-height:24px; color:var(--ink-2)}

/* a long consent sentence: the box lines up with its FIRST line, not the middle of the paragraph */
.check-row{align-items:flex-start}
.check-row input[type="checkbox"]{margin-top:.2rem; flex:0 0 auto}
.public .legal .optin-proof{border:1px solid var(--line, #d9d6cf);border-radius:.5rem;padding:.9rem 1rem;background:#fff;margin:.5rem 0 1rem}
.public .legal .status-note{background:var(--warn-bg, #fff6e0);border-left:3px solid var(--warn, #c98a00);padding:.6rem .8rem;border-radius:.3rem}
.public .legal .proof-shot{margin:1rem 0;max-width:100%}
.public .legal .proof-shot img{display:block;max-width:100%;height:auto;border:1px solid var(--line, #d9d6cf);border-radius:.5rem}
.public .legal .proof-shot figcaption{font-size:.9rem;color:var(--muted-fg, #5c6470);margin-top:.35rem}
.public .legal ol.script{padding-left:1.3rem}
.public .legal ol.script li{margin:.5rem 0}

/* Today: "waiting on you" tiles (2026-10-04) */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(9rem,1fr)); gap:.6rem; margin-bottom:1rem}
.stat{display:flex; flex-direction:column; gap:.1rem; min-height:var(--tap); padding:.75rem .9rem;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); color:var(--ink); text-decoration:none}
.stat b{font-size:1.6rem; line-height:1.1}
.stat span{font-size:.85rem; color:var(--ink-3)}
.stat-warn{border-color:var(--warn); background:var(--warn-tint)}
.stat-bad{border-color:var(--bad); background:var(--bad-tint)}
ul.plain{padding-left:1.1rem}
a.job-link{color:inherit; text-decoration:none}
a.job-link:hover b{text-decoration:underline}
.banner li b{display:inline; margin:0}
.stats{grid-template-columns:repeat(3,minmax(0,1fr))}
.stats a.stat:only-child{grid-column:span 3}
@media (max-width:640px){
  .stat{padding:.6rem .65rem}
  .stat b{font-size:1.35rem}
  .stat span{font-size:.78rem}
  /* Dashboard header on a phone: name on one line, the menu as ONE scrollable row. */
  .top-dash{flex-wrap:wrap; row-gap:.4rem}
  .top-dash nav{flex-wrap:nowrap; overflow-x:auto; width:100%; -webkit-overflow-scrolling:touch; padding-bottom:.15rem}
  .top-dash nav a, .top-dash nav form{flex:0 0 auto}
}

/* Calendar (2026-10-05): week strip, compact head */
.cal-title{font-size:1.15rem}
.week{display:grid; grid-template-columns:auto repeat(7,minmax(0,1fr)) auto; gap:.3rem; margin-top:.75rem; align-items:stretch}
.week .day{display:flex; flex-direction:column; align-items:center; gap:.05rem; padding:.45rem .1rem; min-height:var(--tap);
  border:1px solid var(--line); border-radius:var(--r); color:var(--ink); text-decoration:none; background:var(--card)}
.week .day-name{font-size:.7rem; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-3)}
.week .day-num{font-size:1.1rem; line-height:1.15}
.week .day-count{font-size:.68rem; color:var(--ink-3); white-space:nowrap}
.week .day-today{border-color:var(--brand)}
.week .day-on{background:var(--brand); border-color:var(--brand)}
.week .day-on .day-name, .week .day-on .day-num, .week .day-on .day-count{color:#fff}
.week .day-closed .day-num{color:var(--ink-3)}
.week .week-nav{display:flex; align-items:center; justify-content:center; min-width:1.6rem; font-size:1.4rem;
  color:var(--ink-3); text-decoration:none}
.cal-jump{justify-content:center; flex-wrap:wrap}
.cal-jump input[type=date]{width:auto; min-height:var(--tap)}
.tech-free{display:flex; flex-wrap:wrap; gap:.4rem}
details.card > summary{list-style:none; cursor:pointer}
details.card > summary::-webkit-details-marker{display:none}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
@media (max-width:640px){
  .week{gap:.2rem}
  .week .day{padding:.4rem 0}
  .week .day-num{font-size:1rem}
  .week .day-count{font-size:.6rem}
  .week .week-nav{min-width:1.1rem}
}
.cal-head .center{text-align:center}
.cal-jump{display:flex; flex-wrap:nowrap; align-items:center; gap:.4rem}
.cal-jump input[type=date]{flex:1 1 auto; width:auto; max-width:13rem; margin:0}
.cal-jump .btn{flex:0 0 auto}

/* ===================================================================
   DASHBOARD look (2026-10-05): professional, calm, one-handed on iPhone.
   Everything below is scoped to body.dash; the public site is untouched.
   =================================================================== */
.dash{--navy:#1a3a5c; --accent-bright:#5fd3e2; background:#f3f5f8}
.dash .staging-bar{background:#fff7e6; color:#7a4a00; border-bottom:1px solid #f1dcb2; text-transform:none;
  letter-spacing:0; font-weight:500; font-size:.85rem; padding:.45rem 1rem; text-align:center}
.dash .staging-bar b{font-weight:700}

.dash .mark{width:34px; height:34px; flex:0 0 auto}
.dash .mark-tile{fill:var(--navy)}
.dash .mark-pipe{fill:none; stroke:#fff; stroke-width:4.5; stroke-linecap:round; stroke-linejoin:round}
.dash .mark-jet{fill:none; stroke:var(--accent-bright); stroke-width:2.6; stroke-linecap:round}

.dash .top-dash{position:sticky; top:0; z-index:40; background:rgba(255,255,255,.96);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--line); padding:.55rem 1rem; gap:1rem; flex-wrap:nowrap}
.dash .dash-brand{display:flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--ink); min-height:var(--tap)}
.dash .dash-brand-text{display:flex; flex-direction:column; line-height:1.15}
.dash .dash-brand-text b{font-size:1.05rem; letter-spacing:-.01em}
.dash .dash-brand-text small{font-size:.75rem; color:var(--ink-3); font-weight:500}

.dash .dash-tabs{display:flex; align-items:center; gap:.2rem; flex-wrap:nowrap; overflow:visible; width:auto}
.dash .tab{display:flex; align-items:center; gap:.4rem; min-height:40px; padding:0 .8rem; border-radius:999px;
  color:var(--ink-2); text-decoration:none; font-weight:600; font-size:.92rem; cursor:pointer; list-style:none}
.dash .tab::-webkit-details-marker{display:none}
.dash .tab svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.dash .tab:hover{background:var(--line-2); color:var(--ink)}
.dash .tab-on{background:var(--brand-tint); color:var(--brand)}
.dash .more{position:relative}
.dash .more-panel{position:absolute; right:0; top:calc(100% + .4rem); min-width:13rem; background:#fff;
  border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow); padding:.35rem; z-index:50}
.dash .more-panel a, .dash .more-panel button{display:flex; align-items:center; width:100%; min-height:var(--tap);
  padding:0 .8rem; border:0; background:none; border-radius:var(--r); color:var(--ink); font:inherit;
  font-weight:600; text-decoration:none; text-align:left; cursor:pointer}
.dash .more-panel a:hover, .dash .more-panel button:hover{background:var(--line-2)}
.dash .more-panel form{margin:0; border-top:1px solid var(--line-2); margin-top:.3rem; padding-top:.3rem}

.dash .wrap{padding-top:1.1rem}
.dash .card{border-color:#e3e8ee; box-shadow:0 1px 2px rgba(16,21,28,.04), 0 6px 18px rgba(16,21,28,.04)}
.dash .card h2{font-size:1.05rem}
.dash .badge{text-transform:none; letter-spacing:0; font-size:.78rem; font-weight:600}
.dash .btn-call{background:var(--ok-tint); color:var(--ok); border-color:#bfe3d0}
.dash .cb-title{font-size:1.05rem}

/* Phone: the tabs become a bottom tab bar; the header keeps only the brand. */
@media (max-width:760px){
  .dash{padding-bottom:calc(68px + env(safe-area-inset-bottom))}
  .dash .top-dash{flex-wrap:nowrap}
  .dash .dash-tabs{position:fixed; left:0; right:0; bottom:0; z-index:60; justify-content:space-around;
    background:rgba(255,255,255,.98); backdrop-filter:blur(8px); border-top:1px solid var(--line);
    padding:.3rem .25rem calc(.3rem + env(safe-area-inset-bottom)); width:auto; overflow:visible}
  .dash .tab{flex-direction:column; gap:.1rem; min-height:52px; min-width:3.6rem; padding:.25rem .3rem;
    border-radius:var(--r); font-size:.7rem}
  .dash .tab svg{width:23px; height:23px}
  .dash .tab-on{background:none; color:var(--brand)}
  .dash .more-panel{top:auto; bottom:calc(100% + .5rem); right:.2rem}
}

/* Sign-in */
.dash.auth .login-wrap{max-width:420px}
.dash .login-brand{display:flex; align-items:center; justify-content:center; gap:.7rem; margin:1.5rem 0 1rem}
.dash .login-brand .mark{width:46px; height:46px}
.dash .login-brand b{display:block; font-size:1.35rem; letter-spacing:-.015em}
.dash .login-brand small{color:var(--ink-3); font-size:.8rem; font-weight:500}
.dash .login-card h1{font-size:1.25rem}
.dash .center{text-align:center}
@media (max-width:760px){
  /* backdrop-filter on the header makes it the containing block for position:fixed,
     which pinned the "bottom" tab bar to the header. No blur on phones. */
  .dash .top-dash{backdrop-filter:none; background:#fff}
}
.dash .job-actions{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.5rem; margin-top:.9rem}
.dash .job-actions .btn{margin:0}
.dash .dash-brand .dash-brand-text{font-size:1rem; color:var(--ink)}
.dash .dash-brand .dash-brand-text b{color:var(--ink)}
.dash .dash-brand .dash-brand-text small{color:var(--ink-3)}

/* Dashboard pass 2 (2026-10-05) */
.dash h1{font-size:1.4rem}
.dash .status-ok{border-color:#bfe3d0; background:var(--ok-tint)}
.dash .status-ok b{color:var(--ok)}
.dash .device{display:flex; align-items:center; justify-content:space-between; gap:.75rem}
.dash .device-main{min-width:0}
.dash .device form{margin:0; flex:0 0 auto}
.dash .settings{padding:0}
.dash .setting{display:flex; align-items:flex-start; justify-content:space-between; gap:.75rem; padding:.8rem .9rem;
  border-bottom:1px solid var(--line-2)}
.dash .setting:last-child{border-bottom:0}
.dash .setting-main{min-width:0}
.dash .setting .badge{flex:0 0 auto}
.dash .msg-card h1{font-size:1.25rem}
.dash .btn-row form{margin:0}
.dash .countdown{font-weight:700; color:var(--ink); white-space:nowrap}
.dash .countdown.urgent{color:var(--bad)}