/* ---- tokens.css ---- */
/* The variables every rule below reads. Colours come from site.json as
   :root variables the build writes; the rest is here. */

/* ==========================================================================
   Shared theme for every site.
   - Colors come from site.json and are injected as :root variables.
   - Typography and shape come from the [data-preset] blocks below.
   Edit here once and every site picks it up on the next build.
   ========================================================================== */

:root {
  --tint: color-mix(in srgb, var(--brand) 7%, var(--paper));
  --muted: color-mix(in srgb, var(--ink) 74%, var(--paper));
  --line: color-mix(in srgb, var(--ink) 14%, transparent);
  --link: var(--brand);
  --focus: var(--brand);

  --font-display: system-ui, sans-serif;
  --font-body: system-ui, sans-serif;
  --display-weight: 700;
  --display-stretch: 100%;
  --display-tracking: -0.01em;

  --radius: 6px;
  --radius-lg: 10px;
  --rule: 1px solid var(--line);

  /* Type scale: 17px base, ~1.25 ratio */
  --step--1: 0.875rem;
  --step-0: 1.0625rem;
  --step-1: 1.3rem;
  --step-2: 1.6rem;
  --step-3: clamp(1.75rem, 1.35rem + 1.6vw, 2.3rem);
  --step-4: clamp(2.05rem, 1.45rem + 2.6vw, 3rem);
  --hero-size: clamp(2.6rem, 1.6rem + 4.4vw, 4.4rem);
  --hero-measure: 16ch;
  --plate-size: clamp(2.2rem, 1rem + 5vw, 3.6rem);

  --text-scale: 1;
  --space-section: clamp(4rem, 3rem + 5vw, 7rem);
  --measure: 66ch;
  --max: 74rem;
}

html { font-size: calc(100% * var(--text-scale, 1)); }

/* ---- base.css ---- */
/* Type scale, rhythm, and the elements before any component. */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5.5rem; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-stretch: var(--display-stretch);
  letter-spacing: var(--display-tracking);
  line-height: 1.1;
  text-wrap: balance;
}

p { margin: 0 0 1em; }

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

a { color: var(--link); text-underline-offset: 0.2em; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

.icon { width: 1.25em; height: 1.25em; flex: none; }

.wrap { width: min(100% - 2.5rem, var(--max)); margin-inline: auto; }

.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;
}

.skip-link {
  position: absolute; left: 1rem; top: -10rem; z-index: 100;
  padding: 0.75rem 1rem; background: var(--ink); color: var(--on-ink); border-radius: var(--radius);
}

.skip-link:focus { top: 1rem; }

/* Motion is a courtesy, never a requirement: nothing on the page moves unless
   the visitor did something, and for those who have asked their system for
   less of it, nothing moves at all. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}

/* ---- buttons.css ---- */
.btn {
  display: inline-flex; align-items: center; gap: 0.55em;
  padding: 0.85em 1.35em;
  border: 2px solid transparent; border-radius: var(--radius);
  font: 600 var(--step-0)/1.1 var(--font-body);
  text-decoration: none; cursor: pointer;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}

.btn .icon { width: 1.1em; height: 1.1em; }

.btn--accent { background: var(--accent); color: var(--on-accent); }

.btn--accent:hover { background: color-mix(in srgb, var(--accent) 86%, var(--ink)); }

.btn--brand { background: var(--brand); color: var(--on-brand); }

.btn--brand:hover { background: color-mix(in srgb, var(--brand) 84%, var(--ink)); }

.btn--ghost { background: transparent; color: inherit; border-color: currentColor; }

.btn--ghost:hover { background: color-mix(in srgb, currentColor 10%, transparent); }

.btn--sm { padding: 0.6em 1em; font-size: 0.95rem; }

.btn:disabled { opacity: 0.6; cursor: progress; }

/* ---- preview-bar.css ---- */
.preview-bar { background: var(--ink); color: var(--on-ink); font-size: 0.9rem; --focus: var(--accent); }

.preview-bar__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; padding-block: 0.6rem; }

.preview-bar p { margin: 0; flex: 1 1 22rem; }

.preview-bar__cta { color: inherit; font-weight: 700; }

.preview-bar__close {
  display: inline-grid; place-items: center; min-width: 1.75rem; min-height: 1.75rem; padding: 0.3rem;
  background: none; border: 0; color: inherit; cursor: pointer;
}

.preview-bar[hidden] { display: none; }

/* ---- header.css ---- */
/* An announcement across the top: one line, the accent colour, a link if there is one. */
.announce { background: var(--accent); color: var(--on-accent); font-size: 0.95rem; text-align: center; }
.announce p { margin: 0; padding: 0.55rem 0; }
.announce a { color: inherit; font-weight: 600; text-underline-offset: 0.15em; }

.site-header { position: sticky; top: 0; z-index: 20; background: var(--paper); border-bottom: 1px solid var(--line); }

.header__inner { display: flex; align-items: center; gap: 1.5rem; min-height: 4.5rem; }

.brand { display: flex; flex-direction: column; margin-right: auto; color: var(--ink); text-decoration: none; line-height: 1; }

.brand img { max-height: 2.75rem; width: auto; }

/* A mark beside the wordmark: the drawing left, the words stacked to its right. */
.brand--marked { flex-direction: row; align-items: center; gap: 0.7rem; }
.brand__icon { width: 2.5rem; height: 2.5rem; flex: 0 0 auto; }
.brand__text { display: flex; flex-direction: column; }

.brand__mark {
  font-family: var(--font-display); font-weight: var(--display-weight);
  font-stretch: var(--display-stretch); letter-spacing: var(--display-tracking);
  font-size: 1.55rem;
}

.brand__desc { margin-top: 0.3rem; font-size: 0.8rem; font-weight: 600; color: var(--muted); }

.site-nav ul { display: flex; gap: 1.75rem; margin: 0; padding: 0; list-style: none; }

.site-nav a { padding-block: 0.5rem; color: var(--ink); font-weight: 500; text-decoration: none; }

.site-nav a:hover { color: var(--brand); text-decoration: underline; }

.header__actions { display: flex; align-items: center; gap: 0.5rem; }

.nav-toggle {
  display: none; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0;
  background: none; border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); cursor: pointer;
}

.nav-toggle .icon { width: 1.4rem; height: 1.4rem; }

.header-call__short { display: none; }

@media (max-width: 63.99rem) {
  .nav-toggle { display: inline-grid; }
  .site-nav {
    display: none; position: absolute; inset: 100% 0 auto 0;
    background: var(--paper); border-bottom: 1px solid var(--line);
    box-shadow: 0 12px 24px -12px color-mix(in srgb, var(--ink) 30%, transparent);
  }
  .site-nav.is-open { display: block; }
  .site-nav ul { flex-direction: column; gap: 0; width: min(100% - 2.5rem, var(--max)); margin-inline: auto; padding-block: 0.5rem 1rem; }
  .site-nav li + li { border-top: 1px solid var(--line); }
  .site-nav a { display: block; padding-block: 0.9rem; font-size: 1.1rem; }
  .header-call__num { display: none; }
  .header-call__short { display: inline; }
}

/* ---- hero.css ---- */
.hero { position: relative; padding-block: clamp(3rem, 2rem + 5vw, 6.5rem); }

.hero__grid { display: grid; gap: 2.5rem; align-items: center; }

.hero__title { font-size: var(--hero-size); line-height: 1; max-width: var(--hero-measure); }

.hero__text { max-width: 36ch; margin-top: 1.5rem; font-size: var(--step-1); line-height: 1.5; }

.hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }

.hero__badges {
  display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem;
  margin: 2rem 0 0; padding: 0; list-style: none;
  font-size: 0.95rem; font-weight: 600;
}

.hero__badges li { display: flex; align-items: center; gap: 0.4rem; }

.hero__badges .icon { width: 1.1em; height: 1.1em; color: var(--badge-icon, var(--brand)); stroke-width: 2.5; }

.hero__aside { position: relative; display: grid; gap: 1.25rem; }

.hero__photo { margin: 0; overflow: hidden; border-radius: var(--radius-lg); aspect-ratio: 4 / 3; }

.hero__photo img { width: 100%; height: 100%; object-fit: cover; }

.plate {
  container-type: inline-size;
  display: block; padding: 1.5rem 1.75rem;
  border-radius: var(--radius-lg);
  background: var(--plate-bg, var(--brand)); color: var(--plate-fg, var(--on-brand));
  text-decoration: none;
}

.plate__label { display: block; font-size: 0.95rem; font-weight: 600; }

.plate__value {
  display: block; margin-top: 0.35rem;
  font-family: var(--font-display); font-weight: var(--display-weight);
  font-stretch: var(--display-stretch); letter-spacing: var(--display-tracking);
  font-size: min(var(--plate-size), var(--plate-fit, 15cqi)); line-height: 1;
  /* The cap above is tuned to each preset's own typeface. With another one —
     chosen in the switcher, or set by `theme.font` — the script measures and
     shrinks the line to fit; without the script it wraps at the space rather
     than run off the edge of the plate. */
  white-space: normal;
}

.plate__note { display: block; margin-top: 0.8rem; font-size: 0.95rem; }

a.plate:hover .plate__value { text-decoration: underline; text-decoration-thickness: 0.06em; text-underline-offset: 0.12em; }

@media (min-width: 56rem) {
  .hero__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 4rem; }
  .hero--photo .hero__photo { aspect-ratio: 4 / 5; }
}

/* workshop: dark van-panel hero with a two-tone fleet stripe */

/* storefront: arched shop-window photo, sign-style plate */

/* studio: open page, plate as a quiet card */

/* ---- sections.css ---- */
/* The sections between the hero and the contact block: services, about,
   areas, reviews, gallery and carousel, FAQ, embeds, and the contact form. */

.s { padding-block: var(--space-section); }

.s--tint { background: var(--tint); }

.s__head { max-width: 42rem; margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.25rem); }

.s__head h2 { font-size: var(--step-4); }

.s__intro { margin-top: 1rem; font-size: var(--step-1); line-height: 1.5; color: var(--muted); }

.s__note, .s__more { margin-top: 2rem; color: var(--muted); }

.s__more a { font-weight: 600; }

/* Services */

.svc-list {
  display: grid; gap: 0 2.5rem; margin: 0; padding: 0; list-style: none;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
}

.svc { padding-block: 1.5rem 2rem; border-top: var(--rule); }

.svc__icon {
  display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; margin-bottom: 1rem;
  border-radius: var(--radius); background: var(--tint); color: var(--brand);
}

.s--tint .svc__icon { background: var(--paper); }

.svc__icon .icon { width: 1.5rem; height: 1.5rem; }

.svc__title { margin-bottom: 0.5rem; font-size: var(--step-2); }

.svc p { color: var(--muted); }

.svc .svc__price { margin-top: 0.75rem; color: var(--ink); font-weight: 700; }
.svc__more { display: inline-block; margin-top: 0.75rem; font-weight: 600; }

/* About */

.about { display: grid; gap: 3rem; }

.about__text { max-width: var(--measure); }

.about__text .s__head { margin-bottom: 1.5rem; }

.about__sig { margin-top: 1.5rem; font-weight: 700; }

.about__photo { margin: 0 0 1.5rem; overflow: hidden; border-radius: var(--radius-lg); aspect-ratio: 4 / 3; }

.about__photo img { width: 100%; height: 100%; object-fit: cover; }

.checks { padding: 1.75rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); }

.s--plain .checks { background: var(--tint); border-color: transparent; }

.checks__h { margin-bottom: 1rem; font-size: var(--step-1); }

.checks ul { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }

.checks li { display: grid; grid-template-columns: 1.5rem 1fr; gap: 0.75rem; font-weight: 500; }

.checks .icon { width: 1.35rem; height: 1.35rem; margin-top: 0.15rem; color: var(--brand); stroke-width: 2.5; }

@media (min-width: 56rem) {
  .about { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 5rem; align-items: start; }
  .about--solo { grid-template-columns: 1fr; }
}

/* Service areas */

.areas { margin: 0; padding: 0; list-style: none; columns: 2 10rem; column-gap: 2.5rem; }

.areas li { padding-block: 0.7rem; border-bottom: 1px solid var(--line); break-inside: avoid; font-weight: 600; }

@media (min-width: 48rem) { .areas { columns: 4 10rem; } }

/* Testimonials */

.quotes { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }

.quote {
  display: flex; flex-direction: column; margin: 0; padding: 2rem;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg);
}

.s--tint .quote { border-color: transparent; }

.quote blockquote { flex: 1; margin: 0; font-size: 1.15rem; line-height: 1.55; }

.quote blockquote::before {
  content: "\201C"; display: block; height: 2.2rem;
  font-family: var(--font-display); font-size: 4rem; line-height: 1; color: var(--brand);
}

.stars + blockquote::before { display: none; }

.quote figcaption { margin-top: 1.5rem; font-size: 0.95rem; }

.quote__name { display: block; font-weight: 700; }

.quote__detail { color: var(--muted); }

.stars { display: flex; gap: 0.15rem; margin: 0 0 0.75rem; color: color-mix(in srgb, var(--accent) 70%, var(--ink)); }

.stars .icon { width: 1.1rem; height: 1.1rem; fill: var(--accent); }

/* Gallery */

.gallery {
  display: grid; gap: 0.75rem; margin: 0; padding: 0; list-style: none; grid-auto-flow: dense;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 48rem) { .gallery { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); } }

.gallery figure { margin: 0; height: 100%; display: flex; flex-direction: column; }

.gallery img { flex: 1; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }

.gallery figcaption { margin-top: 0.5rem; font-size: 0.9rem; color: var(--muted); }

/* Feature the first photo only when the rest fill the grid with no gaps */

@media (min-width: 48rem) {
  .gallery[data-count="3"] { grid-template-columns: 2fr 1fr; }
  .gallery[data-count="5"] { grid-template-columns: repeat(4, 1fr); }
  .gallery[data-count="3"] li:first-child { grid-row: span 2; }
  .gallery[data-count="5"] li:first-child { grid-column: span 2; grid-row: span 2; }
  .gallery[data-count="3"] li:first-child img, .gallery[data-count="5"] li:first-child img { aspect-ratio: auto; }
}

/* FAQ */

/* ---------- Carousel ----------
   A scroll-snap track, so it works before site.js runs and keeps working if
   the script fails: swipe on a phone, drag or shift-scroll on a desktop, tab
   in and use the arrow keys. The buttons underneath are an enhancement, not
   the mechanism. */

.carousel { position: relative; }

.carousel__track {
  display: flex; gap: 0.9rem; margin: 0; padding: 0 0 0.35rem; list-style: none;
  /* Snapping is only demanded where swiping is the interaction. On a
     desktop, `mandatory` makes Safari treat a two-finger scroll over the row
     as a horizontal gesture and snap, so the page underneath never moves;
     `proximity` lets the gesture's direction decide, and the arrows and dots
     still land exactly because they scroll to measured positions. */
  overflow-x: auto; scroll-snap-type: x proximity; scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  /* The scrollbar is the only affordance without JavaScript, so it stays. */
  scrollbar-width: thin; scrollbar-color: var(--line) transparent;
}

@media (pointer: coarse) { .carousel__track { scroll-snap-type: x mandatory; } }

.carousel__track:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

.carousel__track::-webkit-scrollbar { height: 6px; }

.carousel__track::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }

.carousel__slide {
  flex: 0 0 min(78%, 26rem); scroll-snap-align: start; margin: 0;
}

.carousel[data-per-view="1"] .carousel__slide { flex-basis: 100%; }

.carousel__slide figure { margin: 0; }

.carousel__slide img {
  width: 100%; aspect-ratio: var(--carousel-ratio, 3 / 2); object-fit: cover;
  border-radius: var(--radius-lg); background: var(--tint);
}

.carousel__slide figcaption { margin-top: 0.6rem; font-size: 0.9rem; color: var(--muted); }

.carousel__controls {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.75rem; margin-top: 1.1rem;
}

/* "2 of 8 pictures": under the arrows on a gallery, beside them on the examples row. */
.carousel__status { flex-basis: 100%; order: 2; margin: 0; text-align: center; font-size: 0.9rem; color: var(--muted); }

.carousel__controls[hidden] { display: none; }

.carousel__nav {
  display: grid; place-items: center; width: 2.6rem; height: 2.6rem; flex: 0 0 auto;
  cursor: pointer; color: var(--ink); background: var(--paper);
  border: var(--rule); border-radius: 999px;
}

.carousel__nav:hover:not(:disabled) { color: var(--on-brand); background: var(--brand); border-color: var(--brand); }

.carousel__nav:disabled { opacity: 0.35; cursor: default; }

.carousel__nav .icon { width: 1.25rem; height: 1.25rem; }

.carousel__dots { display: flex; align-items: center; gap: 0.45rem; }

.carousel__dot {
  width: 0.5rem; height: 0.5rem; padding: 0; cursor: pointer;
  background: var(--line); border: 0; border-radius: 999px;
  transition: width 0.18s ease, background-color 0.18s ease;
}

.carousel__dot[aria-current="true"] { width: 1.5rem; background: var(--brand); }

.carousel__dot:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

@media (min-width: 48rem) {
  .carousel__slide { flex-basis: min(46%, 30rem); }
  .carousel[data-per-view="1"] .carousel__slide { flex-basis: 100%; }
}

/* Somebody who has asked their operating system to stop moving things means
   it: no smooth scrolling, no width transition, and autoplay never starts. */

@media (prefers-reduced-motion: reduce) {
  .carousel__track { scroll-behavior: auto; }
  .carousel__dot { transition: none; }
}

/* Embeds. A third party's iframe or widget arrives sized for somebody else's
   page; these are the two rules that stop it overflowing a phone. */

.s--html iframe { max-width: 100%; border: 0; }

.s--html .wrap > *:not(.s__head) { margin-inline: auto; }

.faq { max-width: 48rem; border-top: 1px solid var(--line); }

.faq__item { border-bottom: 1px solid var(--line); }

.faq__item summary {
  position: relative; padding: 1.3rem 2.5rem 1.3rem 0;
  font-size: 1.15rem; font-weight: 600; cursor: pointer; list-style: none;
}

.faq__item summary::-webkit-details-marker { display: none; }

.faq__item summary::after {
  content: ""; position: absolute; right: 0.4rem; top: 50%; width: 0.6rem; height: 0.6rem;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-70%) rotate(45deg); transition: transform 0.2s;
}

.faq__item[open] summary::after { transform: translateY(-25%) rotate(-135deg); }

.faq__a { max-width: var(--measure); padding-bottom: 1.5rem; color: var(--muted); }

@media (min-width: 56rem) {
  .s--faq > .wrap { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 4rem; align-items: start; }
  .s--faq .s__head { margin-bottom: 0; }
}

/* Call-to-action band */

.s--cta { padding-block: clamp(3rem, 2rem + 4vw, 5rem); background: var(--brand); color: var(--on-brand); --focus: var(--on-brand); }

.cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 3rem; }

.cta h2 { font-size: var(--step-3); }

.cta p { max-width: 40rem; margin-top: 0.6rem; font-size: 1.1rem; }

.cta__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* Contact */

.contact { display: grid; gap: 3rem; }

.contact__list { display: grid; gap: 1.25rem; margin: 0 0 2.5rem; }

.contact__list dt { font-size: 0.9rem; font-weight: 500; color: var(--muted); }

.contact__list dd { margin: 0.15rem 0 0; font-size: 1.25rem; font-weight: 600; }

.contact__list address { font-style: normal; }

.contact__list a { color: var(--ink); text-decoration-color: var(--line); }

.contact__list a:hover { text-decoration-color: currentColor; }

.contact__list .contact__dir { display: inline-block; margin-top: 0.4rem; font-size: 1rem; color: var(--link); }

.contact__sub { margin-bottom: 0.75rem; font-size: var(--step-1); }

.hours { width: 100%; max-width: 26rem; border-collapse: collapse; }

.hours th, .hours td { padding: 0.55rem 0; text-align: left; border-bottom: 1px solid var(--line); }

.hours th { padding-right: 1.5rem; font-weight: 600; }

.hours__note { margin-top: 1rem; font-weight: 700; color: var(--brand); }

.contact-form {
  align-self: start; padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg);
}

.contact-form h3 { margin-bottom: 1.5rem; font-size: var(--step-2); }

.field { display: grid; gap: 0.4rem; margin-bottom: 1.1rem; }

.field label { font-size: 0.95rem; font-weight: 600; }

.field input, .field select, .field textarea {
  width: 100%; padding: 0.75rem 0.9rem;
  font: inherit; color: inherit; background: var(--paper);
  border: 1px solid color-mix(in srgb, var(--ink) 30%, transparent); border-radius: var(--radius);
}

.field textarea { resize: vertical; min-height: 8rem; }

.field-row { display: grid; gap: 0 1rem; }

.field-row .field { margin-bottom: 0.5rem; }

.field-hint { margin: 0 0 1.1rem; font-size: 0.875rem; color: var(--muted); }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-status { margin: 1rem 0 0; font-weight: 600; }

.form-status:empty { display: none; }

.form-status.is-ok { color: #1a7f37; }

.form-status.is-error { color: #b42318; }

.form-note { margin-top: 1rem; font-size: 0.9rem; color: var(--muted); }

.map { margin-top: 3rem; overflow: hidden; aspect-ratio: 16 / 7; border: 1px solid var(--line); border-radius: var(--radius-lg); }

.map iframe { display: block; width: 100%; height: 100%; border: 0; }

@media (min-width: 36rem) { .field-row { grid-template-columns: 1fr 1fr; } }

@media (min-width: 56rem) { .contact { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 5rem; } .contact--solo { grid-template-columns: 1fr; } }

@media (max-width: 47.99rem) { .map { aspect-ratio: 4 / 3; } }

/* ==========================================================================
   Preset character
   The four presets below were added after the original three. Their overrides
   are grouped per preset rather than scattered through each section, because
   each one is a coherent look rather than a tweak. One bold element each.
   ========================================================================== */

/* ---- Before and after: two pictures in one figure, each labelled ---- */
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.pair__side { position: relative; display: block; }
.pair__side img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
.pair__label {
  position: absolute; top: 0.5rem; left: 0.5rem; padding: 0.15rem 0.5rem; border-radius: 999px;
  background: rgb(0 0 0 / 0.55); color: #fff; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em;
}
.pair figcaption { grid-column: 1 / -1; }
.gallery .pair, .carousel__slide .pair { height: auto; }

/* ---- Holiday hours: under the regular hours, soonest first ---- */
.hours__special { margin: 0.75rem 0 0; padding: 0; list-style: none; font-size: 0.95rem; }
.hours__special li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.35rem 0; border-top: 1px dashed var(--line); }

/* ---- People: the team, one card each ---- */
.people {
  display: grid; gap: 1.5rem; margin: 0; padding: 0; list-style: none;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
}
.person__photo { margin: 0 0 0.9rem; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius-lg); background: var(--tint); }
.person__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.person__name { margin: 0; font-size: var(--step-1); }
.person__role { margin: 0.15rem 0 0.5rem; color: var(--muted); font-size: 0.95rem; }
.person p { margin: 0; }

/* ---- pages.css ---- */
.simple { padding-block: clamp(5rem, 4rem + 6vw, 9rem); text-align: center; }

.simple h1 { font-size: var(--step-4); }

.simple p { max-width: 36rem; margin: 1rem auto 2rem; font-size: var(--step-1); color: var(--muted); }

/* A page of paragraphs — the accessibility statement — reads left-aligned. */
.simple--text { text-align: left; }
.simple--text p { margin: 1rem 0; max-width: 40rem; color: var(--ink); font-size: var(--step-0); }
.simple--text .simple__meta { color: var(--muted); }
.simple--text .btn { margin-top: 1.5rem; }

/* ---- footer.css ---- */
.site-footer {
  padding-block: 4rem 2rem; background: var(--ink); font-size: 0.95rem;
  color: color-mix(in srgb, var(--on-ink) 80%, var(--ink)); --focus: var(--accent);
}

.site-footer a { color: var(--on-ink); }

.footer__grid { display: grid; gap: 2.5rem; }

.footer__brand {
  margin-bottom: 0.5rem; color: var(--on-ink); line-height: 1.1;
  font-family: var(--font-display); font-weight: var(--display-weight); font-stretch: var(--display-stretch);
  font-size: var(--step-2);
}

.footer__h { margin-bottom: 0.75rem; font: 700 0.95rem/1.3 var(--font-body); color: var(--on-ink); }

.footer__list, .footer__social { display: grid; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }

.footer__social { display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; margin-top: 1rem; }

.footer__base {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1rem;
  margin-top: 3rem; padding-top: 1.5rem; font-size: 0.875rem;
  border-top: 1px solid color-mix(in srgb, var(--on-ink) 18%, transparent);
}

.footer__base p { margin: 0; }

@media (min-width: 48rem) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }

/* Every link in the footer is a target of at least 24px, small type or not. */
.footer__list a, .footer__social a, .footer__base a { display: inline-block; padding-block: 0.2rem; }

/* ---- callbar.css ---- */
.callbar { display: none; }

@media (max-width: 47.99rem) {
  .has-callbar { padding-bottom: calc(4.25rem + env(safe-area-inset-bottom, 0px)); }
  .has-callbar .header-call { display: none; }
  .callbar {
    position: fixed; inset: auto 0 0 0; z-index: 30;
    display: flex; align-items: center; justify-content: center; gap: 0.6rem;
    padding: 1.1rem 1rem calc(1.1rem + env(safe-area-inset-bottom, 0px));
    background: var(--accent); color: var(--on-accent);
    font-size: 1.1rem; font-weight: 700; text-decoration: none;
    box-shadow: 0 -4px 16px -6px color-mix(in srgb, var(--ink) 40%, transparent);
  }
}

/* ---- form.css ---- */
/* The contact form's enquiry-mode chooser and the switcher panel. */

.ask { margin: 0 0 1rem; padding: 0; border: 0; }

.ask legend { padding: 0; font-size: 0.8rem; font-weight: 600; color: var(--muted); margin-bottom: 0.45rem; }

.ask__opt {
  display: inline-flex; align-items: center; gap: 0.45rem; cursor: pointer;
  padding: 0.45rem 0.8rem; margin: 0 0.4rem 0.4rem 0;
  border: 1px solid var(--line); border-radius: 999px; font-size: 0.92rem;
}

.ask__opt:has(input:checked) { border-color: var(--brand); background: var(--tint); font-weight: 600; }

.ask__opt input { accent-color: var(--brand); }

.mode-only[hidden] { display: none; }

/* ---------- Theme switcher (previews only) ----------
   Deliberately not styled like the site around it: it is our tool sitting on
   the prospect's page, and should read as such rather than as a feature of
   their business's website. */

/* The claim page's second route: pay, or just say yes. Given the same visual
   weight as the plans, because for a lot of owners it is the only one they
   will use. */

/* The "+" between two prices that add up. Hidden from screen readers — the
   words already say "then", and a lone plus read aloud is noise. */

.tiers__join {
  display: grid; place-items: center; padding: 0;
  font-size: var(--step-3); font-weight: 700; color: var(--muted);
}

@media (max-width: 47.99rem) {
  .tiers__join { padding: 0.25rem 0; }
}

.plan__plus {
  display: block; margin-top: 0.35rem; font-size: var(--step-1);
  font-weight: 400; color: var(--muted);
}

.plan__badge {
  display: inline-block; margin-bottom: 0.5rem; padding: 0.2rem 0.6rem;
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.01em;
  color: var(--on-accent); background: var(--accent); border-radius: 999px;
}

.plan--featured { border-color: var(--accent); }

.claim__alt {
  margin-top: 2.5rem; padding: 1.75rem; text-align: center;
  background: var(--tint); border: var(--rule); border-radius: var(--radius-lg);
}

.claim__alt h2 { font-size: var(--step-2); margin-bottom: 0.5rem; }

.claim__alt p { max-width: 34rem; margin: 0 auto; color: var(--muted); }

.claim__alt-actions {
  display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; margin-top: 1.25rem;
}

.claim__alt-actions .btn { margin: 0; }

.themer { position: fixed; right: 1rem; bottom: 1rem; z-index: 40; font-size: 0.875rem; }

.themer[hidden] { display: none; }

.themer__toggle {
  display: block; margin-left: auto; padding: 0.55rem 0.9rem; cursor: pointer;
  background: #1b1f23; color: #fff; border: 1px solid #333a41; border-radius: 999px;
  font: inherit; font-weight: 600; box-shadow: 0 6px 20px -8px rgb(0 0 0 / 0.5);
}

.themer__toggle:hover { background: #262b31; }

.themer__panel {
  margin-top: 0.6rem; width: min(20rem, calc(100vw - 2rem)); padding: 1rem;
  box-sizing: border-box;
  /* Five controls plus the code box is a tall panel, and a laptop in a hotel
     room is a short screen. Scroll inside rather than off the bottom. */
  max-height: min(34rem, calc(100vh - 5rem)); overflow-y: auto; overscroll-behavior: contain;
  background: #1b1f23; color: #e8edf1; border: 1px solid #333a41; border-radius: 12px;
  box-shadow: 0 16px 40px -12px rgb(0 0 0 / 0.6);
}

.themer__panel[hidden] { display: none; }

.themer__note { margin: 0 0 0.7rem; font-size: 0.78rem; color: #9fb0bd; line-height: 1.4; }

.themer__row { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.55rem; }

.themer__row > span { flex: 0 0 3.6rem; font-size: 0.78rem; color: #9fb0bd; }

.themer__preset {
  /* min-width:0 is what keeps a select inside a flex row: without it the
     intrinsic width of the longest option pushes it out of the panel. */
  flex: 1 1 auto; min-width: 0; max-width: 100%;
  padding: 0.4rem 0.5rem; font: inherit; font-size: 0.85rem; border-radius: 7px;
  background: #111518; color: #e8edf1; border: 1px solid #333a41;
}

.themer__knob {
  flex: 1 1 auto; min-width: 0; max-width: 100%;
  padding: 0.35rem 0.45rem; font: inherit; font-size: 0.82rem;
  background: #0f1317; color: #e8edf1; border: 1px solid #454d55; border-radius: 7px;
}

.themer__sws { display: flex; flex-wrap: wrap; gap: 0.35rem; }

.themer__sw {
  width: 1.6rem; height: 1.6rem; padding: 0; cursor: pointer;
  border: 1px solid #454d55; border-radius: 6px;
}

.themer__sw:hover { outline: 2px solid #7ab6f0; outline-offset: 1px; }

/* The code they send back. Monospaced and letter-spaced because it gets read
   off a screen and typed into a text message, and readonly because a code they
   have edited describes nothing. */

.themer__code {
  position: relative; margin: 0.75rem 0 0.7rem; padding-top: 0.7rem;
  border-top: 1px solid #333a41;
}

.themer__row--code { margin-bottom: 0.5rem; }

.themer__codebox {
  flex: 1 1 auto; min-width: 0; width: 100%; padding: 0.4rem 0.5rem;
  font: 600 0.95rem/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.16em; text-align: center; text-transform: uppercase;
  background: #0f1317; color: #f4d58d; border: 1px solid #454d55; border-radius: 7px;
}

.themer__codebox:focus { outline: 2px solid #7ab6f0; outline-offset: 1px; }

.themer__copy {
  width: 100%; padding: 0.4rem; cursor: pointer; font: inherit; font-size: 0.8rem; font-weight: 600;
  background: #2b333a; color: #e8edf1;
  border: 1px solid #454d55; border-radius: 7px;
}

.themer__copy:hover { border-color: #7ab6f0; }

.themer__help { margin: 0.55rem 0 0; font-size: 0.74rem; line-height: 1.45; color: #9fb0bd; }

.themer__reset {
  width: 100%; padding: 0.4rem; cursor: pointer; font: inherit; font-size: 0.8rem;
  background: none; color: #9fb0bd; border: 1px dashed #454d55; border-radius: 7px;
}

.themer__reset:hover { color: #e8edf1; border-color: #7ab6f0; }

@media (max-width: 47.99rem) {
  .has-callbar .themer { bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px)); }
}

/* ---- portfolio.css ---- */
.works {
  display: grid; gap: 1.25rem; margin: 0; padding: 0; list-style: none;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
}

.work {
  /* The card is the list item, so an entry without a link still looks like one. */
  display: flex; flex-direction: column; overflow: hidden;
  border: var(--rule); border-radius: var(--radius-lg); background: var(--paper);
  transition: border-color .15s ease, transform .15s ease;
}

.work:has(.work__link):hover { border-color: var(--brand); transform: translateY(-2px); }

.work:has(.work__link:hover) .work__cta { text-decoration-color: currentColor; }

.work__link { display: flex; flex-direction: column; flex: 1; min-width: 0; text-decoration: none; color: inherit; }

/* The picture is the top of the site's own home page, cropped like a browser
   window: whatever is above the fold is what the card shows. */

.work__shot {
  display: block; aspect-ratio: 16 / 10; overflow: hidden;
  border-bottom: var(--rule); background: var(--tint);
}

.work__shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }

.work__shot--mark { display: grid; place-items: center; border-bottom: 0; }

.work__mark {
  font-size: 3rem; font-weight: 700; color: #fff;
  text-shadow: 0 1px 2px rgb(0 0 0 / 0.35);
}

.work__body { display: flex; flex-direction: column; gap: 0.35rem; flex: 1; min-width: 0; padding: 1rem 1.25rem 1.25rem; }

.work__meta { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.2rem; }

.work__tag {
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.02em; padding: 0.2rem 0.6rem; border-radius: 999px;
  background: color-mix(in srgb, var(--brand) 12%, var(--paper)); color: var(--brand);
}

.work__year { font-size: 0.8rem; color: var(--muted); font-variant-numeric: tabular-nums; }

.work__name { font-weight: 650; font-size: var(--step-1); line-height: 1.25; }

.work__detail { font-size: 0.87rem; color: var(--muted); }

.work__text { font-size: 0.95rem; line-height: 1.5; margin-top: 0.15rem; }

.work__cta {
  margin-top: auto; padding-top: 0.85rem; font-weight: 600; color: var(--brand);
  text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.2em;
  transition: text-decoration-color .15s ease;
}

/* The same cards as a swipeable row (`layout: "carousel"` on the section).
   One, two or three whole cards to a view by width — never a card cut off at
   the edge, which reads as a layout bug however deliberate it is. That the
   row continues is said instead by the controls, which sit above the row
   beside the heading where the eye already is, with "1–3 of 6 sites" next to
   them. Slides stretch to the tallest and the card fills its slide, so a
   short tagline does not leave a card hanging above the others' bottom edge;
   a scrollbar under a row of cards reads as a mistake. A fraction here
   (3.2) would show a sliver of the next card, if that were ever wanted. */

.works-carousel .carousel { display: flex; flex-direction: column; }

.works-carousel .carousel__controls { order: -1; justify-content: flex-end; margin: 0 0 1.25rem; }

.works-carousel .carousel__status { flex: 1 1 auto; order: 0; text-align: left; }

.works-carousel .carousel__track {
  --works-gap: 1.25rem; --works-per-view: 1;
  gap: var(--works-gap); padding-bottom: 0.25rem; scrollbar-width: none;
}

.works-carousel .carousel__track::-webkit-scrollbar { display: none; }

.works-carousel .carousel__slide {
  display: flex;
  flex-basis: calc((100% - var(--works-gap) * (var(--works-per-view) - 1)) / var(--works-per-view));
}

.works-carousel .carousel__slide > .work { flex: 1; }

.works-carousel .carousel__slide .work__shot img { aspect-ratio: auto; border-radius: 0; }

@media (min-width: 48rem) { .works-carousel .carousel__track { --works-per-view: 2; } }

@media (min-width: 72rem) { .works-carousel .carousel__track { --works-per-view: 3; } }

/* ---- steps.css ---- */
.steps {
  display: grid; gap: 1.5rem; margin: 0; padding: 0; list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  counter-reset: step;
}

.step { display: flex; gap: 1rem; align-items: flex-start; }

.step__n {
  flex: 0 0 auto; width: 2.25rem; height: 2.25rem; border-radius: 999px;
  display: grid; place-items: center; font-weight: 700;
  background: var(--brand); color: var(--on-brand);
}

.step__title { margin: 0 0 0.25rem; font-size: 1.05rem; }

.step p { margin: 0; color: var(--muted); }

/* ---- pricing.css ---- */
.tiers {
  display: grid; gap: 1.25rem; margin: 0; padding: 0; list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

/* The joiner must not claim a column of its own: auto-fit would give the "+"
   the same width as a price card and push the two apart across the page. */

.tiers--joined { grid-template-columns: minmax(16rem, 1fr) auto minmax(16rem, 1fr); }

@media (max-width: 47.99rem) {
  .tiers--joined { grid-template-columns: 1fr; }
}

.tier {
  position: relative; display: flex; flex-direction: column; gap: 0.6rem;
  padding: 1.75rem; border: var(--rule); border-radius: var(--radius-lg); background: var(--paper);
}

.tier--featured { border-color: var(--brand); border-width: 2px; }

.tier__flag {
  position: absolute; top: -0.7rem; left: 1.5rem;
  background: var(--brand); color: var(--on-brand);
  font-size: 0.72rem; font-weight: 700; padding: 0.15rem 0.6rem; border-radius: 999px;
}

.tier__name { margin: 0; font-size: 1rem; }

.tier__price { margin: 0; font-size: 2.1rem; font-weight: 700; line-height: 1.1; }

.tier__per { font-size: 0.95rem; font-weight: 500; color: var(--muted); }

.tier__note { margin: 0; font-size: 0.9rem; color: var(--muted); }

.tier__list { list-style: none; margin: 0.4rem 0 0; padding: 0; display: grid; gap: 0.4rem; font-size: 0.92rem; }

.tier__list li { display: flex; gap: 0.5rem; align-items: flex-start; }

.tier__list .icon { flex: 0 0 auto; width: 1.1em; height: 1.1em; margin-top: 0.2em; color: var(--brand); }

.tier .btn { margin-top: auto; align-self: stretch; justify-content: center; }

/* ---- menu.css ---- */
/* The menu section: categories side by side where there is room, each dish on
   a dotted leader with its price, dietary tags as small abbreviations. */
.menu { display: grid; gap: 2.5rem 4rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.menu__cat { margin: 0 0 0.25rem; font-size: var(--step-2); }
.menu__catnote { margin: 0 0 0.75rem; color: var(--muted); font-size: 0.95rem; }
.menu__items { margin: 0; padding: 0; list-style: none; }
.menu__item {
  display: grid; grid-template-columns: 1fr auto; gap: 0 1rem; padding: 0.6rem 0;
  border-bottom: 1px dotted color-mix(in srgb, var(--ink) 35%, transparent);
}
.menu__name { font-weight: 600; }
.menu__tags { margin-left: 0.4rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; color: var(--muted); }
.menu__tags abbr { text-decoration: none; }
.menu__price { font-family: var(--font-display); font-weight: var(--display-weight); white-space: nowrap; }
.menu__text { grid-column: 1 / -1; margin-top: 0.15rem; color: var(--muted); font-size: 0.95rem; }
.menu__legend { margin-top: 1.25rem; color: var(--muted); font-size: 0.85rem; }
.menu__pdf { margin-top: 1rem; }

/* ---- claim.css ---- */
.claim__includes { margin: 0 0 3rem; max-width: 44rem; }

.claim__gaps {
  max-width: 44rem; margin: 0 0 2.5rem; padding: 1.5rem;
  border-left: 3px solid var(--accent); background: var(--tint); border-radius: var(--radius);
}

.claim__gaps h2 { margin: 0 0 0.75rem; font-size: 1.05rem; }

.claim__gaps ul { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.4rem; }

.claim__gaps-note { margin: 0.9rem 0 0; font-size: 0.85rem; color: var(--muted); }

.plans {
  display: grid; gap: 1.25rem; margin: 0 0 3rem; padding: 0; list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.plan {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem;
  padding: 1.75rem; border: var(--rule); border-radius: var(--radius-lg); background: var(--paper);
}

.plan__name { margin: 0; font-size: 1.05rem; }

.plan__price { margin: 0; font-size: 2.25rem; font-weight: 700; line-height: 1.1; }

.plan__per { font-size: 1rem; font-weight: 500; color: var(--muted); }

.plan__note { margin: 0; font-size: 0.9rem; color: var(--muted); }

.plan .btn { margin-top: auto; align-self: stretch; justify-content: center; }

.claim__foot { max-width: 44rem; margin: 0; }

.claim__contact { font-weight: 600; }

.claim__back { font-size: 0.9rem; }

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

/* ---- presets/workshop.css ---- */
/* workshop: everything this look changes. The token block sets its typography
   and shape; the rules after it override the shared components. */

/* Trades & services: van-door lettering, fleet stripe, big phone number */
[data-preset="workshop"] {
  --font-display: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --font-body: "Archivo", system-ui, sans-serif;
  --display-weight: 800;
  --display-stretch: 72%;
  --display-tracking: 0;
  --radius: 3px;
  --radius-lg: 4px;
  --rule: 3px solid var(--ink);
  --hero-size: clamp(3rem, 1.4rem + 6.4vw, 6rem);
  --hero-measure: 13ch;
  --plate-size: clamp(2.6rem, 0.9rem + 7.2vw, 4.6rem);
  --step-4: clamp(2.4rem, 1.5rem + 3.6vw, 3.6rem);
}
[data-preset="workshop"] .brand__mark { font-size: 1.9rem; }
[data-preset="workshop"] .hero {
  background: var(--ink); color: var(--on-ink);
  --focus: var(--accent); --badge-icon: var(--accent);
  padding-bottom: calc(clamp(3rem, 2rem + 5vw, 6.5rem) + 20px);
}
[data-preset="workshop"] .hero::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 20px;
  background: linear-gradient(var(--accent) 0 13px, var(--brand) 13px 20px);
}
[data-preset="workshop"] .hero__text { color: color-mix(in srgb, var(--on-ink) 82%, var(--ink)); }
[data-preset="workshop"] .plate { --plate-bg: var(--accent); --plate-fg: var(--on-accent); padding: 1.75rem 2rem 2rem; }
[data-preset="workshop"] .plate__value { font-stretch: 68%; --plate-fit: 17cqi; }
@media (min-width: 56rem) { [data-preset="workshop"] .hero__grid { align-items: end; } }
[data-preset="workshop"] .svc__title { font-size: 1.85rem; }
[data-preset="workshop"] .quote { padding: 1.5rem 0 0; background: none; border: 0; border-top: var(--rule); border-radius: 0; }

/* ---- presets/storefront.css ---- */
/* storefront: everything this look changes. The token block sets its typography
   and shape; the rules after it override the shared components. */

/* Shops, bakeries, cafés, salons: arched windows, serif sign */
[data-preset="storefront"] {
  --font-display: "Young Serif", Georgia, serif;
  --font-body: "Figtree", system-ui, sans-serif;
  --display-weight: 400;
  --display-tracking: -0.01em;
  --radius: 10px;
  --radius-lg: 20px;
  --hero-measure: 14ch;
  --plate-size: clamp(1.8rem, 1.1rem + 2.6vw, 2.6rem);
}
[data-preset="storefront"] .btn { border-radius: 999px; }
[data-preset="storefront"] .hero { background: var(--tint); }
[data-preset="storefront"] .hero__photo { border-radius: 999px 999px var(--radius-lg) var(--radius-lg); }
[data-preset="storefront"] .plate { text-align: center; }
[data-preset="storefront"] .plate__value { white-space: normal; }
[data-preset="storefront"] .hero--plain .plate {
  display: grid; align-content: center; min-height: 22rem; padding: 4rem 2rem 3rem;
  border-radius: 999px 999px var(--radius-lg) var(--radius-lg);
}
@media (min-width: 56rem) {
  [data-preset="storefront"] .hero--photo .plate {
    position: absolute; left: -2.5rem; bottom: 2.5rem; width: min(19rem, 85%);
    box-shadow: 0 18px 40px -18px color-mix(in srgb, var(--ink) 55%, transparent);
  }
}
[data-preset="storefront"] .about__photo { border-radius: 999px 999px var(--radius-lg) var(--radius-lg); aspect-ratio: 4 / 5; }

/* ---- presets/studio.css ---- */
/* studio: everything this look changes. The token block sets its typography
   and shape; the rules after it override the shared components. */

/* Professional services: quiet, editorial, lots of air */
[data-preset="studio"] {
  --font-display: "Newsreader", Georgia, serif;
  --font-body: "Public Sans", system-ui, sans-serif;
  --display-weight: 500;
  --display-tracking: -0.015em;
  --radius: 2px;
  --radius-lg: 2px;
  --hero-measure: 18ch;
  --plate-size: clamp(1.7rem, 1.1rem + 2.2vw, 2.4rem);
}
[data-preset="studio"] body { line-height: 1.65; }
[data-preset="studio"] .hero { border-bottom: 1px solid var(--line); }
[data-preset="studio"] .plate {
  --plate-bg: transparent; --plate-fg: var(--ink);
  border: 1px solid var(--line); border-left: 3px solid var(--brand);
}
[data-preset="studio"] .plate__label { color: var(--muted); font-weight: 500; }

/* ---- presets/wellness.css ---- */
/* wellness: everything this look changes. The token block sets its typography
   and shape; the rules after it override the shared components. */

/* Health, care and wellbeing: calm, rounded, unhurried */
[data-preset="wellness"] {
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Nunito Sans", system-ui, sans-serif;
  --display-weight: 600;
  --display-tracking: -0.02em;
  --radius: 14px;
  --radius-lg: 28px;
  --hero-size: clamp(2.4rem, 1.5rem + 3.8vw, 3.9rem);
  --hero-measure: 16ch;
  --plate-size: clamp(1.7rem, 1.1rem + 2.2vw, 2.4rem);
  --measure: 62ch;
}
[data-preset="wellness"] .hero { background: var(--tint); }
[data-preset="wellness"] .hero__photo { border-radius: var(--radius-lg); }
[data-preset="wellness"] .btn { border-radius: 999px; padding-inline: 1.6rem; }
[data-preset="wellness"] .plate {
  --plate-bg: var(--paper); --plate-fg: var(--ink);
  border: 1px solid color-mix(in srgb, var(--brand) 22%, transparent);
  padding: 1.75rem 2rem;
}
[data-preset="wellness"] .plate__label { color: var(--brand); }
[data-preset="wellness"] .svc { border-top: 0; padding-block: 0 2rem; }
[data-preset="wellness"] .svc__icon { width: 3.25rem; height: 3.25rem; border-radius: 999px; }
[data-preset="wellness"] .quote {
  border: 0; border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--brand) 7%, var(--paper));
}
[data-preset="wellness"] .s--tint .quote { background: var(--paper); }
[data-preset="wellness"] .checks { border-radius: var(--radius-lg); }
[data-preset="wellness"] .gallery img { border-radius: var(--radius-lg); }
[data-preset="wellness"] .faq__item summary { font-weight: 700; }

/* ---- presets/field.css ---- */
/* field: everything this look changes. The token block sets its typography
   and shape; the rules after it override the shared components. */

/* Outdoor and property work: sturdy slab, photography leads */
[data-preset="field"] {
  --font-display: "Zilla Slab", Georgia, serif;
  --font-body: "Source Sans 3", system-ui, sans-serif;
  --display-weight: 700;
  --display-tracking: -0.01em;
  --radius: 4px;
  --radius-lg: 8px;
  --rule: 2px solid var(--line);
  --hero-size: clamp(2.8rem, 1.6rem + 5vw, 4.8rem);
  --hero-measure: 14ch;
  --plate-size: clamp(2.2rem, 1.2rem + 4vw, 3.2rem);
}
[data-preset="field"] .hero { background: var(--tint); border-bottom: 4px solid var(--brand); }
[data-preset="field"] .hero__photo { aspect-ratio: 3 / 2; }
[data-preset="field"] .plate { --plate-bg: var(--brand); --plate-fg: var(--on-brand); }
[data-preset="field"] .svc {
  border-top: 0; border-left: 3px solid var(--brand);
  padding: 0.25rem 0 1.75rem 1.25rem; margin-bottom: 1.5rem;
}
[data-preset="field"] .svc__icon { background: transparent; width: auto; height: auto; margin-bottom: 0.6rem; }
[data-preset="field"] .svc__title { font-size: var(--step-1); }
[data-preset="field"] .areas li { border-bottom: 2px solid var(--line); }
[data-preset="field"] .gallery { gap: 0.5rem; }
[data-preset="field"] .quote { border-left: 3px solid var(--accent); border-radius: 0; }
@media (min-width: 56rem) {
  [data-preset="field"] .hero--photo .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* ---- presets/table.css ---- */
/* table: everything this look changes. The token block sets its typography
   and shape; the rules after it override the shared components. */

/* Restaurants and food service: the menu is the page */
[data-preset="table"] {
  --font-display: "Playfair Display", Georgia, serif;
  --font-body: "Karla", system-ui, sans-serif;
  --display-weight: 600;
  --display-tracking: -0.015em;
  --radius: 3px;
  --radius-lg: 6px;
  --hero-size: clamp(2.7rem, 1.6rem + 4.6vw, 4.6rem);
  --hero-measure: 15ch;
  --plate-size: clamp(1.9rem, 1.2rem + 2.6vw, 2.7rem);
}
[data-preset="table"] .hero { background: var(--ink); color: var(--on-ink); --badge-icon: var(--accent); --focus: var(--accent); }
[data-preset="table"] .hero__text { color: color-mix(in srgb, var(--on-ink) 82%, var(--ink)); }
[data-preset="table"] .plate { --plate-bg: var(--accent); --plate-fg: var(--on-accent); text-align: center; }
[data-preset="table"] .svc-list { gap: 0 4rem; }
[data-preset="table"] .svc {
  display: grid; grid-template-columns: 1fr auto; gap: 0 1rem; align-items: baseline;
  padding-block: 1rem; border-top: 0;
  border-bottom: 1px dotted color-mix(in srgb, var(--ink) 35%, transparent);
}
[data-preset="table"] .svc__icon { display: none; }
[data-preset="table"] .svc__title { grid-column: 1; grid-row: 1; margin-bottom: 0; font-size: var(--step-1); }
[data-preset="table"] .svc .svc__price { grid-column: 2; grid-row: 1; margin-top: 0; font-family: var(--font-display); }
[data-preset="table"] .svc p { grid-column: 1 / -1; margin-top: 0.3rem; font-size: 0.98rem; }
[data-preset="table"] .s__head { margin-inline: auto; text-align: center; }
[data-preset="table"] .quote blockquote { font-style: italic; }

/* ---- presets/atelier.css ---- */
/* atelier: everything this look changes. The token block sets its typography
   and shape; the rules after it override the shared components. */

/* Creative and craft studios: editorial, the portfolio carries it */
[data-preset="atelier"] {
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-body: "Jost", system-ui, sans-serif;
  --display-weight: 500;
  --display-tracking: -0.02em;
  --radius: 0;
  --radius-lg: 0;
  --hero-size: clamp(3rem, 1.6rem + 6vw, 5.6rem);
  --hero-measure: 15ch;
  --plate-size: clamp(1.8rem, 1.1rem + 2.4vw, 2.5rem);
  --measure: 64ch;
}
[data-preset="atelier"] .site-header { border-bottom: 0; }
[data-preset="atelier"] .hero { padding-block: clamp(4rem, 3rem + 6vw, 8rem); }
/* Cormorant has long descenders; line-height 1 collides at hero size. */
[data-preset="atelier"] .hero__title { font-weight: 400; line-height: 1.06; }
[data-preset="atelier"] .s__head h2, [data-preset="atelier"] .simple h1 { line-height: 1.1; }
[data-preset="atelier"] .hero__photo { aspect-ratio: 1; }
[data-preset="atelier"] .plate {
  --plate-bg: transparent; --plate-fg: var(--ink);
  padding: 0; border-top: 1px solid var(--ink); padding-top: 1rem;
}
[data-preset="atelier"] .plate__label { color: var(--muted); font-weight: 400; }
[data-preset="atelier"] .btn { border-radius: 0; }
[data-preset="atelier"] .svc { border-top: 1px solid var(--ink); padding-block: 1.25rem 2rem; }
[data-preset="atelier"] .svc__icon { display: none; }
[data-preset="atelier"] .svc__title { font-size: var(--step-2); font-weight: 400; }
[data-preset="atelier"] .gallery { gap: 0.35rem; }
[data-preset="atelier"] .gallery img { aspect-ratio: 1; border-radius: 0; }
[data-preset="atelier"] .quote { border: 0; background: none; padding: 0; }
[data-preset="atelier"] .quote blockquote { font-family: var(--font-display); font-size: 1.5rem; line-height: 1.35; }
[data-preset="atelier"] .s__head h2 { font-weight: 400; }

/* ---- presets/lounge.css ---- */
/* lounge: everything this look changes. The token block sets its typography
   and shape; the rules after it override the shared components. */

/* Bars, lounges, nightlife: dark paper (from the noir palette), a serif with
   some drama, generous spacing, nothing rounded. The photographs carry it. */
[data-preset="lounge"] {
  --font-display: "DM Serif Display", Georgia, serif;
  --font-body: "DM Sans", system-ui, sans-serif;
  --display-weight: 400;
  --display-tracking: 0;
  --radius: 0;
  --radius-lg: 0;
  --hero-size: clamp(2.8rem, 1.5rem + 5.5vw, 5.2rem);
  --hero-measure: 14ch;
  --plate-size: clamp(2rem, 1.1rem + 3vw, 3rem);
  --measure: 62ch;
  --space-section: clamp(4.5rem, 3.5rem + 5vw, 8rem);
}
/* lounge: the whole page is dark, so the chrome steps back and the metal
   accent does the pointing */
[data-preset="lounge"] .site-header { border-bottom: 1px solid var(--line); }
[data-preset="lounge"] .hero { padding-block: clamp(4rem, 3rem + 7vw, 9rem); }
[data-preset="lounge"] .hero__title { line-height: 1.02; }
[data-preset="lounge"] .hero__photo { aspect-ratio: 4 / 5; filter: saturate(0.85); }
[data-preset="lounge"] .hero__badges { color: var(--brand); text-transform: none; letter-spacing: 0.02em; }
[data-preset="lounge"] .plate {
  --plate-bg: transparent; --plate-fg: var(--ink);
  padding: 1.25rem 0 0; border-top: 1px solid var(--brand);
}
[data-preset="lounge"] .plate__label { color: var(--brand); font-weight: 500; }
[data-preset="lounge"] .btn { border-radius: 0; letter-spacing: 0.04em; }
[data-preset="lounge"] .btn--ghost { border-color: var(--brand); color: var(--ink); }
[data-preset="lounge"] .s--tint { background: color-mix(in srgb, var(--brand) 5%, var(--paper)); }
[data-preset="lounge"] .svc { border-top: 1px solid var(--line); padding-block: 1.25rem 2rem; }
[data-preset="lounge"] .svc__icon { background: transparent; color: var(--brand); border: 1px solid var(--line); }
[data-preset="lounge"] .svc__title { font-size: var(--step-2); font-weight: 400; }
[data-preset="lounge"] .gallery img, [data-preset="lounge"] .carousel__slide img { border-radius: 0; filter: saturate(0.85); }
[data-preset="lounge"] .quote { background: transparent; border: 1px solid var(--line); }
[data-preset="lounge"] .quote blockquote { font-family: var(--font-display); font-size: 1.4rem; line-height: 1.35; }
/* the footer is normally an ink band; on dark paper that would be a cream
   slab at the bottom of a dark room, so it stays in the room */
[data-preset="lounge"] .site-footer {
  background: color-mix(in srgb, var(--brand) 6%, var(--paper));
  color: color-mix(in srgb, var(--ink) 80%, var(--paper)); border-top: 1px solid var(--brand);
}
[data-preset="lounge"] .site-footer a { color: var(--ink); }
/* The footer headings keep the shared on-ink, which on dark paper is black on black. */
[data-preset="lounge"] .footer__brand, [data-preset="lounge"] .footer__h { color: var(--ink); }

/* ---- presets/dispatch.css ---- */
/* dispatch: everything this look changes. The token block sets its typography
   and shape; the rules after it override the shared components. */

/* Emergency and 24-hour services: condensed heavy type, a high-visibility
   plate, everything sized for a thumb on a phone at a roadside. */
[data-preset="dispatch"] {
  --font-display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --font-body: "Barlow", system-ui, sans-serif;
  --display-weight: 800;
  --display-stretch: 100%;
  --display-tracking: -0.005em;
  --radius: 4px;
  --radius-lg: 8px;
  --hero-size: clamp(2.8rem, 1.4rem + 6vw, 5.4rem);
  --hero-measure: 14ch;
  --plate-size: clamp(2.6rem, 1.2rem + 6vw, 4.2rem);
  --measure: 62ch;
}
/* dispatch: brand-coloured hero, an accent plate that is the biggest thing on
   the page, and badges that read as promises rather than decoration */
[data-preset="dispatch"] .hero { background: var(--brand); color: var(--on-brand); }
[data-preset="dispatch"] .hero .s__intro, [data-preset="dispatch"] .hero__text { color: var(--on-brand); }
[data-preset="dispatch"] .hero__title { text-transform: uppercase; letter-spacing: 0.01em; }
[data-preset="dispatch"] .hero__badges { font-size: 1.05rem; --badge-icon: var(--accent); }
[data-preset="dispatch"] .hero .btn--ghost { border-color: var(--on-brand); color: var(--on-brand); }
[data-preset="dispatch"] .plate {
  --plate-bg: var(--accent); --plate-fg: var(--on-accent);
  padding: 1.75rem 2rem; box-shadow: 0 12px 30px -14px rgb(0 0 0 / 0.5);
}
[data-preset="dispatch"] .plate__label { text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.85rem; }
[data-preset="dispatch"] .svc__icon { background: var(--brand); color: var(--on-brand); }
[data-preset="dispatch"] .svc__title { text-transform: uppercase; letter-spacing: 0.02em; }
[data-preset="dispatch"] .callbar { background: var(--accent); color: var(--on-accent); }
[data-preset="dispatch"] .s__head h2 { text-transform: uppercase; letter-spacing: 0.02em; }