/* ==========================================================================
   Sorbet Hair Studio — styles.css
   Demo site by Corivo Digital. Plain CSS, mobile-first, no build step.
   Palette: bone / ink / cobalt / ice / sand.
   ========================================================================== */

/* 1. Tokens ------------------------------------------------------------- */
:root {
  --bone: #f4efe6;
  --bone-2: #ebe4d8;
  --sand: #ddd2bf;
  --ink: #14161c;
  --ink-2: #22252e;
  --muted: #5f6370;
  --line: rgba(20, 22, 28, 0.14);
  --cobalt: #1f3fff;
  --cobalt-deep: #142ab8;
  --ice: #bfe3ff;
  --ice-deep: #9fd0f7;
  --white: #fffdf9;

  --display: "Bricolage Grotesque", "Avenir Next", "Helvetica Neue", sans-serif;
  --body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --step--1: clamp(0.8rem, 0.77rem + 0.15vw, 0.88rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.08rem);
  --step-1: clamp(1.15rem, 1.05rem + 0.5vw, 1.35rem);
  --step-2: clamp(1.5rem, 1.2rem + 1.3vw, 2.2rem);
  --step-3: clamp(2rem, 1.4rem + 2.6vw, 3.4rem);
  --step-4: clamp(2.6rem, 1.5rem + 4.6vw, 5rem);
  --step-5: clamp(3rem, 1.4rem + 6.6vw, 7rem);

  --gutter: 1.25rem;
  --section: clamp(4.5rem, 5vw + 2.5rem, 8rem);
  --nav-h: 4rem;
  --r: 6px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.77, 0, 0.18, 1);
}
@media (min-width: 48em) { :root { --gutter: 2.5rem; } }

/* 2. Base --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 1rem); }
body { margin: 0; font-family: var(--body); font-size: var(--step-0); line-height: 1.55; color: var(--ink); background: var(--bone); -webkit-font-smoothing: antialiased; overflow-x: clip; }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 800; line-height: 0.98; letter-spacing: -0.025em; text-wrap: balance; font-variation-settings: "opsz" 96; }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); }
.u { position: relative; white-space: nowrap; }
.u::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0.06em; height: 0.16em; background: var(--ice); z-index: -1; border-radius: 2px; }
p, ul, ol, dl, figure, fieldset { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 3px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }

.wrap { width: min(100% - 2 * var(--gutter), 78rem); margin-inline: auto; }
.eyebrow { display: inline-flex; align-items: center; gap: 0.6rem; margin-bottom: 1rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cobalt); }
.eyebrow::before { content: ""; width: 1.5rem; height: 3px; background: currentColor; }
.eyebrow--light { color: var(--ice); }
.lede { margin-top: 1.25rem; font-size: var(--step-1); line-height: 1.5; color: var(--muted); max-width: 34em; text-wrap: pretty; }
.section__head { max-width: 46rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 3.1rem; padding: 0.75rem 1.5rem; border-radius: var(--r); border: 2px solid transparent; font-family: var(--display); font-weight: 700; font-size: 1rem; letter-spacing: -0.01em; text-decoration: none; cursor: pointer; transition: transform 0.25s var(--ease), background 0.2s, color 0.2s, border-color 0.2s; }
.btn--sm { min-height: 2.6rem; padding: 0.5rem 1.1rem; font-size: 0.92rem; }
.btn--block { width: 100%; }
.btn--ice { background: var(--ice); color: var(--ink); border-color: var(--ice); }
.btn--ice:hover { background: var(--ice-deep); border-color: var(--ice-deep); color: var(--ink); }
.btn--dark { background: var(--ink); color: var(--bone); border-color: var(--ink); }
.btn--dark:hover { background: var(--cobalt); border-color: var(--cobalt); color: var(--white); }
.btn--light { background: var(--bone); color: var(--ink); border-color: var(--bone); }
.btn--light:hover { background: var(--ice); border-color: var(--ice); }
.btn--line { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--line:hover { background: var(--ink); color: var(--bone); }
.btn:active { transform: translateY(1px); }
.text-link { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 600; color: var(--cobalt); text-decoration: none; border-bottom: 2px solid currentColor; padding-bottom: 0.1em; }
.text-link span { transition: transform 0.25s var(--ease); }
.text-link:hover span { transform: translateX(4px); }

/* 3. Demo banner / skip ------------------------------------------------- */
.demo-bar { background: var(--ink); color: var(--bone); font-size: 0.8rem; font-weight: 500; text-align: center; padding: 7px 0; line-height: 1.35; }
.demo-bar a { color: var(--ice); text-decoration: underline; text-underline-offset: 2px; }
.skip { position: absolute; left: 1rem; top: -4rem; z-index: 100; padding: 0.6rem 1rem; background: var(--ice); color: var(--ink); border-radius: var(--r); font-weight: 600; }
.skip:focus { top: 1rem; }

/* 4. Header ------------------------------------------------------------- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--bone); border-bottom: 1px solid transparent; transition: border-color 0.3s, box-shadow 0.3s; }
.site-header.is-scrolled { border-color: var(--line); box-shadow: 0 10px 30px -24px rgba(20, 22, 28, 0.5); }
.header__in { position: relative; min-height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brand { display: grid; line-height: 1; text-decoration: none; }
.brand__word { font-family: var(--display); font-weight: 800; font-size: 1.6rem; letter-spacing: -0.03em; }
.brand__sub { font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-top: 0.15rem; }
.nav { display: none; }
.nav-toggle { width: 2.6rem; height: 2.6rem; display: grid; place-items: center; background: transparent; border: 1.5px solid var(--ink); border-radius: var(--r); cursor: pointer; }
.bars, .bars::before, .bars::after { display: block; width: 1.1rem; height: 2px; background: var(--ink); position: relative; transition: transform 0.3s var(--ease); }
.bars::before, .bars::after { content: ""; position: absolute; left: 0; }
.bars::before { top: -5px; } .bars::after { top: 5px; }
.nav-toggle[aria-expanded="true"] .bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .bars::before { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bars::after { transform: translateY(-5px) rotate(-45deg); }
.nav.is-open { display: grid; position: absolute; left: 0; right: 0; top: 100%; padding: 0.75rem 0 1rem; gap: 0.25rem; background: var(--bone); border-bottom: 1px solid var(--line); }
.nav.is-open a { padding: 0.8rem 0.25rem; font-family: var(--display); font-weight: 700; font-size: 1.3rem; text-decoration: none; border-bottom: 1px solid var(--line); }
.nav.is-open .nav__cta { border: 0; margin-top: 0.5rem; justify-content: center; }
@media (min-width: 60em) {
  .nav-toggle { display: none; }
  .nav { display: flex; align-items: center; gap: 1.5rem; }
  .nav a { font-weight: 500; text-decoration: none; position: relative; }
  .nav a:not(.btn)::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--cobalt); transform: scaleX(0); transform-origin: left; transition: transform 0.3s var(--ease); }
  .nav a:not(.btn):hover::after { transform: scaleX(1); }
}

/* 5. Hero ---------------------------------------------------------------- */
.hero { padding-top: clamp(2.5rem, 6vw, 5rem); }
.hero__grid { display: grid; gap: 2.5rem; }
.hero__copy h1 { font-size: var(--step-5); }
.hero__sub { margin-top: 1.5rem; font-size: var(--step-1); color: var(--muted); max-width: 28em; text-wrap: pretty; }
.cta-row { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.75rem; }
.hero__facts { margin-top: 2.25rem; padding-top: 1.25rem; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.hero__facts dt { font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.hero__facts dd { margin: 0.2rem 0 0; font-family: var(--display); font-weight: 700; font-size: 1rem; line-height: 1.2; }
.hero__media { position: relative; margin: 0; }
.hero__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r); }
.hero__media figcaption { margin-top: 0.6rem; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.sticker { position: absolute; left: -0.75rem; top: 1.5rem; display: grid; padding: 0.8rem 1rem; background: var(--ice); color: var(--ink); border-radius: var(--r); font-size: 0.75rem; line-height: 1.2; transform: rotate(-4deg); box-shadow: 0 14px 30px -16px rgba(20, 22, 28, 0.5); }
.sticker b { font-family: var(--display); font-size: 1.8rem; font-weight: 800; line-height: 1; }
.band { margin-top: clamp(2.5rem, 6vw, 4.5rem); background: var(--cobalt); color: var(--white); }
.band__in { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem 1.5rem; padding-block: 1.1rem; font-size: 0.88rem; }
.band__in b { font-family: var(--display); font-size: 1.15rem; font-weight: 800; margin-right: 0.2rem; }
@media (min-width: 60em) {
  .hero__grid { grid-template-columns: 7fr 5fr; align-items: end; gap: 4rem; }
  .hero__media { max-width: 30rem; justify-self: end; }
  .band__in { grid-template-columns: repeat(4, auto); justify-content: space-between; }
}

/* 6. Before / after ------------------------------------------------------- */
.ba { padding-block: var(--section); }
.ba__grid { display: grid; gap: 2.5rem; }
.ba__meta { margin: 1.5rem 0 2rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem 1.5rem; max-width: 28rem; }
.ba__meta li { display: grid; font-size: 0.95rem; }
.ba__meta b { font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.slider { position: relative; aspect-ratio: 9 / 11; max-height: 42rem; border-radius: var(--r); overflow: hidden; background: var(--bone-2); user-select: none; -webkit-user-select: none; touch-action: pan-y; --x: 50%; }
.slider img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.slider__after { clip-path: inset(0 0 0 var(--x)); }
.slider__handle { position: absolute; top: 0; bottom: 0; left: var(--x); width: 3px; background: var(--bone); transform: translateX(-1.5px); pointer-events: none; }
.slider__handle span { position: absolute; top: 50%; left: 50%; translate: -50% -50%; width: 3.2rem; height: 3.2rem; border-radius: 50%; background: var(--ice); color: var(--ink); display: grid; place-items: center; font-size: 0.9rem; font-weight: 800; box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.5); }
.slider__tag { position: absolute; bottom: 1rem; padding: 0.35rem 0.7rem; border-radius: var(--r); background: rgba(20, 22, 28, 0.75); color: var(--bone); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; pointer-events: none; }
.slider__tag--l { left: 1rem; } .slider__tag--r { right: 1rem; }
.slider__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.slider:focus-within .slider__handle { background: var(--cobalt); }
@media (min-width: 60em) { .ba__grid { grid-template-columns: 5fr 7fr; gap: 4rem; align-items: center; } .slider { aspect-ratio: 4 / 5; justify-self: end; width: 100%; max-width: 34rem; } }

/* 7. Recent looks: deck ----------------------------------------------------- */
.looks { padding-block: 0 var(--section); }
.looks__grid { display: grid; gap: 3rem; }
.deck { position: relative; width: min(100%, 20rem); margin-inline: auto; aspect-ratio: 9 / 10; touch-action: pan-y; outline-offset: 10px; }
.deck__cards { position: absolute; inset: 0; }
.card { position: absolute; inset: 0; margin: 0; padding: 0.55rem 0.55rem 0; background: var(--white); border: 1px solid var(--line); border-radius: var(--r); box-shadow: 0 24px 50px -30px rgba(20, 22, 28, 0.6); transform-origin: 50% 110%; transition: transform 0.55s var(--ease), opacity 0.4s; will-change: transform; cursor: grab; user-select: none; -webkit-user-select: none; display: grid; grid-template-rows: 1fr auto; }
.card img { width: 100%; height: 100%; object-fit: cover; border-radius: 3px; pointer-events: none; -webkit-user-drag: none; min-height: 0; }
.card figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; padding: 0.7rem 0.3rem 0.75rem; font-size: 0.85rem; }
.card figcaption b { font-family: var(--display); font-size: 1rem; }
.card figcaption span { color: var(--muted); font-size: 0.78rem; white-space: nowrap; }
.card[data-pos="0"] { z-index: 5; transform: none; }
.card[data-pos="1"] { z-index: 4; transform: translate(-6%, -3%) rotate(-5deg) scale(0.96); }
.card[data-pos="2"] { z-index: 3; transform: translate(6%, -6%) rotate(4deg) scale(0.92); }
.card[data-pos="3"], .card[data-pos="4"] { z-index: 2; transform: translate(0, -8%) scale(0.88); opacity: 0; }
.card.is-dragging { transition: none; cursor: grabbing; }
.card.is-out { transition: transform 0.5s var(--ease-io), opacity 0.4s; opacity: 0; }
.deck__ctl { position: absolute; left: 50%; bottom: -3rem; translate: -50% 0; display: flex; align-items: center; gap: 0.75rem; }
.deck__btn { width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 1.5px solid var(--ink); background: var(--bone); cursor: pointer; display: grid; place-items: center; font-weight: 700; transition: background 0.2s, color 0.2s; }
.deck__btn:hover { background: var(--cobalt); border-color: var(--cobalt); color: var(--white); }
.deck__count { font-size: 0.85rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.deck__count b { color: var(--ink); }
.looks__copy { padding-top: 1rem; }
@media (min-width: 60em) { .looks__grid { grid-template-columns: 5fr 6fr; align-items: center; gap: 5rem; } .deck { width: min(100%, 24rem); margin-inline: 0 auto; } .looks__copy { padding-top: 0; } }

/* 8. Menu: stacking index cards ------------------------------------------------ */
.menu { padding-block: var(--section) 1rem; --tab-h: 2.5rem; --stack-top: calc(var(--nav-h) + 1.25rem); }
.stack { position: relative; padding-bottom: 55vh; }
.idx { position: sticky; top: calc(var(--stack-top) + var(--i) * var(--tab-h)); margin-bottom: 3rem; padding-top: var(--tab-h); }
.idx__tab { position: absolute; top: 0; left: calc(var(--i) * 25%); width: 25%; height: var(--tab-h); display: flex; align-items: center; padding: 0 1rem; clip-path: polygon(0 0, calc(100% - 1.2rem) 0, 100% 100%, 0 100%); background: var(--c); color: var(--cfg); font-family: var(--display); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; overflow: hidden; }
.idx__body { background: var(--c); color: var(--cfg); border-radius: 0 var(--r) var(--r) var(--r); padding: clamp(1.4rem, 3vw, 2.5rem); display: grid; gap: 1.5rem; min-height: 24rem; box-shadow: 0 -12px 30px -24px rgba(20, 22, 28, 0.5); }
.idx--cobalt { --c: var(--cobalt); --cfg: var(--white); }
.idx--ice { --c: var(--ice); --cfg: var(--ink); }
.idx--sand { --c: var(--sand); --cfg: var(--ink); }
.idx--ink { --c: var(--ink); --cfg: var(--bone); }
.idx__text h3 { font-size: var(--step-3); margin-bottom: 0.75rem; }
.idx__text p { opacity: 0.85; max-width: 30em; }
.facts { margin: 1.25rem 0 1.5rem; display: flex; flex-wrap: wrap; gap: 0.6rem 1.75rem; }
.facts dt { font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.7; }
.facts dd { margin: 0.1rem 0 0; font-family: var(--display); font-size: 1.4rem; font-weight: 800; }
.idx__media { margin: 0; border-radius: 4px; overflow: hidden; aspect-ratio: 1; }
.idx__media img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 47.99em) { .idx__tab { font-size: 0.8rem; padding: 0 0.7rem; } .idx__tab em { display: none; } }
.idx__tab em { font-style: normal; }
@media (min-width: 48em) { .idx__body { grid-template-columns: 1.1fr 1fr; align-items: center; } }
@media (min-width: 60em) { .idx__body { min-height: 30rem; } }

/* 9. Visit steps ------------------------------------------------------------------ */
.visit { padding-block: var(--section); }
.steps { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.steps li { background: var(--bone); padding: 1.5rem; display: grid; gap: 0.5rem; align-content: start; }
.steps span { font-family: var(--display); font-weight: 800; font-size: 2rem; color: var(--cobalt); line-height: 1; }
.steps h3 { font-size: 1.4rem; }
.steps p { font-size: 0.92rem; color: var(--muted); }
@media (min-width: 40em) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64em) { .steps { grid-template-columns: repeat(4, 1fr); } .steps li { padding: 2rem 1.75rem 2.25rem; } }

/* 10. Work strip -------------------------------------------------------------------- */
.strip { padding-block: 0 var(--section); }
.strip__head { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.strip__ctl { display: flex; gap: 0.5rem; }
.strip__ctl button { width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 1.5px solid var(--ink); background: transparent; cursor: pointer; font-weight: 700; transition: background 0.2s, color 0.2s; }
.strip__ctl button:hover { background: var(--ink); color: var(--bone); }
.strip__scroller { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 0 var(--gutter) 1rem; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.strip__scroller::-webkit-scrollbar { display: none; }
.strip__scroller figure { flex: none; width: clamp(14rem, 24vw, 20rem); scroll-snap-align: start; margin: 0; }
.strip__scroller img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r); }
.strip__scroller figcaption { margin-top: 0.5rem; font-size: 0.8rem; color: var(--muted); }
@media (min-width: 78rem) { .strip__scroller { padding-left: calc((100% - 78rem) / 2 + 0px); } }

/* 11. Stylists ------------------------------------------------------------------------ */
.team { padding-block: var(--section); background: var(--ink); color: var(--bone); }
.team .lede { color: rgba(244, 239, 230, 0.7); }
.team .eyebrow { color: var(--ice); }
.stylists { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.stylist { position: relative; display: grid; gap: 0.6rem; }
.stylist img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r); filter: saturate(0.85); transition: filter 0.3s; }
.stylist:hover img { filter: saturate(1.05); }
.stylist div { display: grid; line-height: 1.25; }
.stylist b { font-family: var(--display); font-size: 1.2rem; }
.stylist span { font-size: 0.82rem; color: rgba(244, 239, 230, 0.65); }
.stylist button { justify-self: start; padding: 0.45rem 0.9rem; border-radius: var(--r); border: 1.5px solid var(--ice); background: transparent; color: var(--ice); font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: background 0.2s, color 0.2s; }
.stylist button:hover { background: var(--ice); color: var(--ink); }
@media (min-width: 48em) { .stylists { grid-template-columns: repeat(5, 1fr); gap: 1.25rem; } }

/* 12. Reviews -------------------------------------------------------------------------- */
.reviews { padding-block: var(--section); }
.rgrid { display: grid; gap: 1rem; }
.rcard { padding: 1.75rem 1.5rem 1.5rem; border-top: 3px solid var(--cobalt); background: var(--white); display: grid; gap: 1rem; align-content: start; }
.rcard__q { font-family: var(--display); font-weight: 500; font-size: var(--step-1); line-height: 1.3; letter-spacing: -0.01em; }
.rcard footer { display: grid; font-size: 0.85rem; }
.rcard footer b { font-family: var(--display); }
.rcard footer span { color: var(--muted); }
@media (min-width: 60em) { .rgrid { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } }

/* 13. Booking --------------------------------------------------------------------------- */
.book { padding-block: var(--section); background: var(--cobalt); color: var(--white); }
.book__grid { display: grid; gap: 2.5rem; }
.book h2 { font-size: var(--step-4); }
.book .lede { color: rgba(255, 253, 249, 0.8); }
.hours { margin-top: 2rem; display: grid; gap: 0.4rem; max-width: 22rem; }
.hours div { display: flex; justify-content: space-between; padding: 0.5rem 0; border-bottom: 1px solid rgba(255, 253, 249, 0.25); }
.hours dt { color: rgba(255, 253, 249, 0.75); }
.hours dd { margin: 0; font-family: var(--display); font-weight: 700; }
.book__contact { margin-top: 1.5rem; line-height: 1.7; }
.book__contact a { text-decoration: none; }
.book__contact a:hover { color: var(--ice); }
.form-card { background: var(--bone); color: var(--ink); border-radius: var(--r); padding: clamp(1.3rem, 3vw, 2.25rem); }
.hp { position: absolute; left: -9999px; }
.frow2 { display: grid; gap: 1rem; }
@media (min-width: 40em) { .frow2 { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: 0.4rem; margin-bottom: 1rem; border: 0; padding: 0; min-width: 0; }
.field label, .field legend { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.field .opt { text-transform: none; letter-spacing: 0; font-weight: 400; }
.field input, .field select, .field textarea { width: 100%; font: inherit; padding: 0.8rem 0.9rem; border: 1.5px solid var(--line); border-radius: var(--r); background: var(--white); color: var(--ink); transition: border-color 0.2s; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--cobalt); }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 8l5 5 5-5' fill='none' stroke='%2314161c' stroke-width='2'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.8rem center; background-size: 1rem; }
.seg { display: flex; flex-wrap: wrap; gap: 0.4rem; align-content: start; }
.seg legend { margin-bottom: 0.4rem; width: 100%; }
.seg label { position: relative; }
.seg input { position: absolute; inset: 0; opacity: 0; }
.seg span { display: inline-block; padding: 0.55rem 0.9rem; border-radius: var(--r); border: 1.5px solid var(--line); background: var(--white); font-size: 0.9rem; cursor: pointer; transition: background 0.2s, border-color 0.2s, color 0.2s; }
.seg input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--bone); }
.seg input:focus-visible + span { outline: 3px solid var(--ice); outline-offset: 2px; }
.form-note { margin-top: 0.9rem; font-size: 0.8rem; color: var(--muted); }
.success { text-align: center; padding: 1.5rem 0; display: grid; justify-items: center; gap: 0.6rem; }
.success svg { width: 3.5rem; height: 3.5rem; }
@media (min-width: 60em) { .book__grid { grid-template-columns: 5fr 7fr; gap: 4rem; align-items: start; } }

/* 14. FAQ ---------------------------------------------------------------------------------- */
.faq { padding-block: var(--section); }
.faq__grid { display: grid; gap: 2rem; }
.faq__list { display: grid; gap: 0; border-top: 1px solid var(--line); }
details { border-bottom: 1px solid var(--line); }
summary { list-style: none; cursor: pointer; padding: 1.1rem 2.5rem 1.1rem 0; font-family: var(--display); font-weight: 700; font-size: 1.15rem; position: relative; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; position: absolute; right: 0; top: 50%; translate: 0 -50%; width: 1.7rem; height: 1.7rem; border-radius: 50%; border: 1.5px solid var(--ink); display: grid; place-items: center; font-weight: 700; transition: background 0.2s, color 0.2s; }
details[open] summary::after { content: "–"; background: var(--cobalt); border-color: var(--cobalt); color: var(--white); }
details p { padding: 0 0 1.2rem; color: var(--muted); max-width: 42em; }
@media (min-width: 60em) { .faq__grid { grid-template-columns: 4fr 8fr; gap: 4rem; } .faq .section__head { position: sticky; top: calc(var(--nav-h) + 1rem); } }

/* 15. Footer ------------------------------------------------------------------------------- */
.footer { background: var(--ink); color: var(--bone); padding-block: 3.5rem 1.5rem; }
.footer__grid { display: grid; gap: 2rem; padding-bottom: 2rem; }
.footer__tag { font-family: var(--display); font-weight: 800; font-size: var(--step-2); line-height: 1.05; margin-bottom: 1rem; }
.footer h3 { font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ice); margin-bottom: 0.6rem; }
.footer p { line-height: 1.7; color: rgba(244, 239, 230, 0.8); }
.footer a { text-decoration: none; color: var(--bone); }
.footer a:hover { color: var(--ice); }
.footer__links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; font-weight: 600; }
.newsletter__row { display: flex; gap: 0.5rem; margin-top: 0.6rem; }
.newsletter__row input { flex: 1; min-width: 0; font: inherit; padding: 0.6rem 0.9rem; border-radius: var(--r); border: 1.5px solid rgba(244, 239, 230, 0.3); background: transparent; color: var(--bone); }
.newsletter__ok { font-weight: 600; margin-top: 0.5rem; color: var(--ice); }
.footer__word { font-family: var(--display); font-weight: 800; font-size: clamp(5rem, 22vw, 20rem); line-height: 0.8; letter-spacing: -0.05em; color: var(--cobalt); user-select: none; overflow: hidden; }
.footer__legal { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid rgba(244, 239, 230, 0.15); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem; font-size: 0.82rem; }
.footer__legal a { text-decoration: underline; text-underline-offset: 2px; }
@media (min-width: 48em) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1.4fr; } }

/* 16. Mobile book bar ---------------------------------------------------------------------- */
.mobile-book { position: fixed; left: 0.75rem; right: 0.75rem; bottom: calc(0.75rem + env(safe-area-inset-bottom)); z-index: 45; display: flex; align-items: center; justify-content: center; min-height: 3.3rem; border-radius: var(--r); background: var(--ice); color: var(--ink); font-family: var(--display); font-weight: 800; font-size: 1.05rem; text-decoration: none; box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.6); }
body { padding-bottom: 4.5rem; }
@media (min-width: 60em) { .mobile-book { display: none; } body { padding-bottom: 0; } }

/* 17. Reveal + reduced motion ----------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(1.1rem); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); transition-delay: var(--delay, 0s); }
  .reveal.in { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .strip__scroller { scroll-behavior: auto; }
}

/* 18. Print ---------------------------------------------------------------------------------- */
@media print { .demo-bar, .site-header, .mobile-book, .strip__ctl, .deck__ctl { display: none; } .idx { position: static; } }