@font-face{
  font-family:"Montserrat";
  src:url("fonts/montserrat-latin-wght-normal.woff2") format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap;
}

/* Tokens. One accent (Posh blue) in two tones: --blue for figures and focus, --blue-ink
   for anything that has to pass AA as text or carry white text. Shape rule: panels are
   --r-panel, every control (input, button, choice, photo tile) is --r-control. */
:root{
  --bg:#f5f8fc; --surface:#fdfeff; --field:#ffffff;
  --ink:#0b1f3a; --body:#2f3f58; --muted:#5a6980;
  --line:#d9e2ee; --field-line:#7f93ad;
  --blue:#0084ff; --blue-ink:#0068d6; --blue-wash:#e8f3ff;
  --btn:#0068d6; --btn-hover:#0059b8; --btn-ink:#ffffff;
  --feature:#0b1f3a; --on-feature:#f3f8ff;
  --warn-wash:#fff6e5; --warn-line:#efd6a0; --warn-ink:#6f4300;
  --err:#b8231c; --ok-fill:#14773a;
  --r-panel:16px; --r-control:10px;
  --shadow:0 1px 2px rgba(11,31,58,.05), 0 10px 28px rgba(11,31,58,.07);
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#08121f; --surface:#0f1c2e; --field:#0b1727;
    --ink:#eef4fb; --body:#c7d3e2; --muted:#93a4ba;
    --line:#203249; --field-line:#567094;
    --blue:#3d9eff; --blue-ink:#74b7ff; --blue-wash:#112942;
    --feature:#0068d6; --on-feature:#ffffff;   /* navy would vanish on a dark page */
    --warn-wash:#2a2110; --warn-line:#5a4518; --warn-ink:#f3cf88;
    --err:#ff8f88;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 28px rgba(0,0,0,.28);
  }
}

*{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--body);
  font-family:"Montserrat",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}
h1,h2,h3,p,dl,dd,ul,figure,fieldset{margin:0;padding:0}
fieldset{border:0;min-width:0}
legend{padding:0}
a[href^="tel:"]{white-space:nowrap}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--blue-ink)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.muted{color:var(--muted)}
.i{width:1.25em;height:1.25em;fill:currentColor;flex:none}

/* ---- Frame ---- */
.wrap{max-width:1040px;margin:0 auto;padding:0 20px}
.wrap.narrow{max-width:720px}
.bar{max-width:1040px;margin:0 auto;padding:16px 20px;display:flex;align-items:center;gap:10px}
.bar-mark{border-radius:var(--r-control);display:block}
.bar-name{font-weight:800;color:var(--ink);letter-spacing:-.01em}
.bar-what{margin-left:auto;color:var(--muted);font-size:15px;font-weight:600}
.foot{padding:48px 20px 36px;text-align:center;color:var(--muted);font-size:14px}

@media (prefers-reduced-motion: no-preference){
  .view:not([hidden]){animation:rise .22s ease-out}
  @keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
}

/* ---- Type ---- */
.page-h{font-size:clamp(28px,4.6vw,38px);line-height:1.1;font-weight:800;letter-spacing:-.025em;color:var(--ink)}
.lede{margin-top:10px;font-size:18px;max-width:52ch}
h2{font-size:clamp(23px,3.2vw,30px);line-height:1.15;font-weight:800;letter-spacing:-.02em;color:var(--ink)}

/* ---- Setup form ---- */
.block{margin-top:36px;padding-top:28px;border-top:1px solid var(--line)}
.block h2{font-size:21px;margin-bottom:6px}
.grid{display:grid;gap:0 16px}
@media (min-width:600px){
  .grid.two{grid-template-columns:1fr 1fr}
  .grid.three{grid-template-columns:1fr 1fr 1fr}
}
.field{margin-top:16px}
.field > label,.label{display:block;font-size:15px;font-weight:700;color:var(--ink);margin-bottom:6px}
.hint{font-weight:500;color:var(--muted)}
input[type=text],input[type=tel],input[type=email],input[type=search],input[type=date],input[type=datetime-local],select,textarea{
  width:100%;min-height:50px;padding:12px 14px;font-size:16px;
  background:var(--field);color:var(--ink);
  border:1px solid var(--field-line);border-radius:var(--r-control);
}
textarea{min-height:92px;resize:vertical;line-height:1.5}
::placeholder{color:var(--muted);opacity:1}
input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible,a:focus-visible,
.choice input:focus-visible + span{outline:3px solid color-mix(in srgb,var(--blue) 45%,transparent);outline-offset:2px}
.err{color:var(--err);font-size:14px;font-weight:600;margin-top:6px}
.err:empty{display:none}
.invalid input,.invalid select,.invalid textarea{border-color:var(--err)}
.form-error{color:var(--err);font-weight:700;margin:20px 0 0}

/* ---- Buttons ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:52px;padding:0 22px;border-radius:var(--r-control);
  font-size:16px;font-weight:700;white-space:nowrap;cursor:pointer;
  border:1px solid transparent;transition:background-color .15s ease,transform .1s ease;
}
.btn:active{transform:scale(.98)}
.btn.primary{background:var(--btn);color:var(--btn-ink)}
.btn.primary:hover{background:var(--btn-hover)}
.btn.primary:disabled{background:var(--line);color:var(--muted);cursor:not-allowed;transform:none}
.btn.quiet{background:transparent;border-color:var(--field-line);color:var(--ink)}
.btn.wide{width:100%;margin-top:24px}
.link{background:none;border:0;padding:4px 2px;color:var(--blue-ink);font-weight:700;font-size:15px;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.spin{width:16px;height:16px;border:3px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---- Booking picker ---- */
.search{display:flex;gap:10px;margin:14px 0 12px}
.search input{flex:1;min-width:0}
.booking{
  width:100%;display:flex;justify-content:space-between;align-items:center;gap:12px;text-align:left;
  padding:14px 16px;margin-bottom:8px;cursor:pointer;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-control);
}
.booking:hover{border-color:var(--blue-ink)}
.booking-main{display:grid;gap:2px;min-width:0}
.booking .who{font-weight:700;color:var(--ink)}
.booking .meta{font-size:14px;color:var(--muted)}
.booking .time{font-size:14px;font-weight:700;color:var(--blue-ink);white-space:nowrap}
.tag{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:var(--r-control);background:var(--blue-wash);color:var(--blue-ink);font-size:12px;font-weight:700;vertical-align:1px}
.quiet-line{color:var(--muted);font-size:15px}
.picked{margin-top:10px;font-size:15px;color:var(--ink);font-weight:600}

/* ---- Car choice ---- */
.choices{display:grid;gap:10px}
@media (min-width:600px){.choices{grid-template-columns:1fr 1fr}}
.choice{display:block;cursor:pointer}
.choice input{position:absolute;opacity:0;width:1px;height:1px}
.choice span{
  display:flex;align-items:center;gap:10px;min-height:56px;padding:12px 16px;
  background:var(--field);border:1.5px solid var(--field-line);border-radius:var(--r-control);
  font-weight:700;color:var(--ink);
}
.choice .i{width:24px;height:24px;color:var(--muted)}
.choice input:checked + span{border-color:var(--blue-ink);background:var(--blue-wash)}
.choice input:checked + span .i{color:var(--blue-ink)}

/* ---- Photo tiles ---- */
.shots{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.shot{border-radius:var(--r-control);overflow:hidden;background:var(--field)}
.shot.add{
  aspect-ratio:4/3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  border:1.5px dashed var(--field-line);color:var(--blue-ink);font-weight:700;font-size:15px;cursor:pointer;
}
.shot.add .i{width:28px;height:28px}
.shot.add small{font-weight:500;color:var(--muted);font-size:13px}
.shot.has{border:1px solid var(--line)}
.shot.has img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.shot-cap{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:6px 10px;font-size:14px;font-weight:700;color:var(--ink)}
.invalid .shot.add:first-child{border-color:var(--err)}

/* ======================= The customer's page ======================= */
.hero{padding:20px 0 0}
.hero-grid{display:grid;gap:28px}
.hero h1{font-size:clamp(34px,5.6vw,54px);line-height:1.04;font-weight:800;letter-spacing:-.03em;color:var(--ink);text-wrap:balance}
.hero-sub{margin-top:16px;font-size:19px;max-width:44ch}
.glance{display:flex;flex-wrap:wrap;gap:16px 36px;margin-top:28px}
.glance dt{font-size:14px;color:var(--muted);font-weight:600}
.glance dd{font-size:18px;font-weight:700;color:var(--ink)}
.hero-media img{display:block;width:100%;height:auto;border-radius:var(--r-panel)}
@media (min-width:860px){
  .hero{padding-top:36px}
  .hero-grid.has-media{grid-template-columns:1.05fr .95fr;gap:44px;align-items:center}
}

.costs,.details,.terms,.sign{padding-top:64px}
.cost-grid{display:grid;gap:16px;margin-top:22px}
@media (min-width:720px){.cost-grid{grid-template-columns:.8fr 1.2fr}}
.cost{padding:26px 26px 28px;border-radius:var(--r-panel)}
.cost.free{background:var(--blue-wash);color:var(--ink)}
.cost.excess{background:var(--feature);color:var(--on-feature)}
.fig{font-size:clamp(52px,9vw,88px);line-height:1;font-weight:800;letter-spacing:-.04em}
.cost.free .fig{color:var(--blue-ink)}
.cost-what{margin-top:12px;font-size:17px;max-width:36ch}

.sub-h{margin-top:40px;font-size:18px;font-weight:800;color:var(--ink)}
.yours{list-style:none;display:grid;gap:22px 40px;margin-top:18px}
@media (min-width:720px){.yours{grid-template-columns:1fr 1fr}}
.yours li{display:grid;grid-template-columns:28px 1fr;gap:14px;align-items:start}
.yours .i{width:28px;height:28px;color:var(--blue-ink);margin-top:2px}
.yours strong{display:block;color:var(--ink)}
.yours span{display:block}

.note{
  display:grid;grid-template-columns:24px 1fr;gap:12px;align-items:start;
  margin-top:28px;padding:16px 18px;border-radius:var(--r-panel);
  background:var(--surface);border:1px solid var(--line);
}
.note + .note{margin-top:12px}
.note .i{width:24px;height:24px;margin-top:2px;color:var(--blue-ink)}
.note strong{color:var(--ink)}
.note.warn{background:var(--warn-wash);border-color:var(--warn-line);color:var(--warn-ink)}
.note.warn .i,.note.warn strong{color:var(--warn-ink)}

.detail-grid{display:grid;gap:30px 48px;margin:22px 0 24px}
@media (min-width:720px){.detail-grid{grid-template-columns:1fr 1fr}}
.detail-group h3{font-size:16px;font-weight:800;color:var(--blue-ink);margin-bottom:8px}
.detail-group dl > div{display:grid;grid-template-columns:128px 1fr;gap:12px;padding:3px 0}
.detail-group dt{color:var(--muted);font-size:15px}
.detail-group dd{color:var(--ink);font-weight:600;font-size:16px;overflow-wrap:anywhere}

.terms-body{max-width:72ch;margin-top:18px}
.terms-body h3{font-size:18px;font-weight:800;color:var(--ink);margin:32px 0 10px}
.terms-body .intro{margin-bottom:8px}
.cl{display:grid;grid-template-columns:2.8em 1fr;gap:0 8px;margin-bottom:10px}
.cl.sub{grid-template-columns:2.2em 1fr;margin-left:calc(2.8em + 8px)}
.cn{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}

.sign-card{
  max-width:720px;padding:28px 22px 30px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-panel);box-shadow:var(--shadow);
}
@media (min-width:600px){.sign-card{padding:34px}}
.ack{
  display:grid;grid-template-columns:26px 1fr;gap:14px;align-items:start;
  margin-top:14px;padding:16px;cursor:pointer;color:var(--ink);font-weight:600;line-height:1.45;
  border:1.5px solid var(--field-line);border-radius:var(--r-control);
}
.ack input{width:24px;height:24px;margin:1px 0 0;accent-color:var(--btn)}
.ack:has(input:checked){border-color:var(--blue-ink);background:var(--blue-wash)}
/* The pad is paper: white with navy ink in both themes, because that is how it prints. */
.pad-wrap{position:relative}
#pad{display:block;width:100%;height:200px;background:#fff;border:1.5px dashed var(--field-line);border-radius:var(--r-control);touch-action:none}
.pad-hint{position:absolute;left:16px;bottom:14px;color:#5a6980;font-size:15px;pointer-events:none}
.pad-tools{display:flex;justify-content:space-between;align-items:center;margin-top:6px;font-size:15px}
.still{margin-top:12px;min-height:1.6em;font-size:15px;color:var(--muted)}

/* ---- Done ---- */
.done{padding-top:36px;text-align:center}
.done .lede{margin-left:auto;margin-right:auto}
.tick{width:72px;height:72px;margin:0 auto 20px;border-radius:50%;background:var(--ok-fill);color:#fff;display:grid;place-items:center}
.tick .i{width:38px;height:38px}
.done .btn{margin-top:26px}
.saved{margin:22px auto 0;font-size:15px;max-width:56ch}
.done .btn.quiet{margin-top:18px}