/* Reuter & Mir — shared page layer over the Broadsheet design system.
   All colors, fonts, spacing, radii and shadows come from ds/styles.css
   tokens; this file carries page layout and web-scale sizing only.
   Rhythm: a 28px leading unit (17px Source Serif body at ~1.65), 14px half-step. */
:root {
  --leading: 28px;
  --half: 14px;
  --edge: clamp(20px, 5vw, 72px);
  --measure: 58ch;
}
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; text-wrap: pretty; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--edge); }
.nav { padding-inline: max(var(--edge), calc((100% - 1200px) / 2 + var(--edge))); }
.nav a { white-space: nowrap; }
.nav .btn, .hero .btn { white-space: nowrap; flex-shrink: 0; }
.nav a.nav-brand { text-decoration: none; }
.nav a[aria-current='page'] { color: var(--color-accent); }
@media (max-width: 560px) { .nav a:not(.nav-brand):not(.btn) { display: none; } }

/* — kicker: a section slug in ink — */
.kicker {
  display: block; font-size: 13px; line-height: var(--half);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
  font-feature-settings: "tnum" 1;
  margin: 0 0 calc(var(--leading) - var(--half));
}

/* — hero (home) — */
.hero { padding: calc(4 * var(--leading)) 0 calc(3 * var(--leading)); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--leading) clamp(24px, 5vw, 72px); align-items: center; }
.hero-figure { margin: 0; background: var(--color-neutral-100); padding: var(--space-3); border-radius: var(--radius-md); }
.hero-figure image-slot { width: 100%; aspect-ratio: 4 / 5; }
@media (max-width: 860px) { .hero { grid-template-columns: 1fr; } .hero-figure { order: -1; max-width: 320px; } }
.display {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(42px, 6vw, 80px);
  line-height: clamp(45.5px, 6.5vw, 86.5px);
  letter-spacing: -0.02em; margin: 0;
  margin-left: -0.035em; /* optical left alignment — measured Source Serif 4 */
  text-box: trim-both cap alphabetic;
}
.display .line { display: block; }
.hero .sub, .page-head .sub { font-size: 17px; line-height: var(--leading); max-width: var(--measure);
  margin: calc(1.5 * var(--leading) - 1cap) 0 0;
  text-box: trim-both cap alphabetic; }
.hero .row, .page-head .row { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--leading); }

/* — interior page head — */
.page-head { padding: calc(3.5 * var(--leading)) 0 calc(1.5 * var(--leading)); }
.page-head .display { font-size: clamp(36px, 4.6vw, 60px); line-height: clamp(39px, 5vw, 65px); }

/* — stat row — */
.stats { padding: calc(2.5 * var(--leading)) 0; }
.stats .grid { display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; gap: calc(1.5 * var(--leading)) var(--leading); }
.stat-cmyk { font-size: clamp(34px, 3.4vw, 48px); line-height: calc(2 * var(--leading)); margin: 0; margin-left: -0.033em; }
.stat-label { font-size: 13px; line-height: var(--half); letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
  margin: var(--half) 0 0; }
.step-cmyk { font-size: 24px; line-height: var(--leading); margin: 0 0 var(--half); }

/* — feature columns — */
.features { padding: calc(3 * var(--leading)) 0 calc(2.5 * var(--leading)); }
.cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(1.5 * var(--leading)) clamp(28px, 4vw, 64px);
  margin-top: calc(var(--leading) - var(--half)); }
.cols-4 { grid-template-columns: repeat(4, 1fr); gap: var(--leading) clamp(20px, 3vw, 40px); }
a.service-card { text-decoration: none; color: inherit; display: block; transition: box-shadow 0.15s ease, transform 0.15s ease; }
a.service-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
a.service-card:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.col h2, .col h3 { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 24px; line-height: var(--leading); letter-spacing: -0.01em;
  margin: 0; text-box: trim-both cap alphabetic; }
.col p { font-size: 15.5px; line-height: var(--leading); margin: calc(var(--leading) - 1cap) 0 0;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
  text-box: trim-both cap alphabetic; }

/* — service detail rows (services page) — */
.svc { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--leading) clamp(24px, 5vw, 96px);
  padding: calc(2 * var(--leading)) 0; scroll-margin-top: calc(2 * var(--leading)); }
.svc-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 32px; line-height: calc(1.5 * var(--leading)); letter-spacing: -0.015em;
  margin: 0; text-box: trim-both cap alphabetic; }
.svc-price { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 20px; line-height: var(--leading); color: var(--color-accent-700); margin: var(--half) 0 0; }
.svc p.body { font-size: 15.5px; line-height: var(--leading);
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
  margin: 0; max-width: 52ch; text-box: trim-both cap alphabetic; }
.svc ul.includes { list-style: none; margin: var(--leading) 0 0; padding: 0;
  font-size: 15.5px; line-height: var(--leading); max-width: 52ch; }
.svc ul.includes li { padding-left: calc(1ch + var(--space-3)); position: relative; }
.svc ul.includes li::before { content: "✓"; position: absolute; left: 0; color: var(--color-accent-700); }
.svc .row { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--leading); }

/* — pricing table — */
.pricing { padding: calc(2 * var(--leading)) 0 calc(2.5 * var(--leading)); }
.pricing-scroll { overflow-x: auto; margin-top: calc(var(--leading) - var(--half)); }
.pricing .table { min-width: 720px; }
.pricing .table th { vertical-align: bottom; }
.plan-name { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 19px; line-height: var(--leading); display: block; }
.plan-price { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 24px; line-height: var(--leading); display: block; margin-top: 2px; }
.plan-price small { font-size: 13px; font-weight: 400; color: color-mix(in srgb, var(--color-text) 70%, transparent); }
.table .yes { color: var(--color-accent-700); font-size: 17px; }
.table .no { color: color-mix(in srgb, var(--color-text) 35%, transparent); }
.table td.center, .table th.center { text-align: center; }
.pricing-note { font-size: 13px; line-height: var(--leading); color: color-mix(in srgb, var(--color-text) 70%, transparent); margin-top: var(--half); }

/* — imagery split — */
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--leading) clamp(24px, 5vw, 96px); align-items: center;
  padding: calc(2 * var(--leading)) 0 calc(3 * var(--leading)); }
.split-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 32px; line-height: calc(1.5 * var(--leading)); letter-spacing: -0.015em;
  margin: 0; text-box: trim-both cap alphabetic; }
.split-copy .note { font-size: 15.5px; line-height: var(--leading);
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
  margin: calc(var(--leading) - 1cap) 0 0; max-width: 48ch;
  text-box: trim-both cap alphabetic; }
.split-figure { margin: 0; }
.split-figure image-slot { width: 100%; aspect-ratio: 779 / 519; }

/* — pull quote & testimonial spread — */
.quote { padding: calc(2.5 * var(--leading)) 0 calc(3.5 * var(--leading)); }
.quote blockquote {
  font-family: var(--font-heading); font-style: italic; font-weight: 400;
  font-size: clamp(24px, 2.6vw, 34px); line-height: calc(1.5 * var(--leading));
  letter-spacing: -0.01em; max-width: 34ch; margin: 0;
  text-indent: -0.475em;
  text-box: trim-both cap alphabetic;
}
.quote figcaption { font-size: 15.5px; line-height: var(--leading);
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
  margin: calc(var(--leading) - 1cap) 0 0;
  text-indent: -1.045em;
  text-box: trim-both cap alphabetic; }
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(1.5 * var(--leading)) clamp(28px, 4vw, 64px); margin-top: calc(var(--leading) - var(--half)); }
.quotes blockquote { font-family: var(--font-heading); font-style: italic; font-weight: 400; font-size: 19px; line-height: var(--leading); letter-spacing: -0.005em; margin: 0; text-indent: -0.475em; text-box: trim-both cap alphabetic; }
.quotes figcaption { font-size: 13px; line-height: var(--half); letter-spacing: 0.08em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 70%, transparent); margin: var(--leading) 0 0; }
@media (max-width: 720px) {
  .quote blockquote, .quote figcaption { text-indent: 0; }
}

/* — about — */
.about { padding: calc(2.5 * var(--leading)) 0; }
.about .cols { grid-template-columns: repeat(2, 1fr); max-width: 980px; }

/* — FAQ — */
.faq { padding: calc(2.5 * var(--leading)) 0; }
.faq details { max-width: 64ch; padding: var(--half) 0; }
.faq summary { cursor: pointer; list-style: none; display: flex; gap: var(--space-3); align-items: baseline; font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 19px; line-height: var(--leading); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "+"; color: var(--color-accent); flex-shrink: 0; width: 1ch; }
.faq details[open] summary::before { content: "\2212"; }
.faq summary:hover { color: var(--color-accent-700); }
.faq summary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.faq details p { font-size: 15.5px; line-height: var(--leading); color: color-mix(in srgb, var(--color-text) 78%, transparent); margin: var(--half) 0 0 calc(1ch + var(--space-3)); max-width: 56ch; }

/* — close — */
.close { padding: calc(2.5 * var(--leading)) 0 calc(2 * var(--leading)); }
.close h3 { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 24px; line-height: var(--leading); margin: 0; text-box: trim-both cap alphabetic; }
.close .sub { font-size: 15.5px; line-height: var(--leading);
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
  margin: calc(var(--leading) - 1cap) 0 0; max-width: var(--measure); text-box: trim-both cap alphabetic; }
.signup { display: flex; gap: var(--space-3); align-items: center; max-width: 480px;
  margin-top: var(--leading); }
.signup .input { flex: 1; }
.signup .btn { min-height: 36px; }

/* — footer — */
.foot { padding: calc(2.5 * var(--leading)) 0 calc(2 * var(--leading)); }
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--leading) clamp(24px, 4vw, 64px); }
.foot h4 { font-size: 13px; line-height: var(--half); letter-spacing: 0.08em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 70%, transparent); margin: 0 0 var(--half); font-weight: 400; font-family: var(--font-body); }
.foot ul { list-style: none; margin: 0; padding: 0; font-size: 15px; line-height: var(--leading); }
.foot .brandline { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 19px; line-height: var(--leading); margin: 0; }
.foot .tagline { font-size: 15px; line-height: var(--leading); color: color-mix(in srgb, var(--color-text) 70%, transparent); margin: var(--half) 0 0; max-width: 32ch; }
.foot .fine { font-size: 13px; line-height: var(--leading); color: color-mix(in srgb, var(--color-text) 70%, transparent); margin-top: calc(1.5 * var(--leading)); }

/* — responsive collapse — */
@media (max-width: 1080px) {
  .cols { grid-template-columns: repeat(2, 1fr); }
  .quotes { grid-template-columns: repeat(2, 1fr); }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .hero, .page-head { padding-top: calc(2.5 * var(--leading)); }
  .stats .grid { grid-template-columns: repeat(2, 1fr); justify-content: start; }
  .cols, .cols-4, .about .cols { grid-template-columns: 1fr; }
  .split, .svc { grid-template-columns: 1fr; }
  .split-figure { order: -1; }
  .quotes { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr; }
}