/* ============================================================================
   ValleyGO — mobile digital billboard trucks
   Brand: #0E185E navy · #A6D608 green · white
   ========================================================================== */

:root {
  /* Brand */
  --navy:        #0E185E;
  --navy-deep:   #080F3C;
  --navy-soft:   #1B2775;
  --header:      #0B0B0E;   /* header bar — black, not navy */
  --header-deep: #050506;   /* the mobile panel that drops out of it */

  /* Text on the black header/footer. Neutral rather than the pale blue that
     suited navy, and light enough to clear AA — --ink-mute was being used here
     and measured 3.7:1, which is why the footer notes looked washed out. */
  --on-dark-dim:  #B4B6BC;
  --on-dark-mute: #8E9098;
  --green:       #A6D608;
  --green-dark:  #8DB806;
  --green-ink:   #4C6605;   /* readable green — links on light backgrounds only */
  --green-glow:  rgba(166, 214, 8, .28);

  /* Neutrals — warm/neutral on purpose. Navy is for the header, footer and
     headings only; no content section should read as another blue block. */
  --white:       #ffffff;
  --paper:       #F6F7F3;
  --paper-2:     #ECEEE5;
  --wash:        #F8F6F0;   /* warm band — page heroes */
  --wash-green:  #E9F3C6;   /* brand-green band — calls to action */
  --wash-edge:   rgba(14, 24, 94, .10);
  --ink:         #0C1024;
  --ink-soft:    #45507A;
  --ink-mute:    #606A92;   /* darkened from #6C769C, which missed AA on white */
  --line:        rgba(14, 24, 94, .12);
  --line-strong: rgba(14, 24, 94, .22);

  /* On-navy text */
  --on-navy:     #ffffff;
  --on-navy-dim: #B9C2E8;

  --radius:      14px;
  --radius-lg:   22px;
  --shadow:      0 4px 20px rgba(12, 16, 36, .08);
  --shadow-lg:   0 20px 60px rgba(8, 15, 60, .18);
  --wrap:        1180px;

  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

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

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

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

img, svg { max-width: 100%; display: block; }
a { color: var(--navy); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 {
  margin: 0 0 .5em;
  line-height: 1.12;
  letter-spacing: -.02em;
  font-weight: 800;
  color: var(--ink);
}
h1 { font-size: clamp(2rem, 5.2vw, 3.6rem); overflow-wrap: break-word; }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
h3 { font-size: clamp(1.1rem, 1.7vw, 1.3rem); }
p { margin: 0 0 1.1em; overflow-wrap: break-word; }
p:last-child { margin-bottom: 0; }

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

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--green); color: var(--navy);
  padding: 12px 20px; font-weight: 800; border-radius: 0 0 10px 0;
}
.skip-link:focus { left: 0; }

/* ── Layout helpers ───────────────────────────────────────────────────────── */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 780px; }
.center { text-align: center; }
/* Both forms: .center on a parent, and .center on the row itself. Only the
   descendant form existed, so every <div class="btn-row center"> stayed
   left-aligned. */
.center .btn-row,
.btn-row.center { justify-content: center; }

.section { padding: 84px 0; }
.section-tall { padding: 120px 0; }
.section-tight { padding: 56px 0; }
.section-paper { background: var(--paper); }
/* Light band used at the top of inner pages. Headings stay navy — that is the
   only place brand blue appears outside the header and footer. */
.section-wash { background: var(--wash); color: var(--ink); }
.section-wash h1, .section-wash h2, .section-wash h3 { color: var(--navy); }
.section-wash p { color: var(--ink-soft); }

.eyebrow {
  font-size: .76rem; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--navy); margin: 0 0 14px;
}
.section-wash .eyebrow { color: var(--navy); }
/* The hero eyebrow sits on the photograph, where navy all but disappears.
   Brand neon is the readable choice on that dark ground (11:1) — the same
   colour that would be unreadable on the light bands above. */
.hero .eyebrow { color: var(--green); }

.lead { font-size: 1.15rem; color: var(--ink-soft); }
.section-wash .lead { color: var(--ink-soft); }

.section-head { max-width: 760px; margin-bottom: 52px; }
.section-head.center { margin-left: auto; margin-right: auto; }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: inherit; font-size: 1rem; font-weight: 800;
  padding: 15px 30px; border-radius: 10px; border: 2px solid transparent;
  cursor: pointer; text-align: center; text-decoration: none;
  transition: transform .14s ease, background-color .18s ease, box-shadow .18s ease, color .18s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-sm { padding: 11px 20px; font-size: .92rem; }

.btn-green { background: var(--green); color: var(--navy); box-shadow: 0 6px 20px var(--green-glow); }
.btn-green:hover { background: #B6E81A; box-shadow: 0 10px 28px var(--green-glow); }

.btn-navy { background: var(--navy); color: var(--white); }
.btn-navy:hover { background: var(--navy-soft); }

.btn-ghost { background: transparent; color: var(--navy); border-color: var(--line-strong); }
.btn-ghost:hover { border-color: var(--navy); background: rgba(14, 24, 94, .04); }
/* Any dark-background context needs the light ghost treatment, or the button
   renders navy-on-navy and effectively disappears. */
.hero .btn-ghost { color: var(--white); border-color: rgba(255, 255, 255, .42); }
.hero .btn-ghost:hover { border-color: var(--green); background: rgba(166, 214, 8, .14); color: var(--green); }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.btn-block { width: 100%; }

/* ── Header ───────────────────────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--header);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.header-inner { display: flex; align-items: center; gap: 20px; min-height: 76px; flex-wrap: nowrap; }

/* Logo is an image crop of the brand lockup. Height is fixed and width is
   auto so the aspect ratio holds; the header variant is sized to sit inside the
   nav bar without crowding it. */
.logo { display: inline-flex; align-items: center; flex-shrink: 0; min-width: 0; }
.logo:hover { text-decoration: none; opacity: .88; }
.logo img { height: 46px; width: auto; display: block; }
.logo-footer img { height: 72px; }
/* The tagline used to be part of the footer artwork; the cleaned-up wordmark
   does not include it, so it is set as type instead. */
/* Scoped to beat `.footer-brand p`, which is more specific than a bare class
   and was silently winning the font-size — the tagline rendered at 15.2px
   instead of the intended 10.6px, which is why it wrapped to two lines. */
.footer-brand .footer-tagline {
  margin: 8px 0 0; font-size: .76rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; color: var(--green);
  line-height: 1.5;
}


.nav-desktop { display: flex; gap: 4px; margin-left: auto; }
.nav-desktop a {
  color: var(--on-navy-dim); font-weight: 700; font-size: .95rem; white-space: nowrap;
  padding: 9px 11px; border-radius: 8px; transition: color .15s, background-color .15s;
}
.nav-desktop a:hover { color: var(--white); background: rgba(255, 255, 255, .07); text-decoration: none; }
.nav-desktop a[aria-current="page"] { color: var(--green); }

.header-actions { display: flex; align-items: center; gap: 12px; margin-left: auto; flex-shrink: 0; }
/* Only collapse the gap while the desktop nav is on screen. A plain
   `.nav-desktop + .header-actions` rule also matches when the nav is
   display:none, which parked the menu button next to the logo on phones. */
@media (min-width: 1001px) { .nav-desktop + .header-actions { margin-left: 0; } }


.nav-toggle {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; padding: 0 9px;
  background: rgba(255, 255, 255, .08); border: none; border-radius: 9px; cursor: pointer;
}
.nav-toggle span { display: block; height: 2.5px; background: var(--white); border-radius: 2px; transition: transform .2s, opacity .2s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

.nav-mobile {
  display: none; flex-direction: column; gap: 4px;
  padding: 14px 24px 26px; border-top: 1px solid rgba(255, 255, 255, .1);
  background: var(--header-deep);
}
.nav-mobile[hidden] { display: none; }
.nav-mobile.open { display: flex; }
.nav-mobile a {
  color: var(--white); font-weight: 700; padding: 13px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.nav-mobile a[aria-current="page"] { color: var(--green); }
.nav-mobile .btn { margin-top: 16px; border-bottom: none; }

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  background: #0A0D16;            /* shows while the photo loads */
  color: var(--white);
  padding: 104px 0 112px;
}

/* The photograph. A background rather than an <img> so the focal point can be
   shifted per breakpoint — on narrow screens the truck needs to stay in frame. */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background-image: image-set(
    url("/assets/hero-truck-v2-1600.webp") type("image/webp"),
    url("/assets/hero-truck-v2-1600.jpg")  type("image/jpeg"));
  background-image: url("/assets/hero-truck-v2-1600.jpg");   /* older browsers */
  background-image: -webkit-image-set(
    url("/assets/hero-truck-v2-1600.webp") type("image/webp"),
    url("/assets/hero-truck-v2-1600.jpg")  type("image/jpeg"));
  background-size: cover;
  background-position: 62% center;
}

/* Scrim. Without this the headline sits on a lit shopfront and vanishes —
   strongest on the left where the text is, clearing toward the truck. */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(96deg,
      rgba(8, 10, 20, .94) 0%,
      rgba(8, 10, 20, .88) 34%,
      rgba(8, 10, 20, .55) 62%,
      rgba(8, 10, 20, .30) 100%),
    linear-gradient(180deg, rgba(8, 10, 20, .45) 0%, transparent 28%);
  pointer-events: none;
}

.hero-inner { position: relative; z-index: 1; }
.hero-copy { max-width: 46rem; }

@media (max-width: 900px) {
  .hero { padding: 84px 0 88px; }
  .hero::before {
    background-image: image-set(
      url("/assets/hero-truck-v2-900.webp") type("image/webp"),
      url("/assets/hero-truck-v2-900.jpg")  type("image/jpeg"));
    background-image: url("/assets/hero-truck-v2-900.jpg");
    background-image: -webkit-image-set(
      url("/assets/hero-truck-v2-900.webp") type("image/webp"),
      url("/assets/hero-truck-v2-900.jpg")  type("image/jpeg"));
    background-position: 68% center;
  }
  /* The scrim has to cover the whole width once the text spans it. */
  .hero::after {
    background:
      linear-gradient(180deg, rgba(8, 10, 20, .88) 0%, rgba(8, 10, 20, .82) 55%, rgba(8, 10, 20, .74) 100%);
  }
}
.hero h1 { color: var(--white); margin-bottom: 20px; }
.hero h1 em { font-style: normal; color: var(--green); }
.hero-lead { font-size: 1.22rem; color: var(--on-navy-dim); max-width: 55ch; }


/* Truck illustration */
.truck-screen-copy { font-weight: 900; letter-spacing: -.02em; }

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

.card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 30px 26px;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.card h3 { margin-bottom: 10px; }
.card p { color: var(--ink-soft); font-size: .98rem; margin: 0; }
.card-hover:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--line-strong); }

.card-icon {
  width: 52px; height: 52px; border-radius: 13px;
  background: var(--navy); color: var(--green);
  display: flex; align-items: center; justify-content: center; margin-bottom: 18px;
}
.card-num {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--green); color: var(--navy);
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 1.1rem; margin-bottom: 18px;
}

.section-wash .card {
  background: var(--white); border: 1px solid var(--wash-edge); box-shadow: var(--shadow);
}
.section-wash .card p { color: var(--ink-soft); }
.section-wash .card-icon { background: var(--green); color: var(--navy); }

/* Split feature rows */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.split-art {
  border-radius: var(--radius-lg); overflow: hidden;
  background: linear-gradient(150deg, var(--navy), var(--navy-deep));
  aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center;
  padding: 30px; border: 1px solid var(--line);
}
.checks { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 13px; }
.checks li { display: flex; align-items: flex-start; gap: 12px; font-weight: 600; color: var(--ink-soft); }
.checks svg { flex-shrink: 0; margin-top: 4px; color: var(--green); }
.section-wash .checks li { color: var(--ink-soft); }
.section-wash .checks svg { color: var(--green); }

/* ── Gallery ──────────────────────────────────────────────────────────────── */
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.shot {
  position: relative; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line); background: var(--paper-2);
  aspect-ratio: 4 / 3; display: flex; flex-direction: column;
  justify-content: flex-end; padding: 20px; color: var(--white);
  transition: transform .16s ease, box-shadow .16s ease;
}
.shot:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.shot::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(160deg, var(--navy-soft), var(--navy-deep) 74%);
}
.shot::after {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 12px);
}
.shot > * { position: relative; z-index: 1; }
.shot-tag {
  align-self: flex-start; font-size: .68rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
  background: var(--green); color: var(--navy);
  padding: 5px 10px; border-radius: 5px; margin-bottom: auto;
}
.shot h3 { color: var(--white); font-size: 1.08rem; margin: 0 0 4px; }
.shot p { color: var(--on-navy-dim); font-size: .87rem; margin: 0; }
.shot-ph {
  position: absolute; inset: 0; z-index: 1; display: flex;
  align-items: center; justify-content: center;
  color: rgba(255, 255, 255, .17); font-size: .72rem; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
}

/* ── FAQ ──────────────────────────────────────────────────────────────────── */
.faq-list { display: grid; gap: 12px; }
.faq-item { border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); overflow: hidden; }
.faq-item[open] { border-color: var(--line-strong); box-shadow: var(--shadow); }
.faq-item summary {
  cursor: pointer; padding: 22px 56px 22px 24px; font-weight: 800;
  font-size: 1.04rem; position: relative; list-style: none; color: var(--ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: ""; position: absolute; right: 24px; top: 50%;
  width: 11px; height: 11px; margin-top: -6px;
  border-right: 2.5px solid var(--green-dark); border-bottom: 2.5px solid var(--green-dark);
  transform: rotate(45deg); transition: transform .2s ease;
}
.faq-item[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq-item .faq-body { padding: 0 24px 24px; color: var(--ink-soft); }
.faq-item .faq-body p:last-child { margin-bottom: 0; }

/* ── Forms ────────────────────────────────────────────────────────────────── */
.form-shell { display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: start; }
/* Grid items default to min-width:auto, so a column refuses to shrink below the
   widest thing in it. A <select> sizes to its longest <option>, so adding
   "Fri, Nov 13 & Sat, Nov 14 — 9 spots left" to the date list was enough to
   push the whole form past the viewport on a narrow phone. */
.form-shell > * { min-width: 0; }

.quote-form {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 34px; box-shadow: var(--shadow);
}
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field-wide { grid-column: 1 / -1; }

.field label { font-size: .86rem; font-weight: 800; color: var(--ink); }
.field .opt { color: var(--ink-mute); font-weight: 600; }
/* Same reason: the control may be narrower than its content and clip, rather
   than widening the form around it. */
.field input, .field select, .field textarea { min-width: 0; max-width: 100%; }
.field input, .field select, .field textarea {
  font-family: inherit; font-size: 1rem; color: var(--ink);
  background: var(--white); border: 1.5px solid var(--line-strong);
  border-radius: 10px; padding: 13px 14px; width: 100%;
  transition: border-color .15s, box-shadow .15s;
}
.field textarea { resize: vertical; min-height: 118px; }
.field select { appearance: none; cursor: pointer; padding-right: 40px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236C769C' stroke-width='2.6' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 14px center; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(14, 24, 94, .1);
}
.field input:invalid:not(:placeholder-shown) { border-color: #D4585B; }
.field-error { color: #C4464A; font-size: .82rem; font-weight: 700; min-height: 1em; }

/* Honeypot — hidden from people, visible to naive bots. Not display:none, which
   some bots specifically skip. */
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.form-foot { margin-top: 26px; display: flex; flex-direction: column; gap: 14px; }
.form-note { font-size: .84rem; color: var(--ink-mute); margin: 0; }

.form-status { border-radius: 10px; padding: 15px 18px; font-weight: 700; font-size: .94rem; display: none; }
.form-status.show { display: block; }
.form-status.ok { background: rgba(166, 214, 8, .14); border: 1px solid var(--green); color: #4A6100; }
.form-status.err { background: rgba(212, 88, 91, .09); border: 1px solid #D4585B; color: #A13337; }

/* Sidebar beside the form */
.form-aside { display: grid; gap: 18px; position: sticky; top: 100px; }
.aside-card {
  background: var(--paper); color: var(--ink); border: 1px solid var(--wash-edge);
  border-radius: var(--radius); padding: 28px 26px;
}
.aside-card h3 { color: var(--navy); font-size: 1.1rem; }
.aside-card p, .aside-card li { color: var(--ink-soft); font-size: .95rem; }
.aside-card ul { margin: 0; padding-left: 20px; display: grid; gap: 9px; }
.aside-big { display: block; font-size: 1.5rem; font-weight: 900; color: var(--navy); letter-spacing: -.02em; }
/* A sentence about price, sitting in the field grid beside the spot count. It
   deliberately carries none of the chrome of the inputs around it — it is not
   something you can change, so it must not look like something you can. */
.price-line {
  margin: 0;
  font-size: 1.02rem; font-weight: 800; color: var(--navy);
}

/* "Any Available Date" is the one option in the list that is not a date, so it
   is picked out in brand neon. The neon is the background rather than the text:
   neon on white measures 1.7:1 and would be the least readable line in the
   dropdown, where navy on neon is 9.3:1. Native <select> rendering ignores
   this on some platforms (macOS Safari), which is why the option also names
   itself rather than relying on colour to carry the meaning. */
.opt-any {
  background-color: var(--green);
  color: var(--navy);
  font-weight: 800;
}
.price-line + .form-note { margin-top: 4px; }
.aside-big:hover { color: var(--green-ink); text-decoration: none; }

/* ── CTA band ─────────────────────────────────────────────────────────────── */
.cta-band {
  background: var(--wash-green);
  border-top: 1px solid rgba(14, 24, 94, .08);
  border-bottom: 1px solid rgba(14, 24, 94, .08);
  color: var(--ink); padding: 74px 0; text-align: center; position: relative; overflow: hidden;
}
.cta-band::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(620px 300px at 50% 0%, rgba(166, 214, 8, .2), transparent 70%);
}
.cta-band > .wrap { position: relative; z-index: 1; }
.cta-band h2 { color: var(--navy); }
.cta-band p { color: var(--ink-soft); max-width: 60ch; margin-inline: auto; }

/* ── Footer ───────────────────────────────────────────────────────────────── */
.site-footer { background: var(--header); color: var(--on-dark-dim); padding: 66px 0 0; }
.footer-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 44px; }
.footer-brand p { font-size: .95rem; margin: 18px 0 24px; max-width: 42ch; }
.footer-brand .logo { margin-bottom: 4px; }
.footer-col h3 { color: var(--white); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 18px; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.footer-col a { color: var(--on-dark-dim); font-size: .95rem; }
.footer-col a:hover { color: var(--green); text-decoration: none; }

/* Socials. The icon sits on the text baseline rather than floating above it,
   and takes the link's colour so it turns neon on hover with the label. */
.footer-social a { display: inline-flex; align-items: center; gap: 10px; }
.footer-social .social-icon { flex-shrink: 0; color: inherit; }
.footer-social a:hover .social-icon { color: var(--green); }
/* On touch widths these are a row of thumb targets, not a list of text links,
   so each one gets enough height to hit. Desktop keeps the tighter rhythm of
   the columns beside it. */
@media (max-width: 820px) {
  .footer-social { gap: 2px; }
  .footer-social a { padding: 9px 0; }
}
.footer-note { font-size: .88rem; color: var(--on-dark-mute); }

.footer-base {
  margin-top: 56px; padding: 22px 24px; border-top: 1px solid rgba(255, 255, 255, .09);
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center;
}
.footer-base p { margin: 0; font-size: .85rem; }

/* ── Misc ─────────────────────────────────────────────────────────────────── */
.pill-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.pill {
  background: var(--white); border: 1px solid var(--line-strong);
  border-radius: 100px; padding: 9px 18px; font-size: .9rem; font-weight: 700; color: var(--navy);
}
.section-wash .pill { background: var(--white); border-color: var(--wash-edge); color: var(--navy); }

.note-band {
  background: rgba(166, 214, 8, .1); border: 1px dashed var(--green-dark);
  border-radius: var(--radius); padding: 18px 22px; color: #4A6100;
  font-size: .92rem; font-weight: 600;
}
.note-band strong { color: #3A4C00; }

/* ── Pricing & event cards ────────────────────────────────────────────────── */
.price-line { margin: 0 0 2px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.price-line b {
  font-size: 2.1rem; font-weight: 900; letter-spacing: -.035em; line-height: 1;
  color: var(--green);
}
.price-line span { font-size: .92rem; color: var(--ink-mute); font-weight: 700; }
.price-pilot { margin: 0; font-size: .86rem; font-weight: 700; color: var(--ink-soft); }

/* On navy the green reads better than the darker variant. */
.section-wash .price-line b { color: var(--green); }

/* ── Profile page layout ─────────────────────────────────── */
/* Wider than .narrow so the two booking cards sit side by side, narrower than
   the full wrap so the form inside does not run to silly line lengths. */
.narrow-wide { max-width: 940px; }

.profile-book-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.profile-book-card {
  background: var(--white); border: 1px solid var(--line);
  border-left: 4px solid var(--green);
  border-radius: var(--radius); padding: 22px 24px;
  display: flex; flex-direction: column;
}
.profile-book-card h3 { font-size: 1.08rem; margin: 0 0 8px; color: var(--navy); }
.profile-book-card p { font-size: .93rem; color: var(--ink-soft); margin: 0 0 18px; }
.profile-book-card .btn { margin-top: auto; }

/* Editing details is the rarest task here, so it is collapsed. */
.profile-edit {
  background: var(--paper); border: 1px solid var(--wash-edge);
  border-radius: var(--radius);
}
.profile-edit > summary {
  cursor: pointer; padding: 20px 24px; list-style: none;
  display: flex; flex-direction: column; gap: 3px;
  border-radius: var(--radius);
}
.profile-edit > summary::-webkit-details-marker { display: none; }
.profile-edit > summary::after {
  content: ''; position: absolute; right: 26px;
  width: 10px; height: 10px; margin-top: 6px;
  border-right: 2px solid var(--navy); border-bottom: 2px solid var(--navy);
  transform: rotate(45deg); transition: transform .18s ease;
}
.profile-edit > summary { position: relative; padding-right: 56px; }
.profile-edit[open] > summary::after { transform: rotate(-135deg); margin-top: 10px; }
.profile-edit > summary:hover { background: var(--paper-2); }
.profile-edit > summary:focus-visible { outline: 3px solid var(--green); outline-offset: -3px; }
.profile-edit-title { font-size: 1.08rem; font-weight: 800; color: var(--navy); }
.profile-edit-hint { font-size: .88rem; color: var(--ink-mute); }

/* The form keeps its own card styling; inside the panel it should not double up. */
.profile-edit .quote-form {
  background: none; border: none; box-shadow: none;
  padding: 0 24px 24px;
}

@media (max-width: 680px) {
  .profile-book-grid { grid-template-columns: 1fr; }
  .profile-edit > summary { padding: 18px 48px 18px 18px; }
  .profile-edit .quote-form { padding: 0 18px 18px; }
}

/* ── Advertiser campaigns ─────────────────────────────────────── */
/* Each section is separated from the one above it; the first in the column
   sits flush, whichever it happens to be. */
.campaigns, .profile-book, .profile-edit { margin-top: 38px; }
.profile-book:first-of-type { margin-top: 0; }
.campaigns-heading { font-size: 1.3rem; margin: 0 0 20px; color: var(--navy); }
.campaign-group { margin-bottom: 28px; }
.campaign-group-title {
  margin: 0 0 12px; font-size: .76rem; font-weight: 900; letter-spacing: .14em;
  text-transform: uppercase; color: var(--navy);
}
.campaign-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.campaign-card {
  background: var(--white); border: 1px solid var(--line);
  border-left: 4px solid var(--green); border-radius: var(--radius);
  padding: 18px 20px;
}
.campaign-card.is-done { border-left-color: var(--line-strong); }
.campaign-top {
  display: flex; flex-wrap: wrap; gap: 8px 16px;
  align-items: baseline; justify-content: space-between;
}
.campaign-date { margin: 0; font-weight: 800; color: var(--navy); font-size: 1.02rem; }
.campaign-ref {
  margin: 0; font-size: .76rem; font-weight: 800; letter-spacing: .08em;
  color: var(--ink-mute);
}
.campaign-meta { margin: 6px 0 0; font-size: .92rem; color: var(--ink-soft); }
.campaign-recap { margin: 10px 0 0; font-size: .92rem; }
.campaign-recap a { color: var(--green-ink); font-weight: 700; }
.campaign-pending { margin: 10px 0 0; font-size: .88rem; color: var(--ink-mute); }
/* A moved date is worth noticing without shouting — it is information, not a
   warning, and the campaign is still going ahead. */
.campaign-flag {
  display: inline-block; margin: 8px 0 0; padding: 3px 10px;
  border-radius: 100px; background: var(--wash); border: 1px solid var(--line-strong);
  /* .76rem, matching the reference beside it — .74 computed to 11.84px, under
     the 12px floor we hold small screens to. */
  font-size: .76rem; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--navy);
}

@media (max-width: 480px) {
  .campaign-card { padding: 16px; }
}

/* ── Book page photo ──────────────────────────────────────── */
.book-shot { margin: 30px 0 0; }
.book-shot img {
  display: block; width: 100%; height: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--wash-edge);
  box-shadow: var(--shadow);
}

@media (max-width: 680px) {
  .book-shot { margin-top: 24px; }
  .book-shot img { border-radius: var(--radius); }
}

/* ── Two-option booking panel ────────────────────────────────── */
.aside-option-label {
  margin: 0 0 4px; font-size: .76rem; font-weight: 900; letter-spacing: .12em;
  text-transform: uppercase; color: var(--navy);
}
.aside-card .aside-option-note { margin: 0 0 12px; font-size: .9rem; }
.aside-card .btn-ghost { border-color: var(--line-strong); color: var(--navy); }
.aside-card .btn-ghost:hover { border-color: var(--navy); background: rgba(14, 24, 94, .05); }

/* ── Sign-in troubleshooting ──────────────────────────────────── */
.login-help {
  margin: 32px auto 0; max-width: 36rem; text-align: left;
  background: var(--paper); border: 1px solid var(--wash-edge);
  border-radius: var(--radius); padding: 26px 28px;
}
.login-help-title {
  margin: 0 0 14px; font-size: .76rem; font-weight: 900; letter-spacing: .14em;
  text-transform: uppercase; color: var(--navy);
}
.login-help-list { margin: 0 0 22px; padding-left: 22px; display: grid; gap: 12px; }
.login-help-list li { color: var(--ink-soft); font-size: .95rem; line-height: 1.6; }
.login-help-list strong { color: var(--navy); }
.login-help .form-status { margin-bottom: 14px; }
.login-help .field { margin-bottom: 14px; }

@media (max-width: 480px) {
  .login-help { padding: 22px 18px; }
  .login-help .btn { width: 100%; }
}

/* ── Coverage map ───────────────────────────────────────────── */
.map-shell { display: grid; gap: 12px; }

/* The container is sized before Leaflet initialises, so the map does not
   reflow the page as it loads. */
.map {
  position: relative; aspect-ratio: 4 / 3; width: 100%;
  border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--line); background: var(--paper-2);
}

/* Shown until (or unless) the map takes over. */
.map-fallback {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px; padding: 28px; text-align: center;
}
.map-fallback-title {
  margin: 0; font-size: .76rem; font-weight: 900; letter-spacing: .14em;
  text-transform: uppercase; color: var(--navy);
}
.map-fallback-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.map-fallback-list li { color: var(--ink-soft); font-size: .95rem; }
.map-fallback-list strong { color: var(--navy); }

.map-note { margin: 0; font-size: .88rem; color: var(--ink-soft); }

/* Leaflet's own chrome, brought in line with the rest of the site. */
.map .leaflet-container { font-family: var(--sans); background: var(--paper-2); }
/* Pull the saturation out of the street tiles so the green pins read as the
   only strong colour on the map. */
.map .leaflet-tile-pane { filter: saturate(.55) contrast(.92) brightness(1.04); }
/* Leaflet ships 30px zoom buttons. That is under the 44px touch target the rest
   of this site holds to, so they are enlarged rather than left as the one place
   a thumb misses. */
.map .leaflet-control-zoom a {
  color: var(--navy); border-color: var(--line);
  font-weight: 800; background: var(--white);
  width: 44px; height: 44px; line-height: 44px; font-size: 20px;
}
.map .leaflet-control-zoom a:hover { background: var(--paper); color: var(--navy); }
/* Attribution is a licence requirement, so it has to be readable rather than
   hidden in 10px type. */
.map .leaflet-control-attribution,
.map .leaflet-control-attribution span,
.map .leaflet-control-attribution a {
  font-size: .75rem; color: var(--ink-mute);
}
.map .leaflet-control-attribution { background: rgba(255, 255, 255, .9); padding: 2px 8px; }
.map .leaflet-control-attribution a { color: var(--green-ink); }
.map .leaflet-popup-content { font-size: .92rem; line-height: 1.5; color: var(--ink); }
.map .leaflet-popup-content strong { color: var(--navy); }
.map .leaflet-popup-content a { color: var(--green-ink); font-weight: 700; }

@media (max-width: 900px) {
  .map { aspect-ratio: 3 / 2; }
}
@media (max-width: 480px) {
  .map { aspect-ratio: 1 / 1; }
}

/* ── Booking: order summary & receipt ─────────────────────────────────────── */
.order-summary {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px 22px; margin-top: 24px;
}
.order-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
}
.order-row span { font-size: .95rem; font-weight: 700; color: var(--ink-mute); }
.order-row strong {
  font-size: 1.6rem; font-weight: 900; letter-spacing: -.03em; line-height: 1.1;
  color: var(--navy);
}
.order-row-total {
  margin-top: 16px; padding-top: 16px;
  border-top: 1px solid var(--wash-edge);
}
.aside-card .order-row span { color: var(--ink-mute); }
.aside-card .order-row strong { color: var(--navy); }

/* Cart lines. The big display figure is reserved for the total — a list of
   line items all set at 1.6rem reads as several totals rather than one. */
#cartLines .order-row + .order-row { margin-top: 8px; }
#cartLines .order-row strong,
.order-row-sub strong,
.order-row-discount strong { font-size: 1.05rem; font-weight: 800; letter-spacing: 0; }
.order-row-sub, .order-row-discount { margin-top: 10px; }
.order-row-sub { padding-top: 12px; border-top: 1px solid var(--wash-edge); }
.order-row-discount span, .order-row-discount strong { color: var(--green-ink); }

/* Discount code entry. */
.discount-block { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--wash-edge); }
.discount-block > label {
  display: block; font-size: .88rem; font-weight: 800; color: var(--navy); margin-bottom: 7px;
}
.discount-block > label .form-note { font-weight: 600; }
.discount-row { display: flex; gap: 10px; align-items: stretch; }
.discount-row input {
  flex: 1 1 auto; min-width: 0;
  font-family: inherit; font-size: 1rem; padding: 12px 14px;
  border: 1px solid var(--line-strong); border-radius: 10px; background: var(--white);
  color: var(--ink); text-transform: uppercase;
}
.discount-row input::placeholder { text-transform: none; color: var(--ink-mute); }
.discount-row .btn { flex: 0 0 auto; }
.discount-msg { margin: 8px 0 0; font-size: .88rem; display: none; }
.discount-msg.show { display: block; }
.discount-msg.ok { color: var(--green-ink); font-weight: 700; }
.discount-msg.err { color: #8E1B22; font-weight: 700; }

@media (max-width: 480px) {
  .discount-row { flex-wrap: wrap; }
  .discount-row .btn { width: 100%; }
}

/* Receipt table on the confirmation page. */
.receipt { width: 100%; border-collapse: collapse; margin: 6px 0 0; }
.receipt th,
.receipt td {
  text-align: left; padding: 11px 0; vertical-align: top;
  border-bottom: 1px solid var(--wash-edge); font-size: .95rem;
}
.receipt tr:last-child th,
.receipt tr:last-child td { border-bottom: 0; }
.receipt th { color: var(--ink-mute); font-weight: 700; width: 45%; }
.receipt td { color: var(--navy); font-weight: 800; }

@media (max-width: 480px) {
  .order-row strong { font-size: 1.4rem; }
  .receipt th, .receipt td { font-size: .9rem; }
}
.section-wash .price-line span,
.section-wash .price-pilot { color: var(--ink-soft); }

.event-card { border-left: 4px solid var(--green); }
.event-date {
  margin: 0 0 6px; font-size: .78rem; font-weight: 900; letter-spacing: .1em;
  text-transform: uppercase; color: var(--navy);
}
.event-where {
  margin: -4px 0 12px; font-size: .92rem; font-weight: 700; color: var(--ink-mute);
}
.event-target { margin: 14px 0 0; font-size: .92rem; color: var(--ink-soft); }
.event-target-label {
  display: block; font-size: .72rem; font-weight: 900; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-mute); margin-bottom: 3px;
}

/* ── File uploads ─────────────────────────────────────────────────────────── */
.dropzone {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; text-align: center; cursor: pointer;
  padding: 26px 20px; border: 2px dashed var(--line-strong); border-radius: 12px;
  background: var(--paper); color: var(--ink-soft);
  transition: border-color .15s, background-color .15s, color .15s;
}
.dropzone:hover { border-color: var(--green-ink); background: rgba(166, 214, 8, .09); }
.dropzone.is-over { border-color: var(--green-ink); background: rgba(166, 214, 8, .16); color: var(--ink); }
.dropzone svg { color: var(--green); }
.dropzone-main { font-size: .96rem; }
.dropzone-main strong { color: var(--navy); }
.dropzone-hint { font-size: .82rem; color: var(--ink-mute); }

/* Visually hidden, but still focusable and still a real file input. */
.dropzone-input {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.dropzone-input:focus-visible + svg { outline: 3px solid var(--green); outline-offset: 4px; border-radius: 4px; }

.filelist { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.filelist-item {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--white);
}
.filelist-thumb {
  flex-shrink: 0; width: 42px; height: 42px; border-radius: 7px; overflow: hidden;
  background: var(--paper-2); display: flex; align-items: center; justify-content: center;
}
.filelist-thumb img { width: 100%; height: 100%; object-fit: cover; }
.filelist-thumb.is-doc { background: var(--navy); color: var(--green); font-size: .66rem; font-weight: 900; letter-spacing: .04em; }
.filelist-meta { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.filelist-name {
  font-size: .9rem; font-weight: 700; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.filelist-size { font-size: .78rem; color: var(--ink-mute); }
.filelist-remove {
  flex-shrink: 0; width: 30px; height: 30px; border: none; border-radius: 50%;
  background: var(--paper-2); color: var(--ink-soft);
  font-size: 19px; line-height: 1; cursor: pointer; font-family: inherit;
  transition: background-color .15s, color .15s;
}
.filelist-remove:hover { background: #E4C3C4; color: #A13337; }
.filelist-total { font-size: .82rem; color: var(--ink-mute); font-weight: 700; padding-top: 2px; }
.filelist-total.over { color: #C4464A; }

/* ── Advertiser profiles ──────────────────────────────────────────────────── */
.cat-fieldset { border: 1px solid var(--line-strong); border-radius: 12px; padding: 20px; margin: 0; }
.cat-fieldset legend { font-size: .86rem; font-weight: 800; color: var(--ink); padding: 0 8px; }
.cat-group-title {
  margin: 0 0 10px; font-size: .74rem; font-weight: 900; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-mute);
}
.cat-grid + .cat-group-title { margin-top: 22px; }
.cat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 18px; }

.cat-option {
  display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
  padding: 8px 6px; border-radius: 8px; font-size: .93rem; line-height: 1.4;
  transition: background-color .12s;
}
.cat-option:hover { background: rgba(14, 24, 94, .04); }
.cat-option input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--green-ink); flex-shrink: 0; cursor: pointer; }
.cat-option input:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }
.cat-label { color: var(--ink); font-weight: 600; }
.cat-note { color: var(--ink-mute); font-weight: 500; }

.profile-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.profile-head .lead { word-break: break-word; }

.signin-form { max-width: 460px; margin: 34px auto 0; text-align: left; }

@media (max-width: 680px) {
  .cat-grid { grid-template-columns: 1fr; }
  .cat-fieldset { padding: 16px 14px; }
  .profile-head { flex-direction: column; align-items: flex-start; gap: 16px; }
}

/* ── Category multi-select ────────────────────────────────────────────────── */
/* Once JS enhances it the fieldset loses its box, because the trigger button
   provides the visible control instead. */
.multiselect.is-enhanced { border: none; padding: 0; }
.multiselect.is-enhanced legend { padding: 0; margin-bottom: 8px; display: block; }

.ms-trigger {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; font-family: inherit; font-size: 1rem; text-align: left;
  color: var(--ink-mute); background: var(--white); cursor: pointer;
  border: 1.5px solid var(--line-strong); border-radius: 10px; padding: 13px 14px;
  transition: border-color .15s, box-shadow .15s;
}
.multiselect.has-selection .ms-trigger { color: var(--ink); font-weight: 600; }
.ms-trigger:hover { border-color: var(--navy); }
.ms-trigger:focus-visible { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(14, 24, 94, .1); }
.ms-caret { flex-shrink: 0; color: var(--ink-mute); transition: transform .18s ease; }
.multiselect.is-open .ms-caret { transform: rotate(180deg); }
.ms-trigger-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Panel. Absolute on desktop so it floats over the form like a real dropdown;
   static on narrow screens, where an overlay would be cramped. */
.multiselect { position: relative; }
.multiselect.is-enhanced .ms-panel {
  display: none; position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 6px);
  max-height: 340px; overflow-y: auto;
  background: var(--white); border: 1.5px solid var(--line-strong);
  border-radius: 12px; padding: 16px; box-shadow: var(--shadow-lg);
}
.multiselect.is-enhanced.is-open .ms-panel { display: block; }

/* Selected categories, shown under the trigger so they stay visible when closed. */
.ms-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 7px; }
.ms-chips:not(:empty) { margin-top: 10px; }
.ms-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(166, 214, 8, .16); border: 1px solid var(--green-dark);
  color: #3F5200; border-radius: 100px; padding: 5px 6px 5px 12px;
  font-size: .86rem; font-weight: 700;
}
/* 20px missed even the 24px minimum, and this is the only way to drop a
   category once it is picked. */
.ms-chip-remove {
  width: 26px; height: 26px; flex-shrink: 0; border: none; border-radius: 50%;
  background: rgba(14, 24, 94, .1); color: var(--navy);
  font-size: 15px; line-height: 1; cursor: pointer; font-family: inherit;
  display: flex; align-items: center; justify-content: center;
}
.ms-chip-remove:hover { background: var(--navy); color: #fff; }

@media (max-width: 680px) {
  /* Inline rather than floating — an overlaid panel on a phone covers the
     fields underneath and is easy to lose. */
  .multiselect.is-enhanced .ms-panel {
    position: static; max-height: none; margin-top: 8px; box-shadow: none;
  }
}

/* A full finger target on touch widths — wider than the 680px phone breakpoint,
   because a tablet in landscape is still a thumb. The chip grows with it, so
   the gap goes up too and the pills do not read as one run-on block. */
@media (max-width: 820px) {
  .ms-chips { gap: 10px; }
  .ms-chip { padding: 4px 4px 4px 14px; }
  .ms-chip-remove { width: 44px; height: 44px; font-size: 18px; }
}

/* ── Rotating stat cards ──────────────────────────────────────────────────── */
/* Unenhanced (no JS, or reduced-motion): a plain grid showing every figure. */
.statrotator-track {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px;
}
.stat-card {
  margin: 0; padding: 26px 24px; border-radius: var(--radius);
  background: var(--white); border: 1px solid var(--wash-edge);
}
.stat-card b {
  display: block; font-size: clamp(2.4rem, 5vw, 3.4rem); font-weight: 900;
  line-height: 1; letter-spacing: -.04em; color: var(--green); margin-bottom: 10px;
}
.stat-card figcaption { color: var(--ink); font-size: 1.02rem; line-height: 1.5; }
.stat-card cite {
  display: block; margin-top: 14px; font-style: normal;
  font-size: .78rem; font-weight: 700; letter-spacing: .04em;
  color: var(--ink-mute);
}

/* Enhanced: one card at a time, centred, with controls. */
.statrotator.is-enhanced .statrotator-track {
  display: block; position: relative; min-height: 230px; max-width: 760px; margin: 0 auto;
}
.statrotator.is-enhanced .stat-card {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .28s ease, transform .28s ease, visibility 0s linear .28s;
}
.statrotator.is-enhanced .stat-card.is-active {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .28s ease, transform .28s ease, visibility 0s;
}
.statrotator.is-enhanced .stat-card b { font-size: clamp(3rem, 8vw, 4.6rem); }
.statrotator.is-enhanced .stat-card figcaption { font-size: 1.12rem; max-width: 34ch; }

.statrotator-controls {
  display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 26px;
}
.statrotator-arrow {
  width: 44px; height: 44px; flex-shrink: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid var(--line-strong);
  background: var(--white); color: var(--navy);
  transition: background-color .15s, border-color .15s, color .15s;
}
.statrotator-arrow:hover { background: var(--green); border-color: var(--green-dark); color: var(--navy); }
.statrotator-arrow:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }

.statrotator-dots { display: flex; align-items: center; gap: 2px; }
.statrotator-dot {
  width: 30px; height: 44px; padding: 0; border: none; background: none;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.statrotator-dot::before {
  content: ''; width: 9px; height: 9px; border-radius: 50%;
  background: rgba(14, 24, 94, .25);
  transition: background-color .2s, transform .2s;
}
.statrotator-dot:hover::before { background: rgba(14, 24, 94, .5); }
.statrotator-dot.is-active::before { background: var(--green); transform: scale(1.4); }
.statrotator-dot:focus-visible { outline: 2px solid var(--green); outline-offset: -4px; border-radius: 6px; }

@media (max-width: 680px) {
  .statrotator.is-enhanced .statrotator-track { min-height: 270px; }
  /* Dots alone on a phone — the arrows crowd a narrow row. */
  .statrotator-arrow { display: none; }
}

/* ── Truck spec list ──────────────────────────────────────────────────────── */
.spec-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.spec-list li {
  display: grid; grid-template-columns: 150px 1fr; gap: 18px; align-items: baseline;
  padding: 14px 0; border-bottom: 1px solid var(--line);
}
.spec-list li:last-child { border-bottom: none; }
.spec-label {
  font-size: .76rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase;
  color: var(--navy);
}
.spec-value { color: var(--ink-soft); line-height: 1.55; }
.spec-value strong { color: var(--navy); }
.spec-value a { color: var(--green-ink); font-weight: 700; }

@media (max-width: 620px) {
  /* Stack label over value — a 150px label column leaves no room for the text. */
  .spec-list li { grid-template-columns: 1fr; gap: 4px; padding: 12px 0; }
}

/* ── Legal pages ──────────────────────────────────────────────────────────── */
/* Long-form prose: narrower measure, clearer heading rhythm than marketing pages. */
.legal h2 {
  font-size: 1.32rem; margin: 40px 0 14px; padding-top: 22px;
  border-top: 1px solid var(--line);
}
.legal h2:first-of-type { margin-top: 0; padding-top: 0; border-top: none; }
.legal h3 { font-size: 1.05rem; margin: 26px 0 8px; color: var(--navy); }
.legal p, .legal li { color: var(--ink-soft); }
.legal ul { margin: 0 0 1.1em; padding-left: 22px; display: grid; gap: 7px; }
.legal li::marker { color: var(--green-ink); }
.legal code {
  background: var(--paper-2); padding: 2px 6px; border-radius: 5px;
  font-size: .9em; color: var(--navy);
}
.legal a { font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* Content restrictions — deliberately hard to skim past. */
.callout-warn {
  background: rgba(212, 88, 91, .07); border: 1px solid rgba(212, 88, 91, .4);
  border-left: 5px solid #C4464A; border-radius: 0 12px 12px 0;
  padding: 20px 22px; margin: 0 0 22px;
}
.callout-warn p { color: var(--ink); margin-bottom: .9em; }
.callout-warn ul { margin: 0 0 .9em; padding-left: 22px; display: grid; gap: 5px; }
.callout-warn li { color: var(--ink); }
.callout-warn li::marker { color: #C4464A; }
.callout-warn.compact { margin: 0; padding: 16px 18px; font-size: .94rem; }
.callout-warn.compact p { margin-bottom: .6em; }

.footer-legal { display: flex; gap: 10px; flex-wrap: wrap; }
.footer-legal a { color: var(--on-dark-dim); }
.footer-legal a:hover { color: var(--green); }

/* ── Responsive ───────────────────────────────────────────────────────────────
   Breakpoint ladder, each step earning its place:
     1150  header phone number drops (it is the least important header item)
     1024  two-column layouts stack; desktop nav becomes the hamburger
      900  three- and four-up card grids halve
      680  everything goes single column; buttons go full width
      480  tighter gutters, smaller logo, larger tap targets
      380  smallest phones: header reduces to logo + menu
   ------------------------------------------------------------------------- */

@media (max-width: 1000px) {
  /* Below this the hamburger appears and the drawer carries both. */
  .header-account,
  .account-menu { display: none; }
}

/* Five nav items need roughly 860px of header row; below that the logo, nav and
   CTA start to crowd, so the hamburger takes over. */
@media (max-width: 1000px) {
  .nav-desktop { display: none; }
  .nav-toggle { display: flex; }
}

@media (max-width: 1200px) {
  .header-inner { min-height: 70px; }
  .logo img { height: 38px; }

  .hero { padding: 76px 0 84px; }
  .hero-lead { max-width: none; }

  .split { grid-template-columns: 1fr; gap: 36px; }
  .split-art { max-width: 520px; margin-inline: auto; width: 100%; }
  .form-shell { grid-template-columns: 1fr; gap: 36px; }
  .form-aside { position: static; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  .grid-3, .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .section { padding: 72px 0; }
}

@media (max-width: 680px) {
  body { font-size: 16px; }
  .logo img { height: 32px; }
  .wrap { padding: 0 18px; }

  .section { padding: 58px 0; }
  .section-tall { padding: 76px 0; }
  .section-tight { padding: 44px 0; }
  .section-head { margin-bottom: 36px; }

  .hero { padding: 52px 0 64px; }

  .grid-2, .grid-3, .grid-4, .gallery-grid { grid-template-columns: 1fr; }
  .field-grid { grid-template-columns: 1fr; }
  .quote-form { padding: 24px 20px; }
  .card { padding: 26px 22px; }

  /* Full-width buttons in content, but NOT in the header — a 100%-wide CTA
     there would blow the nav bar apart. */
  .btn-row { flex-direction: column; align-items: stretch; }
  .btn-row .btn, .btn-block { width: 100%; }

  .shot { aspect-ratio: 16 / 10; }
  .faq-item summary { padding: 19px 48px 19px 20px; font-size: 1rem; }
  .faq-item summary::after { right: 20px; }
  .faq-item .faq-body { padding: 0 20px 20px; }

  .footer-grid { grid-template-columns: 1fr; gap: 30px; }
  .site-footer { padding-top: 48px; }
  .footer-base { flex-direction: column; align-items: flex-start; text-align: left; }
}

@media (max-width: 480px) {
  .wrap { padding: 0 16px; }
  .logo img { height: 27px; }
  .logo-footer img { height: 54px; }
  .btn { padding: 14px 22px; }
  .header-inner { gap: 12px; }
  .header-actions { gap: 10px; }
  .header-actions .btn-sm { padding: 10px 14px; font-size: .86rem; }

  /* These two sat at 10.9px and 11.5px — too small to read on a phone. */
  .shot-tag { font-size: .78rem; }
  .shot-ph { font-size: .8rem; }
  .event-target-label { font-size: .78rem; }
  .cat-group-title { font-size: .78rem; }
  .field .opt, legend .opt { font-size: .78rem; }

  .aside-card, .quote-form { padding: 22px 18px; }
  .pill { padding: 8px 14px; font-size: .86rem; }
}

@media (max-width: 380px) {
  /* Below this the logo, CTA and menu button can't share a row. The mobile
     menu already carries a Get a Quote button, so the header CTA goes. */
  .header-actions .btn { display: none; }
  .logo img { height: 25px; }
  .header-inner { gap: 12px; min-height: 62px; }
  h1 { font-size: 1.95rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .btn:hover, .card-hover:hover, .shot:hover { transform: none; }
}

/* Homepage campaign-events teaser: text beside the CTA on desktop, stacked below. */
.events-teaser {
  display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: center;
  background: var(--white); border: 1px solid var(--line-strong);
  border-left: 5px solid var(--green); border-radius: var(--radius); padding: 30px 32px;
}
@media (max-width: 760px) {
  .events-teaser { grid-template-columns: 1fr; gap: 20px; padding: 24px 22px; }
  .events-teaser-cta .btn { width: 100%; }
}

/* Header account link, sitting between the nav and the quote CTA. */
.header-account {
  color: var(--on-navy-dim); font-weight: 700; font-size: .93rem; white-space: nowrap;
}
.header-account:hover { color: var(--green); text-decoration: none; }

/* ── Account menu ──────────────────────────────────────────────────────────
   Replaces the old "My Profile" text link once signed in. It is a button
   rather than a link because it opens a menu, and sign-out has to be reachable
   from every page — not only from the profile page it used to live on. */
.account-menu { position: relative; flex-shrink: 0; }

.account-btn {
  width: 44px; height: 44px; padding: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid rgba(255, 255, 255, .25);
  background: rgba(255, 255, 255, .06); color: var(--white);
  transition: background-color .15s, border-color .15s, color .15s;
}
.account-btn:hover { background: rgba(255, 255, 255, .12); border-color: var(--green); color: var(--green); }
.account-btn[aria-expanded="true"] { background: var(--green); border-color: var(--green); color: var(--navy); }
.account-btn:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }

.account-drop {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 120;
  min-width: 190px; padding: 8px;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  display: grid; gap: 2px;
}
.account-drop[hidden] { display: none; }

.account-drop a,
.account-drop button {
  display: block; width: 100%; text-align: left;
  padding: 11px 12px; border: none; background: none; cursor: pointer;
  font: inherit; font-size: .93rem; font-weight: 700; color: var(--navy);
  border-radius: 9px;
}
.account-drop a:hover,
.account-drop button:hover { background: var(--paper); text-decoration: none; }
.account-drop a:focus-visible,
.account-drop button:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }

/* Sign out is destructive-ish and sits apart from the navigation items. */
.account-signout {
  margin-top: 4px; padding-top: 12px !important;
  border-top: 1px solid var(--line) !important;
  border-radius: 0 0 9px 9px !important;
  color: var(--ink-soft) !important;
}

.nav-mobile-signout {
  width: 100%; text-align: left; padding: 13px 4px; margin-top: 4px;
  border: none; background: none; cursor: pointer;
  font: inherit; font-weight: 700; color: var(--on-dark-dim);
}
.nav-mobile-signout:hover { color: var(--green); }


/* Shown on the quote form once details are filled in from a saved profile. */
.prefill-note {
  background: rgba(166, 214, 8, .12); border-left: 3px solid var(--green-dark);
  border-radius: 0 8px 8px 0; padding: 10px 14px; margin: -14px 0 24px !important;
  color: #4A6100 !important; font-weight: 600;
}

/* ── Admin portal ─────────────────────────────────────────────────────────── */
/* Dense by design: this is a working screen, not a marketing page, and the
   person using it wants to see as much as will fit without scrolling. */
.admin-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px; margin-bottom: 34px;
}
.admin-stat {
  background: var(--white); border: 1px solid var(--line);
  border-left: 4px solid var(--green); border-radius: var(--radius); padding: 18px 20px;
}
.admin-stat-label {
  margin: 0 0 6px; font-size: .76rem; font-weight: 900; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-mute);
}
.admin-stat-value {
  margin: 0; font-size: 1.9rem; font-weight: 900; letter-spacing: -.03em;
  line-height: 1.1; color: var(--navy);
}
.admin-stat-note { margin: 4px 0 0; font-size: .82rem; color: var(--ink-mute); }

.admin-panel {
  background: var(--paper); border: 1px solid var(--wash-edge);
  border-radius: var(--radius); padding: 24px; margin-bottom: 28px;
}
.admin-panel-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 16px;
}
.admin-panel-head h2 { margin: 0; font-size: 1.25rem; color: var(--navy); }
.admin-count { margin: 0; font-size: .88rem; font-weight: 700; color: var(--ink-mute); }

.admin-filters {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  padding: 14px 16px; margin-bottom: 16px;
  background: var(--white); border: 1px solid var(--line); border-radius: 10px;
}
.admin-filters label {
  font-size: .78rem; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-mute);
}
.admin-filters select, .admin-filters input {
  font-family: inherit; font-size: .92rem; padding: 9px 12px;
  border: 1px solid var(--line-strong); border-radius: 8px;
  background: var(--white); color: var(--ink); max-width: 100%;
}

.admin-totals {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px; margin-bottom: 16px;
}
.admin-total {
  background: var(--white); border: 1px solid var(--line);
  border-radius: 10px; padding: 12px 14px;
}
.admin-total span {
  display: block; font-size: .76rem; font-weight: 900; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-mute); margin-bottom: 4px;
}
.admin-total strong { font-size: 1.4rem; font-weight: 900; color: var(--navy); letter-spacing: -.02em; }

/* Tables scroll inside their own box rather than pushing the page sideways. */
.admin-scroll { overflow-x: auto; background: var(--white); border: 1px solid var(--line); border-radius: 10px; }
.admin-split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.admin-table { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 560px; }
.admin-table th, .admin-table td {
  text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: top;
}
.admin-table thead th {
  font-size: .76rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-mute); background: var(--paper-2); border-bottom: 1px solid var(--line-strong);
  position: sticky; top: 0;
}
.admin-table tbody tr:last-child td { border-bottom: none; }
.admin-table td { color: var(--ink-soft); }
.admin-table td strong { color: var(--navy); }
.admin-mono { font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.admin-wrap { max-width: 260px; }
.admin-sub { font-size: .82rem; color: var(--ink-mute); }
.admin-empty { text-align: center; color: var(--ink-mute); padding: 28px 14px; }

.admin-state {
  display: inline-block; padding: 3px 9px; border-radius: 100px;
  font-size: .76rem; font-weight: 900; letter-spacing: .05em; text-transform: uppercase;
  background: var(--wash); border: 1px solid var(--line-strong); color: var(--navy);
}
.admin-state-in_progress { background: var(--wash-green); border-color: var(--green-dark); color: #3F5200; }
.admin-state-completed { background: var(--paper-2); color: var(--ink-mute); }
.admin-state-off { background: var(--paper-2); color: var(--ink-mute); }
.admin-state-cancelled { background: #FBEAEA; border-color: #E5B4B4; color: #8A1F1F; }

/* Discount code row actions: edit, deactivate, delete (with an inline confirm). */
.code-actions { white-space: nowrap; }
.code-actions .btn + .btn { margin-left: 4px; }
.code-confirm { font-weight: 800; color: #A13337; margin-right: 4px; }
.btn-danger { background: #A13337; color: var(--white); border-color: #A13337; }
.btn-danger:hover { background: #8A2A2E; border-color: #8A2A2E; }
.code-edit-row > td { background: var(--paper); padding: 18px; }
.code-edit-form .form-foot .btn + .btn { margin-left: 6px; }
.admin-flag {
  display: inline-block; margin-top: 4px; padding: 2px 8px; border-radius: 100px;
  font-size: .76rem; font-weight: 800; letter-spacing: .04em;
  background: var(--white); border: 1px solid var(--line-strong); color: var(--ink-soft);
}

@media (max-width: 900px) {
  .admin-split { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .admin-panel { padding: 18px 16px; }
  .admin-filters { gap: 8px 10px; }
  .admin-filters select, .admin-filters input { flex: 1 1 140px; }
}

/* ── Artwork upload ───────────────────────────────────────────────────────── */
.art-panel { display: grid; gap: 34px; }
.art-campaign {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 28px; box-shadow: var(--shadow);
}
.art-campaign-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 18px;
  flex-wrap: wrap; margin-bottom: 16px;
}
.art-campaign-head h2 { margin: 0 0 4px; font-size: 1.45rem; }
.art-campaign-head .eyebrow { margin-bottom: 6px; }
.art-campaign-meta { margin: 0; color: var(--ink-soft); font-size: .95rem; }
.art-due {
  background: var(--wash-green); border: 1px solid var(--green-dark); border-radius: 12px;
  padding: 10px 16px; min-width: 0;
}
.art-due span {
  display: block; font-size: .76rem; font-weight: 900; letter-spacing: .1em;
  text-transform: uppercase; color: #3F5200;
}
.art-due strong { color: var(--navy); font-size: 1.02rem; }
.art-due.is-past { background: #FBEDEE; border-color: #A13337; }
.art-due.is-past span { color: #A13337; }
.note-band.compact { padding: 12px 16px; margin: 0 0 16px; }
.art-intro { color: var(--ink-soft); margin: 0 0 14px; }
.art-agree { margin: 0 0 8px; }
.art-agree.is-needed { outline: 2px solid #A13337; outline-offset: 4px; border-radius: 10px; }
.art-day { margin-top: 26px; }
.art-day h3 { font-size: 1.1rem; margin: 0 0 12px; color: var(--navy); }
.art-slot {
  border: 1px solid var(--line); border-radius: var(--radius); padding: 18px;
  background: var(--paper); margin-bottom: 14px;
}
.art-slot-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.art-slot-head h4 { margin: 0; font-size: 1rem; color: var(--navy); }
.art-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.art-field {
  background: var(--white); border: 1px solid var(--line); border-radius: 12px;
  padding: 14px; min-width: 0;
}
.art-field-label { display: block; font-weight: 800; color: var(--navy); font-size: .93rem; margin-bottom: 2px; }
.art-field-spec { margin: 0 0 10px; font-size: .84rem; color: var(--ink-mute); }
.art-empty { margin: 0 0 10px; font-size: .88rem; color: var(--ink-mute); }
.art-pick { position: relative; display: inline-block; }
/* The real input sits over the visible button, so it stays keyboard- and
   screen-reader-reachable through its own label. */
.art-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.art-input:focus-visible + .btn { outline: 3px solid var(--green); outline-offset: 2px; }
.art-progress { height: 6px; background: var(--paper-2); border-radius: 100px; overflow: hidden; margin-top: 10px; }
.art-progress span { display: block; height: 100%; width: 0; background: var(--green-dark); transition: width .15s; }
.art-msg { margin: 8px 0 0; font-size: .86rem; font-weight: 700; min-height: 0; }
.art-msg:empty { display: none; }
.art-msg.is-err { color: #A13337; }
.art-msg.is-ok { color: var(--green-ink); }
.art-file { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 10px; min-width: 0; }
.art-file.is-compact { margin: 8px 0 0; }
.art-thumb {
  flex: 0 0 96px; width: 96px; aspect-ratio: 5 / 3; border-radius: 8px; overflow: hidden;
  background: var(--navy); display: grid; place-items: center; color: var(--white);
  font-size: 1.4rem; text-decoration: none;
}
.art-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.art-file-meta { display: grid; gap: 3px; min-width: 0; }
.art-file-name { font-weight: 700; font-size: .9rem; overflow-wrap: anywhere; }
.art-file-dims { font-size: .8rem; color: var(--ink-mute); }
.art-file-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.art-reason { font-size: .84rem; color: #A13337; }
.art-history { margin-top: 10px; font-size: .86rem; }
.art-history summary { cursor: pointer; color: var(--ink-soft); font-weight: 700; }
.art-badge {
  display: inline-block; padding: 2px 9px; border-radius: 100px; white-space: nowrap;
  font-size: .76rem; font-weight: 900; letter-spacing: .05em; text-transform: uppercase;
  background: var(--paper-2); border: 1px solid var(--line-strong); color: var(--ink-soft);
}
.art-badge.is-submitted { background: #EEF1FB; border-color: #9AA6D8; color: var(--navy); }
.art-badge.is-approved { background: var(--wash-green); border-color: var(--green-dark); color: #3F5200; }
.art-badge.is-rejected { background: #FBEDEE; border-color: #A13337; color: #A13337; }
.art-badge.is-late { background: #FFF4E0; border-color: #B7791F; color: #7A4F0F; }
.art-add { margin-top: 4px; }
.art-all { margin: 0; }
.art-login .btn-row { margin-top: 18px; }
.legal ol { margin: 0 0 1.1em; padding-left: 22px; display: grid; gap: 7px; }
.legal ol li { color: var(--ink-soft); }

/* Artwork in the admin portal */
.art-admin-campaign {
  background: var(--white); border: 1px solid var(--line); border-radius: 12px; margin-bottom: 12px;
}
.art-admin-campaign > summary {
  cursor: pointer; padding: 14px 16px; display: flex; flex-wrap: wrap; gap: 6px 12px;
  align-items: center; list-style: none;
}
.art-admin-campaign > summary::-webkit-details-marker { display: none; }
.art-admin-campaign > summary::before { content: "\25B8"; color: var(--ink-mute); }
.art-admin-campaign[open] > summary::before { content: "\25BE"; }
.art-admin-campaign > summary strong { color: var(--navy); }
.art-admin-body { padding: 0 16px 16px; }
.art-admin-controls {
  display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center;
  padding: 12px 0 14px; border-top: 1px solid var(--line);
}
.art-admin-controls label { display: inline-flex; gap: 6px; align-items: center; font-size: .9rem; font-weight: 700; color: var(--ink-soft); }
.art-missing { background: #FFF4E0; border: 1px solid #E3B65C; border-radius: 10px; padding: 10px 14px; margin-bottom: 12px; font-size: .88rem; color: #6A4510; }
.art-missing ul { margin: 6px 0 0; padding-left: 20px; }
.art-review { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.art-review input { font: inherit; font-size: .88rem; padding: 7px 10px; border: 1px solid var(--line-strong); border-radius: 8px; min-width: 0; flex: 1 1 160px; }
.art-tasks { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 8px; }
.art-tasks li {
  background: var(--white); border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 14px; display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; font-size: .9rem;
}
.art-tasks li .art-task-text { flex: 1 1 260px; min-width: 0; }
.art-lookup-card { background: var(--white); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; margin-bottom: 16px; }
.art-lookup-card dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0 0 10px; font-size: .9rem; }
.art-lookup-card dt { font-weight: 800; color: var(--ink-mute); }
.art-lookup-card dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.art-admin-h3 { font-size: 1rem; margin: 18px 0 10px; color: var(--navy); }

/* Campaigns, vendors and base images (Update 8) */
.admin-filters-top { margin-bottom: 14px; }
.base-alerts { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.base-alerts .art-badge { white-space: normal; text-transform: none; letter-spacing: 0; font-size: .82rem; }
.camp-row { display: flex; gap: 10px; align-items: flex-start; }
.camp-pick { padding-top: 15px; }
.camp-card { flex: 1 1 auto; min-width: 0; }
.camp-tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--line); margin-bottom: 4px; flex-wrap: wrap; }
.camp-tab {
  font: inherit; font-size: .88rem; font-weight: 800; color: var(--ink-soft); background: none; border: 0;
  border-bottom: 3px solid transparent; padding: 8px 10px; min-height: 44px; cursor: pointer;
}
.camp-tab.is-on { color: var(--navy); border-bottom-color: var(--green); }
.base-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; margin-bottom: 8px; }
.base-card { background: var(--paper-2); border: 1px solid var(--line); border-radius: 10px; padding: 10px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; align-content: start; min-width: 0; }
.base-thumb { width: 100%; max-width: 100%; aspect-ratio: 5 / 3; object-fit: contain; background: #0E185E10; border-radius: 6px; display: block; }
.base-thumb.is-empty { display: flex; align-items: center; justify-content: center; color: var(--ink-mute); font-size: .82rem; font-weight: 700; }
.base-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.base-upload { display: grid; gap: 4px; font-size: .84rem; font-weight: 700; color: var(--ink-soft); min-width: 0; }
.base-upload input { font-size: .8rem; max-width: 100%; }
.base-replace { border-top: 1px solid var(--line); padding-top: 8px; display: grid; gap: 8px; }
.base-cands { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 6px; }
.base-cand { font: inherit; font-size: .78rem; text-align: left; background: var(--white); border: 1px solid var(--line-strong); border-radius: 8px; padding: 5px; cursor: pointer; display: grid; gap: 2px; min-width: 0; }
.base-cand:hover, .base-cand:focus-visible { border-color: var(--navy); }
.play-order { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 6px; }
.play-item {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; background: var(--white);
  border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; cursor: grab;
}
.play-item.is-dragging { opacity: .5; border-style: dashed; }
.play-handle { color: var(--ink-mute); letter-spacing: -3px; font-weight: 900; }
.play-ad { font-weight: 900; color: var(--navy); min-width: 3.2em; }
.play-who { flex: 1 1 200px; min-width: 0; font-size: .9rem; }
.play-files { display: flex; gap: 8px; flex-wrap: wrap; }
.play-file { display: grid; gap: 2px; width: 92px; font-size: .78rem; font-weight: 700; }
.play-file .base-thumb { aspect-ratio: 5 / 3; }
.play-move { display: flex; gap: 4px; }
.subs-table .base-thumb { width: 84px; }
.subs-table tr.is-replaced td { color: var(--ink-mute); }
.subs-table tr.is-replaced .base-thumb { opacity: .55; }
.art-badge.is-replaced { background: var(--paper-2); border-color: var(--line-strong); color: var(--ink-mute); }
.art-file-sent { display: flex; gap: 5px; align-items: center; margin-top: 4px; }

@media (max-width: 680px) {
  .art-campaign { padding: 20px 16px; }
  .art-slot { padding: 14px 12px; }
  .art-fields { grid-template-columns: 1fr; }
}

/* Image Converter Tool (Update 9) */
.art-help { background: var(--paper-2); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; margin: 4px 0 22px; }
.art-help h4 { margin: 0 0 4px; font-size: 1rem; color: var(--navy); }
.art-help p { margin: 0 0 12px; }
.art-help p:last-child { margin-bottom: 0; }
.art-convert-link { margin: 12px 0 0; font-size: .9rem; color: var(--ink-soft); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.conv { display: grid; gap: 22px; }
.conv-h { font-size: 1.25rem; margin: 0 0 6px; }
.conv-pick { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 12px; position: relative; }
.conv-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.conv-input:focus-visible + label { outline: 3px solid var(--navy); outline-offset: 2px; }
.conv-previews { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 18px; margin-top: 14px; }
.conv-fig { margin: 0; display: grid; gap: 8px; min-width: 0; }
.conv-fig figcaption { font-size: .9rem; color: var(--ink-soft); }
.conv-frame { position: relative; overflow: hidden; width: 100%; border-radius: 8px; background: #0E185E14; border: 1px solid var(--line-strong); }
.conv-frame img { position: absolute; max-width: none; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.conv-frame-a { cursor: grab; touch-action: none; }
.conv-frame-a.is-dragging { cursor: grabbing; }
.conv-frame-a:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
.conv-shade { position: absolute; left: 0; right: 0; background: rgba(14, 24, 94, .55);
  background-image: repeating-linear-gradient(135deg, transparent 0 8px, rgba(255,255,255,.12) 8px 16px); pointer-events: none; }
.conv-shade-top { top: 0; border-bottom: 2px dashed #fff; }
.conv-shade-bottom { bottom: 0; border-top: 2px dashed #fff; }
.conv-note { margin: 12px 0 0; }
.conv-downloads { margin-top: 4px; }
.conv-use { display: grid; gap: 12px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); justify-items: start; }
.conv-use .field { width: 100%; max-width: 520px; }
.conv-use select { width: 100%; }

/* Profile: purchases grouped by campaign (Update 10) */
.pur-campaign { margin-bottom: 22px; }
.pur-campaign-name { font-size: 1.05rem; margin: 0 0 10px; color: var(--navy); }
.pur-campaign-dates { font-weight: 600; color: var(--ink-mute); font-size: .92rem; margin-left: 6px; }
.pur { background: var(--white); border: 1px solid var(--line); border-left: 4px solid var(--green); border-radius: 12px; overflow: hidden; }
.pur.is-done { border-left-color: var(--line-strong); }
.pur-row {
  display: flex; width: 100%; align-items: center; gap: 10px 14px; text-align: left; font: inherit; color: inherit;
  background: none; border: 0; padding: 16px 18px; cursor: pointer; min-height: 44px;
}
.pur-row:hover { background: var(--paper-2); }
.pur-row:focus-visible { outline: 3px solid var(--navy); outline-offset: -3px; }
.pur-main { display: grid; gap: 3px; flex: 1 1 auto; min-width: 0; }
.pur-date { font-weight: 800; color: var(--navy); font-size: 1.02rem; }
.pur-meta, .pur-art { font-size: .9rem; color: var(--ink-soft); }
.pur-ref { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .86rem; color: var(--ink-mute); white-space: nowrap; }
.pur-arrow { width: 10px; height: 10px; border-right: 2.5px solid var(--navy); border-bottom: 2.5px solid var(--navy);
  transform: rotate(-45deg); transition: transform .15s; flex: 0 0 auto; margin-right: 4px; }
.pur-row[aria-expanded="true"] .pur-arrow { transform: rotate(45deg); }
.pur-send { display: inline-block; margin: -6px 18px 14px; font-size: .92rem; font-weight: 700; color: var(--green-ink); padding: 6px 0; }
.pur-detail { border-top: 1px solid var(--line); padding: 4px 18px 16px; }
.pur-detail h4 { font-size: .92rem; margin: 14px 0 6px; color: var(--navy); }
.pur-days { border-collapse: collapse; font-size: .9rem; width: 100%; max-width: 520px; }
.pur-days th, .pur-days td { text-align: left; padding: 5px 10px 5px 0; border-bottom: 1px solid var(--line); }
.pur-days th { font-size: .8rem; color: var(--ink-mute); text-transform: uppercase; letter-spacing: .05em; }
.pur-files { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: .9rem; }
.pur-files li { display: grid; gap: 4px; }
.pur-file-list { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.pur-file { color: var(--ink-soft); }
.pur-pay { margin: 0; font-size: .92rem; }
@media (max-width: 520px) {
  .pur-row { flex-wrap: wrap; }
  .pur-ref { order: 3; }
}

/* ---- Update 11: Exclusive Truck, routes, same images for Day 2, refunds ---- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Booking page: shared spots and the Exclusive Truck, side by side. */
.book-options { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 8px; }
.book-option {
  border: 1px solid var(--line); border-radius: var(--radius); padding: 18px;
  background: var(--paper); min-width: 0;
}
.book-option-h { margin: 0 0 6px; font-size: 1.08rem; color: var(--navy); }
.book-option .form-note { margin-bottom: 14px; }
.book-option .field-grid { grid-template-columns: 1fr; }
.excl-pick { border: 0; padding: 0; margin: 0; min-width: 0; }
.excl-event + .excl-event { margin-top: 10px; }
.excl-event-name { margin: 0 0 6px; font-size: .84rem; font-weight: 800; color: var(--ink-soft); }
.excl-days { display: flex; flex-wrap: wrap; gap: 6px; }
.excl-day { flex: 1 1 140px; margin: 0; }
.excl-day.is-off { opacity: .6; }
.excl-day.is-off input { cursor: not-allowed; }
.excl-why { display: block; font-size: .78rem; font-weight: 600; color: var(--ink-mute); }
@media (max-width: 760px) {
  .book-options { grid-template-columns: 1fr; }
}

.art-badge.is-exclusive, .admin-flag.is-exclusive { background: var(--navy); border-color: var(--navy); color: var(--white); }
.art-badge.is-missing { background: var(--paper-2); }
.art-day h3 .art-badge { vertical-align: middle; margin-left: 6px; }

/* Fix 2: "Use these images for Day 2 as well". */
.art-mirror { margin: -4px 0 12px; }
.art-slot.is-mirrored { background: var(--white); border-style: dashed; }
.art-mirror-note { margin: 0; font-size: .92rem; color: var(--ink-soft); }
.art-slot-head .art-remove { margin-left: auto; }

/* Route step. */
.art-routes { scroll-margin-top: 90px; }
.art-routes .art-due { margin-bottom: 12px; }
.route-form {
  border: 1px solid var(--line); border-radius: var(--radius); padding: 18px;
  background: var(--paper); margin-bottom: 14px;
}
.route-modes { border: 0; padding: 0; margin: 0; min-width: 0; }
.route-modes .cat-option { margin-bottom: 6px; }
.route-pane { margin: 4px 0 14px 30px; }
.route-pane select { width: 100%; max-width: 460px; }
.route-desc { margin-top: 8px; }
.route-stop {
  display: grid; grid-template-columns: 26px minmax(0, 1fr) 120px 120px; gap: 8px;
  align-items: end; margin-bottom: 8px;
}
.route-stop-n {
  width: 26px; height: 26px; border-radius: 50%; background: var(--navy); color: var(--white);
  display: grid; place-items: center; font-size: .8rem; font-weight: 800; margin-bottom: 8px;
}
.route-stop input { width: 100%; }
.route-stop input[aria-invalid="true"] { border-color: #A13337; }
.route-time { display: flex; flex-direction: column; gap: 2px; }
.route-time-l { font-size: .76rem; font-weight: 700; color: var(--ink-mute); }
.route-notes { display: flex; flex-direction: column; gap: 4px; font-weight: 700; font-size: .9rem; }
.route-notes textarea { width: 100%; }
.route-form .form-foot { margin-top: 12px; }
.route-stops { margin: 6px 0 0; padding-left: 20px; }
.route-stops li { margin-bottom: 2px; }
@media (max-width: 600px) {
  .route-pane { margin-left: 0; }
  .route-stop { grid-template-columns: 26px minmax(0, 1fr) minmax(0, 1fr); }
  .route-stop-place { grid-column: 2 / -1; }
  .route-stop > :nth-child(3) { grid-column: 2; }
  .route-stop > :nth-child(4) { grid-column: 3; }
}

/* Admin: Exclusive Truck blocks and refunds. */
.excl-order { margin-bottom: 16px; }
.excl-order > p { margin: 0 0 8px; }
.excl-route {
  border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px;
  background: var(--paper); margin-bottom: 10px;
}
.excl-route p { margin: 0 0 4px; }
.excl-route .code-actions { margin-top: 10px; }
.admin-refund { display: inline-block; margin-top: 2px; font-size: .8rem; font-weight: 800; color: #A13337; }

/* A row the script hides must stay hidden; .order-row sets display. */
.order-row[hidden] { display: none; }
.art-slot-head { flex-wrap: wrap; }
.art-slot-head h4 { white-space: nowrap; }
.route-stop > *, .route-stop input[type="time"] { min-width: 0; }
.route-pane select { min-width: 0; }
.excl-route .code-actions { display: flex; flex-wrap: wrap; gap: 8px; white-space: normal; }

/* Update 11: Send Receipt and admin-created bookings. */
.admin-flag.is-paid { background: var(--wash-green); border-color: var(--green-dark); color: #3F5200; }
.pay-list { list-style: none; margin: 6px 0 0; padding: 0; font-size: .82rem; }
.pay-list li { margin-bottom: 6px; }
.admin-state-awaiting_deposit { background: #FFF4E0; border-color: #E8C98E; color: #7A4F0F; }

/* ── Admin portal tabs (Update 12) ────────────────────────────────────────── */
.section-admin { padding-top: 28px; }
.admin-tabs-wrap {
  margin: 0 0 24px;
  background: var(--white); border-bottom: 1px solid var(--line-strong);
}
/* Scrolls sideways on a phone rather than wrapping into a second row. */
.admin-tabs {
  display: flex; gap: 2px; overflow-x: auto; scrollbar-width: thin;
  -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity;
}
.admin-tab {
  flex: 0 0 auto; scroll-snap-align: start;
  font: inherit; font-size: .9rem; font-weight: 800; color: var(--ink-soft);
  background: none; border: 0; border-bottom: 3px solid transparent;
  padding: 12px 14px 11px; cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px;
}
.admin-tab:hover { color: var(--navy); }
.admin-tab.is-active { color: var(--navy); border-bottom-color: var(--green); }
.admin-tab:focus-visible { outline: 2px solid var(--navy); outline-offset: -2px; }
.tab-badge {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 100px;
  font-size: .76rem; font-weight: 900; line-height: 20px; text-align: center;
  background: #FFF4E0; border: 1px solid #E8C98E; color: #7A4F0F;
}
.tab-badge.is-urgent { background: #A13337; border-color: #A13337; color: var(--white); }
.tab-badge[hidden] { display: none; }
.admin-pane[hidden] { display: none; }
.btn-link {
  background: none; border: 0; padding: 0; font: inherit; font-weight: 700;
  color: var(--green-ink); text-decoration: underline; cursor: pointer;
}

/* ── Orders: one line each, expand for the rest ───────────────────────────── */
.ord-table { min-width: 0; }
.ord-table td { vertical-align: middle; }
.ord-row { cursor: pointer; }
.ord-row:hover > td, .ord-row.is-open > td { background: var(--paper); }
.ord-row:focus-visible { outline: 2px solid var(--navy); outline-offset: -2px; }
.ord-row > td { padding-top: 9px; padding-bottom: 9px; white-space: nowrap; }
.ord-cust { max-width: 240px; overflow: hidden; text-overflow: ellipsis; }
.ord-status .admin-flag { margin-top: 0; }
.ord-act { width: 1%; text-align: right; }
.admin-flag.is-overdue { background: #FBEAEA; border-color: #E5B4B4; color: #8A1F1F; }
.ord-detail-row > td { background: var(--paper); padding: 4px 14px 18px; }
.ord-detail-grid { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 20px; }
.ord-detail h4 {
  margin: 12px 0 6px; font-size: .76rem; font-weight: 900; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-mute);
}
.ord-detail p { margin: 0 0 6px; font-size: .9rem; color: var(--ink-soft); white-space: normal; }
.ord-days { list-style: none; margin: 0; padding: 0; font-size: .88rem; }
.ord-days li { margin-bottom: 4px; }
.ord-notes { white-space: pre-wrap; background: var(--white); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.ord-money { margin: 0; font-size: .88rem; }
.ord-money > div { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; border-bottom: 1px dashed var(--line); }
.ord-money dt { color: var(--ink-soft); min-width: 0; }
.ord-money dd { margin: 0; font-weight: 800; color: var(--navy); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ord-money .is-refund dd, .ord-money .is-overdue dd { color: #8A1F1F; }
.ord-money .is-paid dd { color: #3F5200; }
.ord-history { margin-top: 14px; }
.ord-history summary { cursor: pointer; font-weight: 800; color: var(--navy); font-size: .9rem; }
.ord-hist { list-style: none; margin: 8px 0 0; padding: 0; font-size: .84rem; max-height: 260px; overflow-y: auto; }
.ord-hist > li { padding: 6px 0; border-bottom: 1px solid var(--line); color: var(--ink-soft); white-space: normal; }
.ord-hist ul { margin: 4px 0 0 18px; padding: 0; }
.ord-hist-when { font-weight: 800; color: var(--navy); }
.ord-hist-who { color: var(--ink-mute); }

/* The Actions menu: one button, five items. */
.act-menu { position: relative; display: inline-block; }
.act-menu > summary { list-style: none; cursor: pointer; }
.act-menu > summary::-webkit-details-marker { display: none; }
.act-menu > summary::after { content: ' \25BE'; }
.act-list {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 15; min-width: 170px;
  background: var(--white); border: 1px solid var(--line-strong); border-radius: 10px;
  box-shadow: var(--shadow); padding: 6px; display: flex; flex-direction: column;
}
.act-list button {
  font: inherit; font-size: .9rem; font-weight: 700; text-align: left; color: var(--navy);
  background: none; border: 0; border-radius: 6px; padding: 9px 12px; cursor: pointer;
}
.act-list button:hover:not([disabled]), .act-list button:focus-visible { background: var(--paper); }
.act-list button[disabled] { color: var(--ink-mute); cursor: not-allowed; opacity: .7; }

/* The action dialog */
.ord-dialog {
  width: min(760px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0;
  border: 1px solid var(--line-strong); border-radius: var(--radius); box-shadow: var(--shadow-lg);
  background: var(--white); color: var(--ink);
}
.ord-dialog::backdrop { background: rgba(8, 15, 60, .45); }
.ord-dialog-body { padding: 20px 24px 22px; }
.ord-dialog-body .quote-form { padding: 0; border: 0; box-shadow: none; background: none; }
.ord-dialog-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.ord-dialog-head h2 { margin: 0; font-size: 1.25rem; color: var(--navy); }
.ord-dialog-x {
  font: inherit; font-size: 1.6rem; line-height: 1; background: none; border: 0;
  color: var(--ink-mute); cursor: pointer; padding: 4px 8px; border-radius: 6px;
}
.ord-dialog-x:hover { background: var(--paper); color: var(--navy); }
.ord-dialog-sub { margin: 4px 0 14px; }
.ord-dialog .form-foot { flex-wrap: wrap; gap: 8px; }
.ord-dialog .form-foot .btn + .btn { margin-left: 0; }
.ord-confirm-q { font-weight: 900; color: var(--navy); font-size: 1.05rem; margin: 6px 0 10px; }
.ord-changes { margin: 0 0 12px; padding-left: 20px; color: var(--ink-soft); }
.ord-changes li { margin-bottom: 4px; }
.ord-warn { background: #FBEAEA; border: 1px solid #E5B4B4; color: #8A1F1F; border-radius: 8px; padding: 9px 12px; font-weight: 700; }
.ord-warn-inline { color: #8A1F1F; font-weight: 800; }
.ed-h { font-size: .8rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute); margin: 18px 0 8px; }
.ed-h:first-of-type { margin-top: 0; }
.ed-days { display: grid; gap: 10px; }
.ed-day {
  border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px 12px; margin: 0; min-width: 0;
  display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 10px; background: var(--paper);
}
.ed-day legend { font-weight: 800; font-size: .86rem; color: var(--navy); padding: 0 4px; }
.ed-live { margin: 14px 0 4px; padding: 10px 12px; background: var(--paper); border-radius: 8px; font-size: .92rem; }

/* ── Create booking: four sections and a live summary ─────────────────────── */
.nb-form { padding: 0 24px 24px; }
.nb-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; align-items: start; }
.nb-sec { border: 0; border-top: 1px solid var(--line); margin: 0; padding: 14px 0 6px; min-width: 0; }
.nb-sec:first-child { border-top: 0; padding-top: 4px; }
.nb-sec legend { font-size: .8rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--navy); padding: 0 0 8px; }
.nb-sec .field-grid { gap: 14px; }
.nb-days { display: grid; gap: 8px; margin: 14px 0 6px; }
.nb-day {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; background: var(--white);
}
.nb-check { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; color: var(--navy); flex: 1 1 180px; }
.nb-check input { width: 18px; height: 18px; }
.nb-day select {
  font: inherit; font-size: .9rem; padding: 7px 10px; border: 1px solid var(--line-strong);
  border-radius: 8px; background: var(--white); min-width: 0; max-width: 100%;
}
.nb-summary {
  position: sticky; top: 100px; background: var(--white); border: 1px solid var(--line);
  border-left: 4px solid var(--green); border-radius: var(--radius); padding: 16px 18px;
}
.nb-summary h3 { margin: 0 0 8px; font-size: 1rem; color: var(--navy); }
.nb-summary .form-note { margin-top: 10px; }
.nb-ref, .nb-cust { margin: 0 0 8px; font-size: .9rem; }
.nb-summary .nb-total { border-bottom: 0; border-top: 2px solid var(--navy); margin-top: 4px; padding-top: 6px; font-size: 1rem; }

/* ── Calendar (Campaigns tab) ─────────────────────────────────────────────── */
.cal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.cal-day { background: var(--white); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.cal-day.is-full { border-color: var(--green-dark); }
.cal-date { margin: 0; font-weight: 900; color: var(--navy); }
.cal-day .admin-sub { margin: 0 0 8px; }
.cal-bar { height: 8px; border-radius: 100px; background: var(--paper-2); overflow: hidden; }
.cal-bar span { display: block; height: 100%; background: var(--green); }
.cal-left { margin: 6px 0 0; font-size: .84rem; font-weight: 700; color: var(--ink-soft); }

/* ── Profile: payment and Pay now (Update 12) ─────────────────────────────── */
.campaign-flag.is-pending { background: #FFF4E0; border-color: #E8C98E; color: #7A4F0F; }
.pur-money { margin: 0 0 10px; font-size: .9rem; max-width: 460px; }
.pur-money > div { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; border-bottom: 1px dashed var(--line); }
.pur-money dt { color: var(--ink-soft); min-width: 0; }
.pur-money dd { margin: 0; font-weight: 800; color: var(--navy); white-space: nowrap; }
.pur-money .is-total dt, .pur-money .is-total dd { font-weight: 900; color: var(--navy); }
.pur-money .is-paid dd { color: #3F5200; }
.pur-paynow { margin: 8px 0 4px; }
.pur-payform { max-width: 460px; background: var(--white); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; }
.pur-payform .field input { width: 100%; }
.pur-payform .form-foot { flex-wrap: wrap; gap: 8px; }
.pur-payform .form-foot .btn + .btn { margin-left: 0; }
.pur-payform[hidden] { display: none; }
.pur-charge { margin: 10px 0 0; font-size: .92rem; color: var(--ink-soft); }

@media (max-width: 900px) {
  .ord-detail-grid { grid-template-columns: 1fr 1fr; }
  .nb-layout { grid-template-columns: 1fr; }
  .nb-summary { position: static; }
}
@media (max-width: 680px) {
  .ord-col-dates, .ord-col-total { display: none; }

  .ord-row > td { padding-left: 10px; padding-right: 10px; }
  .ord-detail-grid { grid-template-columns: 1fr; gap: 4px; }
  .ord-dialog { width: calc(100vw - 16px); max-height: calc(100vh - 16px); }
  .ord-dialog-body { padding: 16px; }
  .ed-day { grid-template-columns: 1fr 1fr; }
  .ed-day .field:first-of-type { grid-column: 1 / -1; }
  .nb-form { padding: 0 16px 16px; }
  .admin-tab { padding: 11px 12px 10px; font-size: .86rem; }
}
.admin-balance { color: #7A4F0F; font-size: .84rem; }
[data-receipt-file][hidden] { display: none; }
/* Tighter rows: the order table's buttons are a size smaller than the page's. */
.ord-table .btn-sm, .ord-detail .btn-sm, #payTable .btn-sm { padding: 6px 12px; font-size: .84rem; }
.admin-tabs { scrollbar-width: none; }
.admin-tabs::-webkit-scrollbar { display: none; }
@media (max-width: 680px) {
  /* The status counts: three small boxes a row rather than two big ones. */
  #ordTotals { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  #ordTotals .admin-total { padding: 8px 10px; }
  #ordTotals .admin-total span { font-size: .68rem; letter-spacing: .04em; }
  #ordTotals .admin-total strong { font-size: 1.1rem; }
}
.ord-ref-m { display: none; }
@media (max-width: 680px) {
  /* One line that fits a phone: the reference moves under the name, the side
     flag goes (overdue still shows in the detail and on the Payments tab). */
  .ord-col-ref { display: none; }
  .ord-ref-m { display: block; font-size: .76rem; color: var(--ink-mute); font-variant-numeric: tabular-nums; }
  .ord-status .admin-flag { display: none; }
  .ord-cust { max-width: 150px; }
  .ord-table .admin-state { font-size: .7rem; padding: 2px 7px; }
}
@media (max-width: 680px) {
  /* On a phone the Actions menu is a compact "⋯" button. */
  .act-menu > summary.btn { padding: 4px 12px; font-size: 1.1rem; line-height: 1.2; }
  .act-menu > summary .act-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .act-menu > summary::after { content: '\22EF'; }
  .ord-row > td { padding-left: 8px; padding-right: 8px; }
}
.pur-paynow .btn[hidden] { display: none; }
@media (max-width: 1000px) {
  /* Narrower screens: dates live in the opened order; names may wrap. */
  .ord-col-dates { display: none; }
  .ord-row > td.ord-cust, .ord-row > td.ord-status { white-space: normal; }
  .ord-cust { max-width: none; overflow-wrap: anywhere; }
}
@media (max-width: 380px) {
  .ord-row > td, .ord-table thead th { padding-left: 6px; padding-right: 6px; }
  .ord-table .admin-state { letter-spacing: 0; padding: 2px 5px; }
  .act-menu > summary.btn { padding: 4px 9px; }
}
/* The site's floors hold in the portal too: 12px text, 44px tap targets on touch screens. */
.admin-tab { min-height: 44px; }
.act-list button { min-height: 44px; }
@media (max-width: 680px) {
  .ord-table .admin-state { font-size: .76rem; }
  #ordTotals .admin-total span { font-size: .76rem; letter-spacing: .02em; }
}
@media (max-width: 820px) {
  .ord-table .btn-sm, .ord-detail .btn-sm, #payTable .btn-sm, .act-menu > summary.btn { min-height: 44px; }
  .btn-link { min-height: 44px; display: inline-flex; align-items: center; }
}

/* ── Update 13: orders on one line, Emails, Task List, invoice page ───────── */
.admin-stat-extra { font-size: .95rem; font-weight: 800; letter-spacing: 0; color: var(--ink-soft); white-space: nowrap; }
.ord-num { text-align: right; font-variant-numeric: tabular-nums; }
.ord-table thead th.ord-num { text-align: right; }
.ord-expand { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 10px; }
.ord-instr { border-left: 3px solid var(--green); }
.ord-comms { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.ord-comms h4 { margin: 0 0 6px; }
.ord-comm-list { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 6px; font-size: .88rem; }
.ord-comm-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; white-space: normal; }
.ord-comm-what { font-weight: 800; color: var(--navy); min-width: 190px; }
.ord-comm-when { color: var(--ink-soft); }
.ord-rem { background: var(--white); border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; font-size: .86rem; }
.ord-rem-head { margin: 0 0 4px; white-space: normal; }
.ord-rem-toggle { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--navy); min-height: 32px; }
.ord-rem-toggle input { width: 18px; height: 18px; }
.ord-rem-list { margin: 6px 0 0; padding-left: 18px; color: var(--ink-soft); }
.cal-pending { margin: 2px 0 0; font-size: .8rem; font-weight: 700; color: #7A4F0F; }

.task-panel { padding: 0; }
.task-list > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px;
  padding: 16px 56px 16px 24px; position: relative; min-height: 44px;
}
.task-list > summary::-webkit-details-marker { display: none; }
.task-list > summary::after {
  content: ''; position: absolute; right: 24px; top: 50%; width: 10px; height: 10px; margin-top: -8px;
  border-right: 2px solid var(--navy); border-bottom: 2px solid var(--navy); transform: rotate(45deg); transition: transform .15s;
}
.task-list[open] > summary::after { transform: rotate(-135deg); margin-top: -2px; }
.task-list > summary:focus-visible { outline: 3px solid var(--green); outline-offset: -3px; }
.task-list > summary h2 { margin: 0; font-size: 1.25rem; color: var(--navy); }
.task-list > summary #taskEmpty { font-weight: 700; color: var(--ink-mute); }
.task-count { background: var(--navy); color: var(--white); border-radius: 100px; padding: 2px 10px; font-size: .8rem; font-weight: 800; }
.task-count[hidden], #taskEmpty[hidden] { display: none; }
.task-list > :not(summary) { margin-left: 24px; margin-right: 24px; }
.task-list > :last-child { margin-bottom: 22px; }
.task-list .art-admin-h3:first-of-type { margin-top: 0; }
.pt-batch { margin-bottom: 10px; }
.pt-batch[hidden] { display: none; }
.pt-all { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--navy); min-height: 32px; }
.pt-all input, .pt-check { width: 18px; height: 18px; flex: 0 0 auto; }
.pt-tasks li { align-items: flex-start; }
.pt-tasks li.is-overdue { border-left: 4px solid #A13337; }
.pt-check { margin-top: 3px; }
.pt-body { flex: 1 1 260px; min-width: 0; }
.pt-title, .pt-meta { margin: 0; }
.pt-meta { color: var(--ink-soft); font-size: .86rem; }
.pt-tasks li.is-overdue .pt-due { color: #8A1F1F; font-weight: 800; }
.pt-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.pt-snoozed { margin: -8px 0 18px; }
.pt-snoozed[hidden] { display: none; }
.pt-snoozed > summary { cursor: pointer; font-weight: 800; color: var(--navy); font-size: .9rem; min-height: 32px; display: flex; align-items: center; }
.pt-snoozed .art-tasks { margin-top: 8px; }

.art-instructions { background: var(--wash-green); border: 1px solid rgba(76, 102, 5, .25); border-radius: 10px; padding: 12px 16px; margin: 0 0 16px; }
.art-instructions h3 { margin: 0 0 6px; font-size: 1rem; color: var(--navy); }
.art-instructions div { overflow-wrap: anywhere; }
.art-instructions a { color: var(--green-ink); font-weight: 700; }

.inv-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.inv-head h1 { margin: 0 0 4px; }
.inv-head .lead { margin: 0; }
.inv-status { border-radius: 100px; padding: 6px 14px; font-weight: 900; font-size: .9rem; border: 1px solid var(--line-strong); background: var(--white); color: var(--navy); }
.inv-status.is-paid { background: var(--wash-green); color: #3F5200; border-color: rgba(76, 102, 5, .35); }
.inv-status.is-pending { background: #FFF4E0; color: #7A4F0F; border-color: #E8C98E; }
.inv-status.is-overdue, .inv-status.is-cancelled { background: #FBEAEA; color: #8A1F1F; border-color: #E5B4B4; }
.inv-wrap > .form-status { margin: 0 0 16px; }
.inv-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.inv-summary, .inv-pay { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; }
.inv-summary > summary { list-style: none; cursor: pointer; display: flex; flex-direction: column; gap: 2px; min-height: 44px; margin-bottom: 8px; }
.inv-summary > summary::-webkit-details-marker { display: none; }
.inv-money { margin: 0; font-size: .95rem; }
.inv-money > div { display: flex; justify-content: space-between; gap: 14px; padding: 6px 0; border-bottom: 1px dashed var(--line); }
.inv-money dt { color: var(--ink-soft); min-width: 0; }
.inv-money dd { margin: 0; font-weight: 800; color: var(--navy); white-space: nowrap; font-variant-numeric: tabular-nums; }
.inv-money .is-total { border-top: 2px solid var(--navy); border-bottom: 0; }
.inv-money .is-total dt, .inv-money .is-balance dt { font-weight: 900; color: var(--navy); }
.inv-money .is-balance dd { font-size: 1.15rem; }
.inv-money .is-paid dd { color: #3F5200; }
.inv-money .is-overdue dd { color: #8A1F1F; }
.inv-pay { border-left: 4px solid var(--green); }
.inv-pay h2 { margin: 0 0 12px; font-size: 1.2rem; color: var(--navy); }
.inv-choices { display: grid; gap: 10px; margin-bottom: 14px; }
.inv-choice { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 10px; text-align: left; width: 100%; min-height: 54px; }
.inv-amt { font-size: 1.1rem; font-weight: 900; }
.inv-card { flex-basis: 100%; font-size: .82rem; font-weight: 700; opacity: .85; }
.inv-custom label { display: block; font-weight: 800; color: var(--navy); font-size: .92rem; margin-bottom: 6px; }
.inv-custom-row { display: flex; gap: 8px; flex-wrap: wrap; }
.inv-custom-row input { flex: 1 1 140px; min-width: 0; font: inherit; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 9px; min-height: 44px; }
.inv-paid { border-left-color: #3F5200; }
.inv-receipt, .inv-profile { margin-top: 20px; }
.inv-gate .btn-row { margin: 18px 0 10px; }
@media (max-width: 1000px) {
  .ord-col-paid { display: none; }
}
@media (max-width: 820px) {
  .inv-grid { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .ord-col-total { display: none; }
  .ord-comm-what { min-width: 0; flex-basis: 100%; }
  .task-list > summary { padding: 14px 48px 14px 16px; }
  .task-list > summary::after { right: 18px; }
  .task-list > :not(summary) { margin-left: 16px; margin-right: 16px; }
  .inv-summary, .inv-pay { padding: 16px; }
}
@media (max-width: 680px) {
  /* The invoice page on a phone: the booking and both ways to pay fit the first screen. */
  .inv-hero { padding-top: 18px; padding-bottom: 16px; }
  .inv-hero .eyebrow { margin-bottom: 4px; }
  .inv-head { gap: 6px 12px; align-items: center; }
  .inv-head h1 { font-size: 1.6rem; margin: 0; }
  .inv-head .lead { font-size: .92rem; line-height: 1.4; }
  .inv-status { padding: 3px 10px; font-size: .8rem; }
  .inv-body { padding-top: 14px; }
  .inv-grid { gap: 12px; }
  .inv-summary { padding: 12px 14px; }
  .inv-summary > summary { min-height: 0; margin-bottom: 4px; }
  .inv-money { font-size: .88rem; }
  .inv-money > div { padding: 3px 0; }
  .inv-money .is-balance dd { font-size: 1.05rem; }
  .inv-pay { padding: 12px 14px; }
  .inv-pay h2 { font-size: 1.05rem; margin-bottom: 8px; }
  .inv-choices { gap: 8px; }
  .inv-choice { min-height: 48px; padding-top: 8px; padding-bottom: 8px; }
}
@media (max-width: 680px) {
  .inv-head { position: relative; display: block; }
  .inv-head .eyebrow { padding-right: 110px; }
  .inv-status { position: absolute; top: 0; right: 0; }
  .inv-summary .profile-edit-hint { display: none; }
  /* Deposit and in full side by side, so both are on the first screen. */
  .inv-choices { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
  .inv-choice { flex-direction: column; flex-wrap: nowrap; align-items: flex-start; justify-content: center; gap: 0; padding-left: 12px; padding-right: 12px; }
  .inv-choice .inv-amt { font-size: 1.05rem; }
  .inv-choice .inv-card { font-size: .76rem; flex-basis: auto; }
}
#adminRenderError[hidden] { display: none; }

/* ---------- Update 14: Orders layout ----------
   The table sits in an overflow box, which clipped the Actions menu. The menu
   now floats above the page (position: fixed, placed by app.js beside its
   button, opening upward when there is no room below). The Orders box fits
   its rows and only scrolls inside once the list is taller than the cap. */
.act-list {
  position: fixed; top: 0; left: 0; right: auto; z-index: 1000;
  overflow-y: auto; visibility: hidden;
}
.act-list.is-placed { visibility: visible; }
.ord-scroll { max-height: min(78vh, 1100px); overflow: auto; overscroll-behavior: auto; }
.ord-scroll thead th { position: sticky; top: 0; z-index: 2; }
/* On phones the whole page scrolls instead: a box nearly the height of the
   screen inside a scrolling page is what feels like being trapped. */
@media (max-width: 700px) {
  .ord-scroll { max-height: none; overflow-y: visible; }
}