/* ===================================================================
   Sevra Design Studio — Marketing Homepage
   Warm off-white, near-black ink, coral accent, Fraunces + Inter
   =================================================================== */

:root {
  --bg: #FAF8F4;
  --bg-alt: #EFEAE0;
  --bg-dark: #1A1A1A;
  --bg-dark-alt: #141414;
  --surface: #FFFFFF;
  --ink: #1A1A1A;
  --ink-soft: #2C2C2A;
  --text: #3A3A3A;
  --text-muted: #6B6B6B;
  --text-faint: #8A8A8A;
  --text-on-dark: #E8E4DC;
  --text-on-dark-muted: rgba(232, 228, 220, 0.62);
  --rule: rgba(26, 26, 26, 0.12);
  --rule-soft: rgba(26, 26, 26, 0.06);
  --rule-on-dark: rgba(232, 228, 220, 0.14);
  --rule-on-dark-soft: rgba(232, 228, 220, 0.08);
  --coral: #D85A30;
  --coral-dark: #B84820;
  --coral-tint: #FAECE7;

  --serif: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --container: 1200px;
  --gutter: clamp(1.25rem, 4vw, 3rem);

  --step-1: clamp(0.85rem, 0.83rem + 0.1vw, 0.9rem);
  --step-0: clamp(0.95rem, 0.9rem + 0.2vw, 1rem);
  --step-1-up: clamp(1.05rem, 1rem + 0.25vw, 1.15rem);
  --step-2: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --step-3: clamp(1.75rem, 1.5rem + 1.25vw, 2.5rem);
  --step-4: clamp(2.5rem, 2rem + 2.5vw, 4rem);
  --step-5: clamp(3rem, 2.25rem + 3.75vw, 5.5rem);

  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;

  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 6.5rem;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  position: relative;
}

/* Paper grain — a very subtle SVG noise texture layered over the whole body */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.35;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.1  0 0 0 0 0.1  0 0 0 0 0.1  0 0 0 0.08 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* Ensure all primary content sits above the grain overlay */
.site-header, main, .site-footer, .skip-link, .page-loader {
  position: relative;
  z-index: 2;
}

img, svg { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

::selection { background: var(--coral); color: var(--bg); }

/* Brand mention — gives inline "Sevra" references a subtle
   typographic lift without being bold or shouty. */
.brand-mention {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: -0.005em;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  padding: 0.75rem 1rem;
  background: var(--ink);
  color: var(--bg);
  border-radius: var(--radius-sm);
  z-index: 1000;
  font-size: var(--step-1);
  font-weight: 500;
}
.skip-link:focus { top: 1rem; }

/* Page load sweep — runs once, elegant reveal */
.page-loader {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999;
  overflow: hidden;
}
.page-loader__sweep {
  position: absolute;
  inset: 0;
  background: var(--coral);
  transform: translateX(-101%);
  animation: sweep 1.4s var(--ease-out) forwards;
}
@keyframes sweep {
  0%   { transform: translateX(-101%); }
  50%  { transform: translateX(0); }
  100% { transform: translateX(101%); }
}

/* Fade-up reveal for sections scrolled into view */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .page-loader { display: none; }
  .reveal { opacity: 1; transform: none; }
  html { scroll-behavior: auto !important; }
}

/* -------------------------------------------------------------------
   Invisible anchor target — used for #top and any other anchor that
   should land at the top of content, not inside an outer section.
   ------------------------------------------------------------------- */

.anchor-mark {
  display: block;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* -------------------------------------------------------------------
   Desktop clipboard toast
   ------------------------------------------------------------------- */

.copy-status {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%) translateY(0.5rem);
  background: var(--ink);
  color: var(--text-on-dark, #FAF8F4);
  padding: 0.625rem 1rem;
  border-radius: var(--radius-md, 6px);
  font-size: 0.9rem;
  font-weight: 500;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms, transform 200ms;
  z-index: 1000;
}
.copy-status.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .copy-status { transition: none; }
}

/* -------------------------------------------------------------------
   Typography
   ------------------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0;
}

h1 em, h2 em, h3 em {
  font-style: italic;
  font-weight: 400;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

/* -------------------------------------------------------------------
   Header / Navigation
   ------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 248, 244, 0.88);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 0.5px solid var(--rule-soft);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1.1rem;
  padding-bottom: 1.1rem;
}

.wordmark {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
}

.wordmark__text {
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.wordmark__text em {
  font-style: italic;
  font-weight: 400;
  color: var(--coral);
}

.mark {
  flex-shrink: 0;
  border-radius: var(--radius-sm);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 2rem;
  font-size: var(--step-1);
  color: var(--text);
}

.site-nav a {
  position: relative;
  padding: 0.25rem 0;
  transition: color 0.25s var(--ease);
}

.site-nav a:not(.site-nav__cta)::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  height: 1px;
  width: 0;
  background: var(--coral);
  transition: width 0.3s var(--ease-out);
}

.site-nav a:not(.site-nav__cta):hover {
  color: var(--ink);
}

.site-nav a:not(.site-nav__cta):hover::after {
  width: 100%;
}

.site-nav a.site-nav__cta {
  color: var(--bg);
  background: var(--ink);
  font-weight: 500;
  padding: 0.6rem 1.25rem;
  border-radius: var(--radius-md);
  transition: background 0.25s var(--ease), transform 0.2s var(--ease);
}

.site-nav a.site-nav__cta::after {
  display: none !important;
}

.site-nav a.site-nav__cta:hover {
  background: var(--coral);
  color: var(--bg);
  transform: translateY(-1px);
}

/* Mobile toggle */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  flex-direction: column;
  gap: 5px;
}

.nav-toggle span {
  display: block;
  width: 24px;
  height: 1.5px;
  background: var(--ink);
  transition: transform 0.3s var(--ease), opacity 0.2s;
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

.mobile-nav {
  display: none;
  flex-direction: column;
  padding: 1rem var(--gutter) 2rem;
  border-top: 0.5px solid var(--rule-soft);
  gap: 0.25rem;
}

/* Mobile nav only renders under 720px, and only when not [hidden] */
@media (max-width: 720px) {
  .mobile-nav:not([hidden]) {
    display: flex;
  }
}

.mobile-nav a {
  padding: 0.85rem 0;
  font-size: 1.1rem;
  color: var(--ink-soft);
  border-bottom: 0.5px solid var(--rule-soft);
}

.mobile-nav__cta {
  color: var(--coral) !important;
  font-weight: 500;
  margin-top: 0.5rem;
}

/* -------------------------------------------------------------------
   Meta-row — section number + label pattern
   ------------------------------------------------------------------- */

.meta-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 2rem;
}

.meta-row__num {
  font-family: var(--serif);
  font-size: 0.85rem;
  color: var(--coral);
  font-weight: 500;
  letter-spacing: 0.05em;
}

.meta-row__line {
  flex: 1;
  max-width: 180px;
  height: 0.5px;
  background: var(--rule);
}

.meta-row__label {
  font-size: 0.75rem;
  color: var(--text-muted);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
}

.section-headline {
  font-size: var(--step-4);
  margin-bottom: 1.25rem;
}

.section-lede {
  font-size: var(--step-1-up);
  color: var(--text);
  max-width: 48ch;
  line-height: 1.55;
}

.section-header {
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

/* -------------------------------------------------------------------
   Hero
   ------------------------------------------------------------------- */

.hero {
  padding-top: clamp(3rem, 7vw, 5.5rem);
  padding-bottom: clamp(2rem, 4vw, 3.5rem);
  position: relative;
  /* Fill the viewport below the sticky header so the next section
     doesn't bleed in at the bottom. svh handles mobile browser chrome;
     vh is a fallback for older browsers. ~5rem subtracts the header
     height (40px logo + 1.1rem padding × 2 ≈ 4.7rem). */
  min-height: calc(100vh - 5rem);
  min-height: calc(100svh - 5rem);
  display: flex;
  flex-direction: column;
}

.hero__inner {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.hero__headline {
  font-size: var(--step-5);
  line-height: 0.98;
  letter-spacing: -0.035em;
  margin: 0 0 1.75rem;
  position: relative;
  min-height: 1.5em; /* prevent layout shift during cycle */
}

.hero__headline em {
  font-style: italic;
  color: var(--coral);
}

.headline-slot {
  display: block;
}
.headline-slot[hidden] { display: none; }

.hero__sub {
  font-size: var(--step-2);
  line-height: 1.45;
  color: var(--text);
  max-width: 34ch;
  margin-bottom: 2.5rem;
  font-weight: 400;
}

.hero__actions {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  flex-wrap: wrap;
}

.button {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 500;
  padding: 1rem 1.75rem;
  border-radius: var(--radius-md);
  transition: transform 0.2s var(--ease), background 0.25s var(--ease), color 0.25s var(--ease), box-shadow 0.25s var(--ease);
  cursor: pointer;
  border: none;
  letter-spacing: 0.005em;
}

.button--primary {
  background: var(--coral);
  color: var(--bg);
  box-shadow: 0 1px 0 rgba(0,0,0,0.04);
}

.button--primary:hover {
  background: var(--coral-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(216, 90, 48, 0.28);
}

.button--primary span {
  transition: transform 0.3s var(--ease-out);
}

.button--primary:hover span {
  transform: translateX(3px);
}

.button--ghost {
  color: var(--text);
  padding-left: 0;
  padding-right: 0;
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
  transition: text-decoration-color 0.25s var(--ease), color 0.25s var(--ease);
}

.button--ghost:hover {
  color: var(--ink);
  text-decoration-color: var(--coral);
}

.hero__right {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-top: clamp(1rem, 4vw, 2.5rem);
}

.hero-mark {
  display: block;
  /* viewBox is 48×48 with 8-unit padding around the 32-unit frame.
     Width values scaled 1.31× from 260-420 → 340-550 so the visible
     frame stays roughly its previous physical size. The construction
     guides and load-sweep lines extend into that 8-unit padding. */
  width: clamp(340px, 42vw, 550px);
  height: auto;
  transform: translateX(-2rem);
}

.hero__footline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: clamp(2.5rem, 5vw, 4rem);
  margin-top: clamp(2rem, 4vw, 3rem);
  border-top: 0.5px solid var(--rule);
  font-size: 0.85rem;
  color: var(--text-muted);
}

.hero__footline strong {
  color: var(--ink);
  font-weight: 500;
}

/* Coral down chevron at the bottom of the hero. Pushed to the
   viewport bottom via flex margin-top: auto on .hero. Skip-link
   to the next section. */
.hero__chevron {
  margin-top: auto;
  align-self: center;
  display: block;
  padding: 0.75rem;
  margin-bottom: 0.5rem;
  color: var(--coral);
  text-decoration: none;
  transition: transform 0.25s var(--ease-out);
}

.hero__chevron:hover,
.hero__chevron:focus-visible {
  transform: translateY(3px);
}

.hero__chevron svg {
  display: block;
  width: 28px;
  height: 28px;
}

@media (prefers-reduced-motion: reduce) {
  .hero__chevron { transition: none; }
  .hero__chevron:hover,
  .hero__chevron:focus-visible { transform: none; }
}

/* -------------------------------------------------------------------
   Intro — what I do (DARK SECTION)
   A deliberate chapter break in the scroll. Core message moment.
   ------------------------------------------------------------------- */

.intro {
  padding-top: clamp(5rem, 10vw, 8rem);
  padding-bottom: clamp(5rem, 10vw, 8rem);
  background: var(--bg-dark);
  color: var(--text-on-dark);
  position: relative;
  overflow: hidden;
  /* Anchor links (e.g. the hero chevron's #intro) shouldn't land
     underneath the sticky header. */
  scroll-margin-top: 5rem;
}

/* Subtle inner top edge — a 1px coral seam where the dark begins */
.intro::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 56px;
  height: 2px;
  background: var(--coral);
}

.intro .meta-row__num {
  color: var(--coral);
}

.intro .meta-row__line {
  background: var(--rule-on-dark);
}

.intro .meta-row__label {
  color: var(--text-on-dark-muted);
}

.intro .section-headline {
  color: var(--text-on-dark);
}

.intro .section-headline em {
  color: var(--coral);
}

.intro__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  margin-top: clamp(3rem, 6vw, 5rem);
  position: relative;
}

/* Vertical rules between columns — adds editorial structure to the dark section */
.intro__col {
  position: relative;
  padding-left: clamp(0rem, 2vw, 1.5rem);
}

.intro__col:not(:first-child)::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.25rem;
  bottom: 0.25rem;
  width: 0.5px;
  background: var(--rule-on-dark);
}

.intro__col h3 {
  font-family: var(--serif);
  font-size: var(--step-2);
  font-weight: 500;
  margin-bottom: 0.75rem;
  letter-spacing: -0.015em;
  color: var(--text-on-dark);
  display: inline-block;
  position: relative;
  cursor: default;
  transition: color 0.35s var(--ease);
}

.intro__col h3::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  height: 1.5px;
  width: 0;
  background: var(--coral);
  transition: width 0.5s var(--ease-out);
}

.intro__col:hover h3 {
  color: var(--coral);
}

.intro__col:hover h3::after {
  width: 100%;
}

.intro__col p {
  color: var(--text-on-dark-muted);
  font-size: var(--step-0);
  line-height: 1.65;
  max-width: 34ch;
}

/* -------------------------------------------------------------------
   Work — portfolio
   ------------------------------------------------------------------- */

.work {
  padding-top: clamp(5rem, 10vw, 8rem);
  padding-bottom: clamp(5rem, 10vw, 8rem);
  background: var(--bg-alt);
  border-top: 0.5px solid var(--rule);
  border-bottom: 0.5px solid var(--rule);
}

/* -------------------------------------------------------------------
   Work cards (full-width screenshot + content stack)
   ------------------------------------------------------------------- */

.work-stack {
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.work-card {
  display: flex;
  align-items: stretch;
  background: var(--surface);
  border: 0.5px solid var(--rule);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.3s var(--ease), transform 0.4s var(--ease-out);
}

.work-card:hover {
  border-color: var(--coral);
  transform: translateY(-3px);
}

.work-card:focus-visible {
  outline: 2px solid var(--coral);
  outline-offset: 4px;
}

/* Alternating direction: card 2 has image on the right */
.work-card:nth-child(even) {
  flex-direction: row-reverse;
}

.work-card__image {
  flex: 0 0 55%;
  background: var(--bg-alt);
  overflow: hidden;
  border-right: 0.5px solid var(--rule);
  display: flex;
  align-items: center;
}

.work-card:nth-child(even) .work-card__image {
  border-right: none;
  border-left: 0.5px solid var(--rule);
}

.work-card__image img {
  display: block;
  width: 100%;
  height: auto;
}

.work-card__content {
  flex: 1;
  padding: clamp(2rem, 4vw, 3rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.work-card__tag {
  display: inline-block;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 4px 10px;
  border: 0.5px solid var(--rule);
  border-radius: 999px;
  color: var(--text-muted);
  margin-bottom: 1.25rem;
}

.work-card__tag--live {
  background: var(--coral-tint);
  color: var(--coral-dark);
  border-color: transparent;
}

.work-card__title {
  font-family: var(--serif);
  font-size: var(--step-3);
  font-weight: 500;
  margin-bottom: 0.4rem;
  letter-spacing: -0.02em;
}

.work-card__title em {
  font-style: italic;
  font-weight: 400;
}

.work-card__meta {
  font-size: 0.85rem;
  color: var(--text-muted);
  letter-spacing: 0.02em;
  margin-bottom: 1.25rem;
}

.work-card__body {
  color: var(--text);
  font-size: var(--step-0);
  line-height: 1.65;
  margin-bottom: 1.5rem;
  max-width: 64ch;
}

.work-card__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
  color: var(--coral);
  font-weight: 500;
  transition: gap 0.3s var(--ease-out);
}

.work-card:hover .work-card__link {
  gap: 14px;
}

/* -------------------------------------------------------------------
   Process
   ------------------------------------------------------------------- */

.process {
  padding-top: clamp(5rem, 10vw, 8rem);
  padding-bottom: clamp(5rem, 10vw, 8rem);
}

.process-list {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: process;
}

.process-step {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  padding: clamp(2rem, 3vw, 2.75rem) 0;
  padding-left: clamp(1.5rem, 2.5vw, 2.25rem);
  border-top: 0.5px solid var(--rule);
  align-items: start;
  position: relative;
}

/* Coral position marker — appears at the left edge of the row on hover.
   Sits in the reserved space carved out by .process-step's padding-left,
   so the Roman numeral has clear breathing room from the bar even at
   narrow viewports. Grows from zero height outward from center — reads
   as a focus indicator (like a current-line marker in a code editor),
   not a click affordance. No layout shift; reduced-motion users get
   the same final state, just without the transition (handled globally).
   Touch users never see it (no hover) and miss nothing — the steps
   still read clearly as a numbered sequence. */
.process-step::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--coral);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform 0.3s var(--ease);
  pointer-events: none;
}

.process-step:hover::before {
  transform: scaleY(0.7);
}

.process-step:last-child {
  border-bottom: 0.5px solid var(--rule);
}

.process-step__num {
  font-family: var(--serif);
  font-size: var(--step-3);
  font-style: italic;
  color: var(--coral);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
}

.process-step__body h3 {
  font-family: var(--serif);
  font-size: var(--step-3);
  font-weight: 500;
  margin-bottom: 0.75rem;
  letter-spacing: -0.02em;
}

.process-step__body p {
  color: var(--text);
  font-size: var(--step-1-up);
  line-height: 1.6;
  max-width: 62ch;
}

/* -------------------------------------------------------------------
   Pricing
   ------------------------------------------------------------------- */

.pricing {
  padding-top: clamp(5rem, 10vw, 8rem);
  padding-bottom: clamp(5rem, 10vw, 8rem);
  background: var(--bg-alt);
  border-top: 0.5px solid var(--rule);
  border-bottom: 0.5px solid var(--rule);
}

.pricing-card {
  background: var(--surface);
  border: 0.5px solid var(--rule);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.pricing-card__top {
  padding: clamp(2.5rem, 4vw, 4rem) clamp(2rem, 4vw, 3.5rem) clamp(2rem, 3vw, 2.5rem);
  text-align: center;
  border-bottom: 0.5px solid var(--rule);
}

.pricing-card__label {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 500;
  margin-bottom: 1.5rem;
}

.pricing-card__range {
  font-family: var(--serif);
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 1.5rem;
  color: var(--ink);
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.pricing-card__dash {
  color: var(--coral);
  font-style: italic;
}

.pricing-card__note {
  color: var(--text);
  font-size: var(--step-1-up);
  line-height: 1.55;
  max-width: 52ch;
  margin: 0 auto;
}

.pricing-card__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 0.5px solid var(--rule);
}

.pricing-card__col {
  padding: clamp(2rem, 3vw, 2.75rem);
}

.pricing-card__col:first-child {
  border-right: 0.5px solid var(--rule);
}

.pricing-card__col--not {
  background: var(--bg);
}

.pricing-card__col h3 {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 500;
  margin-bottom: 1.25rem;
  letter-spacing: -0.015em;
}

.pricing-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
}

.pricing-list li {
  position: relative;
  padding: 0.55rem 0 0.55rem 1.75rem;
  border-bottom: 0.5px dashed var(--rule-soft);
  color: var(--text);
  font-size: var(--step-0);
}

.pricing-list li:last-child { border-bottom: none; }

.pricing-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0.55rem;
  color: var(--coral);
  font-weight: 500;
  font-size: 0.95rem;
}

.pricing-list--not li::before {
  content: '—';
  color: var(--text-faint);
}

.pricing-card__not-note {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-style: italic;
  margin-top: 1rem;
}

.pricing-card__bottom {
  padding: clamp(1.5rem, 3vw, 2rem) clamp(2rem, 4vw, 3.5rem);
  text-align: center;
  background: var(--bg-alt);
  font-size: var(--step-0);
  color: var(--text);
}

.pricing-card__bottom strong {
  color: var(--ink);
  font-weight: 500;
}

/* -------------------------------------------------------------------
   About
   ------------------------------------------------------------------- */

.about {
  padding-top: clamp(5rem, 10vw, 8rem);
  padding-bottom: clamp(5rem, 10vw, 8rem);
}

.about__inner {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}

.about__right {
  padding-top: 0.5rem;
}

.about__right p {
  font-size: var(--step-1-up);
  line-height: 1.7;
  color: var(--text);
  margin-bottom: 1.25rem;
  max-width: 52ch;
}

.about__signature {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--step-2) !important;
  color: var(--ink) !important;
  margin-top: 1.5rem !important;
}

/* -------------------------------------------------------------------
   FAQ
   ------------------------------------------------------------------- */

.faq {
  padding-top: clamp(5rem, 10vw, 8rem);
  padding-bottom: clamp(5rem, 10vw, 8rem);
  background: var(--bg-alt);
  border-top: 0.5px solid var(--rule);
  border-bottom: 0.5px solid var(--rule);
}

.faq-list {
  max-width: 780px;
  margin: 0 auto;
}

.faq-item {
  border-top: 0.5px solid var(--rule);
}

.faq-item:last-child {
  border-bottom: 0.5px solid var(--rule);
}

.faq-item summary {
  padding: 1.5rem 3rem 1.5rem 0;
  font-family: var(--serif);
  font-size: var(--step-2);
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  position: relative;
  letter-spacing: -0.015em;
  transition: color 0.25s var(--ease);
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
  content: '';
  position: absolute;
  right: 4px;
  top: 50%;
  width: 12px;
  height: 12px;
  border-right: 1.5px solid var(--coral);
  border-bottom: 1.5px solid var(--coral);
  transform: translateY(-80%) rotate(45deg);
  transition: transform 0.3s var(--ease-out);
}

.faq-item[open] summary::after {
  transform: translateY(-20%) rotate(-135deg);
}

.faq-item summary:hover {
  color: var(--coral);
}

.faq-item__body {
  padding: 0 3rem 1.75rem 0;
  color: var(--text);
  font-size: var(--step-1-up);
  line-height: 1.65;
  max-width: 62ch;
}

.faq-item__body strong {
  color: var(--ink);
  font-weight: 500;
}

/* -------------------------------------------------------------------
   Contact
   ------------------------------------------------------------------- */

.contact {
  padding-top: clamp(5rem, 10vw, 8rem);
  padding-bottom: clamp(5rem, 10vw, 8rem);
}

.contact__inner {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}

.contact__headline {
  font-size: var(--step-4);
  margin-bottom: 1.25rem;
}

.contact__lede {
  font-size: var(--step-1-up);
  color: var(--text);
  line-height: 1.55;
  max-width: 38ch;
}

.contact__email {
  display: none; /* Legacy — form replaced the card */
}

.contact__email-line {
  font-size: 0.95rem;
  color: var(--text-muted);
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 0.5px solid var(--rule);
  line-height: 1.5;
}

.contact__email-line a {
  color: var(--coral);
  font-weight: 500;
  border-bottom: 0.5px solid transparent;
  transition: border-color 0.25s var(--ease);
}

.contact__email-line a:hover {
  border-bottom-color: var(--coral);
}

/* Contact form */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.contact-form__honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-form__field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.contact-form__label {
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: 0.01em;
}

.contact-form__optional {
  color: var(--text-muted);
  font-weight: 400;
  font-size: 0.8rem;
  margin-left: 2px;
}

.contact-form input,
.contact-form textarea {
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--ink);
  background: var(--surface);
  border: 0.5px solid var(--rule);
  border-radius: var(--radius-md);
  padding: 0.75rem 1rem;
  width: 100%;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
  line-height: 1.5;
}

.contact-form textarea {
  resize: vertical;
  min-height: 3rem;
}

/* Placeholder styling — light, italic, muted. Disappears on focus. */
.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: var(--text-faint);
  font-style: italic;
  opacity: 1;
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--coral);
  box-shadow: 0 0 0 3px rgba(216, 90, 48, 0.12);
}

.contact-form input:focus-visible,
.contact-form textarea:focus-visible {
  outline: none;
}

.contact-form__submit {
  align-self: flex-start;
  margin-top: 0.5rem;
}

.contact__checklist {
  display: none; /* Legacy — merged into form hint */
}

/* -------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------- */

.site-footer {
  background: var(--ink);
  color: #CACAC4;
  padding-top: clamp(4rem, 7vw, 6rem);
  padding-bottom: 2rem;
}

.site-footer__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  justify-items: center;
  padding-bottom: clamp(2.5rem, 4vw, 3.5rem);
  border-bottom: 0.5px solid rgba(255,255,255,0.14);
}

.site-footer__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.25rem;
}

.site-footer__mark {
  border: 0.5px solid rgba(255,255,255,0.15);
  border-radius: 6px;
}

.site-footer__brand-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.site-footer__name {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--bg);
  margin: 0;
  letter-spacing: -0.01em;
}

.site-footer__name em {
  font-style: italic;
  font-weight: 400;
  color: var(--coral);
}

.site-footer__tagline {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.5);
  margin: 0;
  line-height: 1.5;
}

.site-footer__statement {
  max-width: 32ch;
  text-align: center;
}

.site-footer__statement p {
  font-family: var(--serif);
  font-size: clamp(1.2rem, 2.2vw, 1.5rem);
  font-weight: 400;
  line-height: 1.3;
  color: rgba(255,255,255,0.85);
  margin: 0;
  letter-spacing: -0.015em;
}

.site-footer__statement em {
  font-style: italic;
  color: var(--coral);
}

.site-footer__directory {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.5rem;
}

.site-footer__block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.site-footer__block-label {
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  font-weight: 500;
}

.site-footer__email {
  color: rgba(255,255,255,0.9);
  font-size: 0.95rem;
  transition: color 0.25s var(--ease);
}

.site-footer__email:hover {
  color: var(--coral);
}

.site-footer__links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1rem;
  font-size: 0.95rem;
}

.site-footer__links a {
  color: rgba(255,255,255,0.9);
  transition: color 0.25s var(--ease);
}

.site-footer__links a:hover {
  color: var(--coral);
}

.site-footer__base {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 2rem;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.45);
}

.site-footer__base p { margin: 0; }

/* -------------------------------------------------------------------
   Pull quote — full-bleed editorial moment between sections
   ------------------------------------------------------------------- */

.pullquote {
  padding-top: clamp(5rem, 9vw, 7rem);
  padding-bottom: clamp(5rem, 9vw, 7rem);
  text-align: center;
  border-top: 0.5px solid var(--rule);
  border-bottom: 0.5px solid var(--rule);
}

.pullquote blockquote {
  margin: 0 auto;
  max-width: 32ch;
  font-family: var(--serif);
  font-size: clamp(2rem, 5vw, 3.75rem);
  font-weight: 400;
  font-style: italic;
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--ink);
  position: relative;
}

.pullquote blockquote::before {
  content: '';
  display: block;
  width: 40px;
  height: 2px;
  background: var(--coral);
  margin: 0 auto 2rem;
}

.pullquote blockquote em {
  font-style: italic;
  color: var(--coral);
}

/* -------------------------------------------------------------------
   Responsive — tablet & below
   ------------------------------------------------------------------- */

@media (max-width: 980px) {
  .hero__inner {
    grid-template-columns: 1fr;
  }

  .hero__right {
    padding-top: 1rem;
    order: 2;
    /* Single-column layout — center the mark in the row instead of
       leaving it left-aligned (the desktop default). */
    justify-content: center;
  }

  .hero-mark {
    /* Cancel the desktop pull-left: it exists to optically align the
       mark inside its grid column, but in single-column mode it just
       reads as off-centre to the left. */
    transform: translateX(0);
    /* Scale down for narrower viewports. The desktop floor of 340px
       was sized for the right-column slot; on a ~380px phone it takes
       up the full width and the SVG's internal 8/48 padding produces
       loose vertical gaps above and below. */
    width: clamp(240px, 62vw, 360px);
  }

  .work-card--featured {
    grid-template-columns: 1fr;
  }

  .about__inner,
  .contact__inner {
    grid-template-columns: 1fr;
  }

  .intro__grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .intro__col {
    padding-left: 0;
    padding-top: 2rem;
  }

  .intro__col:not(:first-child)::before {
    left: 0;
    right: 0;
    top: 0;
    bottom: auto;
    width: auto;
    height: 0.5px;
  }

  .intro__col:first-child {
    padding-top: 0;
  }

  .site-footer__inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .site-footer__statement {
    max-width: 100%;
  }
}

@media (max-width: 720px) {
  .site-nav { display: none; }

  .nav-toggle {
    display: flex;
  }

  .hero {
    padding-top: 2rem;
    /* Drop the viewport-fill on phones — with the Sd mark hidden,
       the lower half pooled as empty space. Let the hero be its
       natural content height. The chevron will sit just below the
       footline rather than pinned to the viewport bottom. */
    min-height: 0;
  }

  /* Pull the Sd mark closer to the buttons above it on phones. */
  .hero__right {
    padding-top: 0;
    /* On phones the hero mark sits below the fold, so the ~4.7s load
       animation completes before anyone scrolls down to see it — and
       the static rest-state mark is identical to the small Sd in the
       topbar. Hiding it here removes a redundant visual that was also
       making the hero feel oversized. The mark stays on tablet
       (≥721px) and desktop, where the animation plays above the fold. */
    display: none;
  }

  .hero__footline {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    text-align: left;
    /* Tighten the gap between the mark and the footline rule on phones —
       the clamped desktop values (~2.5rem padding + ~2rem margin) produce
       too much breathing room when the mark sits below it. */
    padding-top: 1.75rem;
    margin-top: 1.25rem;
  }

  .work-card,
  .work-card:nth-child(even) {
    flex-direction: column;
  }

  .work-card__image,
  .work-card:nth-child(even) .work-card__image {
    flex: 0 0 auto;
    border-right: none;
    border-left: none;
    border-bottom: 0.5px solid var(--rule);
  }

  .work-card__content {
    padding: clamp(1.5rem, 3vw, 2rem);
  }

  .pricing-card__cols {
    grid-template-columns: 1fr;
  }

  .pricing-card__col:first-child {
    border-right: none;
    border-bottom: 0.5px solid var(--rule);
  }

  .process-step {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .process-step__num {
    font-size: 1.5rem;
  }

  .work-card__specs {
    flex-wrap: wrap;
    gap: 1.25rem;
  }

  .site-footer__base {
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-start;
  }

  .faq-item summary {
    font-size: 1.1rem;
    padding-right: 2.5rem;
  }

  .faq-item__body {
    padding-right: 0;
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .hero__actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
  }

  .button--primary {
    width: auto;
  }
}

/* ===================================================================
   Intake Form (/intake-form/)
   Scoped under body.is-intake where it overrides marketing defaults.
   Uses the shared :root tokens, brand-wide button styles, skip-link,
   and page-loader defined above.
   =================================================================== */

.is-intake .container {
  max-width: 960px;
}

.is-intake body,
body.is-intake {
  overflow-x: hidden;
}

/* Tighter body sizing on the intake — it's a workspace, not a page */
body.is-intake {
  --topbar-h: 3.5rem;
}

/* ------------------------------------------------------------------
   Intake topbar
   ------------------------------------------------------------------ */

.intake-topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--topbar-h, 3.5rem);
  background: var(--bg);
  border-bottom: 0.5px solid var(--rule);
}

.intake-topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  gap: 1rem;
}

.intake-topbar__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
}

.intake-topbar__brand svg {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.intake-topbar__brand em,
.intake-footer em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--coral);
}

.intake-topbar__brand-text {
  display: none;
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}

@media (min-width: 560px) {
  .intake-topbar__brand-text { display: inline; }
}

.intake-topbar__status {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.intake-topbar__status::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--coral);
}

@media (min-width: 721px) {
  .intake-topbar__status {
    margin-left: auto;
  }
}

/* ------------------------------------------------------------------
   Mobile TOC panel (different from marketing's .mobile-nav)
   ------------------------------------------------------------------ */

.mobile-toc {
  position: sticky;
  top: var(--topbar-h, 3.5rem);
  z-index: 40;
  background: var(--surface);
  border-bottom: 0.5px solid var(--rule);
  max-height: calc(100vh - var(--topbar-h, 3.5rem));
  overflow-y: auto;
}

.mobile-toc[hidden] { display: none; }

.mobile-toc ol {
  list-style: none;
  margin: 0;
  padding: 0.5rem var(--gutter);
}

.mobile-toc li {
  margin: 0;
  border-bottom: 0.5px solid var(--rule-soft);
}

.mobile-toc li:last-child { border-bottom: none; }

.mobile-toc a {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 0.85rem 0;
  text-decoration: none;
  color: var(--ink-soft);
  font-size: 1rem;
}

.mobile-toc a .num {
  font-family: var(--serif);
  font-size: 0.85rem;
  color: var(--coral);
  font-weight: 500;
  min-width: 1.5em;
}

@media (min-width: 721px) {
  .mobile-toc { display: none !important; }
}

/* ------------------------------------------------------------------
   Intake intro block
   ------------------------------------------------------------------ */

.is-intake main {
  padding-top: 1.5rem;
}

.intake-intro {
  padding: 3.5rem 0 2.5rem;
  border-bottom: 0.5px solid var(--rule);
}

@media (max-width: 720px) {
  .intake-intro { padding: 2.5rem 0 2rem; }
}

.intake-intro__eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--coral);
  font-weight: 500;
  margin-bottom: 1rem;
}

.intake-title {
  font-family: var(--serif);
  font-size: var(--step-4);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin: 0 0 1.75rem;
  max-width: 18ch;
}

.intake-title em {
  font-style: italic;
  color: var(--coral);
}

.intake-intro__body {
  max-width: 62ch;
  font-size: var(--step-1-up);
  color: var(--text);
  line-height: 1.65;
}

.intake-intro__body p {
  margin: 0 0 0.9em;
}

.intake-intro__body p:last-child {
  margin-bottom: 0;
}

.intake-intro__note {
  margin-top: 1.25rem !important;
  padding: 1rem 1.25rem;
  background: var(--bg-alt);
  border-left: 3px solid var(--coral);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-size: var(--step-0);
}

.intake-intro__note a {
  color: var(--coral);
  font-weight: 500;
  text-decoration-color: var(--coral);
}

/* ------------------------------------------------------------------
   Two-column layout — desktop TOC + form body
   ------------------------------------------------------------------ */

.intake-layout {
  display: grid;
  gap: 3rem;
  margin-top: 3rem;
  padding-bottom: 5rem;
}

@media (min-width: 900px) {
  .intake-layout {
    grid-template-columns: 200px 1fr;
    gap: 4rem;
  }
}

.desktop-toc { display: none; }

@media (min-width: 900px) {
  .desktop-toc {
    display: block;
    position: sticky;
    align-self: start;
    top: calc(var(--topbar-h, 3.5rem) + 2rem);
    max-height: calc(100vh - var(--topbar-h, 3.5rem) - 4rem);
    overflow-y: auto;
  }
}

.desktop-toc__label {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 500;
  margin-bottom: 0.75rem;
  padding-left: 1rem;
}

.desktop-toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

.desktop-toc li { margin-bottom: 0.1rem; }

.desktop-toc a {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 0.5rem 1rem;
  text-decoration: none;
  color: var(--text-muted);
  font-size: 0.92rem;
  transition: color 0.2s;
}

.desktop-toc a:hover { color: var(--ink); }

.desktop-toc a::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 18px;
  background: var(--coral);
  border-radius: 2px;
  opacity: 0;
  transition: opacity 0.2s;
}

.desktop-toc a.is-active::before { opacity: 1; }
.desktop-toc a.is-active { color: var(--ink); }
.desktop-toc a.is-active .num { color: var(--coral); }

.desktop-toc a .num {
  font-family: var(--serif);
  font-size: 0.85rem;
  color: var(--text-faint);
  font-weight: 500;
  min-width: 1.5em;
}

/* ------------------------------------------------------------------
   Intake section structure
   ------------------------------------------------------------------ */

.intake-section {
  margin-bottom: 4.5rem;
}

@media (max-width: 720px) {
  .intake-section { margin-bottom: 3.5rem; }
}

.intake-section__header {
  margin-bottom: 2rem;
  padding-bottom: 1.25rem;
  border-bottom: 0.5px solid var(--rule);
}

.intake-section__eyebrow {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 500;
  margin-bottom: 0.5rem;
}

.intake-section__num {
  font-family: var(--serif);
  font-size: 0.9rem;
  color: var(--coral);
  font-weight: 500;
  letter-spacing: 0.02em;
}

.intake-section__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--step-3);
  letter-spacing: -0.02em;
  margin: 0 0 0.75rem;
  line-height: 1.1;
}

.intake-section__title em {
  font-style: italic;
  color: var(--coral);
  font-weight: 400;
}

.intake-section__intro {
  font-size: var(--step-1-up);
  color: var(--text);
  max-width: 65ch;
  line-height: 1.6;
  margin: 0;
}

/* ------------------------------------------------------------------
   Field — the core repeating pattern
   label -> hint -> example -> input
   ------------------------------------------------------------------ */

.field {
  margin-bottom: 2rem;
}

.field:last-child { margin-bottom: 0; }

.field__label {
  display: block;
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 0.35rem;
  letter-spacing: 0.005em;
}

.field__label em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--coral);
}

.field__required {
  color: var(--coral);
  font-weight: 500;
  font-size: 0.8rem;
  margin-left: 4px;
}

.field__note {
  color: var(--text-muted);
  font-weight: 400;
  font-size: 0.85rem;
  margin-left: 4px;
}

.field__hint {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0 0 0.3rem;
  max-width: 62ch;
}

.field__hint em {
  color: var(--ink-soft);
  font-style: italic;
}

.field__example {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0 0 0.6rem;
  padding: 0.5rem 0.85rem;
  background: var(--bg-alt);
  border-left: 2px solid var(--coral);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  max-width: 62ch;
}

.field__example em {
  color: var(--ink-soft);
  font-weight: 500;
  font-style: normal;
}

.field__sublabel {
  display: block;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-muted);
  margin-top: 0.9rem;
  margin-bottom: 0.35rem;
}

.field__input {
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  padding: 0.7rem 0.9rem;
  width: 100%;
  line-height: 1.5;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.field__input--multiline {
  resize: vertical;
  min-height: 3rem;
  font-family: var(--sans);
}

.field__input::placeholder {
  color: var(--text-faint);
  font-style: italic;
  opacity: 1;
}

.field__input:hover { border-color: var(--text-muted); }

.field__input:focus {
  outline: none;
  border-color: var(--coral);
  box-shadow: 0 0 0 3px rgba(216, 90, 48, 0.12);
}

.field__input:focus-visible { outline: none; }

/* ------------------------------------------------------------------
   Radio and checkbox groups (big card-style options)
   ------------------------------------------------------------------ */

.radio-group,
.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 0.5rem;
}

.radio-option,
.check-option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 0.7rem 0.9rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  font-size: 0.95rem;
  line-height: 1.5;
}

.radio-option:hover,
.check-option:hover {
  border-color: var(--text-muted);
  background: var(--bg);
}

.radio-option input[type="radio"],
.radio-option input[type="checkbox"],
.check-option input[type="checkbox"] {
  margin: 0.2rem 0 0 0;
  accent-color: var(--coral);
  flex-shrink: 0;
  cursor: pointer;
  width: 1rem;
  height: 1rem;
}

.radio-option:has(input:checked),
.check-option:has(input:checked) {
  border-color: var(--coral);
  background: var(--coral-tint);
}

.radio-option__label {
  color: var(--text);
}

.radio-option__label strong {
  color: var(--ink);
  font-weight: 500;
  display: block;
  margin-bottom: 0.15rem;
}

.check-option strong {
  color: var(--ink);
  font-weight: 500;
}

/* Inline radio — compact horizontal row (used in site plan) */
.radio-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  align-items: center;
}

.radio-inline label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
  color: var(--text);
  cursor: pointer;
  padding: 0.2rem 0;
  white-space: nowrap;
}

.radio-inline input[type="radio"] {
  accent-color: var(--coral);
  cursor: pointer;
  margin: 0;
}

/* ------------------------------------------------------------------
   Section plan list (site plan)
   ------------------------------------------------------------------ */

.section-list {
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
  border-top: 0.5px solid var(--rule);
}

.section-row {
  display: grid;
  gap: 0.5rem;
  padding: 1rem 0;
  border-bottom: 0.5px solid var(--rule);
  grid-template-columns: 1fr;
}

@media (min-width: 620px) {
  .section-row {
    grid-template-columns: 1fr auto;
    gap: 1.5rem;
    align-items: center;
  }
}

.section-row__name {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 0.2rem;
}

.section-row__desc {
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.55;
  max-width: 60ch;
}

.section-row--locked {
  background: var(--bg-alt);
  margin-left: calc(var(--gutter) * -1);
  margin-right: calc(var(--gutter) * -1);
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.section-row__choice--locked {
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--coral);
  font-weight: 500;
}

/* ------------------------------------------------------------------
   Priority grid (contact method priority, section 04)
   ------------------------------------------------------------------ */

.priority-row {
  display: grid;
  gap: 0.75rem;
  padding: 1rem 1.1rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  margin-bottom: 0.5rem;
}

@media (min-width: 620px) {
  .priority-row {
    grid-template-columns: 140px 1fr;
    align-items: center;
  }
}

.priority-row__method {
  font-family: var(--sans);
  font-weight: 500;
  color: var(--ink);
  font-size: 1rem;
}

.priority-row__options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
}

.priority-row__options label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
  cursor: pointer;
  color: var(--text);
  padding: 0.2rem 0;
  white-space: nowrap;
}

.priority-row__options input[type="radio"] {
  accent-color: var(--coral);
  cursor: pointer;
  margin: 0;
}

/* ------------------------------------------------------------------
   Asset block (one per asset type in section 05)
   ------------------------------------------------------------------ */

.asset-block {
  padding: 1.5rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  margin-bottom: 1.25rem;
}

.asset-block:last-child { margin-bottom: 0; }

.asset-block__name {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 0.35rem;
  letter-spacing: -0.01em;
}

.asset-block__hint {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0 0 1rem;
  max-width: 62ch;
}

/* ------------------------------------------------------------------
   Sevra recommendations — hints + pick indicators
   Per collaboration pattern "we're adding value, you have control."
   No pre-selection; recommendations are visible hints only.
   ------------------------------------------------------------------ */

/* "We recommend: ..." explanation line near a field */
.field__rec-hint {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0.25rem 0 0.85rem;
  padding: 0.6rem 0.85rem;
  background: var(--coral-tint);
  border-left: 2px solid var(--coral);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  max-width: 62ch;
}

.rec-hint__label {
  font-weight: 500;
  color: var(--coral-dark);
  margin-right: 4px;
}

/* Recommendation indicator — compact, low-chrome, doesn't fight layout.
   Design: a small coral dot + the word "pick" in uppercase micro-type.
   Placed next to a recommended option's label text.

   Why not a pill: the bordered pill variant forced option rows to
   stretch wider, misaligning the priority grid's columns. This flat
   indicator adds ~45px of width instead of ~90px and reads as a quiet
   annotation rather than a competing UI element. */
.priority-row__options label:has(input[data-sevra-rec])::after,
.check-option:has(input[data-sevra-rec])::after,
.radio-inline label:has(input[data-sevra-rec])::after {
  content: '\2022\00a0pick';
  display: inline-block;
  margin-left: 0.4rem;
  color: var(--coral);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  vertical-align: 1px;
  white-space: nowrap;
  opacity: 0.85;
}

/* When the recommended option is selected, swap the dot for a check.
   Purely confirmatory; no behavior change. */
.priority-row__options label:has(input[data-sevra-rec]:checked)::after,
.check-option:has(input[data-sevra-rec]:checked)::after,
.radio-inline label:has(input[data-sevra-rec]:checked)::after {
  content: '\2713\00a0pick';
  opacity: 1;
  font-weight: 600;
}

/* On narrow screens, hide the inline indicator to preserve readability.
   The "We recommend:" hint above each block still conveys the thinking. */
@media (max-width: 480px) {
  .priority-row__options label:has(input[data-sevra-rec])::after,
  .check-option:has(input[data-sevra-rec])::after,
  .radio-inline label:has(input[data-sevra-rec])::after {
    display: none;
  }
}

/* ------------------------------------------------------------------
   Honeypot (hidden anti-spam field)
   ------------------------------------------------------------------ */

.intake-form__honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ------------------------------------------------------------------
   Submit block
   ------------------------------------------------------------------ */

.submit-block {
  margin-top: 2rem;
  padding: 1.75rem;
  background: var(--bg-alt);
  border-radius: var(--radius-lg);
  text-align: center;
}

.submit-block__note {
  font-size: 0.95rem;
  color: var(--text);
  margin: 0 auto 1.25rem;
  max-width: 52ch;
  line-height: 1.55;
}

/* ------------------------------------------------------------------
   Intake footer (lighter-weight than marketing footer)
   ------------------------------------------------------------------ */

.intake-footer {
  padding: 2rem 0 3rem;
  border-top: 0.5px solid var(--rule);
  color: var(--text-muted);
  font-size: 0.85rem;
}

.intake-footer__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
}

/* ===================================================================
   Hub template (/_templates/hub-template/ and /clients/[slug]/)
   Client proposal / project hub. Scoped under body.is-hub where it
   overrides marketing defaults; otherwise hub- prefixed selectors sit
   unscoped since they don't collide with anything else on the site.
   =================================================================== */

/* Hub-specific tokens and scale overrides */
body.is-hub {
  --container: 960px;
  --step-3: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem);
  --step-4: clamp(1.9rem, 1.5rem + 2vw, 3.5rem);
  --preview-bar-h: 2rem;
  --topbar-h: 3.5rem;
  --done-green: #2D5D28;
  overflow-x: hidden;
}

/* When the watermark bar is present, push content down to clear it
   plus the sticky topbar underneath */
body.is-hub.is-watermarked {
  padding-top: calc(var(--preview-bar-h) + var(--topbar-h));
}

/* When the watermark bar is absent — public hub pages like /guides/,
   or client hubs after final payment removes the bar — the topbar
   sits flush with the top edge and body padding accounts only for
   the topbar. Zeroing --preview-bar-h also neutralizes the calc()
   expressions in other rules that offset for the banner. */
body.is-hub:not(.is-watermarked) {
  --preview-bar-h: 0rem;
  padding-top: var(--topbar-h);
}

/* Hub skip-link lands below the watermark bar when focused */
.is-hub .skip-link:focus {
  top: calc(var(--preview-bar-h) + 0.5rem);
}

/* ------------------------------------------------------------------
   Watermark bar — visible during preview, removed after final payment
   ------------------------------------------------------------------ */

.preview-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1001;
  height: var(--preview-bar-h);
  padding: 0 1rem;
  background: var(--ink);
  color: var(--bg);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  border-bottom: 1px solid var(--coral);
  display: flex;
  align-items: center;
  justify-content: center;
}

.preview-bar__full { display: none; }
.preview-bar__short { display: inline; }

@media (min-width: 520px) {
  .preview-bar__full { display: inline; }
  .preview-bar__short { display: none; }
}

/* ------------------------------------------------------------------
   Hub sticky topbar
   ------------------------------------------------------------------ */

.hub-topbar {
  position: fixed;
  top: var(--preview-bar-h);
  left: 0;
  right: 0;
  z-index: 1000;
  height: var(--topbar-h);
  background: rgba(250, 248, 244, 0.92);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--rule);
}

.hub-topbar__inner {
  height: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.5rem;
}

@media (min-width: 960px) {
  .hub-topbar__inner {
    grid-template-columns: auto 1fr;
  }
}

.hub-topbar__brand {
  grid-column: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  font-family: var(--serif);
  font-size: var(--step-1-up);
  font-weight: 500;
  color: var(--ink);
  min-height: 44px;
}

.hub-topbar__brand svg {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.hub-topbar__brand em,
.hub-footer em {
  font-style: italic;
  font-weight: 400;
  color: var(--coral);
}

.hub-topbar__brand-text {
  display: none;
}

@media (min-width: 560px) {
  .hub-topbar__brand-text { display: inline; }
}

.hub-topbar__status {
  grid-column: 2;
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.65rem;
  background: var(--coral-tint);
  color: var(--coral-dark);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  border-radius: var(--radius-md);
  border: 1px solid var(--coral);
  white-space: nowrap;
  max-width: 50vw;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hub-topbar__status::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  background: var(--coral);
  border-radius: 50%;
  flex-shrink: 0;
}

@media (min-width: 560px) {
  .hub-topbar__status {
    font-size: 0.85rem;
    padding: 0.4rem 0.75rem;
  }
}

@media (min-width: 960px) {
  .hub-topbar__status {
    justify-self: end;
    max-width: none;
  }
}

/* Hub-specific nav toggle (bordered 44x44, differs from marketing's) */
.is-hub .nav-toggle {
  grid-column: 3;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  cursor: pointer;
  padding: 0;
}
.is-hub .nav-toggle span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--ink);
  transition: transform 200ms, opacity 200ms;
}
.is-hub .nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(5.5px) rotate(45deg);
}
.is-hub .nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.is-hub .nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-5.5px) rotate(-45deg);
}

@media (min-width: 960px) {
  .is-hub .nav-toggle { display: none; }
}

/* ------------------------------------------------------------------
   Hub mobile TOC — scoped to override intake's mobile-toc behavior
   ------------------------------------------------------------------ */

.is-hub .mobile-toc {
  position: fixed;
  top: calc(var(--preview-bar-h) + var(--topbar-h));
  left: 0;
  right: 0;
  z-index: 999;
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
  box-shadow: 0 12px 24px -12px rgba(0,0,0,0.15);
  max-height: calc(100vh - var(--preview-bar-h) - var(--topbar-h));
  overflow-y: auto;
}

.is-hub .mobile-toc[hidden] { display: none; }

.is-hub .mobile-toc ol {
  list-style: none;
  padding: 0.5rem var(--gutter) 1rem;
  margin: 0;
}

.is-hub .mobile-toc li { margin: 0; border-bottom: 1px solid var(--rule-soft); }
.is-hub .mobile-toc li:last-child { border-bottom: none; }

.is-hub .mobile-toc a {
  display: flex;
  gap: 0.75rem;
  align-items: baseline;
  padding: 0.875rem 0;
  min-height: 48px;
  text-decoration: none;
  color: var(--ink);
  font-size: 0.95rem;
}

.is-hub .mobile-toc a .num {
  font-family: var(--serif);
  font-style: italic;
  color: var(--coral);
  font-size: 0.85rem;
  flex-shrink: 0;
}

@media (min-width: 960px) {
  .is-hub .mobile-toc { display: none; }
}

/* ------------------------------------------------------------------
   Hub intro block
   ------------------------------------------------------------------ */

.hub-intro {
  padding: 2.5rem 0 1.75rem;
  border-bottom: 1px solid var(--rule);
}

@media (min-width: 640px) {
  .hub-intro { padding: 3rem 0 2rem; }
}

.hub-intro__eyebrow {
  display: block;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}

.hub-title {
  font-size: var(--step-4);
  line-height: 1.1;
  margin-bottom: 0.5rem;
  hyphens: auto;
  font-family: var(--serif);
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.02em;
}

.hub-title em { font-style: italic; color: var(--coral); }

.hub-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 1.25rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}

@media (min-width: 640px) {
  .hub-meta {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    font-size: var(--step-1);
    margin-top: 1.5rem;
  }
}

.hub-meta__item strong {
  display: block;
  font-weight: 500;
  color: var(--ink);
  font-size: 0.95rem;
  margin-bottom: 0.15rem;
}

/* ------------------------------------------------------------------
   Hub layout (desktop sidebar TOC + content)
   ------------------------------------------------------------------ */

.hub-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  padding: 2rem 0 4rem;
}

@media (min-width: 960px) {
  .hub-layout {
    grid-template-columns: 200px 1fr;
    gap: 4rem;
    padding: 3rem 0 5rem;
  }
}

/* Hub desktop TOC — scoped to override intake's (different breakpoint + offsets) */
.is-hub .desktop-toc {
  display: none;
  font-size: var(--step-1);
}

@media (min-width: 960px) {
  .is-hub .desktop-toc {
    display: block;
    position: sticky;
    top: calc(var(--preview-bar-h) + var(--topbar-h) + 2rem);
    align-self: start;
    max-height: calc(100vh - var(--preview-bar-h) - var(--topbar-h) - 4rem);
    overflow-y: auto;
  }
}

.is-hub .desktop-toc__label {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  margin-bottom: 1rem;
  padding-left: 0;
}

.is-hub .desktop-toc ol {
  list-style: none;
  padding: 0;
  margin: 0;
}

.is-hub .desktop-toc li { margin-bottom: 0.1rem; }

.is-hub .desktop-toc a {
  position: relative;
  text-decoration: none;
  color: var(--text-muted);
  display: flex;
  gap: 0.75rem;
  align-items: baseline;
  padding: 0.5rem 0 0.5rem 0.75rem;
  min-height: 40px;
  transition: color 200ms;
}
.is-hub .desktop-toc a:hover { color: var(--ink); }

.is-hub .desktop-toc a::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.45rem;
  bottom: 0.45rem;
  /* Reset the generic .desktop-toc a::before rule at line ~2021
     which defines a pill shape (top: 50%; transform: translateY(-50%);
     height: 18px; border-radius: 2px). Without these resets the
     indicator pulls the fixed height + stale transform. */
  transform: none;
  height: auto;
  border-radius: 0;
  width: 2px;
  background: var(--coral);
  opacity: 0;
  transition: opacity 200ms;
}
.is-hub .desktop-toc a.is-active::before { opacity: 1; }
.is-hub .desktop-toc a.is-active { color: var(--ink); }
.is-hub .desktop-toc a.is-active .num { color: var(--coral); }

.is-hub .desktop-toc a .num {
  font-family: var(--serif);
  font-style: italic;
  color: var(--text-faint);
  font-size: 0.85rem;
  flex-shrink: 0;
  transition: color 200ms;
}

/* ------------------------------------------------------------------
   Hub sections — unique class names, no scoping needed
   ------------------------------------------------------------------ */

.hub-section {
  margin-bottom: 3rem;
}

@media (min-width: 640px) {
  .hub-section { margin-bottom: 3.5rem; }
}

.hub-section__header {
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--rule-soft);
  scroll-margin-top: 1rem;
}

.hub-section__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: var(--step-1);
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}

.hub-section__num {
  font-family: var(--serif);
  font-style: italic;
  color: var(--coral);
  font-weight: 500;
}

.hub-section__title {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0;
  font-size: var(--step-3);
}
.hub-section__title em { font-style: italic; font-weight: 400; color: var(--coral); }

.section-intro {
  color: var(--text-muted);
  margin-bottom: 1.25rem;
}

/* ------------------------------------------------------------------
   Field list (Business snapshot, Voice & style, Design intent)
   ------------------------------------------------------------------ */

.field-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.35rem 2rem;
  margin: 0;
}

@media (min-width: 640px) {
  .field-list {
    grid-template-columns: minmax(140px, 0.4fr) 1fr;
    gap: 1.25rem 2rem;
  }
}

.field-list dt {
  font-weight: 500;
  color: var(--ink-soft);
  font-size: 0.88rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 1.25rem;
}

@media (min-width: 640px) {
  .field-list dt {
    font-size: var(--step-1);
    text-transform: none;
    letter-spacing: 0;
    margin-top: 0;
  }
}

.field-list dd {
  margin: 0 0 0.5rem;
  color: var(--text);
  overflow-wrap: break-word;
}

@media (min-width: 640px) {
  .field-list dd { margin-bottom: 0; }
}

.field-hint {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.5;
  font-style: italic;
}
.field-hint em { color: var(--ink-soft); }
.field-hint code {
  font-style: normal;
  font-size: 0.85em;
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  background: var(--bg-alt);
  padding: 0.08em 0.35em;
  border-radius: 3px;
}

/* ------------------------------------------------------------------
   Guide topic — heading + short prose + reference link pattern.
   Full-width alternative to .field-list's two-column grid, for
   pages where each topic needs breathing room and a prominent
   outbound link. Used on /guides/.
   ------------------------------------------------------------------ */

.guide-topic {
  padding: 1.75rem 0;
  border-top: 1px solid var(--rule-soft);
}
.guide-topic:first-of-type {
  border-top: 0;
  padding-top: 0.5rem;
}

.guide-topic__title {
  font-family: var(--serif);
  font-size: var(--step-2);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 0.75rem;
}

.guide-topic__body {
  margin: 0 0 1rem;
  color: var(--text);
  line-height: 1.65;
}
.guide-topic__body:last-child { margin-bottom: 0; }

.guide-topic__ref {
  margin: 0;
  font-size: 0.92rem;
  color: var(--text-muted);
}

/* Bullet lists inside a guide topic — for tip lists like the
   Namecheap checkout gotchas. Comfortable spacing, not shouty. */
.guide-topic ul {
  margin: 0 0 1rem;
  padding-left: 1.25rem;
  color: var(--text);
  line-height: 1.65;
}
.guide-topic li {
  margin-bottom: 0.4rem;
}
.guide-topic li strong {
  color: var(--ink);
  font-weight: 500;
}

/* Inline code in guide content — emails, domain values, product
   names called out in prose. Matches the .field-hint code pattern
   used elsewhere in the hub stylesheet. */
.guide-topic code,
.section-intro code {
  font-style: normal;
  font-size: 0.85em;
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  background: var(--bg-alt);
  padding: 0.08em 0.35em;
  border-radius: 3px;
}

/* Coral link pattern for content-body links — guide reference lines
   and inline links in section intros. Obvious as a link without the
   weight of a full underline. */
.guide-topic__ref a,
.section-intro a {
  color: var(--coral);
  font-weight: 500;
  border-bottom: 1px solid rgba(216, 90, 48, 0.35);
  transition: border-color 150ms ease;
}
.guide-topic__ref a:hover,
.section-intro a:hover,
.guide-topic__ref a:focus-visible,
.section-intro a:focus-visible {
  border-bottom-color: var(--coral);
}

/* Contact priority sub-list (read-only display in hub design intent) */
.priority-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.35rem;
}
.priority-list li {
  display: flex;
  gap: 0.5rem;
  font-size: var(--step-0);
}
.priority-list li strong {
  font-weight: 500;
  color: var(--ink);
  min-width: 110px;
}

/* ------------------------------------------------------------------
   Checklists — assets, timeline
   ------------------------------------------------------------------ */

.checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.5rem;
}

.checklist li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.4rem 0.75rem;
  padding: 0.75rem 0.875rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  align-items: start;
}

.checklist li .status {
  grid-column: 1;
  grid-row: 1;
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-sm);
  min-width: 68px;
  text-align: center;
  white-space: nowrap;
}

.status--done,
.status--received { background: #D8EDD6; color: var(--done-green); }
.status--pending  { background: #FFE8BE; color: #7C5A14; }
.status--na       { background: var(--bg-alt); color: var(--text-muted); }

.checklist li .label {
  grid-column: 2;
  grid-row: 1;
  color: var(--ink);
  overflow-wrap: break-word;
}

.checklist li .note {
  grid-column: 1 / -1;
  grid-row: 2;
  color: var(--text-muted);
  font-size: 0.85rem;
  padding-left: calc(68px + 0.75rem);
  overflow-wrap: break-word;
}
.checklist li .note:empty { display: none; }

@media (min-width: 640px) {
  .checklist li {
    grid-template-columns: auto 1fr auto;
    align-items: baseline;
  }
  .checklist li .note {
    grid-column: 3;
    grid-row: 1;
    padding-left: 0;
    text-align: right;
    white-space: nowrap;
  }
}

.label-hint {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.82rem;
  color: var(--text-muted);
  font-style: italic;
  font-weight: 400;
  line-height: 1.5;
}
.label-hint strong {
  font-style: normal;
  font-weight: 500;
  color: var(--ink-soft);
}
.label-hint code {
  font-style: normal;
  font-size: 0.85em;
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  background: var(--bg-alt);
  padding: 0.08em 0.35em;
  border-radius: 3px;
}

/* Assets checklist variant */
.checklist--assets li {
  grid-template-columns: auto 1fr;
  align-items: start;
}
.checklist--assets li .label {
  grid-column: 2;
  grid-row: 1;
}
.checklist--assets li .note {
  grid-column: 1 / -1;
  grid-row: 2;
  padding-left: calc(68px + 0.75rem);
  text-align: left;
  white-space: normal;
}
@media (min-width: 640px) {
  .checklist--assets li {
    grid-template-columns: auto 1fr auto;
    align-items: start;
  }
  .checklist--assets li .note {
    grid-column: 3;
    grid-row: 1;
    padding-left: 0;
    text-align: right;
    white-space: nowrap;
    align-self: start;
  }
}

.asset-media {
  grid-column: 1 / -1;
  grid-row: 3;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px dashed var(--rule-soft);
  padding-left: calc(68px + 0.75rem);
}
@media (min-width: 640px) {
  .asset-media {
    grid-row: 2;
  }
}

.asset-media--logo img {
  max-width: 180px;
  max-height: 80px;
  height: auto;
  display: block;
}

.asset-media--colors {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.color-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.6rem 0.35rem 0.4rem;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
}
.color-chip::before {
  content: '';
  width: 18px;
  height: 18px;
  background: var(--chip, #ccc);
  border-radius: 3px;
  border: 1px solid var(--rule);
  flex-shrink: 0;
}
.color-chip__hex {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.8rem;
  color: var(--text);
  letter-spacing: 0.02em;
}

.asset-media--social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  font-size: 0.9rem;
}
.asset-media--social a {
  text-decoration: underline;
  text-decoration-color: var(--rule);
}

.asset-media--text blockquote {
  margin: 0;
  padding: 0.75rem 1rem;
  background: var(--bg);
  border-left: 2px solid var(--coral);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-style: italic;
  color: var(--text);
  font-size: 0.9rem;
  line-height: 1.55;
}

/* Timeline variant — target & completed dates */
.checklist--timeline li .dates {
  grid-column: 1 / -1;
  grid-row: 2;
  padding-left: calc(68px + 0.75rem);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

@media (min-width: 640px) {
  .checklist--timeline li .dates {
    grid-column: 3;
    grid-row: 1;
    padding-left: 0;
    text-align: right;
    align-items: flex-end;
  }
}

.date-line {
  font-size: 0.82rem;
  white-space: nowrap;
}

.date-line--completed {
  color: var(--done-green);
  font-weight: 500;
}

.date-line--target {
  color: var(--text-muted);
}

/* ------------------------------------------------------------------
   Site-plan section grid
   ------------------------------------------------------------------ */

.section-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.75rem;
}

.section-card {
  padding: 0.875rem 1rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  font-size: 0.9rem;
  opacity: 0.55;
}

.section-card--in {
  border-color: var(--coral);
  background: var(--coral-tint);
  opacity: 1;
}

.section-card__name {
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 0.25rem;
}

.section-card__placement {
  color: var(--text-muted);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ------------------------------------------------------------------
   Proposal round cards
   ------------------------------------------------------------------ */

.round-card {
  padding: 1.25rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  margin-bottom: 1rem;
}

@media (min-width: 640px) {
  .round-card { padding: 1.5rem; }
}

.round-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}

.round-card__title {
  font-size: var(--step-2);
  font-family: var(--serif);
}

.round-card__meta {
  color: var(--text-muted);
  font-size: var(--step-1);
}

.round-card__variants {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  margin-top: 1rem;
}

@media (min-width: 540px) {
  .round-card__variants {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }
}

.variant-link {
  display: block;
  padding: 1rem;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--ink);
  min-height: 64px;
  transition: border-color 150ms, background 150ms;
}
.variant-link:hover {
  border-color: var(--coral);
  background: var(--coral-tint);
}

.variant-link__name { font-weight: 500; margin-bottom: 0.15rem; }
.variant-link__desc { color: var(--text-muted); font-size: 0.85rem; }

.round-card--empty {
  border-style: dashed;
  text-align: center;
  color: var(--text-muted);
  font-style: italic;
  padding: 1.75rem 1.25rem;
}

/* ------------------------------------------------------------------
   Open questions list
   ------------------------------------------------------------------ */

.question-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.question-list li {
  padding: 0.75rem 0 0.75rem 1.5rem;
  border-bottom: 1px solid var(--rule-soft);
  position: relative;
  overflow-wrap: break-word;
}
.question-list li:last-child { border-bottom: none; }
.question-list li::before {
  content: '?';
  position: absolute;
  left: 0;
  top: 0.75rem;
  font-family: var(--serif);
  font-style: italic;
  color: var(--coral);
  font-weight: 500;
}

/* ------------------------------------------------------------------
   Hub footer
   ------------------------------------------------------------------ */

.hub-footer {
  padding: 1.75rem 0;
  border-top: 1px solid var(--rule);
  color: var(--text-muted);
  font-size: 0.85rem;
}

.hub-footer__inner {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
}