/* Studio LAB preview site: the booth's own world (its print layouts scattered behind frosted glass,
   its glass blobs, viewfinder corners, frame art, Poppins) in the brand palette. Page-only styles
   live in each page's <style> block. */

@font-face { font-family: Poppins; font-weight: 400; font-display: swap; src: url(/assets/fonts/poppins-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: Poppins; font-weight: 500; font-display: swap; src: url(/assets/fonts/poppins-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: Poppins; font-weight: 600; font-display: swap; src: url(/assets/fonts/poppins-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: Poppins; font-weight: 700; font-display: swap; src: url(/assets/fonts/poppins-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: Poppins; font-weight: 800; font-display: swap; src: url(/assets/fonts/poppins-latin-800-normal.woff2) format('woff2'); }

:root {
  --ink: #1b1e23;
  --ink-2: #474c57;
  --muted: #575d6a;   /* with --pink-text, dark enough for 4.5:1 over the darkest spot of the frosted prints */
  --ground: #f2f3f7;
  --line: #dde0e8;
  --card: #ffffff;

  /* pastel fields, each with an ink that passes 4.5:1 on it */
  --sky: #dcebff;    --sky-ink: #1d4f9e;
  --blush: #ffe0ef;  --blush-ink: #9a2c64;
  --mint: #d9f6e7;   --mint-ink: #1b6644;
  --butter: #fff2bd; --butter-ink: #6f5200;
  --lilac: #e8e2ff;  --lilac-ink: #5438b0;

  /* the booth's accents */
  --blue: #1d68f2;      /* the booth's #2e7bff, a step darker so white text passes 4.5:1 */
  --blue-deep: #1553c9;
  --pink: #ff6bb5;
  --pink-text: #a62d69; /* the brand pink, deep enough that small text passes 4.5:1 on the page and over the prints */
  --green: #6bffb0;
  --yellow: #ffd84d;
  --lav: #b7a6ff;
  --navy: #0f1126;

  /* the booths' LED strips */
  --led-air: #3fd0ff;
  --led-elev: #b44dff;

  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 28px;
  --shadow-1: 0 1px 2px rgba(27, 30, 35, 0.06), 0 10px 24px -14px rgba(27, 30, 35, 0.22);
  --shadow-2: 0 2px 6px rgba(27, 30, 35, 0.06), 0 26px 50px -24px rgba(27, 30, 35, 0.34);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.32, 0.64, 1);

  --gutter: clamp(16px, 4.2vw, 44px);
  --max: 1180px;
  --head-h: 64px;
  --acc: var(--green);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--head-h) + 12px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background-color: var(--ground);
  /* the booth's prints, scattered sparsely behind frosted glass (tools/backdrop.mjs): two layers whose prime
     sizes never line up, so no grid shows. They scroll with the page; the glass pane is body::after. */
  background-image: url(/assets/img/backdrop-b.webp), url(/assets/img/backdrop-a.webp);
  background-size: clamp(1016px, 117.6vw, 1693px) auto, clamp(868px, 100.5vw, 1447px) auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
/* A pane of frosted glass between the prints and the page: a milky tint, a soft diagonal sheen and a fine grain.
   The frost's blur is baked into the prints themselves (backdrop-*.webp), so nothing is blurred while scrolling. */
body:not(.bg-blobs)::after {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    url(/assets/img/grain.svg),
    linear-gradient(115deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.12) 38%, rgba(255, 255, 255, 0.32) 62%, rgba(255, 255, 255, 0.08) 100%),
    rgba(248, 249, 252, 0.28);
}
/* About and contact (<body class="bg-blobs">) trade the prints for the booth's glass blobs (from the client's
   mockup, ../public/art/blob-*.webp, trimmed, at 75%). They scroll with the page like the prints. The two at the top
   were cut by the corners of the booth's screen, so they sit in the page's top corners. Down the page, alternating
   sides, is the one blob cut on a single edge, turned so that edge meets the side of the page (side-left.webp,
   side-right.webp, the second also flipped so the two don't match). */
body.bg-blobs {
  background-image:
    url(/assets/img/blobs/home-a.webp), url(/assets/img/blobs/end-a.webp),
    url(/assets/img/blobs/side-left.webp), url(/assets/img/blobs/side-right.webp),
    url(/assets/img/blobs/side-left.webp), url(/assets/img/blobs/side-right.webp),
    url(/assets/img/blobs/side-left.webp), url(/assets/img/blobs/side-right.webp);
  background-position:
    left -10vmax top, right top,
    left top 88vmax, right top 150vmax, left top 225vmax, right top 300vmax, left top 375vmax, right top 450vmax;
  background-size: 36vmax auto, 46vmax auto, 20vmax auto, 16vmax auto, 20vmax auto, 16vmax auto, 20vmax auto, 16vmax auto;
  background-repeat: no-repeat;
}
/* asked for more contrast: a plain page */
@media (prefers-contrast: more) {
  body, body.bg-blobs { background-image: none; }
  body::after { display: none; }
}
/* Chrome and Safari cross-fade from page to page; tabs switch in place in every browser (site.js). */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }
main:focus { outline: none; } /* site.js moves focus here after switching tabs in place */
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
::selection { background: var(--lilac); color: var(--lilac-ink); }
html { scrollbar-color: #c9cddb transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #c9cddb; border-radius: 99px; border: 3px solid var(--ground); }

h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -0.025em; text-wrap: balance; }
h1 { font-size: clamp(2.15rem, 6.4vw, 4.6rem); line-height: 1.02; letter-spacing: -0.035em; }
h2 { font-size: clamp(1.7rem, 3.8vw, 2.75rem); line-height: 1.08; }
h3 { font-size: 1.14rem; line-height: 1.3; letter-spacing: -0.01em; font-weight: 600; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-decoration-thickness: 1.5px; text-underline-offset: 0.2em; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 6px; }
button { font: inherit; color: inherit; }

.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; background: var(--ink); color: #fff; border-radius: 10px; font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }
/* The icons (icons.svg) are drawn as lines. Their line style has to be set here, not only in icons.svg: Safari
   and Firefox don't carry a sprite file's own <style> into <use>, so line-only icons (the menu) came out blank. */
.i {
  width: 1.25em; height: 1.25em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.section { padding-block: clamp(64px, 10vw, 128px); }
.lede { font-size: clamp(1.02rem, 1.6vw, 1.2rem); color: var(--ink-2); max-width: 36ch; }
.muted { color: var(--muted); }
.tagline {
  font-weight: 500; font-size: 0.72rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink-2);
}
.caps { font-weight: 800; text-transform: uppercase; letter-spacing: 0.01em; }
.stack > * + * { margin-top: var(--gap, 16px); }

/* ---------- header ---------- */
.site-head {
  position: sticky; top: 0; z-index: 40;
  background: rgba(242, 243, 247, 0.94);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms, box-shadow 200ms;
}
.site-head.is-scrolled { border-color: var(--line); box-shadow: 0 8px 20px -18px rgba(27, 30, 35, 0.4); }
.site-head__in {
  width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto;
  height: var(--head-h); display: flex; align-items: center; gap: 12px;
}
.brand { display: block; margin-right: auto; padding: 6px 0; }
.brand img { width: clamp(148px, 18vw, 188px); }
.site-nav { display: flex; align-items: center; gap: 4px; }
/* Each tab has its own brand color (--t, and --t-fg for its text when filled, set in the header partial): a tint on hover, filled when it's the page you're on. */
.site-nav a {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px; border-radius: 99px; text-decoration: none; font-weight: 500; font-size: 0.95rem;
  transition: background 160ms, box-shadow 160ms;
}
.site-nav a:hover { background: rgba(27, 30, 35, 0.06); background: color-mix(in srgb, var(--t, #fff) 45%, transparent); }
.site-nav a[aria-current='page'] {
  background: var(--t, #fff); color: var(--t-fg, var(--ink)); font-weight: 600;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.12);
}
.menu-btn { display: none; }

@media (max-width: 1079px) {
  .site-nav {
    position: absolute; left: 0; right: 0; top: var(--head-h);
    flex-direction: column; align-items: stretch; gap: 2px;
    padding: 10px var(--gutter) 18px; background: var(--ground);
    border-bottom: 1px solid var(--line); box-shadow: 0 20px 30px -24px rgba(27, 30, 35, 0.4);
    visibility: hidden; opacity: 0; transform: translateY(-8px);
    transition: opacity 180ms var(--ease-out), transform 220ms var(--ease-out), visibility 0s 220ms;
  }
  .site-nav.is-open { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
  .site-nav a { padding: 14px 12px; font-size: 1.05rem; border-radius: 14px; }
  .menu-btn {
    display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px;
    border: 0; background: #fff; box-shadow: var(--shadow-1); cursor: pointer;
  }
}

/* ---------- buttons ---------- */
.btn {
  --b: var(--blue);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 22px; border-radius: 16px; border: 0;
  background: var(--b); color: #fff; text-decoration: none; cursor: pointer;
  font-weight: 800; font-size: 0.98rem; letter-spacing: 0.02em; text-transform: uppercase;
  box-shadow: 0 12px 24px -12px rgba(29, 104, 242, 0.7), inset 0 -2px 0 rgba(0, 0, 0, 0.12);
  transition: transform 160ms var(--ease-out), box-shadow 160ms, background 160ms;
}
.btn:hover { background: var(--blue-deep); transform: translateY(-1px); }
.btn:active { transform: translateY(1px); }
.btn .i { width: 1.2em; height: 1.2em; stroke-width: 2.2; }
.btn--ghost {
  background: #fff; color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink);
}
.btn--ghost:hover { background: #fff; box-shadow: inset 0 0 0 2px var(--ink), 0 10px 20px -14px rgba(27, 30, 35, 0.5); }
.btn--ink { --b: var(--ink); box-shadow: 0 12px 24px -14px rgba(27, 30, 35, 0.7); }
.btn--ink:hover { background: #2c3038; }
.btn--sm { min-height: 42px; padding: 0 16px; font-size: 0.86rem; border-radius: 13px; }
.btn[disabled], .btn[aria-disabled='true'] { opacity: 0.5; pointer-events: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

.text-link {
  display: inline-flex; align-items: center; gap: 6px; font-weight: 600; text-decoration: none;
  color: var(--blue-deep);
}
.text-link:hover { text-decoration: underline; }
.text-link .i { transition: transform 160ms var(--ease-out); }
.text-link:hover .i { transform: translateX(3px); }

/* ---------- chips, pills, placeholders ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px; border-radius: 99px; font-size: 0.8rem; font-weight: 600;
  background: #fff; color: var(--ink-2); box-shadow: var(--shadow-1);
}
.chip .i { width: 1.05em; height: 1.05em; }
.chip--open::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(107, 255, 176, 0.3); }
.chip--air { background: #e2f7ff; color: #075a7d; }
.chip--elev { background: #f3e4ff; color: #6a1fa3; }
.chip--price { background: var(--butter); color: var(--butter-ink); }

/* Something the client still has to give us. Looks editable on purpose. */
.ph {
  background: repeating-linear-gradient(135deg, rgba(84, 56, 176, 0.08) 0 6px, rgba(84, 56, 176, 0.03) 6px 12px);
  color: var(--lilac-ink); border-radius: 6px; padding: 0 0.3em; box-decoration-break: clone; -webkit-box-decoration-break: clone;
  outline: 1px dashed rgba(84, 56, 176, 0.35); outline-offset: -1px;
}

/* ---------- viewfinder corners (the logo's brackets, the booth screens' corners) ---------- */
.vf { position: relative; }
.vf::before, .vf::after {
  content: ''; position: absolute; width: var(--vf-w, 64px); height: var(--vf-h, 38px); pointer-events: none;
  border: 0 solid var(--acc);
}
.vf::before { left: calc(-1 * var(--vf-o, 14px)); top: calc(-1 * var(--vf-o, 14px)); border-left-width: 2px; border-top-width: 2px; }
.vf::after { right: calc(-1 * var(--vf-o, 14px)); bottom: calc(-1 * var(--vf-o, 14px)); border-right-width: 2px; border-bottom-width: 2px; }

/* ---------- photo strips: the booth's own frame art over the photo windows ---------- */
.strip {
  position: relative; width: var(--strip-w, 220px); aspect-ratio: var(--ar);
  filter: drop-shadow(0 18px 22px rgba(27, 30, 35, 0.2)) drop-shadow(0 2px 3px rgba(27, 30, 35, 0.12));
}
.strip > img.strip__frame { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.strip__win {
  position: absolute; z-index: 1; overflow: hidden;
  left: calc(var(--x) * 100%); top: calc(var(--y) * 100%); width: calc(var(--w) * 100%); height: calc(var(--h) * 100%);
  background: #fff;
}
/* The client's Canva frames (../src/booth/canva-frames.json): window boxes as fractions of the frame. */
.strip--pink-swirl { --ar: 600 / 1800; }
.strip--pink-swirl .strip__win:nth-of-type(1) { --x: 0.0517; --y: 0.085; --w: 0.9033; --h: 0.2828; }
.strip--pink-swirl .strip__win:nth-of-type(2) { --x: 0.0517; --y: 0.38; --w: 0.9033; --h: 0.2828; }
.strip--pink-swirl .strip__win:nth-of-type(3) { --x: 0.0517; --y: 0.6772; --w: 0.9033; --h: 0.2828; }
.strip--blue-sky { --ar: 600 / 1800; }
.strip--blue-sky .strip__win:nth-of-type(1) { --x: 0.0517; --y: 0.085; --w: 0.9033; --h: 0.2828; }
.strip--blue-sky .strip__win:nth-of-type(2) { --x: 0.0517; --y: 0.38; --w: 0.9033; --h: 0.2828; }
.strip--blue-sky .strip__win:nth-of-type(3) { --x: 0.0483; --y: 0.6756; --w: 0.9033; --h: 0.2828; }
.strip--lemonade { --ar: 600 / 1800; }
.strip--lemonade .strip__win:nth-of-type(1) { --x: 0.0517; --y: 0.085; --w: 0.9033; --h: 0.2828; }
.strip--lemonade .strip__win:nth-of-type(2) { --x: 0.0517; --y: 0.38; --w: 0.9033; --h: 0.2828; }
.strip--lemonade .strip__win:nth-of-type(3) { --x: 0.0517; --y: 0.6772; --w: 0.9033; --h: 0.2828; }
.strip--chrome { --ar: 600 / 1800; }
.strip--chrome .strip__win:nth-of-type(1) { --x: 0.0517; --y: 0.085; --w: 0.9033; --h: 0.2828; }
.strip--chrome .strip__win:nth-of-type(2) { --x: 0.0517; --y: 0.38; --w: 0.9033; --h: 0.2828; }
.strip--chrome .strip__win:nth-of-type(3) { --x: 0.0483; --y: 0.6756; --w: 0.9033; --h: 0.2828; }
.strip--birthday { --ar: 600 / 1800; }
.strip--birthday .strip__win:nth-of-type(1) { --x: 0.0517; --y: 0.085; --w: 0.9033; --h: 0.2828; }
.strip--birthday .strip__win:nth-of-type(2) { --x: 0.0517; --y: 0.38; --w: 0.9033; --h: 0.2828; }
.strip--birthday .strip__win:nth-of-type(3) { --x: 0.0483; --y: 0.6756; --w: 0.9033; --h: 0.2828; }
.strip--lavender-swirl { --ar: 600 / 1800; }
.strip--lavender-swirl .strip__win:nth-of-type(1) { --x: 0.0517; --y: 0.085; --w: 0.9033; --h: 0.2828; }
.strip--lavender-swirl .strip__win:nth-of-type(2) { --x: 0.0517; --y: 0.38; --w: 0.9033; --h: 0.2828; }
.strip--lavender-swirl .strip__win:nth-of-type(3) { --x: 0.0517; --y: 0.6772; --w: 0.9033; --h: 0.2828; }
/* A photo that isn't there yet: pastel field, the booth prototype's sample silhouette. */
.shot {
  --tone-a: #ffd6e8; --tone-b: #cfe2ff;
  position: relative; width: 100%; height: 100%; min-height: 40px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='xMidYMax meet'%3E%3Ccircle cx='50' cy='44' r='15' fill='white' fill-opacity='.55'/%3E%3Cpath d='M18 100c2-20 16-32 32-32s30 12 32 32z' fill='white' fill-opacity='.55'/%3E%3C/svg%3E") center bottom / auto 88% no-repeat,
    linear-gradient(160deg, var(--tone-a), var(--tone-b));
}
.shot.has-photo { background: var(--photo) center / cover no-repeat; }
.shot--peach { --tone-a: #ffe1c7; --tone-b: #ffc0d9; }
.shot--sky { --tone-a: #d4ecff; --tone-b: #b9d0ff; }
.shot--mint { --tone-a: #d4f7e6; --tone-b: #bfe6ff; }
.shot--lilac { --tone-a: #e7deff; --tone-b: #ffd1ec; }
.shot--butter { --tone-a: #fff1b8; --tone-b: #ffd3c4; }
.shot__tag {
  position: absolute; left: 6px; bottom: 6px; padding: 1px 7px; border-radius: 99px;
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  background: rgba(255, 255, 255, 0.78); color: var(--ink-2);
}
.shot.has-photo .shot__tag { display: none; }

/* ---------- white-bordered print (a 4x6 off the booth's printer) ---------- */
.print {
  background: #fff; border-radius: 6px; padding: 12px 12px 18px;
  box-shadow: var(--shadow-2);
}

/* ---------- surfaces ---------- */
.panel { background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow-1); padding: clamp(20px, 3.4vw, 36px); }
.field-sky { background: var(--sky); } .field-blush { background: var(--blush); } .field-mint { background: var(--mint); }
.field-butter { background: var(--butter); } .field-lilac { background: var(--lilac); }

/* ---------- the rooms (real booth photos) ---------- */
.room-card { position: relative; overflow: hidden; border-radius: var(--r-lg); background: #fff; box-shadow: var(--shadow-1); }
.room-card img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.room-card__cap { padding: 16px 18px 20px; display: grid; gap: 6px; }

/* ---------- forms ---------- */
.form { display: grid; gap: 16px; }
.form__row { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.field { display: grid; gap: 6px; }
.field > label, .field > .label { font-weight: 600; font-size: 0.9rem; }
.field .hint { font-size: 0.8rem; color: var(--muted); font-weight: 400; }
.input, .field input, .field select, .field textarea {
  width: 100%; min-height: 52px; padding: 12px 15px; border-radius: 14px;
  border: 2px solid var(--line); background: #fff; color: var(--ink);
  font: inherit; font-size: 1rem; transition: border-color 150ms, box-shadow 150ms;
  appearance: none; -webkit-appearance: none;
}
.field textarea { min-height: 116px; resize: vertical; }
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b1e23' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; padding-right: 42px;
}
.field input::placeholder, .field textarea::placeholder { color: #767b87; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: #c8ccd8; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(46, 123, 255, 0.16); }
.field.is-bad input, .field.is-bad select, .field.is-bad textarea { border-color: #d63a7e; }
.field .err { display: none; color: #b0205f; font-size: 0.84rem; font-weight: 500; }
.field.is-bad .err { display: block; }
.choice-row { display: flex; flex-wrap: wrap; gap: 8px; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.choice span {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 99px;
  background: #fff; border: 2px solid var(--line); font-weight: 600; font-size: 0.92rem; transition: 150ms;
}
.choice input:checked + span { border-color: var(--blue); background: #eef4ff; color: var(--blue-deep); }
.choice input:focus-visible + span { outline: 3px solid var(--blue); outline-offset: 2px; }
.form-note { font-size: 0.82rem; color: var(--muted); }
.form-done {
  display: grid; gap: 10px; justify-items: start; padding: 28px; border-radius: var(--r-lg);
  background: var(--mint); color: var(--mint-ink);
}
.form-done h3 { font-size: 1.5rem; color: var(--ink); }
.form-done .i { width: 34px; height: 34px; padding: 6px; border-radius: 50%; background: #fff; color: var(--mint-ink); stroke-width: 2.4; }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 10px; }
.faq details { background: #fff; border-radius: var(--r-md); box-shadow: var(--shadow-1); }
.faq summary {
  list-style: none; cursor: pointer; padding: 18px 56px 18px 20px; font-weight: 600; position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ''; position: absolute; right: 20px; top: 50%; width: 12px; height: 12px; margin-top: -8px;
  border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(45deg); transition: transform 200ms var(--ease-out);
}
.faq details[open] summary::after { transform: rotate(225deg); margin-top: -2px; }
.faq details > div { padding: 0 20px 20px; color: var(--ink-2); max-width: 65ch; }

/* ---------- the message form (shared: contact page, homepage) ---------- */
.msg { display: grid; gap: clamp(24px, 5vw, 64px); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .msg { grid-template-columns: 0.8fr 1.2fr; } }
.form-done .note { color: var(--ink-2); font-size: 0.9rem; }
.form-done .note a { color: var(--ink); font-weight: 600; }
.send-err { flex-basis: 100%; color: #b0205f; font-size: 0.9rem; font-weight: 500; }
.send-err a { color: inherit; font-weight: 600; }

/* ---------- inner-page parts ---------- */
.page-hero { padding-block: clamp(26px, 5vw, 64px) clamp(40px, 7vw, 90px); }
.page-hero__in { display: grid; gap: clamp(28px, 5vw, 60px); align-items: center; }
@media (min-width: 900px) { .page-hero__in { grid-template-columns: 1.05fr 0.95fr; } }
.page-hero h1 { font-size: clamp(2.1rem, 5.8vw, 4.2rem); max-width: 14ch; }
.page-hero .lede { margin-top: 18px; }
.page-hero .lede + .lede { margin-top: 10px; }
.page-hero .btn-row { margin-top: 26px; }
.eyebrow { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--pink-text); }
.sec-head { max-width: 640px; margin-bottom: clamp(24px, 3.5vw, 36px); }
.sec-head > * + * { margin-top: 12px; }
.sec-head--center { margin-inline: auto; text-align: center; }
.sec-head--center .lede { margin-inline: auto; }

/* pastel tiles: an icon, a title, a line */
.tiles { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
@media (min-width: 900px) { .tiles--3 { grid-template-columns: repeat(3, 1fr); } }
.tile { display: grid; gap: 10px; align-content: start; padding: 22px; border-radius: var(--r-lg); background: #fff; box-shadow: var(--shadow-1); color: var(--ink-2); }
.tile .i { width: 30px; height: 30px; }
.tile h3 { color: var(--ink); }
.tile p { font-size: 0.95rem; }
.tile[class*='field-'] { box-shadow: none; }
.tile.field-sky { background: var(--sky); color: var(--sky-ink); } .tile.field-blush { background: var(--blush); color: var(--blush-ink); }
.tile.field-mint { background: var(--mint); color: var(--mint-ink); } .tile.field-butter { background: var(--butter); color: var(--butter-ink); }
.tile.field-lilac { background: var(--lilac); color: var(--lilac-ink); }

/* numbered steps, numerals in the booth's countdown pink */
.steps { counter-reset: step; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); margin: 0; padding: 0; list-style: none; }
.steps li { counter-increment: step; display: grid; gap: 8px; align-content: start; padding: 22px; border-radius: var(--r-lg); background: #fff; box-shadow: var(--shadow-1); }
.steps li::before { content: counter(step); font-weight: 800; font-size: 2.6rem; line-height: 1; letter-spacing: -0.04em; color: var(--pink-text); }
.steps p { color: var(--ink-2); font-size: 0.95rem; }

/* a closing call: centered heading, a line or two, a button */
.cta { display: grid; gap: 14px; justify-items: center; text-align: center; }
.cta .lede { margin-inline: auto; max-width: 42ch; }
.cta .btn-row { justify-content: center; margin-top: 8px; }
.band { border-radius: var(--r-lg); padding: clamp(32px, 6vw, 64px) clamp(20px, 4vw, 48px); }

/* ---------- code entry ---------- */
.code-entry { display: flex; gap: 10px; flex-wrap: wrap; }
.code-entry input {
  flex: 1 1 180px; min-height: 52px; padding: 0 16px; border-radius: 14px; border: 2px solid var(--line);
  font: inherit; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; background: #fff;
}
.code-entry input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(46, 123, 255, 0.16); }

/* ---------- footer ---------- */
.site-foot { background: #fff; border-top: 1px solid var(--line); padding: 48px 0 24px; }
.site-foot__in {
  width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto;
  display: grid; gap: 28px; grid-template-columns: 1fr;
}
.site-foot__cols { display: grid; gap: 24px; grid-template-columns: 1fr 1fr; }
@media (min-width: 820px) { .site-foot__in { grid-template-columns: 1fr 1fr; align-items: start; } }
.site-foot__brand img { width: 170px; margin-bottom: 12px; }
.site-foot__nav { display: grid; gap: 4px; align-content: start; }
.site-foot__h { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.site-foot__mail { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font-weight: 600; text-decoration: none; }
.site-foot__mail:hover { text-decoration: underline; }
.site-foot__nav a { text-decoration: none; font-weight: 500; padding: 4px 0; }
.site-foot__nav a:hover { text-decoration: underline; }
.site-foot__fine {
  width: min(100% - 2 * var(--gutter), var(--max)); margin: 36px auto 0; padding-top: 18px;
  border-top: 1px solid var(--line); font-size: 0.8rem; color: var(--muted);
}

/* ---------- motion ---------- */
@keyframes drop-out { from { transform: translateY(-78%); } to { transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 700ms var(--ease-out), transform 800ms var(--ease-out); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
}