/* ===========================================================================
   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);
}

/* ---------- 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 1.1fr;
  gap: 40px;
  align-items: flex-start;
}
.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); }

  .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 — no boxes; an underline rule that picks up terracotta on focus.
   This matches the .visit-link / .footer-link border-bottom motif. */
.field-input,
.field-textarea {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--divider);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.5;
  padding: 12px 0;
  outline: none;
  transition: border-color 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-bottom-color: var(--terracotta); }
.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); }