/* ===========================================================================
   alexnegrete.com — design tokens & shared component library
   Source of truth: https://alexnegrete.com/tokens.css
   Voice + motion + accent rules: see DESIGN.md in the repo.

   To use this on another origin (e.g. an intake form on Vercel):
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&family=Inter+Tight:wght@400;500;600&family=JetBrains+Mono:wght@400&display=swap">
     <link rel="stylesheet" href="https://alexnegrete.com/tokens.css">
   =========================================================================== */

/* ---------- Tokens ---------- */
:root {
  --bone: #f4ede1;
  --bone-deep: #ebe2d2;
  --paper: #ebe1cd;
  --ink: #161e36;
  --ink-soft: #3d4663;
  --ink-mute: #6c7591;
  --terracotta: #9a6b3f;
  --clay-soft: #d4a574;
  --divider: rgba(22, 30, 54, 0.12);
  --serif: "Cormorant Garamond", "Garamond", "Times New Roman", serif;
  --sans: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bone);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  position: relative;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.035;
  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'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.nav, main, .footer { position: relative; z-index: 2; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 32px; }

/* ---------- Nav ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(244, 237, 225, 0.92);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--divider);
}
.nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 18px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.brand-name {
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--ink);
}
.brand-sub {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: 4px;
  white-space: nowrap;
}
.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--bone);
  background: var(--ink);
  padding: 10px 18px;
  border-radius: 1px;
  transition: background 0.25s ease;
}
.nav-cta:hover { background: var(--terracotta); }
.nav-cta-arrow { transition: transform 0.25s ease; }
.nav-cta:hover .nav-cta-arrow { transform: translateX(3px); }

/* ---------- Hero ---------- */
.hero {
  padding: 80px 0 24px;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: flex-end;
}
.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin-bottom: 28px;
}
.hero h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(56px, 7.6vw, 104px);
  line-height: 0.96;
  letter-spacing: -0.025em;
  margin: 0 0 28px;
  color: var(--ink);
}
.hero h1 .ital {
  font-style: italic;
  color: var(--terracotta);
}
.hero p {
  font-family: var(--serif);
  font-size: clamp(18px, 1.55vw, 21px);
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 36px;
  max-width: 36ch;
  font-weight: 400;
}
.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: center;
}
.cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--bone);
  background: var(--ink);
  padding: 16px 26px;
  border-radius: 1px;
  transition: background 0.25s ease;
}
.cta:hover { background: var(--terracotta); }
.cta-arrow { transition: transform 0.25s ease; }
.cta:hover .cta-arrow { transform: translateX(4px); }
.cta-meta {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.hero-portrait {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 2px;
  background: var(--bone-deep);
  box-shadow: 0 30px 60px -28px rgba(22, 30, 54, 0.18), 0 8px 20px -12px rgba(22, 30, 54, 0.08);
}
.hero-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.02) saturate(0.95);
}

/* ---------- Visit / Studio ---------- */
.visit {
  padding: 96px 0 112px;
  border-top: 1px solid var(--divider);
}
.visit-grid {
  display: grid;
  grid-template-columns: 1fr 1.55fr;
  grid-template-areas:
    "info    map"
    "details map";
  column-gap: 72px;
  row-gap: 36px;
  align-items: start;
}
.visit-info { grid-area: info; padding-top: 8px; }
.visit-info > :last-child { margin-bottom: 0; }
.visit-map-wrap { grid-area: map; }
.visit-details { grid-area: details; }
.visit-h {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(40px, 4.4vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.022em;
  margin: 0 0 28px;
  color: var(--ink);
}
.visit-h .ital {
  font-style: italic;
  color: var(--terracotta);
}
.visit-lede {
  font-family: var(--serif);
  font-size: clamp(17px, 1.35vw, 19px);
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 0 36px;
  max-width: 38ch;
}
.visit-meta {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin: 0 0 36px;
  padding: 24px 0;
  border-top: 1px solid var(--divider);
  border-bottom: 1px solid var(--divider);
}
.visit-meta-row {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 24px;
  align-items: start;
}
.visit-meta dt {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  padding-top: 4px;
}
.visit-meta dd {
  margin: 0;
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
}
.visit-link {
  color: var(--ink);
  border-bottom: 1px solid var(--divider);
  padding-bottom: 1px;
  transition: border-color 0.25s ease;
}
.visit-link:hover { border-color: var(--terracotta); }
.visit-cta {
  display: inline-block;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--terracotta);
  border-bottom: 1px solid var(--terracotta);
  padding-bottom: 4px;
  transition: opacity 0.25s ease;
}
.visit-cta:hover { opacity: 0.7; }
.visit-map-wrap {
  position: relative;
}
.visit-map {
  display: block;
  width: 100%;
  border-radius: 2px;
  box-shadow: 0 1px 0 var(--divider), 0 18px 40px -18px rgba(22, 30, 54, 0.18);
  filter: saturate(0.7) contrast(0.97);
  transition: filter 0.4s ease;
}
.visit-map-wrap:hover .visit-map { filter: saturate(1) contrast(1); }
.visit-map-caption {
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  text-decoration: none;
  transition: color 0.25s ease;
}
.visit-map-caption:hover { color: var(--terracotta); }
.visit-stars {
  color: var(--terracotta);
  letter-spacing: 0.08em;
  font-size: 13px;
}

/* ---------- Trust strip ---------- */
.trust {
  padding: 56px 0;
}
.trust-inner {
  border-top: 1px solid var(--divider);
  border-bottom: 1px solid var(--divider);
  padding: 32px 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  align-items: center;
}
.trust-cell {
  padding: 0 24px;
  border-left: 1px solid var(--divider);
}
.trust-cell:first-child { border-left: none; padding-left: 0; }
.trust-headline {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin-bottom: 6px;
}
.trust-headline .stars { color: var(--clay-soft); letter-spacing: 0.05em; }
.trust-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* ---------- Stats strip ---------- */
.stats {
  padding: 56px 0;
}
.stats-inner {
  border-top: 1px solid var(--divider);
  border-bottom: 1px solid var(--divider);
  padding: 44px 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  align-items: center;
}
.stat-cell {
  padding: 0 24px;
  border-left: 1px solid var(--divider);
}
.stat-cell:first-child {
  border-left: none;
  padding-left: 0;
}
.stat-number {
  display: block;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(40px, 5.5vw, 64px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 14px;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: 'lnum' 1, 'tnum' 1;
}
.stat-label {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--terracotta);
  line-height: 1.5;
}

/* ---------- Closing line ---------- */
.closing {
  padding: 88px 0 104px;
  text-align: center;
}
.closing-rule {
  width: 60px;
  height: 1px;
  background: var(--terracotta);
  margin: 0 auto 22px;
  opacity: 0.55;
}
.closing-eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 18px;
}
.closing-line {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.4;
  color: var(--ink-soft);
  margin: 0 auto;
  max-width: 32ch;
}

/* ---------- Footer ---------- */
.footer {
  border-top: 1px solid var(--divider);
  background: var(--bone);
  margin-top: 24px;
}
.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 64px 32px 40px;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
  gap: 40px;
  align-items: flex-start;
}
.footer-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-list li + li { margin-top: 6px; }
.footer-list li.footer-list-gap { margin-top: 16px; }
.footer-col-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin-bottom: 12px;
}
.footer-brand {
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-bottom: 12px;
  color: var(--ink);
}
.footer-meta {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.footer-meta + .footer-meta { margin-top: 6px; }
.footer-address,
.footer-hours {
  font-family: var(--serif);
  font-style: normal;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
}
.footer-link {
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink);
  border-bottom: 1px solid var(--divider);
  padding-bottom: 1px;
  transition: border-color 0.25s ease;
}
.footer-link:hover { border-color: var(--terracotta); }
.footer-bottom {
  border-top: 1px solid var(--divider);
}
.footer-bottom-inner {
  display: flex;
  justify-content: space-between;
  padding-top: 36px;
  padding-bottom: 36px;
}
.footer-copy {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* ---------- Fade-in on load ---------- */
.fade {
  opacity: 0;
  transform: translateY(12px);
  animation: fade-up 1s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}
.fade-2 { animation-delay: 0.15s; }
.fade-3 { animation-delay: 0.3s; }
@keyframes fade-up {
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- Mobile (landing layouts) ---------- */
@media (max-width: 860px) {
  .container { padding: 0 22px; }
  .nav-inner { padding: 14px 22px; }
  .nav-cta { padding: 9px 14px; font-size: 12px; }
  .brand-sub { font-size: 8.5px; letter-spacing: 0.14em; }

  .hero { padding: 56px 0 16px; }
  .hero-grid { grid-template-columns: 1fr; gap: 40px; align-items: stretch; }
  .hero h1 { font-size: clamp(46px, 11vw, 64px); }
  .hero p { font-size: 18px; }
  .hero-portrait { order: -1; max-width: 360px; align-self: flex-start; }

  .visit { padding: 64px 0 72px; }
  .visit-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "info"
      "map"
      "details";
    column-gap: 0;
    row-gap: 48px;
  }
  .visit-info { padding-top: 0; }
  .visit-map { height: 420px !important; }
  .visit-h { font-size: clamp(34px, 8vw, 44px); }
  .visit-meta-row {
    grid-template-columns: 88px 1fr;
    gap: 18px;
  }

  .trust { padding: 40px 0; }
  .trust-inner {
    grid-template-columns: 1fr;
    padding: 22px 0;
    row-gap: 22px;
  }
  .trust-cell { padding: 0; border-left: none; }
  .trust-cell + .trust-cell { padding-top: 22px; border-top: 1px solid var(--divider); }

  .stats { padding: 40px 0; }
  .stats-inner {
    grid-template-columns: 1fr 1fr;
    padding: 28px 0;
    row-gap: 28px;
  }
  .stat-cell {
    padding: 0 0 0 18px;
  }
  .stat-cell:nth-child(odd) {
    border-left: none;
    padding-left: 0;
  }

  .closing { padding: 56px 0 64px; }

  .footer-inner {
    grid-template-columns: 1fr 1fr;
    padding: 44px 22px 28px;
    gap: 32px;
  }
  .footer-bottom-inner {
    flex-direction: column;
    gap: 12px;
    padding-top: 32px;
    padding-bottom: 32px;
  }
}

/* ===========================================================================
   Form components — for intake / quiz / assessment / progress update
   Designed to feel slow and considered, not transactional.
   These classes don't appear on the live landing page yet, but inherit the
   same tokens so the intake form reads as a continuation of the site.
   =========================================================================== */

/* Generous vertical rhythm — let questions breathe. */
.form-section { padding: 72px 0; }
.form-stack > * + * { margin-top: 36px; }

/* Field grouping */
.field { display: block; }
.field + .field { margin-top: 28px; }

/* Label above the input — mono eyebrow style */
.field-label {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 14px;
}
.field-help {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin-top: 8px;
}

/* Inputs — subtle 1px box border that picks up terracotta on focus.
   The earlier underline-only treatment was too quiet (QA: "doesn't look
   interactive"). Full 1px border in --divider gives clear affordance
   while staying restrained; on focus the border darkens to terracotta
   and a soft 3px outer glow appears for stronger feedback. */
.field-input,
.field-textarea {
  width: 100%;
  background: transparent;
  border: 1px solid var(--divider);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.5;
  padding: 12px 14px;
  outline: none;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}
.field-input::placeholder,
.field-textarea::placeholder {
  color: var(--ink-mute);
  font-style: italic;
  opacity: 0.7;
}
.field-input:focus,
.field-textarea:focus {
  border-color: var(--terracotta);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--terracotta) 15%, transparent);
}
.field-input[aria-invalid="true"],
.field-textarea[aria-invalid="true"] {
  border-color: color-mix(in srgb, var(--terracotta) 60%, transparent);
}
.field-input[aria-invalid="true"]:focus,
.field-textarea[aria-invalid="true"]:focus {
  border-color: var(--terracotta);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--terracotta) 22%, transparent);
}
.field-textarea {
  min-height: 140px;
  resize: vertical;
  line-height: 1.6;
  font-family: var(--serif);
  font-size: 18px;
}

/* Radio / single-select chips — pill rather than circle radio */
.field-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.field-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border: 1px solid var(--divider);
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--ink);
  background: transparent;
  cursor: pointer;
  transition: border-color 0.25s ease, background 0.25s ease, color 0.25s ease;
}
.field-chip:hover { border-color: var(--ink); }
.field-chip[aria-pressed="true"],
.field-chip.is-selected {
  background: var(--ink);
  color: var(--bone);
  border-color: var(--ink);
}

/* Rating row — for 1–5 / 1–10 scales. Numbered, ink fills on selection. */
.field-scale {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 6px;
  max-width: 520px;
}
.field-scale-cell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--divider);
  border-radius: 1px;
  padding: 12px 0;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.field-scale-cell:hover { border-color: var(--ink); }
.field-scale-cell[aria-pressed="true"],
.field-scale-cell.is-selected {
  background: var(--ink);
  color: var(--bone);
  border-color: var(--ink);
}
.field-scale-meta {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  max-width: 520px;
}

/* Validation — gentle, italic, terracotta. Never red. */
.field-error {
  display: block;
  margin-top: 10px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  line-height: 1.5;
  color: var(--terracotta);
}

/* Quiet meta line for "Your responses are saved." */
.field-meta {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* Step navigation — used between multi-step intake screens */
.step-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 56px;
  gap: 24px;
}
.step-back {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: color 0.25s ease;
}
.step-back:hover { color: var(--ink); }

/* Progress indicator — a thin terracotta rule that fills, not a bar with %. */
.progress {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.progress-track {
  flex: 1;
  height: 1px;
  background: var(--divider);
  position: relative;
  overflow: hidden;
}
.progress-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--terracotta);
  transform-origin: left center;
  transition: width 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Focus ring — accessibility floor across all interactives. */
:where(a, button, [role="button"], input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 3px;
  border-radius: 1px;
}

/* Small utility for the italic terracotta accent gesture used outside .ital */
.italic-accent {
  font-family: var(--serif);
  font-style: italic;
  color: var(--terracotta);
}

/* Secondary inline CTA — quiet by default, underline reveals on hover.
   Use under a primary .cta button when you want a clear secondary path
   without competing visually. Distinct from .visit-cta (which keeps a
   permanent underline) — choose .cta-secondary for general use. */
.cta-secondary {
  display: inline-block;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--terracotta);
  border-bottom: 1px solid transparent;
  padding-top: 4px;
  padding-bottom: 4px;
  transition: border-color 0.25s ease;
}
.cta-secondary:hover { border-bottom-color: var(--terracotta); }