/* ═══════════════════════════════════════════════════════════════════════════
   Tamsett Auto Repair — Ellery Bend, Oregon

   Built from the shop's own three pages and its own pictures. Every word on
   these pages is theirs; this file only decides how their words are SHOWN.
   No web fonts, no scripts, no outside requests: tokens, layout and
   hand-drawn SVG, so it works on one bar of signal and offline.

   The palette is lifted off their own banner: deep navy and sign yellow.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── 1. tokens ─────────────────────────────────────────────────────────── */
:root {
  color-scheme: light;

  --bg:          #f4f5f9;
  --surface:     #ffffff;
  --surface-2:   #eaedf5;
  --line:        #dce1ec;
  --line-strong: #c7cee0;

  --ink:   #10163a;       /* 16.9 : 1 on --bg */
  --ink-2: #384063;       /*  9.6 : 1 */
  --ink-3: #5a6385;       /*  5.7 : 1 */

  /* their banner: navy #15297a fading to #3742ac, lettering #ffdc28 */
  --navy:      #15297a;
  --navy-deep: #0c1747;
  --navy-2:    #26359a;
  --sun:       #ffdc28;
  --sun-hover: #ffe766;
  --on-sun:    #0c1747;   /* 12.4 : 1 on --sun */
  --brand-ink: #26359a;   /* links + accents on light, 8.4 : 1 */
  --tint:      rgba(38, 53, 154, .08);

  --panel:      #0c1747;
  --panel-2:    #13205c;
  --panel-line: rgba(255, 255, 255, .12);
  --on-panel:   #eef1fb;
  --on-panel-2: #b3bce0;  /* 8.9 : 1 on --panel */

  --focus: #26359a;

  --font: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
          Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;

  --t--1: clamp(.80rem, .77rem + .12vw, .875rem);
  --t-0:  clamp(1rem, .97rem + .16vw, 1.0625rem);
  --t-1:  clamp(1.1rem, 1.02rem + .36vw, 1.32rem);
  --t-2:  clamp(1.3rem, 1.12rem + .8vw, 1.7rem);
  --t-3:  clamp(1.65rem, 1.34rem + 1.3vw, 2.45rem);
  --t-4:  clamp(2.3rem, 1.7rem + 2.8vw, 4.1rem);

  --gap:     clamp(1rem, .7rem + 1.4vw, 1.5rem);
  --gap-lg:  clamp(1.5rem, 1rem + 2.4vw, 2.5rem);
  --section: clamp(3.25rem, 2rem + 6vw, 6rem);
  --pad:     clamp(16px, 4vw, 40px);
  --wrap:    70rem;

  --r-sm: 10px;
  --r:    16px;
  --r-lg: 22px;
  --r-xl: 28px;
  --shadow-sm: 0 1px 2px rgba(12, 23, 71, .06), 0 2px 6px rgba(12, 23, 71, .05);
  --shadow:    0 1px 2px rgba(12, 23, 71, .05), 0 12px 28px -8px rgba(12, 23, 71, .16);
  --shadow-lg: 0 2px 4px rgba(12, 23, 71, .06), 0 26px 60px -18px rgba(12, 23, 71, .38);
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg:          #080d22;
    --surface:     #111936;
    --surface-2:   #0c132d;
    --line:        #212b52;
    --line-strong: #2e3a68;

    --ink:   #eceffa;
    --ink-2: #c1c8e2;
    --ink-3: #939dc2;

    --brand-ink: #ffdc28;
    --tint:      rgba(255, 220, 40, .10);

    --panel:   #0f1840;
    --panel-2: #16215a;

    --focus: #ffdc28;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
    --shadow:    0 2px 6px rgba(0, 0, 0, .45), 0 14px 34px -10px rgba(0, 0, 0, .6);
    --shadow-lg: 0 3px 8px rgba(0, 0, 0, .5), 0 30px 70px -20px rgba(0, 0, 0, .75);
  }
}

/* ─── 2. base ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

.sprite { display: none; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--t-0);
  line-height: 1.66;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  padding-bottom: 6.75rem;           /* room for the call bar on a phone */
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3 {
  margin: 0 0 .5em;
  line-height: 1.08;
  letter-spacing: -.022em;
  font-weight: 800;
  text-wrap: balance;
}
h1 { font-size: var(--t-4); letter-spacing: -.034em; }
h2 { font-size: var(--t-3); }
h3 { font-size: var(--t-1); letter-spacing: -.015em; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--brand-ink); text-underline-offset: .18em; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.hero :focus-visible, .band-dark :focus-visible, .callout :focus-visible,
.callbar :focus-visible { outline-color: var(--sun); }

::selection { background: var(--sun); color: var(--on-sun); }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--pad);
}

section[id] { scroll-margin-top: 8rem; }

.ico { flex: 0 0 auto; }

/* ─── 3. skip link ──────────────────────────────────────────────────────── */
.skip {
  position: fixed;
  left: 12px;
  top: -100px;
  z-index: 60;
  background: var(--ink);
  color: var(--bg);
  font-weight: 700;
  padding: 14px 20px;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  text-decoration: none;
  transition: top .15s ease;
}
.skip:focus { top: 0; }

/* ─── 4. header ─────────────────────────────────────────────────────────── */
.top {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid var(--line);
  padding-top: env(safe-area-inset-top, 0px);
}
@media (prefers-color-scheme: dark) {
  .top { background: rgba(8, 13, 34, .84); }
}

.top-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px clamp(12px, 2vw, 26px);
  padding-block: 10px 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
  min-height: 44px;
  color: var(--ink);
  text-decoration: none;
  border-radius: var(--r-sm);
}

/* their own tire, as the mark */
.brand img {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--sun), 0 0 0 4px rgba(12, 23, 71, .18);
}

.brand-name {
  display: block;
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.15;
}
.brand-place {
  display: block;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--ink-3);
  line-height: 1.3;
}

.nav {
  order: 3;
  flex: 1 0 100%;
  overflow-x: auto;
  scrollbar-width: none;
  margin-inline: calc(-1 * var(--pad));
  padding-inline: var(--pad);
  border-top: 1px solid var(--line);
}
.nav::-webkit-scrollbar { display: none; }

.nav-inner { display: flex; gap: 4px; white-space: nowrap; padding-block: 4px; }

.nav a {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 999px;
  color: var(--ink-2);
  text-decoration: none;
  font-size: .9375rem;
  font-weight: 650;
  transition: color .16s ease, background-color .16s ease;
}
.nav a:hover { color: var(--ink); background: var(--surface-2); }
.nav a[aria-current="page"] { color: var(--ink); background: var(--tint); font-weight: 750; }
.nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 6px;
  height: 3px;
  border-radius: 3px;
  background: var(--sun);
}

/* ─── 5. buttons ────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 10px 22px;
  border-radius: 999px;
  font-weight: 750;
  text-decoration: none;
  transition: background-color .16s ease, transform .16s ease, box-shadow .16s ease,
              border-color .16s ease, color .16s ease;
}

.btn-call {
  background: var(--sun);
  color: var(--on-sun);
  box-shadow: 0 1px 2px rgba(12, 23, 71, .25), 0 12px 24px -12px rgba(255, 200, 0, .75);
}
.btn-call:hover { background: var(--sun-hover); }
.btn-call:active { transform: translateY(1px); }

.btn-lines { display: block; }
.btn-small {
  display: block;
  font-size: .6875rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  opacity: .82;
  line-height: 1.5;
}
.btn-big {
  display: block;
  font-size: 1.3125rem;
  line-height: 1.2;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

.btn-ghost {
  color: var(--on-panel);
  border: 1px solid rgba(255, 255, 255, .28);
  background: rgba(255, 255, 255, .04);
}
.btn-ghost:hover { border-color: var(--sun); color: #fff; }
.btn-ghost .ico, .btn-quiet .ico { transition: transform .16s ease; }
.btn-ghost:hover .ico, .btn-quiet:hover .ico { transform: translateX(3px); }

.btn-quiet {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-sm);
}
.btn-quiet:hover { border-color: var(--brand-ink); transform: translateY(-1px); box-shadow: var(--shadow); }
.btn-quiet .ico { color: var(--brand-ink); }

/* in the header on a phone: the icon and one word; the number joins on wider screens */
.top-call { padding: 8px 16px; min-height: 44px; gap: 8px; }
.top-call .btn-big { font-size: 1rem; }
.top-call .num { display: none; }

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 1.6em 0 0;
}

/* ─── 6. hero ───────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--panel);
  color: var(--on-panel);
  padding-block: clamp(2.6rem, 7vw, 5.5rem) clamp(3rem, 8vw, 6rem);
}

/* their banner's own gradient, navy to a lighter blue, with the sign's
   yellow thrown once across the top corner */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(52rem 34rem at 88% -12%, rgba(72, 88, 210, .55), transparent 60%),
    radial-gradient(46rem 32rem at 0% 110%, rgba(55, 66, 172, .70), transparent 66%),
    linear-gradient(180deg, #15297a 0%, #0c1747 70%);
}

/* the centre line of a road, running out of the corner */
.hero::after {
  content: "";
  position: absolute;
  right: -6rem;
  bottom: 2.2rem;
  width: 34rem;
  height: 4px;
  z-index: -1;
  transform: rotate(-14deg);
  background: repeating-linear-gradient(90deg, rgba(255, 220, 40, .38) 0 44px, transparent 44px 74px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 40%);
  mask-image: linear-gradient(90deg, transparent, #000 40%);
}

.hero-inner {
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 5vw, 3.5rem);
}

.kicker {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin: 0 0 1.1rem;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sun);
}
.kicker .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: .7;
}

.hero h1 { color: #fff; margin-bottom: .3em; }

.hero .lead {
  font-size: var(--t-1);
  font-weight: 600;
  line-height: 1.42;
  max-width: 32ch;
  color: var(--on-panel);
  margin-bottom: .75em;
}
.hero .sub { color: var(--on-panel-2); max-width: 44ch; }

.hero-meta {
  list-style: none;
  margin: 1.8em 0 0;
  padding: 1.2em 0 0;
  border-top: 1px solid var(--panel-line);
  display: grid;
  gap: 6px;
  font-size: .9375rem;
  color: var(--on-panel-2);
}
.hero-meta li { display: flex; align-items: flex-start; gap: 10px; }
.hero-meta .ico { color: var(--sun); margin-top: 3px; }
.hero-meta a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--panel-line); }
.hero-meta a:hover { color: #fff; border-color: var(--sun); }

.hero-short { padding-block: clamp(2.4rem, 6vw, 4.5rem); }
.hero-short .lead { max-width: 36ch; }
.hero-short h1 { font-size: clamp(2.05rem, 1.5rem + 2.6vw, 3.5rem); max-width: 18ch; }
.hero-short .kicker { margin-bottom: 1rem; }

/* ─── 7. photographs ────────────────────────────────────────────────────── */
/* Their pictures are small files (the shop is 420 px across), so they are
   shown at a size they can hold, framed, never blown up past about 1×. */
.photo {
  position: relative;
  margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--panel-2);
  box-shadow: var(--shadow-lg);
}
.photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.photo::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
  pointer-events: none;
}
.photo figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 2.4rem 18px 14px;
  color: #fff;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  background: linear-gradient(to top, rgba(6, 10, 34, .88), rgba(6, 10, 34, .5) 45%, transparent);
}

.hero-figure { position: relative; width: 100%; max-width: 420px; align-self: start; }
.hero-figure::before {
  content: "";
  position: absolute;
  inset: -12% -10% -16% -10%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 220, 40, .22), transparent 72%);
  filter: blur(6px);
}

/* ─── 8. bands + section heads ──────────────────────────────────────────── */
.band { padding-block: var(--section); position: relative; }
.band-alt { background: var(--surface-2); border-block: 1px solid var(--line); }

/* the one repeated ornament: a short yellow road line over each heading */
.band h2::before,
.callout h2::before {
  content: "";
  display: block;
  width: 58px;
  height: 4px;
  margin-bottom: clamp(1rem, 2.4vw, 1.4rem);
  background: repeating-linear-gradient(90deg, var(--sun) 0 18px, transparent 18px 26px);
  border-radius: 2px;
}
@media (prefers-color-scheme: light) {
  .band:not(.band-dark) h2::before {
    background: repeating-linear-gradient(90deg, var(--navy-2) 0 18px, transparent 18px 26px);
  }
  .band .callout h2::before {
    background: repeating-linear-gradient(90deg, var(--sun) 0 18px, transparent 18px 26px);
  }
}

.prose { color: var(--ink-2); max-width: 38rem; }
.prose p { margin-bottom: 1.2em; }
.prose p:last-child { margin-bottom: 0; }

.intro {
  color: var(--ink-2);
  font-size: var(--t-1);
  line-height: 1.5;
  max-width: 40ch;
  margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}

/* ─── 9. the promise on the front page ──────────────────────────────────── */
.promise {
  display: grid;
  gap: var(--gap-lg);
  align-items: start;
}
.promise h2 { max-width: 14ch; margin-bottom: 0; }

.promise-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  padding: clamp(1.25rem, 4vw, 2rem);
  display: grid;
  gap: 1rem;
}
.promise-card p { margin: 0; color: var(--ink-2); font-size: var(--t-1); line-height: 1.5; }
.promise-card .first { color: var(--ink); font-weight: 700; }

.chips {
  list-style: none;
  margin: .25rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chips li {
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--tint);
  color: var(--ink);
  font-weight: 700;
  font-size: .875rem;
}

/* ─── 10. services ──────────────────────────────────────────────────────── */
.svc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr;
}
.svc-list li {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 60px;
  padding: 10px 16px 10px 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm);
  font-weight: 700;
  line-height: 1.3;
}

.svc-ico {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--navy);
  color: var(--sun);
}
.svc-ico img { width: 30px; height: 30px; border-radius: 50%; }
@media (prefers-color-scheme: dark) {
  .svc-ico { background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line-strong); }
}

/* the big version on the services page */
.svc-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.svc-grid li {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  font-weight: 750;
  font-size: .98rem;
  line-height: 1.3;
  letter-spacing: -.01em;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.svc-grid .svc-ico { width: 48px; height: 48px; border-radius: 14px; }
.svc-grid .svc-ico img { width: 36px; height: 36px; }
@media (hover: hover) {
  .svc-grid li:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--line-strong); }
}
.svc-grid .wide { grid-column: 1 / -1; flex-direction: row; align-items: center; }

.more { margin-top: clamp(1.5rem, 4vw, 2.25rem); }

/* while-you-wait + the ride */
.notes {
  display: grid;
  gap: var(--gap);
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
}
.note-card {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: clamp(1.1rem, 3.5vw, 1.6rem);
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.note-card p { margin: 0; color: var(--ink-2); font-size: var(--t-1); line-height: 1.45; }
.note-card .ico { color: var(--brand-ink); margin-top: 2px; }

/* ─── 11. callouts (winter check-up, set up a time, small shop) ─────────── */
.band-callout { padding-block: 0 var(--section); }
.band-callout.first { padding-top: var(--section); }

.callout {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--panel);
  color: var(--on-panel);
  border-radius: var(--r-xl);
  padding: clamp(1.6rem, 5vw, 3.25rem);
  box-shadow: var(--shadow-lg);
}
.callout::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(34rem 22rem at 100% 0%, rgba(72, 88, 210, .55), transparent 64%),
    radial-gradient(30rem 20rem at 0% 100%, rgba(55, 66, 172, .45), transparent 64%);
}
.callout h2 { color: #fff; max-width: 20ch; margin-bottom: .2em; }
.callout p { color: var(--on-panel-2); max-width: 44ch; }
.callout .actions { margin-top: 1.4em; }

/* a big snowflake, drawn, sitting behind the winter note */
.callout .flake {
  position: absolute;
  right: -28px;
  top: -24px;
  width: 190px;
  height: 190px;
  z-index: -1;
  color: rgba(255, 255, 255, .08);
}

.quote {
  margin: 0;
  font-size: var(--t-2);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.02em;
  color: #fff;
  max-width: 26ch;
}
.quote p { margin: 0 0 .4em; }
.quote p + p { color: var(--sun); }

/* the winter note, in their sign yellow */
.callout-sun { background: var(--sun); color: var(--on-sun); }
.callout-sun::before {
  background:
    radial-gradient(30rem 18rem at 100% 0%, rgba(255, 255, 255, .45), transparent 62%),
    repeating-linear-gradient(135deg, rgba(12, 23, 71, .035) 0 14px, transparent 14px 28px);
}
.callout-sun h2 { color: var(--on-sun); max-width: 22ch; }
.callout-sun h2::before,
.band .callout-sun h2::before {
  background: repeating-linear-gradient(90deg, var(--on-sun) 0 18px, transparent 18px 26px);
}
.callout-sun .flake { color: rgba(12, 23, 71, .10); }
.callout-sun :focus-visible { outline-color: var(--on-sun); }

.btn-navy {
  background: var(--on-sun);
  color: #fff;
  box-shadow: 0 1px 2px rgba(12, 23, 71, .3), 0 12px 24px -12px rgba(12, 23, 71, .8);
}
.btn-navy:hover { background: var(--navy); }
.btn-navy .ico { color: var(--sun); }

/* ─── 12. about: the family ─────────────────────────────────────────────── */
.founder {
  display: grid;
  gap: var(--gap-lg);
  align-items: start;
}
.founder-photo {
  margin: 0;
  width: 100%;
  max-width: 220px;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: var(--surface-2);
  position: relative;
}
.founder-photo img { width: 100%; aspect-ratio: 5 / 6; object-fit: cover; }
.founder-photo { border-bottom: 4px solid var(--sun); max-width: 180px; }

.people {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--gap);
  align-items: start;
}
.person {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: clamp(1.1rem, 3.5vw, 1.6rem);
}
.person .svc-ico { width: 52px; height: 52px; border-radius: 16px; }
.person h3 { margin-bottom: .35em; }
.person p { margin: 0; color: var(--ink-2); }
.person .person-call { margin-top: .6em; }
.person-call a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 800;
  font-size: 1.125rem;
  font-variant-numeric: tabular-nums;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--sun);
}

/* ─── 13. visit: hours, phone, address ──────────────────────────────────── */
.band-dark {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--panel);
  color: var(--on-panel);
}
.band-dark::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(44rem 28rem at 92% 0%, rgba(72, 88, 210, .45), transparent 62%),
    radial-gradient(40rem 26rem at 0% 100%, rgba(55, 66, 172, .55), transparent 62%);
}
.band-dark h2 { color: #fff; margin-bottom: clamp(1.5rem, 4vw, 2.25rem); }

.visit {
  display: grid;
  gap: var(--gap);
  grid-template-columns: 1fr;
}
.card {
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--panel-line);
  border-radius: var(--r-lg);
  padding: clamp(1.2rem, 3.5vw, 1.8rem);
}
.card h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--on-panel-2);
  margin-bottom: 1em;
  line-height: 1.5;
}
.card h3 .ico { color: var(--sun); }

.hours { list-style: none; margin: 0; padding: 0; }
.hours li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px dashed var(--panel-line);
  font-variant-numeric: tabular-nums;
}
.hours li:first-child { padding-top: 0; }
.hours li:last-child { border-bottom: 0; padding-bottom: 0; }
.hours .day { font-weight: 700; color: var(--on-panel); white-space: nowrap; }
.hours .time { color: var(--on-panel-2); text-align: right; white-space: nowrap; }
.hours .shut .time { color: var(--sun); font-weight: 700; }

.phone-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  color: var(--sun);
  font-size: clamp(1.6rem, 6vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -.025em;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}
.phone-link:hover { color: #fff; }

.label { display: block; font-size: .875rem; color: var(--on-panel-2); margin-bottom: 2px; }

.lines { list-style: none; margin: 1.1em 0 0; padding: 1em 0 0; border-top: 1px solid var(--panel-line); display: grid; gap: 8px; }
.lines li { display: flex; align-items: center; gap: 10px; color: var(--on-panel-2); }
.lines .ico { color: var(--on-panel-2); }
.lines a { color: var(--on-panel); font-weight: 650; min-height: 44px; display: inline-flex; align-items: center; }
.lines a:hover { color: var(--sun); }

.address {
  font-size: var(--t-1);
  font-weight: 650;
  line-height: 1.45;
  color: var(--on-panel);
  margin-bottom: 1em;
}
.pay {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--on-panel-2);
  font-size: .9375rem;
  padding-top: 1em;
  border-top: 1px solid var(--panel-line);
}
.pay .ico { color: var(--sun); margin-top: 3px; }

/* ─── 14. footer ────────────────────────────────────────────────────────── */
.foot {
  background: var(--surface-2);
  border-top: 1px solid var(--line);
  padding-block: clamp(2rem, 5vw, 3rem);
  font-size: .9375rem;
  color: var(--ink-3);
}
.foot-inner { display: grid; gap: 14px; }
.foot p { margin: 0; }
.foot strong { color: var(--ink); font-weight: 800; letter-spacing: -.015em; }
.foot a { color: var(--ink-2); font-weight: 650; }
.foot-nav { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.foot-nav a { display: inline-block; padding-block: 10px; text-decoration: none; }
.foot-nav a:hover { color: var(--brand-ink); text-decoration: underline; }
.foot .tel { display: inline-block; padding-block: 8px 0; }

/* ─── 15. the call bar that follows you on a phone ──────────────────────── */
.callbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 45;
  display: flex;
  justify-content: center;
  background: rgba(12, 23, 71, .9);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-top: 1px solid rgba(255, 255, 255, .1);
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
}
.callbar .btn-call { width: 100%; max-width: 23rem; justify-content: center; }

/* ─── 16. wider screens ─────────────────────────────────────────────────── */
@media (min-width: 30rem) {
  .top-call { padding: 8px 20px; }
  .top-call .num { display: inline; }
  .top-call .word { display: none; }
  .svc-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 48rem) {
  .visit { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .visit .card:last-child {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 2rem;
    align-items: start;
  }
  .visit .card:last-child h3 { grid-column: 1 / -1; }
  .visit .card:last-child .address { margin: 0; }
  .visit .card:last-child .pay {
    border-top: 0;
    padding: 0 0 0 2rem;
    border-left: 1px solid var(--panel-line);
    margin: 0;
  }
  .svc-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .svc-grid .wide { grid-column: auto; flex-direction: column; align-items: stretch; }
  .notes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .people { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .promise { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
  .founder { grid-template-columns: 200px minmax(0, 1fr); }
  .founder-photo { max-width: 200px; }
  .foot-inner { grid-template-columns: 1fr auto; align-items: center; }
}

@media (min-width: 54rem) {
  .hero-inner { flex-direction: row; align-items: center; justify-content: space-between; gap: clamp(2.5rem, 6vw, 5rem); }
  .hero-text { flex: 1 1 auto; max-width: 38rem; }
  .hero-figure { max-width: 400px; }
  .callbar { display: none; }
  body { padding-bottom: env(safe-area-inset-bottom, 0px); }
  .callout-row { display: grid; grid-template-columns: minmax(0, 1.3fr) auto; gap: 2.5rem; align-items: center; }
  .callout-row .actions { margin-top: 0; }
  .callout-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; align-items: end; }
  .callout-split h2 { margin-bottom: 0; }
  .callout-split p { font-size: var(--t-1); line-height: 1.5; color: var(--on-panel); }
}

@media (min-width: 66rem) {
  .top-inner { padding-block: 14px 0; }
  .nav { border-top: 0; order: 0; flex: 0 1 auto; margin: 0; padding: 0; }
  .brand { margin-right: 0; }
  .nav-inner { padding: 0; }
  .top-inner { padding-block: 12px; }
  .top-call { margin-left: auto; }
}

/* ─── 17. motion ────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ─── 18. on paper ──────────────────────────────────────────────────────── */
@media print {
  .skip, .nav, .callbar, .top-call, .actions { display: none !important; }
  body { background: #fff; color: #000; padding: 0; font-size: 11pt; }
  .top { position: static; background: #fff; }
  .hero, .band, .band-alt, .band-dark, .callout, .foot, .card {
    background: #fff !important;
    color: #000 !important;
    border-color: #999;
    box-shadow: none;
  }
  .hero::before, .hero::after, .callout::before, .band-dark::before, .flake { display: none; }
  .hero h1, .hero .lead, .hero .sub, .callout h2, .callout p, .band-dark h2, .card h3,
  .hours .day, .hours .time, .address, .phone-link, .lines a, .quote, .quote p + p { color: #000 !important; }
  .band { padding-block: .8rem; }
  a { color: #000; text-decoration: none; }
}