/* Sightline Web: the shell (card 1a). Every page links this file first; page files may only use these tokens.
   Look: decisions 75-78 and 81 (boards Menu.dc.html, Kit.dc.html, HeroF.dc.html). Rules for page cards: CONTRACT.md. */

/* ---------- 1. Tokens ---------- */
:root {
  /* colour (76, 78) */
  --ink: #10192B;          /* blueprint navy: the ground */
  --graphite: #1C2740;     /* cards and the menu bar on dark */
  --slate: #2B3B57;        /* quiet discs, secondary text on light */
  --blueprint: #D6E2EE;    /* blueprint paper: big panels */
  --paper: #F4EFE4;        /* text on dark */
  --ground: #E6EAEE;       /* the hero's cool grey ground (78) */
  --accent: #F2C230;       /* tape yellow: the main action, the logo dot, the sightline; nothing else (78) */
  --on-accent: #10192B;    /* navy text on yellow (white fails) */
  --muted-dark: #A9B4C6;   /* secondary text on dark */
  --white: #FFFFFF;        /* the menu bar's words (77) */
  --text-soft: #C9D2DF;    /* running text on dark */
  --rule: #2A3A55;         /* a tone edge on dark (the work card at rest) */
  --rule-strong: #4A5B78;  /* the outline button, the tag */
  --accent-hover: #D0A729; /* the Kit's 0.86 shade */
  --accent-pressed: #AE8C23; /* the Kit's 0.72 shade */
  --accent-soft: #F8DD8D;
  --accent-pale: #FCF0CB;

  /* type: EXACTLY nine sizes (68, 44, 26, 22, 20, 18, 16, 15, 13 px), largest first; set font-size only through these.
     HeroF's 21 is merged into 22 and its slot spent on the 44 px section heading (review round 1, an UNCONFIRMED call) */
  --fs-1: clamp(2.25rem, 1.5833rem + 3.3333vw, 4.25rem);  /* 68 (36 at 320): the h1 */
  --fs-2: clamp(1.875rem, 1.5833rem + 1.4583vw, 2.75rem); /* 44 (30 at 320): every section's h2 (h-section) */
  --fs-3: clamp(1.375rem, 1.2083rem + 0.8333vw, 1.625rem); /* 26 (22 at 320): logo, card titles */
  --fs-4: 1.375rem;   /* 22: small headings (h-card), the choice card's line, the phone menu */
  --fs-5: 1.25rem;    /* 20: lead */
  --fs-6: 1.125rem;   /* 18: body */
  --fs-7: 1rem;       /* 16: menu, links */
  --fs-8: 0.9375rem;  /* 15: small */
  --fs-9: 0.8125rem;  /* 13: mono labels */
  --font-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --font-text: "Instrument Sans", "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Menlo, monospace;

  /* space */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px;
  --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px;
  --section-gap: clamp(64px, 40px + 6vw, 128px);
  --gutter: clamp(16px, 3.125vw, 40px);
  --page-max: 1360px;

  /* shape */
  --r-pill: 999px; --r-panel: 32px; --r-card: 24px; --r-tile: 22px; --r-inner: 14px;

  /* motion */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-soft: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-draw: cubic-bezier(0.65, 0, 0.35, 1);
  --t-press: 140ms; --t-hover: 200ms; --t-ui: 240ms;

  /* the menu bar */
  --bar-top: 24px;
  --bar-h: 66px;
  --bar-space: calc(var(--bar-top) + var(--bar-h));
  --nav-gap: clamp(18px, 2.4vw, 30px);

  --focus: var(--paper);
  color-scheme: dark;
}
/* The phone bar's breakpoint is 47.499em: 759.98 px at the browser's default 16 px text, wider when a visitor has made the browser's
   text larger (20 px: 950, 24 px: 1140), so the wide bar folds into the phone bar instead of pushing Get a quote past the edge (card 1i
   fix round 1, review r1). An em in a media query is the browser's own text size, never a page's font-size; the three bar queries
   below and site.js's matchMedia use the same 47.499em / 47.5em. */
@media (max-width: 47.499em) {
  :root { --bar-top: 12px; --bar-h: 56px; }
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
/* The sticky bar covers the top of the screen, so whatever an anchor link, the skip link or the keyboard brings into view
   must stop below it. The offset sits on the targets, never on html: html { scroll-padding-top } counted the bar's own
   links as "hidden" and scrolled the page every time one of them was focused (review round 1, HIGH 1). */
main, main :is([id], a, button, input, select, textarea, summary, [tabindex]) { scroll-margin-top: calc(var(--bar-space) + 16px); }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-text);
  font-size: var(--fs-6);
  line-height: 1.55;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}
img { display: block; max-width: 100%; height: auto; }
img[hidden] { display: none; }   /* display: block above beats the UA [hidden] rule, so an onerror="this.hidden=true" would still show a broken icon (1d's request) */
svg { flex-shrink: 0; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
h1, h2, h3, h4 { font-weight: 700; text-wrap: balance; hyphens: none; }
p { text-wrap: pretty; }
a { color: inherit; text-decoration-thickness: 0.07em; text-underline-offset: 0.18em; }
button { font: inherit; color: inherit; }
::selection { background: var(--slate); color: var(--white); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
main:focus { outline: none; }   /* the skip link's target; it is not a control */
.on-light { --focus: var(--ink); color: var(--ink); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* ---------- 3. Layout ---------- */
.wrap { width: min(100% - 2 * var(--gutter), var(--page-max)); margin-inline: auto; }
.section { margin-top: var(--section-gap); }
/* a first section whose ground should run up behind the menu bar (the Home hero): */
.under-bar { margin-top: calc(-1 * var(--bar-space)); padding-top: var(--bar-space); }
.page-stub { padding-block: var(--space-9) var(--space-6); display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-5); }
.page-stub > p:not(.lead) { max-width: 62ch; color: var(--text-soft); overflow-wrap: anywhere; }   /* the email address breaks instead of pushing a 320 px phone sideways at 150% text (card 1i) */
.page-stub .h-page { overflow-wrap: anywhere; }   /* "Accessibility" at 200% text is wider than a 390 px phone: the word breaks rather than the page scrolling sideways; at the default sizes every word fits, so nothing changes (card 1i fix round 1) */

/* ---------- 4. Type ---------- */
.h-page {
  font-family: var(--font-display); font-size: var(--fs-1); line-height: 1.0;
  font-weight: 700; letter-spacing: -0.03em; margin-left: -0.04em;
}
.h-section {
  font-family: var(--font-display); font-size: var(--fs-2); line-height: 1.06;
  font-weight: 700; letter-spacing: -0.025em;
}
.h-card {
  font-family: var(--font-display); font-size: var(--fs-4); line-height: 1.15;
  font-weight: 700; letter-spacing: -0.01em;
}
.eyebrow {
  font-family: var(--font-mono); font-size: var(--fs-9); font-weight: 500; line-height: 1.4;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-dark);
}
.on-light .eyebrow { color: var(--slate); }
.lead { font-size: var(--fs-5); line-height: 1.45; color: var(--text-soft); max-width: 40ch; }
.on-light .lead { color: var(--slate); }
.prose p { max-width: 62ch; color: var(--text-soft); }
.prose p + p { margin-top: 0.9em; }
.small { font-size: var(--fs-8); color: var(--muted-dark); }
.mono { font-family: var(--font-mono); font-size: var(--fs-9); font-weight: 500; letter-spacing: 0.08em; }
.num { font-variant-numeric: tabular-nums; }

/* ---------- 5. Skip link ---------- */
.skip-link {
  position: absolute; left: var(--gutter); top: 8px; z-index: 100;
  width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.skip-link:focus, .skip-link:focus-visible {
  width: auto; height: auto; clip-path: none; display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 18px; border-radius: var(--r-pill);
  background: var(--paper); color: var(--ink); font-weight: 600; text-decoration: none;
}

/* ---------- 6. Buttons (Kit 03) ---------- */
.btn-primary {
  display: inline-flex; align-items: center; gap: 14px;
  min-height: 44px; padding: 8px 8px 8px 24px;
  border: 0; border-radius: var(--r-pill);
  background: var(--accent); color: var(--on-accent);
  font-family: var(--font-text); font-size: var(--fs-6); font-weight: 600; line-height: 1.2;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: background-color var(--t-hover) ease, transform var(--t-press) var(--ease-out), box-shadow 300ms ease;
}
.btn-disc {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--on-accent); color: var(--accent);
  transition: transform 300ms var(--ease-out), color var(--t-hover) ease;
}
.btn-disc svg { width: 16px; height: 16px; }
.btn-spinner { display: none; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--accent-pale); border-top-color: var(--accent); }
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover { background: var(--accent-hover); }
  .btn-primary:hover .btn-disc { transform: rotate(45deg); color: var(--accent-hover); }
}
.btn-primary.is-hover { background: var(--accent-hover); }
.btn-primary.is-hover .btn-disc { transform: rotate(45deg); color: var(--accent-hover); }
.btn-primary:active, .btn-primary.is-pressed { background: var(--accent-pressed); transform: scale(0.97); }
.btn-primary:active .btn-disc, .btn-primary.is-pressed .btn-disc { transform: rotate(45deg); color: var(--accent-pressed); }
.btn-primary.is-focus { outline: 3px solid var(--focus); outline-offset: 3px; }
.btn-primary.is-sending, .btn-primary[aria-busy="true"] { cursor: progress; background: var(--accent); transform: none; }
.btn-primary.is-sending .btn-disc, .btn-primary[aria-busy="true"] .btn-disc { transform: none; }
.btn-primary.is-sending .btn-disc svg, .btn-primary[aria-busy="true"] .btn-disc svg { display: none; }
.btn-primary.is-sending .btn-spinner, .btn-primary[aria-busy="true"] .btn-spinner { display: block; animation: sl-spin 800ms linear infinite; }
@keyframes sl-spin { to { transform: rotate(360deg); } }

.btn-outline {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 44px; padding: 13px 24px;
  border: 1.5px solid var(--rule-strong); border-radius: var(--r-pill);
  background: transparent; color: var(--paper);
  font-family: var(--font-text); font-size: var(--fs-6); font-weight: 600; line-height: 1.2;
  text-decoration: none; white-space: nowrap; cursor: pointer; touch-action: manipulation;
  transition: border-color var(--t-hover) ease, color var(--t-hover) ease, transform var(--t-press) var(--ease-out);
}
.on-light .btn-outline { color: var(--ink); border-color: var(--slate); }
@media (hover: hover) and (pointer: fine) {
  .btn-outline:hover { border-color: var(--paper); }
  .on-light .btn-outline:hover { border-color: var(--ink); }
}
.btn-outline.is-hover { border-color: var(--paper); }
.btn-outline:active, .btn-outline.is-pressed { transform: scale(0.97); }

/* one continuous line under the words and the arrow, as the Kit draws it (a text underline breaks at the arrow in WebKit) */
.link-more {
  display: inline-block; padding-block: 10px; line-height: 1.35;
  font-size: var(--fs-6); font-weight: 600; color: inherit; text-decoration: none;
  background: linear-gradient(currentColor, currentColor) no-repeat 0 calc(100% - 8px) / 100% 1.5px;
  touch-action: manipulation;
}
.link-more-arrow { display: inline-block; margin-left: 0.35em; transition: transform var(--t-hover) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .link-more:hover .link-more-arrow { transform: translateX(4px); }
}
.link-more.is-hover .link-more-arrow { transform: translateX(4px); }

/* ---------- 7. The notched panel (Kit 04): once per page at most ---------- */
.notch-panel {
  --notch-ground: var(--ink); --focus: var(--ink);
  position: relative; display: flex; flex-direction: column;
  background: var(--blueprint); color: var(--ink);
  border-radius: var(--r-panel); border-top-left-radius: 0; overflow: hidden;   /* the notch owns that corner: no seam */
}
.notch {
  position: relative; align-self: flex-start; max-width: min(760px, 100% - 56px);   /* the panel always shows beside the notch */
  display: flex; flex-direction: column; gap: 22px;
  padding: 0 44px 36px 0;
  background: var(--notch-ground); color: var(--paper); --focus: var(--paper);
  border-bottom-right-radius: var(--r-panel);
}
.notch::before, .notch::after {
  content: ""; position: absolute; width: 32px; height: 32px; pointer-events: none;
  background: radial-gradient(circle at 100% 100%, transparent 31.5px, var(--notch-ground) 32px);
}
.notch::before { top: 0; right: -32px; }
.notch::after { left: 0; bottom: -32px; }
.notch-body { padding: 36px; }
@media (max-width: 759.98px) {
  .notch { padding: 0 20px 24px 0; gap: 16px; border-bottom-right-radius: var(--r-card); }
  .notch::before, .notch::after { width: 24px; height: 24px; background: radial-gradient(circle at 100% 100%, transparent 23.5px, var(--notch-ground) 24px); }
  .notch::before { right: -24px; }
  .notch::after { bottom: -24px; }
  .notch-body { padding: 24px 20px; }
}

/* ---------- 8. The work card (Kit 05) ---------- */
.work-card { display: flex; flex-direction: column; gap: 18px; color: inherit; text-decoration: none; }
.work-card-media {
  position: relative; height: 340px; border-radius: var(--r-card);
  background: var(--graphite); border: 1px solid var(--rule); overflow: hidden;
  transition: transform 300ms var(--ease-out), border-color var(--t-hover) ease, box-shadow 300ms ease;
}
.work-card-shot {
  position: absolute; left: 48px; right: 48px; top: 56px; bottom: 0;
  border-radius: var(--r-inner) var(--r-inner) 0 0; overflow: hidden; background: var(--slate);
  transform-origin: 50% 100%; transition: transform 400ms var(--ease-out);
}
.work-card-shot img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.work-card-pills {   /* a small notch cut from the corner, the panel's shape (Kit 05) */
  position: absolute; top: 0; right: 0; display: flex; gap: 8px;
  padding: 8px 8px 10px 10px; background: var(--ink); border-bottom-left-radius: 20px;
}
.work-card-pills::before, .work-card-pills::after {
  content: ""; position: absolute; width: 20px; height: 20px; pointer-events: none;
  background: radial-gradient(circle at 0 100%, transparent 19.5px, var(--ink) 20px);
}
.work-card-pills::before { top: 0; left: -20px; }
.work-card-pills::after { right: 0; bottom: -20px; }
.work-card-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.work-card .h-card { font-size: var(--fs-3); letter-spacing: -0.01em; }
.work-card-text { font-size: var(--fs-6); line-height: 1.5; color: var(--text-soft); max-width: 46ch; }
.work-card-cta { font-size: var(--fs-7); font-weight: 600; display: inline-flex; align-items: center; gap: 0.4em; }
.work-card-cta .link-more-arrow { margin-left: 0; }
@media (hover: hover) and (pointer: fine) {
  .work-card:hover .work-card-media { transform: translateY(-6px); border-color: var(--accent); box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45); }
  .work-card:hover .work-card-shot { transform: scale(1.04); }
  .work-card:hover .work-card-cta .link-more-arrow { transform: translateX(4px); }
}
.work-card:focus-visible { outline: none; }
.work-card:focus-visible .work-card-media { outline: 3px solid var(--focus); outline-offset: 3px; }
.work-card:focus-visible .work-card-media, .work-card.is-hover .work-card-media { transform: translateY(-6px); border-color: var(--accent); box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45); }
.work-card:focus-visible .work-card-shot, .work-card.is-hover .work-card-shot { transform: scale(1.04); }
.work-card.is-hover .work-card-cta .link-more-arrow { transform: translateX(4px); }
@media (max-width: 759.98px) {
  .work-card-media { height: auto; aspect-ratio: 4 / 3.4; }
  .work-card-shot { left: 20px; right: 20px; top: 56px; }
}

/* ---------- 9. Labels and pills (Kit 06) ---------- */
.tag {
  display: inline-flex; align-items: center; padding: 5px 12px; border-radius: var(--r-pill);
  border: 1px solid var(--rule-strong); color: var(--text-soft);
  font-family: var(--font-mono); font-size: var(--fs-9); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.3;
}
.tag-plain { padding: 0; border: 0; color: var(--muted-dark); }
.pill {
  display: inline-flex; align-items: center; padding: 8px 14px; border-radius: var(--r-pill);
  background: var(--graphite); color: var(--paper);
  font-size: var(--fs-8); font-weight: 600; line-height: 1.2; white-space: nowrap;
}
.pill-included { background: var(--blueprint); color: var(--ink); }
.pill-addon { background: transparent; border: 1.5px dashed var(--muted-dark); color: var(--text-soft); padding: 6.5px 12.5px; }

/* ---------- 10. The sightline card (HeroF): a yellow line draws across and ends in a dot; the arrow turns yellow ---------- */
.sightline-card {
  position: relative; display: flex; align-items: center; gap: 18px;
  padding: 20px 20px 20px 24px; border-radius: var(--r-tile);
  background: var(--ink); color: var(--paper); text-decoration: none;
  touch-action: manipulation;
}
.sightline-card-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.sightline-card-title {
  font-family: var(--font-display); font-size: var(--fs-3); line-height: 1.1;
  font-weight: 700; letter-spacing: -0.015em; color: var(--paper);
}
.sightline-card-line {
  font-family: var(--font-display); font-size: var(--fs-4); line-height: 1.2;
  font-weight: 600; letter-spacing: -0.01em; color: var(--muted-dark);
}
.sightline-arrow {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--slate); color: var(--paper);
  transition: transform 450ms var(--ease-out), background-color 300ms ease, color 300ms ease;
}
.sightline-arrow svg { width: 16px; height: 16px; }
.sl-line {
  position: absolute; left: 24px; bottom: 12px; width: calc(100% - 116px); height: 3px;
  border-radius: 2px; background: var(--accent); pointer-events: none;
  clip-path: inset(-4px 100% -4px 0);
  transition: clip-path 650ms var(--ease-draw);
}
.sl-line::after {
  content: ""; position: absolute; right: -4px; top: -2.5px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--accent); opacity: 0; transition: opacity 200ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .sightline-card:hover .sl-line { clip-path: inset(-4px -6px -4px 0); }
  .sightline-card:hover .sl-line::after { opacity: 1; }
  .sightline-card:hover .sightline-arrow { transform: translateX(5px); background-color: var(--accent); color: var(--on-accent); }
}
.sightline-card:focus-visible .sl-line, .sightline-card.is-hover .sl-line { clip-path: inset(-4px -6px -4px 0); }
.sightline-card:focus-visible .sl-line::after, .sightline-card.is-hover .sl-line::after { opacity: 1; }
.sightline-card:focus-visible .sightline-arrow, .sightline-card.is-hover .sightline-arrow { transform: translateX(5px); background-color: var(--accent); color: var(--on-accent); }

/* ---------- 11. The menu bar (decision 77, Menu board): the sightline ---------- */
.site-bar {
  position: sticky; top: 0; z-index: 50;
  padding: var(--bar-top) var(--gutter) 0;
  pointer-events: none;
}
.bar {
  position: relative; pointer-events: auto;
  display: flex; align-items: baseline; gap: var(--nav-gap);
  max-width: var(--page-max); margin-inline: auto;
  min-height: var(--bar-h); padding: 10px 10px 10px 26px;
  border-radius: var(--r-pill); background: var(--graphite); color: var(--white);
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  transition: box-shadow 300ms ease;
  animation: sl-bar-drop 600ms var(--ease-out) 350ms backwards;
}
.bar.is-scrolled { box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35); }   /* card 1i (1f's request): the board's 0 16px 36px / 0.5 darkened the pinned light scenes 40% at their top edge; UNCONFIRMED, one line to reverse */
@keyframes sl-bar-drop { from { transform: translateY(-36px); opacity: 0; } }
@keyframes sl-link-in { from { transform: translateY(-10px); opacity: 0; } }
/* "drops in once": every page is a new load on this six-page site, so the entrance plays on the first page of a visit only;
   head.html's script adds html.bar-seen on the pages after it (review round 1, MEDIUM 2) */
.bar-seen :is(.bar, .bar-link, .bar-cta, .bar-menu) { animation: none; }

.bar-logo {
  position: relative; z-index: 2; display: inline-flex; align-items: baseline;
  padding-block: calc((44px - 1.2em) / 2); margin-right: auto;   /* a 44 px tap target at every size */
  font-family: var(--font-display); font-size: var(--fs-3); font-weight: 700; line-height: 1.2;
  letter-spacing: -0.02em; color: var(--white); text-decoration: none;
}
.logo-dot {
  position: relative; z-index: 2; display: inline-block; flex: 0 0 auto;
  width: 0.26em; height: 0.26em; margin-left: 0.06em; border-radius: 50%; background: var(--accent);
}
.bar-nav { position: relative; z-index: 2; }
.bar-links { display: flex; align-items: baseline; gap: var(--nav-gap); list-style: none; margin: 0; padding: 0; }
.bar-links li { display: flex; align-items: baseline; }
.bar-link {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; min-width: 44px; padding: 0 2px;
  font-size: var(--fs-7); font-weight: 600; line-height: 1.25; color: var(--white); text-decoration: none;
  animation: sl-link-in 420ms var(--ease-out) backwards;
  animation-delay: calc(510ms + var(--i, 0) * 60ms);
}
.bar-label { position: relative; display: inline-block; transition: transform 380ms var(--ease-out); }
.bar-link.is-lifted .bar-label { transform: translateY(-15px); }
/* the focus ring belongs to the word, not to the link's box: a lifted word's ring moves with it and stops above the yellow line */
.bar-link:focus-visible { outline: none; }
.bar-label::after {
  content: ""; position: absolute; inset: -4px -9px -2px; border: 3px solid var(--focus); border-radius: 10px;
  opacity: 0; pointer-events: none;
}
.bar-link:focus-visible .bar-label::after { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .bar-link:hover .bar-label { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
  .bar-link.is-lifted:hover .bar-label { text-decoration: none; }
}
.bar-link:active .bar-label { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
.bar-link.is-lifted:active .bar-label { text-decoration: none; }
/* a lifted word has its own hover and press: the dot under it grows (the dots live in the track, so the bar finds the word with :has) */
@media (hover: hover) and (pointer: fine) {
  .bar:has(li:nth-child(1) .bar-link.is-lifted:hover) .sightline-dot:nth-child(2),
  .bar:has(li:nth-child(2) .bar-link.is-lifted:hover) .sightline-dot:nth-child(3),
  .bar:has(li:nth-child(3) .bar-link.is-lifted:hover) .sightline-dot:nth-child(4),
  .bar:has(li:nth-child(4) .bar-link.is-lifted:hover) .sightline-dot:nth-child(5) { opacity: 1; transform: scale(1.9); transition-delay: 0s; }
}
.bar:has(li:nth-child(1) .bar-link.is-lifted:active) .sightline-dot:nth-child(2),
.bar:has(li:nth-child(2) .bar-link.is-lifted:active) .sightline-dot:nth-child(3),
.bar:has(li:nth-child(3) .bar-link.is-lifted:active) .sightline-dot:nth-child(4),
.bar:has(li:nth-child(4) .bar-link.is-lifted:active) .sightline-dot:nth-child(5) { opacity: 1; transform: scale(1.9); transition-delay: 0s; }
.bar-cta {
  position: relative; z-index: 2;
  gap: 12px; padding: 6px 6px 6px 20px; font-size: var(--fs-7);
  align-self: center;   /* centred in the pill, as the Menu board draws it; on the words' baseline it hung 2 px low and made the bar 68 px against its 66 px --bar-h (card 1i; 1b's and 1f's request). The words stay on the logo's line (77) */
  animation: sl-link-in 450ms var(--ease-out) 770ms backwards;
}
.bar-cta .btn-disc { width: 34px; height: 34px; }
.bar-cta .btn-disc svg { width: 14px; height: 14px; }
.bar-cta.is-glow { box-shadow: 0 0 0 4px rgba(242, 194, 48, 0.28); }
.bar-menu { display: none; }

/* the sightline: a 2 px yellow line from the logo's dot, a dot left under each word it passes */
.sightline-track { position: absolute; left: 0; top: 50%; width: 100%; height: 0; z-index: 1; pointer-events: none; }
.sightline-line {
  position: absolute; left: 0; top: -1px; width: 0; height: 2px; border-radius: 1px;
  background: var(--accent); transform-origin: 0 50%; transform: scaleX(0);
  transition: transform 140ms linear;
}
.sightline-line.is-first { transition: transform 700ms var(--ease-out); }
.sightline-dot {
  position: absolute; left: 0; top: -3px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%;
  background: var(--accent); opacity: 0; transform: scale(0.2);
  transition: opacity 220ms ease 120ms, transform 260ms var(--ease-out) 120ms;
}
.sightline-dot.is-on { opacity: 1; transform: scale(1); }
.sightline-dot.is-on.is-current { transform: scale(1.3333); }

/* phone: logo + Get a quote + one menu button; the links fold into a panel; the line still runs from the dot to Get a quote.
   47.499em = 759.98 px at the default text size; wider with enlarged text (see section 1) */
@media (max-width: 47.499em) {
  .bar { padding: 6px 6px 6px 18px; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; row-gap: 6px; }   /* with enlarged text (125-200%) the bar takes a second row instead of pushing the page sideways (1b's request 3); at the default sizes it is one row */
  .bar-cta { order: 2; padding: 0 5px 0 16px; min-height: 44px; gap: 10px; font-size: var(--fs-8); }
  .bar-cta .btn-disc { width: 34px; height: 34px; }
  .bar-menu {
    order: 3; position: relative; z-index: 2;
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
    background: var(--slate); color: var(--white); cursor: pointer; touch-action: manipulation;
    animation: sl-link-in 450ms var(--ease-out) 830ms backwards;
  }
  .bar-menu-icon, .bar-menu-icon::before { display: block; width: 18px; height: 2px; border-radius: 1px; background: currentColor; transition: transform var(--t-ui) var(--ease-out); }
  .bar-menu-icon { position: relative; transform: translateY(-3px); }
  .bar-menu-icon::before { content: ""; position: absolute; left: 0; top: 6px; }
  .bar.is-open .bar-menu-icon { transform: translateY(0) rotate(45deg); }
  .bar.is-open .bar-menu-icon::before { transform: translateY(-6px) rotate(-90deg); }
  .bar-nav {
    order: 4; position: absolute; left: 0; right: 0; top: calc(100% + 8px);
    display: none; padding: 10px; border-radius: 28px;
    background: var(--graphite); box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45);
    overscroll-behavior: contain;
  }
  .bar.is-open .bar-nav { display: block; animation: sl-panel-in var(--t-ui) var(--ease-out); }
  .bar-links { flex-direction: column; align-items: stretch; gap: 2px; }
  .bar-links li { display: block; }
  .bar-link {
    display: flex; justify-content: space-between; min-height: 56px; padding: 0 18px;
    border-radius: 18px; font-size: var(--fs-4); animation: none;
  }
  .bar-link[aria-current="page"]::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--paper); }
  .bar-link:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }   /* the whole row is the target here */
  .bar-label::after { display: none; }
  .bar-link:active { background: var(--slate); }
  .bar-link:active .bar-label { text-decoration: none; }
  .bar-link.is-lifted .bar-label { transform: none; }
  .sightline-dot { display: none; }
}
@media (max-width: 47.499em) and (hover: hover) and (pointer: fine) {
  .bar-link:hover { background: var(--slate); }
  .bar-link:hover .bar-label { text-decoration: none; }
}
@media (max-width: 379.98px) {
  .bar { padding-left: 16px; gap: 6px; }
  .bar-logo { font-size: var(--fs-5); }
  .bar-cta { padding: 0 16px; }
  .bar-cta .btn-disc { display: none; }
}
@keyframes sl-panel-in { from { opacity: 0; transform: translateY(-6px) scale(0.98); } }

/* ---------- 12. The footer ---------- */
.site-footer { margin-top: var(--section-gap); padding: var(--space-7) 0 var(--space-6); color: var(--muted-dark); font-size: var(--fs-8); line-height: 1.5; }
.footer-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-6) var(--space-7); align-items: start; }
.footer-brand { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.footer-logo {
  display: inline-flex; align-items: baseline; padding-block: calc((44px - 1.2em) / 2);
  font-family: var(--font-display); font-size: var(--fs-3); font-weight: 700; line-height: 1.2;
  letter-spacing: -0.02em; color: var(--paper); text-decoration: none;
}
.footer-place { color: var(--text-soft); }
.footer-email {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: var(--fs-6); font-weight: 600; color: var(--paper); overflow-wrap: anywhere;
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px;
}
.footer-nav ul, .footer-small { display: flex; flex-wrap: wrap; gap: 0 var(--space-6); list-style: none; margin: 0; padding: 0; }
.footer-nav a, .footer-small a {
  display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; text-decoration: none;
}
.footer-nav a { font-size: var(--fs-7); font-weight: 600; color: var(--paper); }
.footer-small a { color: var(--text-soft); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.footer-nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
@media (hover: hover) and (pointer: fine) {
  .footer-nav a:hover { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
  .footer-small a:hover, .footer-email:hover { color: var(--white); }
}
.footer-nav a:active { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
.footer-small a:active, .footer-email:active { color: var(--white); }
.footer-legal {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-3) var(--space-6); padding-top: var(--space-5);
}
.footer-sample { max-width: 64ch; }
@media (max-width: 759.98px) {
  .footer-inner { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .footer-nav ul { gap: 0 var(--space-5); }
  .footer-legal { padding-top: var(--space-2); }
}
@media (max-width: 379.98px) {   /* 288 px of room: three words and one alone looked like a mistake, so two rows of two */
  .footer-nav ul { display: grid; grid-template-columns: repeat(2, max-content); gap: 0 var(--space-6); }
}

/* ---------- 13. Placeholders (pass 1): a flat panel with a mono label, sized to the real picture ---------- */
.ph {
  display: flex; align-items: center; justify-content: center; padding: var(--space-3);
  border-radius: 20px; background: var(--paper); color: var(--slate); text-align: center;
  font-family: var(--font-mono); font-size: var(--fs-9); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
}
.ph-dark { background: var(--graphite); color: var(--muted-dark); }
.ph-4x5 { aspect-ratio: 4 / 5; } .ph-3x4 { aspect-ratio: 3 / 4; } .ph-4x3 { aspect-ratio: 4 / 3; }
.ph-16x10 { aspect-ratio: 16 / 10; } .ph-1x1 { aspect-ratio: 1; } .ph-9x19 { aspect-ratio: 9 / 19.5; }

/* ---------- 14. Reduced motion: every entrance and the sightline growth become instant states ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important;
  }
  .btn-primary.is-sending .btn-spinner, .btn-primary[aria-busy="true"] .btn-spinner {
    animation-duration: 1.6s !important; animation-iteration-count: infinite !important;   /* the one essential motion: it heard you */
  }
}