/* /assets/css/studio.css */
/* Customer Flow Studio — site system, Direction C “Marked-up proof” (2026-10-14).
   Work is shown as proof sheets with numbered margin notes and owner sign-off
   boxes, on the approved Open House identity: doorway teal, warm cream, night
   teal, the coral → pink door leaf kept to the leaf and small marks, Fraunces
   for display and Instrument Sans for text. Every campaign shown is fictional
   and says so next to the work. The two older demos keep site.css. */

@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-var.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/instrument-sans-var.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --teal: #006b5e;
  --teal-700: #005a4f;
  --teal-800: #004a41;
  --teal-900: #0a3831;
  --night: #062822;
  --mist: #eaf3ee;
  --sage: #d5e8de;
  --cream: #fff7eb;
  --paper: #fffcf7;
  --sand: #f6ead8;
  --sand-2: #efdfc6;
  --ink: #0f2d28;
  --muted: #4a5e59;
  --on-teal-muted: #d5e8de;
  --on-night-muted: #c9dcd3;
  --coral: #ff6257;
  --orange: #ff862e;
  --pink: #f2378b;
  --door: linear-gradient(180deg, #ff862e 0%, #ff7d3a 30%, #ff6257 58%, #f6447d 82%, #f2378b 100%);
  --line: rgba(0, 74, 65, 0.16);
  --line-strong: rgba(0, 74, 65, 0.34);
  --line-on-dark: rgba(255, 247, 235, 0.22);
  --focus: #0b2b26;
  --field-border: #7a8f8a;
  --error: #a3261c;

  --f-display: "Fraunces", Georgia, "Times New Roman", serif;
  --f-text: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --t-h1: clamp(2.375rem, 1.25rem + 3.6vw, 4.125rem);
  --t-h2: clamp(2rem, 1.3rem + 2.5vw, 3.5rem);
  --t-h3: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem);
  --t-lede: clamp(1.0625rem, 1rem + 0.36vw, 1.3125rem);
  --t-body: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --t-small: 0.9375rem;

  --max: 1312px;
  --gutter: clamp(16px, 4.5vw, 64px);
  --section: clamp(72px, 9vw, 144px);
  --header-h: 76px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.5, 0, 0.75, 0);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);

  --notes-w: clamp(240px, 22vw, 310px);
  --notes-gap: clamp(28px, 3.2vw, 48px);
  --sheet-l: 84px;
  --sheet-r: 48px;
  --pin-l: 28px;
  --pin-w: 26px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 56px);
  scrollbar-color: var(--teal) var(--sand);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--f-text);
  font-size: var(--t-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: tabular-nums;
}
main { overflow-x: clip; }
main:focus { outline: none; }

img, svg { display: block; max-width: 100%; }
img { height: auto; }
[hidden] { display: none !important; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--f-display);
  font-optical-sizing: auto;
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.022em;
  text-wrap: balance;
}
p, ul, ol, dl, dd, figure, blockquote, fieldset { margin: 0; }
ul, ol { padding: 0; list-style: none; }
p, li, dd { text-wrap: pretty; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
a:hover { text-decoration-thickness: 2px; }
strong, b { font-weight: 650; }
code { font-size: 0.9em; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
.on-dark :focus-visible { outline-color: var(--cream); }
::selection { background: rgba(255, 98, 87, 0.3); color: var(--ink); }
.on-dark ::selection { background: rgba(255, 134, 46, 0.45); color: var(--cream); }

.wrap {
  width: 100%;
  max-width: calc(var(--max) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: absolute;
  left: 16px;
  top: -120px;
  z-index: 300;
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--night);
  color: var(--cream);
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { top: 12px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Development banner (development builds only) */
.dev-banner { background: #1d1a17; color: #f5ecdd; font-size: 0.875rem; line-height: 1.5; }
.dev-banner p { max-width: calc(var(--max) + var(--gutter) * 2); margin-inline: auto; padding: 10px var(--gutter); }
.dev-banner code { padding: 1px 6px; border-radius: 4px; background: rgba(255, 255, 255, 0.12); }
.ph { display: inline-block; padding: 4px 10px; border: 1.5px dashed #c2410c; border-radius: 6px; background: #fff1e2; color: #7c2d12; font-size: 0.875rem; font-weight: 600; }

/* Buttons ------------------------------------------------------------- */
.btn {
  --btn-bg: var(--teal);
  --btn-fg: var(--cream);
  --btn-bd: var(--teal);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 26px;
  border: 2px solid var(--btn-bd);
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font: 600 1rem/1.15 var(--f-text);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.12s var(--ease);
}
.btn:hover { --btn-bg: var(--teal-900); --btn-bd: var(--teal-900); }
.btn:active { transform: scale(0.97); }
.btn--line { --btn-bg: transparent; --btn-fg: var(--teal); --btn-bd: var(--teal); }
.btn--line:hover { --btn-bg: var(--teal); --btn-fg: var(--cream); --btn-bd: var(--teal); }
.btn--cream { --btn-bg: var(--cream); --btn-fg: var(--teal-900); --btn-bd: var(--cream); }
.btn--cream:hover { --btn-bg: #ffffff; --btn-bd: #ffffff; --btn-fg: var(--night); }
.btn--cream-line { --btn-bg: transparent; --btn-fg: var(--cream); --btn-bd: rgba(255, 247, 235, 0.7); }
.btn--cream-line:hover { --btn-bg: var(--cream); --btn-fg: var(--teal-900); --btn-bd: var(--cream); }
.btn--sm { min-height: 44px; padding: 0 20px; font-size: 0.9375rem; }
.btn svg { width: 18px; height: 18px; flex: none; transition: transform 0.35s var(--ease); }
.btn:hover svg, .text-link:hover svg, .sheet-next:hover svg, .index-list a:hover svg, .inset:hover .inset__cap svg { transform: translateX(4px); }
.btn[disabled] { opacity: 0.6; cursor: progress; }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--teal);
  font-weight: 650;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.28em;
  transition: text-decoration-thickness 0.2s var(--ease), text-underline-offset 0.2s var(--ease), color 0.2s var(--ease);
}
.text-link:hover { text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.text-link svg { width: 18px; height: 18px; flex: none; transition: transform 0.35s var(--ease); }
.on-dark .text-link { color: var(--cream); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }

/* Header (teal on every page) ------------------------------------------ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--teal);
  color: var(--cream);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease);
}
.site-header.is-scrolled { border-bottom-color: rgba(255, 247, 235, 0.22); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: var(--header-h); }
.brand { display: block; flex: none; border-radius: 6px; }
.brand img { width: auto; height: 46px; }
.nav-toggle {
  display: none;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 16px;
  border: 2px solid currentColor;
  border-radius: 999px;
  background: transparent;
  color: var(--cream);
  font: 600 0.9375rem/1 var(--f-text);
  cursor: pointer;
}
.nav-toggle__bars { position: relative; width: 18px; height: 12px; }
.nav-toggle__bars::before, .nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.3s var(--ease), top 0.3s var(--ease);
}
.nav-toggle__bars::before { top: 1px; }
.nav-toggle__bars::after { top: 9px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { top: 5px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { top: 5px; transform: rotate(-45deg); }
.nav-menu { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 36px); }
.nav-list { display: flex; align-items: center; gap: clamp(14px, 2vw, 30px); }
.nav-list a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--cream);
  font-weight: 550;
  text-decoration: none;
}
.nav-list a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease);
}
.nav-list a:hover::after { transform: scaleX(1); }
.nav-list a[aria-current]::after { transform: scaleX(1); height: 3px; }
.nav-list a[aria-current] { font-weight: 650; }
.nav-email { display: none; }
@media (max-width: 1023.98px) {
  :root { --header-h: 68px; }
  .nav-toggle { display: inline-flex; }
  .brand img { height: 40px; }
  .nav-menu {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    padding: 12px var(--gutter) 28px;
    background: var(--teal);
    border-bottom: 1px solid rgba(255, 247, 235, 0.3);
    box-shadow: 0 30px 40px -30px rgba(6, 40, 34, 0.6);
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
  }
  .nav-menu.is-open { display: flex; }
  .nav-list li:nth-child(2) { --i: 1; }
  .nav-list li:nth-child(3) { --i: 2; }
  .nav-list li:nth-child(4) { --i: 3; }
  .nav-cta { --i: 4; }
  .nav-email { --i: 5; }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-list li + li { border-top: 1px solid rgba(255, 247, 235, 0.22); }
  .nav-list a { min-height: 56px; font-family: var(--f-display); font-size: 1.625rem; font-weight: 500; }
  .nav-list a::after { bottom: 12px; right: auto; width: 2.5ch; }
  .nav-email { display: inline-flex; align-items: center; min-height: 44px; color: var(--cream); font-weight: 600; }
  .nav-cta { width: 100%; }
}

/* Footer --------------------------------------------------------------- */
.site-footer { background: var(--night); color: var(--cream); padding: clamp(56px, 7vw, 96px) 0 32px; }
.footer-top { display: grid; grid-template-columns: minmax(220px, 1.2fr) repeat(3, minmax(0, 1fr)); gap: 40px clamp(24px, 4vw, 64px); }
.footer-brand img { width: 220px; height: auto; }
.footer-brand p { margin-top: 18px; max-width: 34ch; color: var(--on-night-muted); font-size: var(--t-small); }
.footer-label { font-size: 0.875rem; font-weight: 650; color: var(--on-night-muted); }
.footer-col ul { margin-top: 12px; display: grid; gap: 2px; }
.footer-col a { display: inline-flex; align-items: center; min-height: 40px; color: var(--cream); text-decoration: none; }
.footer-col a:hover { text-decoration: underline; }
.footer-base { display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between; align-items: center; margin-top: clamp(40px, 6vw, 72px); padding-top: 22px; border-top: 1px solid var(--line-on-dark); font-size: 0.875rem; color: var(--on-night-muted); }
.footer-base ul { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.footer-base a, .footer-link-btn { display: inline-flex; align-items: center; min-height: 40px; padding: 0; border: 0; background: none; color: var(--cream); font: inherit; text-decoration: underline; text-underline-offset: 0.22em; cursor: pointer; }
@media (max-width: 860px) {
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 420px) { .footer-top { grid-template-columns: 1fr; } }

/* Section tones -------------------------------------------------------- */
.sec { padding: var(--section) 0; }
.sec--tight { padding: clamp(56px, 6vw, 96px) 0; }
.tone-teal { background: var(--teal); color: var(--cream); }
.tone-night { background: var(--night); color: var(--cream); }
.tone-sand { background: var(--sand); }
.tone-paper { background: var(--paper); }
.rule-top { border-top: 1px solid var(--line-strong); }
.h2 { font-size: var(--t-h2); color: var(--teal); max-width: 20ch; }
.tone-teal .h2, .tone-night .h2 { color: var(--cream); }
.lede { font-size: var(--t-lede); line-height: 1.5; max-width: 56ch; }
.tone-teal .lede { color: var(--on-teal-muted); }
.tone-night .lede { color: var(--on-night-muted); }
.muted { color: var(--muted); }
.head-split { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 20px clamp(32px, 5vw, 96px); align-items: end; }
.head-split > div { display: grid; gap: 16px; justify-items: start; }
.stack { display: grid; gap: 16px; justify-items: start; }
.mt-l { margin-top: clamp(36px, 4.4vw, 64px); }
.mt-m { margin-top: clamp(24px, 2.8vw, 40px); }

/* Opening -------------------------------------------------------------- */
.open { background: var(--teal); color: var(--cream); padding: clamp(28px, 3.4vw, 52px) 0 var(--section); }
.open--short { padding-bottom: clamp(56px, 7vw, 112px); }
.open__head {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  grid-template-areas: "h l" "a l";
  gap: 22px clamp(32px, 5vw, 88px);
  align-items: start;
}
.open__head--crumbs { grid-template-areas: "c c" "h l" "a l"; }
.open__aside { display: contents; }
.crumbs { grid-area: c; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 0.875rem; font-weight: 600; color: var(--on-teal-muted); }
.crumbs a { color: var(--cream); display: inline-flex; min-height: 32px; align-items: center; }
.crumbs span[aria-hidden] { opacity: 0.6; }
.open h1 { grid-area: h; font-size: var(--t-h1); line-height: 1.02; letter-spacing: -0.028em; color: var(--cream); max-width: 17ch; }
.open h1.h1--long { max-width: 20ch; font-size: clamp(2.25rem, 1.2rem + 3.1vw, 3.875rem); }
.open__lede { grid-area: l; padding-top: 0.6em; font-size: var(--t-lede); line-height: 1.5; color: var(--on-teal-muted); max-width: 40ch; }
.open__lede p + p { margin-top: 12px; }
.open .actions { grid-area: a; }
.open__plain { display: grid; gap: 20px; max-width: 64ch; }

/* Fictional status ----------------------------------------------------- */
.fic {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 6px 13px 6px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font: 600 0.875rem/1.25 var(--f-text);
}
.fic__leaf { width: 9px; height: 15px; flex: none; background: var(--door); clip-path: polygon(0 12%, 100% 0, 100% 100%, 0 88%); }
.fic--dark { background: rgba(6, 40, 34, 0.5); border-color: rgba(255, 247, 235, 0.45); color: var(--cream); }
.fic-bar {
  position: sticky;
  top: var(--header-h);
  z-index: 40;
  background: var(--night);
  color: var(--cream);
  font-size: 0.875rem;
  font-weight: 600;
}
.fic-bar .wrap { display: flex; align-items: center; gap: 10px; min-height: 40px; }

/* Drawn marks ---------------------------------------------------------- */
.mark { width: 20px; height: 20px; flex: none; }
.mark--sm { width: 16px; height: 16px; }
.on-dark { --mark-ink: var(--teal); }
.on-dark :is(.sheet, .paper, .signsheet, .req, .ad, .desk, .plate__body) { --mark-ink: #fffcf7; }

/* Proof sheets with margin notes -------------------------------------- */
.proof { position: relative; margin-top: clamp(32px, 3.8vw, 56px); }
.proof__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  margin-bottom: 26px;
  padding-right: calc(var(--notes-w) + var(--notes-gap));
}
.proof__slug { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0; font-size: 0.875rem; font-weight: 600; }
.proof__slug .fic__leaf { margin-right: 10px; }
.proof__slug .slug__long { white-space: pre; }
.tab__short { display: none; }

.sheet {
  --leader-out: rgba(255, 247, 235, 0.75);
  --note-c: var(--cream);
  --crop: rgba(255, 247, 235, 0.75);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--notes-w);
  column-gap: var(--notes-gap);
  align-content: start;
  color: var(--ink);
}
.sheet--light { --leader-out: rgba(0, 74, 65, 0.55); --note-c: var(--teal-900); --crop: rgba(0, 74, 65, 0.55); }
.sheet + .sheet { margin-top: clamp(56px, 6vw, 80px); }
.sheet::before {
  content: "";
  position: absolute;
  inset: 0 calc(var(--notes-w) + var(--notes-gap)) 0 0;
  background: var(--paper);
  box-shadow: 0 2px 0 rgba(6, 40, 34, 0.06), 0 48px 80px -46px rgba(6, 40, 34, 0.85);
}
.sheet--light::before { border: 1px solid var(--line); box-shadow: 0 34px 60px -46px rgba(6, 40, 34, 0.5); }
.sheet::after {
  content: "";
  position: absolute;
  pointer-events: none;
  top: -20px;
  bottom: -20px;
  left: -20px;
  right: calc(var(--notes-w) + var(--notes-gap) - 20px);
  background:
    linear-gradient(var(--crop), var(--crop)) left 0 top 20px / 13px 1px no-repeat,
    linear-gradient(var(--crop), var(--crop)) left 20px top 0 / 1px 13px no-repeat,
    linear-gradient(var(--crop), var(--crop)) right 0 top 20px / 13px 1px no-repeat,
    linear-gradient(var(--crop), var(--crop)) right 20px top 0 / 1px 13px no-repeat,
    linear-gradient(var(--crop), var(--crop)) left 0 bottom 20px / 13px 1px no-repeat,
    linear-gradient(var(--crop), var(--crop)) left 20px bottom 0 / 1px 13px no-repeat,
    linear-gradient(var(--crop), var(--crop)) right 0 bottom 20px / 13px 1px no-repeat,
    linear-gradient(var(--crop), var(--crop)) right 20px bottom 0 / 1px 13px no-repeat;
}
.sheet--full { grid-template-columns: minmax(0, 1fr); }
.sheet--full::before { right: 0; }
.sheet--full::after { right: -20px; }
.sheet > * { position: relative; z-index: 1; }
.sheet__title {
  grid-column: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 12px;
  margin: 0;
  padding: 22px var(--sheet-r) 14px var(--sheet-l);
  border-bottom: 1px dashed var(--line-strong);
  font-family: var(--f-text);
  font-size: 0.8125rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  color: var(--muted);
}
.row { grid-column: 1; padding: 16px var(--sheet-r) 16px var(--sheet-l); }
.sheet__title + .row { padding-top: 24px; }
.row--last { padding-bottom: 30px; }
.pin {
  position: absolute;
  left: var(--pin-l);
  top: 17px;
  display: grid;
  place-items: center;
  width: var(--pin-w);
  height: var(--pin-w);
  border-radius: 50%;
  background: var(--teal);
  color: var(--cream);
  font: 700 0.8125rem/1 var(--f-text);
}
.note {
  --nt: 16px;
  grid-column: 2;
  position: relative;
  align-self: start;
  display: flex;
  gap: 12px;
  padding-top: var(--nt);
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--note-c);
}
.note::before {
  content: "";
  position: absolute;
  top: calc(var(--nt) + 13px);
  right: 100%;
  width: calc(var(--notes-gap) + var(--sheet-r) - 14px);
  height: 1px;
  background: linear-gradient(to right, var(--teal) 0 calc(var(--sheet-r) - 14px), var(--leader-out) calc(var(--sheet-r) - 14px));
  transform-origin: left center;
  transition: background-color 0.25s var(--ease), height 0.2s var(--ease);
}
.note::after {
  content: "";
  position: absolute;
  top: calc(var(--nt) + 10px);
  right: calc(100% + var(--notes-gap) + var(--sheet-r) - 17.5px);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--teal);
  transition: transform 0.25s var(--ease), background-color 0.25s var(--ease);
}
.note:focus-visible { outline: 2px solid var(--note-c); outline-offset: 6px; border-radius: 8px; }
.desk__key li:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; border-radius: 6px; }
.note__n { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border: 1.5px solid currentColor; border-radius: 50%; font: 700 0.8125rem/1 var(--f-text); transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease); }
.sheet__fic { display: inline-flex; align-items: center; gap: 7px; padding: 3px 10px 3px 8px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 0.75rem; font-weight: 650; color: var(--teal-900); white-space: nowrap; }
.sheet__fic .fic__leaf { width: 7px; height: 12px; }


/* Sign-off boxes ------------------------------------------------------- */
.signoff { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin-top: 6px; padding-top: 18px; border-top: 1px dashed var(--line-strong); }
.signoff__title { font-weight: 650; font-size: 0.875rem; }
.signoff ul { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.signoff li { display: inline-flex; gap: 8px; align-items: center; font-size: 0.875rem; }
.signoff .mark { color: var(--teal); }
.signoff__note { flex-basis: 100%; font-size: 0.8125rem; color: var(--muted); }

.sheet-next {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--teal);
  font: 650 1rem/1.2 var(--f-text);
  text-decoration: underline;
  text-underline-offset: 0.28em;
  cursor: pointer;
}
.sheet-next svg { width: 18px; height: 18px; }

/* Artifacts: search ad -------------------------------------------------- */
.ad-who { display: flex; align-items: center; gap: 12px; min-height: 34px; }
.ad-fav { display: grid; place-items: center; width: 34px; height: 34px; flex: none; }
/* Example Painting Co. (fictional): a paint-swatch card in its own ochre, kept
   apart from Customer Flow's coral so the client never reads as the studio. */
.epc-mark { display: inline-block; flex: none; width: 30px; height: 30px; border-radius: 8px; background: linear-gradient(180deg, #f4dda9 0 33.3%, #e0ad4f 33.3% 66.6%, #b07a22 66.6%); box-shadow: inset 0 0 0 1px rgba(10, 56, 49, 0.18), 0 2px 0 rgba(10, 56, 49, 0.08); }
.ad-name { display: block; font-weight: 600; line-height: 1.2; }
.ad-url { display: block; color: var(--muted); font-size: 0.875rem; line-height: 1.3; }
.ad-tag { display: inline-block; margin-right: 8px; padding: 1px 7px; border: 1px solid var(--ink); border-radius: 5px; font-weight: 700; font-size: 0.75rem; color: var(--ink); }
.ad-head { font-weight: 600; font-size: clamp(1.5rem, 1.05rem + 1.9vw, 2.75rem); line-height: 1.1; letter-spacing: -0.016em; color: var(--teal); text-wrap: balance; }
.ad-head--m { font-size: clamp(1.25rem, 1rem + 1vw, 1.875rem); }
.ad-desc { font-size: clamp(1.0625rem, 1rem + 0.5vw, 1.4375rem); line-height: 1.45; max-width: 42ch; }
.ad-card { display: grid; gap: 10px; padding: clamp(20px, 2.4vw, 32px); background: var(--paper); border: 1px solid var(--line); border-radius: 16px; }

/* Artifacts: tables (intent, records, sign-off, report) ----------------- */
.tbl { width: 100%; border-collapse: collapse; font-size: var(--t-small); }
.tbl caption { text-align: left; }
.tbl th, .tbl td { padding: 13px 16px 13px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.tbl thead th { padding-top: 0; font-size: 0.8125rem; font-weight: 650; color: var(--muted); border-bottom-color: var(--line-strong); white-space: nowrap; }
.tbl tbody th { font-weight: 650; }
.tbl .mark { color: var(--teal); }
.q-cell { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; }
.q-cell .mark { margin-top: 2px; }
tr.is-out .q-cell span { text-decoration: line-through; text-decoration-thickness: 1.5px; text-decoration-color: rgba(15, 45, 40, 0.55); }
.tbl td.judgment { color: var(--muted); }
.rec-id { font-weight: 700; white-space: nowrap; }
.rec-state { display: flex; gap: 10px; align-items: flex-start; font-weight: 650; }
.rec-state .mark { margin-top: 2px; }
.trail { display: block; margin-top: 4px; font-size: 0.8125rem; color: var(--muted); font-weight: 400; }
.tbl-key { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 14px; font-size: 0.8125rem; color: var(--muted); }
.tbl-key span { display: inline-flex; gap: 7px; align-items: center; }
.tbl-key .mark { color: var(--teal); }
tr.is-lit { background: rgba(255, 134, 46, 0.12); }

.signsheet { position: relative; padding: clamp(18px, 2.2vw, 30px) clamp(18px, 2.6vw, 36px); background: var(--paper); border: 1px solid var(--line); box-shadow: 0 30px 60px -44px rgba(6, 40, 34, 0.6); }
.signtable tbody th { font-family: var(--f-display); font-weight: 500; font-size: 1.1875rem; line-height: 1.2; color: var(--teal-900); }
.signtable td.who { white-space: nowrap; font-weight: 650; color: var(--teal-900); }
.signtable td.who .mark { display: inline-block; vertical-align: -3px; margin-right: 8px; }
.signtable td.you { color: var(--teal-900); font-weight: 550; }
.step-n { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-right: 10px; border-radius: 50%; background: var(--teal); color: var(--cream); font: 700 0.75rem/1 var(--f-text); vertical-align: 2px; }

@media (max-width: 760px) {
  .tbl--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tbl--stack, .tbl--stack tbody, .tbl--stack tr, .tbl--stack th, .tbl--stack td { display: block; width: 100%; }
  .tbl--stack tr { padding: 14px 0; border-bottom: 1px solid var(--line-strong); }
  .tbl--stack th, .tbl--stack td { border: 0; padding: 4px 0; white-space: normal; }
  .tbl--stack td[data-label]::before { content: attr(data-label); display: block; font-size: 0.75rem; font-weight: 650; color: var(--muted); }
  .tbl--stack .rec-id { font-size: 1.125rem; }
}

/* Artifacts: request page (illustrative values, not inputs) ------------- */
.req-path { color: var(--muted); font-size: 0.8125rem; }
.req-title { margin-top: 8px; font-family: var(--f-display); font-size: clamp(1.75rem, 1.2rem + 1.7vw, 2.875rem); line-height: 1.04; letter-spacing: -0.022em; color: var(--teal); }
.req-intro { margin-top: 10px; max-width: 46ch; color: var(--muted); }
.req-fields { display: grid; gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.req-fields--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.req-fields div { display: grid; gap: 6px; align-content: start; }
.req-fields dt { font-weight: 600; font-size: 0.875rem; }
.req-fields dd { min-height: 48px; padding: 12px 14px; border: 1px solid var(--field-border); border-radius: 10px; background: #fff; line-height: 1.4; }
.req-btn { display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px; border-radius: 999px; background: var(--teal-800); color: var(--cream); font-weight: 600; }
.req-send { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; font-size: 0.875rem; color: var(--muted); }

/* Artifacts: ad text assets -------------------------------------------- */
.assets li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 10px 0; border-top: 1px solid var(--line); font-weight: 600; font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.3125rem); color: var(--teal); }
.assets li:first-child { border-top: 0; padding-top: 2px; }
.assets--desc li { font-weight: 450; font-size: 1rem; color: var(--ink); }
.count { flex: none; font-size: 0.8125rem; font-weight: 650; color: var(--muted); }

/* Artifacts: campaign structure ---------------------------------------- */
.tree { color: var(--ink); }
.tree__campaign { padding: 20px 24px; border: 2px solid var(--teal); border-radius: 16px; background: var(--paper); }
.tree span { display: block; font-family: var(--f-display); font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.75rem); line-height: 1.15; letter-spacing: -0.012em; color: var(--teal-900); }
.tree small { display: block; margin-top: 4px; font-size: 0.875rem; color: var(--muted); }
.tree__groups { position: relative; display: grid; gap: 12px; margin-top: 20px; padding-left: 34px; }
.tree__groups::before { content: ""; position: absolute; left: 10px; top: -20px; bottom: 26px; width: 2px; background: var(--teal); }
.tree__groups li { position: relative; padding: 14px 18px; border-radius: 12px; background: var(--mist); }
.tree__groups li::before { content: ""; position: absolute; left: -24px; top: 50%; width: 24px; height: 2px; background: var(--teal); }
.tree__groups span { font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); }
.tree__end { position: relative; margin-top: 30px; padding: 18px 24px; border-radius: 16px; background: var(--teal); color: var(--cream); }
.tree__end::before { content: ""; position: absolute; left: 44px; top: -30px; height: 30px; width: 2px; background: var(--teal); }
.tree__end span { color: var(--cream); }
.tree__end small { color: var(--on-teal-muted); }
.tree__groups li.is-held { background: transparent; border: 1.5px dashed var(--line-strong); }

/* Mini proofs (contact sheet) ------------------------------------------ */

/* Margin rows (category, heading, body) -------------------------------- */
.mrow {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 4fr) minmax(0, 7fr);
  gap: 12px clamp(20px, 3vw, 48px);
  padding: clamp(26px, 3vw, 40px) 0;
  border-top: 1px solid var(--line-strong);
}
.mrow:last-child { border-bottom: 1px solid var(--line-strong); }
.mrow__margin { font-size: 0.8125rem; font-weight: 650; color: var(--teal); padding-top: 0.5em; }
.mrow h3 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2.125rem); color: var(--teal-900); }
.mrow--lead h3 { font-size: clamp(2rem, 1.4rem + 2vw, 3.5rem); }
.mrow__body { display: grid; gap: 16px; justify-items: start; }
.mrow__body p { max-width: 58ch; }
.mrow--lead .mrow__body > p:first-child { font-size: var(--t-lede); line-height: 1.5; }
.cols2 { width: 100%; columns: 2; column-gap: 32px; }
.cols2 li { break-inside: avoid; padding: 9px 0; border-top: 1px solid var(--line); font-size: 0.9375rem; font-weight: 550; }
.tone-night .mrow, .tone-teal .mrow { border-color: var(--line-on-dark); }
.tone-night .mrow h3, .tone-teal .mrow h3 { color: var(--cream); }
.tone-night .mrow__margin, .tone-teal .mrow__margin { color: var(--on-night-muted); }

/* Advertising opening artwork ------------------------------------------ */
.intent-mini { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
.intent-mini li { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.intent-mini span { font-weight: 650; }
.intent-mini small { grid-column: 2; font-size: 0.8125rem; color: var(--muted); }
.intent-mini .mark { color: var(--teal); }
.intent-mini .is-out span { text-decoration: line-through; text-decoration-color: rgba(15, 45, 40, 0.55); }

/* Problems list ---------------------------------------------------------- */
.plist { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(24px, 3vw, 48px); }
.plist li { display: grid; gap: 10px; align-content: start; padding: 22px 0 28px; border-top: 1px solid var(--line-strong); }
.plist h3 { font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.5rem); line-height: 1.15; color: var(--teal-900); }
.plist__look { padding-top: 10px; border-top: 1px dashed var(--line-strong); font-size: 0.8125rem; font-weight: 650; color: var(--teal); }
.aside-list { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 32px clamp(32px, 5vw, 96px); align-items: start; }
.aside-list__head { position: sticky; top: calc(var(--header-h) + 40px); display: grid; gap: 16px; justify-items: start; }
.aside-list__head .h2 { max-width: 12ch; }
.plist.plist--rows { display: block; }
.plist--rows li { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 10px clamp(20px, 3vw, 44px); padding: 24px 0 26px; border-top: 1px solid var(--line-strong); }
.plist--rows li:last-child { border-bottom: 1px solid var(--line-strong); }
.plist--rows .plist__look { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 12px; padding-top: 0; border-top: 0; }
.plist--rows .plist__look span { color: var(--muted); }
.stack-head { display: grid; gap: 16px; justify-items: start; max-width: 62ch; }
.ticks--2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(24px, 3vw, 48px); }
.h3-like { font-size: var(--t-h3); color: var(--teal-900); }

/* Measurement, approach and example pieces ------------------------------ */
.halves { display: grid; grid-template-columns: 1fr 1fr; gap: 20px clamp(20px, 3vw, 44px); }
.halves__h { font-family: var(--f-display); font-size: 1.25rem; color: var(--teal); margin-bottom: 6px; }
.defs { display: grid; }
.defs div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr); gap: 8px 28px; padding: 18px 0; border-top: 1px solid var(--line-strong); }
.defs div:last-child { border-bottom: 1px solid var(--line-strong); }
.defs dt { font-family: var(--f-display); font-size: 1.375rem; color: var(--teal-900); line-height: 1.2; }
.report-tbl tbody th { width: 30%; font-weight: 650; color: var(--teal-900); }
.report-tbl td { color: var(--ink); }
.scope-k { font-size: 0.8125rem; font-weight: 650; color: var(--muted); }
.scope-v { margin-top: 6px; font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.3125rem); line-height: 1.45; max-width: 52ch; }
.ad-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.steps-sheet { max-width: 760px; padding: clamp(20px, 2.6vw, 36px); border: 1px solid rgba(255, 247, 235, 0.35); border-radius: 18px; background: rgba(6, 40, 34, 0.35); }
.tone-teal .steps li { border-color: var(--line-on-dark); color: var(--on-teal-muted); }
.tone-teal .steps b { color: var(--cream); }
.tone-teal .steps__dot { border-color: rgba(255, 247, 235, 0.6); }
.tone-teal .steps li.is-done .steps__dot { background: var(--cream); border-color: var(--cream); }
.tone-teal .sim__status { color: var(--cream); }
.steps--static li .steps__dot { background: var(--teal); border-color: var(--teal); }
.faq-group__title:not(:first-child) { margin-top: 32px; }
.contact-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 32px clamp(32px, 5vw, 88px); align-items: start; }
.contact-side { display: grid; gap: 18px; position: sticky; top: calc(var(--header-h) + 24px); }
.contact-email { font-weight: 600; }
.open__fit { grid-area: a; max-width: 52ch; }
.tree ol { padding: 0; }

/* Quiet passages ------------------------------------------------------- */
.quiet { padding: clamp(80px, 11vw, 168px) 0; }
.quiet__text { max-width: 30ch; font-family: var(--f-display); font-size: clamp(1.75rem, 1.2rem + 2vw, 3rem); line-height: 1.15; letter-spacing: -0.02em; color: var(--teal-900); }
.quiet__sub { margin-top: 22px; max-width: 56ch; font-size: var(--t-lede); color: var(--muted); }

/* Lists with drawn marks ------------------------------------------------ */
.ticks li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--line); }
.ticks .mark { color: var(--teal); margin-top: 3px; }
.tone-night .ticks li, .tone-teal .ticks li { border-color: var(--line-on-dark); color: var(--cream); }
.tone-night .ticks .mark, .tone-teal .ticks .mark { color: var(--cream); }
.open .ticks li { border-color: var(--line-on-dark); color: var(--cream); }
.open .ticks .mark { color: var(--cream); }
.plain-list li { padding: 10px 0; border-top: 1px solid var(--line); font-size: 0.9375rem; }
.tone-night .plain-list li { border-color: var(--line-on-dark); color: var(--on-night-muted); }
.list-title { font-family: var(--f-text); font-size: 0.9375rem; font-weight: 650; letter-spacing: 0; color: var(--teal-900); }
.tone-night .list-title, .tone-teal .list-title { color: var(--cream); }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px clamp(32px, 5vw, 96px); }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px clamp(24px, 3vw, 56px); }
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px clamp(32px, 5vw, 96px); align-items: start; }
.split--even { grid-template-columns: 1fr 1fr; }

/* Job sheets ------------------------------------------------------------ */
.jobs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.paper { position: relative; display: grid; gap: 12px; padding: clamp(24px, 2.8vw, 40px); background: var(--paper); border: 1px solid var(--line); box-shadow: 0 34px 60px -46px rgba(6, 40, 34, 0.6); color: var(--ink); }
.paper--crop::after {
  content: "";
  position: absolute;
  pointer-events: none;
  inset: -20px;
  --c: var(--teal);
  background:
    linear-gradient(var(--c), var(--c)) left 0 top 20px / 13px 1px no-repeat,
    linear-gradient(var(--c), var(--c)) left 20px top 0 / 1px 13px no-repeat,
    linear-gradient(var(--c), var(--c)) right 0 top 20px / 13px 1px no-repeat,
    linear-gradient(var(--c), var(--c)) right 20px top 0 / 1px 13px no-repeat,
    linear-gradient(var(--c), var(--c)) left 0 bottom 20px / 13px 1px no-repeat,
    linear-gradient(var(--c), var(--c)) left 20px bottom 0 / 1px 13px no-repeat,
    linear-gradient(var(--c), var(--c)) right 0 bottom 20px / 13px 1px no-repeat,
    linear-gradient(var(--c), var(--c)) right 20px bottom 0 / 1px 13px no-repeat;
}
.tone-teal .paper--crop::after { --c: rgba(255, 247, 235, 0.75); }
.paper--mist { background: var(--mist); }
.jobs .paper:nth-child(2) { margin-top: clamp(0px, 5vw, 72px); }
.paper__slug { font-size: 0.8125rem; font-weight: 650; color: var(--muted); padding-bottom: 12px; border-bottom: 1px dashed var(--line-strong); }
.paper h3 { font-size: clamp(1.625rem, 1.25rem + 1.3vw, 2.375rem); color: var(--teal-900); }
.paper__line { font-size: var(--t-lede); line-height: 1.45; max-width: 42ch; }
.paper__end { padding-top: 16px; border-top: 2px solid var(--teal); font-size: 0.9375rem; }

/* FAQ disclosure ------------------------------------------------------ */
.faq details { border-bottom: 1px solid var(--line-strong); }
.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  min-height: 64px;
  padding: 18px 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--f-display);
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);
  line-height: 1.2;
  letter-spacing: -0.012em;
  color: var(--teal-900);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 14px; height: 14px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-4px) rotate(45deg); transition: transform 0.3s var(--ease); }
.faq details[open] summary::after { transform: translateY(3px) rotate(225deg); }
.faq details > div { padding: 0 0 24px; max-width: 66ch; color: var(--muted); display: grid; gap: 12px; }
.faq-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 32px clamp(32px, 5vw, 96px); }
.faq-grid .h2 { max-width: 10ch; }
.faq-group + .faq-group { margin-top: 36px; }
.faq-group__title { font-family: var(--f-text); font-size: 0.875rem; font-weight: 650; letter-spacing: 0; color: var(--teal); margin-bottom: 4px; }

/* Close --------------------------------------------------------------- */
.close { background: var(--teal); color: var(--cream); padding: var(--section) 0; overflow: hidden; }
.close__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: center; }
.close__text { display: grid; gap: 22px; justify-items: start; }
.close h2 { font-size: clamp(2.25rem, 1.3rem + 3.4vw, 4.5rem); color: var(--cream); max-width: 16ch; }
.close p { font-size: var(--t-lede); color: var(--on-teal-muted); max-width: 46ch; }
.close__mark { width: auto; height: clamp(180px, 24vw, 340px); margin-right: clamp(0px, 4vw, 64px); }

/* Simulation controls --------------------------------------------------- */
.sim { display: grid; gap: 12px; justify-items: start; }
.sim__label { display: inline-flex; align-items: center; gap: 8px; font-size: 0.8125rem; font-weight: 650; color: var(--muted); }
.tone-teal .sim__label, .tone-night .sim__label { color: var(--on-night-muted); }
.sim__status { font-size: 0.9375rem; min-height: 1.5em; }
.sim__ack { padding: 14px 16px; border-radius: 12px; background: var(--mist); color: var(--teal-900); font-weight: 550; }
/* A simulation on a paper sheet keeps paper colours, even inside a teal band. */
.sheet .sim__label { color: var(--muted); }
.sheet .sim__status { color: var(--teal-900); }

.steps { display: grid; gap: 0; counter-reset: s; }
.steps li { display: grid; grid-template-columns: 28px 1fr; gap: 14px; align-items: start; padding: 14px 0; border-top: 1px solid var(--line); }
.steps__dot { width: 20px; height: 20px; margin-top: 3px; border-radius: 50%; border: 2px solid var(--line-strong); transition: background-color 0.4s var(--ease), border-color 0.4s var(--ease); }
.steps li.is-done .steps__dot { background: var(--teal); border-color: var(--teal); }
.steps li.is-current .steps__dot { background: var(--orange); border-color: var(--orange); }
.steps b { color: var(--teal-900); }

/* Older demos strip ---------------------------------------------------- */
.demos { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 24px clamp(32px, 5vw, 96px); }
.demos__list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(24px, 3vw, 48px); }
.demo-item { display: grid; gap: 8px; align-content: start; padding: 18px 0; border-top: 1px solid var(--line-strong); }
.demo-item h3 { font-size: 1.375rem; color: var(--teal-900); }

/* Contact form ---------------------------------------------------------- */
.form-sheet { position: relative; padding: clamp(24px, 3vw, 48px); background: var(--paper); border: 1px solid var(--line); box-shadow: 0 40px 80px -50px rgba(6, 40, 34, 0.7); color: var(--ink); }
.form-sheet__slug { margin: calc(-1 * clamp(24px, 3vw, 48px)) calc(-1 * clamp(24px, 3vw, 48px)) 24px; padding: 16px clamp(24px, 3vw, 48px); border-bottom: 1px dashed var(--line-strong); font-size: 0.8125rem; font-weight: 650; color: var(--muted); }
.inquiry-form { display: grid; gap: 22px; }
.field { display: grid; gap: 8px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.field label, .field legend { font-weight: 650; font-size: 0.9375rem; padding: 0; }
.optional { font-weight: 450; color: var(--muted); }
.req-mark { color: var(--teal); }
.hint { font-size: 0.875rem; color: var(--muted); }
.field input[type="text"], .field input[type="email"], .field input[type="url"], .field textarea {
  width: 100%;
  min-height: 52px;
  padding: 13px 15px;
  border: 1.5px solid var(--field-border);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  font: 400 1rem/1.45 var(--f-text);
  caret-color: var(--teal);
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; border-color: var(--teal); }
.field [aria-invalid="true"] { border-color: var(--error); box-shadow: 0 0 0 1px var(--error); }
.field-error { color: var(--error); font-size: 0.875rem; font-weight: 600; }
fieldset.field { border: 0; padding: 0; min-width: 0; }
.radios { display: flex; flex-wrap: wrap; gap: 10px; }
.radio { position: relative; }
.radio input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.radio label { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 1.5px solid var(--field-border); border-radius: 999px; background: #fff; font-weight: 550; cursor: pointer; }
.radio input:checked + label { background: var(--teal); border-color: var(--teal); color: var(--cream); }
.radio input:focus-visible + label { outline: 3px solid var(--focus); outline-offset: 2px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-privacy { font-size: 0.875rem; color: var(--muted); }
.form-privacy a { color: var(--teal); font-weight: 600; }
.form-submit { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
.form-status { font-size: 0.9375rem; font-weight: 550; }
.form-status.is-error { color: var(--error); }
.form-status a { color: var(--teal); font-weight: 650; }
.form-preview-note { padding: 12px 14px; border: 1.5px dashed #c2410c; border-radius: 10px; background: #fff1e2; color: #7c2d12; font-size: 0.875rem; }
.form-success { display: grid; gap: 14px; justify-items: start; padding: 8px 0; }
.form-success:focus { outline: none; }
.form-success h2 { font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem); color: var(--teal); }
.form-success__mark { width: 40px; height: auto; }
.email-panel { display: grid; gap: 14px; justify-items: start; }
.email-panel h2 { font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem); color: var(--teal); }

/* Consent panel (analytics-consent.js builds it) ----------------------- */
.consent {
  position: fixed;
  z-index: 150;
  left: max(16px, env(safe-area-inset-left));
  bottom: max(16px, env(safe-area-inset-bottom));
  width: min(440px, calc(100% - 32px));
  padding: 18px 20px 20px;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: var(--paper);
  box-shadow: 0 40px 80px -40px rgba(6, 40, 34, 0.55);
  color: var(--ink);
  font-size: 0.9375rem;
  line-height: 1.5;
}
.consent:focus { outline: none; }
.consent__text a { color: var(--teal); font-weight: 600; }
.consent__status { margin-top: 8px; color: var(--muted); }
.consent__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.consent .btn { --btn-bg: transparent; --btn-fg: var(--teal); --btn-bd: var(--teal); min-height: 44px; padding-inline: 12px; font-size: 0.9375rem; }
.consent .btn:hover { --btn-bg: var(--teal); --btn-fg: var(--cream); }
@media (max-width: 359.98px) { .consent__actions { grid-template-columns: 1fr; } }

/* Legal pages ----------------------------------------------------------- */
.legal { padding: clamp(48px, 6vw, 88px) 0 var(--section); }
.legal-inner { max-width: 760px; }
.legal-inner > h2 { margin-top: 44px; font-size: clamp(1.5rem, 1.25rem + 0.8vw, 2rem); color: var(--teal-900); }
.legal-inner p, .legal-inner ul { margin-top: 14px; }
.legal-inner ul { padding-left: 1.2em; list-style: disc; }
.legal-inner li + li { margin-top: 6px; }
.legal-inner a { color: var(--teal); font-weight: 600; }
.legal-draft { margin-top: 18px; }

/* ======================================================================
   Premium pass (2026-10-15): the campaign plate, the Advertising desk and
   the authored artifacts. Motion thesis: .impeccable/motion-thesis.md.
   ====================================================================== */

/* Docket: three stations on one line. On Home it is the tab control; on the
   example pages it is a linked map of where the page sits in the story. */
.docket {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--notes-w);
  grid-template-areas: "track label";
  align-items: center;
  column-gap: var(--notes-gap);
  row-gap: 12px;
  margin-bottom: 22px;
}
.docket__label { grid-area: label; }
.docket__track { grid-area: track; justify-self: start; }
.docket__label { display: inline-flex; align-items: flex-start; gap: 10px; font-size: 0.875rem; font-weight: 600; line-height: 1.4; color: var(--on-teal-muted); }
.docket__label .fic__leaf { margin-top: 2px; }
.docket__label .fic__leaf { flex: none; }
.docket__track { position: relative; display: flex; align-items: center; gap: clamp(18px, 2.6vw, 40px); margin: 0; padding: 0; list-style: none; }
.docket__rail { position: absolute; left: 22px; right: 22px; top: 50%; height: 2px; margin-top: -1px; background: rgba(255, 247, 235, 0.26); pointer-events: none; }
.docket__fill { position: absolute; inset: 0; background: var(--cream); transform-origin: left center; transform: scaleX(var(--p, 0)); transition: transform 0.7s var(--ease); }
.station {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 14px 0 6px;
  border: 0;
  border-radius: 999px;
  background: var(--teal);
  color: var(--on-teal-muted);
  font: 600 0.9375rem/1 var(--f-text);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.25s var(--ease);
}
.station__n {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: none;
  border: 1.5px solid rgba(255, 247, 235, 0.72);
  border-radius: 50%;
  background: var(--teal);
  font: 700 0.8125rem/1 var(--f-text);
  transition: background-color 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease), transform 0.35s var(--ease);
}
.station__l { position: relative; }
.station__l::after { content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 0.35s var(--ease); }
.station:hover { color: var(--cream); }
.station:hover .station__l::after { transform: scaleX(1); }
.station.is-done .station__n { border-color: var(--cream); background: rgba(255, 247, 235, 0.16); }
.station[aria-selected="true"], .station[aria-current] { color: var(--cream); }
.station[aria-selected="true"] .station__n, .station[aria-current] .station__n { background: var(--cream); border-color: var(--cream); color: var(--teal-900); }
.station[aria-selected="true"] .station__l::after { transform: scaleX(1); }
.station:active .station__n { transform: scale(0.92); }
.station:focus-visible { outline: 3px solid var(--cream); outline-offset: 2px; }
.docket--static { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "track label"; margin-top: clamp(28px, 3vw, 44px); }
.docket--static .station--other { color: var(--on-teal-muted); }

/* The plate: one persistent paper whose proofs change on it. */
.plate { position: relative; margin-top: clamp(28px, 3vw, 44px); }
.plate__body { position: relative; }
.plate__paper {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: calc(var(--notes-w) + var(--notes-gap));
  background: var(--paper);
  box-shadow: 0 2px 0 rgba(6, 40, 34, 0.06), 0 52px 90px -48px rgba(6, 40, 34, 0.9);
}
.plate__paper::after,
.report-sheet::after,
.desk__sheet::after {
  content: "";
  position: absolute;
  pointer-events: none;
  inset: -20px;
  --c: rgba(255, 247, 235, 0.78);
  --c2: var(--c);
  background:
    linear-gradient(var(--c), var(--c)) left 0 top 20px / 13px 1px no-repeat,
    linear-gradient(var(--c), var(--c)) left 20px top 0 / 1px 13px no-repeat,
    linear-gradient(var(--c), var(--c)) right 0 top 20px / 13px 1px no-repeat,
    linear-gradient(var(--c), var(--c)) right 20px top 0 / 1px 13px no-repeat,
    linear-gradient(var(--c2), var(--c2)) left 0 bottom 20px / 13px 1px no-repeat,
    linear-gradient(var(--c2), var(--c2)) left 20px bottom 0 / 1px 13px no-repeat,
    linear-gradient(var(--c2), var(--c2)) right 0 bottom 20px / 13px 1px no-repeat,
    linear-gradient(var(--c2), var(--c2)) right 20px bottom 0 / 1px 13px no-repeat;
}
.plate__stage { position: relative; }
.plate__stage.is-resizing { overflow: clip; }
.plate .sheet::before, .plate .sheet::after { display: none; }
.plate__stage > .sheet ~ .sheet { display: none; }
.plate.is-ready .plate__stage > .sheet { display: none; }
.plate.is-ready .plate__stage > .sheet.is-active,
.plate.is-ready .plate__stage > .sheet.is-leaving { display: grid; }
.plate .sheet.is-leaving { position: absolute; top: 0; left: 0; right: 0; z-index: 0; pointer-events: none; }
.plate .sheet:focus-visible { outline-offset: -3px; }
.anchor-ghost { position: absolute; z-index: 6; margin: 0; pointer-events: none; transform-origin: 0 0; white-space: nowrap; box-sizing: border-box; box-shadow: 0 14px 28px -14px rgba(6, 40, 34, 0.6); }

/* Artifact frames: consecutive rows drawn as one white artifact, so a margin
   note can point at each part without breaking the thing it describes. */
.row.fr::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: calc(var(--sheet-l) - 22px);
  right: calc(var(--sheet-r) - 14px);
  background: #fff;
  border-left: 1px solid var(--line-strong);
  border-right: 1px solid var(--line-strong);
}
.row.fr--top { padding-top: 30px; }
.row.fr--top::before { top: 12px; border-top: 1px solid var(--line-strong); border-radius: 16px 16px 0 0; }
.row.fr--end { padding-bottom: 30px; }
.row.fr--end::before { bottom: 12px; border-bottom: 1px solid var(--line-strong); border-radius: 0 0 16px 16px; box-shadow: 0 22px 36px -30px rgba(6, 40, 34, 0.55); }
.row.fr--top > .pin { top: 31px; }
.fr--top + .note { --nt: 30px; }
.row.fr--page::before { background: #fff; }
.row.fr--carried::before { background: linear-gradient(#fff, #fff) top / 100% 12px no-repeat, var(--paper); }

/* Search field */
.row--serp { padding-top: 26px; padding-bottom: 22px; }
.row--serp > .pin { top: 41px; }
.sheet__title + .row--serp + .note { --nt: 30px; }
.serp {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 62px;
  max-width: 580px;
  padding: 10px 24px 10px 20px;
  border: 1.5px solid var(--line-strong);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 14px 28px -22px rgba(6, 40, 34, 0.55);
}
.serp__icon { width: 22px; height: 22px; flex: none; color: var(--teal); }
.serp__q { min-width: 0; font-family: var(--f-display); font-weight: 450; font-size: clamp(1.375rem, 1.1rem + 1vw, 2rem); line-height: 1.15; letter-spacing: -0.012em; color: var(--teal-900); }
.serp__q .anchor { position: relative; display: inline-block; white-space: nowrap; }
.serp__q .anchor::after { content: ""; position: absolute; top: 0.08em; bottom: 0.02em; left: 0; width: 100%; border-right: 2px solid var(--orange); opacity: 0; pointer-events: none; }

/* Request page */
.pf-bar { display: flex; align-items: center; gap: 12px; margin: -4px 0 18px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.pf-dots { display: flex; gap: 5px; }
.pf-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--sand-2); }
.pf-url { min-width: 0; padding: 4px 12px; border-radius: 999px; background: var(--cream); font-size: 0.8125rem; color: var(--muted); overflow-wrap: anywhere; }
.pf-brand { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 18px; }
.pf-brand .epc-mark { width: 26px; height: 26px; border-radius: 7px; }
.pf-brand__name { font-weight: 700; font-size: 1rem; letter-spacing: -0.005em; color: var(--ink); }
.pf-brand__tag { margin-left: auto; padding: 3px 10px; border: 1px solid var(--line); border-radius: 999px; font-size: 0.75rem; font-weight: 600; color: var(--muted); }
.pf-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 20px 28px; align-items: center; }
.pf-figure { margin: 0; }
.pf-figure .room, .crop-figure .room { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 10px; }
.pf-figure figcaption, .crop-figure figcaption { margin-top: 6px; font-size: 0.75rem; font-weight: 600; color: var(--muted); }
.crop-figure { margin: 6px 0 0; max-width: 340px; }
.crop-figure .room { box-shadow: 0 22px 36px -30px rgba(6, 40, 34, 0.55); }
.carried { display: grid; gap: 6px; padding: 12px 14px; border: 1.5px dashed var(--line-strong); border-radius: 10px; }
.carried__k { font-size: 0.75rem; font-weight: 650; color: var(--muted); }
.carried__v { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 0.9375rem; font-weight: 600; color: var(--teal-900); }
.chip { display: inline-block; padding: 1px 11px 2px; border: 1.5px solid var(--teal-800); border-radius: 999px; background: #fff; font-family: var(--f-display); font-weight: 450; font-size: 1.0625rem; line-height: 1.35; color: var(--teal-900); white-space: nowrap; }
.req-send { margin-top: 18px; }
.small { font-size: 0.875rem; }

/* Owner's record */
.rec-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; }
.rec-head .rec-id { font: 700 clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem)/1 var(--f-text); letter-spacing: 0.01em; color: var(--teal-900); }
.rec-job { font-family: var(--f-display); font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem); line-height: 1.15; color: var(--teal); }
.rec-src { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 12px; font-size: 0.9375rem; color: var(--muted); }
.ico-arrow { width: 16px; height: 16px; flex: none; color: var(--teal); }
.rec-trail li { position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; padding: 7px 0; }
.rec-trail li::before { content: ""; position: absolute; left: 9.5px; top: 30px; bottom: -6px; width: 1px; background: var(--line-strong); }
.rec-trail li:last-child::before { display: none; }
.rec-trail .mark { color: var(--teal); margin-top: 2px; }
.rec-trail .is-final b { font-weight: 650; color: var(--teal-900); }
.rec-others li { display: flex; gap: 10px; align-items: flex-start; padding: 9px 0; border-top: 1px solid var(--line); font-size: 0.9375rem; }
.rec-others li:first-child { border-top: 0; }
.rec-others .mark { color: var(--teal); margin-top: 2px; }

/* Linking a note to its subject (pointer and tap) */
.row > .pin { transition: background-color 0.25s var(--ease), color 0.25s var(--ease), transform 0.25s var(--ease); }
.row.is-linked > .pin { background: var(--orange); color: var(--night); transform: scale(1.1); }
.note.is-linked .note__n { background: var(--note-c); color: var(--teal-900); border-color: var(--note-c); }
.sheet--light .note.is-linked .note__n { color: var(--paper); }
.note.is-linked::before { height: 2px; background: linear-gradient(to right, var(--orange) 0 calc(var(--sheet-r) - 14px), var(--note-c) calc(var(--sheet-r) - 14px)); }
.note.is-linked::after { background: var(--orange); transform: scale(1.4); }

/* Opening variants */
.open--home .open__head { grid-template-columns: minmax(0, 7.5fr) minmax(0, 4.5fr); }
.open .actions .text-link { color: var(--cream); }
/* Advertising: a wide service headline, then actions and summary beneath it. */
.open--adv .open__head { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); grid-template-areas: "h h" "a l"; row-gap: 28px; }
.open--adv h1.h1--long { max-width: 24ch; font-size: clamp(2.375rem, 1.2rem + 3.7vw, 4.5rem); }
.open--adv .open__lede { padding-top: 0; max-width: 46ch; }
.open--adv .actions { align-self: start; }
.open--adv {
  --straddle: clamp(150px, 17vw, 250px);
  padding-bottom: 0;
  background: linear-gradient(to bottom, var(--teal) 0 calc(100% - var(--straddle)), var(--cream) calc(100% - var(--straddle)));
}

/* The Advertising desk: a campaign decision being marked up */
.desk { position: relative; margin: clamp(40px, 4.6vw, 68px) 0 0; }
.desk__sheet { position: relative; background: var(--paper); color: var(--ink); box-shadow: 0 2px 0 rgba(6, 40, 34, 0.06), 0 64px 100px -56px rgba(6, 40, 34, 0.8); }
.desk__sheet::after { --c: rgba(255, 247, 235, 0.8); --c2: rgba(0, 74, 65, 0.5); }
.desk__slug { display: flex; align-items: center; gap: 10px; padding: 18px clamp(20px, 3.2vw, 48px) 14px; border-bottom: 1px dashed var(--line-strong); font-size: 0.8125rem; font-weight: 650; color: var(--muted); }
.desk__slug .fic__leaf { flex: none; }
.desk__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "work preview"; }
.desk__work, .desk__preview { display: grid; gap: 10px; align-content: start; padding: clamp(24px, 3.2vw, 48px); }
.desk__work { grid-area: work; }
.desk__preview { grid-area: preview; gap: 16px; border-left: 1px solid var(--line); background: linear-gradient(to right, rgba(234, 243, 238, 0.6), rgba(234, 243, 238, 0.15)); }
.desk__h { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-size: 0.875rem; font-weight: 650; color: var(--teal-900); }
.desk__work .desk__h:not(:first-child) { margin-top: 20px; }
.desk__h .chip { font-size: 1rem; }
.pin.pin--in { position: static; width: 24px; height: 24px; font-size: 0.75rem; transition: background-color 0.25s var(--ease), color 0.25s var(--ease), transform 0.25s var(--ease); }
.pin.is-linked { background: var(--orange); color: var(--night); transform: scale(1.1); }
.ad-card--desk { gap: 10px; padding: clamp(18px, 2vw, 26px); background: #fff; border: 1px solid var(--line-strong); box-shadow: 0 24px 40px -32px rgba(6, 40, 34, 0.6); }
.ad-head--desk { font-size: clamp(1.375rem, 1.05rem + 1vw, 1.875rem); }
.ad-card--desk .ad-desc { font-size: 1rem; }
.cands li { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto auto; gap: 4px 12px; align-items: center; padding: 9px 0; border-top: 1px solid var(--line); }
.cands .mark { color: var(--teal); }
.cand__t { justify-self: start; font-weight: 600; font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem); line-height: 1.25; color: var(--teal); background-image: linear-gradient(rgba(255, 134, 46, 0.2), rgba(255, 134, 46, 0.2)); background-repeat: no-repeat; background-size: 0% 100%; }
.cand.is-picked .cand__t { color: var(--teal-900); background-size: 100% 100%; }
.cand small { padding: 1px 8px; border-radius: 999px; background: var(--mist); font-size: 0.75rem; font-weight: 650; color: var(--teal-900); white-space: nowrap; }
.terms li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 2px 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.terms .mark { color: var(--teal); margin-top: 3px; }
.term__q { display: inline-flex; align-items: center; gap: 8px; font-weight: 650; font-size: 1.0625rem; line-height: 1.3; }
.term small { grid-column: 2; font-size: 0.8125rem; color: var(--muted); }
.term s { position: relative; color: var(--muted); text-decoration: none; }
.term s::after { content: ""; position: absolute; left: -3px; right: -3px; top: 54%; height: 2px; border-radius: 2px; background: var(--coral); transform-origin: left center; }
.term.is-out .mark, .term.is-review .mark { color: var(--muted); }
.dele { width: 28px; height: 20px; flex: none; color: var(--coral); }
.lift-ghost { position: absolute; z-index: 6; margin: 0; pointer-events: none; transform-origin: 0 0; white-space: nowrap; font-weight: 600; color: var(--teal); border-radius: 6px; background: rgba(255, 252, 247, 0.94); box-shadow: 0 14px 28px -16px rgba(6, 40, 34, 0.55); }
.desk__key { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px clamp(20px, 3vw, 44px); margin: 0; padding: 22px clamp(20px, 3.2vw, 48px) 4px; border-top: 1px dashed var(--line-strong); }
.desk__key li { display: flex; gap: 10px; font-size: 0.875rem; line-height: 1.45; color: var(--teal-900); cursor: default; }
.desk__key .note__n { width: 24px; height: 24px; font-size: 0.75rem; color: var(--teal); }
.desk__key li.is-linked .note__n { background: var(--teal); color: var(--cream); border-color: var(--teal); }
.signoff--desk { margin: 18px clamp(20px, 3.2vw, 48px) 0; padding-bottom: clamp(20px, 2.4vw, 30px); }

/* Quiet passages with an offset explanation */
.quiet__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 28px clamp(32px, 6vw, 120px); align-items: end; }
.quiet--offset .quiet__sub { margin-top: 0; padding-bottom: 0.35em; }
.quiet--adv { padding: clamp(72px, 9vw, 136px) 0 clamp(56px, 7vw, 104px); }
.jump__label { padding-bottom: 12px; border-bottom: 1px solid var(--line-strong); font-size: 0.875rem; font-weight: 650; color: var(--teal-900); }
.jump a { display: flex; align-items: center; min-height: 46px; border-bottom: 1px solid var(--line); color: var(--teal-900); font-weight: 550; text-decoration: none; transition: color 0.2s var(--ease), padding-left 0.35s var(--ease); }
.jump a:hover { color: var(--teal); padding-left: 8px; }

/* Home: an oversized report beside a quieter, offset explanation */
.sec--report { padding-top: 0; }
.report-layout { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px clamp(40px, 6vw, 112px); align-items: center; }
.report-layout__art { grid-column: 1; grid-row: 1; }
.report-layout__text { grid-column: 2; grid-row: 1; display: grid; gap: 18px; justify-items: start; }
.report-layout__text .h2 { max-width: 14ch; }
.report-sheet { position: relative; padding: clamp(24px, 3.4vw, 52px); background: var(--paper); border: 1px solid var(--line); box-shadow: 0 60px 100px -70px rgba(6, 40, 34, 0.75); }
.report-sheet::after { --c: rgba(0, 74, 65, 0.55); }
.report-sheet__slug { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; border-bottom: 1px dashed var(--line-strong); font-size: 0.8125rem; font-weight: 650; color: var(--muted); }
.report-sheet__slug .fic__leaf { flex: none; }
.report-sheet__h { margin-top: 26px; font-family: var(--f-display); font-size: clamp(2.25rem, 1.5rem + 2.4vw, 3.75rem); line-height: 1; letter-spacing: -0.025em; color: var(--teal); }
.report-rows { display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; margin-top: 26px; }
.report-rows > div { display: grid; gap: 5px; align-content: start; padding: 14px 0 16px; border-top: 1px solid var(--line); }
.report-rows dt { font-size: 0.8125rem; font-weight: 650; color: var(--muted); }
.report-rows dd { font-size: 1rem; line-height: 1.45; }
.report-rows__wide { grid-column: 1 / -1; }
.ns { display: inline-block; margin-right: 6px; padding: 0 8px 1px; border: 1.5px dashed var(--teal-800); border-radius: 6px; font-weight: 650; font-size: 0.875rem; color: var(--teal-900); }
.rep-recs li { display: flex; gap: 12px; align-items: flex-start; padding: 8px 0; border-top: 1px solid var(--line); }
.rep-recs li:first-child { border-top: 0; padding-top: 4px; }
.rep-recs .mark { color: var(--teal); margin-top: 3px; }
.rep-recs b { margin-right: 6px; }
.rep-recs small { display: block; font-size: 0.875rem; color: var(--muted); }
.index-list { width: 100%; border-top: 1px solid var(--line-strong); }
.index-list a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; border-bottom: 1px solid var(--line); color: var(--teal-900); font-weight: 600; text-decoration: none; transition: color 0.2s var(--ease), padding-left 0.35s var(--ease); }
.index-list a:hover { color: var(--teal); padding-left: 6px; }
.index-list svg { width: 18px; height: 18px; flex: none; color: var(--teal); transition: transform 0.35s var(--ease); }

/* Service rows with a cropped artifact (Koto's media inset, our own work) */
.mrow--inset { grid-template-columns: minmax(0, 3fr) minmax(0, 3.2fr) minmax(0, 5.8fr); align-items: start; }
.inset { display: grid; gap: 12px; align-content: start; color: inherit; text-decoration: none; }
.inset__art {
  display: grid;
  gap: 7px;
  padding: 16px 18px 18px;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: 0 24px 40px -32px rgba(6, 40, 34, 0.55);
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
.inset:hover .inset__art { transform: translateY(-3px); box-shadow: 0 34px 50px -34px rgba(6, 40, 34, 0.6); }
.inset__q { justify-self: start; padding: 2px 12px 3px; border: 1.5px solid var(--teal-800); border-radius: 999px; background: #fff; font-family: var(--f-display); font-size: 1.0625rem; color: var(--teal-900); }
.inset__url { font-size: 0.75rem; color: var(--muted); }
.inset__url .ad-tag { padding: 0 5px; font-size: 0.6875rem; margin-right: 6px; }
.inset__ad { font-weight: 650; font-size: 1.1875rem; line-height: 1.15; color: var(--teal); }
.inset__k { margin-top: 2px; font-size: 0.75rem; font-weight: 650; }
.inset__field { padding: 7px 10px; border: 1px solid var(--field-border); border-radius: 8px; background: #fff; font-size: 0.875rem; }
.inset__btn { justify-self: start; margin-top: 6px; padding: 7px 16px; border-radius: 999px; background: var(--teal-800); color: var(--cream); font-size: 0.8125rem; font-weight: 600; }
.inset__rec { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--line); font-size: 0.875rem; }
.inset__rec:first-child { border-top: 0; }
.inset__rec .mark { color: var(--teal); }
.inset__cap { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8125rem; font-weight: 650; color: var(--teal); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em; }
.inset__cap svg { width: 16px; height: 16px; transition: transform 0.35s var(--ease); }
.mrow--two { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.caps-head { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 20px clamp(32px, 5vw, 96px); align-items: end; }
.caps { display: grid; grid-template-columns: minmax(0, 5.6fr) minmax(0, 6.4fr); gap: 40px clamp(36px, 5vw, 88px); align-items: start; }
.caps__panel { position: sticky; top: calc(var(--header-h) + 32px); }
.caps__stage { position: relative; min-height: 560px; background: var(--paper); border: 1px solid var(--line); box-shadow: 0 34px 60px -46px rgba(6, 40, 34, 0.6); }
.caps__stage::after { content: ""; position: absolute; pointer-events: none; inset: -20px; --c: rgba(0, 74, 65, 0.5);
  background:
    linear-gradient(var(--c), var(--c)) left 0 top 20px / 13px 1px no-repeat, linear-gradient(var(--c), var(--c)) left 20px top 0 / 1px 13px no-repeat,
    linear-gradient(var(--c), var(--c)) right 0 top 20px / 13px 1px no-repeat, linear-gradient(var(--c), var(--c)) right 20px top 0 / 1px 13px no-repeat,
    linear-gradient(var(--c), var(--c)) left 0 bottom 20px / 13px 1px no-repeat, linear-gradient(var(--c), var(--c)) left 20px bottom 0 / 1px 13px no-repeat,
    linear-gradient(var(--c), var(--c)) right 0 bottom 20px / 13px 1px no-repeat, linear-gradient(var(--c), var(--c)) right 20px bottom 0 / 1px 13px no-repeat; }
.specimen { position: absolute; inset: clamp(20px, 2.4vw, 32px); display: grid; align-content: center; gap: 16px; opacity: 0; transform: translateY(12px) scale(0.985); transition: opacity 0.35s var(--ease), transform 0.55s var(--ease); pointer-events: none; }
.specimen.is-active { opacity: 1; transform: none; }
.serp--spec { max-width: none; }
.ad-card--spec { gap: 10px; padding: 24px; background: #fff; border: 1px solid var(--line-strong); border-radius: 16px; box-shadow: 0 22px 36px -30px rgba(6, 40, 34, 0.55); }
.ad-card--spec .ad-head { font-size: clamp(1.5rem, 1.05rem + 1.3vw, 2.25rem); }
.spec-record, .spec-page { display: grid; gap: 12px; padding: 22px 24px; background: #fff; border: 1px solid var(--line-strong); border-radius: 16px; box-shadow: 0 22px 36px -30px rgba(6, 40, 34, 0.55); }
.spec-page .pf-bar, .spec-page .pf-brand { margin: 0; }
.room--spec { display: block; width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--line); }
.spec-page .req-title { margin: 0; font-size: clamp(1.375rem, 1.05rem + 0.9vw, 1.875rem); }
.spec-fields { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-size: 0.8125rem; font-weight: 650; }
.spec-field { padding: 8px 12px; border: 1px solid var(--field-border); border-radius: 10px; background: #fff; font-weight: 400; }
.spec-fields .req-btn { min-height: 38px; padding: 0 16px; font-size: 0.8125rem; }
.caps__cap { display: flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 0.8125rem; font-weight: 650; color: var(--teal-900); }
.mrow--cap { position: relative; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.mrow--cap::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--teal); transform: scaleX(0); transform-origin: left; transition: transform 0.5s var(--ease); }
.mrow--cap.is-current::before { transform: scaleX(1); }
.mrow--cap h3 { font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem); transition: color 0.25s var(--ease); }
.mrow--cap.is-current h3 { color: var(--teal); }
.mrow--cap .inset { display: none; }
.cap-link { display: inline-flex; align-items: center; min-height: 44px; font-size: 0.875rem; font-weight: 650; color: var(--teal); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em; }
.cap-link:hover { text-decoration-thickness: 2px; }
.room--inset { display: block; width: 100%; height: auto; border-radius: 6px; border: 1px solid var(--line); margin-bottom: 4px; }
.mrow__tag { display: inline-flex; align-items: center; gap: 8px; font-size: 0.8125rem; font-weight: 650; color: var(--teal); }
.mrow__tag .mark { color: var(--teal); }
.own-head { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 20px clamp(32px, 5vw, 96px); align-items: end; }
.split__lead { position: sticky; top: calc(var(--header-h) + 40px); }

/* Door leaf in the closing section (the approved mark, inlined) */
.close__mark { overflow: visible; }
.door-leaf { transform-box: fill-box; transform-origin: 0% 50%; }
.close.will-open .door-leaf { transform: scaleX(0.14); }
.close.will-open.is-open .door-leaf { transform: none; transition: transform 1.25s var(--ease) 0.1s; }

/* Narrow layouts -------------------------------------------------------- */
@media (max-width: 1100px) {
  .plist { grid-template-columns: 1fr 1fr; }
  .grid3 { grid-template-columns: 1fr 1fr; }
  /* Category labels stay in a margin beside the heading, never above it. */
  .mrow { grid-template-columns: minmax(5.5rem, 2.2fr) minmax(0, 9.8fr); }
  .mrow > h3, .mrow > .mrow__body { grid-column: 2; }
  .mrow__margin { grid-column: 1; grid-row: 1; padding-top: 0.45em; }
  .mrow--inset { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
  .mrow--inset > .inset { grid-column: 1; grid-row: 1 / span 2; }
  .mrow--two { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .mrow--two > h3 { grid-column: 1; }
  .mrow--two > .mrow__body { grid-column: 2; }
  .mrow--cap { grid-template-columns: minmax(0, 1fr); }
  .mrow--cap > h3, .mrow--cap > .mrow__body { grid-column: 1; }
}
@media (max-width: 900px) {
  /* Pins sit on the artifact's edge, like markers clipped to the proof. */
  :root { --sheet-l: 56px; --sheet-r: 20px; --pin-l: 15px; }
  .row.fr::before { left: calc(var(--pin-l) + var(--pin-w) / 2); }
  .open__head, .open--home .open__head, .open--adv .open__head { grid-template-columns: 1fr; grid-template-areas: "h" "l" "a"; gap: 16px; }
  .open__head--crumbs { grid-template-areas: "c" "h" "l" "a"; }
  .open__lede { padding-top: 0; }
  .proof__bar, .docket { padding-right: 0; }
  .docket, .docket--static { grid-template-columns: minmax(0, 1fr); grid-template-areas: "label" "track"; margin-bottom: 18px; }
  .plate__paper { right: 0; }
  .sheet { grid-template-columns: minmax(0, 1fr); padding-bottom: 12px; }
  .sheet::before { right: 0; }
  .sheet::after { right: -20px; }
  /* Phones keep the proof-and-annotation idea: numbered pins stay on the
     artifact, and their notes gather into a key directly under it. */
  .note {
    grid-column: 1;
    order: 50;
    margin: 0 var(--sheet-r) 0 var(--pin-l);
    padding: 7px 0;
    color: var(--teal-900);
    font-size: 0.875rem;
    line-height: 1.45;
  }
  .sheet .note:nth-child(1 of .note) { margin-top: 4px; padding-top: 18px; border-top: 1px dashed var(--line-strong); }
  .sheet > .note:last-child { padding-bottom: 18px; }
  .note::before, .note::after { display: none; }
  .note__n { width: 24px; height: 24px; font-size: 0.75rem; color: var(--teal); }
  .note.is-linked .note__n { background: var(--teal); color: var(--cream); border-color: var(--teal); }
  .row--after { order: 60; }
  .req-fields, .req-fields--2 { grid-template-columns: 1fr; }
  .head-split, .split, .split--even, .faq-grid, .jobs, .demos, .close__grid, .grid2, .quiet__grid, .own-head, .report-layout { grid-template-columns: 1fr; }
  .report-layout__art, .report-layout__text { grid-column: auto; grid-row: auto; }
  .split__lead { position: static; }
  .jobs .paper:nth-child(2) { margin-top: 0; }
  .mrow--inset, .mrow--two { grid-template-columns: 1fr; }
  .mrow--inset > .inset, .mrow--inset > h3, .mrow--inset > .mrow__body, .mrow--two > h3, .mrow--two > .mrow__body { grid-column: 1; grid-row: auto; }
  .mrow--inset > .inset { order: 3; max-width: 340px; }
  .cols2 { columns: 1; }
  .close__mark { height: 140px; order: -1; }
  .field-row { grid-template-columns: 1fr; }
  .contact-grid, .halves, .ad-pair, .defs div { grid-template-columns: 1fr; }
  .contact-side { position: static; }
  .desk__grid { grid-template-columns: 1fr; grid-template-areas: "preview" "work"; }
  .desk__preview { border-left: 0; border-bottom: 1px solid var(--line); }
  .caps, .caps-head, .aside-list { grid-template-columns: 1fr; }
  .caps__panel { display: none; }
  .mrow--cap .inset { display: grid; max-width: 340px; }
  .aside-list__head { position: static; }
  .aside-list__head .h2 { max-width: 20ch; }
  .plist--rows li { grid-template-columns: 1fr; }
  .desk__key { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  :root { --section: 64px; --sheet-l: 48px; --sheet-r: 16px; --pin-l: 11px; --pin-w: 24px; }
  .tab__long { display: none; }
  .tab__short { display: inline; }
  .proof { margin-top: 22px; }
  .proof__bar { margin-bottom: 18px; gap: 10px; }
  .proof__slug { font-size: 0.8125rem; }
  .open { padding-top: 16px; }
  .open__head { gap: 12px; }
  .open h1 { font-size: 2.125rem; line-height: 1.04; }
  .open h1.h1--long { font-size: 2rem; }
  .open__lede { font-size: 1rem; }
  .open .actions { gap: 2px 18px; }
  .open .actions .btn { min-height: 50px; }
  .open .actions .text-link { min-height: 44px; }
  .plate { margin-top: 26px; }
  .docket__label { font-size: 0.8125rem; }
  .docket__track { gap: 10px; }
  .station { gap: 8px; padding: 0 10px 0 4px; font-size: 0.875rem; }
  .station__n { width: 28px; height: 28px; }
  .pin { font-size: 0.75rem; }
  .row.fr--top > .pin { top: 32px; }
  .row.fr::before { right: calc(var(--sheet-r) - 8px); }
  .sheet__title { padding-top: 16px; padding-bottom: 12px; }
  .row--serp { padding-top: 20px; padding-bottom: 18px; }
  .row--serp > .pin { top: 33px; }
  .serp { min-height: 52px; gap: 10px; padding: 8px 16px 8px 14px; }
  .serp__icon { width: 20px; height: 20px; }
  .serp__q { font-size: 1.25rem; }
  .ad-head { font-size: 1.5rem; }
  .ad-desc { font-size: 1.0625rem; }
  .desk { margin-top: 30px; }
  .desk__work, .desk__preview { padding: 20px 18px; }
  .cands li { grid-template-columns: 20px minmax(0, 1fr) auto; }
  .cand small { grid-column: 2; grid-row: 2; justify-self: start; }
  .pf-hero { grid-template-columns: 1fr; }
  .pf-brand__tag { margin-left: 0; }
  .fic-bar { position: static; }
  .desk__slug, .desk__key { padding-left: 18px; padding-right: 18px; }
  .signoff--desk { margin-left: 18px; margin-right: 18px; }
  .open--adv { --straddle: 130px; }
  .report-rows { grid-template-columns: 1fr; }
  .grid3, .demos__list, .plist, .ticks--2, .intent-mini { grid-template-columns: 1fr; }
  .report-tbl thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .report-tbl, .report-tbl tbody, .report-tbl tr, .report-tbl th, .report-tbl td { display: block; width: 100%; }
  .report-tbl tr { padding: 12px 0; border-bottom: 1px solid var(--line); }
  .report-tbl th, .report-tbl td { padding: 2px 0; border: 0; }
  .report-tbl tbody th { width: auto; font-size: 0.8125rem; color: var(--muted); }
}
@media (max-width: 400px) {
  .close .actions .btn { width: 100%; }
}
@media (max-width: 359.98px) {
  .mrow { grid-template-columns: 1fr; }
  .mrow > h3, .mrow > .mrow__body, .mrow__margin { grid-column: 1; grid-row: auto; }
  .mrow__margin { order: 3; }
}

/* Motion ------------------------------------------------------------------
   One authored sequence per opening (Home plate, Advertising desk), stage
   handoffs driven by studio.js, quiet feedback elsewhere. Everything here is
   motion-only: the default state of every element is its final state. */
@media (prefers-reduced-motion: no-preference) {
  @media (max-width: 1023.98px) {
    .nav-menu.is-open { animation: menu-in 0.42s var(--ease) both; }
    .nav-menu.is-open .nav-list li, .nav-menu.is-open .nav-cta, .nav-menu.is-open .nav-email { animation: rise-in 0.45s var(--ease) both; animation-delay: calc(70ms + var(--i, 0) * 45ms); }
    .nav-menu.is-closing { animation: menu-out 0.2s var(--ease-in) both; }
    .nav-menu.is-closing .nav-list li, .nav-menu.is-closing .nav-cta, .nav-menu.is-closing .nav-email { animation: none; }
  }

  /* Home plate and the example openings: the proof is prepared. The sheet, its
     title, frames and label are on screen from the first frame; only the work
     inside them is set. Once per tab session (boot.js adds .intro-seen). */
  :root:not(.intro-seen) .is-intro .plate__paper,
  :root:not(.intro-seen) .proof.is-intro > .sheet:first-child::before { animation: paper-settle 0.26s var(--ease) both; }
  :root:not(.intro-seen) .is-intro .plate__paper::after,
  :root:not(.intro-seen) .proof.is-intro > .sheet:first-child::after { animation: crops-in 0.3s var(--ease) 0.08s both; }
  :root:not(.intro-seen) .is-intro .sheet:first-child .serp__q .anchor { animation: type-in 0.4s steps(22, end) 0.2s both; }
  :root:not(.intro-seen) .is-intro .sheet:first-child .serp__q .anchor::after { animation: caret-run 0.4s steps(22, end) 0.2s both, caret-blink 1.4s linear 0.1s both; }
  :root:not(.intro-seen) .is-intro .sheet:first-child > .row.fr > :not(.pin) { animation: set-in 0.42s var(--ease) 0.42s both; }
  :root:not(.intro-seen) .is-intro .sheet:first-child > .row.fr--mid > :not(.pin) { animation-delay: 0.48s; }
  :root:not(.intro-seen) .is-intro .sheet:first-child > .row.fr--end > :not(.pin) { animation-delay: 0.54s; }
  :root:not(.intro-seen) .is-intro .sheet:first-child:not(:has(.row--serp)) > .row.fr--top > :not(.pin) { animation-delay: 0.18s; }
  :root:not(.intro-seen) .is-intro .sheet:first-child:not(:has(.row--serp)) > .row.fr--end > :not(.pin) { animation-delay: 0.26s; }
  :root:not(.intro-seen) .is-intro .sheet:first-child > .row:not(.fr):not(.row--serp):not(.row--after) { animation: fade-in 0.4s var(--ease) 0.5s both; }
  :root:not(.intro-seen) .is-intro .sheet:first-child > .note { animation: note-in 0.42s var(--ease) both; animation-delay: calc(0.62s + var(--k, 0) * 90ms); }
  :root:not(.intro-seen) .is-intro .sheet:first-child > .note::before { animation: leader-draw 0.45s var(--ease) both; animation-delay: calc(0.58s + var(--k, 0) * 90ms); }
  :root:not(.intro-seen) .is-intro .sheet:first-child > .note::after { animation: dot-in 0.3s var(--ease) both; animation-delay: calc(0.58s + var(--k, 0) * 90ms); }

  /* Stage handoff: the new proof's notes draw out after its artifact. */
  .plate .sheet.is-entering > .note { animation: note-in 0.42s var(--ease) both; animation-delay: calc(0.3s + var(--k, 0) * 90ms); }
  .plate .sheet.is-entering > .note::before { animation: leader-draw 0.45s var(--ease) both; animation-delay: calc(0.24s + var(--k, 0) * 90ms); }
  .plate .sheet.is-entering > .note::after { animation: dot-in 0.3s var(--ease) both; animation-delay: calc(0.24s + var(--k, 0) * 90ms); }

  /* Advertising desk: the decision is marked up. Excluded searches are struck
     and marked for deletion, two candidates are picked, and they lift into
     the preview (studio.js). No typing here: that belongs to Home. */
  :root:not(.intro-seen) .desk.is-intro .desk__sheet { animation: paper-settle 0.26s var(--ease) both; }
  :root:not(.intro-seen) .desk.is-intro .desk__sheet::after { animation: crops-in 0.3s var(--ease) 0.08s both; }
  :root:not(.intro-seen) .desk.is-intro .term s::after { animation: strike 0.36s var(--ease-io) both; animation-delay: calc(0.2s + var(--t, 0) * 120ms); }
  :root:not(.intro-seen) .desk.is-intro .term .dele { animation: dele-in 0.34s var(--ease) both; animation-delay: calc(0.5s + var(--t, 0) * 120ms); }
  :root:not(.intro-seen) .desk.is-intro .cand.is-picked .cand__t { animation: highlight 0.4s var(--ease) both; animation-delay: 0.55s; }
  :root:not(.intro-seen) .desk.is-intro .cand.is-picked + .cand.is-picked .cand__t { animation-delay: 0.67s; }
  :root:not(.intro-seen) .desk.is-intro .cand.is-picked .mark { animation: pop 0.32s var(--ease) both; animation-delay: 0.55s; }
  :root:not(.intro-seen) .desk.is-intro .cand.is-picked + .cand.is-picked .mark { animation-delay: 0.67s; }
  /* The preview headline waits as a faint placeholder until the picked candidates arrive. */
  @media (min-width: 901px) {
    :root:not(.intro-seen) .desk.is-intro [data-lift-target] { animation: await-lift 1.6s linear; }
  }
}
.note[data-n="2"] { --k: 1; }
.note[data-n="3"] { --k: 2; }
.note[data-n="4"] { --k: 3; }
.terms li:nth-child(2) { --t: 1; }
.terms li:nth-child(3) { --t: 2; }
.terms li:nth-child(4) { --t: 3; }
.terms li:nth-child(5) { --t: 4; }

@keyframes menu-in { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 -60px 0); } }
@keyframes menu-out { from { clip-path: inset(0 0 -60px 0); opacity: 1; } to { clip-path: inset(0 0 100% 0); opacity: 0.6; } }
@keyframes rise-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes paper-settle { from { transform: translateY(14px); } to { transform: none; } }
@keyframes await-lift { from, to { opacity: 0.22; } }
@keyframes highlight { from { background-size: 0% 100%; } to { background-size: 100% 100%; } }
@keyframes pop { from { opacity: 0; transform: scale(0.5); } to { opacity: 1; transform: none; } }
@keyframes crops-in { from { opacity: 0; transform: scale(1.03); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes type-in { from { clip-path: inset(-0.3em 100% -0.3em 0); } to { clip-path: inset(-0.3em 0 -0.3em 0); } }
@keyframes caret-run { from { width: 0%; } to { width: 100%; } }
@keyframes caret-blink { 0%, 50% { opacity: 1; } 51%, 62% { opacity: 0; } 63%, 75% { opacity: 1; } 76%, 87% { opacity: 0; } 88%, 98% { opacity: 1; } 100% { opacity: 0; } }
@keyframes set-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes note-in { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
@keyframes leader-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes dot-in { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes term-in { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }
@keyframes strike { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes dele-in { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; }
  .btn:hover svg, .text-link:hover svg, .sheet-next:hover svg, .index-list a:hover svg, .inset:hover .inset__cap svg, .inset:hover .inset__art,
  .btn:active, .station:active .station__n, .row.is-linked > .pin, .pin.is-linked, .note.is-linked::after { transform: none; }
  .jump a:hover, .index-list a:hover { padding-left: 0; }
  .specimen { transform: none; }
  .mrow--cap::before { transition: none; }
  .docket__fill { transition-duration: 0.01ms; }
}

@media print {
  .site-header, .site-footer, .consent, .skip-link, .nav-toggle, .docket__track { display: none !important; }
  .plate__stage > .sheet { display: grid !important; position: static !important; }
}


/* /assets/css/open-house.css */
@font-face{font-family:Fraunces;src:url('/assets/fonts/fraunces-var.woff2') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'Instrument Sans';src:url('/assets/fonts/instrument-sans-var.woff2') format('woff2');font-weight:400 700;font-display:swap}
:root{--cf-paper:#fff7eb;--cf-ink:#062822;--cf-teal:#006b5e;--cf-night:#063d36;--cf-muted:#416355;--cf-line:#ccd5c4;--cf-gutter:clamp(24px,4.4vw,80px);--cf-ease:cubic-bezier(.22,1,.36,1)}
*{box-sizing:border-box}html{scrollbar-color:#668d7c var(--cf-paper);background:var(--cf-paper);scroll-padding-top:24px}.open-house{margin:0;background:var(--cf-paper);color:var(--cf-ink);font:400 16px/1.65 'Instrument Sans',sans-serif;-webkit-font-smoothing:antialiased}::selection{background:#f6c9ad;color:var(--cf-ink)}.open-house a{color:inherit;text-decoration-thickness:1px;text-underline-offset:5px}.open-house :is(button,input,textarea,select){font:inherit}.open-house :is(button,a,summary){-webkit-tap-highlight-color:#bbd0b866}.open-house :is(a,button,input,textarea,select,summary):focus-visible{outline:2px solid #ad572f;outline-offset:5px}.open-house input,.open-house textarea{caret-color:var(--cf-teal)}.open-house button,.open-house summary{touch-action:manipulation}.open-house:not(.legacy-page) :is(h1,h2,h3,h4,p,figure){margin:0}.open-house p{text-wrap:pretty}.open-house img{max-width:100%}.open-house svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.open-house [hidden]{display:none!important}.cf-skip{position:fixed;z-index:100;top:10px;left:20px;background:var(--cf-paper);color:var(--cf-ink);padding:10px 18px;transform:translateY(-160%)}.cf-skip:focus{transform:none}.sr-only,.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.cf-wrap{width:100%;max-width:1480px;margin-inline:auto;padding-inline:var(--cf-gutter)}.cf-section{padding-block:100px}.cf-header{position:relative;z-index:12;background:var(--cf-paper);color:var(--cf-ink)}.cf-header-row{height:128px;display:flex;align-items:center;gap:45px}.cf-brand{display:block;width:205px;flex-shrink:0}.cf-brand img{display:block;width:100%;height:auto}.cf-navigation{display:flex;align-items:center;gap:30px;margin-left:auto;font-size:15px;line-height:1.4}.cf-navigation>a{text-decoration:none;white-space:nowrap;padding-block:12px}.cf-navigation>a:not(.cf-button){position:relative}.cf-navigation>a:not(.cf-button)::after{content:'';position:absolute;left:0;right:0;bottom:6px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:0 50%;transition:transform 220ms var(--cf-ease)}.cf-navigation>a:hover::after,.cf-navigation>a[aria-current]::after{transform:scaleX(1)}.cf-navigation>.cf-nav-contact{margin-left:12px;padding:14px 24px;font-size:14px}.cf-menu{display:none}.cf-header--dark{color:var(--cf-paper);background:transparent}.cf-header--dark .cf-nav-contact{background:var(--cf-paper);color:var(--cf-ink)}
.cf-button{display:inline-flex;justify-content:center;align-items:center;gap:24px;min-height:52px;padding:14px 25px;border:1px solid transparent;border-radius:999px;background:var(--cf-night);color:var(--cf-paper)!important;font-size:15px;font-weight:550;line-height:1.3;text-decoration:none!important;cursor:pointer;transition:background-color 180ms var(--cf-ease),transform 180ms var(--cf-ease)}.cf-button:hover{background:#006b5e}.cf-button:active{transform:scale(.98)}.cf-button:disabled{cursor:wait;opacity:.6}.cf-button--cream{background:var(--cf-paper);color:var(--cf-ink)!important}.cf-button--cream:hover{background:#e4e7d6}.cf-button--line{background:transparent;color:inherit!important;border-color:currentColor}.cf-button--line:hover{background:#7f9c8422}.cf-button svg{width:21px;height:21px;transition:transform 220ms var(--cf-ease)}.cf-button:hover svg{transform:translateX(4px)}.cf-text-link{display:inline-flex;align-items:center;gap:16px;min-height:44px;font-weight:550}.cf-text-link svg{width:20px;height:20px;transition:transform 220ms var(--cf-ease)}.cf-text-link:hover svg{transform:translateX(4px)}
.cf-opening{padding-block:70px 95px}.cf-display{font:450 clamp(48px,6vw,88px)/1.04 Fraunces,Georgia,serif;letter-spacing:-.035em;font-variation-settings:'SOFT' 20,'WONK' 0,'opsz' 72;text-wrap:balance}.cf-opening h1:not([class]){font:450 clamp(48px,6vw,88px)/1.04 Fraunces,Georgia,serif;letter-spacing:-.035em;max-width:15ch;text-wrap:balance}.cf-lede{font-size:clamp(18px,1.6vw,22px);line-height:1.6;max-width:43ch;color:var(--cf-muted)}.cf-split{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(40px,8vw,130px);align-items:start}.cf-section h2{font:450 clamp(38px,4.1vw,62px)/1.08 Fraunces,Georgia,serif;letter-spacing:-.03em;text-wrap:balance}.cf-section h3{font-size:24px;line-height:1.25;font-weight:550;letter-spacing:-.02em}.cf-prose{max-width:65ch}.cf-prose p+p{margin-top:20px}.cf-two{display:grid;grid-template-columns:1fr 1fr;gap:60px}.cf-dark{background:var(--cf-night);color:var(--cf-paper)}.cf-dark .cf-lede{color:#d6e1d1}.cf-paper{background:#ece9dc}.cf-link-row{display:flex;align-items:center;gap:20px 30px;flex-wrap:wrap;margin-top:30px}
.cf-document{background:#fffcf5;color:var(--cf-ink);padding:36px;box-shadow:0 24px 55px -35px #06282255}.cf-document-head{display:flex;justify-content:space-between;align-items:start;gap:30px;padding-bottom:22px;border-bottom:1px solid var(--cf-line);font-size:14px}.cf-document-head strong{font-size:19px;font-weight:550}.cf-table-wrap{width:100%;overflow:auto;overscroll-behavior-inline:contain}.cf-table{width:100%;border-collapse:collapse;text-align:left;font-size:15px;line-height:1.55;font-variant-numeric:tabular-nums}.cf-table th{font-size:13px;font-weight:550;color:var(--cf-muted)}.cf-table :is(th,td){padding:18px 14px 18px 0;border-bottom:1px solid var(--cf-line);vertical-align:top}.cf-status{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:550;color:var(--cf-teal)}.cf-status::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}.cf-status--review{color:#8c492c}.cf-steps{list-style:none;padding:0;margin:0}.cf-steps>li{display:grid;grid-template-columns:.8fr 1.2fr;gap:40px;padding:28px 0;border-top:1px solid var(--cf-line)}.cf-steps h3{font-size:24px}.cf-steps p{max-width:53ch;color:var(--cf-muted)}.cf-faq{border-top:1px solid var(--cf-line)}.cf-faq details{border-bottom:1px solid var(--cf-line)}.cf-faq summary{position:relative;cursor:pointer;list-style:none;padding:24px 40px 24px 0;font-size:20px;font-weight:500;line-height:1.4}.cf-faq summary::-webkit-details-marker{display:none}.cf-faq summary::before,.cf-faq summary::after{content:'';position:absolute;width:14px;height:1px;background:currentColor;right:2px;top:37px;transition:transform 200ms var(--cf-ease)}.cf-faq summary::after{transform:rotate(90deg)}.cf-faq details[open] summary::after{transform:rotate(0)}.cf-faq details>p{padding:0 40px 26px 0;max-width:68ch;color:var(--cf-muted)}
.cf-close{position:relative;overflow:hidden;background:var(--cf-night);color:var(--cf-paper);padding-block:105px}.cf-close::before{content:'';position:absolute;inset:0;background:url('/assets/img/open-house/door-brand-v8.webp') 0% 47%/165% auto;opacity:.1;pointer-events:none}.cf-close .cf-wrap{position:relative}.cf-close h2{font:450 clamp(44px,5.3vw,78px)/1.07 Fraunces,Georgia,serif;letter-spacing:-.03em;max-width:19ch;text-wrap:balance}.cf-close-row{margin-top:38px;display:flex;justify-content:space-between;align-items:end;gap:45px}.cf-close-row p{max-width:43ch;color:#d6e1d1;font-size:18px}.cf-footer{padding-block:65px 26px;background:var(--cf-paper);color:var(--cf-ink)}.cf-footer-top{display:flex;justify-content:space-between;gap:50px;align-items:center;padding-bottom:45px;border-bottom:1px solid var(--cf-line)}.cf-footer-brand{display:block;width:215px}.cf-footer-brand img{display:block;width:100%;height:auto}.cf-footer-top p{font:450 30px/1.2 Fraunces,Georgia,serif;letter-spacing:-.02em}.cf-footer-links{display:grid;grid-template-columns:1fr 1fr 1fr;gap:40px;margin-left:32%;padding-block:32px 45px}.cf-footer-links a{display:block;width:fit-content;min-height:37px;font-size:14px;text-decoration:none}.cf-footer a:hover{text-decoration:underline}.cf-footer-bottom{border-top:1px solid var(--cf-line);padding-top:22px;display:flex;justify-content:space-between;align-items:center;gap:25px;font-size:12px;color:var(--cf-muted)}.cf-footer-bottom>div{display:flex;gap:25px;flex-wrap:wrap}.cf-footer-bottom button{padding:0;min-height:30px;border:0;color:inherit;background:none;font-size:12px;cursor:pointer;text-decoration:underline;text-underline-offset:4px}
@media(max-width:1100px){.cf-navigation{gap:20px}.cf-navigation>.cf-nav-contact{margin-left:0;padding-inline:18px}.cf-brand{width:175px}.cf-header-row{gap:24px}.cf-two{gap:40px}}
@media(max-width:1000px){.cf-header-row{height:105px}.cf-brand{width:166px}.cf-menu{display:flex;align-items:center;gap:12px;margin-left:auto;min-height:44px;padding:8px 0;background:none;border:0;color:inherit;font-size:14px}.cf-menu svg{width:22px;height:22px}.cf-navigation{display:none;position:absolute;top:92px;left:var(--cf-gutter);right:var(--cf-gutter);margin:0;padding:18px 25px;background:var(--cf-paper);color:var(--cf-ink);box-shadow:0 20px 45px -20px #06282266;border-radius:12px}.cf-header[data-menu-open=true] .cf-navigation{display:block}.cf-header .cf-navigation>a{display:block;min-height:46px;white-space:normal}.cf-header .cf-navigation>.cf-nav-contact{display:flex;margin:14px 0 4px;background:var(--cf-night);color:var(--cf-paper)!important}.cf-navigation>a:not(.cf-button)::after{display:none}.cf-navigation>a[aria-current]:not(.cf-button){text-decoration:underline}.cf-opening{padding-block:45px 70px}.cf-section{padding-block:75px}.cf-footer-links{margin-left:0}.cf-split{gap:40px}}
@media(max-width:600px){:root{--cf-gutter:24px}.cf-display,.cf-opening h1:not([class]){font-size:47px;line-height:1.04}.cf-section{padding-block:62px}.cf-section h2{font-size:40px}.cf-section h3{font-size:23px}.cf-split,.cf-two{grid-template-columns:1fr;gap:30px}.cf-lede{font-size:18px}.cf-document{padding:24px 20px}.cf-document-head{gap:20px;font-size:12px}.cf-document-head strong{font-size:17px}.cf-steps>li{grid-template-columns:1fr;gap:12px;padding-block:24px}.cf-faq summary{font-size:18px}.cf-close{padding-block:72px}.cf-close h2{font-size:44px}.cf-close-row{align-items:start;flex-direction:column;gap:25px}.cf-close-row p{font-size:17px}.cf-footer{padding-top:48px}.cf-footer-top{align-items:start;flex-direction:column;gap:28px;padding-bottom:30px}.cf-footer-brand{width:185px}.cf-footer-top p{font-size:27px}.cf-footer-links{grid-template-columns:1fr 1fr;gap:24px;padding-bottom:30px}.cf-footer-links>div:last-child{grid-column:1/-1}.cf-footer-bottom{align-items:start;flex-direction:column;gap:16px}.cf-footer-bottom>div{gap:20px}.cf-faq details>p{padding-right:0}}
@media(max-width:360px){:root{--cf-gutter:20px}.cf-display,.cf-opening h1:not([class]){font-size:41px}.cf-section h2{font-size:36px}.cf-brand{width:150px}.cf-button{padding-inline:20px;gap:16px}.cf-footer-links{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}.open-house *, .open-house *::before,.open-house *::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}

/* Navigation remains a list of usable links when scripting is unavailable. */
.home .google-g{stroke:none}.home .hero-footer .hero-playback button:hover{background:#fff7eb22;border-radius:5px}.legacy-page .cf-header{background:var(--cf-paper);color:var(--cf-ink)}.legacy-page .cf-footer{font-family:'Instrument Sans',sans-serif}.legacy-page .cf-footer img{height:auto}

/* The same optional analytics choice belongs to every public page, including
   marketing routes that do not load the older studio/site stylesheets. */
.open-house .consent{position:fixed;z-index:150;left:max(16px,env(safe-area-inset-left));bottom:max(16px,env(safe-area-inset-bottom));width:min(440px,calc(100% - 32px));margin:0;padding:18px 20px 20px;border-radius:14px;background:var(--cf-paper,#fff7eb);color:var(--cf-ink,#062822);box-shadow:0 22px 55px -16px #06282255;font:400 15px/1.5 'Instrument Sans',sans-serif}
.open-house .consent[hidden]{display:none}
.open-house .consent:focus{outline:2px solid var(--cf-teal,#006b5e);outline-offset:-4px}
.open-house .consent p{margin:0}
.open-house .consent__text a{color:var(--cf-teal,#006b5e);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.open-house .consent .consent__status{margin-top:8px;color:var(--cf-muted,#456055)}
.open-house .consent__actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.open-house .consent .consent__btn{display:inline-flex;justify-content:center;align-items:center;min-height:44px;padding:9px 12px;border:1px solid var(--cf-teal,#006b5e);border-radius:8px;background:transparent;color:var(--cf-teal,#006b5e);font:500 14px/1.35 'Instrument Sans',sans-serif;cursor:pointer;text-align:center;white-space:normal}
.open-house .consent .consent__btn:hover{background:var(--cf-teal,#006b5e);color:var(--cf-paper,#fff7eb)}
.open-house .consent .consent__btn:focus-visible{outline:2px solid #955d29;outline-offset:3px}
@media(max-width:359.98px){.open-house .consent__actions{grid-template-columns:1fr}}
@media print{.open-house .consent{display:none!important}}

.cf-header--dark .cf-nav-contact{color:var(--cf-ink)!important}.home a.cta,.legacy-page a.btn--cream{color:var(--cf-ink)}.legacy-page .prose h2{margin-top:38px;margin-bottom:16px}.legacy-page .prose p{margin-bottom:18px}