/* Lueken Good Design — site styles
   Tokens and values come from the design handoff (design_handoff_lgd_site/README.md). */

/* ---------- type ---------- */
/* Self-hosted, matching CTBF and Aisle to Islands. The studio site was the one
   still fetching its own typefaces from a third party on every visit: two
   render-blocking cross-origin requests and a DNS lookup for 90KB that never
   changes, plus every visitor's IP handed to Google to read a portfolio.

   Both families are variable, so one file covers the whole weight range each is
   used at and 600 is a real 600 rather than a synthesised one. Licences ship
   beside them: both are OFL-1.1, which requires the notice travel with the
   font. */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/lora-roman.woff2') format('woff2');
}
@font-face {
  font-family: 'Lora';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/lora-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/space-mono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/space-mono-700.woff2') format('woff2');
}

:root {
  --bg: #1a1a1a;
  --bg-alt: #141414;
  --slug: #161616;
  --chip: #242424;
  --text: #f5f5f5;
  --text-em: #d1d5db;
  --text-body: #a0a0a0;
  /* 4.70:1 on chip, the lightest ground and so the worst case. Was #6b7280 at
     3.21:1, which failed on the labels, captions and micro type a reader is
     actually meant to read. */
  --text-label: #868e9b;
  /* Decoration only: the muted frame's brackets. 2.30:1, so it must never
     carry text or mark the edge of a control. */
  --text-faint: #4b5563;
  /* Control outlines, 3.09:1, clearing the 3:1 that WCAG asks of a component
     boundary. The outline button drew its edge in --text-faint at 2.30:1. */
  --edge: #5f6875;
  /* Links brighten on hover. --sage-dark did the opposite and landed at
     4.07:1, so hovering a link made it harder to read than leaving it alone. */
  --sage-lift: #a8c0a7;
  --sage: #8FA68E;
  --sage-dark: #6B8069;
  --sage-20: rgba(143, 166, 142, 0.20);
  --border: #333;
  --border-inner: #2e2e2e;
  --serif: 'Lora', Georgia, serif;
  --mono: 'Space Mono', ui-monospace, monospace;
  --container: 1152px;
}

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

html { scroll-behavior: smooth; scroll-padding-top: 88px; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--mono);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* height:auto is what makes the width and height attributes an intrinsic ratio
   rather than a used size. Without it the height attribute lands as a
   presentational hint, both dimensions become definite, and CSS aspect-ratio is
   ignored: a 252px-wide collage tile rendered 431px tall because its file is
   800x431. Adding those attributes is right for layout shift, but only once an
   image is free to compute its own height. */
img { max-width: 100%; height: auto; }

a { color: var(--sage); text-decoration: none; transition: color 0.3s ease; }
a:hover { color: var(--sage-lift); }

a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--sage);
  outline-offset: 2px;
}

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; margin: 0; }
p { margin: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Scrollbar (from the live site) */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--sage-dark); }

/* ---------- Layout ---------- */
.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.section { padding: 96px 0; }
.section--alt { background: var(--bg-alt); }
.section--rule { border-top: 1px solid var(--border); }

.section-head { margin-bottom: 64px; }
.section-head--split { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.section-head--center { text-align: center; max-width: 720px; margin-left: auto; margin-right: auto; }
.section-aside { color: var(--text-body); font-size: 14px; line-height: 1.7; max-width: 420px; }

/* ---------- Type ---------- */
.eyebrow { font-size: 14px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--sage); margin: 0 0 16px; }
.eyebrow--sm { font-size: 12px; }
.eyebrow--muted { color: var(--text-label); }

.h1-inner {
  font-size: clamp(2.75rem, 5.5vw, 4.25rem);
  line-height: 1.1;
  margin: 0 0 32px;
  max-width: 860px;
  text-wrap: pretty;
}
.h2 { font-size: clamp(2.25rem, 4vw, 3rem); }
.h2--md { font-size: clamp(2rem, 3.5vw, 2.75rem); line-height: 1.2; text-wrap: pretty; }
.accent { color: var(--sage); }

.lede { font-size: 16px; line-height: 1.7; color: var(--text-body); max-width: 640px; text-wrap: pretty; }
.body-sm { font-size: 13px; line-height: 1.6; color: var(--text-body); }
.body-md { font-size: 14px; line-height: 1.7; color: var(--text-body); }
.micro { font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-label); }
.numeral { font-family: var(--serif); font-weight: 700; color: var(--sage); line-height: 1; }

.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sage); flex-shrink: 0; display: inline-block; }
.dot--sm { width: 6px; height: 6px; }
.dot--muted { background: var(--text-label); }

/* ---------- Navigation ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: rgba(26, 26, 26, 0.95);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.nav__inner {
  max-width: var(--container); margin: 0 auto; padding: 16px 24px;
  display: flex; align-items: center; gap: 12px 32px; flex-wrap: wrap;
}
.nav__brand { color: var(--text-body); font-size: 14px; letter-spacing: 0.15em; text-transform: uppercase; font-weight: 700; }
.nav__brand:hover { color: var(--text); }
.nav__links { display: flex; gap: 12px 32px; flex-wrap: wrap; align-items: center; margin-left: auto; }
.nav__links a { font-size: 14px; color: var(--text-body); }
.nav__links a:hover, .nav__links a[aria-current="page"], .nav__links a.is-current { color: var(--sage); }

.pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px;
  background: var(--chip); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-body);
  white-space: nowrap;
}
.pill--lg { font-size: 12px; margin-bottom: 32px; }

@media (max-width: 720px) {
  .nav__inner { gap: 10px 16px; padding: 12px 16px; }
  .nav__pill { margin-left: auto; }
  .nav__links { order: 3; flex-basis: 100%; margin-left: 0; gap: 8px 24px; }
  .nav__links a { font-size: 13px; }
  .nav__brand { font-size: 12px; letter-spacing: 0.1em; }
  .nav__pill { padding: 5px 10px; font-size: 10px; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 16px 32px; font-family: var(--mono); font-size: 13px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; border: 0; cursor: pointer;
  position: relative; overflow: hidden;
}
.btn--primary {
  background: var(--sage); color: var(--bg);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.btn--primary:hover { color: var(--bg); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(143, 166, 142, 0.35); }
/* Shimmer sweep (live site .btn-shimmer) */
.btn--primary::after {
  content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%);
  pointer-events: none;
}
.btn--primary:hover::after { animation: shimmer 0.6s ease forwards; }
@keyframes shimmer { to { left: 150%; } }

.btn--secondary {
  border: 1px solid var(--edge); color: var(--text-em);
  transition: border-color 0.3s ease, color 0.3s ease;
}
.btn--secondary:hover { border-color: var(--sage); color: var(--text); }
/* Chromatic split (live site .btn-chroma-dark). Needs data-text matching the label. */
.btn--secondary[data-text]::before,
.btn--secondary[data-text]::after {
  content: attr(data-text); position: absolute; inset: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font: inherit; letter-spacing: inherit; text-transform: inherit;
  pointer-events: none; opacity: 0; transition: opacity 0.3s ease; mix-blend-mode: screen;
}
.btn--secondary[data-text]::before { color: rgba(255, 60, 60, 0.6); transform: translate(-2px, 0); }
.btn--secondary[data-text]::after { color: rgba(60, 100, 255, 0.6); transform: translate(2px, 0); }
.btn--secondary[data-text]:hover::before,
.btn--secondary[data-text]:hover::after { opacity: 1; }

.btn--block { width: 100%; }
.btn[disabled] { opacity: 0.7; cursor: progress; transform: none; box-shadow: none; }

.btn-row { display: flex; gap: 16px; flex-wrap: wrap; }
.btn-row--center { justify-content: center; }

/* ---------- Corner-bracket frame ---------- */
.frame { position: relative; padding: 12px; display: block; color: inherit; }
.frame::before, .frame::after {
  content: ''; position: absolute; width: 22px; height: 22px; pointer-events: none;
}
.frame::before { top: 0; left: 0; border-top: 1px solid var(--sage); border-left: 1px solid var(--sage); }
.frame::after { bottom: 0; right: 0; border-bottom: 1px solid var(--sage); border-right: 1px solid var(--sage); }
.frame--muted::before, .frame--muted::after { border-color: var(--text-faint); }
.frame--sm { padding: 10px; }
.frame--sm::before, .frame--sm::after { width: 18px; height: 18px; }

.frame__box { background: var(--bg); border: 1px solid var(--border-inner); overflow: hidden; }
.slug {
  padding: 10px 16px; font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--text-label); border-bottom: 1px solid var(--border-inner); background: var(--slug);
  display: flex; justify-content: space-between; gap: 16px;
}
.slug--sm { padding: 8px 12px; gap: 12px; white-space: nowrap; overflow: hidden; }
.slug__status { color: var(--sage); font-weight: 700; }
.shot { width: 100%; display: block; object-fit: cover; object-position: top; background: var(--chip); }
.shot--16x9 { aspect-ratio: 16 / 9; }
.shot--16x10 { aspect-ratio: 16 / 10; }
.shot--wide { aspect-ratio: 2.2 / 1; }

/* Placeholder for images not yet supplied */
.placeholder {
  display: flex; align-items: center; justify-content: center; text-align: center; padding: 16px;
  background: repeating-linear-gradient(135deg, #1f1f1f 0 12px, #1c1c1c 12px 24px);
  color: var(--text-label); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase;
  width: 100%; height: 100%;
}

/* ---------- Work cards ---------- */
.work-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 32px; }
.work-grid .span-all { grid-column: 1 / -1; }
.card { height: 100%; transition: transform 0.4s ease, box-shadow 0.4s ease; }
.frame:hover .card { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); }
.frame:hover { color: inherit; }
.card__body { padding: 24px; }
.card__title { font-size: 20px; margin: 0 0 8px; color: var(--text); }
.card__title--lg { font-size: 22px; }
.card__text { color: var(--text-body); font-size: 13px; line-height: 1.6; margin: 0 0 16px; max-width: 640px; }
.card__link { color: var(--sage); font-size: 13px; display: inline-block; margin-top: 16px; }
.work-grid > .frame { height: 100%; }

.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tag { padding: 4px 12px; background: var(--chip); color: var(--text-body); font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; }

/* ---------- Ruled grids ---------- */
.ruled { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); border-top: 1px solid var(--border); border-left: 1px solid var(--border); }
.ruled--200 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.ruled--260 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.ruled--300 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.ruled > * { border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.cell { padding: 32px; display: flex; flex-direction: column; gap: 12px; }
.cell--16 { gap: 16px; }
.cell--sm { padding: 24px; display: block; }

.stat { font-family: var(--serif); font-weight: 600; font-size: 48px; line-height: 1; color: var(--sage); }
.stat-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.stat-before { font-size: 14px; color: var(--text-label); }
.stat-arrow { font-size: 14px; color: var(--text-label); }
.caption { font-size: 11px; color: var(--text-label); margin-top: 16px; }

/* ---------- Lists ---------- */
.dash-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; font-size: 13px; line-height: 1.5; color: var(--text-em); }
.dash-list li { display: flex; gap: 12px; }
.dash-list li::before { content: '—'; color: var(--sage); flex-shrink: 0; }

.rule-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; border-top: 1px solid var(--border); }
.rule-list li { display: flex; gap: 24px; padding: 20px 0; border-bottom: 1px solid var(--border); font-size: 14px; line-height: 1.6; color: var(--text-em); }
.rule-list li::before { content: '—'; color: var(--sage); flex-shrink: 0; }

/* ---------- Page headers ---------- */
.page-head { padding: 176px 0 96px; }
.page-head--tight { padding-bottom: 64px; }
.case-head { padding: 160px 0 64px; }
.back-link { font-size: 13px; color: var(--text-label); display: inline-block; margin-bottom: 48px; }
.back-link:hover { color: var(--sage); }
.case-head .h1-inner { max-width: 900px; }
.case-head .lede { max-width: 680px; }

.meta { margin: 64px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.meta > div { padding: 24px 24px 24px 0; }
.meta dt { margin-bottom: 8px; }
.meta dd { margin: 0; font-size: 14px; }
.meta dd .aside { color: var(--text-body); }

/* ---------- Home hero ---------- */
.hero { position: relative; min-height: 92vh; display: flex; align-items: center; padding-top: 80px; overflow-x: clip; }
.hero__inner { max-width: var(--container); margin: 0 auto; padding: 64px 24px; width: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 48px 32px; }
.hero__copy { flex: 1 1 420px; min-width: 0; max-width: 560px; position: relative; z-index: 5; display: flex; flex-direction: column; gap: 28px; }
.hero__copy .eyebrow { margin: 0; }
.hero__title { font-size: clamp(3rem, 5.4vw, 4.25rem); line-height: 1.08; text-wrap: pretty; }
.hero__buyer { font-size: 18px; line-height: 1.6; color: var(--text-em); }
.hero__lede { font-size: 14px; line-height: 1.7; color: var(--text-body); max-width: 480px; text-wrap: pretty; }

.collage { flex: 1.3 1 520px; min-width: 0; position: relative; aspect-ratio: 740 / 760; }
.collage__item { position: absolute; will-change: transform; transition: transform 700ms cubic-bezier(.2, .7, .2, 1); }
.collage__item--quire { left: 61%; top: 2%; width: 46%; z-index: 1; }
.collage__item--tended { left: 0; top: 9%; width: 86%; z-index: 2; }
.collage__item--ani { left: 44%; top: 47%; width: 66%; z-index: 3; }
.collage__item--ctbf { left: 4%; top: 62%; width: 52%; z-index: 4; }

/* ---------- Trust row ---------- */
.trust { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.trust__inner { max-width: var(--container); margin: 0 auto; padding: 24px; display: flex; align-items: center; gap: 16px 32px; flex-wrap: wrap; }
.trust__label { font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--text-label); display: flex; align-items: center; gap: 8px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { display: flex; align-items: center; gap: 8px; padding: 8px 16px; background: var(--chip); color: var(--text-em); font-size: 12px; }
.chip:hover { color: var(--sage); }
.stores { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.badge { display: block; transition: opacity 0.3s ease; }
.badge img { display: block; height: 40px; width: auto; }
.badge:hover { opacity: 0.8; }
.trust .stores { margin-left: auto; }
.store { display: flex; flex-direction: column; padding: 8px 16px; border: 1px solid var(--border); color: var(--text); line-height: 1.3; transition: border-color 0.3s ease; }
.store:hover { border-color: var(--sage); color: var(--text); }
.store__small { font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-body); }
.store__big { font-size: 13px; font-weight: 700; }

/* ---------- Tiers teaser / approach ---------- */
.tier-cell h3 { font-size: 22px; margin-top: 8px; }
.tier-cell .price { font-size: 13px; color: var(--text); }
.more-link { margin-top: 32px; font-size: 14px; }

.approach-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 32px; }
.approach-item { text-align: center; }
.approach-item .numeral { font-size: 48px; margin-bottom: 16px; }
.approach-item h3 { font-size: 18px; margin: 0 0 8px; }

/* ---------- Founder ---------- */
.founder { display: flex; flex-wrap: wrap; gap: 48px 64px; align-items: flex-start; }
.founder__side { flex: 0 1 320px; display: flex; flex-direction: column; gap: 24px; }
.founder__photo { width: 100%; aspect-ratio: 4 / 5; border: 1px solid var(--border); object-fit: cover; display: block; background: var(--chip); }
.founder__name { font-family: var(--serif); font-weight: 600; font-size: 18px; margin: 0 0 4px; }
.founder__role { font-size: 13px; color: var(--text-label); }
.founder__main { flex: 1 1 420px; min-width: 0; max-width: 680px; }
.founder__main h2 { line-height: 1.15; margin: 0 0 32px; text-wrap: pretty; }
.prose { display: flex; flex-direction: column; gap: 16px; font-size: 15px; line-height: 1.8; color: var(--text-body); }
.prose .em { color: var(--text-em); }

/* ---------- Testimonial ---------- */
.quote { position: relative; background: var(--bg); border: 1px solid var(--border); padding: clamp(48px, 6vw, 64px); }
.quote__mark { position: absolute; top: 16px; left: 24px; font-family: var(--serif); font-size: 6rem; line-height: 1; color: var(--sage); opacity: 0.3; }
.quote blockquote { position: relative; margin: 0; }
.quote__text { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: clamp(20px, 2.4vw, 24px); line-height: 1.6; color: var(--text-em); margin: 0 0 32px; }
.quote__by { display: flex; align-items: center; gap: 16px; }
.avatar { width: 48px; height: 48px; background: var(--sage-20); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--sage); font-family: var(--serif); font-weight: 600; flex-shrink: 0; }
.quote cite { font-style: normal; font-family: var(--serif); font-weight: 600; color: var(--text); }
.quote__role { font-size: 13px; color: var(--text-label); margin-top: 2px; }

/* ---------- Contact form ---------- */
.form { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 24px; }
.form__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 24px; }
.field { display: flex; flex-direction: column; gap: 8px; font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-body); }
.field .req { color: var(--sage); }
.field .opt, .form legend .opt { color: var(--text-label); text-transform: none; letter-spacing: 0; }
.input {
  background: var(--chip); border: 1px solid var(--border); color: var(--text);
  padding: 12px 16px; font-family: var(--mono); font-size: 14px; border-radius: 0; width: 100%;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.input::placeholder { color: var(--text-label); }
.input:focus { outline: none; border-color: var(--sage); box-shadow: 0 0 0 3px rgba(143, 166, 142, 0.2); }
select.input { appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-body) 50%), linear-gradient(135deg, var(--text-body) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 40px; }
textarea.input { resize: vertical; }
.form fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.form legend { font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-body); margin-bottom: 12px; padding: 0; }
.checks { display: flex; gap: 12px 32px; flex-wrap: wrap; }
.check { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--text-em); cursor: pointer; }
.check input { width: 18px; height: 18px; margin: 0; accent-color: var(--sage); }
.form__extra { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.alert { padding: 12px 16px; border: 1px solid var(--border); background: var(--chip); font-size: 13px; line-height: 1.6; color: var(--text); }
.form__alt { text-align: center; color: var(--text-label); font-size: 13px; }

/* Copy-to-clipboard email. The research is blunt about this: a buyer should be
   able to take the address and go, not fill nine fields first. The anchor stays
   a real mailto so it works without JavaScript and for anyone who would rather
   their mail client opened. */
.copy {
  display: inline-flex; align-items: center; gap: 7px; vertical-align: baseline;
  margin-left: 10px; padding: 5px 10px; cursor: pointer;
  background: transparent; border: 1px solid var(--edge); color: var(--text-body);
  font: 400 11px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase;
  transition: border-color 0.3s ease, color 0.3s ease;
}
.copy:hover { border-color: var(--sage); color: var(--text); }
.copy svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.copy.is-done { border-color: var(--sage); color: var(--sage); }
.footer .copy { margin-left: 0; }
.footer__mail { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; font-size: 13px; }
.footer__mail a { color: var(--text-body); }
.footer__mail a:hover { color: var(--sage-lift); }
.sent { max-width: 640px; margin: 0 auto; text-align: center; padding: 48px 0; }
.sent__icon { width: 64px; height: 64px; background: var(--sage-20); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 24px; }
.sent h3 { font-size: 24px; margin: 0 0 16px; }
.sent p { color: var(--text-body); font-size: 14px; }

/* ---------- Pricing ---------- */
.tier-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 24px; }
.tier-card { background: var(--bg); border: 1px solid var(--border); padding: 32px; display: flex; flex-direction: column; gap: 24px; }
.tier-card .eyebrow { font-size: 12px; }
.tier-card h2 { font-size: 28px; margin: 0 0 16px; }
.price-big { font-family: var(--serif); font-weight: 600; font-size: 36px; line-height: 1; }
.price-from { font-family: var(--mono); font-weight: 400; font-size: 13px; color: var(--text-body); vertical-align: middle; margin-right: 8px; }
.price-unit { font-family: var(--mono); font-weight: 400; font-size: 13px; color: var(--text-body); }
.tier-card__time { font-size: 13px; color: var(--text-label); margin-top: 12px; }
.tier-card__after { font-size: 12px; color: var(--text-body); margin-top: 8px; }
.tier-card__desc { font-size: 14px; line-height: 1.7; color: var(--text-body); padding-top: 24px; border-top: 1px solid var(--border); }
.tier-card__proof { margin-top: auto; padding-top: 24px; border-top: 1px solid var(--border); }
.tier-card__proof .micro { margin-bottom: 12px; }
.proof-links { display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.proof-links .muted { color: var(--text-body); }

.two-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 64px; align-items: start; }
.two-col--320 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 48px; }
.panel { border: 1px solid var(--border); background: var(--bg); }
.panel__head { padding: 32px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.panel__body { padding: 32px; display: flex; flex-direction: column; gap: 24px; }
.step { display: flex; gap: 24px; }
.step .numeral { font-size: 24px; }
.step h3 { font-size: 18px; margin: 0 0 4px; }

.plan h3 { font-size: 22px; }
.plan .price-big { font-size: 32px; }
.plan-notes { margin-top: 24px; display: flex; flex-direction: column; gap: 8px; font-size: 13px; line-height: 1.6; color: var(--text-body); }
.plan-notes strong { color: var(--text); font-weight: 400; }

.handoff { border: 1px solid var(--border); overflow: hidden; }
.handoff__head { padding: 32px; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; border-bottom: 1px solid var(--border); }
.handoff__intro { max-width: 640px; display: flex; flex-direction: column; gap: 12px; }
.handoff__intro h3 { font-size: 22px; }
.handoff__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); margin: 0 -1px -1px 0; }
.handoff__grid > div { padding: 24px 32px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; }
.handoff__grid .price-big { font-size: 28px; }

.terms { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 48px; }
.terms h3 { font-size: 20px; margin: 0 0 24px; }
.bar { display: flex; height: 48px; border: 1px solid var(--border); }
.bar > div { display: flex; align-items: center; padding: 0 16px; font-size: 13px; font-weight: 700; }
.bar > div + div { border-left: 1px solid var(--bg); }
.bar__a { background: var(--sage); color: var(--bg); }
.bar__b { background: var(--sage-20); color: var(--text); }
.bar__c { background: var(--chip); color: var(--text); }
.bar-labels { display: flex; font-size: 12px; color: var(--text-body); margin-top: 12px; gap: 8px; }

.faq { border-top: 1px solid var(--border); }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary {
  list-style: none; cursor: pointer; padding: 24px 0; display: flex; justify-content: space-between; align-items: center; gap: 24px;
  font-family: var(--serif); font-weight: 600; font-size: 18px; color: var(--text); transition: color 0.3s ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--sage); }
.faq summary::after { content: '+'; font-family: var(--mono); color: var(--sage); font-size: 18px; flex-shrink: 0; }
.faq details[open] summary::after { content: '\2212'; }
.faq details p { margin: 0 0 24px; font-size: 14px; line-height: 1.7; color: var(--text-body); max-width: 680px; }

.cta { text-align: center; max-width: 720px; margin: 0 auto; }
.cta .lede { margin: 0 auto 40px; max-width: none; }
.cta h2 { margin-bottom: 24px; }

/* ---------- Ownership ---------- */
.principles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 48px; }
.principles .numeral { font-size: 48px; margin-bottom: 16px; }
.principles h3 { font-size: 20px; margin: 0 0 12px; }
.principles p { color: var(--text-body); font-size: 13px; line-height: 1.7; }

.access-head { margin-bottom: 40px; }
.access-head .section-aside { min-height: 3.4em; }
.segmented { display: inline-flex; border: 1px solid var(--border); margin: 0 0 12px; }
.segmented button {
  font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 12px 20px; border: 0; cursor: pointer; background: transparent; color: var(--text-body); transition: color 0.3s ease;
}
.segmented button + button { border-left: 1px solid var(--border); }
.segmented button:hover { color: var(--text); }
.segmented button[aria-pressed="true"] { background: var(--sage); color: var(--bg); }
.access-note { font-size: 12px; color: var(--text-label); margin: 0 0 32px; }

.matrix { border-top: 1px solid var(--border); }
.matrix__row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.6fr); gap: 8px 32px; padding: 24px 0; border-bottom: 1px solid var(--border); font-size: 13px; line-height: 1.6; }
.matrix__row--head { padding: 16px 0; font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-label); line-height: normal; }
.matrix__name { font-family: var(--serif); font-weight: 600; font-size: 17px; display: flex; align-items: center; gap: 10px; }
.matrix__you { color: var(--text); }
.matrix__lgd { color: var(--sage); }
.matrix__lgd.is-none { color: var(--text-label); }
.matrix__why { color: var(--text-body); }
.matrix__label { display: none; color: var(--text-label); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; margin-right: 8px; }
.legend { font-size: 12px; color: var(--text-label); margin: 20px 0 0; display: flex; align-items: center; gap: 8px; }
.leaving { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--border); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 3.6fr); gap: 12px 32px; }
.leaving h3 { font-size: 17px; }
.leaving p { font-size: 13px; line-height: 1.75; color: var(--text-body); max-width: 70ch; }
@media (max-width: 719px) {
  .matrix__row, .leaving { grid-template-columns: minmax(0, 1fr); }
  .matrix__row--head { display: none; }
  .matrix__label { display: inline; }
}

.boxes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 24px; }
.box { border: 1px solid var(--border); padding: 32px; display: flex; flex-direction: column; gap: 16px; }
.box .eyebrow { font-size: 12px; margin: 0; }
.box h3 { font-size: 22px; }
.box p:not(.eyebrow) { font-size: 13px; line-height: 1.7; color: var(--text-body); }

/* ---------- Case studies ---------- */
.shots { display: flex; flex-wrap: wrap; gap: 32px; }
.shots > div { flex: 1 1 440px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.shots .eyebrow { font-size: 12px; margin: 0; }

.story { display: flex; flex-direction: column; gap: 80px; }
.story-row { display: flex; flex-wrap: wrap; gap: 32px 64px; }
.story-row__label { flex: 0 1 280px; }
.story-row__label .numeral { font-size: 48px; }
.story-row__label h2 { font-size: 28px; margin: 16px 0 0; }
.story-row__body { flex: 1 1 480px; min-width: 0; max-width: 640px; }
.story-row__body--wide { max-width: 720px; }
.story-row__body.prose { gap: 16px; }

.details { display: flex; flex-wrap: wrap; gap: 32px; align-items: center; justify-content: center; }
.details__wide { flex: 1 1 480px; min-width: 0; aspect-ratio: 4 / 3; border: 1px solid var(--border); overflow: hidden; }
.details__wide img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.details__phone { flex: 0 1 280px; width: 280px; max-width: 100%; aspect-ratio: 9 / 19.5; border: 1px solid var(--border); overflow: hidden; background: var(--bg); }
.details__phone--sm { flex-basis: 240px; width: 240px; }
.details__phone img { width: 100%; height: 100%; object-fit: contain; display: block; }

.mini-quote { flex: 1 1 480px; min-width: 0; max-width: 680px; position: relative; background: var(--bg); border: 1px solid var(--border); padding: 48px 40px 40px; }
.mini-quote .quote__mark { top: 8px; left: 20px; }
.mini-quote .quote__text { font-size: 20px; margin: 0 0 24px; position: relative; }
.mini-quote .by { font-size: 13px; color: var(--text-label); }
.mini-quote .by strong { color: var(--text); font-family: var(--serif); font-weight: 600; }

.callout { border: 1px solid var(--border); padding: clamp(32px, 5vw, 48px); display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap; }
.callout .eyebrow { font-size: 12px; margin-bottom: 12px; }
.callout h2 { font-size: 28px; margin: 0 0 8px; }

.next { border-top: 1px solid var(--border); }
.next a { display: block; padding: 64px 0; color: inherit; transition: background 0.3s ease; }
.next a:hover { background: var(--bg-alt); color: inherit; }
.next .container { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.next .eyebrow { font-size: 12px; color: var(--text-label); margin-bottom: 12px; }
.next h2 { font-size: clamp(2rem, 4vw, 3rem); }
.next .go { color: var(--sage); font-size: 14px; }

/* ---------- 404 ---------- */

.lost { display: flex; flex-wrap: wrap; gap: 48px 64px; align-items: center; }
.lost__copy { flex: 1 1 440px; min-width: 0; max-width: 560px; }
.lost__frame { flex: 0 1 380px; min-width: 0; }
/* .placeholder sets height:100%, which against an auto-height parent collapses
   to nothing and beats aspect-ratio. The plate has to reclaim its own height. */
.lost__plate { aspect-ratio: 4 / 3; height: auto; }
/* A whole ruled cell as the target, not just the heading inside it. */
.lost__link { color: inherit; transition: background 0.3s ease; }
.lost__link:hover { background: var(--bg-alt); color: inherit; }
.lost__link:hover h3 { color: var(--sage); }
.lost__link h3 { transition: color 0.3s ease; }
.cell-h { font-size: 17px; margin: 0; }

/* ---------- Footer ---------- */
.footer { padding: 48px 0; border-top: 1px solid var(--border); }
.footer .container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 24px; }
.footer__copy { font-size: 13px; color: var(--text-label); }
.footer__legal { font-size: 11px; color: var(--text-body); margin-top: 8px; max-width: 480px; }
.footer__tag { font-size: 11px; color: var(--text-body); margin-top: 4px; }
.footer__links { display: flex; gap: 24px; font-size: 13px; align-items: center; flex-wrap: wrap; }
.footer__links a { color: var(--text-label); }
.footer__links a:hover { color: var(--sage); }
.footer__links svg { width: 18px; height: 18px; display: block; }

/* ---------- Scroll reveal (live site) ---------- */
.js .reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; }
.js .reveal.visible { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .btn--primary:hover::after { animation: none; }
  .card, .btn, .collage__item { transition: none; }
}