/* A1 Grand Strand Mobile Mechanic
   Palette 2026-11-06, Clemson colors. Orange #F56600 and Regalia #522D80 on a
   light base. Colors only, no university marks. White text fails on the orange,
   so orange fills carry deep ink and orange as text uses the darker --ember-ink. */

:root {
  --ground:      #FFFFFF;
  --panel:       #FFFFFF;
  --panel-2:     #F7F3FB;
  --line:        #DDD4E8;
  --line-soft:   #EAE4F1;

  --ink-900:     #1E1430;
  --ink-700:     #40364F;
  --ink-500:     #5B5169;
  --ink-400:     #675D75;

  --ember:       #F56600;
  --ember-ink:   #B84A00;
  --ember-rgb:   245, 102, 0;
  --gold:        #522D80;
  --gold-rgb:    82, 45, 128;
  --regalia:     #522D80;
  --regalia-deep:#2E1A47;
  --on-ember:    #1E1430;

  --wrap: 1180px;
  --gut: 24px;

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font);

  --r: 16px;
  --r-sm: 10px;
  --shadow: 0 1px 2px rgba(46,26,71,.06), 0 12px 32px -16px rgba(46,26,71,.22);
}

/* ── Reset (R1, R2, R3) ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

/* R1. The UA sheet gives figure and blockquote margin 1em 40px, so any
   semantic card is 80px narrower than its grid track. */
figure, blockquote, dl, dd, h1, h2, h3, h4, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }

/* R2. The hidden attribute only carries display:none from the UA sheet, so
   any display rule beats it. */
[hidden] { display: none !important; }

/* R3. Without height:auto a width/height attribute pair renders as a literal
   pixel size and distorts the photo. */
img, svg, video { max-width: 100%; height: auto; display: block; }

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink-700);
  /* Body type starts at 1.14rem. Do not quietly design down from it. */
  font: 400 1.14rem/1.65 var(--font);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  color: var(--ink-900);
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.35rem, 6.2vw, 4.1rem); letter-spacing: -0.035em; }
h2 { font-size: clamp(1.75rem, 3.6vw, 2.6rem); letter-spacing: -0.028em; }
h3 { font-size: clamp(1.22rem, 2vw, 1.45rem); }
h4 { font-size: 1.08rem; }

p { text-wrap: pretty; }
p + p { margin-top: 1.05em; }

a { color: var(--ember-ink); }
main p a { text-decoration: underline; text-underline-offset: 3px; }

strong, b { color: var(--ink-900); font-weight: 650; }

/* R10. Visible focus ring everywhere, no exceptions. */
:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

/* R10. Reduced motion. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Layout ─────────────────────────────────────────────────────────── */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
}
.band { padding-block: clamp(56px, 8vw, 104px); }
.band--tight { padding-block: clamp(40px, 5vw, 64px); }

/* A light band inverts the whole ink ramp rather than recolouring selectors.
   Anything dropped inside it inherits the fix, which is the only version of
   this that holds when the next component arrives. */
.band--light {
  --ground:    #F7F5F2;
  --panel:     #FFFFFF;
  --panel-2:   #F1EEE9;
  --line:      #DED8D0;
  --line-soft: #E9E4DC;
  --ink-900:   #14161B;
  --ink-700:   #3D434F;
  --ink-500:   #5E6673;
  --ink-400:   #767E8C;
  --ember-ink: #C0430F;
  background: var(--ground);
  color: var(--ink-700);
}

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--ember); color: var(--on-ember);
  padding: 12px 18px; z-index: 200; font-weight: 650;
}
.skip:focus { left: 8px; top: 8px; }

/* ── Header ─────────────────────────────────────────────────────────── */
.hdr {
  position: sticky; top: 0; z-index: 90;
  background: rgba(15, 17, 21, 0.88);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-soft);
}
.hdr__in {
  display: flex; align-items: center; gap: 20px;
  min-height: 70px;
}
.brand {
  display: flex; align-items: center; gap: 11px;
  text-decoration: none; color: var(--ink-900);
  font-weight: 750; letter-spacing: -0.03em; font-size: 1.06rem;
  /* R8. A future link overflows in plain sight instead of overlapping. */
  flex-shrink: 0;
}
.brand__mark {
  width: 36px; height: 36px; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--ember); color: var(--on-ember);
  border-radius: 9px;
  font-weight: 800; font-size: 0.92rem; letter-spacing: -0.04em;
}
.brand__txt { display: flex; flex-direction: column; line-height: 1.12; }
.brand__txt small {
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--ember-ink);
}
.nav { display: flex; align-items: center; gap: 4px; margin-left: auto; flex-shrink: 0; }
.nav a {
  color: var(--ink-700); text-decoration: none;
  padding: 9px 12px; border-radius: 8px;
  font-size: 0.97rem; font-weight: 550;
}
.nav a:hover { color: var(--ink-900); background: var(--panel-2); }
.nav a[aria-current="page"] { color: var(--ink-900); }

/* ── Buttons ────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px 22px; border-radius: 10px;
  font: 650 1.02rem/1 var(--font);
  text-decoration: none; border: 1px solid transparent;
  cursor: pointer; white-space: nowrap;
  transition: transform .12s ease, background .16s ease, border-color .16s ease;
}
.btn:active { transform: translateY(1px); }

/* R5. Restate the foreground ON the button, after the region rules, or
   .nav a wins on specificity and paints body ink on the brand color. */
.btn--primary,
.nav .btn--primary,
.hdr .btn--primary,
.foot .btn--primary { background: var(--ember); color: var(--on-ember); border-color: var(--ember); }
/* Same restatement on hover: .nav a:hover and .foot a:hover outrank
   .btn--primary:hover and would paint ember text on the ember fill. */
.btn--primary:hover,
.nav .btn--primary:hover,
.hdr .btn--primary:hover,
.foot .btn--primary:hover { background: var(--ember-ink); color: var(--on-ember); border-color: var(--ember-ink); }

.btn--ghost,
.nav .btn--ghost,
.hdr .btn--ghost { background: transparent; color: var(--ink-900); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--ink-500); background: var(--panel-2); }

.btn--big { padding: 17px 28px; font-size: 1.1rem; }

/* ── Hero ───────────────────────────────────────────────────────────── */
.hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line-soft); }
.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .30; }
.hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(90% 70% at 18% 0%, rgba(var(--ember-rgb), .20), transparent 62%),
    linear-gradient(180deg, rgba(15,17,21,.72) 0%, rgba(15,17,21,.90) 58%, var(--ground) 100%);
}
.hero__in { position: relative; z-index: 1; padding-block: clamp(62px, 10vw, 128px); }
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 20px;
}
.hero__eyebrow::before {
  content: ""; width: 26px; height: 2px; background: var(--ember); flex-shrink: 0;
}
.hero h1 { max-width: 15ch; }
.hero__sub {
  margin-top: 22px; max-width: 54ch;
  font-size: clamp(1.15rem, 2.1vw, 1.36rem); color: var(--ink-700);
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 34px; }
.hero__note {
  margin-top: 20px; font-size: .97rem; color: var(--ink-500);
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
}
.dot {
  width: 8px; height: 8px; border-radius: 50%; background: #35C759; flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(53, 199, 89, .18);
}

/* ── Stat strip. It lives inside a .wrap. A bare grid runs to the edge of
      a 1920px browser and nothing on the page lines up with it. ───────── */
.counts {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--line-soft);
  border: 1px solid var(--line-soft); border-radius: var(--r); overflow: hidden;
}
.counts > div { background: var(--panel); padding: 22px 20px; }
.counts dt {
  font-size: .76rem; font-weight: 650; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-500); margin-bottom: 7px;
}
.counts dd { margin: 0; font-size: 1.28rem; font-weight: 700; color: var(--ink-900); line-height: 1.25; }
.counts dd small { display: block; font-size: .92rem; font-weight: 450; color: var(--ink-500); margin-top: 3px; }

/* ── Section furniture ──────────────────────────────────────────────── */
.eyebrow {
  font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ember-ink); margin-bottom: 13px;
}
.lede { font-size: clamp(1.12rem, 1.8vw, 1.26rem); color: var(--ink-700); max-width: 62ch; margin-top: 16px; }
.sec-head { max-width: 60ch; margin-bottom: 40px; }

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

.card {
  background: var(--panel); border: 1px solid var(--line-soft);
  border-radius: var(--r); padding: 26px;
  display: flex; flex-direction: column; gap: 11px;
  text-decoration: none; color: inherit;
  transition: border-color .16s ease, background .16s ease;
}
a.card:hover { border-color: rgba(var(--ember-rgb), .55); background: var(--panel-2); }
.card h3 { font-size: 1.16rem; }
.card p { font-size: 1rem; color: var(--ink-500); }
.card__more {
  margin-top: auto; padding-top: 6px;
  font-size: .95rem; font-weight: 650; color: var(--ember-ink);
}

/* ── Triage picker ──────────────────────────────────────────────────── */
.triage { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.triage a {
  display: flex; flex-direction: column; gap: 6px;
  background: var(--panel); border: 1px solid var(--line-soft);
  border-left: 3px solid var(--ember);
  border-radius: var(--r-sm); padding: 18px 18px;
  text-decoration: none; color: var(--ink-900); font-weight: 600;
}
.triage a:hover { background: var(--panel-2); border-left-color: var(--gold); }
.triage span { font-size: .93rem; font-weight: 400; color: var(--ink-500); }

/* ── At a glance box (bite, snack, meal) ────────────────────────────── */
.bite {
  font-size: clamp(1.18rem, 2.2vw, 1.42rem); line-height: 1.5;
  color: var(--ink-900); max-width: 60ch;
}
.glance {
  margin-top: 28px; border: 1px solid var(--line);
  border-radius: var(--r); background: var(--panel); overflow: hidden;
}
.glance h2 {
  font-size: .8rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
  color: var(--ink-500); padding: 15px 22px; border-bottom: 1px solid var(--line-soft);
  background: var(--panel-2); margin: 0;
}
.glance ul { padding: 8px 0; }
.glance li {
  display: grid; grid-template-columns: 170px 1fr; gap: 18px;
  padding: 11px 22px; font-size: 1.01rem;
}
.glance li b {
  color: var(--ink-500); font-weight: 600; font-size: .86rem;
  letter-spacing: .05em; text-transform: uppercase; padding-top: 3px;
}

/* ── Prose ──────────────────────────────────────────────────────────── */
.prose { max-width: 68ch; }
.prose h2 { margin-top: 2.2em; }
.prose h3 { margin-top: 1.7em; }
.prose > * + * { margin-top: 1.05em; }
.prose ul { margin-top: 1em; display: grid; gap: 10px; }
.prose ul li { padding-left: 26px; position: relative; }
.prose ul li::before {
  content: ""; position: absolute; left: 3px; top: .62em;
  width: 7px; height: 7px; border-radius: 2px; background: var(--ember);
}

/* ── Covers list ────────────────────────────────────────────────────── */
.covers { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.covers li {
  font-size: .93rem; padding: 7px 13px; border-radius: 99px;
  background: var(--panel-2); border: 1px solid var(--line-soft); color: var(--ink-700);
}

/* ── Gallery ────────────────────────────────────────────────────────── */
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.gallery figure {
  border-radius: var(--r-sm); overflow: hidden; background: var(--panel-2);
  border: 1px solid var(--line-soft);
  aspect-ratio: 4 / 3;
}
.gallery img { width: 100%; height: 100%; object-fit: cover; }

.shot { border-radius: var(--r); overflow: hidden; border: 1px solid var(--line-soft); }

/* ── FAQ ────────────────────────────────────────────────────────────── */
.faq { border-top: 1px solid var(--line-soft); }
.faq details { border-bottom: 1px solid var(--line-soft); }
.faq summary {
  cursor: pointer; list-style: none; padding: 20px 44px 20px 0; position: relative;
  font-weight: 620; font-size: 1.08rem; color: var(--ink-900);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 8px; top: 17px;
  font-size: 1.5rem; font-weight: 400; color: var(--ember-ink); line-height: 1;
}
.faq details[open] summary::after { content: "\2212"; }
.faq details > p { padding: 0 44px 22px 0; color: var(--ink-700); max-width: 72ch; }

/* ── Hours ──────────────────────────────────────────────────────────── */
.hours { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.hours div {
  display: flex; justify-content: space-between; gap: 20px;
  padding: 12px 20px; font-size: 1rem;
  border-bottom: 1px solid var(--line-soft);
}
.hours div:last-child { border-bottom: 0; }
.hours dt { color: var(--ink-500); }
.hours dd { margin: 0; color: var(--ink-900); font-weight: 600; }

/* ── Form ───────────────────────────────────────────────────────────── */
.form { display: grid; gap: 16px; }
.field { display: grid; gap: 7px; }
.field label { font-size: .95rem; font-weight: 620; color: var(--ink-900); }
.field label .req { color: var(--ember-ink); }
.field input, .field textarea, .field select {
  width: 100%; padding: 13px 15px;
  background: var(--panel-2); color: var(--ink-900);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  font: 400 1.04rem/1.45 var(--font);
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--ember); outline: none;
  box-shadow: 0 0 0 3px rgba(var(--ember-rgb), .22);
}
.field__hint { font-size: .9rem; color: var(--ink-500); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.hp { position: absolute; left: -9999px; }

/* ── Callout ────────────────────────────────────────────────────────── */
.callout {
  border: 1px solid rgba(var(--ember-rgb), .4);
  background: linear-gradient(180deg, rgba(var(--ember-rgb), .10), rgba(var(--ember-rgb), .03));
  border-radius: var(--r); padding: 28px;
}
.callout h3 { margin-bottom: 8px; }

/* ── Footer ─────────────────────────────────────────────────────────── */
.foot {
  border-top: 1px solid var(--line-soft); background: #0B0D11;
  padding-block: 56px 34px; margin-top: 0;
}
.foot__cols { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 34px; }
.foot h4 {
  font-size: .78rem; letter-spacing: .11em; text-transform: uppercase;
  color: var(--ink-500); margin-bottom: 14px; font-weight: 650;
}
.foot ul { display: grid; gap: 9px; }
.foot a { color: var(--ink-700); text-decoration: none; font-size: 1rem; }
.foot a:hover { color: var(--ember-ink); }
.foot__bar {
  margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--line-soft);
  display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  font-size: .93rem; color: var(--ink-400);
}

/* ── Fixed call bar under 1040px (D8) ───────────────────────────────── */
.callbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
  display: none; gap: 10px; padding: 11px 14px calc(11px + env(safe-area-inset-bottom));
  background: rgba(15, 17, 21, .96);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
}
.callbar .btn { flex: 1; padding: 15px 14px; }
@media (max-width: 1040px) {
  .callbar { display: flex; }
  body { padding-bottom: 82px; }
}

/* ── Responsive. R7: the tiers cover every width with no gap. ───────── */
@media (max-width: 1040px) {
  .grid--4, .triage, .gallery { grid-template-columns: repeat(2, 1fr); }
  .counts { grid-template-columns: repeat(2, 1fr); }
  .foot__cols { grid-template-columns: 1fr 1fr; }
  .nav a:not(.btn) { display: none; }
}
@media (max-width: 760px) {
  :root { --gut: 18px; }
  .grid--3, .grid--2 { grid-template-columns: 1fr; }
  .glance li { grid-template-columns: 1fr; gap: 4px; }
  .form__row { grid-template-columns: 1fr; }
  .hdr__in { min-height: 62px; }
  .brand { font-size: .98rem; }
}
@media (max-width: 460px) {
  .counts { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: 1fr 1fr; }
  .triage { grid-template-columns: 1fr; }
  .hero__cta .btn { width: 100%; }
}

/* ── Signature features (2026-10-06) ───────────────────────────────────
   Picked from the signature-features skill. This site: cross-document
   view transitions plus speculation rules, an invoker-command booking
   dialog with @starting-style, and the everywhere hygiene (field-sizing,
   text-box, balance). Neighbors in the mobile mechanic trade use other
   sets; do not copy this block onto them. */

/* Cross-document view transitions. Chrome and Safari morph the header and
   call bar between pages, Firefox gets the plain navigation. */
@view-transition { navigation: auto; }
.hdr { view-transition-name: site-header; }
.callbar { view-transition-name: call-bar; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* The booking sheet. */
[hidden] { display: none !important; }
.book {
  inset: 0; margin: auto; width: min(560px, calc(100% - 32px));
  max-height: calc(100dvh - 32px); overflow: auto;
  padding: 0; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--panel); color: var(--ink-900);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .8);
}
.book form { display: grid; gap: 16px; padding: 28px; }
.book__head { display: flex; justify-content: space-between; align-items: start; gap: 16px; }
.book__head h2 { font-size: clamp(1.4rem, 3vw, 1.8rem); }
.book__x {
  flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--panel-2); color: var(--ink-700); font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.book__x:hover { color: var(--ink-900); border-color: var(--ink-500); }
.book__foot { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.book::backdrop { background: rgba(8, 9, 12, .62); backdrop-filter: blur(4px); }
.book {
  opacity: 0; translate: 0 18px;
  transition: opacity .22s ease, translate .22s ease, display .22s allow-discrete, overlay .22s allow-discrete;
}
.book[open] { opacity: 1; translate: 0; }
@starting-style { .book[open] { opacity: 0; translate: 0 18px; } }
.book::backdrop { opacity: 0; transition: opacity .22s ease, display .22s allow-discrete, overlay .22s allow-discrete; }
.book[open]::backdrop { opacity: 1; }
@starting-style { .book[open]::backdrop { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .book, .book::backdrop { transition: none; }
}

/* Everywhere hygiene. */
textarea { field-sizing: content; min-block-size: 3lh; max-block-size: 12lh; }
h1, h2, h3 { text-wrap: balance; }
.btn, .covers li { text-box: trim-both cap alphabetic; }

/* ═══ 2026-11-06 redesign, Clemson colors, high polish ═══════════════════ */
h1 { letter-spacing: -0.02em; font-weight: 700; }
h2, h3, h4 { letter-spacing: -0.015em; }
h2 { font-size: clamp(1.9rem, 3.8vw, 2.9rem); }
.eyebrow { font-size: .95rem; letter-spacing: 0; text-transform: none; font-weight: 650; }
.eyebrow::before { content: ""; display: inline-block; width: 22px; height: 3px; border-radius: 2px; background: var(--ember); vertical-align: middle; margin-right: 10px; }
.band--light { --ground: #F7F3FB; --panel: #fff; --panel-2: #FFF6EF; --line: #DDD4E8; --line-soft: #E6DEEF; --ink-900: #1E1430; --ink-700: #40364F; --ink-500: #5B5169; --ink-400: #675D75; --ember-ink: #B84A00; }

/* Header. Solid white, nav never sits on a photo. */
.hdr { background: #fff; backdrop-filter: none; border-bottom: 0; box-shadow: 0 1px 0 var(--line-soft), 0 8px 24px -18px rgba(46,26,71,.35); }
.hdr::after { content: ""; display: block; height: 3px; background: linear-gradient(90deg, var(--ember) 0 62%, var(--regalia) 62%); }
.brand__mark { background: var(--regalia); color: #fff; border-radius: 10px; }
.brand__txt small { font-size: .78rem; letter-spacing: 0; text-transform: none; color: var(--ember-ink); }
.nav a { font-weight: 600; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--regalia); background: var(--panel-2); }

/* Buttons */
.btn { border-radius: 12px; font-weight: 700; box-shadow: 0 1px 0 rgba(46,26,71,.08); transition: transform .14s ease, background .16s ease, color .16s ease, box-shadow .16s ease, border-color .16s ease; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 10px 22px -12px rgba(46,26,71,.5); }
.btn--primary:hover, .nav .btn--primary:hover, .hdr .btn--primary:hover, .foot .btn--primary:hover { background: #FF7A1A; border-color: #FF7A1A; color: var(--on-ember); }
.btn--ghost, .nav .btn--ghost, .hdr .btn--ghost { color: var(--regalia); border-color: var(--regalia); background: #fff; }
.btn--ghost:hover { background: var(--panel-2); border-color: var(--regalia); }
.btn--white { background: #fff; color: var(--regalia); border-color: #fff; }
.btn--white:hover { background: #F7F3FB; color: var(--regalia); }
.btn--regalia { background: var(--regalia); color: #fff; border-color: var(--regalia); }
.btn--regalia:hover { background: var(--regalia-deep); border-color: var(--regalia-deep); color: #fff; }
.btn--ink { background: var(--on-ember); color: #fff; border-color: var(--on-ember); }
.btn--ink:hover { background: #000; color: #fff; }
:focus-visible { outline-color: var(--regalia); }

/* Hero. Full bleed loop from his own photos, Regalia scrim on the left. */
.hero { position: relative; overflow: hidden; isolation: isolate; border: 0; background: var(--regalia-deep); display: flex; flex-direction: column; min-height: min(calc(100vh - 73px), 780px); }
.hero__vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.hero__scrim { position: absolute; inset: 0; z-index: -1; background:
  linear-gradient(90deg, rgba(46,26,71,.97) 0%, rgba(62,32,98,.93) 30%, rgba(82,45,128,.55) 52%, rgba(82,45,128,.06) 72%, transparent 100%),
  linear-gradient(0deg, rgba(46,26,71,.72) 0%, transparent 34%); }
.hero__in { padding-block: clamp(56px, 7vw, 92px) 28px; flex: 1; display: flex; flex-direction: column; justify-content: center; }
.hero h1 { color: #fff; max-width: 13ch; font-size: clamp(2.7rem, 5.8vw, 4.9rem); line-height: 1.03; }
.hero__sub { color: #F4EEFA; max-width: 46ch; margin-top: 22px; font-size: clamp(1.14rem, 1.6vw, 1.32rem); line-height: 1.5; }
.hero__cta { margin-top: 30px; }
.hero__note { color: #fff; font-weight: 600; font-size: 1.02rem; margin-top: 22px; }
.dot { background: #4ADE80; box-shadow: 0 0 0 0 rgba(74,222,128,.6); }
@media (prefers-reduced-motion: no-preference) { .dot { animation: pulse 2.4s ease-out infinite; } }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(74,222,128,.6); } 70%, 100% { box-shadow: 0 0 0 10px rgba(74,222,128,0); } }
.hero__foot { padding-bottom: 26px; }

/* The route strip. A truck runs the coast and each town lights as it passes.
   Line, stops and names are the base state, so a frozen frame is still whole. */
.route { position: relative; background: rgba(255,255,255,.94); border-radius: 16px; padding: 18px 10px 14px; box-shadow: 0 24px 50px -24px rgba(20,8,40,.75); }
@supports (backdrop-filter: blur(1px)) { .route { background: rgba(255,255,255,.86); backdrop-filter: blur(14px) saturate(1.3); } }
.route ol { position: relative; display: grid; grid-template-columns: repeat(7, 1fr); }
.route ol::before { content: ""; position: absolute; top: 6px; left: calc(100% / 14); right: calc(100% / 14); height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--regalia), var(--ember)); }
.route li { text-align: center; position: relative; }
.route a { display: block; padding: 22px 4px 2px; min-height: 44px; font-size: .93rem; line-height: 1.2; font-weight: 650; color: var(--ink-900); text-decoration: none; }
.route a:hover { color: var(--ember-ink); }
.route a::before { content: ""; position: absolute; top: 1px; left: 50%; width: 13px; height: 13px; margin-left: -6.5px; border-radius: 50%; background: #fff; border: 3px solid var(--regalia); }
.route__truck { display: none; }
@media (prefers-reduced-motion: no-preference) and (min-width: 761px) {
  .route__truck { display: block; position: absolute; z-index: 2; top: 18px; width: 21px; height: 21px; margin: -1px 0 0 -10.5px; border-radius: 50%; background: var(--ember); border: 3px solid #fff; box-shadow: 0 2px 10px rgba(46,26,71,.5); animation: roll 21s linear infinite; }
  .route a { animation: lit 21s linear infinite; animation-delay: calc(var(--i) * 3s - .6s); }
}
@keyframes roll {
  0% { left: 7%; opacity: 0; } 2% { opacity: 1; } 98% { opacity: 1; } 100% { left: 93%; opacity: 0; }
}
@keyframes lit { 0%, 12%, 100% { color: var(--ink-900); } 2%, 9% { color: var(--ember-ink); } }

/* Promises */
.promises { background: #fff; border-bottom: 1px solid var(--line-soft); }
.promises ul { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px 26px; padding-block: 30px; }
.promises li { display: grid; grid-template-columns: 48px 1fr; column-gap: 14px; align-items: center; }
.promises svg { grid-row: span 2; width: 48px; height: 48px; padding: 11px; border-radius: 14px; background: var(--regalia); fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.promises b { font-size: 1.12rem; font-weight: 700; line-height: 1.2; align-self: end; }
.promises span { font-size: .96rem; color: var(--ink-500); line-height: 1.3; align-self: start; }

/* Problem cards */
.triage { gap: 16px; counter-reset: t; }
.triage li { counter-increment: t; display: flex; }
.triage a { flex: 1; position: relative; overflow: hidden; border: 1px solid var(--line); border-left: 1px solid var(--line); border-radius: var(--r); padding: 24px 22px 22px; gap: 10px; background: #fff; box-shadow: var(--shadow); transition: transform .18s ease, background .2s ease, border-color .2s ease; }
.triage a::before { content: "0" counter(t); font-size: 1rem; font-weight: 750; color: var(--ember-ink); }
.triage b { font-size: 1.3rem; line-height: 1.16; font-weight: 700; color: var(--ink-900); transition: color .2s ease; }
.triage span { font-size: 1rem; color: var(--ink-500); transition: color .2s ease; }
.triage em { margin-top: auto; padding-top: 8px; font-style: normal; font-weight: 700; color: var(--regalia); transition: color .2s ease; }
.triage em::after { content: " \2192"; }
.triage a:hover { background: var(--regalia); border-color: var(--regalia); transform: translateY(-3px); }
.triage a:hover b, .triage a:hover span { color: #fff; }
.triage a:hover em, .triage a:hover::before { color: #FFB27A; }

/* Split rows */
.split { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.split--flip { grid-template-columns: 1.05fr 1fr; }
.split__pic { aspect-ratio: 5 / 4; overflow: hidden; }
.split__pic img { width: 100%; height: 100%; object-fit: cover; }
.cut { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 44px), calc(100% - 44px) 100%, 0 100%); border-radius: 18px 18px 0 18px; }
.whys { margin-top: 26px; display: grid; gap: 20px; }
.whys li { padding-left: 20px; border-left: 3px solid var(--ember); }
.whys p { font-size: 1.04rem; margin-top: 5px; }

/* The one bold band. His orange and purple chopper lives here. */
.feature { background: var(--regalia); color: #F4EEFA; padding-block: clamp(56px, 7vw, 96px); --ink-900: #fff; --ink-700: #F4EEFA; --ember-ink: #FFB27A; }
.feature .lede { color: #F4EEFA; }
.feature .eyebrow { color: #FFB27A; }
.feature__cta { margin-top: 28px; display: flex; gap: 12px; flex-wrap: wrap; }
.feature .split__pic { box-shadow: 0 30px 60px -30px rgba(0,0,0,.6); }

/* Cards */
.card { border-color: var(--line); border-radius: var(--r); box-shadow: var(--shadow); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
a.card:hover { transform: translateY(-3px); background: #fff; border-color: var(--ember); box-shadow: 0 20px 40px -22px rgba(46,26,71,.45); }
.card p { color: var(--ink-500); }
.card__more::after { content: " \2192"; }
.card--pic { padding: 0 0 22px; overflow: hidden; }
.card--pic > :not(.card__img) { margin-inline: 20px; }
.card__img { aspect-ratio: 16 / 11; overflow: hidden; background: var(--panel-2); margin-bottom: 6px; }
.card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
a.card:hover .card__img img { transform: scale(1.05); }

/* Gallery */
.gallery { gap: 14px; grid-auto-flow: dense; }
.gallery figure { border: 0; border-radius: 14px; box-shadow: var(--shadow); aspect-ratio: 1 / 1; }
.gallery figure:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.gallery img { transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.gallery figure:hover img { transform: scale(1.04); }

/* Towns */
.towns { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; }
.town { display: block; padding: 18px 20px; border-radius: 14px; background: var(--panel-2); text-decoration: none; color: inherit; border: 1px solid transparent; transition: border-color .16s ease, background .16s ease; }
.town:hover { background: #fff; border-color: var(--ember); }
.town h3 { font-size: 1.14rem; color: var(--regalia); }
.town p { font-size: .98rem; color: var(--ink-500); margin-top: 3px; }

/* Final call to action, solid orange with ink type */
.callout { background: var(--ember); border: 0; border-radius: 22px; padding: clamp(30px, 5vw, 56px); color: var(--on-ember); --ink-900: var(--on-ember); position: relative; overflow: hidden; }
.callout h3 { font-size: clamp(1.8rem, 3.6vw, 2.7rem); line-height: 1.08; }
.callout p { color: var(--on-ember); font-size: 1.14rem; }

/* Inner page heads */
.phead { background: linear-gradient(135deg, #F7F3FB 0%, #FFF4EB 100%); padding-block: clamp(44px, 6vw, 80px); }
.phead__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(28px, 5vw, 60px); align-items: center; }
.phead__pic { aspect-ratio: 4 / 3; overflow: hidden; }
.phead__pic img { width: 100%; height: 100%; object-fit: cover; }
.two { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: start; }
.shot { border: 0; box-shadow: var(--shadow); border-radius: var(--r); }
.prose ul li::before { background: var(--ember); }
.covers li { background: var(--panel-2); border-color: var(--line); }
.glance { box-shadow: var(--shadow); }
.glance h2 { font-size: 1.05rem; letter-spacing: 0; text-transform: none; color: #fff; background: var(--regalia); border: 0; }
.glance li b { font-size: 1rem; letter-spacing: 0; text-transform: none; color: var(--regalia); }
.faq summary:hover { color: var(--regalia); }
.field input, .field textarea, .field select { background: #fff; }
.book { box-shadow: 0 30px 80px -30px rgba(46,26,71,.6); }
.book::backdrop { background: rgba(46,26,71,.55); }

/* Footer, deep Regalia */
.foot { background: var(--regalia-deep); border: 0; color: #E7DFF2; --ink-900: #fff; --ink-700: #E7DFF2; --ink-500: #D5C9E6; --ink-400: #D5C9E6; --ember-ink: #FFB27A; --line-soft: #4A3468; }
.foot h4 { font-size: 1rem; letter-spacing: 0; text-transform: none; color: #fff; }
.foot__bar a { color: #fff; }

/* Phone call bar */
.callbar { background: #fff; backdrop-filter: none; border-top: 1px solid var(--line); box-shadow: 0 -10px 24px -18px rgba(46,26,71,.5); }

/* Soft rise on scroll where the browser can run it. Never hides content. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .card, .triage li, .gallery figure, .split > *, .town, .whys li { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 42%; }
    @keyframes rise { from { opacity: .35; translate: 0 22px; } to { opacity: 1; translate: 0 0; } }
  }
}

@media (max-width: 1040px) {
  .promises ul { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .route a { font-size: .9rem; }
}
@media (max-width: 860px) {
  .split, .split--flip, .phead__grid, .two { grid-template-columns: 1fr; }
  .split--flip .split__pic { order: -1; }
}
/* Phone hero. Subject on top, the video melts into Regalia, copy and buttons
   sit above the call bar, then the towns. */
@media (max-width: 760px) {
  .hero { min-height: 0; background: var(--regalia-deep); }
  .hero__vid { position: relative; inset: auto; height: 62vw; z-index: 0; }
  .hero__scrim { inset: 0 0 auto 0; height: 62vw; z-index: 1; background: linear-gradient(180deg, transparent 52%, var(--regalia-deep) 100%); }
  .hero__in { position: relative; z-index: 2; padding-block: 2px 20px; }
  .hero h1 { font-size: clamp(2.3rem, 10.5vw, 3rem); }
  .hero__sub { margin-top: 12px; font-size: 1.06rem; }
  .hero__cta { margin-top: 18px; gap: 10px; }
  .hero__cta .btn { width: 100%; padding-block: 15px; }
  .hero__note { margin-top: 14px; }
  .hero__foot { position: relative; z-index: 2; }
  .route { padding: 8px; }
  .route ol { grid-template-columns: 1fr 1fr; gap: 0 6px; }
  .route ol::before, .route a::before { display: none; }
  .route a { padding: 11px 6px; font-size: .96rem; display: flex; align-items: center; justify-content: center; min-height: 44px; }
  .route li:last-child { grid-column: span 2; }
  .gallery figure:first-child { grid-column: span 2; grid-row: span 2; }
}
@media (max-width: 460px) {
  .promises ul { grid-template-columns: 1fr 1fr; gap: 16px 12px; }
  .promises li { grid-template-columns: 1fr; row-gap: 8px; }
  .promises svg { grid-row: auto; }
}

/* Google map card in this site's colors */
.section.gmap { --surface: #fff; --paper: #fff; --paper-2: var(--panel-2); --ink: var(--regalia); --ink-soft: var(--ink-700); --ink-muted: var(--ink-500); --line-bright: var(--line); --green-ink: var(--ember-ink); --sc-green-dim: var(--regalia-deep); --sc-green-glow: rgba(82,45,128,.18); --r-lg: 18px; width: 100%; max-width: var(--wrap); margin-inline: auto; padding: 0 var(--gut) clamp(48px, 6vw, 80px); }
.towns { display: flex; flex-wrap: wrap; }
.town { flex: 1 1 250px; }

/* cf-a11y:start */
/* ============================================================
   Accessibility layer
   Managed block. Edit _shared/a11y/a11y.css and re-run
   _shared/a11y/apply_a11y.py. Do not hand edit the copies.

   Design rule: nothing in here is visible to a mouse user who
   has not asked for it. No overlay, no toolbar, no JavaScript.
   ============================================================ */

/* --- Skip link: off screen until a keyboard user focuses it --- */
.mainlink-1f9 {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 2147483000;
  display: inline-block;
  padding: .75rem 1.15rem;
  background: #10131a;
  color: #fff;
  font: 600 1rem/1.25 system-ui, -apple-system, "Segoe UI", sans-serif;
  text-decoration: underline;
  border-radius: 0 0 .4rem 0;
}
.mainlink-1f9:focus {
  left: 0;
}

/* --- Text for screen readers only --- */
.cf-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- Focus ring.
   :focus-visible means mouse and touch users never see this.
   Set --cf-focus in your own stylesheet to match the brand.
   The default #1a73e8 clears 3:1 against both white and black. --- */
:focus-visible {
  outline: 3px solid var(--cf-focus, #1a73e8) !important;
  outline-offset: 2px !important;
}
@supports not selector(:focus-visible) {
  :focus {
    outline: 3px solid var(--cf-focus, #1a73e8) !important;
    outline-offset: 2px !important;
  }
}

/* A programmatic focus target should not draw a ring. */
[tabindex="-1"]:focus {
  outline: none !important;
}

/* Focus must not be swallowed by a sticky header. */
:target,
[tabindex="-1"] {
  scroll-margin-top: 6rem;
}

/* --- Respect a stated preference for less motion --- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Windows High Contrast / forced colours --- */
@media (forced-colors: active) {
  :focus-visible {
    outline: 3px solid Highlight !important;
  }
  .mainlink-1f9 {
    background: Canvas;
    color: CanvasText;
    border: 2px solid CanvasText;
  }
}

/* --- Stronger ring for people who asked for more contrast --- */
@media (prefers-contrast: more) {
  :focus-visible {
    outline-width: 4px !important;
  }
}
/* cf-a11y:end */