/* =============================================================
   Ikigai Creative — Design System v1.0
   A brand is a promise your customers feel.

   Single, reusable stylesheet shared by every intake form.
   Tokens are locked one-to-one to DESIGN-SYSTEM.md section 8.
   Both /discovery (Form 1) and the future /intake (Form 3) load
   this file. Page-specific CSS should stay thin; anything that
   could be reused belongs here.
   ============================================================= */

/* ---------- 1. Tokens ------------------------------------------------ */
:root{
  /* Core brand */
  --oxford:#003A5C;
  --teal:#1C6B6B;
  --teal-mid:#5CC2C3;
  --teal-light:#A3DBE2;
  --teal-wash:#E7F3F3;
  --terra:#D76B42;
  --terra-deep:#C55C3B;
  --terra-salmon:#F18D79;
  --terra-wash:#FBEEE8;
  --sun:#F5B82E;
  --sun-wash:#FDF4DC;
  --sand:#F4F1EB;
  --charcoal:#2E2E2E;

  /* Functional */
  --ink:#2E2E2E;
  --muted:#6E6A63;
  --line:#E4DED2;
  --surface:#FFFFFF;

  /* Type families (licensed faces first, web fallbacks after) */
  --font-display:"Avenir Next Rounded","Avenir Next",Nunito,ui-rounded,system-ui,sans-serif;
  --font-body:"Inter",system-ui,-apple-system,sans-serif;
  --font-word:"Omnes SemiCond","Avenir Next",Nunito,sans-serif;

  /* Type scale (size / line-height / weight) */
  --fs-display-xl:56px; --lh-display-xl:1.05;
  --fs-display:40px;    --lh-display:1.10;
  --fs-h1:32px;         --lh-h1:1.15;
  --fs-h2:24px;         --lh-h2:1.20;
  --fs-h3:20px;         --lh-h3:1.30;
  --fs-body:17px;       --lh-body:1.60;
  --fs-small:15px;      --lh-small:1.50;
  --fs-caption:12px;    --lh-caption:1.40;

  /* Spacing — 4px base */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px;

  /* Shape */
  --radius-sm:8px; --radius:14px; --radius-lg:24px; --radius-pill:999px;
  --shadow-sm:0 1px 2px rgba(0,58,92,.05);
  --shadow:0 1px 2px rgba(0,58,92,.04), 0 10px 30px rgba(0,58,92,.07);

  /* Focus ring — soft teal, used by every interactive control */
  --focus-ring:0 0 0 4px rgba(28,107,107,.16);
}

/* ---------- 2. Reset + base ----------------------------------------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;}
/* The browser's UA stylesheet hides [hidden] at the lowest cascade
   priority. Any component class that sets its own `display` (.btn,
   .stepper-section, etc.) wins that tie and silently un-hides the
   element. Forcing it here, once, means hidden always means hidden
   regardless of what any current or future class declares. */
[hidden]{display:none !important;}
body{
  margin:0;
  background:var(--sand);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;height:auto;display:block;}
a{color:var(--teal);text-underline-offset:3px;text-decoration-thickness:1px;}
a:hover{color:var(--terra-deep);}
::selection{background:var(--teal-wash);color:var(--oxford);}

/* ---------- 3. Typography ------------------------------------------- */
.display-xl,.display,.h1,.h2,.h3{
  font-family:var(--font-display);
  color:var(--oxford);
  margin:0;
  letter-spacing:-0.01em;
}
.display-xl{font-size:var(--fs-display-xl);line-height:var(--lh-display-xl);font-weight:700;}
.display{font-size:var(--fs-display);line-height:var(--lh-display);font-weight:700;}
.h1{font-size:var(--fs-h1);line-height:var(--lh-h1);font-weight:700;}
.h2{font-size:var(--fs-h2);line-height:var(--lh-h2);font-weight:600;}
.h3{font-size:var(--fs-h3);line-height:var(--lh-h3);font-weight:600;}

.body{font-size:var(--fs-body);line-height:var(--lh-body);}
.small{font-size:var(--fs-small);line-height:var(--lh-small);}
.muted{color:var(--muted);}

/* Terracotta uppercase kicker — labels a card or a page */
.kicker{
  font-family:var(--font-body);
  font-size:var(--fs-caption);
  line-height:var(--lh-caption);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--terra);
  margin:0;
}

/* ---------- 4. Layout helpers --------------------------------------- */
.page{
  min-height:100dvh;
  display:flex;
  flex-direction:column;
}
.container{
  width:100%;
  max-width:680px;
  margin-inline:auto;
  padding-inline:var(--space-5);
}
.stack > * + *{margin-top:var(--space-4);}

/* Site chrome: identical header, main column, and footer across every
   form. Top padding on .site-main gives each page's opening the air of
   a book's title page. */
.site-header{padding-top:var(--space-6);padding-bottom:var(--space-6);}
.site-header__mark{display:inline-block;}
.site-header__mark img{height:44px;width:auto;}

.site-main{flex:1 1 auto;padding-top:var(--space-6);padding-bottom:var(--space-9);}

.site-footer{
  padding-top:var(--space-6);
  padding-bottom:var(--space-8);
  border-top:1px solid var(--line);
}
.site-footer__promise{margin:0;letter-spacing:.01em;}

@media (min-width:720px){
  .site-header{padding-top:var(--space-8);}
  .site-main{padding-top:var(--space-8);padding-bottom:var(--space-9);}
}

/* Opening copy block: a page's own "title page" framing. Shared by
   /discovery's single intro and /brand-intake's section-1 intro.
   The headline carries its own measure so it breaks deliberately; the
   lede must NOT inherit that measure, or it gets squeezed to the
   headline's width. */
.intro{margin-bottom:var(--space-8);}
.intro__headline{
  color:var(--teal);          /* Deep Teal leads: headlines, quietly */
  max-width:12ch;             /* forces the two-line break */
  margin-top:var(--space-3);
  margin-bottom:var(--space-4);
}
.intro__lede{
  color:var(--ink);
  max-width:58ch;             /* comfortable reading measure */
}
@media (min-width:720px){
  .intro{margin-bottom:var(--space-9);}
}

/* Skip link for keyboard users */
.skip-link{
  position:absolute;left:var(--space-4);top:-64px;
  background:var(--surface);color:var(--teal);
  padding:var(--space-2) var(--space-4);
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow);
  transition:top .16s ease;z-index:10;
  font-weight:600;font-size:var(--fs-small);
}
.skip-link:focus{top:var(--space-4);}

/* ---------- 5. Form field (shared by text input + textarea) --------- */
.field{display:flex;flex-direction:column;gap:var(--space-2);}

.field__label{
  font-family:var(--font-body);
  font-size:var(--fs-body);
  font-weight:600;
  color:var(--ink);
  line-height:1.35;
}

/* Question variant. Both intake forms ask real questions rather than naming
   fields ("Name three to five brands you admire, and tell me why"), so the
   label is set in the display face at H3 scale: the page reads as someone
   asking, not as a form collecting. Plain .field__label stays available for
   short, utilitarian fields. */
.field__label--question{
  font-family:var(--font-display);
  font-size:var(--fs-h3);
  line-height:var(--lh-h3);
  font-weight:600;
  color:var(--oxford);
  letter-spacing:-.005em;
}

/* Optional-by-design: a quiet cue, never a red asterisk */
.field__optional{
  font-weight:400;
  font-size:var(--fs-small);
  color:var(--muted);
  margin-left:var(--space-2);
}

.field__help{
  font-size:var(--fs-small);
  line-height:var(--lh-small);
  color:var(--muted);
  margin:0;
  max-width:60ch;
}

.input,.textarea{
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:1.5;
  color:var(--ink);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:var(--space-3) var(--space-4);
  width:100%;
  transition:border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
  -webkit-appearance:none;appearance:none;
}
.input::placeholder,.textarea::placeholder{color:#A7A197;}
.input:hover,.textarea:hover{border-color:#D6CFBF;}
.input:focus,.textarea:focus{
  outline:none;
  border-color:var(--teal);
  box-shadow:var(--focus-ring);
}
.textarea{min-height:132px;resize:vertical;}

/* ---------- 6. Choice controls -------------------------------------- */
/* Shared fieldset frame for checkbox / radio / toggle groups */
.choice-group{border:0;margin:0;padding:0;}
.choice-group__legend{
  font-family:var(--font-body);
  font-size:var(--fs-body);
  font-weight:600;
  color:var(--ink);
  line-height:1.35;
  padding:0;margin:0;
}

/* Question variant, mirrors .field__label--question for fieldsets
   (checkbox / radio / toggle groups) that are themselves phrased as
   questions rather than field names. */
.choice-group__legend--question{
  font-family:var(--font-display);
  font-size:var(--fs-h3);
  line-height:var(--lh-h3);
  font-weight:600;
  color:var(--oxford);
  letter-spacing:-.005em;
}
.choice-group__help{
  font-size:var(--fs-small);
  color:var(--muted);
  margin:var(--space-2) 0 0;
}
.choice-list{
  list-style:none;margin:var(--space-3) 0 0;padding:0;
  display:flex;flex-direction:column;gap:var(--space-2);
}

/* 6a. Checkbox group + radio group — same soft "option row" chrome */
.option{
  display:flex;align-items:center;gap:var(--space-3);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:var(--space-3) var(--space-4);
  cursor:pointer;
  transition:border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
  font-size:var(--fs-body);
}
.option:hover{border-color:var(--teal-light);}
.option:has(input:focus-visible){box-shadow:var(--focus-ring);border-color:var(--teal);}
.option:has(input:checked){
  border-color:var(--teal);
  background:var(--teal-wash);
}
.option input{
  -webkit-appearance:none;appearance:none;margin:0;
  width:22px;height:22px;flex:0 0 auto;
  border:1.5px solid #C7BFAF;background:var(--surface);
  display:grid;place-content:center;cursor:pointer;
  transition:border-color .16s ease, background-color .16s ease;
}
.option input[type="checkbox"]{border-radius:var(--radius-sm);}
.option input[type="radio"]{border-radius:var(--radius-pill);}
.option input:checked{background:var(--teal);border-color:var(--teal);}
.option input[type="checkbox"]::after{
  content:"";width:11px;height:6px;
  border-left:2px solid #fff;border-bottom:2px solid #fff;
  transform:rotate(-45deg) translateY(-1px);
  opacity:0;transition:opacity .12s ease;
}
.option input[type="checkbox"]:checked::after{opacity:1;}
.option input[type="radio"]::after{
  content:"";width:9px;height:9px;border-radius:50%;
  background:#fff;opacity:0;transition:opacity .12s ease;
}
.option input[type="radio"]:checked::after{opacity:1;}
.option__text{color:var(--ink);}

/* Optional visual example inside an option row (e.g. logo-style
   examples). A small white swatch between the control and its label,
   framed with a hairline so black-on-white art reads against both the
   white row and the teal-wash checked state. Decorative: the text label
   is the actual choice, so these images carry alt="". */
.option--visual{align-items:center;}
.option__thumb{
  width:64px;height:64px;flex:0 0 auto;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:#fff;
  object-fit:contain;
}

/* 6b. A/B toggle row — pick a side on each pair */
.toggle-row{
  display:flex;align-items:stretch;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-pill);
  padding:var(--space-1);
  gap:var(--space-1);
}
.toggle-row__option{flex:1 1 0;position:relative;}
.toggle-row__option input{
  position:absolute;opacity:0;inset:0;width:100%;height:100%;
  margin:0;cursor:pointer;
}
.toggle-row__option label{
  display:block;text-align:center;
  padding:var(--space-3) var(--space-4);
  border-radius:var(--radius-pill);
  font-weight:600;color:var(--muted);
  cursor:pointer;
  transition:background-color .16s ease, color .16s ease;
}
.toggle-row__option input:checked + label{
  background:var(--teal);color:#fff;
}
.toggle-row__option input:focus-visible + label{box-shadow:var(--focus-ring);}
.toggle-row__option:hover input:not(:checked) + label{color:var(--teal);}
/* A labelled A/B pair: caption on the left, toggle on the right */
.ab-pair{
  display:flex;flex-direction:column;gap:var(--space-2);
}
@media (min-width:560px){
  .ab-pair{flex-direction:row;align-items:center;justify-content:space-between;gap:var(--space-4);}
  .ab-pair .toggle-row{min-width:280px;}
}
/* Binds an A/B pair to a supporting figure directly beneath it, so the
   two read as one unit rather than the image floating between rows. The
   tighter inner gap keeps the visual tied to its own question. */
.ab-pair-group{display:flex;flex-direction:column;gap:var(--space-3);}

/* ---------- 6c. Figure (supporting visual) --------------------------- */
/* A framed reference image with an optional caption. Used to show the
   form-taker a concrete example next to a question. */
.figure{margin:0;}
.figure__img{
  display:block;width:100%;height:auto;
  border:1px solid var(--line);
  border-radius:var(--radius);
}
.figure__caption{
  font-size:var(--fs-small);
  line-height:var(--lh-small);
  color:var(--muted);
  margin:var(--space-2) 0 0;
}

/* ---------- 7. Progress indicator ----------------------------------- */
/* Segmented bar for multi-section forms (Form 3). Single-screen
   forms like /discovery do not render it. */
.progress{display:flex;flex-direction:column;gap:var(--space-2);}
.progress__meta{
  display:flex;justify-content:space-between;align-items:baseline;
  font-size:var(--fs-small);color:var(--muted);
}
.progress__meta strong{color:var(--teal);font-weight:600;}
.progress__track{
  display:flex;gap:var(--space-1);
}
.progress__seg{
  flex:1 1 0;height:6px;border-radius:var(--radius-pill);
  background:var(--line);
  transition:background-color .2s ease;
}
.progress__seg--done{background:var(--teal);}
.progress__seg--current{background:var(--teal-mid);}

/* ---------- 8. Buttons ---------------------------------------------- */
.btn{
  font-family:var(--font-display);
  font-weight:700;
  font-size:var(--fs-body);
  line-height:1;
  border-radius:var(--radius-pill);
  padding:var(--space-4) var(--space-6);
  border:2px solid transparent;
  cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  transition:transform .12s ease, background-color .16s ease, box-shadow .16s ease, border-color .16s ease, color .16s ease;
  text-decoration:none;
}
.btn:focus-visible{outline:none;box-shadow:var(--focus-ring);}
.btn:active{transform:translateY(1px);}

.btn--primary{background:var(--teal);color:#fff;}
.btn--primary:hover{background:#175a5a;color:#fff;box-shadow:var(--shadow);}

.btn--secondary{background:var(--terra);color:#fff;}
.btn--secondary:hover{background:var(--terra-deep);color:#fff;box-shadow:var(--shadow);}

.btn--ghost{background:transparent;color:var(--teal);border-color:var(--teal);}
.btn--ghost:hover{background:var(--teal-wash);}

.btn--sun{background:var(--sun);color:var(--charcoal);}
.btn--sun:hover{background:#e5a91f;}

.btn--full{width:100%;}

/* ---------- 9. Card ------------------------------------------------- */
.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
  padding:var(--space-6);
}

/* ---------- 10. Motion preference ----------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    transition-duration:.001ms !important;
    animation-duration:.001ms !important;
  }
}

/* ---------- 11. Type scale — fluid step-up on larger viewports ------ */
@media (min-width:720px){
  :root{
    --fs-display:48px;
    --fs-h1:36px;
  }
}

/* ---------- 12. Paced / multi-step form chrome ----------------------
   Generic stepper structure for any long form that shows one section
   at a time (Form 3 today, whatever comes next). Pairs with the
   .progress component above for the segmented bar itself. */
.stepper-section{
  border:0;margin:0;padding:0;min-width:0; /* reset fieldset UA defaults */
  display:flex;flex-direction:column;gap:var(--space-7);
}
.stepper-section__eyebrow{
  font-size:var(--fs-small);color:var(--muted);margin:0 0 var(--space-2);
}
.stepper-section__eyebrow strong{color:var(--teal);font-weight:600;}
.stepper-section__title{margin:0 0 var(--space-6);}

.stepper-nav{
  position:sticky;bottom:0;
  display:flex;flex-direction:column;gap:var(--space-3);
  background:var(--sand);
  border-top:1px solid var(--line);
  padding:var(--space-4) 0;
  margin-top:var(--space-7);
}
.stepper-nav__buttons{display:flex;align-items:center;gap:var(--space-4);}
.stepper-nav__forward{margin-left:auto;}

/* ---------- 13. Thank-you screen --------------------------------------
   Replaces a form on successful submission. Unlike the punchy opening
   headlines, a thank-you headline is a full sentence and varies in
   length between the two forms, so it wraps naturally at the
   container's own measure rather than fighting a fixed ch constraint. */
.thank-you__headline{
  color:var(--teal);
  margin-top:var(--space-3);
  margin-bottom:var(--space-4);
}
.thank-you__body{
  color:var(--ink);
  max-width:58ch;
  margin-bottom:var(--space-4);
}
.thank-you__sign{margin-top:var(--space-6);}

/* ---------- 14. Submission status (error) card -------------------------
   Calm, not alarming: terracotta wash rather than red, matching the
   brand's "premium means restraint" tone even when something goes wrong.
   Success needs no card of its own — it swaps the form for .thank-you. */
.form-status{
  background:var(--terra-wash);
  border:1px solid var(--terra-salmon);
  border-radius:var(--radius);
  padding:var(--space-4);
  color:var(--charcoal);
  font-size:var(--fs-small);
  line-height:var(--lh-small);
}
.form-status p{margin:0;}
.form-status a{color:var(--terra-deep);font-weight:600;}
.form-status__actions{
  margin-top:var(--space-3);
  display:flex;flex-wrap:wrap;gap:var(--space-4);
}
.form-status__copy-btn{
  background:none;border:none;padding:0;
  color:var(--terra-deep);font-weight:600;
  font-size:var(--fs-small);font-family:inherit;
  text-decoration:underline;text-underline-offset:2px;cursor:pointer;
}
.form-status__copy-btn:focus-visible{
  outline:none;box-shadow:var(--focus-ring);border-radius:var(--radius-sm);
}

/* ---------- 15. Shared reveal keyframe --------------------------------
   Used by /discovery's page-load stagger and by the stepper section
   reveal below. Defined once here so any page can reference it by name
   without redeclaring it. */
@keyframes settle{
  from{opacity:0;transform:translateY(10px);}
  to{opacity:1;transform:none;}
}

/* A section's direct children settle in, staggered, every time that
   section becomes visible. This is not extra JS: toggling the native
   [hidden] attribute flips display:none <-> default, which restarts a
   CSS animation on its own, so each arrival (forward or back) gets one
   quiet acknowledgement without any animation bookkeeping in JS. */
@media (prefers-reduced-motion:no-preference){
  .stepper-section > *{
    animation:settle .5s cubic-bezier(.22,.61,.36,1) backwards;
  }
  .stepper-section > *:nth-child(1){animation-delay:.02s;}
  .stepper-section > *:nth-child(2){animation-delay:.09s;}
  .stepper-section > *:nth-child(3){animation-delay:.16s;}
  .stepper-section > *:nth-child(4){animation-delay:.23s;}
  .stepper-section > *:nth-child(5){animation-delay:.30s;}
  .stepper-section > *:nth-child(6){animation-delay:.37s;}
  .stepper-section > *:nth-child(7){animation-delay:.44s;}
  .stepper-section > *:nth-child(8){animation-delay:.51s;}
}