/* 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}
.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 .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; }
  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 -- navy and warm white.
   Scoped to body.public so the staff dashboard keeps its own palette.
   No web fonts: the CSP is style-src 'self' and a plumber's page should load
   in one round trip on a phone in a basement. Hierarchy comes from weight,
   size and space, not from a font download.
   ========================================================================== */
.public{
  --navy:#0f2a4a; --navy-2:#173d6b; --navy-3:#21507f;
  --navy-tint:#e8eef6; --navy-line:#c9d5e4;
  --paper:#faf7f2; --paper-2:#fffdf9; --rule:#e5ded3;
  --ink-p:#14213a; --ink-p2:#46556a; --ink-p3:#5e6c80;
  --accent:#a8571a; --accent-soft:#f3e4d3;
  background:var(--paper); color:var(--ink-p);
  font-size:17px; line-height:1.55;
  padding-bottom:calc(5.25rem + env(safe-area-inset-bottom)); /* room for the call bar */
}
.public a{color:var(--navy)}
.public .wrap{max-width:62rem; padding:0 1.15rem}

/* notice (replaces the staging bar for customers) */
.public .notice{
  background:var(--navy-tint); color:var(--navy); border-bottom:1px solid var(--navy-line);
  font-size:.9rem; text-align:center; padding:.55rem 1rem; line-height:1.4;
}
/* the number in the notice is a tap target, not decoration: give it a
   real hit area without making the strip look like a button bar */
.public .notice a{font-weight:700; white-space:nowrap; display:inline-flex; align-items:center;
  min-height:var(--tap); padding:0; margin:-.6rem .15rem; text-underline-offset:.15em}
@media (max-width:639px){ .public .notice-num{display:none} }

/* header + wordmark */
.public .top{background:var(--paper-2); border-bottom:1px solid var(--rule); padding:.7rem 1.15rem}
.public .brand{color:var(--navy); text-decoration:none; display:flex; align-items:center; gap:.6rem; min-height:var(--tap)}
.public .mark{width:34px; height:34px; flex:0 0 auto; color:var(--navy)}
.public .mark-drop{fill:var(--accent)}
.public .brand-text{display:flex; flex-direction:column; line-height:1.05; font-weight:800; font-size:1.2rem; letter-spacing:-.02em; color:var(--navy)}
.public .brand-text small{font-weight:600; font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-p3); margin-top:.15rem}
.public .top nav a{min-height:var(--tap)}

/* buttons -- every public page, not only the front page. The booking-paused,
   details, manage and cannot-book templates use .btn-primary and .btn-lg;
   mapping them here keeps one palette without editing each template. */
.public .btn{border-radius:12px; font-weight:700}
.public .btn-primary{background:var(--navy); border-color:var(--navy); color:#fff}
.public .btn-primary:hover{background:var(--navy-2); border-color:var(--navy-2)}
.public .btn-lg{min-height:56px; padding:0 1.5rem; font-size:1.08rem}
.public .btn-row{margin-bottom:1.25rem}
.public .banner-info{background:var(--navy-tint); border-color:var(--navy-line); color:var(--navy)}
.public .card{background:var(--paper-2); border-color:var(--rule)}
.public .card h1{font-size:clamp(1.6rem,4.5vw,2.1rem); color:var(--ink-p); max-width:none; margin-bottom:.9rem}
.public .card h2{font-size:1.25rem; margin-top:.25rem}
/* the hours table on secondary pages gets the same treatment as the front page */
.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(--rule); vertical-align:top}
.public .table td:first-child{font-weight:700; color:var(--ink-p); padding-right:1rem}
.public .table td:last-child{color:var(--ink-p2); font-variant-numeric:tabular-nums; white-space:nowrap}
.public .btn-navy{background:var(--navy); border-color:var(--navy); color:#fff}
.public .btn-navy:hover{background:var(--navy-2); border-color:var(--navy-2)}
.public .btn-paper{background:var(--paper-2); border-color:var(--paper-2); color:var(--navy)}
.public .btn-paper:hover{background:#fff}
.public .btn-ghost{background:transparent; border-color:rgba(255,255,255,.55); color:#fff}
.public .btn-ghost:hover{background:rgba(255,255,255,.1)}
.public .btn-xl{min-height:56px; padding:0 1.5rem; font-size:1.08rem}
.public .btn-icon{font-size:1.05em; line-height:1}
.public .btn:focus-visible,.public a:focus-visible{outline:3px solid var(--navy-3); outline-offset:3px}
.public .hero .btn:focus-visible{outline-color:#fff}

/* hero */
.public .hero{background:var(--navy); color:#fff; padding:2.5rem 0 1.25rem; overflow:hidden}
.public .hero .wrap{max-width:62rem}
.public .hero-grid{display:grid; gap:1.25rem; align-items:center}
.public .hero-art{margin:.5rem 0 0; width:100%; max-width:22rem; justify-self:center}
.public .hero-art svg{display:block; width:100%; height:auto}
.public .art-accent{fill:var(--accent)}
.public .art-accent-stroke{stroke:var(--accent)}
.public .hero .eyebrow{color:#e5c39f}
.public .eyebrow{
  font-size:.8rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--accent); margin:0 0 .6rem;
}
.public .eyebrow-light{color:#e5c39f}
.public h1{
  font-size:clamp(2rem, 5.2vw, 3.15rem); line-height:1.08; letter-spacing:-.025em;
  font-weight:800; margin:0 0 1rem; max-width:22ch;
}
.public .lead{font-size:1.12rem; line-height:1.55; color:#dbe5f2; max-width:44ch; margin:0 0 1.5rem}
.public .hero-cta{display:flex; gap:.7rem; flex-wrap:wrap; margin-bottom:1.4rem}
.public .hero-facts{
  list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.5rem 1.4rem;
  font-size:.92rem; color:#c7d6ea;
}
.public .hero-facts li{position:relative; padding-left:1rem}
.public .hero-facts li::before{content:""; position:absolute; left:0; top:.55em; width:6px; height:6px;
  border-radius:50%; background:#8fb0d8}

/* sections */
.public .section{padding:2.5rem 0}
.public .section-alt{background:var(--paper-2); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule)}
.public h2{font-size:clamp(1.45rem, 3vw, 1.9rem); line-height:1.2; letter-spacing:-.02em; font-weight:800;
  margin:0 0 1.1rem; color:var(--ink-p)}
.public h3{font-size:1.08rem; font-weight:800; margin:0 0 .35rem; color:var(--navy)}
.public .tiles{display:grid; gap:.9rem}
.public .tile{
  background:var(--paper-2); border:1px solid var(--rule); border-radius:14px; padding:1.1rem 1.15rem;
}
.public .section-alt .tile{background:var(--paper)}
.public .tile p{margin:0; color:var(--ink-p2); font-size:.98rem}
.public .tile-muted{border-style:dashed}
.public .tile-muted h3{color:var(--ink-p2)}
.public .tile-head{display:flex; align-items:center; justify-content:space-between; gap:.6rem; margin-bottom:.35rem}
.public .tile-head h3{margin:0}
.public .pill{
  flex:0 0 auto; font-size:.8rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase;
  color:var(--navy); background:var(--accent-soft); border-radius:999px; padding:.25rem .6rem; white-space:nowrap;
}
.public .note{color:var(--ink-p2); font-size:.95rem; margin:1rem 0 0; max-width:60ch}

/* fees */
.public .fees{display:grid; gap:.75rem; margin:0}
.public .fee{
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:.35rem .9rem;
  background:var(--paper-2); border:1px solid var(--rule); border-radius:14px; padding:.95rem 1.1rem;
}
.public .fee dt{font-weight:700; color:var(--ink-p); flex:1 1 14rem}
.public .fee dt em{font-style:normal; color:var(--ink-p2)}
.public .fee dd{margin:0; flex:1 1 12rem; display:flex; flex-wrap:wrap; align-items:baseline; gap:.3rem .6rem}
.public .fee dd b{font-size:1.35rem; letter-spacing:-.02em; color:var(--navy); font-variant-numeric:tabular-nums}
.public .fee{border-left:4px solid var(--accent)}
.public .fee-note{color:var(--ink-p2); font-size:.92rem; flex-basis:100%}

/* hours + areas */
.public .two-col{display:grid; gap:2rem}
.public .hours{border-collapse:collapse; width:100%; font-size:1rem}
.public .hours th,.public .hours td{text-align:left; padding:.6rem 0; border-bottom:1px solid var(--rule); vertical-align:top}
.public .hours th{font-weight:700; color:var(--ink-p); padding-right:1rem}
.public .hours td{color:var(--ink-p2); 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(--navy-tint); color:var(--navy); font-weight:700; border-radius:999px; padding:.45rem .85rem; font-size:.95rem}

/* why call */
.public .why{padding-top:2rem}
.public .why-grid{list-style:none; margin:0; padding:0; display:grid; gap:.75rem}
.public .why-grid li{background:var(--paper-2); border:1px solid var(--rule); border-radius:14px; padding:.9rem 1rem; display:grid; gap:.3rem}
.public .why-grid b{color:var(--navy); font-size:1rem; display:flex; align-items:center; gap:.55rem; line-height:1.25}
.public .why-grid b::before{content:""; flex:0 0 auto; width:10px; height:10px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px var(--accent-soft)}
.public .why-grid span{color:var(--ink-p2); font-size:.95rem; line-height:1.45}

/* meet Ahmed */
.public .meet-card{display:grid; gap:1.25rem; background:var(--paper); border:1px solid var(--rule); border-radius:18px; padding:1.25rem}
.public .meet-visual img{display:block; width:100%; height:auto; border-radius:14px}
.public .meet-body p{color:var(--ink-p2); max-width:60ch; margin:0 0 .8rem}
.public .meet-body p b{color:var(--ink-p)}
.public .owner-note{margin:1.1rem 0 0; padding:1rem 1.1rem; border-left:4px solid var(--accent); background:var(--paper-2); border-radius:0 12px 12px 0}
.public .owner-note blockquote{margin:0}
.public .owner-note blockquote p{color:var(--ink-p); font-size:1.08rem; font-weight:600; margin:0 0 .5rem; max-width:none}
.public .owner-note figcaption{color:var(--ink-p3); font-size:.88rem}
.public .draft-tag{display:inline-block; font-size:.76rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); background:var(--accent-soft); border-radius:6px; padding:.15rem .45rem; margin-right:.35rem; vertical-align:middle}
.public .reviews{list-style:none; margin:0; padding:0; display:grid; gap:.75rem}
.public .reviews li{background:var(--paper-2); border:1px solid var(--rule); border-radius:14px; padding:1rem}
.public .reviews li p{margin:0 0 .4rem; color:var(--ink-p)}
.public .reviews li span{color:var(--ink-p3); font-size:.9rem}
.public .meet-mark{width:64px; height:64px; border-radius:16px; background:var(--navy); color:#fff; display:grid; place-items:center}
.public .meet-mark svg{width:38px; height:38px}

/* faq -- native <details>, no script. The summary is the tap target. */
.public .wrap-faq{max-width:48rem}
.public .faq{display:grid; gap:.5rem}
.public .faq details{background:var(--paper); border:1px solid var(--rule); border-radius:12px; padding:0 1rem}
.public .faq summary{
  list-style:none; cursor:pointer; font-weight:700; color:var(--ink-p); min-height:var(--tap);
  padding:.7rem 2rem .7rem 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:26px; height:26px; 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:"3"}
.public .faq details p{margin:0 0 .95rem; color:var(--ink-p2); font-size:.98rem}
.public .faq summary:focus-visible{outline:3px solid var(--navy-3); outline-offset:2px; border-radius:6px}

/* final call section */
.public .cta{background:var(--navy); color:#fff; padding:3rem 0; text-align:center}
.public .cta h2{color:#fff; margin:0 auto 1.25rem; max-width:22ch}
.public .cta-line{margin:1rem 0 0; color:#c7d6ea; font-size:.95rem}
.public .cta .btn:focus-visible{outline-color:#fff}

/* footer */
.public .foot{background:#0b1f38; color:#dbe5f2; padding:2.25rem 0 2.5rem; border-top:1px solid #234a7a}
.public .foot-h{font-size:1.15rem; color:#fff; margin-bottom:.4rem}
.public .foot h2{color:#fff; margin-bottom:.6rem}
.public .foot-grid{display:grid; gap:1.75rem}
.public .foot-phone{
  display:inline-block; color:#fff; font-size:clamp(1.6rem, 4.5vw, 2.1rem); font-weight:800;
  letter-spacing:-.02em; text-decoration:none; margin:.15rem 0 .5rem; min-height:var(--tap);
  font-variant-numeric:tabular-nums;
}
.public .foot-phone:hover{text-decoration:underline}
.public .foot-line{margin:0; color:#b8cbe6; max-width:40ch}
.public .foot-meta p{margin:0 0 .35rem; font-size:.95rem}
.public .foot-meta b{color:#fff}

/* 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,247,242,.94); backdrop-filter:saturate(1.2) blur(8px);
  border-top:1px solid var(--rule);
  transition:transform .25s ease;
}
/* parked while the hero's own button is on screen (public/site.js) */
.public .callbar.is-parked{transform:translateY(120%)}

@media (min-width:640px){
  .public{padding-bottom:0}
  .public .callbar{display:none}
  .public .wrap{padding:0 1.5rem}
  .public .hero{padding:3.5rem 0 3rem}
  .public .hero-grid{grid-template-columns:1.2fr 1fr; gap:3rem}
  .public h1{max-width:none}
  .public .hero-art{max-width:none}
  .public .why-grid{grid-template-columns:repeat(3,1fr)}
  .public .meet-card{grid-template-columns:200px 1fr; gap:2rem; padding:1.75rem}
  .public .meet-mark{width:200px; height:200px; border-radius:18px}
  .public .meet-mark svg{width:110px; height:110px}
  .public .section{padding:3.25rem 0}
  .public .tiles{grid-template-columns:repeat(3,1fr)}
  .public .tiles-2{grid-template-columns:repeat(2,1fr)}
  .public .fees{grid-template-columns:1fr 1fr}
  .public .fee-wide{grid-column:1 / -1}
  .public .two-col{grid-template-columns:1fr 1fr; gap:3rem}
  .public .foot-grid{grid-template-columns:1.2fr 1fr; align-items:start}
}
@media (min-width:1100px){ .public .why-grid{grid-template-columns:repeat(5,1fr)} }
@media (max-width:639px){
  /* the header's own call button is redundant with the fixed bar on a
     phone; keep the header calm and let the bar be the one control */
  .public .top nav{display:none}
}