/* =================================================================
   kirk-co.com
   The specification is DESIGN.md; this file implements it. Every
   color, size, space, radius, shadow and duration is a token below.
   A rule that needs a value the tokens do not have is a change to
   DESIGN.md first. Checked by qa/kirk-co-design-unit.py and
   qa/kirk-co-design-browser.cjs.
   ================================================================= */

@font-face {
  font-family: "Newsreader";
  src: url("/assets/fonts/newsreader-500-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("/assets/fonts/newsreader-500-italic-latin.woff2") format("woff2");
  font-style: italic;
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("/assets/fonts/ibm-plex-sans-400-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("/assets/fonts/ibm-plex-sans-500-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("/assets/fonts/ibm-plex-sans-600-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

:root {
  /* Color: the palette */
  --cream: #f5f0e4;
  --cream-2: #eae1cf;
  --teal-deep: #073e3b;
  --teal: #0f6b63;
  --gold: #b58c32;
  --gold-soft: #d5be7b;
  --ink: #121615;
  --ink-muted: #5a5e58;
  --stone: #a6a99f;
  --white: #ffffff;
  --error: #9e3324;
  --scrim: rgba(18, 22, 21, .56);

  /* Color: roles */
  --line: var(--gold-soft);
  --line-strong: var(--gold);
  --control: var(--ink-muted);
  --line-on-dark: var(--teal);

  /* Depth: one elevation, only on what is raised above the page:
     screenshots, the hero's paper fragments, the connected record and the
     phone menu. Cards, artifacts and the header stay flat with a hairline. */
  --shadow: 0 2px 6px rgba(18, 22, 21, .1), 0 16px 40px -16px rgba(18, 22, 21, .4);

  /* Type */
  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --font-sans: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --t-hero: 2.75rem;      --lh-hero: 3rem;
  --t-display: 2.5rem;    --lh-display: 2.75rem;
  --t-statement: 2rem;    --lh-statement: 2.5rem;
  --t-h2: 2rem;           --lh-h2: 2.5rem;
  --t-title: 1.5rem;      --lh-title: 2rem;
  --t-h3: 1.5rem;         --lh-h3: 2rem;
  --t-quote: 1.5rem;      --lh-quote: 2rem;
  --t-lead: 1.125rem;     --lh-lead: 1.75rem;
  --t-body: 1rem;         --lh-body: 1.5rem;
  --t-ui: 1rem;           --lh-ui: 1.5rem;
  --t-small: .875rem;     --lh-small: 1.25rem;
  --t-label: .75rem;      --lh-label: 1rem;

  /* Space: an 8-point scale */
  --s-1: 8px;  --s-2: 16px; --s-3: 24px; --s-4: 32px;
  --s-5: 48px; --s-6: 64px; --s-7: 96px; --s-8: 128px;
  --gutter: var(--s-2);
  --section: var(--s-6);
  --card-pad: var(--s-3);
  --header-h: 64px;

  /* Shape */
  --radius: 8px;
  --container: 1280px;
  --control-h: 48px;
  --port: 16px;

  /* Motion */
  --t-control: 200ms;
  --t-content: 360ms;
  --ease: cubic-bezier(.2, 0, 0, 1);
}
@media (min-width: 768px) {
  :root {
    --gutter: var(--s-4); --section: var(--s-7); --card-pad: var(--s-4); --header-h: 72px;
    --t-hero: 4rem;       --lh-hero: 4.25rem;
    --t-display: 3.5rem;  --lh-display: 3.75rem;
    --t-statement: 2.75rem; --lh-statement: 3.25rem;
    --t-h2: 2.5rem;       --lh-h2: 3rem;
    --t-title: 1.75rem;   --lh-title: 2.25rem;
  }
}
@media (min-width: 1024px) {
  :root {
    --gutter: var(--s-5);
    --t-title: 2rem;      --lh-title: 2.5rem;
    --t-hero: 5rem;       --lh-hero: 5.25rem;
    --t-display: 4rem;    --lh-display: 4.25rem;
    --t-statement: 3rem;  --lh-statement: 3.5rem;
    --t-lead: 1.25rem;    --lh-lead: 2rem;
    --t-body: 1.0625rem;  --lh-body: 1.75rem;
    --t-quote: 2rem;      --lh-quote: 2.5rem;
  }
}
@media (min-width: 1200px) {
  :root {
    --section: var(--s-8);
    --t-hero: 6rem;       --lh-hero: 6.25rem;
    --t-display: 4.5rem;  --lh-display: 4.75rem;
    --t-statement: 3.5rem; --lh-statement: 4rem;
    --t-h2: 3rem;         --lh-h2: 3.5rem;
  }
}

/* ---- Base ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--header-h); }
html, body { overflow-x: clip; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.menu-open { overflow: hidden; }
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 500; text-wrap: balance; }
h1 { font-size: var(--t-display); line-height: var(--lh-display); letter-spacing: -.02em; }
h2 { font-size: var(--t-h2); line-height: var(--lh-h2); letter-spacing: -.01em; }
h3 { font-size: var(--t-h3); line-height: var(--lh-h3); }
h1 em, h2 em { font-style: italic; }
p { text-wrap: pretty; }
p + p { margin-top: var(--s-2); }
strong, b { font-weight: 600; }
a { color: var(--teal); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color var(--t-control) var(--ease), text-decoration-color var(--t-control) var(--ease); }
a:hover { color: var(--teal-deep); text-decoration-color: var(--gold); }
/* An address or number never splits at its hyphen. */
a[href^="mailto:"], a[href^="tel:"] { white-space: nowrap; }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
::selection { background: var(--gold-soft); color: var(--ink); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.skip-link {
  position: absolute;
  z-index: 40;
  top: var(--s-1);
  left: var(--s-1);
  padding: var(--s-1) var(--s-2);
  border-radius: var(--radius);
  background: var(--cream);
  color: var(--ink);
  font-weight: 500;
}
.skip-link:not(:focus) { clip: rect(0 0 0 0); clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; white-space: nowrap; }

/* ---- Text roles ------------------------------------------------------- */
.eyebrow {
  margin: 0 0 var(--s-2);
  color: var(--ink-muted);
  font-size: var(--t-small);
  line-height: var(--lh-small);
  font-weight: 500;
  letter-spacing: .02em;
}
/* The section mark: a diamond cut from the crown's inset stones. */
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: var(--s-2);
  background: var(--gold);
  transform: rotate(45deg) translateY(-1px);
  vertical-align: middle;
}
/* A chapter number on the home page, after the diamond. */
.label {
  font-size: var(--t-label);
  line-height: var(--lh-label);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.lead { max-width: 60ch; font-size: var(--t-lead); line-height: var(--lh-lead); color: var(--ink); }
.small, figcaption, .meta { font-size: var(--t-small); line-height: var(--lh-small); color: var(--ink-muted); }
.muted { color: var(--ink-muted); }
.prose { max-width: 66ch; }
.prose p + p, .prose p + ul, .prose ul + p { margin-top: var(--s-2); }
.prose ul { padding-left: var(--s-3); }
.prose li + li { margin-top: var(--s-1); }
.measure { max-width: 66ch; }
h2.statement { font-size: var(--t-statement); line-height: var(--lh-statement); letter-spacing: -.015em; }

/* ---- Layout ------------------------------------------------------------ */
.container { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: var(--section) 0; }
.section--alt { background: var(--cream-2); }
.section--rule { border-top: 1px solid var(--line); }
.section-head { max-width: 800px; margin-bottom: var(--s-6); }
.section-head .lead { margin-top: var(--s-3); }
.section-head--split { max-width: none; }

/* A 12-column grid from 1024px; one column below. */
.grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); align-items: start; }
@media (min-width: 1024px) {
  .grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-4); row-gap: var(--s-5); }
  .span-3 { --span: 3; grid-column: span 3; }
  .span-4 { --span: 4; grid-column: span 4; }
  .span-5 { --span: 5; grid-column: span 5; }
  .span-6 { --span: 6; grid-column: span 6; }
  .span-7 { --span: 7; grid-column: span 7; }
  .span-8 { --span: 8; grid-column: span 8; }
  .span-12 { grid-column: 1 / -1; }
  /* A start keeps its element's span. */
  .start-5 { grid-column: 5 / span var(--span, 1); }
  .start-6 { grid-column: 6 / span var(--span, 1); }
  .start-7 { grid-column: 7 / span var(--span, 1); }
  .start-8 { grid-column: 8 / span var(--span, 1); }
  .start-9 { grid-column: 9 / span var(--span, 1); }
  .grid--center { align-items: center; }
  .section-head--split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-4); align-items: end; }
  .section-head--split > :first-child { grid-column: span 7; }
  .section-head--split > .lead { grid-column: 9 / -1; margin-top: 0; }
}
.columns { display: grid; gap: var(--s-3); }
@media (min-width: 768px) {
  .columns--2, .columns--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .columns { gap: var(--s-4); }
  .columns--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---- Dark stages --------------------------------------------------------
   Near-black for the opening and closing of a story, teal-deep for
   Horizline and the footer. Cream follows a dark stage as relief. */
.stage { background: var(--ink); color: var(--cream); }
.section--dark { background: var(--teal-deep); color: var(--cream); }
.stage .eyebrow, .section--dark .eyebrow { color: var(--gold-soft); }
.stage .eyebrow::before, .section--dark .eyebrow::before { background: var(--gold); }
.section--dark .eyebrow::before { background: var(--gold-soft); }
.stage h1, .stage h2, .stage h3, .stage .lead,
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark .lead { color: var(--cream); }
.stage .muted, .stage .small, .stage figcaption, .stage .meta,
.section--dark .muted, .section--dark .small, .section--dark figcaption { color: var(--stone); }
.section--dark .muted, .section--dark .small, .section--dark figcaption { color: var(--cream-2); }
.stage a:not(.button), .section--dark a:not(.button) { color: var(--cream); text-decoration-color: var(--gold); }
.stage a:not(.button):hover, .section--dark a:not(.button):hover { color: var(--gold-soft); }
.stage :focus-visible, .section--dark :focus-visible { outline-color: var(--gold-soft); }
.stage .button, .section--dark .button { background: var(--cream); border-color: var(--cream); color: var(--ink); }
.stage .button:hover, .section--dark .button:hover { background: var(--gold-soft); border-color: var(--gold-soft); color: var(--ink); }
.stage .button--secondary, .section--dark .button--secondary { background: transparent; border-color: var(--stone); color: var(--cream); }
.section--dark .button--secondary { border-color: var(--gold-soft); }
.stage .button--secondary:hover { background: var(--teal-deep); border-color: var(--cream); color: var(--cream); }
.section--dark .button--secondary:hover { background: var(--teal); border-color: var(--cream); color: var(--cream); }
.stage .text-link, .section--dark .text-link { text-decoration-color: var(--gold); }

/* ---- Header ---------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  height: var(--header-h);
  background: var(--ink);
  border-bottom: 1px solid var(--line-on-dark);
  color: var(--cream);
}
.site-header .container { display: flex; align-items: center; gap: var(--s-4); height: 100%; }
.site-header :focus-visible { outline-color: var(--gold-soft); }
.wordmark { display: inline-flex; align-items: center; min-height: 44px; margin-right: auto; }
.wordmark img { width: auto; height: 32px; }
@media (min-width: 768px) { .wordmark img { height: 40px; } }
.site-nav { display: none; }
.site-nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--cream);
  font-size: var(--t-ui);
  line-height: var(--lh-ui);
  font-weight: 500;
  text-decoration: none;
}
.site-nav a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: var(--s-1);
  left: 0;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-control) var(--ease);
}
.site-nav a:hover { color: var(--gold-soft); }
.site-nav a[aria-current="page"]::after { transform: scaleX(1); }
.site-header .header-cta { display: none; background: var(--cream); border-color: var(--cream); color: var(--ink); }
.site-header .header-cta:hover { background: var(--gold-soft); border-color: var(--gold-soft); color: var(--ink); }
.menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  min-height: var(--control-h);
  padding: 0 var(--s-2);
  border: 1px solid var(--stone);
  border-radius: var(--radius);
  background: transparent;
  color: var(--cream);
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--t-control) var(--ease), border-color var(--t-control) var(--ease);
}
.menu-toggle:hover { background: var(--teal-deep); border-color: var(--cream); }
.menu-toggle__icon { position: relative; width: 16px; height: 16px; }
.menu-toggle__icon i { position: absolute; left: 0; width: 16px; height: 2px; background: var(--cream); transition: transform var(--t-control) var(--ease); }
.menu-toggle__icon i:first-child { top: 4px; }
.menu-toggle__icon i:last-child { top: 10px; }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon i:first-child { transform: translateY(3px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon i:last-child { transform: translateY(-3px) rotate(-45deg); }
@media (min-width: 768px) {
  .site-header .header-cta { display: inline-flex; }
}
@media (min-width: 1024px) {
  .site-nav { display: flex; gap: var(--s-4); }
  .menu-toggle { display: none; }
}

/* The phone menu: a panel dropping from the header, sized to its content. */
.menu-scrim {
  position: fixed;
  z-index: 28;
  top: var(--header-h);
  right: 0;
  bottom: 0;
  left: 0;
  background: var(--scrim);
  animation: fade var(--t-content) var(--ease);
}
.mobile-menu {
  position: fixed;
  z-index: 29;
  top: var(--header-h);
  right: 0;
  left: 0;
  max-height: calc(100dvh - var(--header-h));
  overflow-y: auto;
  background: var(--ink);
  color: var(--cream);
  border-bottom: 1px solid var(--line-on-dark);
  box-shadow: var(--shadow);
  animation: drop var(--t-content) var(--ease);
}
.mobile-menu :focus-visible { outline-color: var(--gold-soft); }
.mobile-menu__inner { padding-top: var(--s-1); padding-bottom: var(--s-4); }
.mobile-menu__nav { display: grid; }
.mobile-menu__nav a {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--line-on-dark);
  color: var(--cream);
  font-family: var(--font-display);
  font-size: var(--t-h3);
  line-height: var(--lh-h3);
  text-decoration: none;
}
.mobile-menu__nav a span { min-width: var(--s-3); color: var(--gold); font-family: var(--font-sans); font-size: var(--t-label); line-height: var(--lh-label); font-weight: 600; letter-spacing: .08em; }
.mobile-menu__nav a:hover, .mobile-menu__nav a[aria-current="page"] { color: var(--gold-soft); }
.mobile-menu__foot { display: grid; gap: var(--s-2); margin-top: var(--s-3); }
.mobile-menu__foot .button { width: 100%; background: var(--cream); border-color: var(--cream); color: var(--ink); }
.mobile-menu__contact { display: flex; flex-wrap: wrap; gap: 0 var(--s-3); font-size: var(--t-small); line-height: var(--lh-small); color: var(--stone); }
.mobile-menu__contact a { display: inline-flex; align-items: center; min-height: 44px; color: var(--cream); }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes drop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (min-width: 1024px) { .mobile-menu, .menu-scrim { display: none !important; } }

/* ---- Buttons and links --------------------------------------------- */
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-top: var(--s-4); }
@media (max-width: 479px) { .actions .button { flex: 1 1 100%; } }
.button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-1);
  min-height: var(--control-h);
  padding: 0 var(--s-3);
  border: 1px solid var(--teal-deep);
  border-radius: var(--radius);
  background: var(--teal-deep);
  color: var(--cream);
  font-size: var(--t-ui);
  line-height: var(--lh-ui);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--t-control) var(--ease), border-color var(--t-control) var(--ease), color var(--t-control) var(--ease);
}
.button:hover { background: var(--teal); border-color: var(--teal); color: var(--cream); text-decoration: none; }
.button:active { background: var(--teal-deep); border-color: var(--teal-deep); }
.button--secondary { background: transparent; border-color: var(--control); color: var(--ink); }
.button--secondary:hover { background: var(--cream-2); border-color: var(--teal-deep); color: var(--teal-deep); }
.button--secondary:active { background: var(--cream-2); border-color: var(--ink); }
.button__label { display: inline-block; }
.button .spinner { display: none; }
.button[aria-busy="true"] { cursor: progress; }
.button[aria-busy="true"] .button__label { visibility: hidden; }
.button[aria-busy="true"] .spinner {
  position: absolute;
  top: calc(50% - var(--s-1));
  left: calc(50% - var(--s-1));
  display: block;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.text-link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  min-height: 44px;
  font-weight: 500;
  text-decoration-color: var(--line);
}
.arrow { display: inline-block; transition: transform var(--t-control) var(--ease); }
a:hover > .arrow { transform: translateX(4px); }

/* ---- Cards and figures ------------------------------------------------ */
.card { padding: var(--card-pad); border: 1px solid var(--line); border-radius: var(--radius); background: var(--cream); }
.section--alt .card { background: var(--cream); }
.card h3 + p, .card h3 + ul { margin-top: var(--s-1); }
.card .text-link { margin-top: var(--s-1); }
/* Cards in a row share a height; a closing link sits on the bottom edge of each. */
.card:has(> .text-link:last-child) { display: flex; flex-direction: column; }
.card:has(> .text-link:last-child) > :nth-last-child(2) { flex-grow: 1; }
.card > .text-link:last-child { align-self: flex-start; }
.card__kicker { margin-bottom: var(--s-1); color: var(--teal); }
.shot { margin: 0; }
.shot img, .shot picture { border-radius: var(--radius); }
.shot img { width: 100%; border: 1px solid var(--line); background: var(--cream-2); }
.shot figcaption { margin-top: var(--s-2); }
.shot--elevated img { box-shadow: var(--shadow); }
.stage .shot img, .section--dark .shot img { border-color: var(--line-on-dark); box-shadow: var(--shadow); }
/* Images fade in once decoded (js/kirk-co.js); without it they simply appear. */
.js img.is-pending { opacity: 0; }
.js img.is-loaded { opacity: 1; transition: opacity var(--t-content) var(--ease); }
.checks { list-style: none; display: grid; gap: var(--s-2); }
.checks li { position: relative; padding-left: var(--s-3); }
.checks li::before { content: ""; position: absolute; top: 10px; left: 0; width: 8px; height: 8px; background: var(--gold); transform: rotate(45deg); }
.section--dark .checks li::before { background: var(--gold-soft); }
.facts { display: grid; border-top: 1px solid var(--line); }
.facts div { display: grid; gap: 0; padding: var(--s-2) 0; border-bottom: 1px solid var(--line); }
.facts dt { color: var(--ink-muted); font-size: var(--t-small); line-height: var(--lh-small); }
.facts dd a { display: inline-flex; align-items: center; gap: var(--s-1); min-height: 44px; }
@media (min-width: 768px) { .facts div { grid-template-columns: 200px 1fr; gap: var(--s-2); align-items: baseline; } }

/* ---- Page openings ---------------------------------------------------- */
.page-hero { padding: var(--s-6) 0 var(--section); }
.page-hero h1 { max-width: 20ch; }
h1.title--statement { font-size: var(--t-statement); line-height: var(--lh-statement); letter-spacing: -.015em; }
.page-hero .lead { margin-top: var(--s-3); }
@media (min-width: 768px) { .page-hero { padding-top: var(--s-7); } }
.page-hero.stage { padding-bottom: var(--s-7); }
@media (min-width: 1200px) { .page-hero.stage { padding: var(--s-8) 0; } }
.section-lead { margin-top: var(--s-3); }
/* A section heading's lead or prose sits one step below it wherever it is placed. */
h2 + .lead, h2 + .prose { margin-top: var(--s-3); }
.product-mark { display: inline-flex; margin-bottom: var(--s-3); }
.product-mark img { width: auto; height: 32px; }
.link-list { list-style: none; display: grid; max-width: 480px; margin-top: var(--s-4); border-top: 1px solid var(--line); }
.link-list li { border-bottom: 1px solid var(--line); }
.link-list .text-link { width: 100%; min-height: 48px; text-decoration: none; }
.terms { max-width: 60ch; margin-top: var(--s-3); color: var(--ink-muted); font-size: var(--t-small); line-height: var(--lh-small); }
.section--dark .terms { color: var(--cream-2); }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s-1); margin-bottom: var(--s-4); color: var(--stone); font-size: var(--t-small); line-height: var(--lh-small); list-style: none; }
.crumbs a { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; }
.crumbs li + li::before { content: "/"; margin-right: var(--s-1); color: var(--stone); }

/* ---- Home: the hero --------------------------------------------------- */
.hero { padding: var(--s-6) 0 var(--s-7); }
.hero__grid { display: grid; gap: var(--s-6); align-items: center; }
.hero__title { max-width: 13ch; font-size: var(--t-hero); line-height: var(--lh-hero); letter-spacing: -.025em; }
.hero__title em { color: var(--gold-soft); }
.hero__lead { max-width: 52ch; margin-top: var(--s-4); color: var(--cream-2); }
.hero .actions { margin-top: var(--s-5); }
.hero__byline { display: flex; align-items: center; gap: var(--s-2); max-width: 52ch; margin-top: var(--s-5); padding-top: var(--s-3); border-top: 1px solid var(--line-on-dark); }
.hero__byline img { flex: none; width: 48px; height: 48px; border-radius: var(--radius); }
.hero__byline p { color: var(--stone); font-size: var(--t-small); line-height: var(--lh-small); }
.hero__byline strong { color: var(--cream); font-weight: 500; }
@media (min-width: 1024px) {
  .hero { display: flex; align-items: center; min-height: calc(100svh - var(--header-h)); padding: var(--s-6) 0; }
  .hero__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-4); }
  .hero__copy { grid-column: 1 / span 7; }
  .hero .scene { grid-column: 8 / -1; }
}

/* The scene: one job kept in six places. Cream fragments scattered on the
   dark stage, joined by the dashed lines of copying by hand. The script
   draws those lines and carries one request along them, once. */
.scene { position: relative; margin: 0; }
.scene__sheet { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3) var(--s-2); padding: var(--s-3) var(--s-1) var(--s-4); }
.scene__wires { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.frag {
  position: relative;
  z-index: 1;
  min-width: 0;
  padding: var(--s-1) var(--s-2) var(--s-2);
  border: 1px solid var(--cream);
  border-radius: var(--radius);
  background: var(--cream);
  color: var(--ink);
  box-shadow: var(--shadow);
  font-size: var(--t-small);
  line-height: var(--lh-small);
  outline: 2px solid transparent;
  outline-offset: 4px;
  transition: outline-color var(--t-content) var(--ease), transform var(--t-content) var(--ease);
}
.frag p + p { margin-top: 0; }
.frag__tool { display: flex; justify-content: space-between; gap: var(--s-1); margin-bottom: var(--s-1); color: var(--ink-muted); }
.frag__title { font-weight: 600; overflow-wrap: anywhere; }
.frag__meta { color: var(--ink-muted); }
.frag--note { border-color: var(--gold-soft); background: var(--gold-soft); }
.frag--note .frag__tool { color: var(--ink); }
/* Red on gold-soft is 3.9:1, so the note's flag is ink with the red marker. */
.frag--note .flag { color: var(--ink); }
.frag--mail { transform: rotate(-2deg); }
.frag--sheet { transform: rotate(1.5deg) translateY(16px); }
.frag--cal { transform: rotate(1deg) translateY(-8px); }
.frag--inv { transform: rotate(-1.5deg) translateY(8px); }
.frag--text { transform: rotate(2deg); }
.frag--note { transform: rotate(-2.5deg) translateY(8px); }
.frag--text, .frag--note { display: none; }
.frag.is-hit { outline-color: var(--gold); }
.frag__table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.frag__table th { padding: 0 var(--s-1) 0 0; border: 0; background: transparent; color: var(--ink-muted); font-size: var(--t-label); line-height: var(--lh-label); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.frag__table td { padding: 0 var(--s-1) 0 0; border: 0; font-weight: 600; }
.flag { display: inline-flex; align-items: center; gap: var(--s-1); margin-top: var(--s-1); color: var(--error); font-size: var(--t-label); line-height: var(--lh-label); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.flag::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--error); }
.scene__caption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s-1); margin-top: var(--s-3); padding-top: var(--s-2); border-top: 1px solid var(--gold); }
.scene__caption strong { color: var(--cream); font-weight: 500; }
.wire-copy { fill: none; stroke: var(--stone); stroke-width: 1.5; stroke-dasharray: 4 6; }
.scene__token { fill: var(--gold); stroke: var(--ink); stroke-width: 2; }
@media (min-width: 768px) {
  .scene__sheet { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4) var(--s-3); padding: var(--s-4) var(--s-2) var(--s-5); }
  .frag--text, .frag--note { display: block; }
}
@media (min-width: 1024px) {
  .scene__sheet { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4) var(--s-3); }
  .frag--mail { transform: rotate(-2deg) translateX(-8px); }
  .frag--cal { transform: rotate(1deg) translate(8px, -8px); }
  .frag--note { transform: rotate(-2.5deg) translate(-8px, 8px); }
}

/* ---- Home: the transformation, step by step ---------------------------- */
.seq { display: grid; gap: var(--s-5); }
.seq__steps { list-style: none; border-top: 1px solid var(--line-on-dark); }
.seq__step { position: relative; padding: var(--s-2) 0 var(--s-2) var(--s-5); border-bottom: 1px solid var(--line-on-dark); }
.seq__step::before { content: ""; position: absolute; top: 0; bottom: 0; left: 11px; width: 2px; background: var(--line-on-dark); }
.seq__bar { position: absolute; top: 0; bottom: 0; left: 11px; width: 2px; background: var(--gold); transform: scaleY(0); transform-origin: top; }
.seq__node { position: absolute; top: 24px; left: 6px; width: 12px; height: 12px; border: 2px solid var(--gold); background: var(--ink); transform: rotate(45deg); transition: background-color var(--t-content) var(--ease); }
.seq__step h3 { display: flex; align-items: baseline; gap: var(--s-2); min-height: var(--s-4); font-size: var(--t-h3); line-height: var(--lh-h3); }
.seq__step p { margin-top: var(--s-1); color: var(--stone); }
.seq__num { flex: none; color: var(--gold); font-family: var(--font-sans); font-size: var(--t-label); line-height: var(--lh-label); font-weight: 600; letter-spacing: .08em; }
/* Without the script every step is shown, the drawing is complete, and the rail is gold. */
.seq__bar { transform: scaleY(1); }
.seq__node { background: var(--gold); }
.seq__step button {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  width: 100%;
  min-height: var(--control-h);
  padding: var(--s-1) 0;
  border: 0;
  background: transparent;
  color: var(--cream);
  text-align: left;
  cursor: pointer;
  transition: color var(--t-control) var(--ease);
}
.seq__step button:hover { color: var(--gold-soft); }
.seq.is-enhanced .seq__step { padding-top: var(--s-1); padding-bottom: var(--s-1); }
.seq.is-enhanced .seq__step p { padding-bottom: var(--s-1); }
.seq.is-enhanced .seq__step:not(.is-current) button { color: var(--stone); }
.seq.is-enhanced .seq__step:not(.is-current) button:hover { color: var(--cream); }
.seq.is-enhanced .seq__bar { transform: scaleY(var(--p, 0)); }
.seq.is-enhanced .seq__step.is-past .seq__bar { transform: scaleY(1); }
.seq.is-enhanced .seq__node { background: var(--ink); }
.seq.is-enhanced .seq__step.is-current .seq__node, .seq.is-enhanced .seq__step.is-past .seq__node { background: var(--gold); }
.seq__controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-1) var(--s-2); margin-top: var(--s-3); }
.seq__count { color: var(--stone); font-size: var(--t-small); line-height: var(--lh-small); font-variant-numeric: tabular-nums; }
.play {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  min-height: var(--control-h);
  padding: 0 var(--s-2);
  border: 1px solid var(--stone);
  border-radius: var(--radius);
  background: transparent;
  color: var(--cream);
  font-size: var(--t-small);
  line-height: var(--lh-small);
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--t-control) var(--ease), border-color var(--t-control) var(--ease);
}
.play:hover { background: var(--teal-deep); border-color: var(--cream); }
.play i { display: block; width: 8px; height: 8px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.play[data-mode="play"] i, .play[data-mode="replay"] i { width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 8px solid currentColor; border-right: 0; }
/* Below 1024px a compact stepper: six numbered buttons, then the current
   step alone. The steps share one grid cell, so the cell keeps the height
   of the longest and the drawing under it never moves. */
.seq__dots { display: none; }
@media (max-width: 1023px) {
  .seq.is-enhanced .seq__dots { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin-bottom: var(--s-3); border: 1px solid var(--line-on-dark); border-radius: var(--radius); overflow: hidden; }
  .seq__dots button { position: relative; min-height: var(--control-h); padding: 0; border: 0; border-left: 1px solid var(--line-on-dark); background: transparent; color: var(--stone); font-size: var(--t-label); line-height: var(--lh-label); font-weight: 600; letter-spacing: .08em; font-variant-numeric: tabular-nums; cursor: pointer; transition: background-color var(--t-control) var(--ease), color var(--t-control) var(--ease); }
  .seq__dots button:first-child { border-left: 0; }
  .seq__dots button:hover { color: var(--cream); }
  .seq__dots button.is-past { color: var(--gold); }
  .seq__dots button[aria-current="step"] { background: var(--teal-deep); color: var(--cream); }
  .seq__dots button::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: left; }
  .seq__dots button.is-past::after { transform: scaleX(1); }
  .seq__dots button[aria-current="step"]::after { transform: scaleX(var(--p, 0)); }
  .seq.is-enhanced .seq__steps { display: grid; border-top: 0; }
  .seq.is-enhanced .seq__step { grid-area: 1 / 1; padding: 0; border-bottom: 0; visibility: hidden; opacity: 0; transition: opacity var(--t-content) var(--ease), visibility 0ms linear var(--t-content); }
  .seq.is-enhanced .seq__step.is-current { visibility: visible; opacity: 1; transition: opacity var(--t-content) var(--ease), visibility 0ms; }
  .seq.is-enhanced .seq__step::before, .seq.is-enhanced .seq__bar, .seq.is-enhanced .seq__node, .seq.is-enhanced .seq__num { display: none; }
  .seq.is-enhanced .seq__step button { min-height: 44px; padding: 0; }
  .seq.is-enhanced .seq__step:not(.is-current) button { color: var(--cream); }
  .seq.is-enhanced .seq__controls { margin-top: var(--s-2); }
}
@media (min-width: 1024px) {
  .seq { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-4); align-items: start; }
  .seq__rail { grid-column: span 4; }
  /* The drawing stays in view while the steps beside it scroll past. */
  .seq__figure { position: sticky; top: calc(var(--header-h) + var(--s-4)); grid-column: 5 / -1; }
}

.seq__figure { margin: 0; }
.seq__stage {
  position: relative;
  display: grid;
  grid-template-areas: "tools" "record" "people" "insight";
  gap: var(--s-5);
  padding: var(--s-4) var(--s-2);
  border: 1px solid var(--line-on-dark);
  border-radius: var(--radius);
  overflow: hidden;
}
.seq__wires { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.seq__tools { grid-area: tools; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
.tool {
  position: relative;
  z-index: 1;
  min-width: 0;
  padding: var(--s-1) var(--s-2);
  border: 1px solid var(--cream);
  border-radius: var(--radius);
  background: var(--cream);
  color: var(--ink);
  font-size: var(--t-small);
  line-height: var(--lh-small);
  transition: transform var(--t-content) var(--ease), opacity var(--t-content) var(--ease), border-color var(--t-content) var(--ease), outline-color var(--t-content) var(--ease);
  outline: 2px solid transparent;
  outline-offset: 4px;
}
.tool p + p { margin-top: 0; }
.tool__name { display: flex; justify-content: space-between; gap: var(--s-1); color: var(--ink-muted); }
.tool__line { font-weight: 600; }
.tool__flag { color: var(--error); opacity: 0; transition: opacity var(--t-content) var(--ease); }
.record {
  position: relative;
  z-index: 1;
  grid-area: record;
  padding: var(--s-2);
  border: 1px dashed var(--stone);
  border-radius: var(--radius);
  background: var(--ink);
  font-size: var(--t-small);
  line-height: var(--lh-small);
  transition: border-color var(--t-content) var(--ease), background-color var(--t-content) var(--ease), box-shadow var(--t-content) var(--ease);
}
.record p + p { margin-top: 0; }
.record__head { display: flex; justify-content: space-between; gap: var(--s-1); margin-bottom: var(--s-1); color: var(--gold-soft); }
.record__rows { display: grid; }
.record__rows div { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--s-2); padding: var(--s-1) 0; border-top: 1px solid var(--line-on-dark); }
.record__rows dt { color: var(--stone); }
.record__rows dd { color: var(--cream); font-weight: 600; }
.seq__people { grid-area: people; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-1); list-style: none; }
.person {
  position: relative;
  z-index: 1;
  display: grid;
  min-width: 0;
  padding: var(--s-1);
  border: 1px solid var(--line-on-dark);
  border-radius: var(--radius);
  background: var(--ink);
  font-size: var(--t-small);
  line-height: var(--lh-small);
  opacity: .48;
  transition: opacity var(--t-content) var(--ease), border-color var(--t-content) var(--ease);
}
.person .label { color: var(--gold-soft); }
.person__sees { color: var(--cream); font-weight: 500; }
.insight {
  position: relative;
  z-index: 1;
  grid-area: insight;
  padding: var(--s-2);
  border: 1px solid var(--line-on-dark);
  border-radius: var(--radius);
  background: var(--ink);
  font-size: var(--t-small);
  line-height: var(--lh-small);
  opacity: .48;
  transition: opacity var(--t-content) var(--ease), border-color var(--t-content) var(--ease), background-color var(--t-content) var(--ease);
}
.insight p + p { margin-top: 0; }
.insight .label { color: var(--gold-soft); }
.insight__value { color: var(--cream); font-size: var(--t-ui); line-height: var(--lh-ui); font-weight: 600; font-variant-numeric: tabular-nums; }
.seq__caption { margin-top: var(--s-2); }

/* States. Values swap in place (one grid cell), so nothing moves. */
.swap { display: grid; }
.swap > span { grid-area: 1 / 1; opacity: 0; transition: opacity var(--t-content) var(--ease); }
.swap > span:first-child { opacity: 1; }
.is-copied .swap--copy > span:first-child, .is-linked .swap--link > span:first-child,
.is-shared .swap--share > span:first-child, .is-paid .swap--paid > span:first-child { opacity: 0; }
.is-copied .swap--copy > span:nth-child(2), .is-linked .swap--link > span:nth-child(2),
.is-shared .swap--share > span:nth-child(2), .is-paid .swap--paid > span:nth-child(2) { opacity: 1; }
.is-linked .swap--copy > span:nth-child(2) { opacity: 0; }
.is-linked .swap--copy > span:nth-child(3) { opacity: 1; }
.seq__stage[data-step="1"] .tool:not([data-node="inbox"]) { opacity: .48; }
.seq__stage[data-step="1"] .tool[data-node="inbox"] { outline-color: var(--gold); }
.is-drift .tool__flag { opacity: 1; }
.is-drift .swap--copy > span:nth-child(2) { color: var(--error); }
.is-drift .tool[data-node="sheet"] { transform: rotate(-1.5deg) translateX(-4px); }
.is-drift .tool[data-node="cal"] { transform: rotate(1.5deg) translateX(4px); }
.is-drift .tool[data-node="acct"] { transform: rotate(-1deg) translateY(4px); }
.is-linked .record { border-style: solid; border-color: var(--gold); background: var(--teal-deep); box-shadow: var(--shadow); }
.is-linked .tool { border-color: var(--gold); }
.is-shared .person { opacity: 1; border-color: var(--gold); }
.is-paid .insight { opacity: 1; border-color: var(--gold); background: var(--teal-deep); }
.is-paid .bars i:nth-child(6) { transform: scaleY(.95); }
.bars { display: flex; align-items: flex-end; gap: var(--s-1); height: 32px; margin-top: var(--s-1); }
.bars i { flex: 1; height: 100%; background: var(--teal); transform-origin: bottom; }
.bars i:nth-child(1) { transform: scaleY(.45); }
.bars i:nth-child(2) { transform: scaleY(.6); }
.bars i:nth-child(3) { transform: scaleY(.5); }
.bars i:nth-child(4) { transform: scaleY(.75); }
.bars i:nth-child(5) { transform: scaleY(.7); }
.bars i:nth-child(6) { background: var(--gold); transform: scaleY(.55); transition: transform var(--t-content) var(--ease); }
.seq__stage .bars { height: 32px; }
.wire { fill: none; stroke: var(--gold); stroke-width: 2; transition: stroke-dashoffset var(--t-content) var(--ease), opacity var(--t-content) var(--ease); }
.wire--copy { stroke: var(--stone); stroke-width: 1.5; stroke-dasharray: 4 6; opacity: 0; }
.is-copied .wire--copy { opacity: 1; }
.is-linked .wire--copy { opacity: 0; }
.wire-port { fill: var(--ink); stroke: var(--gold); stroke-width: 2; opacity: 0; transition: opacity var(--t-content) var(--ease); }
.wire-port.is-on { opacity: 1; }
@media (max-width: 767px) {
  .seq__stage { gap: var(--s-4); padding: var(--s-3) var(--s-2); }
  .record__rows div:nth-child(2) { display: none; }
  .insight .bars { display: none; }
}
@media (max-width: 1023px) {
  .frag__table th:nth-child(2), .frag__table td:nth-child(2), .frag--sheet .frag__tool span + span { display: none; }
}
@media (min-width: 768px) {
  .seq__stage {
    grid-template-columns: minmax(0, 4fr) minmax(0, 6fr) minmax(0, 3fr);
    grid-template-areas: "tools record people" "tools insight people";
    gap: var(--s-4) var(--s-5);
    padding: var(--s-5) var(--s-4);
    align-items: center;
  }
  .seq__tools { grid-template-columns: minmax(0, 1fr); align-self: stretch; align-content: space-between; }
  .seq__people { grid-template-columns: minmax(0, 1fr); gap: var(--s-2); align-self: stretch; align-content: space-around; }
  .person { padding: var(--s-1) var(--s-2); }
  .record { padding: var(--s-3); align-self: end; }
  .insight { align-self: start; }
}

/* ---- Home: what you can check ------------------------------------------ */
.ledger { list-style: none; display: grid; gap: var(--s-5) var(--s-4); }
.ledger li { position: relative; display: flex; flex-direction: column; padding-top: var(--s-4); border-top: 2px solid var(--gold); }
.ledger li::before { content: ""; position: absolute; top: -7px; left: 0; width: 12px; height: 12px; border: 2px solid var(--gold); background: var(--cream); transform: rotate(45deg); }
.ledger .label { color: var(--teal); }
.ledger h3 { margin-top: var(--s-1); }
.ledger p:not(.label) { margin-top: var(--s-1); color: var(--ink-muted); }
.ledger li > :nth-last-child(2) { flex-grow: 1; }
.ledger .text-link { align-self: flex-start; padding-top: var(--s-2); }
@media (min-width: 768px) { .ledger { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .ledger { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---- Case studies ------------------------------------------------------ */
.case { display: grid; gap: var(--s-5); }
.case + .case { margin-top: var(--s-7); padding-top: var(--s-7); border-top: 1px solid var(--line); }
.case__label { color: var(--teal); }
.case__title { margin-top: var(--s-2); font-size: var(--t-title); line-height: var(--lh-title); }
.case__lead { margin-top: var(--s-3); }
.case__facts { display: grid; margin-top: var(--s-4); border-top: 1px solid var(--line); }
.case__facts div { display: grid; gap: var(--s-1); padding: var(--s-2) 0; border-bottom: 1px solid var(--line); }
.case__facts dt { color: var(--ink-muted); }
.case__facts dd { color: var(--ink); }
.case .actions { margin-top: var(--s-4); }
.case__media { position: relative; margin: 0; }
.case__frame { position: relative; }
.case__frame img { width: 100%; border: 1px solid var(--line); border-radius: var(--radius); background: var(--cream-2); box-shadow: var(--shadow); }
.case__inset { position: absolute; right: calc(-1 * var(--s-2)); bottom: calc(-1 * var(--s-4)); width: 48%; }
.case__media figcaption { margin-top: var(--s-3); }
.case--dark-media .case__frame img { border-color: var(--ink); }
.case__media--pair .case__frame { margin-bottom: var(--s-5); }
.case__media figcaption > .small { display: block; margin-top: var(--s-2); }
/* Numbered marks on a screenshot, explained in its legend. */
.mark {
  position: absolute;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--gold-soft);
  color: var(--ink);
  font-size: var(--t-label);
  line-height: var(--lh-label);
  font-weight: 600;
  transform: translate(-50%, -50%);
}
.mark--1 { top: 31%; left: 23%; }
.mark--2 { top: 31%; left: 62.5%; }
.mark--3 { top: 53%; left: 22.5%; }
.legend { list-style: none; display: grid; gap: var(--s-1); margin-top: var(--s-3); font-size: var(--t-small); line-height: var(--lh-small); }
.legend li { display: grid; grid-template-columns: var(--s-4) minmax(0, 1fr); color: var(--ink-muted); }
.legend b { color: var(--ink); font-weight: 600; }
.case__number { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-2); margin-top: var(--s-4); padding-top: var(--s-3); border-top: 2px solid var(--gold); }
.case__number strong { font-family: var(--font-display); font-size: var(--t-statement); line-height: var(--lh-statement); font-weight: 500; letter-spacing: -.01em; }
.case__number span { color: var(--ink-muted); }
@media (min-width: 1024px) {
  .case { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-4); align-items: center; }
  .case__text { grid-column: 1 / span 5; }
  .case__media { grid-column: 7 / -1; }
  .case--flip .case__text { grid-column: 8 / -1; grid-row: 1; }
  .case--flip .case__media { grid-column: 1 / span 6; grid-row: 1; }
  .case__facts div { grid-template-columns: 96px minmax(0, 1fr); gap: var(--s-2); }
}

/* Client websites on the Work page: one row each, image and story. */
.stories { list-style: none; display: grid; }
.story-row { display: grid; gap: var(--s-3); padding: var(--s-6) 0; border-top: 1px solid var(--line); }
.story-row:first-child { padding-top: 0; border-top: 0; }
.story-row img { width: 100%; border: 1px solid var(--line); border-radius: var(--radius); background: var(--cream-2); }
.story-row h3 { margin-top: var(--s-1); }
.story-row .case__facts { margin-top: var(--s-3); }
.story-row .text-link { margin-top: var(--s-2); }
.work-more { margin-top: var(--s-4); }
@media (min-width: 1024px) {
  .story-row { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-4); align-items: start; }
  .story-row > picture { grid-column: 1 / span 6; }
  .story-row > div { grid-column: 8 / -1; }
  .story-row:nth-child(even) > picture { grid-column: 7 / -1; grid-row: 1; }
  .story-row:nth-child(even) > div { grid-column: 1 / span 5; grid-row: 1; }
}

/* Client sites: a compact row after the case studies. */
.sites { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4) var(--s-2); }
.site { display: grid; gap: var(--s-1); align-content: start; }
.site img { width: 100%; border: 1px solid var(--line); border-radius: var(--radius); background: var(--cream-2); }
.site p + p { margin-top: 0; }
.site__name { font-weight: 600; }
.site__type { color: var(--ink-muted); }
.sites-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-1) var(--s-3); margin-top: var(--s-7); margin-bottom: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--line); }
.sites-head h3 { max-width: 32ch; }
@media (min-width: 1024px) { .sites { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); } }

/* ---- Problems: choose one, see the system that usually fixes it -------- */
.picker { border-top: 1px solid var(--line); }
.pick { position: relative; border-bottom: 1px solid var(--line); }
.pick summary {
  display: grid;
  grid-template-columns: var(--s-4) minmax(0, 1fr) var(--s-4);
  align-items: center;
  gap: var(--s-2);
  min-height: 80px;
  padding: var(--s-2) 0;
  list-style: none;
  cursor: pointer;
}
.pick summary::-webkit-details-marker { display: none; }
.pick__num { color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.pick__q { font-size: var(--t-h3); line-height: var(--lh-h3); transition: color var(--t-control) var(--ease); }
.pick summary:hover .pick__q { color: var(--teal); }
.pick[open] .pick__q { color: var(--teal-deep); }
.pick[open] .pick__num { color: var(--teal); }
/* A plus that becomes a minus. */
.pick__icon { position: relative; justify-self: end; width: 16px; height: 16px; }
.pick__icon::before, .pick__icon::after { content: ""; position: absolute; top: 7px; left: 0; width: 16px; height: 2px; background: var(--gold); transition: transform var(--t-control) var(--ease); }
.pick__icon::after { transform: rotate(90deg); }
.pick[open] .pick__icon::after { transform: rotate(0deg); }
/* The connector runs from the open problem down through its answer. */
.pick__body { position: relative; padding: 0 0 var(--s-5) var(--s-5); }
.pick__body::before { content: ""; position: absolute; top: 0; bottom: var(--s-4); left: 7px; width: 2px; background: var(--gold); }
.pick__grid { display: grid; gap: var(--s-3); }
.pick__grid dt { margin-bottom: var(--s-1); color: var(--teal); }
.pick__grid dd { color: var(--ink); }
.pick__grid ul { list-style: none; display: grid; gap: var(--s-1); }
.pick__grid li { position: relative; padding-left: var(--s-3); }
.pick__grid li::before { content: ""; position: absolute; top: 10px; left: 0; width: 8px; height: 8px; background: var(--gold); transform: rotate(45deg); }
.pick__system { font-family: var(--font-display); font-size: var(--t-h3); line-height: var(--lh-h3); }
.pick__example { display: grid; gap: var(--s-1); margin-top: var(--s-4); padding: var(--s-2) var(--s-3); border: 1px solid var(--line); border-radius: var(--radius); background: var(--cream-2); }
.pick__example .label { color: var(--ink-muted); }
.pick__next { margin-top: var(--s-2); }
.section--alt .pick__example { background: var(--cream); }
/* From 1024px the picker sits on the page's 12 columns: the number in the
   first, the question and its answer from the second, the answer's three
   parts on columns 2–4, 5–8 and 9–12. */
@media (min-width: 1024px) {
  .pick summary { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-4); min-height: 96px; }
  .pick__q { grid-column: 2 / span 10; font-size: var(--t-title); line-height: var(--lh-title); }
  .pick__icon { grid-column: 12; }
  .pick__body { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-4); padding-left: 0; }
  .pick__body > * { grid-column: 2 / -1; }
  .pick__grid { grid-template-columns: subgrid; gap: 0 var(--s-4); }
  .pick__grid > :nth-child(1) { grid-column: 1 / span 3; }
  .pick__grid > :nth-child(2) { grid-column: 4 / span 4; }
  .pick__grid > :nth-child(3) { grid-column: 8 / span 4; }
}

/* ---- Process: four phases on one line, each with what it produces ---- */
.phases { position: relative; list-style: none; display: grid; gap: var(--s-5); padding-left: var(--s-5); }
.phases::before { content: ""; position: absolute; top: var(--s-1); bottom: var(--s-1); left: 11px; width: 2px; background: var(--gold); }
.phase { position: relative; }
.phase__node { position: absolute; top: 4px; left: calc(-1 * var(--s-5) + 4px); width: var(--port); height: var(--port); border: 2px solid var(--gold); background: var(--cream); transform: rotate(45deg); }
.section--alt .phase__node { background: var(--cream-2); }
.phase__num { color: var(--ink-muted); }
.phase h3 { margin-top: var(--s-1); }
.phase p + p { margin-top: var(--s-1); }
.phase__does { margin-top: var(--s-1); }
.phase__out { margin-top: var(--s-2); padding-top: var(--s-2); border-top: 1px solid var(--line); }
.phase__out .label { display: block; margin-bottom: var(--s-1); color: var(--teal); }
@media (min-width: 1024px) {
  .phases { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); padding-left: 0; padding-top: var(--s-5); }
  .phases::before { top: 11px; right: 0; bottom: auto; left: 0; width: auto; height: 2px; }
  .phase__node { top: calc(-1 * var(--s-5) + 4px); left: 4px; }
  /* Rows shared across the phases, so every "You get" lines up. */
  .phases { grid-template-rows: repeat(4, auto); row-gap: 0; }
  .phase { display: grid; grid-row: span 4; grid-template-rows: subgrid; align-content: start; }
  .phases--artifacts { grid-template-rows: repeat(5, auto); }
  .phases--artifacts .phase { grid-row: span 5; }
  .phase__out { align-self: start; }
}
.phase:not(:has(.phase__out)) .phase__does { margin-bottom: 0; }
@media (min-width: 1024px) {
  .phases--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Artifacts: what each phase hands over, drawn with sample data. */
.artifact { margin: var(--s-3) 0 0; padding: var(--s-2); border: 1px solid var(--line); border-radius: var(--radius); background: var(--cream); font-size: var(--t-small); line-height: var(--lh-small); }
.artifact p + p { margin-top: 0; }
.artifact figcaption { display: flex; justify-content: space-between; gap: var(--s-1); margin: 0 0 var(--s-1); padding-bottom: var(--s-1); border-bottom: 1px solid var(--line); }
.artifact figcaption .label { color: var(--ink); }
.artifact ul { list-style: none; display: grid; gap: var(--s-1); }
.artifact li { position: relative; padding-left: var(--s-2); }
.artifact li::before { content: ""; position: absolute; top: 8px; left: 0; width: 4px; height: 4px; background: var(--ink-muted); }
.hl { background: var(--gold-soft); color: var(--ink); }
/* A small data model: three records joined by gold links. */
.model { display: grid; gap: var(--s-2); }
.model__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); }
.entity { position: relative; padding: var(--s-1); border: 1px solid var(--teal); border-radius: var(--radius); background: var(--cream); }
.entity + .entity::before { content: ""; position: absolute; top: calc(50% - 1px); left: calc(-1 * var(--s-2) - 1px); width: var(--s-2); height: 2px; background: var(--gold); }
.entity b { display: block; font-weight: 600; }
.entity span { color: var(--ink-muted); }
.flowline { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.flowline span { padding: 0 var(--s-1); border: 1px solid var(--line); border-radius: var(--radius); }
.flowline span.is-auto { border-color: var(--teal); color: var(--teal-deep); }
.screen-mini { display: grid; gap: var(--s-1); }
.screen-mini__top { display: flex; justify-content: space-between; gap: var(--s-1); font-weight: 600; }
.screen-mini__row { display: flex; justify-content: space-between; gap: var(--s-1); padding-top: var(--s-1); border-top: 1px solid var(--line); }
.screen-mini__row span:first-child { color: var(--ink-muted); }
.pill { display: inline-flex; align-items: center; gap: var(--s-1); }
.pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--teal); }
.pill--wait::before { background: var(--gold); }
.log { display: grid; gap: var(--s-1); }
.log p { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--s-1); }
.log b { color: var(--teal-deep); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---- Horizline spotlight ---------------------------------------------- */
.hz-lockup { width: auto; height: 32px; margin-bottom: var(--s-4); }
.hz-points { list-style: none; display: grid; gap: var(--s-2); margin-top: var(--s-4); padding-top: var(--s-3); border-top: 1px solid var(--line-on-dark); }
.hz-points li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--s-2); }
.hz-points strong { color: var(--gold-soft); font-weight: 600; }
.hz-points span { color: var(--cream-2); }
.hz-note { margin-top: var(--s-2); }
.hz-shots { margin: 0; }
.hz-shots__frame { position: relative; padding-bottom: var(--s-6); }
.hz-shots__frame > picture img { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow); background: var(--cream-2); }
.hz-shots__phone { position: absolute; right: calc(-1 * var(--s-1)); bottom: 0; width: 28%; }
.hz-shots__phone img { width: 100%; border: 1px solid var(--line-on-dark); border-radius: var(--radius); box-shadow: var(--shadow); background: var(--cream-2); }
.hz-shots figcaption { margin-top: var(--s-2); }
@media (min-width: 1024px) {
  .hz-shots__phone { right: calc(-1 * var(--s-3)); width: 24%; }
}

/* ---- Company and founder --------------------------------------------- */
.portrait { position: relative; margin: 0; max-width: 480px; }
.portrait picture, .portrait img { border-radius: var(--radius); }
.portrait img { width: 100%; }
.portrait picture { position: relative; isolation: isolate; margin-right: var(--s-2); }
/* A drafting mat behind the photograph, offset one step. */
.portrait picture::before { content: ""; position: absolute; z-index: -1; top: var(--s-2); right: calc(-1 * var(--s-2)); bottom: calc(-1 * var(--s-2)); left: var(--s-2); border: 1px solid var(--gold); border-radius: var(--radius); }
.portrait figcaption { margin-top: var(--s-4); }
.pullquote { margin-top: var(--s-5); padding-left: var(--s-3); border-left: 2px solid var(--gold); }
.pullquote p { font-family: var(--font-display); font-size: var(--t-quote); line-height: var(--lh-quote); font-style: italic; }
.pullquote footer { margin-top: var(--s-2); color: var(--ink-muted); font-size: var(--t-small); line-height: var(--lh-small); }
.pullquote + p { margin-top: var(--s-3); }
.story .facts { margin-top: var(--s-4); }
.reasons { list-style: none; display: grid; gap: var(--s-3); margin-top: var(--s-4); }
.reasons li { position: relative; padding-left: var(--s-4); }
.reasons li::before { content: ""; position: absolute; top: 8px; left: 0; width: 12px; height: 12px; border: 2px solid var(--gold); transform: rotate(45deg); }
.reasons strong { display: block; color: var(--ink); }
.reasons span { color: var(--ink-muted); }

/* ---- Closing invitation ---------------------------------------------- */
.objections { margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--line); }
.closing__head h2 { max-width: 16ch; }
.closing__head .lead { margin-top: var(--s-3); color: var(--cream-2); }
.closing__head .actions { margin-top: var(--s-5); }
.closing__steps { list-style: none; display: grid; gap: var(--s-4); margin-top: var(--s-6); }
.closing__steps li { position: relative; padding-top: var(--s-3); border-top: 2px solid var(--gold); }
.closing__steps li::before { content: ""; position: absolute; top: -7px; left: 0; width: 12px; height: 12px; border: 2px solid var(--gold); background: var(--ink); transform: rotate(45deg); }
.closing__steps h3 { font-size: var(--t-h3); line-height: var(--lh-h3); }
.closing__steps p { margin-top: var(--s-1); color: var(--cream-2); }
.closing__direct { display: grid; gap: 0; margin-top: var(--s-1); }
.closing__direct a { display: inline-flex; align-items: center; min-height: 44px; }
@media (min-width: 768px) { .closing__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* The older closing band (Horizline page and pricing). */
.cta h2 { max-width: 18ch; }
.cta .lead { margin-top: var(--s-3); color: var(--cream-2); }
.cta__direct { display: grid; gap: 0; margin-top: var(--s-4); padding-top: var(--s-3); border-top: 1px solid var(--line-on-dark); font-size: var(--t-small); line-height: var(--lh-small); }
.cta__direct a { display: inline-flex; align-items: center; min-height: 44px; }
.cta .actions { margin-top: 0; }
/* In the narrow side column the buttons stack, so they share one width. */
@media (min-width: 1024px) { .cta__side { padding-top: var(--s-5); } .cta__side .button { flex: 1 1 100%; } }

/* ---- Case study pages --------------------------------------------------- */
.cs-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3) var(--s-4); margin-top: var(--s-6); padding-top: var(--s-3); border-top: 1px solid var(--line-on-dark); }
.cs-meta dt { color: var(--gold-soft); }
.cs-meta dd { margin-top: var(--s-1); color: var(--cream); }
@media (min-width: 1024px) { .cs-meta { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cs-block { display: grid; gap: var(--s-3); }
.cs-block + .cs-block { margin-top: var(--s-7); }
.cs-block h2 { font-size: var(--t-h3); line-height: var(--lh-h3); }
.cs-block .label { color: var(--teal); }
@media (min-width: 1024px) {
  .cs-block { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-4); }
  .cs-block > :first-child { grid-column: 1 / span 4; }
  .cs-block > :last-child { grid-column: 6 / -1; }
}
.cs-figure { margin: 0; }
.cs-figure img { width: 100%; border: 1px solid var(--line); border-radius: var(--radius); background: var(--cream-2); box-shadow: var(--shadow); }
.cs-figure figcaption { margin-top: var(--s-2); }
.stage .cs-figure img { border-color: var(--line-on-dark); box-shadow: var(--shadow); }
.cs-gallery { display: grid; gap: var(--s-5) var(--s-4); }
@media (min-width: 768px) { .cs-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cs-gallery .cs-figure--wide { grid-column: 1 / -1; } }
.cs-phones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); max-width: 600px; }
.cs-result { display: grid; gap: var(--s-2); padding: var(--s-4); border-top: 2px solid var(--gold); background: var(--cream-2); }
.cs-result p { max-width: 60ch; }
.cs-next { display: grid; gap: var(--s-1); }
.cs-next .label { color: var(--gold-soft); }

.section--flush { padding-top: 0; }
.cs-next h2 a { color: var(--cream); text-decoration-color: var(--gold); text-underline-offset: 6px; }
.cs-next h2 a:hover { color: var(--gold-soft); }
.cs-next .lead { color: var(--cream-2); }
.cs-next .actions { margin-top: var(--s-3); }
.cs-result .case__number { margin-top: 0; }
.timeline-link { margin-top: var(--s-5); }
.company-facts { margin-top: var(--s-4); }
.hz-fit { margin-top: var(--s-3); color: var(--ink-muted); }

/* ---- Contact ---------------------------------------------------------- */
.next-steps { list-style: none; counter-reset: next; display: grid; gap: var(--s-3); }
.next-steps li { counter-increment: next; position: relative; padding-left: var(--s-5); }
.next-steps li::before { content: counter(next, decimal-leading-zero); position: absolute; top: 0; left: 0; color: var(--teal); font-size: var(--t-label); line-height: var(--lh-ui); font-weight: 600; letter-spacing: .08em; }
.next-steps strong { display: block; }
.next-steps span { color: var(--ink-muted); }
.contact-side { display: grid; gap: var(--s-5); align-content: start; }
.contact-side h2 { font-size: var(--t-h3); line-height: var(--lh-h3); margin-bottom: var(--s-3); }
.commit { padding: var(--s-2) var(--s-3); border-left: 2px solid var(--gold); background: var(--cream-2); }
.more-fields { border: 1px solid var(--line); border-radius: var(--radius); }
.more-fields summary { position: relative; display: flex; align-items: center; min-height: var(--control-h); padding: var(--s-1) var(--s-5) var(--s-1) var(--s-2); font-weight: 500; list-style: none; cursor: pointer; transition: color var(--t-control) var(--ease); }
.more-fields summary::-webkit-details-marker { display: none; }
.more-fields summary::after { content: ""; position: absolute; top: calc(50% - 6px); right: var(--s-2); width: 8px; height: 8px; border-right: 2px solid var(--gold); border-bottom: 2px solid var(--gold); transform: rotate(45deg); transition: transform var(--t-control) var(--ease); }
.more-fields[open] summary::after { transform: translateY(4px) rotate(-135deg); }
.more-fields summary:hover { color: var(--teal); }
.more-fields .form-row { padding: var(--s-1) var(--s-2) var(--s-3); }

/* ---- Plans and pricing ----------------------------------------------- */
.plans { display: grid; gap: var(--s-3); }
@media (min-width: 768px) { .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .plans { gap: var(--s-4); } }
.plan h2, .plan h3 { margin-bottom: var(--s-1); font-size: var(--t-h3); line-height: var(--lh-h3); }
.plans + .terms { margin-top: var(--s-3); }
.plan .price { font-family: var(--font-display); font-size: var(--t-h2); line-height: var(--lh-h2); }
.plan .price span { font-family: var(--font-sans); font-size: var(--t-body); line-height: var(--lh-body); color: var(--ink-muted); }
.plan p + ul, .plan .price + p { margin-top: var(--s-1); }
.plan .actions { margin-top: var(--s-3); }
/* Plans in a row share a height, and their calls sit on the same line at the bottom. */
.plan { display: flex; flex-direction: column; }
.plan > :nth-last-child(2) { flex-grow: 1; }
.promo { margin-bottom: var(--s-3); padding: var(--s-2); border: 1px solid var(--gold); border-radius: var(--radius); background: var(--cream); }
html.promo-over .promo-only { display: none; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--cream); }
table { width: 100%; border-collapse: collapse; }
th, td { padding: var(--s-1) var(--s-2); border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
thead th { background: var(--cream-2); }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }
.table-wrap + p { margin-top: var(--s-2); }
.phones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); max-width: 600px; }
.phones img { box-shadow: var(--shadow); }
.cap-card h3 { margin-top: var(--s-1); }
.cap-card__replaces { margin-top: var(--s-2); padding-top: var(--s-2); border-top: 1px solid var(--line); color: var(--ink-muted); }
.cap-card__replaces .label { display: block; margin-bottom: var(--s-1); }
.audience { display: flex; flex-wrap: wrap; gap: var(--s-1); list-style: none; margin-top: var(--s-3); }
.audience li { display: inline-flex; align-items: center; min-height: 32px; padding: 0 var(--s-1); border: 1px solid var(--line-on-dark); border-radius: var(--radius); color: var(--cream); font-size: var(--t-small); line-height: var(--lh-small); }
.page-hero__aside { display: flex; flex-wrap: wrap; gap: 0 var(--s-3); margin-top: var(--s-2); font-size: var(--t-small); line-height: var(--lh-small); }
.page-hero__aside a { display: inline-flex; align-items: center; gap: var(--s-1); min-height: 44px; }
.page-hero--compact { padding-bottom: var(--s-6); }
@media (min-width: 1200px) { .page-hero.stage.page-hero--compact { padding: var(--s-7) 0 var(--s-6); } }

/* ---- Accordion -------------------------------------------------------- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: var(--s-2) var(--s-5) var(--s-2) 0;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
  transition: color var(--t-control) var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; top: calc(50% - 6px); right: var(--s-1); width: 8px; height: 8px; border-right: 2px solid var(--gold); border-bottom: 2px solid var(--gold); transform: rotate(45deg); transition: transform var(--t-control) var(--ease); }
.faq details[open] > summary::after { transform: translateY(4px) rotate(-135deg); }
.faq summary:hover { color: var(--teal); }
.faq__body { padding-bottom: var(--s-3); }
.faq__body > * + * { margin-top: var(--s-2); }
.kb-search { display: grid; gap: var(--s-1); max-width: 560px; }
.kb-search .field-row { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.kb-search input { flex: 1 1 240px; }

/* ---- Forms ------------------------------------------------------------- */
.inquiry-form { display: grid; gap: var(--s-3); max-width: 640px; }
.form-row { display: grid; gap: var(--s-3); }
@media (min-width: 768px) { .form-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.field { display: grid; gap: var(--s-1); }
.field label { font-weight: 500; }
input[type="text"], input[type="email"], input[type="tel"], input[type="search"], select, textarea {
  width: 100%;
  min-height: var(--control-h);
  padding: var(--s-1) var(--s-2);
  border: 1px solid var(--control);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
  font-size: var(--t-ui);
  line-height: var(--lh-ui);
  transition: border-color var(--t-control) var(--ease);
}
textarea { min-height: 160px; resize: vertical; }
input:hover, select:hover, textarea:hover { border-color: var(--ink); }
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--teal); outline: 2px solid var(--teal); outline-offset: 0; }
/* An invalid field stays red, under the pointer and while focused. The element
   in each selector matches the specificity of input[type="…"] above, which
   a bare [aria-invalid] would lose to. */
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--error); }
input[aria-invalid="true"]:focus-visible, select[aria-invalid="true"]:focus-visible, textarea[aria-invalid="true"]:focus-visible { border-color: var(--error); outline-color: var(--error); }
.field-error { color: var(--error); font-size: var(--t-small); line-height: var(--lh-small); font-weight: 500; }
.form-hint { font-size: var(--t-small); line-height: var(--lh-small); color: var(--ink-muted); }
.form-status { padding: var(--s-2); border: 1px solid var(--line); border-radius: var(--radius); font-size: var(--t-small); line-height: var(--lh-small); }
.form-status:empty { display: none; }
.form-status[data-state="error"] { border-color: var(--error); color: var(--error); background: var(--white); }
.form-status[data-state="ok"] { border-color: var(--teal); color: var(--teal-deep); background: var(--white); }
.form-status .button { margin-top: var(--s-2); }
input.hidden-honey { position: absolute; width: 1px; min-height: 0; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); border: 0; }
.form-submit { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.route-note { padding: var(--s-2); border: 1px solid var(--line); border-radius: var(--radius); background: var(--cream-2); }
.contact-grid { display: grid; gap: var(--s-6); }
@media (min-width: 1024px) {
  .contact-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-4); } .contact-grid > :first-child { grid-column: span 7; } .contact-grid > :last-child { grid-column: 9 / -1; }
  /* The side column is too narrow for a label column: each label sits above its value. */
  .contact-side .facts div { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

/* ---- Legal documents ------------------------------------------------- */
.legal-doc { max-width: 68ch; }
.legal-doc h2 { margin-top: var(--s-5); margin-bottom: var(--s-2); font-size: var(--t-h3); line-height: var(--lh-h3); }
.legal-doc h2:first-child { margin-top: 0; }
.legal-doc p + p, .legal-doc p + ul, .legal-doc ul + p { margin-top: var(--s-2); }
.legal-doc ul, .legal-doc ol { padding-left: var(--s-3); }
.legal-doc li + li { margin-top: var(--s-1); }
.legal-doc address { font-style: normal; }

/* ---- Footer ---------------------------------------------------------- */
.site-footer { padding: var(--s-6) 0 var(--s-4); background: var(--teal-deep); color: var(--cream); font-size: var(--t-small); line-height: var(--lh-small); }
.site-footer a { color: var(--cream); text-decoration: none; }
.site-footer a:hover { color: var(--gold-soft); text-decoration: underline; }
.site-footer :focus-visible { outline-color: var(--gold-soft); }
.footer-top { display: grid; gap: var(--s-5); }
.footer-brand img { width: auto; height: 48px; }
.footer-brand p { max-width: 40ch; margin-top: var(--s-2); color: var(--cream-2); font-size: var(--t-body); line-height: var(--lh-body); }
.footer-brand .footer-contact { display: grid; margin-top: var(--s-2); }
.footer-contact a { display: inline-flex; align-items: center; min-height: 44px; }
.footer-nav { display: grid; gap: var(--s-4); }
.footer-nav h2 { margin-bottom: var(--s-1); color: var(--gold-soft); font-family: var(--font-sans); font-size: var(--t-label); line-height: var(--lh-label); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.footer-nav ul { display: grid; list-style: none; }
.footer-nav a { display: inline-flex; align-items: center; gap: var(--s-1); min-width: 44px; min-height: 44px; font-size: var(--t-ui); line-height: var(--lh-ui); }
.footer-base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  margin-top: var(--s-5);
  padding-top: var(--s-3);
  border-top: 1px solid var(--line-on-dark);
  color: var(--cream-2);
}
.footer-base ul { display: flex; flex-wrap: wrap; gap: 0 var(--s-3); list-style: none; }
.footer-base a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; color: var(--cream-2); }
@media (min-width: 768px) { .footer-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .footer-top { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-4); }
  .footer-brand { grid-column: span 4; }
  /* Three columns of two grid columns each, on columns 7–12. */
  .footer-nav { grid-column: 7 / -1; }
}

/* ---- Reduced motion --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0ms !important; transition-delay: 0ms !important; animation-duration: 0ms !important; }
  .button[aria-busy="true"] .spinner { animation-duration: 1.6s !important; }
  a:hover > .arrow { transform: none; }
}