/* ============ Dezenyo "Get your free concept" discovery intake ============
   Sample A direction (warm editorial calm). Focused, distraction-free page:
   its own minimal chrome, NOT the marketing nav / footer-reveal. Multi-step
   Typeform flow with progressive enhancement -- without JS it is a plain
   stacked form that posts to the handler.
   Tokens mirror 02-marketing/site/_proto/proto.css :root -- keep in sync. */

*, *::before, *::after { box-sizing:border-box; }
figure, blockquote, dl, fieldset, menu { margin:0; }
html, body { margin:0; }

/* Self-hosted Fraunces + metric-matched fallback (mirrors proto.css -- keep in sync). */
@font-face{ font-family:"Fraunces fallback"; src:local("Georgia"),local("Times New Roman"),local("Times"); size-adjust:86.5%; }
@font-face{ font-family:"Fraunces"; font-style:normal; font-weight:300 900; font-display:swap; src:url("fonts/fraunces-latin-roman.woff2") format("woff2"); }
@font-face{ font-family:"Fraunces"; font-style:italic; font-weight:300 900; font-display:swap; src:url("fonts/fraunces-latin-italic.woff2") format("woff2"); }

:root{
  --paper:#FAF6EE;
  --paper-2:#F2EBDD;
  --bloom-paper:#FFFCF6;
  --ink:#1F1916;
  --ink-soft:#6B6157;
  --espresso:#160F0B;
  --oxblood:#8A2A22;
  --oxblood-deep:#5E1A16;
  --honey:#D9A85C;
  --rule-ink:rgba(31,25,22,.14);
  --display:"Fraunces", "Fraunces fallback", Georgia, serif;
  --body:"Instrument Sans", system-ui, sans-serif;
  --mono:"JetBrains Mono", ui-monospace, monospace;
  --hit:48px;
  --ease:cubic-bezier(.2,.8,.2,1);
}

html{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
body{
  font-family:var(--body); color:var(--ink); line-height:1.5;
  min-height:100vh; display:flex; flex-direction:column;
  background:
    radial-gradient(120% 70% at 50% -8%, rgba(217,168,92,.16), transparent 58%),
    var(--paper);
}
h1,h2,h3{ font-family:var(--display); font-weight:340; line-height:1.02; letter-spacing:-.015em; margin:0; font-optical-sizing:auto; }
em{ font-style:italic; color:var(--oxblood); }
a{ color:inherit; }
.vh{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

.mono{ font-family:var(--mono); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; font-weight:400; }

/* ---------- shared controls ---------- */
.pill{
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--mono); font-size:.74rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--paper); background:var(--oxblood);
  padding:.95rem 1.7rem; border:0; border-radius:999px; min-height:var(--hit); cursor:pointer;
  transition:background .3s var(--ease), transform .3s var(--ease);
}
.pill:hover{ background:var(--oxblood-deep); transform:translateY(-2px); }
.pill[disabled]{ opacity:.6; cursor:default; transform:none; }
.pill .arr{ width:.5rem; height:.5rem; border-top:1.6px solid currentColor; border-right:1.6px solid currentColor; transform:rotate(45deg); }
.ghost{
  display:inline-flex; align-items:center; gap:.45rem;
  font-family:var(--mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  background:none; border:0; padding:.6rem .2rem; min-height:var(--hit); color:var(--ink); cursor:pointer; opacity:.7;
  transition:opacity .3s;
}
.ghost:hover{ opacity:1; }
:where(a,button,input,textarea):focus-visible{ outline:2px solid var(--oxblood); outline-offset:3px; border-radius:3px; }

/* ---------- top bar ---------- */
.fc-top{
  display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem clamp(1.25rem,5vw,3rem); flex:0 0 auto;
}
.fc-mark{ font-family:var(--display); font-size:1.4rem; font-weight:500; letter-spacing:-.02em; text-decoration:none; }
.fc-mark span{ color:var(--oxblood); }
.fc-exit{ font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); text-decoration:none; transition:color .3s; }
.fc-exit:hover{ color:var(--ink); }

/* ---------- progress (JS only, on question steps only) ---------- */
.fc-progress{ flex:0 0 auto; padding:0 clamp(1.25rem,5vw,3rem); display:none; }
.fc-progress.is-visible{ display:block; }
.fc-progress__track{ height:3px; background:var(--rule-ink); border-radius:999px; overflow:hidden; }
.fc-progress__bar{ display:block; height:100%; width:0; background:var(--oxblood); border-radius:999px; transition:width .45s var(--ease); }
.fc-progress__meta{ display:flex; justify-content:space-between; align-items:center; margin-top:.7rem; color:var(--ink-soft); }

/* ---------- the flow ---------- */
.fc{ flex:1 1 auto; display:flex; }
.fc-form{ width:100%; max-width:760px; margin-inline:auto; padding:clamp(1.5rem,5vw,3rem) clamp(1.25rem,5vw,3rem) clamp(2.5rem,7vw,4.5rem); display:flex; align-items:center; }
.fc-step{ width:100%; max-width:42rem; }
.fc-eyebrow{ color:var(--oxblood); }
.fc-q{ font-size:clamp(1.7rem,4.6vw,2.7rem); color:var(--ink); max-width:20ch; margin:.9rem 0 0; }
.fc-help{ color:var(--ink-soft); font-size:1rem; line-height:1.55; margin:.95rem 0 0; max-width:46ch; }

/* fields: Sample A underline style */
.fc-field{ margin-top:1.7rem; }
.fc-field[hidden]{ display:none; }
/* the conditional "what is the link?" label reads as help text, no top gap above the input */
#fcWebsiteField .fc-help{ margin-top:0; }
.fc-field input, .fc-field textarea{
  width:100%; background:none; border:0; border-bottom:1.5px solid var(--ink); color:var(--ink);
  font-family:var(--body); font-size:clamp(1.1rem,2.2vw,1.5rem); padding:.55rem 0; outline:none;
  transition:border-color .3s;
}
.fc-field textarea{ resize:none; line-height:1.4; min-height:3.4em; }
.fc-field input::placeholder, .fc-field textarea::placeholder{ color:var(--ink-soft); opacity:.5; }
.fc-field input:focus, .fc-field textarea:focus{ border-color:var(--oxblood); }
.fc-field--label{ display:block; }
.fc-flabel{ font-family:var(--mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); display:block; margin-bottom:.1rem; }

/* paired contact fields */
.fc-pair{ display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; margin-top:1.7rem; }
.fc-pair .fc-field{ margin-top:0; }
@media (max-width:560px){ .fc-pair{ grid-template-columns:1fr; gap:1.3rem; } }

/* invalid + error */
.fc-field.has-error input, .fc-field.has-error textarea{ border-color:var(--oxblood); }
.fc-err{ color:var(--oxblood); font-size:.85rem; margin-top:.7rem; min-height:1.1em; }
.fc-err:empty{ display:none; }

/* choices (own website?) */
.fc-choices{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.7rem; }
.fc-choice{ position:relative; }
.fc-choice input{ position:absolute; opacity:0; width:1px; height:1px; }
.fc-choice span{
  display:inline-flex; align-items:center; min-height:var(--hit); padding:.85rem 1.6rem;
  border:1.5px solid var(--rule-ink); border-radius:999px; cursor:pointer; font-size:1.05rem;
  transition:border-color .25s, background .25s, color .25s;
}
.fc-choice:hover span{ border-color:var(--oxblood); }
.fc-choice input:checked + span{ background:var(--oxblood); border-color:var(--oxblood); color:var(--paper); }
.fc-choice input:focus-visible + span{ outline:2px solid var(--oxblood); outline-offset:3px; }

/* controls */
.fc-controls{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:2rem; }
.fc-controls__right{ display:flex; align-items:center; gap:1rem; }
.fc-hint{ font-family:var(--mono); font-size:.58rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); opacity:.7; }
@media (max-width:560px){ .fc-hint{ display:none; } }

/* welcome */
.fc-step--welcome .fc-q{ font-size:clamp(2.1rem,5.4vw,3.3rem); max-width:16ch; }
.fc-sub{ color:var(--ink-soft); font-size:clamp(1rem,1.4vw,1.15rem); line-height:1.55; margin:1.2rem 0 0; max-width:44ch; }
.fc-welcome__cta{ display:flex; align-items:center; gap:1.1rem; margin-top:2rem; flex-wrap:wrap; }
.fc-note{ color:var(--ink-soft); }

/* booking */
.fc-step--booking .fc-q{ max-width:22ch; }
.fc-cal{ margin-top:1.8rem; }
/* the real Calendly inline widget mounts here -- clean, no dashed chrome.
 * Needs a DEFINITE height (not just min-height) so the injected iframe's
 * height:100% can resolve -- otherwise the iframe collapses and scrolls
 * internally. Mobile is taller because Calendly stacks the date picker
 * above the time slots. */
.fc-cal__embed{ height:780px; min-height:780px; border-radius:18px; overflow:hidden; }
.fc-cal__embed iframe{ width:100%; height:100%; min-height:inherit; border:0; display:block; }
.fc-cal__embed[hidden]{ display:none; }
@media (max-width:760px){
  .fc-cal__embed{ height:1080px; min-height:1080px; }
}
/* honest "being wired up" / email fallback -- the dashed placeholder box */
.fc-cal__fallback-box{ border:1.5px dashed var(--rule-ink); border-radius:18px; background:rgba(255,252,246,.6); padding:clamp(1.4rem,3vw,2.2rem); }
.fc-cal__fallback-box[hidden]{ display:none; }
.fc-cal__h{ font-family:var(--display); font-size:1.3rem; margin:0 0 .4rem; }
.fc-cal__p{ color:var(--ink-soft); font-size:.95rem; margin:0 0 1.2rem; max-width:42ch; }
.fc-cal__fallback{ font-family:var(--mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); margin-top:1.1rem; }
.fc-cal__fallback a{ color:var(--oxblood); border-bottom:1px solid currentColor; padding-bottom:1px; text-decoration:none; }
/* non-blocking note shown only if the answers POST failed */
.fc-cal__sendnote{ margin:1.3rem 0 0; padding:.75rem .95rem; font-size:.85rem; line-height:1.45; color:var(--ink);
  background:rgba(138,42,34,.06); border:1px solid rgba(138,42,34,.18); border-radius:12px; max-width:46ch; }
.fc-cal__sendnote[hidden]{ display:none; }

/* honeypot: off-screen, untabbable, never shown to people */
.fc-hp{ position:absolute; left:-9999px; top:0; width:1px; height:1px; overflow:hidden; }

/* submit loading spinner (inside the pill). Reduced-motion: the global rule
   below freezes the spin; the "Sending..." label still conveys state. */
.fc-spin{ width:.85em; height:.85em; flex:0 0 auto; border-radius:999px;
  border:2px solid currentColor; border-right-color:transparent; animation:fcSpin .7s linear infinite; }
@keyframes fcSpin{ to{ transform:rotate(360deg); } }

/* trust footer */
.fc-foot{ flex:0 0 auto; padding:1.2rem clamp(1.25rem,5vw,3rem) 1.8rem; }
.fc-foot p{ margin:0; color:var(--ink-soft); font-size:.8rem; }

/* no-JS submit (hidden when JS runs) */
.fc-nojs{ margin-top:2rem; }

/* ---------- progressive enhancement ---------- */
/* no JS: every step stacked + visible; progress + per-step controls hidden; native submit shown */
html:not(.js) .fc-progress,
html:not(.js) .fc-controls,
html:not(.js) .fc-welcome__cta,
html:not(.js) .fc-hint{ display:none; }
html:not(.js) .fc-step{ display:block; margin-bottom:clamp(2rem,5vw,3rem); padding-bottom:clamp(2rem,5vw,3rem); border-bottom:1px solid var(--rule-ink); }
html:not(.js) .fc-step:last-of-type{ border-bottom:0; }
html:not(.js) .fc-form{ align-items:flex-start; flex-direction:column; }
html:not(.js) .fc-step--welcome .fc-q{ font-size:clamp(1.9rem,4.6vw,2.7rem); }

/* JS: one step at a time */
html.js .fc-step{ display:none; }
html.js .fc-step.is-active{ display:block; }
html.js .fc-nojs{ display:none; }

/* entrance: only the active step, only with JS, only if motion allowed */
@keyframes fcIn{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
html.js .fc-step.is-active{ animation:fcIn .5s var(--ease) both; }

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}