/* ============================================================
   MiniME site styles
   ------------------------------------------------------------
   The redesign from the "UI mockups for Minimewonder" Claude
   Design project, used by every page in both languages.
   ============================================================ */

/* ---------- Fonts (self-hosted, so loading a page asks no third party) ---------- */
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("assets/fonts/bricolage-grotesque.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("assets/fonts/instrument-sans.woff2") format("woff2");
}

/* ---------- Tokens ---------- */
:root {
  --bg: #fef2ef;
  --paper: #fff8f6;
  --white: #fff;
  --ink: #2a1c18;
  --text: #6e574f;
  --muted: #7a5f56;
  --subtle: #86695f;
  --red: #c0392b;
  --red-hover: #a32f23;
  --red-deep: #8e2a1e;
  --rust: #a8412d;
  --rose: #8e4433;
  --blush: #fbdfd6;
  --blush-hover: #fdefea;
  --sand: #f3dcd5;
  --line: #f0dcd6;
  --line-strong: #ebd5cd;
  --dash: #e9c6bb;
  --dash-hover: #dca898;
  --pink: #e8b5a8;
  --green: #2c6b3c;
  --green-bg: #dff0e3;
  --green-soft: #f4faf5;
  --green-line: #cfe7d4;

  --font-display: "Bricolage Grotesque", "Instrument Sans", system-ui, sans-serif;
  --font-body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, Menlo, Consolas, monospace;

  --shadow-card: 0 6px 20px rgba(122, 62, 44, 0.08);
  --shadow-lift: 0 8px 26px rgba(122, 62, 44, 0.09);
  --shadow-float: 0 14px 42px rgba(122, 62, 44, 0.14);

  --gutter: 22px;
  --section-y: clamp(34px, 5vw, 64px);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, figure, blockquote { margin: 0; }
img { max-width: 100%; display: block; }
picture { display: block; }
a { color: var(--red); }
a:hover { color: var(--red-deep); }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
[hidden] { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 0 0 12px 0;
}
.skip-link:focus { left: 0; }
.linklike {
  background: none; border: 0; padding: 0; font: inherit; color: var(--red);
  cursor: pointer; text-decoration: underline;
}

/* ---------- Layout ---------- */
.wrap {
  max-width: calc(1180px + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap-narrow { max-width: calc(820px + 2 * var(--gutter)); }
.wrap-text { max-width: calc(760px + 2 * var(--gutter)); }
.wrap-mid { max-width: calc(900px + 2 * var(--gutter)); }

.section { padding-block: var(--section-y); }
.section-white { background: var(--white); }
.section-dark { background: var(--ink); color: var(--bg); }

/* Auto-fitting grid: each page sets --min for its column width. min() keeps
   a column from ever being wider than a narrow phone. */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--min, 220px), 100%), 1fr));
  gap: var(--gap, clamp(18px, 2.5vw, 30px));
}
.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: clamp(26px, 4vw, 50px);
  align-items: center;
}
.split-top { align-items: start; gap: clamp(24px, 4vw, 48px); }
.plain-list { list-style: none; margin: 0; padding: 0; }

/* ---------- Type ---------- */
.eyebrow {
  font: 500 11.5px/1.3 var(--font-mono);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--red);
}
.section-dark .eyebrow { color: var(--pink); }
.h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(27px, 3.4vw, 42px);
  line-height: 1.03;
  letter-spacing: -0.035em;
  margin-top: 10px;
  max-width: 16em;
  text-wrap: balance;
}
.h2-sm { font-size: clamp(25px, 3vw, 36px); line-height: 1.04; }
.h2-xs { font-size: clamp(24px, 2.8vw, 32px); line-height: 1.05; letter-spacing: -0.03em; }
.h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.section-head { margin-bottom: clamp(20px, 3vw, 34px); }
.section-sub { margin-top: 8px; font-size: 15.5px; color: var(--muted); }
.section-dark .section-sub { color: inherit; opacity: 0.7; }
.body-sm { font-size: 14.5px; line-height: 1.5; color: var(--muted); }
.section-dark .body-sm { color: inherit; opacity: 0.7; }
.mono {
  font: 500 12.5px/1.4 var(--font-mono);
  letter-spacing: 0.05em;
  color: var(--subtle);
}
.stars { color: var(--red); letter-spacing: 0.04em; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: 13px; padding: 15px 24px;
  font: 600 16px/1.2 var(--font-body);
  text-decoration: none; text-align: center; cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn-primary {
  background: var(--red); color: #fff;
  box-shadow: 0 8px 20px rgba(192, 57, 43, 0.28);
}
.btn-primary:hover { background: var(--red-hover); color: #fff; }
.btn-sm { border-radius: 10px; padding: 9px 15px; font-size: 13.5px; box-shadow: none; white-space: nowrap; }
.btn-md { border-radius: 12px; padding: 14px 22px; font-size: 15.5px; }
.btn-lg {
  border-radius: 14px; padding: 17px 30px; font-size: 17px;
  box-shadow: 0 10px 24px rgba(192, 57, 43, 0.28);
}
.btn-soft { background: var(--blush); color: var(--rust); box-shadow: none; }
.btn-soft:hover { background: #f8d2c6; color: var(--red-deep); }
.btn-soft.btn-sm { font-size: 13.5px; }
.btn-outline {
  background: transparent; color: var(--muted); box-shadow: none;
  border: 1.5px solid var(--line-strong);
}
.btn-outline:hover { border-color: var(--dash-hover); color: var(--ink); }
.btn-ghost {
  background: transparent; color: var(--muted); box-shadow: none;
  border: 1.5px solid var(--line-strong);
}
.btn-ghost:hover { border-color: var(--dash-hover); color: var(--ink); }
.text-link { font-size: 14px; color: var(--muted); }
.text-link:hover { color: var(--red); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(254, 242, 239, 0.93);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--sand);
  transition: box-shadow 0.2s ease;
}
.site-header.scrolled { box-shadow: 0 6px 18px rgba(122, 62, 44, 0.07); }
.header-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding-block: 12px;
}
.brand { display: flex; flex: none; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; }
.brand:hover { color: var(--ink); }
.brand img { height: 30px; width: auto; }
.brand-word {
  font-family: var(--font-display); font-weight: 800; font-size: 19px;
  letter-spacing: -0.02em; line-height: 1;
}
.brand-word em { font-style: italic; font-weight: 600; }
.header-actions { display: flex; align-items: center; gap: 14px; }
.header-link {
  font-size: 12.5px; color: var(--muted); text-decoration: none;
  border-bottom: 1px solid rgba(122, 95, 86, 0.3); padding-bottom: 1px; white-space: nowrap;
}
.header-link:hover { color: var(--red); border-color: currentColor; }

/* Language switcher: a native select dressed as a pill, with a globe on the
   left and a chevron on the right. The header shows short codes, the footer
   full names. */
.lang-switch { position: relative; display: inline-flex; align-items: center; flex: none; }
.lang-switch svg {
  position: absolute; left: 9px; top: 50%; width: 14px; height: 14px;
  transform: translateY(-50%); color: var(--muted); pointer-events: none;
}
.lang-switch select {
  -webkit-appearance: none; appearance: none; margin: 0; cursor: pointer;
  border: 1.5px solid var(--line-strong); border-radius: 999px;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%237a5f56' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 9px center / 9px 6px;
  padding: 6px 24px 6px 28px;
  font: 600 12.5px/1.2 var(--font-body); color: var(--muted);
}
.lang-switch select:hover { border-color: var(--dash-hover); color: var(--ink); }
.lang-switch select:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
.footer-lang { margin-top: 14px; }
.footer-lang select { padding: 8px 30px 8px 30px; font-size: 13.5px; background-color: var(--white); }
/* iOS Safari zooms the whole page into any form control whose text is under
   16px the moment it is tapped, and leaves it zoomed. -webkit-touch-callout
   exists only there, so only iOS gets the larger text. */
@supports (-webkit-touch-callout: none) {
  .lang-switch select { font-size: 16px; }
}

/* Phones: the header keeps the logo, the language switcher and the button.
   The shop link steps aside (the hero and footer still offer it), and the
   Portuguese button drops "grátis", which is twice as long as "Free". */
@media (max-width: 430px) {
  .header-link, .hide-narrow { display: none; }
  .header-inner, .header-actions { gap: 10px; }
  .lang-switch-compact svg { left: 8px; }
  .lang-switch-compact select { padding: 6px 20px 6px 26px; background-position: right 7px center; }
}
/* The smallest phones (320px, which is also a larger iPhone with Display Zoom
   on): the globe steps aside as well, or the longest button, "Gratis
   voorbeeld", pushes the page sideways. */
@media (max-width: 359px) {
  .header-inner, .header-actions { gap: 8px; }
  .lang-switch-compact svg { display: none; }
  .lang-switch-compact select { padding: 6px 18px 6px 10px; background-position: right 6px center; }
  .header-actions .btn-sm { padding-inline: 12px; }
}

/* ---------- Heroes ---------- */
.hero { padding-block: clamp(24px, 4vw, 56px) clamp(28px, 4vw, 48px); }
.hero .split { gap: clamp(28px, 4vw, 52px); }
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--blush); border-radius: 999px; padding: 7px 13px;
  font-size: 12.5px; font-weight: 600; color: var(--rust);
}
.pill::before {
  content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--red);
}
.hero-title {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(38px, 6.2vw, 66px); line-height: 0.99; letter-spacing: -0.04em;
  margin-top: 16px; text-wrap: balance;
}
.hero-lead {
  margin-top: 16px; max-width: 32em;
  font-size: clamp(15.5px, 1.5vw, 19px); line-height: 1.5; color: var(--text);
  text-wrap: pretty;
}

.lp-hero { padding-block: clamp(24px, 4vw, 52px) clamp(28px, 4vw, 48px); }
.lp-hero-img { border-radius: 24px; height: clamp(280px, 40vw, 460px); }
.back-link { font-size: 13px; color: var(--muted); text-decoration: none; }
.back-link:hover { color: var(--red); }
.lp-title {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(34px, 5vw, 56px); line-height: 1; letter-spacing: -0.04em;
  margin-top: 12px; text-wrap: balance;
}
.lp-lead {
  margin-top: 14px; max-width: 32em;
  font-size: clamp(15.5px, 1.5vw, 18px); line-height: 1.55; color: var(--text);
  text-wrap: pretty;
}
.cta-row { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; }
.hero-note { margin-top: 14px; font-size: 13px; color: var(--subtle); }

/* Image boxes crop their photo to fill whatever shape the layout gives them. */
.cover { overflow: hidden; background: var(--sand); }
.cover picture, .cover img { width: 100%; height: 100%; object-fit: cover; }

.trust {
  display: flex; flex-wrap: wrap; gap: 9px 20px; margin-top: 18px;
  font-size: 13px; color: var(--muted);
}
.trust-center { justify-content: center; font-size: 12.5px; }

/* ---------- Before / after pair ---------- */
.pair {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px;
  margin-top: 26px; max-width: 420px;
}
.pair-sm { margin-top: 22px; max-width: 400px; }
.pair-shot { border-radius: 16px; aspect-ratio: 1; }
.pair-label {
  margin-top: 8px; font: 500 11px/1.3 var(--font-mono);
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--subtle);
}
.pair-arrow {
  width: 30px; height: 30px; border-radius: 999px;
  background: var(--ink); color: var(--bg);
  display: grid; place-items: center; font-size: 15px; line-height: 1;
}

/* ---------- Free preview form ---------- */
.form-card {
  background: var(--white); border-radius: 24px;
  padding: clamp(18px, 2.4vw, 26px); box-shadow: var(--shadow-float);
  position: relative;
}
.progress { display: flex; align-items: center; gap: 9px; margin-bottom: 18px; }
.progress-bar {
  flex: 1; height: 5px; border-radius: 99px; background: var(--line);
  transition: background-color 0.25s ease;
}
.progress-bar.is-done { background: var(--red); }
.progress-count {
  font: 500 11.5px/1 var(--font-mono); letter-spacing: 0.03em; color: var(--subtle);
  white-space: nowrap;
}
.step-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(20px, 2.2vw, 24px); line-height: 1.2; letter-spacing: -0.02em;
}
.step-title:focus { outline: none; }
.step-sub { margin: 6px 0 15px; font-size: 14px; line-height: 1.45; color: var(--muted); }
.form-foot { margin-top: 12px; font-size: 12.5px; color: var(--subtle); text-align: center; }

.drop {
  position: relative; display: block; cursor: pointer; text-align: center;
  border: 2px dashed var(--dash); border-radius: 18px; background: var(--paper);
  padding: 30px 16px;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.drop:hover, .drop.dragover { background: var(--blush-hover); border-color: var(--dash-hover); }
.drop:focus-within { outline: 3px solid var(--red); outline-offset: 3px; }
.drop-plus {
  width: 46px; height: 46px; margin: 0 auto 11px; border-radius: 999px;
  background: var(--blush); color: var(--red);
  display: grid; place-items: center; font-size: 23px; line-height: 1;
}
.drop-title { display: block; font-size: 15px; font-weight: 600; }
.drop-hint { display: block; margin-top: 3px; font-size: 13px; color: var(--subtle); }
.file-input {
  position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip-path: inset(50%);
}
.honey { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.chip-done {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-bottom: 15px;
  background: var(--green-soft); border: 1px solid var(--green-line);
  border-radius: 12px; padding: 12px 12px 10px;
}
.photo-list { display: flex; flex-wrap: wrap; gap: 10px 14px; }
.photo-item { position: relative; width: 40px; height: 40px; border-radius: 9px; background: var(--green-line); flex: none; }
.photo-item img { width: 100%; height: 100%; border-radius: 9px; object-fit: cover; }
.photo-remove {
  position: absolute; top: -8px; right: -8px; width: 24px; height: 24px; padding: 0;
  display: grid; place-items: center; border: 2px solid var(--green-soft); border-radius: 999px;
  background: var(--ink); color: #fff; font-size: 14px; line-height: 1; cursor: pointer;
}
.photo-remove:hover { background: var(--red); }
/* A 44px target for a fingertip, around the 24px button people see. */
.photo-remove::before { content: ""; position: absolute; inset: -10px; }
.chip-done-text { flex: 1 0 auto; white-space: nowrap; font-size: 13.5px; font-weight: 600; color: var(--green); }
.chip-change {
  /* The padding makes it a thumb-sized target; the margin takes the space back. */
  background: none; border: 0; padding: 12px 8px; margin: -10px -8px; cursor: pointer;
  font-size: 12.5px; color: var(--muted); text-decoration: underline;
}
.chip-change:hover { color: var(--red); }

.field-input {
  display: block; width: 100%;
  border: 1.5px solid var(--line-strong); border-radius: 13px; background: var(--paper);
  padding: 13px 15px; font: 16px/1.4 var(--font-body); color: var(--ink);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.field-input::placeholder { color: #a8918a; }
.field-input:focus {
  outline: none; background: var(--white); border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.15);
}
textarea.field-input { min-height: 88px; margin-top: 10px; resize: vertical; }

.note-toggle {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 10px;
  background: none; border: 0; padding: 3px 0; cursor: pointer;
  font-size: 13px; font-weight: 600; color: var(--muted);
}
.note-toggle:hover { color: var(--red); }
.note-toggle svg { width: 12px; height: 12px; }
.label-opt { font-weight: 400; color: var(--subtle); }

.consent-check {
  display: flex; gap: 9px; margin-top: 13px; cursor: pointer;
  font-size: 12.5px; line-height: 1.45; color: var(--muted);
}
.consent-check input {
  flex: none; width: 17px; height: 17px; margin: 1px 0 0; accent-color: var(--red); cursor: pointer;
}
.submit {
  width: 100%; margin-top: 15px; padding: 16px; border-radius: 13px; font-size: 16.5px;
  box-shadow: 0 8px 18px rgba(192, 57, 43, 0.3);
}
.submit[disabled] { opacity: 0.7; cursor: wait; }
.form-status {
  margin-top: 12px; text-align: center; font-size: 13.5px; font-weight: 600; color: var(--red-hover);
}
.form-status:empty { display: none; }
.form-after { text-align: center; margin-top: 10px; font-size: 12.5px; color: var(--subtle); }
.form-after a { color: var(--muted); }

/* ---------- Photo strip ---------- */
.marquee { overflow: hidden; padding-block: 8px clamp(28px, 4vw, 48px); }
.marquee-track { display: flex; width: max-content; animation: marquee 46s linear infinite; }
.marquee-set { display: flex; gap: 14px; padding-right: 14px; }
.marquee img { height: clamp(130px, 15vw, 200px); width: auto; border-radius: 16px; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee { overflow-x: auto; }
  .marquee-track { animation: none; }
  .marquee-set[aria-hidden="true"] { display: none; }
}

/* ---------- Steps ---------- */
.step-num {
  width: 34px; height: 34px; border-radius: 999px;
  background: var(--blush); color: var(--red);
  display: grid; place-items: center; font-weight: 700; font-size: 15px;
}
.step .h3 { margin: 12px 0 6px; }
.craft .body-sm { margin-top: 7px; }

/* ---------- Cards ---------- */
.card { background: var(--white); border-radius: 22px; overflow: hidden; box-shadow: var(--shadow-lift); }
/* 4:3 rather than a fixed 230px, so portrait product photos keep their subject;
   each photo also says where its subject sits (object-position, set inline). */
.card .cover { aspect-ratio: 4 / 3; }
.card-body { padding: 18px 20px 20px; }
.card-title { font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: -0.02em; }
.card-title a { color: inherit; text-decoration: none; }
.card-title a:hover { color: var(--red); }
.card-text { margin: 7px 0 12px; }
.card-actions { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
.card-actions .text-link { font-size: 13px; }

.size-card {
  background: var(--white); border-radius: 20px; padding: 22px; box-shadow: var(--shadow-card);
  display: flex; flex-direction: column; gap: 6px;
}
.size-num {
  font-family: var(--font-display); font-weight: 800; font-size: 34px;
  letter-spacing: -0.03em; line-height: 1.1;
}
.size-card .body-sm { font-size: 14px; line-height: 1.45; }

.info-card { background: var(--white); border-radius: 20px; padding: 22px; box-shadow: var(--shadow-card); }
.info-card .h3 { font-size: 18px; margin-bottom: 12px; }
.info-list { display: flex; flex-direction: column; gap: 8px; font-size: 14.5px; line-height: 1.45; color: var(--text); }
.info-list .soft { color: var(--muted); }

.quote { background: var(--bg); border-radius: 18px; padding: 20px; }
.quote .stars { font-size: 13.5px; }
.quote-text { margin: 10px 0 12px; font-size: 15px; line-height: 1.55; }
.quote-by { font-size: 13px; color: var(--subtle); }
.more-link { margin-top: 18px; font-size: 13.5px; }

.tile figcaption { margin-top: 9px; font-size: 13px; color: var(--subtle); }

/* ---------- Clickable gallery photos ---------- */
.cover > .zoom { position: relative; display: block; width: 100%; height: 100%; cursor: zoom-in; }
.zoom img { transition: transform 0.35s ease; }
.zoom:hover img { transform: scale(1.03); }
.zoom::after {
  content: ""; position: absolute; right: 10px; bottom: 10px; width: 34px; height: 34px;
  border-radius: 999px; background: rgba(42, 28, 24, 0.6) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='8.5' cy='8.5' r='5.5'/%3E%3Cpath d='M12.6 12.6 17 17M8.5 6.3v4.4M6.3 8.5h4.4'/%3E%3C/svg%3E") center / 17px no-repeat;
  opacity: 0; transition: opacity 0.2s ease;
}
.zoom:hover::after, .zoom:focus-visible::after { opacity: 1; }
@media (hover: none) { .zoom::after { opacity: 0.85; } }
.zoom:focus-visible { outline: 3px solid var(--red); outline-offset: -3px; }
@media (prefers-reduced-motion: reduce) { .zoom img { transition: none; } .zoom:hover img { transform: none; } }

/* ---------- Lightbox (built by main.js) ---------- */
html.lightbox-open { overflow: hidden; }
.lightbox {
  width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0; padding: 0;
  border: 0; background: transparent; color: #fff; overflow: hidden;
}
.lightbox::backdrop { background: rgba(20, 12, 10, 0.92); }
.lightbox-figure {
  box-sizing: border-box; height: 100%; margin: 0; padding: 60px 72px 22px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
}
.lightbox-figure picture { display: flex; min-height: 0; justify-content: center; }
.lightbox-figure img {
  width: auto; height: auto; max-width: 100%; max-height: calc(100vh - 130px); max-height: calc(100dvh - 130px);
  border-radius: 14px; object-fit: contain; background: rgba(255, 255, 255, 0.04);
}
.lightbox-caption { max-width: 60ch; text-align: center; font-size: 14px; line-height: 1.45; color: rgba(254, 242, 239, 0.85); }
.lightbox-count { font: 500 12px/1 var(--font-mono); letter-spacing: 0.08em; color: rgba(254, 242, 239, 0.6); }
.lightbox-btn {
  position: fixed; z-index: 1; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 999px;
  display: grid; place-items: center; cursor: pointer;
  background: rgba(255, 255, 255, 0.12); color: #fff; transition: background-color 0.15s ease;
}
.lightbox-btn:hover { background: rgba(255, 255, 255, 0.24); }
.lightbox-btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.lightbox-btn svg { width: 20px; height: 20px; }
.lightbox-close { top: 14px; right: 14px; }
.lightbox-prev { left: 14px; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 14px; top: 50%; transform: translateY(-50%); }
@media (max-width: 640px) {
  .lightbox-figure { padding: 60px 12px 84px; }
  .lightbox-figure img { max-height: calc(100vh - 190px); max-height: calc(100dvh - 190px); }
  .lightbox-prev, .lightbox-next { top: auto; bottom: 18px; transform: none; }
  .lightbox-prev { left: calc(50% - 58px); }
  .lightbox-next { right: calc(50% - 58px); }
}
.tile .cover { border-radius: 18px; height: 220px; }
.shot { border-radius: 20px; height: clamp(220px, 26vw, 300px); }

.sibling { display: block; border-radius: 20px; overflow: hidden; background: var(--bg); color: var(--ink); text-decoration: none; }
.sibling:hover { color: var(--ink); }
.sibling .cover { aspect-ratio: 3 / 2; }
.sibling-body { padding: 16px 18px 18px; }
.sibling .body-sm { margin: 7px 0 10px; }
.sibling-more { font-size: 13.5px; font-weight: 600; color: var(--red); }
.sibling:hover .sibling-more { color: var(--red-deep); }

.panel {
  background: var(--paper); border: 1px solid var(--sand); border-radius: 22px;
  padding: clamp(18px, 2.4vw, 26px);
}
.callout { margin-top: 20px; background: var(--blush); border-radius: 16px; padding: 16px 18px; }
.callout .h3 { font-size: 17px; color: var(--red-deep); }
.callout p { margin-top: 7px; font-size: 14px; line-height: 1.5; color: var(--rose); }

/* ---------- Lists ---------- */
.ticks { display: flex; flex-direction: column; gap: 11px; font-size: 15px; line-height: 1.45; color: var(--text); }
.ticks-tight { gap: 10px; }
.ticks li { display: flex; gap: 10px; }
.mark { flex: none; color: var(--red); }
.mark-yes { color: var(--green); font-weight: 600; }
.mark-no { color: var(--red); font-weight: 600; }
.gift-list {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  gap: 9px 18px; font-size: 14.5px; color: var(--text);
}
.gift-list li { display: flex; gap: 9px; }
.tips-note { margin-top: 16px; font-size: 14px; color: var(--muted); }

/* ---------- FAQ ---------- */
.faq details { border-top: 1px solid var(--line); }
.faq summary {
  display: flex; gap: 12px; align-items: baseline; justify-content: space-between;
  padding: 16px 0; cursor: pointer; list-style: none;
  font-weight: 600; font-size: 16px; line-height: 1.35;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; color: var(--red); font-size: 17px; line-height: 1; }
.faq details[open] summary::after { content: "\2013"; }
.faq summary:hover { color: var(--red-deep); }
.faq details p { margin: -7px 0 16px; max-width: 42em; font-size: 15px; line-height: 1.55; color: var(--muted); }
.faq-compact summary { padding: 15px 0; font-size: 15.5px; }
.faq-compact details p { font-size: 14.5px; }

/* ---------- Closing call to action ---------- */
.closer { background: var(--blush); padding-block: clamp(38px, 5.5vw, 74px); text-align: center; }
.closer .h2 {
  margin: 0 auto; max-width: none;
  font-size: clamp(29px, 4.2vw, 50px); line-height: 1.02; letter-spacing: -0.04em;
}
.closer-text { margin: 14px auto 24px; font-size: clamp(15.5px, 1.6vw, 18px); line-height: 1.5; color: var(--rose); }
.closer-small { margin-top: 16px; font-size: 13px; color: var(--rose); }
.closer-link { margin-top: 14px; font-size: 13.5px; }
.closer-link a { color: var(--rose); }
.closer-link a:hover { color: var(--red-deep); }

/* ---------- Thank you page ---------- */
.thanks-hero { padding-block: clamp(32px, 5vw, 68px) clamp(24px, 3vw, 40px); }
.badge-ok {
  width: 56px; height: 56px; margin-bottom: 18px; border-radius: 999px;
  background: var(--green-bg); color: var(--green);
  display: grid; place-items: center; font-size: 28px; line-height: 1;
}
.thanks-title {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(32px, 5vw, 54px); line-height: 1; letter-spacing: -0.04em; text-wrap: balance;
}
.thanks-lead { margin-top: 16px; max-width: 34em; font-size: clamp(15.5px, 1.6vw, 18px); line-height: 1.55; color: var(--text); }
.thanks-lead strong { color: var(--ink); overflow-wrap: anywhere; }
.sent-card {
  margin-top: 24px; max-width: 460px; display: flex; align-items: center; gap: 14px;
  background: var(--white); border-radius: 18px; padding: 16px 18px; box-shadow: var(--shadow-lift);
}
.sent-card img { width: 54px; height: 54px; border-radius: 12px; object-fit: cover; flex: none; }
.sent-text { font-size: 14.5px; line-height: 1.45; color: var(--text); }
.sent-text span { color: var(--subtle); }
.next-steps { padding-bottom: clamp(30px, 4vw, 50px); }
.next-steps .grid { margin-top: 16px; }
.next-title { font-weight: 600; font-size: 15.5px; }
.next-steps .body-sm { margin-top: 6px; }
.wait-img { border-radius: 18px; height: 210px; }
.wait-quote { margin-top: 22px; max-width: 560px; }
.button-row { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Privacy and 404 ---------- */
.legal { padding-block: clamp(32px, 5vw, 64px) clamp(36px, 5vw, 72px); }
.legal-title {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(32px, 4.6vw, 50px); line-height: 1.01; letter-spacing: -0.04em; margin-top: 10px;
}
.legal-lead { margin-top: 14px; font-size: 16px; line-height: 1.6; color: var(--text); }
.legal-card { margin-top: 16px; background: var(--white); border-radius: 20px; padding: 22px; box-shadow: var(--shadow-card); }
.legal-cards { margin-top: 30px; }
.legal-cards > :first-child { margin-top: 0; }
.legal-card .info-list { margin-top: 12px; gap: 9px; font-size: 15px; line-height: 1.55; }
.legal-card.panel { box-shadow: none; }
.legal-card p { margin-top: 12px; font-size: 15px; line-height: 1.55; color: var(--text); }
.prose { margin-top: clamp(36px, 5vw, 56px); padding-top: clamp(28px, 4vw, 40px); border-top: 1px solid var(--line); }
.prose .h2 { max-width: none; }
.prose h3 {
  margin: 30px 0 10px; font-family: var(--font-display); font-weight: 700;
  font-size: 21px; line-height: 1.2; letter-spacing: -0.02em;
}
.prose p:not([class]) { margin: 0 0 14px; font-size: 15.5px; line-height: 1.65; color: var(--text); }
.prose strong { color: var(--ink); }
.prose code {
  font-family: var(--font-mono); font-size: 0.88em;
  background: var(--blush); color: var(--rust); padding: 1px 5px; border-radius: 5px;
}
.legal-updated { margin: 10px 0 6px; font-size: 13.5px; color: var(--subtle); }
.legal-foot { margin-top: 24px; font-size: 13.5px; color: var(--subtle); }
.link-list { margin-top: 22px; display: flex; flex-direction: column; gap: 10px; font-size: 15.5px; color: var(--text); }

/* ---------- Footer ---------- */
.site-footer { background: var(--bg); border-top: 1px solid var(--sand); padding-block: clamp(28px, 3.5vw, 44px); }
.footer-inner { display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; align-items: flex-start; }
.site-footer .brand img { height: 28px; }
.site-footer .brand-word { font-size: 17px; }
.footer-tag { margin-top: 10px; font-size: 13.5px; color: var(--muted); }
.footer-nav { display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 13.5px; }
.footer-nav a, .footer-nav .linklike { color: var(--muted); text-decoration: none; font-size: 13.5px; }
.footer-nav a:hover, .footer-nav .linklike:hover { color: var(--red); }
.footer-legal { margin-top: 22px; font-size: 12.5px; color: var(--subtle); }
.footer-legal a { color: inherit; }

/* ---------- Cookie consent ---------- */
.consent {
  position: fixed; z-index: 90; left: 50%; bottom: 16px; transform: translateX(-50%);
  width: min(calc(100vw - 32px), 460px);
  background: var(--white); border: 1px solid var(--sand); border-radius: 20px;
  box-shadow: 0 14px 42px rgba(42, 28, 24, 0.2);
  padding: 18px 20px 16px;
}
.consent-title {
  font-family: var(--font-display); font-weight: 700; font-size: 18px;
  letter-spacing: -0.02em; margin-bottom: 6px;
}
.consent-text { font-size: 13.5px; line-height: 1.5; color: var(--text); margin-bottom: 14px; }
.consent-actions { display: flex; gap: 10px; }

/* ---------- Success stories ----------
   One customer's order told in four steps: the photo they sent, the preview we
   drew from it, the 3D model they turned before approving, and the piece in
   their hands. The four sit in a row on a wide screen with an arrow between
   them; below 860px they fall into two rows of two and the arrows go, because
   an arrow pointing off the end of a row reads as a mistake. The numbers carry
   the order either way. */
.story + .story { margin-top: clamp(40px, 5.5vw, 72px); padding-top: clamp(40px, 5.5vw, 72px); border-top: 1px solid var(--line); }
.story-head { max-width: 40em; }
.story-title {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(23px, 2.9vw, 33px); line-height: 1.08; letter-spacing: -0.03em;
  margin-top: 8px; text-wrap: balance;
}
.story-lead { margin-top: 11px; font-size: 15.5px; line-height: 1.55; color: var(--text); text-wrap: pretty; }

.story-flow {
  --flow-gap: clamp(14px, 1.8vw, 22px);
  margin-top: clamp(20px, 2.6vw, 30px);
  display: grid; gap: clamp(20px, 2.4vw, 28px) var(--flow-gap);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 860px) {
  .story-flow { --flow-gap: clamp(20px, 2.4vw, 30px); grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.story-step { display: flex; flex-direction: column; min-width: 0; }
.story-stage {
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
  font: 500 11px/1.3 var(--font-mono); letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--subtle);
}
.story-stage-num {
  flex: none; width: 19px; height: 19px; border-radius: 999px;
  background: var(--blush); color: var(--red);
  display: grid; place-items: center; font-size: 10.5px; font-weight: 700;
}
/* Holds the arrow, which would be clipped by the picture's own overflow. */
.story-frame { position: relative; }
@media (min-width: 860px) {
  .story-step + .story-step .story-frame::before {
    content: "→"; position: absolute; z-index: 2; top: 50%; left: 0;
    transform: translate(calc(-50% - var(--flow-gap) / 2), -50%);
    width: 26px; height: 26px; border-radius: 999px;
    background: var(--ink); color: var(--bg);
    display: grid; place-items: center; font-size: 13px; line-height: 1;
  }
}
.story-shot { border-radius: 18px; aspect-ratio: 3 / 4; box-shadow: var(--shadow-card); }
/* The clip carries its own first frame as a poster, so the step is a still
   photo until the clip is fetched, and a still photo for good where it cannot
   be played at all. */
.story-shot video { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--sand); }
/* Two orders here began as two separate photos — her and the cat, one kitten
   and the other. Both sit in the one step, offset behind each other, so the
   preview render keeps a step of its own and the flow stays four wide. The
   white edge is what separates them where they overlap. */
.story-pair { position: relative; background: none; box-shadow: none; }
.story-pair picture {
  position: absolute; display: block; width: 68%; aspect-ratio: 3 / 4;
  border: 3px solid var(--white); border-radius: 15px; overflow: hidden;
  background: var(--sand); box-shadow: var(--shadow-lift);
}
.story-pair img { width: 100%; height: 100%; object-fit: cover; }
.story-pair-a { left: 0; top: 0; z-index: 1; }
.story-pair-b { right: 0; bottom: 0; z-index: 2; }

.story-note { margin-top: 10px; font-size: 13px; line-height: 1.45; color: var(--subtle); text-wrap: pretty; }

/* The turntable step. The badge says the model really does turn, before anyone
   has waited to find out; the button is the way in for a visitor who has asked
   the system not to animate things, and the way out for everyone else. */
.story-3d { position: relative; }
.story-3d-badge {
  position: absolute; z-index: 1; left: 10px; top: 10px; pointer-events: none;
  padding: 4px 9px; border-radius: 999px;
  background: rgba(42, 28, 24, 0.62); color: #fff;
  font: 500 10.5px/1 var(--font-mono); letter-spacing: 0.06em;
}
.story-play {
  position: absolute; z-index: 2; right: 10px; bottom: 10px;
  width: 34px; height: 34px; border: 0; border-radius: 999px; padding: 0;
  background: rgba(42, 28, 24, 0.62); color: #fff;
  display: grid; place-items: center; cursor: pointer;
  transition: background 0.2s ease, opacity 0.2s ease;
}
.story-play:hover { background: rgba(42, 28, 24, 0.82); }
.story-play:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
.story-play svg { width: 15px; height: 15px; fill: currentColor; }
.story-play .icon-pause, .story-play[data-playing="true"] .icon-play { display: none; }
.story-play[data-playing="true"] .icon-pause { display: block; }
/* Nothing to press before the script is running, or where video cannot play. */
.story-play[hidden] { display: none; }

.story-more { margin-top: clamp(22px, 3vw, 32px); }

/* The one story the home page carries, as a taste of the page holding the rest. */
.story-teaser .story-head { max-width: 38em; }