/* 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/text/legal-text/text.css */
/* Legal text: a sticky contents card beside the text, numbered by CSS counters. */

.legal-text {
  --text-ink: #1b2a3a;
  --text-muted: #5f6b78;
  --text-line: #e6e0d6;
  --text-card: #f6f1e8;
  --text-accent: #c2410c;
  --text-gutter: 40px;

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

:where(.legal-text) h1,
:where(.legal-text) p,
:where(.legal-text) ol,
:where(.legal-text) ul { margin: 0; }

/* Title, the line about it, the date */
.legal-text__head { max-width: 760px; }

.legal-text__title {
  font-family: var(--look-display, inherit);
  font-size: calc(clamp(40px, 6vw, 64px) * 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.04);
  text-transform: var(--look-display-case, none);
  text-wrap: balance;
}

.legal-text__intro {
  margin-top: 18px;
  color: var(--text-muted);
  font-size: 20px;
  line-height: 1.5;
}

.legal-text__updated {
  display: inline-block;
  margin-top: 20px;
  padding: 5px 12px;
  border-radius: var(--look-control-radius, 999px);
  background: var(--text-card);
  color: var(--text-muted);
  font-size: 14px;
}

/* Contents beside the text */
.legal-text__columns {
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 680px);
  gap: 72px;
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid var(--text-line);
}

.legal-text__columns:not(:has(.legal-text__contents)) { grid-template-columns: minmax(0, 680px); }

.legal-text__contents {
  position: sticky;
  top: 120px;
  align-self: start;
  padding: 22px 24px;
  border-radius: var(--look-radius, 16px);
  background: var(--text-card);
  font-size: 15px;
  line-height: 1.4;
}

.legal-text__contents ol {
  display: grid;
  gap: 12px;
  padding: 0;
  list-style: none;
  counter-reset: contents;
}

.legal-text__contents li {
  display: flex;
  gap: 10px;
  counter-increment: contents;
}

.legal-text__contents li::before {
  min-width: 18px;
  color: var(--text-accent);
  content: counter(contents);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.legal-text__contents a {
  color: var(--text-ink);
  text-decoration: none;
  transition: color 0.2s ease;
}

.legal-text__contents a:hover,
.legal-text__contents a:focus-visible { color: var(--text-accent); }

/* The text */
.legal-text__body {
  font-size: 17px;
  line-height: 1.7;
  counter-reset: heading;
}

.legal-text__body h2 {
  margin: 52px 0 12px;
  font-family: var(--look-display, inherit);
  font-size: calc(23px * var(--look-display-scale, 1));
  font-weight: var(--look-display-weight, 700);
  letter-spacing: var(--look-display-tracking, -0.01em);
  line-height: var(--look-display-leading, 1.25);
  text-transform: var(--look-display-case, none);
  counter-increment: heading;
  scroll-margin-top: 110px;
}

.legal-text__body h2:first-child { margin-top: 0; }

.legal-text__body h2::before {
  display: inline-block;
  min-width: 34px;
  color: var(--text-accent);
  content: counter(heading);
  font-variant-numeric: tabular-nums;
}

.legal-text__body p + p,
.legal-text__body p + ul,
.legal-text__body p + ol,
.legal-text__body ul + p,
.legal-text__body ol + p { margin-top: 16px; }

.legal-text__body ul,
.legal-text__body ol { padding-left: 22px; }

.legal-text__body li + li { margin-top: 6px; }

.legal-text__body li::marker { color: var(--text-accent); }

.legal-text__body a {
  color: var(--text-accent);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--text-accent) 35%, transparent);
  text-underline-offset: 4px;
}

.legal-text__body a:hover,
.legal-text__body a:focus-visible { text-decoration-color: currentColor; }

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

  .legal-text__intro { font-size: 18px; }

  .legal-text__columns {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
    margin-top: 40px;
    padding-top: 28px;
  }

  .legal-text__contents { position: static; }

  .legal-text__body h2 {
    margin-top: 44px;
    font-size: calc(21px * var(--look-display-scale, 1));
  }

  .legal-text__body h2::before { min-width: 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/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; }