/* templates/base.css */
* {
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

/* No focus ring on a click or tap, but always one for the keyboard. */
:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* Templates run edge to edge, so the page has no margin of its own */
body {
  margin: 0;
}

/* The space above and below every section; less on phones. */
:root {
  --section-space: clamp(44px, 5vw, 64px);
}

/* templates/menus/bar-menu/menu.css */
/* Bar menu: a sticky bar; under 960px the links fold into .bar-menu__panel (.is-open). */

.bar-menu {
  --bar-ink: #1b2a3a;
  --bar-muted: #5f6b78;
  --bar-paper: #fff;
  --bar-line: #e6e0d6;
  --bar-accent: #c2410c;
  --bar-on-accent: #fff;
  --bar-gutter: 40px;
  --bar-height: 72px;

  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--bar-line);
  background: var(--bar-paper);
  color: var(--bar-ink);
  font-family: var(--look-body, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
}

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

.bar-menu a {
  color: inherit;
  text-decoration: none;
}

.bar-menu__bar {
  display: flex;
  align-items: center;
  gap: 40px;
  max-width: 1200px;
  height: var(--bar-height);
  margin: 0 auto;
  padding: 0 var(--bar-gutter);
}

.bar-menu__brand {
  flex: none;
  font-family: var(--look-display, inherit);
  font-size: 19px;
  font-weight: var(--look-display-weight, 700);
  letter-spacing: -0.01em;
  text-transform: var(--look-display-case, none);
}

/* On wide screens the panel lets its links and actions sit in the bar itself */
.bar-menu__panel { display: contents; }

/* Links */
.bar-menu__nav {
  display: flex;
  gap: 28px;
}

.bar-menu__link {
  color: var(--bar-muted);
  font-size: 15px;
  font-weight: 500;
  text-decoration: underline 1.5px transparent;
  text-underline-offset: 8px;
  transition: color 0.2s, text-decoration-color 0.2s;
}

.bar-menu__link:hover { color: var(--bar-ink); }

.bar-menu__link[aria-current] {
  color: var(--bar-ink);
  text-decoration-color: var(--bar-accent);
}

/* Phone and button */
.bar-menu__actions {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-left: auto;
}

.bar-menu__phone {
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.bar-menu__phone:hover { color: var(--bar-accent); }

.bar-menu__button {
  padding: 11px 18px;
  border-radius: var(--look-control-radius, 8px);
  background: var(--bar-accent);
  color: var(--bar-on-accent) !important;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  transition: background-color 0.2s;
}

.bar-menu__button:hover { background: color-mix(in srgb, var(--bar-accent) 85%, #000); }
.bar-menu__button:active { translate: 0 1px; }

/* The phone toggle: two lines that cross when open */
.bar-menu__toggle {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}

.bar-menu__toggle span {
  position: absolute;
  left: 12px;
  width: 20px;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.3s cubic-bezier(0.3, 0.7, 0.2, 1);
}

.bar-menu__toggle span:first-child { top: 18px; }
.bar-menu__toggle span:last-child { top: 25px; }

.bar-menu.is-open .bar-menu__toggle span:first-child { transform: translateY(3.5px) rotate(45deg); }
.bar-menu.is-open .bar-menu__toggle span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

/* Phones and small tablets: everything but the name folds into a panel under the bar */
@media (max-width: 959px) {
  .bar-menu {
    --bar-gutter: 20px;
    --bar-height: 64px;
  }

  .bar-menu__bar { justify-content: space-between; }

  .bar-menu__toggle { display: block; }

  .bar-menu__panel {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: calc(100dvh - var(--bar-height));
    overflow-y: auto;
    padding: 8px var(--bar-gutter) 24px;
    border-bottom: 1px solid var(--bar-line);
    background: var(--bar-paper);
  }

  .bar-menu.is-open .bar-menu__panel { display: block; }

  .bar-menu__nav { flex-direction: column; gap: 0; }

  .bar-menu__link {
    padding: 14px 0;
    border-bottom: 1px solid var(--bar-line);
    color: var(--bar-ink);
    font-size: 20px;
    text-decoration: none;
  }

  .bar-menu__link[aria-current] { color: var(--bar-accent); }

  /* Under the links: the number and a full-width button */
  .bar-menu__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin: 20px 0 0;
  }

  .bar-menu__phone {
    padding: 13px 18px;
    border: 1px solid var(--bar-line);
    border-radius: var(--look-control-radius, 8px);
    font-size: 16px;
    text-align: center;
  }

  .bar-menu__button {
    padding: 14px 18px;
    font-size: 16px;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bar-menu__toggle span { transition: none; }
}

/* templates/heroes/call-hero/hero.css */
/* Call hero: a photo washed in a deep tint (--call-tint), the phone number as the biggest button, a rating and ticked promises. */

.call-hero {
  --call-tint: #0c2a45;
  --call-button: #fff;
  --call-button-ink: #0c2a45;
  --call-star: #f5c518;
  --call-live: #4ade80;
  --call-gutter: 40px;

  position: relative;
  isolation: isolate;
  display: grid;
  align-items: center;
  min-height: clamp(560px, 86dvh, 860px);
  overflow: hidden;
  background: var(--call-tint);
  color: #fff;
  font-family: var(--look-body, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
}

:where(.call-hero) h1,
:where(.call-hero) p,
:where(.call-hero) ul { margin: 0; padding: 0; }

/* The photo, washed in the tint: deepest behind the words */
.call-hero__picture {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.call-hero__picture::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--call-tint) 94%, transparent) 0%,
    color-mix(in srgb, var(--call-tint) 82%, transparent) 45%,
    color-mix(in srgb, var(--call-tint) 45%, transparent) 100%);
}

.call-hero__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The words */
.call-hero__text {
  box-sizing: border-box;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 96px var(--call-gutter);
}

/* The pill above the title, its dot pulsing like a light that's on */
.call-hero__kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 15px 7px 12px;
  border: 1px solid rgb(255 255 255 / 0.28);
  border-radius: 999px;
  background: rgb(255 255 255 / 0.1);
  font-family: var(--look-label, inherit);
  font-size: calc(14px * var(--look-label-scale, 1));
  font-weight: 600;
  letter-spacing: var(--look-label-tracking, 0.01em);
  text-transform: var(--look-label-case, none);
}

.call-hero__kicker::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--call-live);
}

.call-hero__title {
  max-width: 14em;
  margin-top: 22px;
  font-family: var(--look-display, inherit);
  font-size: calc(clamp(40px, 6.2vw, 84px) * var(--look-display-scale, 1));
  font-weight: var(--look-display-weight, 800);
  letter-spacing: var(--look-display-tracking, -0.03em);
  line-height: var(--look-display-leading, 1.02);
  text-transform: var(--look-display-case, none);
  text-wrap: balance;
}

.call-hero__title:first-child { margin-top: 0; }

.call-hero__lead {
  max-width: 34em;
  margin-top: 20px;
  color: rgb(255 255 255 / 0.88);
  font-size: 19px;
  line-height: 1.55;
  text-wrap: pretty;
}

/* The rating: five stars filled to the score (--call-fill), then the words */
.call-hero__rating {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin-top: 26px;
  color: rgb(255 255 255 / 0.85);
  font-size: 15px;
}

.call-hero__stars {
  --call-fill: 100%;

  background: linear-gradient(90deg, var(--call-star) var(--call-fill), rgb(255 255 255 / 0.3) var(--call-fill));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 19px;
  letter-spacing: 2px;
}

.call-hero__score {
  color: #fff;
  font-weight: 700;
}

a.call-hero__reviews {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgb(255 255 255 / 0.4);
  text-underline-offset: 4px;
}

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

/* The buttons: the number big and solid, a quieter one beside it */
.call-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px;
}

.call-hero__call {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 28px;
  border-radius: var(--look-control-radius, 10px);
  background: var(--call-button);
  box-shadow: 0 14px 32px -14px rgb(0 0 0 / 0.6);
  color: var(--call-button-ink);
  font-size: 19px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s;
}

/* The handset, which rings on hover */
.call-hero__call::before {
  content: "";
  flex: none;
  width: 20px;
  height: 20px;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.call-hero__call:hover { background: color-mix(in srgb, var(--call-button) 88%, var(--call-tint)); }
.call-hero__call:active { translate: 0 1px; }
.call-hero__call:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

.call-hero__button {
  display: inline-flex;
  align-items: center;
  padding: 17px 26px;
  border: 1.5px solid rgb(255 255 255 / 0.55);
  border-radius: var(--look-control-radius, 10px);
  color: #fff;
  font-size: 17px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s, border-color 0.2s;
}

.call-hero__button:hover {
  border-color: #fff;
  background: rgb(255 255 255 / 0.1);
}

/* The promises, each ticked */
.call-hero__points {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin-top: 28px;
  color: rgb(255 255 255 / 0.9);
  font-size: 15px;
  list-style: none;
}

.call-hero__points:empty { display: none; }

.call-hero__point {
  display: flex;
  align-items: center;
  gap: 10px;
}

.call-hero__point::before {
  content: "";
  flex: none;
  width: 4px;
  height: 9px;
  margin-top: -3px;
  border-right: 2px solid var(--call-live);
  border-bottom: 2px solid var(--call-live);
  rotate: 42deg;
}

/* Opening, then the kicker's dot pulses and the handset rings on hover */
@media (prefers-reduced-motion: no-preference) {
  .call-hero__text > * { animation: call-hero-rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.15s both; }
  .call-hero__title { animation-delay: 0.22s; }
  .call-hero__lead { animation-delay: 0.29s; }
  .call-hero__rating { animation-delay: 0.36s; }
  .call-hero__actions { animation-delay: 0.43s; }
  .call-hero__points { animation-delay: 0.5s; }

  .call-hero__picture { animation: call-hero-settle 1.8s cubic-bezier(0.3, 0, 0.2, 1) both; }

  .call-hero__kicker::before { animation: call-hero-pulse 2s ease-out infinite; }
  .call-hero__call:hover::before { animation: call-hero-ring 0.5s ease-in-out 2; }
}

@keyframes call-hero-rise {
  from { opacity: 0; translate: 0 18px; }
}

@keyframes call-hero-settle {
  from { scale: 1.06; }
}

@keyframes call-hero-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--call-live) 70%, transparent); }
  70%, 100% { box-shadow: 0 0 0 9px transparent; }
}

@keyframes call-hero-ring {
  0%, 100% { rotate: 0deg; }
  25% { rotate: -14deg; }
  75% { rotate: 14deg; }
}

/* Phones: the buttons full width, the number first */
@media (max-width: 640px) {
  .call-hero {
    --call-gutter: 20px;

    min-height: 0;
  }

  .call-hero__picture::after { background: color-mix(in srgb, var(--call-tint) 86%, transparent); }

  .call-hero__text { padding-block: 56px 48px; }

  .call-hero__lead { font-size: 17px; }

  .call-hero__actions { flex-direction: column; }

  .call-hero__call,
  .call-hero__button { justify-content: center; }

  .call-hero__call { font-size: 18px; }
}

/* templates/sections/feature-grid/features.css */
/* Feature grid: an icon, a heading and a line each, three to a row (--features-columns). */

.feature-grid {
  --features-ink: #1b2a3a;
  --features-muted: #5f6b78;
  --features-line: #e6e0d6;
  --features-accent: #c2410c;
  --features-gutter: 40px;
  --features-display: var(--look-display, Georgia, "Times New Roman", serif);

  box-sizing: border-box;
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--section-space) var(--features-gutter);
  color: var(--features-ink);
  font-family: var(--look-body, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
}

:where(.feature-grid) h2,
:where(.feature-grid) h3,
:where(.feature-grid) p,
:where(.feature-grid) ul { margin: 0; padding: 0; }

/* Heading and intro */
.feature-grid__head { max-width: 640px; }
.feature-grid__head:empty { display: none; }

.feature-grid__title {
  font-family: var(--features-display);
  font-size: calc(clamp(32px, 4.4vw, 52px) * var(--look-display-scale, 1));
  font-weight: var(--look-display-weight, 400);
  letter-spacing: var(--look-display-tracking, -0.015em);
  line-height: var(--look-display-leading, 1.1);
  text-wrap: balance;
  text-transform: var(--look-display-case, none);
}

.feature-grid__intro {
  margin-top: 14px;
  color: var(--features-muted);
  font-size: 18px;
  line-height: 1.5;
}

/* Features */
.feature-grid__list {
  display: grid;
  grid-template-columns: repeat(var(--features-columns, 3), minmax(0, 1fr));
  gap: 56px 48px;
  margin-top: 56px;
  list-style: none;
}

.feature-grid__head:empty + .feature-grid__list { margin-top: 0; }

.feature-grid__item {
  padding-top: 28px;
  border-top: 1px solid var(--features-line);
}

.feature-grid__icon {
  display: block;
  width: 36px;
  height: 36px;
  color: var(--features-accent);
}

.feature-grid__name {
  margin-top: 20px;
  font-family: var(--look-display, inherit);
  font-size: 18px;
  font-weight: var(--look-display-weight, 600);
  line-height: 1.3;
}

.feature-grid__text {
  max-width: 34ch;
  margin-top: 8px;
  color: var(--features-muted);
  font-size: 16px;
  line-height: 1.6;
}

/* Each icon in a solid round badge beside its words (setIconCircles); the shadow paints the disc so the icon keeps its size */
.feature-grid--circles .feature-grid__item {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  align-items: start;
  column-gap: 24px;
  padding-top: 0;
  border-top: 0;
}

.feature-grid--circles .feature-grid__icon {
  grid-row: span 2;
  width: 40px;
  height: 40px;
  margin: 18px;
  border-radius: 50%;
  background: var(--features-accent);
  box-shadow: 0 0 0 18px var(--features-accent);
  color: var(--features-on-accent, #fff);
}

.feature-grid--circles .feature-grid__name { margin-top: 8px; }

/* Coming into view */
.feature-grid__item {
  transition: opacity 0.7s ease, translate 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: calc(min(var(--i, 0), 5) * 80ms);
}

.feature-grid__item.is-waiting {
  opacity: 0;
  translate: 0 24px;
}

@media (max-width: 999px) {
  .feature-grid__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 799px) {
  .feature-grid {
    --features-gutter: 20px;
  }

  .feature-grid__intro { font-size: 17px; }

  .feature-grid__list {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
    margin-top: 40px;
  }

  .feature-grid__item { padding-top: 22px; }
}

/* templates/small-sections/three-steps/steps.css */
/* Three steps: biro numbers in wobbly circles joined by curly arrows (--steps-pen). */

.three-steps {
  --steps-ink: #1d2433;
  --steps-muted: #5b6375;
  --steps-pen: #2449b8;
  --steps-circle: 74px;
  --steps-gap: 64px;
  --steps-gutter: 40px;

  box-sizing: border-box;
  max-width: 1120px;
  margin: 0 auto;
  padding: var(--section-space) var(--steps-gutter);
  color: var(--steps-ink);
  font-family: var(--look-body, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
}

:where(.three-steps) h2,
:where(.three-steps) h3,
:where(.three-steps) p,
:where(.three-steps) ol { margin: 0; padding: 0; }

.three-steps__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 4px 20px;
}

.three-steps__head:empty { display: none; }

.three-steps__title {
  font-family: var(--look-display, inherit);
  font-size: calc(clamp(30px, 3.6vw, 42px) * var(--look-display-scale, 1));
  font-weight: var(--look-display-weight, 700);
  letter-spacing: var(--look-display-tracking, -0.03em);
  line-height: var(--look-display-leading, 1.1);
  text-transform: var(--look-display-case, none);
}

.three-steps__note {
  color: var(--steps-pen);
  font-family: "Caveat", "Segoe Print", "Bradley Hand", cursive;
  font-size: 28px;
  font-weight: 600;
  rotate: -4deg;
}

.three-steps__steps {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: var(--steps-gap);
  margin-top: 64px;
  list-style: none;
  counter-reset: three-steps;
}

.three-steps__step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  counter-increment: three-steps;
}

/* The number in its circle */
.three-steps__step::before {
  content: counter(three-steps);
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: var(--steps-circle);
  height: calc(var(--steps-circle) - 6px);
  border: 2.5px solid var(--steps-pen);
  border-radius: 54% 46% 58% 42% / 44% 58% 42% 56%;
  color: var(--steps-pen);
  font-family: "Caveat", "Segoe Print", "Bradley Hand", cursive;
  font-size: 46px;
  font-weight: 700;
  line-height: 1;
  rotate: -7deg;
}

.three-steps__step:nth-child(2n)::before {
  border-radius: 46% 56% 44% 54% / 56% 44% 58% 42%;
  rotate: 5deg;
}

/* The arrow, from just past this circle to just before the next one */
.three-steps__step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 10px;
  left: calc(50% + var(--steps-circle) / 2 + 20px);
  width: calc(100% + var(--steps-gap) - var(--steps-circle) - 40px);
  height: 36px;
  background: var(--steps-pen);
  -webkit-mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 3.5l12 9.5-13 7'/%3E%3C/svg%3E") right 1px top 13px / 20px 24px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40' preserveAspectRatio='none' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath vector-effect='non-scaling-stroke' d='M2 30C26 4 70 0 97 26'/%3E%3C/svg%3E") left top / calc(100% - 3px) 100% no-repeat;
  mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 3.5l12 9.5-13 7'/%3E%3C/svg%3E") right 1px top 13px / 20px 24px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40' preserveAspectRatio='none' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath vector-effect='non-scaling-stroke' d='M2 30C26 4 70 0 97 26'/%3E%3C/svg%3E") left top / calc(100% - 3px) 100% no-repeat;
}

.three-steps__name {
  margin-top: 24px;
  font-size: 20px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.three-steps__text {
  max-width: 20em;
  margin-top: 8px;
  color: var(--steps-muted);
  font-size: 16px;
  line-height: 1.5;
  text-wrap: pretty;
}

@media (max-width: 699px) {
  .three-steps {
    --steps-gutter: 20px;
  }

  .three-steps__head { justify-content: flex-start; }

  .three-steps__steps {
    grid-auto-flow: row;
    gap: 32px;
    margin-top: 40px;
  }

  .three-steps__step {
    display: grid;
    grid-template-columns: var(--steps-circle) minmax(0, 1fr);
    column-gap: 20px;
    text-align: left;
  }

  .three-steps__step::before { grid-row: span 2; }
  .three-steps__step:not(:last-child)::after { display: none; }

  .three-steps__name { margin-top: 6px; }
}

/* templates/small-sections/cta-panel/cta.css */
/* CTA panel: a short centered ask on a band a shade off the page, with buttons from templates/buttons. */

.cta-panel {
  --cta-bg: light-dark(#f5f5f7, #0a0a0b);
  --cta-ink: light-dark(#0a0a0b, #fff);
  --cta-muted: light-dark(#5e5e63, #a3a3a6);
  --cta-line: color-mix(in srgb, var(--cta-ink) 8%, transparent);

  padding: 7rem 4vw;
  border-top: 1px solid var(--cta-line);
  /* A shade deeper than the page: a touch in light, half way to black in dark */
  background: light-dark(color-mix(in srgb, var(--cta-bg), #000 4%), color-mix(in srgb, var(--cta-bg), #000 50%));
  color: var(--cta-ink);
  font-family: var(--look-body, "Inter", system-ui, sans-serif);
  text-align: center;
}

/* On the page's own background instead of the deeper band (setDeep(false)) */
.cta-panel--flat { background: var(--cta-bg); }

:where(.cta-panel) h2,
:where(.cta-panel) p { margin: 0; }

.cta-panel__head {
  max-width: 720px;
  margin: 0 auto 32px;
  transition: opacity 1s ease, translate 1s ease;
}

.cta-panel__head.is-waiting {
  opacity: 0;
  translate: 0 60px;
}

.cta-panel__kicker {
  margin-bottom: 8px;
  color: var(--cta-muted);
  font-family: var(--look-label, "IBM Plex Mono", ui-monospace, monospace);
  font-size: calc(10px * var(--look-label-scale, 1));
  font-weight: 500;
  letter-spacing: var(--look-label-tracking, 0.22em);
  text-transform: var(--look-label-case, uppercase);
}

.cta-panel__title {
  margin-bottom: 16px;
  font-family: var(--look-display, "Sora", system-ui, sans-serif);
  font-size: calc(clamp(2rem, 5vw, 3.5rem) * var(--look-display-scale, 1));
  font-weight: 800;
  letter-spacing: var(--look-display-tracking, -0.04em);
  line-height: 1;
  text-transform: var(--look-display-case, none);
  text-wrap: balance;
}

.cta-panel__intro {
  max-width: 560px;
  margin: 0 auto;
  color: var(--cta-muted);
  font-size: 16px;
  line-height: 1.6;
}

.cta-panel__buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

@media (max-width: 768px) {
  .cta-panel { padding: 5rem 5vw; }

  .cta-panel__buttons {
    flex-direction: column;
    align-items: center;
  }

  .cta-panel__buttons > * {
    width: 100%;
    max-width: 280px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cta-panel__head { transition: none; }
}

/* templates/buttons/call-button/button.css */
/* Call button: a phone that rings on hover, the words, and the number under them. */

.call-button {
  --button-color: #c2410c;
  --button-on-color: #fff;

  display: inline-flex;
  box-sizing: border-box;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 7px 24px 7px 7px;
  border-radius: var(--look-control-radius, 999px);
  background: var(--button-color);
  color: var(--button-on-color);
  font-family: var(--look-body, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
  line-height: 1.2;
  text-decoration: none;
  transition: scale 0.15s ease;
}

.call-button__icon {
  display: grid;
  flex: none;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: calc(var(--look-control-radius, 999px) - 7px);
  background: color-mix(in srgb, var(--button-on-color) 18%, transparent);
}

.call-button__icon::before {
  --phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");

  width: 18px;
  height: 18px;
  background: currentColor;
  content: "";
  -webkit-mask: var(--phone) center / contain no-repeat;
  mask: var(--phone) center / contain no-repeat;
}

.call-button__text {
  display: grid;
  gap: 2px;
}

.call-button__label {
  font-size: 16px;
  font-weight: 600;
}

.call-button__number {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  opacity: 0.8;
}

/* Ringing: a quick shake that dies away */
.call-button:hover .call-button__icon::before,
.call-button:focus-visible .call-button__icon::before { animation: call-button-ring 0.9s ease; }

@keyframes call-button-ring {
  0%, 100% { rotate: 0deg; }
  15% { rotate: -14deg; }
  30% { rotate: 12deg; }
  45% { rotate: -10deg; }
  60% { rotate: 7deg; }
  75% { rotate: -3deg; }
}

.call-button:active { scale: 0.98; }

/* The focus ring in the button's color; the text's white would vanish on a white page */
.call-button:focus-visible { outline-color: var(--button-color); }

@media (prefers-reduced-motion: reduce) {
  .call-button { transition: none; }
  .call-button:hover .call-button__icon::before,
  .call-button:focus-visible .call-button__icon::before { animation: none; }
}

/* templates/reviews/review-wall/review.css */
/* Review wall: a sticky rating card beside two columns of review cards; one column on phones. */

.review-wall {
  --wall-ink: #1b2a3a;
  --wall-muted: #5f6b78;
  --wall-card: #f6f1e8;
  --wall-accent: #c2410c;
  --wall-star: #f4a522;
  --wall-dark: #15304b;       /* the rating card */
  --wall-dark-ink: #f6f1e8;
  --wall-dark-muted: #a9b7c6;
  --wall-gutter: 40px;

  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: 64px;
  box-sizing: border-box;
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--section-space) var(--wall-gutter);
  color: var(--wall-ink);
  font-family: var(--look-body, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
}

:where(.review-wall) h2,
:where(.review-wall) p,
:where(.review-wall) figure,
:where(.review-wall) blockquote { margin: 0; }

/* The left side: heading, then the rating */
.review-wall__side {
  position: sticky;
  top: 120px;
  align-self: start;
}

.review-wall__head:empty { display: none; }

.review-wall__title {
  font-family: var(--look-display, inherit);
  font-size: calc(clamp(32px, 4vw, 44px) * var(--look-display-scale, 1));
  font-weight: var(--look-display-weight, 700);
  letter-spacing: var(--look-display-tracking, -0.02em);
  line-height: var(--look-display-leading, 1.1);
  text-transform: var(--look-display-case, none);
  text-wrap: balance;
}

.review-wall__intro {
  margin-top: 14px;
  color: var(--wall-muted);
  font-size: 17px;
  line-height: 1.5;
}

.review-wall__rating {
  display: grid;
  justify-items: start;
  gap: 12px;
  margin-top: 32px;
  padding: 28px;
  border-radius: var(--look-radius, 16px);
  background: var(--wall-dark);
  color: var(--wall-dark-ink);
}

.review-wall__head:empty + .review-wall__rating { margin-top: 0; }

.review-wall__score {
  font-family: var(--look-display, inherit);
  font-size: calc(80px * var(--look-display-scale, 1));
  font-variant-numeric: tabular-nums;
  font-weight: var(--look-display-weight, 700);
  letter-spacing: var(--look-display-tracking, -0.03em);
  line-height: 0.9;
}

.review-wall__stars {
  position: relative;
  display: block;
  width: 136px;
  height: 24px;
  color: var(--wall-star);
}

.review-wall__stars canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.review-wall__rating-note {
  color: var(--wall-dark-muted);
  font-size: 15px;
}

a.review-wall__rating-note {
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--wall-dark-muted) 50%, transparent);
  text-underline-offset: 4px;
}

a.review-wall__rating-note:hover,
a.review-wall__rating-note:focus-visible { color: var(--wall-dark-ink); }

/* The reviews */
.review-wall__list {
  columns: 2;
  column-gap: 20px;
}

.review-wall__review {
  margin-bottom: 20px;
  padding: 26px 26px 24px;
  border-radius: var(--look-radius, 16px);
  background: var(--wall-card);
  break-inside: avoid;
}

.review-wall__quote {
  font-size: 18px;
  line-height: 1.55;
}

.review-wall__quote::before {
  display: block;
  height: 26px;
  color: var(--wall-accent);
  content: "“";
  font: 700 56px/1 Georgia, serif;
}

.review-wall__by {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-top: 16px;
  font-size: 15px;
  font-weight: 600;
}

.review-wall__detail {
  color: var(--wall-muted);
  font-weight: normal;
}

@media (max-width: 799px) {
  .review-wall {
    --wall-gutter: 20px;

    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

  .review-wall__side { position: static; }

  .review-wall__score { font-size: calc(64px * var(--look-display-scale, 1)); }

  .review-wall__list { columns: 1; }

  .review-wall__quote { font-size: 17px; }
}

/* templates/sections/question-list/questions.css */
/* Question list: the head stays beside the questions on wide screens; plus turns to minus. */

.question-list {
  --questions-ink: #1b2a3a;
  --questions-muted: #5f6b78;
  --questions-line: #e6e0d6;
  --questions-accent: #c2410c;
  --questions-gutter: 40px;
  --questions-display: var(--look-display, Georgia, "Times New Roman", serif);

  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  align-items: start;
  gap: 48px 80px;
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--section-space) var(--questions-gutter);
  color: var(--questions-ink);
  font-family: var(--look-body, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
}

:where(.question-list) h2,
:where(.question-list) p { margin: 0; }

/* Heading and intro, staying in view beside the questions */
.question-list__head {
  position: sticky;
  top: 110px;
}

.question-list__head:empty { display: none; }

.question-list__head:empty + .question-list__items { grid-column: 1 / -1; }

.question-list__title {
  font-family: var(--questions-display);
  font-size: calc(clamp(32px, 4vw, 48px) * var(--look-display-scale, 1));
  font-weight: var(--look-display-weight, 400);
  letter-spacing: var(--look-display-tracking, -0.015em);
  line-height: var(--look-display-leading, 1.1);
  text-wrap: balance;
  text-transform: var(--look-display-case, none);
}

.question-list__intro {
  margin-top: 14px;
  color: var(--questions-muted);
  font-size: 17px;
  line-height: 1.55;
}

.question-list__intro a { color: var(--questions-accent); }

/* Questions */
.question-list__items { border-top: 1px solid var(--questions-line); }

.question-list__item { border-bottom: 1px solid var(--questions-line); }

.question-list__question {
  position: relative;
  padding: 24px 48px 24px 0;
  font-size: 19px;
  font-weight: 500;
  line-height: 1.35;
  list-style: none;
  cursor: pointer;
}

.question-list__question::-webkit-details-marker { display: none; }

.question-list__question:focus-visible {
  outline: 2px solid var(--questions-ink);
  outline-offset: 4px;
}

/* The plus: two lines, the upright one lying down when open */
.question-list__question::before,
.question-list__question::after {
  position: absolute;
  top: 50%;
  right: 6px;
  width: 16px;
  height: 1.5px;
  margin-top: -0.75px;
  background: currentColor;
  content: "";
  transition: rotate 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.question-list__question::after { rotate: 90deg; }

.question-list__item[open]:not([data-closing]) > .question-list__question::after { rotate: 0deg; }

.question-list__answer { overflow: hidden; }

.question-list__answer p {
  max-width: 64ch;
  padding: 0 48px 26px 0;
  color: var(--questions-muted);
  font-size: 17px;
  line-height: 1.65;
}

.question-list__answer a { color: var(--questions-accent); }

@media (prefers-reduced-motion: reduce) {
  .question-list__question::before,
  .question-list__question::after { transition: none; }
}

@media (max-width: 899px) {
  .question-list { grid-template-columns: minmax(0, 1fr); }

  .question-list__head { position: static; }
}

@media (max-width: 799px) {
  .question-list {
    --questions-gutter: 20px;

    gap: 32px;
  }

  .question-list__question {
    padding: 20px 40px 20px 0;
    font-size: 17px;
  }

  .question-list__answer p {
    padding-right: 0;
    font-size: 16px;
  }
}

/* templates/contact/contact-band/contact.css */
/* Contact band: a colored band with a huge phone number underlined by a pen (contact.js). */

.contact-band {
  --band-bg: #a9390a;
  --band-ink: #fff7ef;
  --band-muted: color-mix(in srgb, var(--band-ink) 82%, var(--band-bg));
  --band-gutter: 40px;

  padding: var(--section-space) max(var(--band-gutter), calc((100% - 1120px) / 2));
  background: var(--band-bg);
  color: var(--band-ink);
  font-family: var(--look-body, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
}

:where(.contact-band) h2,
:where(.contact-band) p,
:where(.contact-band) ul,
:where(.contact-band) address { margin: 0; padding: 0; font-style: normal; }

/* The small line above the number */
.contact-band__head:empty { display: none; }

.contact-band__title {
  color: var(--band-muted);
  font-family: var(--look-label, inherit);
  font-size: calc(15px * var(--look-label-scale, 1));
  font-weight: 600;
  letter-spacing: var(--look-label-tracking, 0.06em);
  text-transform: var(--look-label-case, uppercase);
  text-wrap: balance;
}

.contact-band__intro {
  max-width: 560px;
  margin-top: 8px;
  color: var(--band-muted);
  font-size: 16px;
  line-height: 1.5;
}

/* The number */
.contact-band__call { margin-top: 14px; }
.contact-band__head:empty + .contact-band__call { margin-top: 0; }

.contact-band__phone {
  position: relative;
  display: inline-block;
  padding-bottom: 20px;
  color: inherit;
  font-family: var(--look-display, inherit);
  font-size: calc(clamp(42px, 8.4vw, 112px) * var(--look-display-scale, 1));
  font-weight: var(--look-display-weight, 700);
  letter-spacing: var(--look-display-tracking, -0.03em);
  line-height: 1;
  text-decoration: none;
}

.contact-band__phone canvas {
  position: absolute;
  bottom: 0;
  left: -6px;
  width: calc(100% + 12px);
  height: 20px;
  pointer-events: none;
}

/* The line under it */
.contact-band__details {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 40px;
  margin-top: 36px;
  color: var(--band-muted);
  font-size: 16px;
  line-height: 1.5;
  list-style: none;
}

.contact-band__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 12px;
}

.contact-band__status {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--band-ink);
  font-weight: 600;
}

.contact-band__status:empty { display: none; }

.contact-band__status::before {
  width: 8px;
  height: 8px;
  box-sizing: border-box;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  content: "";
}

.contact-band__status.is-open::before { background: currentColor; }

.contact-band__line + .contact-band__line::before { content: ", "; }

.contact-band__item a {
  color: var(--band-ink);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--band-ink) 40%, transparent);
  text-underline-offset: 4px;
  transition: text-decoration-color 0.2s ease;
}

.contact-band__item a:hover,
.contact-band__item a:focus-visible { text-decoration-color: currentColor; }

@media (max-width: 799px) {
  .contact-band {
    --band-gutter: 20px;
  }

  .contact-band__details {
    flex-direction: column;
    gap: 10px;
    margin-top: 28px;
  }
}

/* templates/footers/visit-footer/footer.css */
/* Visit footer: the name and socials, the address and hours, columns of links, and the small print under a rule. */

.visit-footer {
  --footer-page: light-dark(#f5f5f7, #0a0a0b);
  --footer-ink: light-dark(#0a0a0b, #fff);

  --footer-muted: color-mix(in srgb, var(--footer-ink) 68%, transparent);
  --footer-line: color-mix(in srgb, var(--footer-ink) 9%, transparent);

  padding: 40px 7vw 20px;
  border-top: 1px solid var(--footer-line);
  /* A shade deeper than the page: a touch in light, half way to black in dark */
  background: var(--footer-bg, light-dark(color-mix(in srgb, var(--footer-page), #000 4%), color-mix(in srgb, var(--footer-page), #000 50%)));
  color: var(--footer-ink);
  font-family: var(--look-body, "Inter", system-ui, sans-serif);
  font-size: 14px;
}

:where(.visit-footer) p,
:where(.visit-footer) ul,
:where(.visit-footer) dl,
:where(.visit-footer) dd { margin: 0; }

.visit-footer a {
  color: inherit;
  text-decoration: none;
}

/* The name and the visit column wider, then a column per list of links */
.visit-footer__grid {
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
  grid-template-columns: 1.7fr 1.2fr;
  gap: 32px;
  padding-bottom: 32px;
}

/* The name, the line under it and the round-cornered social squares */
.visit-footer__brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--look-display, "Sora", system-ui, sans-serif);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.visit-footer__mark {
  width: 24px;
  height: 24px;
  box-sizing: border-box;
  border: 2px solid currentColor;
  border-radius: 50%;
}

.visit-footer__logo {
  width: auto;
  height: 30px;
}

.visit-footer__blurb {
  max-width: 30ch;
  margin: 12px 0 16px;
  color: var(--footer-muted);
  line-height: 1.6;
}

.visit-footer__social {
  display: flex;
  gap: 8px;
}

.visit-footer__social-link {
  position: relative;
  width: 32px;
  height: 32px;
  box-sizing: border-box;
  border: 1px solid color-mix(in srgb, var(--footer-ink) 12%, transparent);
  border-radius: 2px;
  color: var(--footer-muted);
  transition: color 0.2s ease, border-color 0.2s ease;
}

.visit-footer__social-link:hover {
  border-color: color-mix(in srgb, var(--footer-ink) 25%, transparent);
  color: var(--footer-ink);
}

.visit-footer__social-link::before {
  position: absolute;
  inset: 8px;
  background: currentColor;
  content: "";
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}

.visit-footer__social-link[data-network="facebook"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z'/%3E%3C/svg%3E"); }
.visit-footer__social-link[data-network="instagram"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='2' width='20' height='20' rx='5'/%3E%3Cpath d='M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37zM17.5 6.5h.01'/%3E%3C/svg%3E"); }
.visit-footer__social-link[data-network="linkedin"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-4 0v7h-4v-7a6 6 0 0 1 6-6zM2 9h4v12H2z'/%3E%3Ccircle cx='4' cy='4' r='2'/%3E%3C/svg%3E"); }
.visit-footer__social-link[data-network="youtube"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22.54 6.42a2.78 2.78 0 0 0-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 0 0-1.94 2A29 29 0 0 0 1 11.75a29 29 0 0 0 .46 5.33A2.78 2.78 0 0 0 3.4 19c1.72.46 8.6.46 8.6.46s6.88 0 8.6-.46a2.78 2.78 0 0 0 1.94-2 29 29 0 0 0 .46-5.25 29 29 0 0 0-.46-5.33z'/%3E%3Cpath d='m9.75 15.02 5.75-3.27-5.75-3.27v6.54z'/%3E%3C/svg%3E"); }

/* The columns: a mono label over the facts or links */
.visit-footer__label {
  margin-bottom: 12px;
  color: var(--footer-muted);
  font-family: var(--look-label, "IBM Plex Mono", ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.visit-footer__address {
  margin-bottom: 8px;
  color: var(--footer-muted);
  font-style: normal;
  line-height: 1.6;
}

.visit-footer__line { display: block; }

.visit-footer__directions {
  padding-bottom: 1px;
  border-bottom: 1px solid color-mix(in srgb, var(--footer-ink) 25%, transparent);
  transition: border-color 0.2s ease;
}

.visit-footer__directions:hover { border-color: currentColor; }

.visit-footer__hours {
  max-width: 14rem;
  margin-top: 16px;
  color: var(--footer-muted);
}

.visit-footer__hours > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  line-height: 1.7;
}

.visit-footer__hours dd { font-variant-numeric: tabular-nums; }

.visit-footer__hours .is-closed { opacity: 0.6; }

.visit-footer__links {
  padding: 0;
  list-style: none;
}

.visit-footer__links li + li { margin-top: 8px; }

.visit-footer__links a,
.visit-footer__legal a {
  color: var(--footer-muted);
  transition: color 0.2s ease;
}

.visit-footer__links a:hover,
.visit-footer__legal a:hover { color: var(--footer-ink); }

/* The small print */
.visit-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding-top: 20px;
  border-top: 1px solid var(--footer-line);
  font-size: 13px;
}

.visit-footer__copyright { color: var(--footer-muted); }

.visit-footer__legal {
  display: flex;
  gap: 24px;
}

@media (max-width: 1024px) {
  .visit-footer__grid {
    grid-auto-flow: row;
    grid-template-columns: 1fr 1fr;
    gap: 32px 24px;
  }

  .visit-footer__about { grid-column: 1 / -1; }

  .visit-footer__blurb { max-width: 52ch; }
}

@media (max-width: 560px) {
  .visit-footer { padding-top: 32px; }

  .visit-footer__grid { grid-template-columns: 1fr; }

  .visit-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* templates/others/back-to-top/top.css */
/* Back to top: a round frosted button in the bottom corner, shown once the page is scrolled down. */

.back-to-top {
  --top-ink: light-dark(#0a0a0b, #fff);

  position: fixed;
  z-index: 99;
  right: 2rem;
  /* --page-bottom-bar: the height of a bar docked at the bottom (the jump bar on phones) */
  bottom: calc(2rem + var(--page-bottom-bar, 0px));
  display: flex;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--top-ink) 15%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--top-ink) 8%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: var(--top-ink);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.back-to-top.is-shown {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.back-to-top:hover {
  border-color: color-mix(in srgb, var(--top-ink) 35%, transparent);
  background: color-mix(in srgb, var(--top-ink) 15%, transparent);
}

.back-to-top__arrow { transition: transform 0.2s ease; }
.back-to-top:hover .back-to-top__arrow { transform: translateY(-2px); }

@media (max-width: 1024px) {
  .back-to-top {
    right: 1.5rem;
    bottom: calc(1.5rem + var(--page-bottom-bar, 0px));
    width: 44px;
    height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .back-to-top,
  .back-to-top__arrow { transition: none; }
}

/* templates/palettes/palettes.css */
/* Palettes: sets of --palette-* color roles, each a light-dark() pair, worn via data-palette. */

/* Soft greens, all one hue. Health, wellness, therapy, spas, yoga. */
[data-palette="sage"] {
  color-scheme: light;
  --palette-bg: light-dark(#f5f9f3, #151c15);
  --palette-surface: light-dark(#d1edd3, #1e281e);
  --palette-ink: light-dark(#243324, #e3efe1);
  --palette-muted: light-dark(#4b5a48, #a9b8a5);
  --palette-line: light-dark(#acc5a6, #2f3d2e);
  --palette-accent: light-dark(#4e6249, #acc5a6);
  --palette-on-accent: light-dark(#fff, #151c15);
  --palette-highlight: light-dark(#acc5a6, #4e6249);
}

/* White and bright blue, with lime stars. Apps, software, agencies, startups. */
[data-palette="electric"] {
  color-scheme: light;
  --palette-bg: light-dark(#fff, #0b1220);
  --palette-surface: light-dark(#eef3fe, #121c30);
  --palette-ink: light-dark(#0b1b3a, #e8eefc);
  --palette-muted: light-dark(#4b5873, #9daac6);
  --palette-line: light-dark(#d6e2fb, #1e2a44);
  --palette-accent: light-dark(#1f68e0, #578ef5);
  --palette-on-accent: light-dark(#fff, #0b1220);
  --palette-highlight: light-dark(#f2f7a0, #1a5ccb);
}

/* Near-black and white, with a red line. Car dealers, electronics, tech, studios. */
[data-palette="carbon"] {
  color-scheme: dark;
  --palette-bg: light-dark(#f5f5f7, #0a0a0b);
  --palette-surface: light-dark(#fff, #141415);
  --palette-ink: light-dark(#0a0a0b, #fff);
  --palette-muted: light-dark(#5e5e63, #a3a3a6);
  --palette-line: light-dark(#e1e1e5, #232325);
  --palette-accent: light-dark(#0a0a0b, #fff);
  --palette-on-accent: light-dark(#fff, #0a0a0b);
  --palette-highlight: #c41e3a;
}

/* Black and white only. Architects, galleries, publishers, photographers. */
[data-palette="mono"] {
  color-scheme: light;
  --palette-bg: light-dark(#fff, #000);
  --palette-surface: light-dark(#f3f3f3, #121212);
  --palette-ink: light-dark(#0a0a0a, #f5f5f5);
  --palette-muted: light-dark(#595959, #a3a3a3);
  --palette-line: light-dark(#e0e0e0, #262626);
  --palette-accent: light-dark(#0a0a0a, #f5f5f5);
  --palette-on-accent: light-dark(#fff, #0a0a0a);
  --palette-highlight: light-dark(#262626, #d9d9d9);
}

/* Charcoal and cool grey, soft contrast. Consultancies, architects, software, studios. */
[data-palette="graphite"] {
  color-scheme: dark;
  --palette-bg: light-dark(#f2f3f5, #17181b);
  --palette-surface: light-dark(#e6e8eb, #202226);
  --palette-ink: light-dark(#16181c, #eceef1);
  --palette-muted: light-dark(#555a63, #9ca1aa);
  --palette-line: light-dark(#d3d6db, #2e3136);
  --palette-accent: light-dark(#2b2f36, #d8dce2);
  --palette-on-accent: light-dark(#fff, #17181b);
  --palette-highlight: light-dark(#6b7480, #8b95a3);
}

/* Pale grey and blue-grey, low contrast and calm. Architecture, interiors, counselling, studios. */
[data-palette="fog"] {
  color-scheme: light;
  --palette-bg: light-dark(#eef0f2, #1a1d21);
  --palette-surface: light-dark(#e3e6e9, #23272c);
  --palette-ink: light-dark(#23282e, #e3e6ea);
  --palette-muted: light-dark(#59616b, #a1a8b1);
  --palette-line: light-dark(#cfd4d9, #343a41);
  --palette-accent: light-dark(#3c4550, #c9d0d8);
  --palette-on-accent: light-dark(#fff, #1a1d21);
  --palette-highlight: light-dark(#6c7a89, #8d9aa8);
}

/* Blue-grey slate, quiet and even. Finance, insurance, software, public sector. */
[data-palette="slate"] {
  color-scheme: light;
  --palette-bg: light-dark(#f8fafc, #0f172a);
  --palette-surface: light-dark(#eef2f6, #1e293b);
  --palette-ink: light-dark(#0f172a, #f1f5f9);
  --palette-muted: light-dark(#475569, #94a3b8);
  --palette-line: light-dark(#dbe2ea, #334155);
  --palette-accent: light-dark(#334155, #e2e8f0);
  --palette-on-accent: light-dark(#fff, #0f172a);
  --palette-highlight: light-dark(#4f6d8f, #8aa4c4);
}

/* Light steel and steel blue. Engineering, manufacturing, logistics, energy. */
[data-palette="steel"] {
  color-scheme: light;
  --palette-bg: light-dark(#f4f6f8, #11161c);
  --palette-surface: light-dark(#e7ebef, #1a2129);
  --palette-ink: light-dark(#121a23, #e8edf2);
  --palette-muted: light-dark(#4d5966, #9aa6b3);
  --palette-line: light-dark(#d0d7de, #2a333d);
  --palette-accent: light-dark(#2f4a66, #b9cde0);
  --palette-on-accent: light-dark(#fff, #11161c);
  --palette-highlight: light-dark(#4a7aa8, #6f9cc8);
}

/* Deep ink navy and cool white. Law, banks, government, private offices. */
[data-palette="ink"] {
  color-scheme: dark;
  --palette-bg: light-dark(#f7f8fa, #0a1424);
  --palette-surface: light-dark(#eceff4, #111e33);
  --palette-ink: light-dark(#0a1424, #eef1f6);
  --palette-muted: light-dark(#4a556a, #a0aabb);
  --palette-line: light-dark(#d7dce5, #1f2d45);
  --palette-accent: light-dark(#13274a, #e6ebf3);
  --palette-on-accent: light-dark(#fff, #0a1424);
  --palette-highlight: light-dark(#3d5a8a, #7b96c4);
}

/* White and deep cobalt blue. Fintech, engineering, business software, universities. */
[data-palette="cobalt"] {
  color-scheme: light;
  --palette-bg: light-dark(#fff, #08112b);
  --palette-surface: light-dark(#f1f4fb, #0f1b3d);
  --palette-ink: light-dark(#0a1433, #e8edf9);
  --palette-muted: light-dark(#4a5574, #9ba7c6);
  --palette-line: light-dark(#dde3f1, #1c2a52);
  --palette-accent: light-dark(#1b3fa0, #9db4f2);
  --palette-on-accent: light-dark(#fff, #08112b);
  --palette-highlight: light-dark(#3463d9, #6f92ee);
}

/* Ice white and deep sea blue. Clinics, labs, research, pharma, water. */
[data-palette="glacier"] {
  color-scheme: light;
  --palette-bg: light-dark(#f5f9fc, #0b1a26);
  --palette-surface: light-dark(#e4eef5, #12263a);
  --palette-ink: light-dark(#0b2233, #e6f0f7);
  --palette-muted: light-dark(#46606f, #97b0c0);
  --palette-line: light-dark(#cddfea, #1d3549);
  --palette-accent: light-dark(#145a86, #7fb7dc);
  --palette-on-accent: light-dark(#fff, #0b1a26);
  --palette-highlight: light-dark(#2f88bd, #4fa3d6);
}

/* Blue-black with an ice-blue line. Security, AI, data, developer tools. */
[data-palette="obsidian"] {
  color-scheme: dark;
  --palette-bg: light-dark(#f6f7f9, #07090d);
  --palette-surface: light-dark(#eceef2, #10141b);
  --palette-ink: light-dark(#0b0f16, #e9edf3);
  --palette-muted: light-dark(#515a68, #8e98a8);
  --palette-line: light-dark(#dcdfe5, #1c222c);
  --palette-accent: light-dark(#0b0f16, #e9edf3);
  --palette-on-accent: light-dark(#fff, #07090d);
  --palette-highlight: light-dark(#1f6fd1, #8ccfff);
}

/* Deep blue-green and mist grey. Energy, maritime, insurance, engineering. */
[data-palette="petrol"] {
  color-scheme: dark;
  --palette-bg: light-dark(#f3f7f7, #0c2a30);
  --palette-surface: light-dark(#e2eced, #12363d);
  --palette-ink: light-dark(#0d2a30, #e4efef);
  --palette-muted: light-dark(#476166, #9bb6b9);
  --palette-line: light-dark(#cadcde, #1f4a52);
  --palette-accent: light-dark(#145863, #a9d3d8);
  --palette-on-accent: light-dark(#fff, #0c2a30);
  --palette-highlight: light-dark(#2f8a97, #5fb4bf);
}

/* Dark conifer green and silver. Private wealth, sustainability, estates, law. */
[data-palette="spruce"] {
  color-scheme: dark;
  --palette-bg: light-dark(#f4f6f5, #0e221e);
  --palette-surface: light-dark(#e4eae8, #142e29);
  --palette-ink: light-dark(#0f241f, #e5ece9);
  --palette-muted: light-dark(#4b5f59, #9fb3ac);
  --palette-line: light-dark(#cfdad6, #21413a);
  --palette-accent: light-dark(#1d4a40, #c3d6cf);
  --palette-on-accent: light-dark(#fff, #0e221e);
  --palette-highlight: light-dark(#3f7a6b, #6fa898);
}

/* Deep indigo and pale lilac-grey. Universities, publishers, legal tech, foundations. */
[data-palette="indigo"] {
  color-scheme: dark;
  --palette-bg: light-dark(#f6f6fb, #12122b);
  --palette-surface: light-dark(#ebebf6, #1b1b3c);
  --palette-ink: light-dark(#16163a, #ececf8);
  --palette-muted: light-dark(#4f4f72, #a3a3c4);
  --palette-line: light-dark(#dadaee, #2a2a52);
  --palette-accent: light-dark(#2f2f8a, #c6c6f2);
  --palette-on-accent: light-dark(#fff, #12122b);
  --palette-highlight: light-dark(#5050c8, #8f8fe8);
}


/* The page's mode (setMode) wins over each palette's own */
:is([data-mode="light"] [data-palette], [data-palette][data-mode="light"]) { color-scheme: light; }
:is([data-mode="dark"] [data-palette], [data-palette][data-mode="dark"]) { color-scheme: dark; }
:is([data-mode="auto"] [data-palette], [data-palette][data-mode="auto"]) { color-scheme: light dark; }


/* Whatever wears a palette gets its background and text, unless the template paints its own. */
:where([data-palette]:not(.pill-menu, .drawer-menu--overlay)) {
  background-color: var(--palette-bg);
  color: var(--palette-ink);
}

/* The page's palette wins over a plain body background added with addCss. */
body[data-palette] {
  background-color: var(--palette-bg);
  color: var(--palette-ink);
}


/* Each template's colors from the roles; a template's own palette wins over the page's. */

/* Menus */
:is([data-palette] .site-header, .site-header[data-palette]) {
  --ink: var(--palette-ink);
  --paper: var(--palette-bg);
}

:is([data-palette] .drawer-menu, .drawer-menu[data-palette]) {
  --drawer-ink: var(--palette-ink);
  --drawer-muted: var(--palette-muted);
  --drawer-line: var(--palette-line);
  --drawer-paper: var(--palette-bg);
  --drawer-panel: var(--palette-surface);
}

:is([data-palette] .pill-menu, .pill-menu[data-palette]) {
  --pill-ink: var(--palette-ink);
  --pill-muted: var(--palette-muted);
  --pill-hover: var(--palette-surface);
  --pill-line: var(--palette-line);
  --pill-glass: color-mix(in srgb, var(--palette-bg) 80%, transparent);
  --pill-button: var(--palette-accent);
  --pill-button-ink: var(--palette-on-accent);
}

:is([data-palette] .bar-menu, .bar-menu[data-palette]) {
  --bar-ink: var(--palette-ink);
  --bar-muted: var(--palette-muted);
  --bar-paper: var(--palette-bg);
  --bar-line: var(--palette-line);
  --bar-accent: var(--palette-accent);
  --bar-on-accent: var(--palette-on-accent);
}

:is([data-palette] .pulse-menu, .pulse-menu[data-palette]) { --pulse-ink: var(--palette-ink); --pulse-paper: var(--palette-bg); }
:is([data-palette] .ruler-menu, .ruler-menu[data-palette]) { --ruler-ink: var(--palette-ink); --ruler-paper: var(--palette-bg); }
:is([data-palette] .sketch-menu, .sketch-menu[data-palette]) { --sketch-ink: var(--palette-ink); --sketch-paper: var(--palette-bg); }
:is([data-palette] .thread-menu, .thread-menu[data-palette]) { --thread-ink: var(--palette-ink); --thread-paper: var(--palette-bg); }

/* Heroes */
:is([data-palette] .compare-hero, .compare-hero[data-palette]) { --compare-ink: var(--palette-ink); --compare-muted: var(--palette-muted); }
:is([data-palette] .event-hero, .event-hero[data-palette]) { --event-ink: var(--palette-ink); --event-muted: var(--palette-muted); }
:is([data-palette] .forge-hero, .forge-hero[data-palette]) { --forge-ink: var(--palette-ink); --forge-muted: var(--palette-muted); }
:is([data-palette] .zoom-hero, .zoom-hero[data-palette]) { --zoom-ink: var(--palette-ink); --zoom-muted: var(--palette-muted); }

:is([data-palette] .index-hero, .index-hero[data-palette]) {
  --index-ink: var(--palette-ink);
  --index-muted: var(--palette-muted);
  --index-line: var(--palette-line);
}

:is([data-palette] .local-hero, .local-hero[data-palette]) {
  --local-ink: var(--palette-ink);
  --local-muted: var(--palette-muted);
  --local-line: var(--palette-line);
  --local-paper: var(--palette-bg);
}

:is([data-palette] .product-hero, .product-hero[data-palette]) {
  --product-ink: var(--palette-ink);
  --product-muted: var(--palette-muted);
  --product-paper: var(--palette-bg);
}

:is([data-palette] .stack-hero, .stack-hero[data-palette]) {
  --stack-ink: var(--palette-ink);
  --stack-muted: var(--palette-muted);
  --stack-paper: var(--palette-surface);
}

:is([data-palette] .studio-hero, .studio-hero[data-palette]) {
  --studio-ink: var(--palette-ink);
  --studio-muted: var(--palette-muted);
  --studio-pen: var(--palette-accent);
}

:is([data-palette] .split-hero, .split-hero[data-palette]) {
  --split-ink: var(--palette-ink);
  --split-muted: var(--palette-muted);
  --split-paper: var(--palette-bg);
  --split-accent: var(--palette-accent);
  --split-on-accent: var(--palette-on-accent);
}

:is([data-palette] .mosaic-hero, .mosaic-hero[data-palette]) {
  --mosaic-ink: var(--palette-ink);
  --mosaic-muted: var(--palette-muted);
  --mosaic-paper: var(--palette-bg);
  --mosaic-accent: var(--palette-accent);
  --mosaic-on-accent: var(--palette-on-accent);
}

/* The overlay hero's words stay white on its photo; its button takes the page's colors. */
:is([data-palette] .overlay-hero, .overlay-hero[data-palette]) {
  --overlay-button: var(--palette-bg);
  --overlay-button-ink: var(--palette-ink);
}

/* The call hero's photo is washed in the accent, deepened so its white words always read. */
:is([data-palette] .call-hero, .call-hero[data-palette]) {
  --call-tint: color-mix(in srgb, var(--palette-accent) 55%, #02060c);
  --call-button-ink: color-mix(in srgb, var(--palette-accent) 55%, #02060c);
}

/* Footers (their softer text and lines are mixed from these two) */
:is([data-palette] :is(.center-footer, .columns-footer, .line-footer, .wordmark-footer),
    :is(.center-footer, .columns-footer, .line-footer, .wordmark-footer)[data-palette]) {
  --footer-bg: var(--palette-surface);
  --footer-ink: var(--palette-ink);
}

/* Sections (a timeline with its own setTheme keeps that theme's colors) */
:is([data-palette] .timeline, .timeline[data-palette]):not([class*="timeline--theme-"]) {
  --timeline-ink: var(--palette-ink);
  --timeline-muted: var(--palette-muted);
  --timeline-pen: var(--palette-accent);
}

/* Prices */
:is([data-palette] .price-list, .price-list[data-palette]) {
  --price-ink: var(--palette-ink);
  --price-muted: var(--palette-muted);
  --price-line: var(--palette-line);
  --price-accent: var(--palette-accent);
}

:is([data-palette] .price-plans, .price-plans[data-palette]) {
  --plans-bg: var(--palette-surface);
  --plans-card: var(--palette-bg);
  --plans-ink: var(--palette-ink);
  --plans-muted: var(--palette-muted);
  --plans-line: var(--palette-line);
  --plans-accent: var(--palette-accent);
  --plans-on-accent: var(--palette-on-accent);
}

/* Reviews */
:is([data-palette] .review-wall, .review-wall[data-palette]) {
  --wall-ink: var(--palette-ink);
  --wall-muted: var(--palette-muted);
  --wall-card: var(--palette-surface);
  --wall-accent: var(--palette-accent);
  --wall-star: var(--palette-highlight);
  --wall-dark: var(--palette-ink);
  --wall-dark-ink: var(--palette-bg);
  --wall-dark-muted: color-mix(in srgb, var(--palette-bg) 78%, var(--palette-ink));
}

:is([data-palette] .review-slider, .review-slider[data-palette]) {
  --slider-bg: var(--palette-ink);
  --slider-ink: var(--palette-bg);
  --slider-muted: color-mix(in srgb, var(--palette-bg) 78%, var(--palette-ink));
  --slider-accent: var(--palette-highlight);
  --slider-star: var(--palette-highlight);
}

/* Forms (the red for a wrong field stays red) */
:is([data-palette] .booking-form, .booking-form[data-palette]) {
  --form-ink: var(--palette-ink);
  --form-muted: var(--palette-muted);
  --form-paper: var(--palette-bg);
  --form-field: var(--palette-surface);
  --form-line: var(--palette-line);
  --form-accent: var(--palette-accent);
  --form-on-accent: var(--palette-on-accent);
  --form-done: var(--palette-accent);
}

:is([data-palette] .callback-form, .callback-form[data-palette]) {
  --form-bg: var(--palette-surface);
  --form-ink: var(--palette-ink);
  --form-muted: var(--palette-muted);
  --form-field: var(--palette-bg);
  --form-line: var(--palette-line);
  --form-accent: var(--palette-accent);
  --form-on-accent: var(--palette-on-accent);
  --form-done: var(--palette-accent);
}

/* Contact ("Open now" takes the accent; the words say it, so the green isn't needed) */
:is([data-palette] .contact-details, .contact-details[data-palette]) {
  --contact-ink: var(--palette-ink);
  --contact-muted: var(--palette-muted);
  --contact-line: var(--palette-line);
  --contact-accent: var(--palette-accent);
  --contact-card: var(--palette-surface);
  --contact-open: var(--palette-accent);
}

/* The band in the accent color, its softer text the full text color for contrast. */
:is([data-palette] .contact-band, .contact-band[data-palette]) {
  --band-bg: var(--palette-accent);
  --band-ink: var(--palette-on-accent);
  --band-muted: var(--palette-on-accent);
}

/* Text pages */
:is([data-palette] :is(.legal-text, .plain-text, .doc-text), :is(.legal-text, .plain-text, .doc-text)[data-palette]) {
  --text-ink: var(--palette-ink);
  --text-muted: var(--palette-muted);
  --text-line: var(--palette-line);
  --text-card: var(--palette-surface);
  --text-accent: var(--palette-accent);
}

/* The photo hero and photo sections; the photo band's dark card swaps bg and ink. */
:is([data-palette] .photo-hero, .photo-hero[data-palette]) {
  --photo-ink: var(--palette-ink);
  --photo-muted: var(--palette-muted);
  --photo-paper: var(--palette-bg);
  --photo-accent: var(--palette-accent);
  --photo-on-accent: var(--palette-on-accent);
}

:is([data-palette] .photo-band, .photo-band[data-palette]) {
  --placard-bg: var(--palette-ink);
  --placard-ink: var(--palette-bg);
  --placard-muted: color-mix(in srgb, var(--palette-bg) 78%, var(--palette-ink));
}

:is([data-palette] .image-rows, .image-rows[data-palette]) { --rows-ink: var(--palette-ink); --rows-muted: var(--palette-muted); --rows-accent: var(--palette-accent); }
:is([data-palette] .photo-grid, .photo-grid[data-palette]) { --grid-ink: var(--palette-ink); --grid-muted: var(--palette-muted); }

:is([data-palette] .photo-strip, .photo-strip[data-palette]) {
  --strip-ink: var(--palette-ink);
  --strip-muted: var(--palette-muted);
  --strip-line: var(--palette-line);
}

:is([data-palette] .team-grid, .team-grid[data-palette]) {
  --team-ink: var(--palette-ink);
  --team-muted: var(--palette-muted);
  --team-card: var(--palette-surface);
  --team-accent: var(--palette-accent);
}

:is([data-palette] .project-cards, .project-cards[data-palette]) {
  --projects-ink: var(--palette-ink);
  --projects-muted: var(--palette-muted);
  --projects-line: var(--palette-line);
  --projects-paper: var(--palette-bg);
}

:is([data-palette] .product-cards, .product-cards[data-palette]) {
  --products-ink: var(--palette-ink);
  --products-muted: var(--palette-muted);
  --products-line: var(--palette-line);
  --products-paper: var(--palette-bg);
}

:is([data-palette] .post-list, .post-list[data-palette]) {
  --posts-ink: var(--palette-ink);
  --posts-muted: var(--palette-muted);
  --posts-line: var(--palette-line);
  --posts-accent: var(--palette-accent);
}

:is([data-palette] .feature-grid, .feature-grid[data-palette]) {
  --features-ink: var(--palette-ink);
  --features-muted: var(--palette-muted);
  --features-line: var(--palette-line);
  --features-accent: var(--palette-accent);
  --features-on-accent: var(--palette-on-accent);
}

:is([data-palette] .bento-grid, .bento-grid[data-palette]) {
  --bento-ink: var(--palette-ink);
  --bento-muted: var(--palette-muted);
  --bento-card: var(--palette-surface);
  --bento-accent: var(--palette-accent);
  --bento-on-accent: var(--palette-on-accent);
}

:is([data-palette] .question-list, .question-list[data-palette]) {
  --questions-ink: var(--palette-ink);
  --questions-muted: var(--palette-muted);
  --questions-line: var(--palette-line);
  --questions-accent: var(--palette-accent);
}

/* Small sections; the road sign, calendar page and letter keep their own colors. */
:is([data-palette] .number-row, .number-row[data-palette]) {
  --numbers-ink: var(--palette-ink);
  --numbers-muted: var(--palette-muted);
  --numbers-accent: var(--palette-accent);
}

:is([data-palette] .big-quote, .big-quote[data-palette]) {
  --quote-bg: var(--palette-surface);
  --quote-ink: var(--palette-ink);
  --quote-muted: var(--palette-muted);
  --quote-accent: var(--palette-accent);
}

:is([data-palette] .three-steps, .three-steps[data-palette]) {
  --steps-ink: var(--palette-ink);
  --steps-muted: var(--palette-muted);
  --steps-pen: var(--palette-accent);
}

:is([data-palette] .trust-row, .trust-row[data-palette]) {
  --trust-ink: var(--palette-ink);
  --trust-muted: var(--palette-muted);
  --trust-line: var(--palette-line);
  --trust-tick: var(--palette-accent);
}

:is([data-palette] .week-strip, .week-strip[data-palette]) {
  --week-ink: var(--palette-ink);
  --week-muted: var(--palette-muted);
  --week-tile: var(--palette-surface);
  --week-today: var(--palette-accent);
  --week-on-today: var(--palette-on-accent);
  --week-sun: var(--palette-highlight);
}

/* The highlighter is a see-through wash of the accent, which always stands apart. */
:is([data-palette] .statement, .statement[data-palette]) {
  --statement-ink: var(--palette-ink);
  --statement-muted: var(--palette-muted);
  --statement-marker: color-mix(in srgb, var(--palette-accent) 26%, transparent);
}

:is([data-palette] :is(.road-sign, .owner-note), :is(.road-sign, .owner-note)[data-palette]) {
  --road-ink: var(--palette-ink);
  --road-muted: var(--palette-muted);
  --note-ink: var(--palette-ink);
}

:is([data-palette] .compare-table, .compare-table[data-palette]) {
  --compare-ink: var(--palette-ink);
  --compare-muted: var(--palette-muted);
  --compare-line: var(--palette-line);
  --compare-panel: var(--palette-surface);
  --compare-accent: var(--palette-accent);
}

:is([data-palette] .date-card, .date-card[data-palette]) {
  --date-ink: var(--palette-ink);
  --date-muted: var(--palette-muted);
  --date-on-ink: var(--palette-bg);
  --date-red: var(--palette-accent);
  --date-on-red: var(--palette-on-accent);
}

/* The rating band is dark, so it swaps bg and ink */
:is([data-palette] .rating-line, .rating-line[data-palette]) {
  --rating-bg: var(--palette-ink);
  --rating-ink: var(--palette-bg);
  --rating-muted: color-mix(in srgb, var(--palette-bg) 78%, var(--palette-ink));
  --rating-gold: var(--palette-highlight);
  --rating-dim: color-mix(in srgb, var(--palette-bg) 28%, var(--palette-ink));
}

:is([data-palette] .spec-sheet, .spec-sheet[data-palette]) {
  --spec-ink: var(--palette-ink);
  --spec-muted: var(--palette-muted);
  --spec-paper: var(--palette-surface);
  --spec-dot: var(--palette-line);
  --spec-frame: var(--palette-ink);
}

/* Objects: the paper takes the surface; the business card's dark back swaps bg and ink. */
:is([data-palette] .receipt, .receipt[data-palette]) {
  --receipt-ink: var(--palette-ink);
  --receipt-muted: var(--palette-muted);
  --receipt-paper: var(--palette-surface);
  --receipt-line: var(--palette-line);
}

:is([data-palette] .open-sign, .open-sign[data-palette]) {
  --sign-ink: var(--palette-ink);
  --sign-muted: var(--palette-muted);
  --sign-card: var(--palette-surface);
  --sign-line: var(--palette-line);
  --sign-accent: var(--palette-accent);
}

:is([data-palette] .punch-card, .punch-card[data-palette]) {
  --punch-ink: var(--palette-ink);
  --punch-muted: var(--palette-muted);
  --punch-card: var(--palette-surface);
  --punch-line: var(--palette-line);
  --punch-accent: var(--palette-accent);
}

:is([data-palette] .job-card, .job-card[data-palette]) {
  --job-ink: var(--palette-ink);
  --job-muted: var(--palette-muted);
  --job-sheet: var(--palette-surface);
  --job-line: var(--palette-line);
  --job-accent: var(--palette-accent);
}

:is([data-palette] .business-card, .business-card[data-palette]) {
  --card-ink: var(--palette-ink);
  --card-muted: var(--palette-muted);
  --card-paper: var(--palette-surface);
  --card-back: var(--palette-ink);
  --card-back-ink: var(--palette-bg);
  --card-accent: var(--palette-accent);
}

:is([data-palette] .postcard, .postcard[data-palette]) {
  --post-ink: var(--palette-ink);
  --post-muted: var(--palette-muted);
  --post-card: var(--palette-surface);
  --post-line: var(--palette-line);
  --post-accent: var(--palette-accent);
}

:is([data-palette] .price-tag, .price-tag[data-palette]) {
  --tag-ink: var(--palette-ink);
  --tag-muted: var(--palette-muted);
  --tag-line: var(--palette-line);
  --tag-color: var(--palette-accent);
  --tag-on-color: var(--palette-on-accent);
  --tag-on-ink: var(--palette-bg);
}

:is([data-palette] .guarantee-seal, .guarantee-seal[data-palette]) {
  --seal-ink: var(--palette-ink);
  --seal-muted: var(--palette-muted);
  --seal-accent: var(--palette-accent);
}

/* Showroom templates: the page's roles; "deep" bands are a touch darker in light and half way to black in dark. */
:is([data-palette] .panel-menu, .panel-menu[data-palette]) {
  --menu-bg: var(--palette-bg);
  --menu-surface: var(--palette-surface);
  --menu-ink: var(--palette-ink);
  --menu-muted: var(--palette-muted);
  --menu-line: var(--palette-line);
  --menu-accent: var(--palette-highlight);
}

:is([data-palette] :is(.video-hero, .banner-hero), :is(.video-hero, .banner-hero)[data-palette]) {
  --hero-bg: var(--palette-bg);
  --hero-ink: var(--palette-ink);
  --hero-muted: var(--palette-muted);
}

:is([data-palette] .stage-hero, .stage-hero[data-palette]) {
  --stage-bg: light-dark(color-mix(in srgb, var(--palette-bg), #000 4%), color-mix(in srgb, var(--palette-bg), #000 50%));
  --stage-ink: var(--palette-ink);
  --stage-muted: var(--palette-muted);
  --stage-line: var(--palette-line);
  --stage-glow: var(--palette-highlight);
}

:is([data-palette] .showcase-rows, .showcase-rows[data-palette]) {
  --rows-bg: var(--palette-bg);
  --rows-card: var(--palette-surface);
  --rows-ink: var(--palette-ink);
  --rows-muted: var(--palette-muted);
  --rows-line: var(--palette-line);
}

:is([data-palette] .fact-bar, .fact-bar[data-palette]) {
  --facts-bg: var(--palette-bg);
  --facts-ink: var(--palette-ink);
  --facts-muted: var(--palette-muted);
  --facts-line: var(--palette-line);
}

:is([data-palette] .story-split, .story-split[data-palette]) {
  --story-bg: var(--palette-bg);
  --story-ink: var(--palette-ink);
  --story-muted: var(--palette-muted);
}

:is([data-palette] .panel-split, .panel-split[data-palette]) {
  --split-bg: var(--palette-bg);
  --split-panel: color-mix(in srgb, var(--palette-surface), var(--palette-ink) 4%);
  --split-ink: var(--palette-ink);
  --split-muted: var(--palette-muted);
}

:is([data-palette] .pillar-grid, .pillar-grid[data-palette]) {
  --pillars-bg: var(--palette-bg);
  --pillars-ink: var(--palette-ink);
  --pillars-muted: var(--palette-muted);
}

:is([data-palette] .link-cards, .link-cards[data-palette]) {
  --cards-bg: var(--palette-surface);
  --cards-ink: var(--palette-ink);
}

:is([data-palette] :is(.filter-cards, .contact-cards), :is(.filter-cards, .contact-cards)[data-palette]) {
  --cards-bg: var(--palette-bg);
  --cards-card: var(--palette-surface);
  --cards-ink: var(--palette-ink);
  --cards-muted: var(--palette-muted);
  --cards-line: var(--palette-line);
  --cards-accent: var(--palette-highlight);
}

:is([data-palette] .cta-panel, .cta-panel[data-palette]) {
  --cta-bg: var(--palette-bg);
  --cta-ink: var(--palette-ink);
  --cta-muted: var(--palette-muted);
}

:is([data-palette] .jump-bar, .jump-bar[data-palette]) {
  --jump-bg: var(--palette-bg);
  --jump-ink: var(--palette-ink);
  --jump-muted: var(--palette-muted);
  --jump-line: var(--palette-line);
  --jump-accent: var(--palette-highlight);
}

:is([data-palette] .overview-split, .overview-split[data-palette]) {
  --overview-bg: var(--palette-bg);
  --overview-card: var(--palette-surface);
  --overview-ink: var(--palette-ink);
  --overview-muted: var(--palette-muted);
  --overview-line: var(--palette-line);
}

:is([data-palette] .spec-groups, .spec-groups[data-palette]) {
  --specs-bg: var(--palette-bg);
  --specs-card: var(--palette-surface);
  --specs-ink: var(--palette-ink);
  --specs-muted: var(--palette-muted);
  --specs-line: var(--palette-line);
}

:is([data-palette] .icon-tiles, .icon-tiles[data-palette]) {
  --tiles-bg: var(--palette-bg);
  --tiles-card: var(--palette-surface);
  --tiles-ink: var(--palette-ink);
  --tiles-muted: var(--palette-muted);
  --tiles-line: var(--palette-line);
}

:is([data-palette] .message-form, .message-form[data-palette]) {
  --message-bg: var(--palette-bg);
  --message-box: var(--palette-surface);
  --message-ink: var(--palette-ink);
  --message-muted: var(--palette-muted);
  --message-line: var(--palette-line);
  --message-accent: var(--palette-highlight);
}

:is([data-palette] .visit-footer, .visit-footer[data-palette]) {
  --footer-page: var(--palette-bg);
  --footer-ink: var(--palette-ink);
}

:is([data-palette] .back-to-top, .back-to-top[data-palette]) { --top-ink: var(--palette-ink); }

:is([data-palette] .scroll-progress, .scroll-progress[data-palette]) { --progress-color: var(--palette-highlight); }

/* Buttons and links */
:is([data-palette] .sketch-button, .sketch-button[data-palette]) { color: var(--palette-accent); }

/* The buttons in templates/buttons share these roles; the glass button keeps its own colors. */
:is(
  [data-palette] :is(.solid-button, .outline-button, .ghost-button, .link-button, .icon-button, .caption-button, .badge-button, .notice-button, .split-button, .submit-button, .edge-button, .avatar-button),
  :is(.solid-button, .outline-button, .ghost-button, .link-button, .icon-button, .caption-button, .badge-button, .notice-button, .split-button, .submit-button, .edge-button, .avatar-button)[data-palette],
  [data-palette] :is(.press-button, .arrow-button, .wipe-button, .roll-button, .shine-button, .trace-button, .corner-button, .line-button, .highlight-button, .price-button, .call-button, .map-button, .copy-button, .ticket-button, .ring-button),
  :is(.press-button, .arrow-button, .wipe-button, .roll-button, .shine-button, .trace-button, .corner-button, .line-button, .highlight-button, .price-button, .call-button, .map-button, .copy-button, .ticket-button, .ring-button)[data-palette]
) {
  --button-color: var(--palette-accent);
  --button-on-color: var(--palette-on-accent);
  --button-ink: var(--palette-ink);
  --button-paper: var(--palette-surface);
  --button-highlight: var(--palette-highlight);
}

/* templates/looks/looks.css */
/* Looks: --look-* font and corner roles, worn via data-look; templates fall back to their own. */

/* Geist throughout, softly rounded. Cafés, bakeries, clinics, accountants. */
[data-look="minimal"] {
  --look-display: "Geist", system-ui, sans-serif;
  --look-display-weight: 600;
  --look-display-tracking: -0.035em;
  --look-display-leading: 1.04;
  --look-display-case: none;
  --look-display-scale: 0.96;
  --look-body: "Geist", system-ui, sans-serif;
  --look-label: "Geist", system-ui, sans-serif;
  --look-label-case: none;
  --look-label-tracking: 0;
  --look-label-scale: 1;
  --look-radius: 10px;
  --look-control-radius: 6px;
}

/* Heavy upper-case Archivo, square corners. Garages, electricians, builders. */
[data-look="industrial"] {
  --look-display: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --look-display-weight: 800;
  --look-display-tracking: -0.025em;
  --look-display-leading: 0.94;
  --look-display-case: uppercase;
  --look-display-scale: 0.9;
  --look-body: "Archivo", system-ui, sans-serif;
  --look-label: "JetBrains Mono", ui-monospace, monospace;
  --look-label-case: uppercase;
  --look-label-tracking: 0.08em;
  --look-label-scale: 0.9;
  --look-radius: 0;
  --look-control-radius: 0;
}

/* Cormorant Garamond over Manrope, pill buttons. Salons, spas, florists, weddings. */
[data-look="luxe"] {
  --look-display: "Cormorant Garamond", Georgia, serif;
  --look-display-weight: 500;
  --look-display-tracking: -0.01em;
  --look-display-leading: 1.02;
  --look-display-case: none;
  --look-display-scale: 1.14;
  --look-body: "Manrope", system-ui, sans-serif;
  --look-label: "Manrope", system-ui, sans-serif;
  --look-label-case: uppercase;
  --look-label-tracking: 0.16em;
  --look-label-scale: 0.9;
  --look-radius: 24px;
  --look-control-radius: 999px;
}

/* Young Serif over Instrument Sans. Restaurants, wine bars, delis, guesthouses. */
[data-look="editorial"] {
  --look-display: "Young Serif", Georgia, serif;
  --look-display-weight: 400;
  --look-display-tracking: -0.015em;
  --look-display-leading: 1.06;
  --look-display-case: none;
  --look-display-scale: 0.94;
  --look-body: "Instrument Sans", system-ui, sans-serif;
  --look-label: "Instrument Sans", system-ui, sans-serif;
  --look-label-case: none;
  --look-label-tracking: 0.01em;
  --look-label-scale: 1;
  --look-radius: 4px;
  --look-control-radius: 4px;
}

/* Sora over Inter, mono labels and pill buttons. Car dealers, electronics, tech, studios. */
[data-look="sleek"] {
  --look-display: "Sora", system-ui, sans-serif;
  --look-display-weight: 700;
  --look-display-tracking: -0.03em;
  --look-display-leading: 1.05;
  --look-display-case: none;
  --look-display-scale: 1;
  --look-body: "Inter", system-ui, sans-serif;
  --look-label: "IBM Plex Mono", ui-monospace, monospace;
  --look-label-case: uppercase;
  --look-label-tracking: 0.16em;
  --look-label-scale: 0.85;
  --look-radius: 16px;
  --look-control-radius: 999px;
}

/* Tight Inter headings, square corners. Architects, consultancies, design studios. */
[data-look="swiss"] {
  --look-display: "Inter Tight", "Inter", system-ui, sans-serif;
  --look-display-weight: 600;
  --look-display-tracking: -0.045em;
  --look-display-leading: 0.98;
  --look-display-case: none;
  --look-display-scale: 1.02;
  --look-body: "Inter", system-ui, sans-serif;
  --look-label: "Inter", system-ui, sans-serif;
  --look-label-case: uppercase;
  --look-label-tracking: 0.08em;
  --look-label-scale: 0.8;
  --look-radius: 0;
  --look-control-radius: 0;
}

/* IBM Plex Sans with Plex Mono labels, small corners. Engineering, insurers, public sector. */
[data-look="corporate"] {
  --look-display: "IBM Plex Sans", system-ui, sans-serif;
  --look-display-weight: 600;
  --look-display-tracking: -0.02em;
  --look-display-leading: 1.1;
  --look-display-case: none;
  --look-display-scale: 0.96;
  --look-body: "IBM Plex Sans", system-ui, sans-serif;
  --look-label: "IBM Plex Mono", ui-monospace, monospace;
  --look-label-case: uppercase;
  --look-label-tracking: 0.06em;
  --look-label-scale: 0.85;
  --look-radius: 4px;
  --look-control-radius: 4px;
}

/* Source Serif over Source Sans, fine corners. Law firms, private banks, accountants. */
[data-look="classic"] {
  --look-display: "Source Serif 4", Georgia, serif;
  --look-display-weight: 600;
  --look-display-tracking: -0.015em;
  --look-display-leading: 1.08;
  --look-display-case: none;
  --look-display-scale: 1;
  --look-body: "Source Sans 3", system-ui, sans-serif;
  --look-label: "Source Sans 3", system-ui, sans-serif;
  --look-label-case: uppercase;
  --look-label-tracking: 0.12em;
  --look-label-scale: 0.85;
  --look-radius: 2px;
  --look-control-radius: 2px;
}

/* Newsreader throughout, square corners. Publishers, think tanks, universities, journals. */
[data-look="gazette"] {
  --look-display: "Newsreader", Georgia, serif;
  --look-display-weight: 500;
  --look-display-tracking: -0.02em;
  --look-display-leading: 1.04;
  --look-display-case: none;
  --look-display-scale: 1.08;
  --look-body: "Newsreader", Georgia, serif;
  --look-label: "Newsreader", Georgia, serif;
  --look-label-case: uppercase;
  --look-label-tracking: 0.12em;
  --look-label-scale: 0.85;
  --look-radius: 0;
  --look-control-radius: 0;
}

/* JetBrains Mono headings over Inter. Developer tools, security, data, labs. */
[data-look="technical"] {
  --look-display: "JetBrains Mono", ui-monospace, monospace;
  --look-display-weight: 600;
  --look-display-tracking: -0.04em;
  --look-display-leading: 1.08;
  --look-display-case: none;
  --look-display-scale: 0.86;
  --look-body: "Inter", system-ui, sans-serif;
  --look-label: "JetBrains Mono", ui-monospace, monospace;
  --look-label-case: uppercase;
  --look-label-tracking: 0.04em;
  --look-label-scale: 0.85;
  --look-radius: 6px;
  --look-control-radius: 6px;
}

/* Plus Jakarta Sans throughout, rounded. Fintech, software, health tech. */
[data-look="modern"] {
  --look-display: "Plus Jakarta Sans", system-ui, sans-serif;
  --look-display-weight: 700;
  --look-display-tracking: -0.02em;
  --look-display-leading: 1.04;
  --look-display-case: none;
  --look-display-scale: 0.98;
  --look-body: "Plus Jakarta Sans", system-ui, sans-serif;
  --look-label: "Plus Jakarta Sans", system-ui, sans-serif;
  --look-label-case: uppercase;
  --look-label-tracking: 0.1em;
  --look-label-scale: 0.82;
  --look-radius: 14px;
  --look-control-radius: 10px;
}

/* Barlow Condensed capitals over Barlow. Infrastructure, energy, transport, public services. */
[data-look="civic"] {
  --look-display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --look-display-weight: 600;
  --look-display-tracking: 0;
  --look-display-leading: 0.96;
  --look-display-case: uppercase;
  --look-display-scale: 1.12;
  --look-body: "Barlow", system-ui, sans-serif;
  --look-label: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --look-label-case: uppercase;
  --look-label-tracking: 0.08em;
  --look-label-scale: 1;
  --look-radius: 2px;
  --look-control-radius: 2px;
}

/* Under a look: its body font, lining numbers and no fake italics. */
:where([data-look]) {
  font-family: var(--look-body);
  font-feature-settings: "lnum";
  font-synthesis-style: none;
}

/* site.css */
html { scroll-padding-top: 80px; }