/* ===== Wishcraft: tokens + base ===== */
:root {
  --h: 80px;
  --pad: clamp(16px, 4vw, 32px);   /* page side gutter, same on every page */
  --wrap: 1240px;                  /* page content width, same on every page */
  --bg: #F8F2E9;
  --surface: #FFFDF9;
  --text: #30242A;
  --muted: #65545A;
  --ink: #4A1025;           /* headings / brand */
  --gold: #C5A46D;
  --gold-text: #7E5A1B;     /* gold for TEXT on light surfaces (AA contrast) */
  --line: rgba(184, 147, 75, .38);
  --shade: rgba(107, 39, 55, .07);
  --shade-strong: rgba(107, 39, 55, .14);
  --btn-bg: #4A1025;
  --btn-fg: #FFFDF9;
  --glow: rgba(242, 220, 214, .9);
  --shadow: 0 18px 40px rgba(107, 39, 55, .16);
  /* envelope (same in both modes) */
  --petal: #EAD2D0;
  --env-a: #4A1025;
  --env-b: #681F36;
  --paper: #F8F2E9;
  --font-head: "Playfair Display", Georgia, serif;
  --font-body: "DM Sans", system-ui, sans-serif;
  --font-script: "Playfair Display", Georgia, serif;
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 400 1rem/1.65 var(--font-body);
  transition: background .3s ease, color .3s ease;
}
body.no-scroll { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
.container { width: min(100% - 2 * var(--pad), var(--wrap)); margin-inline: auto; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.skip { position: absolute; inset-inline-start: 12px; top: -60px; z-index: 2000; padding: 10px 16px; background: var(--btn-bg); color: var(--btn-fg); border-radius: 8px; }
.skip:focus { top: 12px; }

/* ===== Buttons ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 10px 22px; border-radius: 999px;
  font: 500 .9375rem/1 var(--font-body); text-decoration: none; cursor: pointer;
  border: 1.5px solid transparent;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
}
.btn--solid { background: var(--btn-bg); color: var(--btn-fg); }
.btn--solid:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.btn--ghost { border-color: var(--gold); color: var(--ink); background: transparent; }
.btn--ghost:hover { background: var(--gold); color: #2A0C18; transform: translateY(-2px); }
.btn--lg { min-height: 52px; padding: 14px 30px; font-size: 1rem; }

/* ===== Header (same structure as the reference navbar) ===== */
:root { --h: 80px; }
.hdr { position: sticky; top: 0; z-index: 1000; height: var(--h); background: var(--bg); border-bottom: 1px solid var(--line); transition: box-shadow .25s ease, background .3s ease; }
.hdr.is-scrolled { box-shadow: var(--shadow); }
.hdr__inner { height: 100%; width: min(100% - 2 * var(--pad), var(--wrap)); margin-inline: auto; padding-inline: 0; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 20px; }

/* brand */
.brand { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 12px; color: var(--text); text-decoration: none; }
.brand__mark { width: 44px; height: 44px; flex: none; border-radius: 50%; transition: transform .5s ease; }
.brand:hover .brand__mark { transform: rotate(-8deg) scale(1.05); }
.brand__text { display: flex; flex-direction: column; line-height: 1.05; white-space: nowrap; }
.brand__name { font: 700 1.625rem/1 var(--font-head); letter-spacing: .01em; color: var(--ink); }
.brand__tag { margin-top: 4px; font-size: .8125rem; font-weight: 500; color: var(--muted); }

/* desktop nav: pill group centred between brand and actions */
.menu { display: contents; }
.nav { justify-self: center; }
.nav__list { display: flex; align-items: center; gap: 2px; margin: 0; padding: 4px; background: var(--shade); border-radius: 999px; }
.nav__item { position: relative; }
.nav__link, .nav__row { border-radius: 999px; }
.nav__link { display: inline-block; padding: 10px 18px; font-size: .9375rem; font-weight: 500; white-space: nowrap; color: var(--text); text-decoration: none; transition: background .2s ease, color .2s ease, box-shadow .2s ease; }
.nav__row { display: flex; align-items: center; transition: background .2s ease, box-shadow .2s ease; }
.nav__row .nav__link { padding-inline: 18px 4px; }
.nav__toggle { width: 28px; height: 28px; margin-inline-end: 8px; display: grid; place-items: center; background: none; border: 0; border-radius: 50%; color: var(--text); font-size: 11px; cursor: pointer; }
.nav__toggle i { transition: transform .2s ease; }
.has-sub.is-open .nav__toggle i { transform: rotate(180deg); }
.nav__link:hover { color: var(--ink); }
.nav__item > .nav__link:hover, .nav__row:hover { background: var(--shade-strong); }
.nav__item.is-current > .nav__link, .nav__item.is-current > .nav__row { background: var(--surface); box-shadow: 0 1px 4px rgba(0, 0, 0, .12), 0 0 0 1px var(--line); }
.nav__item.is-current > .nav__link, .nav__item.is-current .nav__row .nav__link, .nav__item.is-current .nav__toggle { color: var(--ink); font-weight: 600; }

/* dropdown */
.sub { position: absolute; top: 100%; inset-inline-start: 0; z-index: 5; min-width: 148px; margin: 7px 0 0; padding: 4px; display: none; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); }
.sub::before { content: ""; position: absolute; inset-inline: 0; top: -8px; height: 8px; }
.has-sub.is-open > .sub { display: block; }
@media (min-width: 1024px) and (hover: hover) { .has-sub:hover > .sub, .has-sub:focus-within > .sub { display: block; } }
.sub__link { display: block; padding: 9px 12px; min-height: 38px; border-radius: 10px; text-align: center; font-size: .9375rem; line-height: 1.25; font-weight: 500; color: var(--text); text-decoration: none; transition: background .2s ease, color .2s ease; }
.sub__link:hover { background: var(--shade); color: var(--ink); }
.sub__link[aria-current="page"] { background: var(--shade-strong); color: var(--ink); }

/* actions: dark mode, RTL, Enquire */
.actions { display: flex; align-items: center; gap: 10px; }
/* theme + direction toggles live in the header itself (never inside the hamburger menu) */
.hdr__inner { grid-template-columns: auto 1fr auto auto; }
.nav { order: 1; } .hdr__tools { order: 2; } .actions { order: 3; } .burger { order: 4; }
.hdr__tools { position: relative; z-index: 2; display: flex; align-items: center; gap: 10px; margin-inline-end: -10px; }
.icon-btn { width: 42px; height: 42px; display: grid; place-items: center; background: var(--shade); border: 1px solid var(--line); border-radius: 50%; color: var(--text); font-size: 16px; cursor: pointer; transition: background .2s ease, color .2s ease; }
.icon-btn:hover { background: var(--shade-strong); color: var(--ink); }
.ico-sun { display: none; }
.hdr__enq { height: 44px; min-height: 0; padding-inline: 22px; gap: 10px; }
.hdr__enq i { font-size: 12px; transition: translate .2s ease; }
.hdr__enq:hover i { translate: 3px 0; }

/* hamburger: round button, same look as the theme / RTL icons */
.burger { --bsz: 42px; position: relative; z-index: 2; display: none; width: var(--bsz); height: var(--bsz); place-items: center; padding: 0; background: var(--shade); border: 1px solid var(--line); border-radius: 50%; color: var(--text); font-size: 16px; cursor: pointer; transition: background .2s ease, color .2s ease; }
.burger:hover { background: var(--shade-strong); color: var(--ink); }
.burger .fa-xmark { display: none; }
/* hamburger lines drawn in CSS so they never depend on the icon font loading */
.burger i { display: none !important; }
.burger::before, .burger::after { content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 2px; margin: -1px 0 0 -9px; border-radius: 2px; background: currentColor; transition: transform .25s ease, box-shadow .25s ease; }
.burger::before { transform: translateY(-6px); box-shadow: 0 6px 0 currentColor; }
.burger::after { transform: translateY(6px); }
.burger[aria-expanded="true"]::before { transform: rotate(45deg); box-shadow: none; }
.burger[aria-expanded="true"]::after { transform: rotate(-45deg); }
body.no-scroll { overflow: hidden; }

/* large laptops: keep one row */
@media (min-width: 1024px) and (max-width: 1180px) {
  .hdr__inner { gap: 12px; }
  .brand__name { font-size: 1.5rem; }
  .nav__link { padding: 9px 12px; font-size: .875rem; }
  .nav__row .nav__link { padding-inline: 12px 2px; }
  .nav__toggle { margin-inline-end: 6px; }
  .actions { gap: 8px; }
  .hdr__enq { padding-inline: 16px; font-size: .875rem; }
}

/* tablet + mobile (below 1024px): dropdown menu card. 1024px and up keeps the desktop header */
@media (max-width: 1023px) {
  :root { --h: 68px; }
  .hdr__inner { display: flex; justify-content: flex-start; gap: 8px; }
  .hdr__tools { margin-inline: auto 0; margin-inline-end: 0; gap: 8px; }
  .burger { display: grid; }
  .brand__mark { width: 40px; height: 40px; }
  .brand__name { font-size: 1.5rem; }

  /* compact dropdown card under the header (page stays visible behind it) */
  .menu {
    position: fixed; top: calc(var(--h) + 8px); right: var(--pad); left: auto; z-index: 1; width: min(340px, calc(100% - 2 * var(--pad))); max-height: calc(100vh - var(--h) - 24px); max-height: calc(100dvh - var(--h) - 24px); overflow-y: auto; display: none; flex-direction: column;
    background: var(--surface); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow);
  }
  [dir="rtl"] .menu { right: auto; left: var(--pad); }
  .menu.is-open { display: flex; animation: menu-in .22s ease both; }
  @keyframes menu-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

  .nav { flex: none; width: 100%; min-height: 0; justify-self: auto; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 10px 12px 6px; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 2px; margin: 0; padding: 0; background: none; border-radius: 0; }
  .nav__item { padding: 0; text-align: start; border-bottom: 0; }
  .nav__link, .nav__row { border-radius: 12px; }
  .nav__link { display: block; padding: 11px 14px; font: 600 1.0625rem/1.25 var(--font-head); }
  .nav__row { justify-content: space-between; }
  .nav__row .nav__link { display: block; flex: 1; padding: 11px 14px; }
  .nav__toggle { width: 40px; height: 40px; margin-inline-end: 2px; font-size: 12px; }
  .nav__item > .nav__link:hover, .nav__row:hover { background: var(--shade); }
  .nav__item.is-current > .nav__link, .nav__item.is-current > .nav__row { background: var(--shade-strong); box-shadow: none; }
  .sub { position: static; min-width: 0; margin: 0; padding: 2px 0 6px; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
  .sub::before { display: none; }
  .sub__link { text-align: start; padding: 9px 14px 9px 28px; }
  [dir="rtl"] .sub__link { padding: 9px 28px 9px 14px; }
  .actions { flex: none; justify-content: stretch; padding: 8px 12px 12px; }
  .actions .hdr__enq { width: 100%; }
}
@media (max-width: 1023px) {
  .hdr__tools { margin-inline-end: 0; }
}
@media (max-width: 440px) {
  .brand__tag { display: none; }
  .brand { gap: 10px; }
  .brand__mark { width: 36px; height: 36px; }
  .brand__name { font-size: 1.375rem; }
  .hdr__tools { gap: 6px; }
  .hdr__tools .icon-btn { width: 38px; height: 38px; font-size: 15px; }
  .burger { --bsz: 38px; }
}
@media (max-width: 340px) {
  .hdr__tools .icon-btn { width: 34px; height: 34px; }
  .burger { --bsz: 34px; }
  .brand__name { font-size: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hdr *, .menu { transition: none !important; }
  .nav__item { opacity: 1 !important; transform: none !important; }
}

/* ===== Hero ===== */
/* palette colours are registered so they glide from one palette to the next */
@property --p-cover  { syntax: "<color>"; inherits: true; initial-value: #4A1025; }
@property --p-cover2 { syntax: "<color>"; inherits: true; initial-value: #4A1827; }
@property --p-paper  { syntax: "<color>"; inherits: true; initial-value: #F8F2E9; }
@property --p-a      { syntax: "<color>"; inherits: true; initial-value: #F0D79B; }
@property --p-b      { syntax: "<color>"; inherits: true; initial-value: #C9A45C; }
@property --p-d      { syntax: "<color>"; inherits: true; initial-value: #8F6A25; }
@property --p-ink    { syntax: "<color>"; inherits: true; initial-value: #4A1025; }

[data-style="royal"]    { --p-cover: #4A1025; --p-cover2: #4A1827; --p-paper: #F8F2E9; --p-a: #F0D79B; --p-b: #C9A45C; --p-d: #8F6A25; --p-ink: #4A1025; }
[data-style="blush"]    { --p-cover: #E8BFB8; --p-cover2: #D49E96; --p-paper: #FFF6F2; --p-a: #F9DACB; --p-b: #B8705F; --p-d: #8E4A3D; --p-ink: #8E4A3D; }
[data-style="midnight"] { --p-cover: #1E2A44; --p-cover2: #121A2E; --p-paper: #F4F6FA; --p-a: #9AA6C2; --p-b: #AEB6C8; --p-d: #4A5775; --p-ink: #1E2A44; }
[data-style="rustic"]   { --p-cover: #B58B63; --p-cover2: #9A7048; --p-paper: #F6EBDA; --p-a: #F3E6CF; --p-b: #B58B63; --p-d: #7A5430; --p-ink: #5E4026; }
[data-style="destination"] { --p-cover: #2F6A6B; --p-cover2: #1F4B4D; --p-paper: #F3F6F2; --p-a: #F6E7B0; --p-b: #D9B96A; --p-d: #2F6A6B; --p-ink: #1F4B4D; }
[data-style="sage"]     { --p-cover: #5F7A66; --p-cover2: #44604C; --p-paper: #F7F8F1; --p-a: #F5E8B8; --p-b: #D2AE62; --p-d: #8A6A22; --p-ink: #44604C; }

.hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: calc(100svh - var(--h)); display: flex; align-items: center;
  padding-block: clamp(28px, 4vw, 56px);
  background:
    radial-gradient(52% 62% at 76% 46%, var(--glow), transparent 72%),
    radial-gradient(40% 40% at 4% 0%, var(--shade-strong), transparent 70%),
    var(--bg);
}
.hero::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); opacity: .6; }
.hero__wrap {
  width: min(100% - 2 * var(--pad), var(--wrap)); margin-inline: auto;
  display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); align-items: center; gap: clamp(24px, 4vw, 64px);
}

/* ---- copy ---- */
.eyebrow { display: inline-flex; align-items: center; gap: 12px; margin: 0 0 14px; font-size: .8125rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-text); }
.eyebrow span { width: 38px; height: 1px; background: var(--gold); position: relative; }
.eyebrow span::after { content: ""; position: absolute; inset-inline-end: -2px; top: 50%; width: 6px; height: 6px; background: var(--gold); transform: translateY(-50%) rotate(45deg); }
.hero h1 { margin: 0; font: 600 clamp(2.4rem, 4.4vw, 4rem)/1.04 var(--font-head); letter-spacing: -.01em; color: var(--ink); text-wrap: balance; }
.h1__script { display: block; margin-top: .04em; font: 400 1.15em/1.1 var(--font-script); letter-spacing: 0; color: var(--gold-text); padding-bottom: .08em; }
.hero__text { max-width: 50ch; margin: 14px 0 0; font-size: 1.0625rem; color: var(--muted); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.hero__actions .btn i { margin-inline-start: 10px; font-size: .75rem; transition: translate .2s ease; }
.hero__actions .btn:hover i { translate: 3px 0; }

.pick { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--line); max-width: 520px; }
.pick__label { font-size: .8125rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.pick__dots { display: flex; }
.dot { width: 44px; height: 44px; display: grid; place-items: center; padding: 0; background: none; border: 0; border-radius: 50%; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.dot span { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, var(--p-cover) 52%, var(--p-b) 52%); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); transition: transform .25s ease, box-shadow .25s ease; }
.dot:hover span { transform: scale(1.12); }
.dot[aria-pressed="true"] span { box-shadow: 0 0 0 2.5px var(--bg), 0 0 0 4px var(--gold); transform: scale(1.06); }
.pick__name { min-width: 8.5em; font: 600 1.25rem/1 var(--font-head); color: var(--ink); }

.facts { display: flex; flex-wrap: wrap; gap: 14px clamp(18px, 3vw, 36px); margin-top: 18px; }
.facts li { display: flex; flex-direction: column; gap: 2px; padding-inline-start: 14px; border-inline-start: 2px solid var(--gold); }
.facts strong { font: 700 1.375rem/1.1 var(--font-head); color: var(--ink); }
.facts span { font-size: .8125rem; color: var(--muted); }

/* ---- stage: the invitation suite ---- */
.stage { container-type: inline-size; width: min(100%, 540px); margin-inline: auto; justify-self: center; }
.stage__in { position: relative; width: 100%; aspect-ratio: 1 / 1.06; }
.stage { transition: --p-cover .7s ease, --p-cover2 .7s ease, --p-paper .7s ease, --p-a .7s ease, --p-b .7s ease, --p-d .7s ease, --p-ink .7s ease; }

.ly { position: absolute; translate: calc(var(--mx, 0) * var(--z, 0) * 1px) calc(var(--my, 0) * var(--z, 0) * 1px); transition: translate .25s ease-out; }
.fl { animation: rise .9s cubic-bezier(.2, .7, .2, 1) var(--dl, 0s) backwards, bob 7s ease-in-out calc(var(--dl, 0s) + .9s) infinite; }
@keyframes rise { from { opacity: 0; transform: translateY(34px) scale(.97); } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

/* wedding arch behind everything */
.ly--arch { inset: 0 9% 0 9%; }
.ly--arch .fl { height: 100%; animation: rise 1s ease backwards; }
.arch { position: relative; height: 100%; border-radius: 999px 999px 0 0; border: 1px solid var(--line); background: linear-gradient(180deg, var(--shade-strong), transparent 78%); }
.arch::after { content: ""; position: absolute; inset: 3.2cqw 3.2cqw 0; border-radius: 999px 999px 0 0; border: 1px solid var(--line); border-bottom: 0; }

/* leaf sprigs */
.ly--sprigL { left: 3%; bottom: 8%; width: 11%; rotate: -8deg; }
.ly--sprigR { right: 2%; top: 9%; width: 10%; rotate: 14deg; }
.ly--sprigR .fl { animation-delay: .6s, 1.5s; }
.ly svg { display: block; width: 100%; height: auto; }
.ly--sprigL svg, .ly--sprigR svg { fill: none; stroke: var(--p-b); stroke-width: 1.4; stroke-linecap: round; }
.ly--sprigL ellipse, .ly--sprigR ellipse { fill: var(--p-b); fill-opacity: .22; }

/* envelope */
.ly--env { left: 9%; width: 82%; bottom: 3%; }
.env__back { aspect-ratio: 300 / 150; border-radius: 4px; background: linear-gradient(160deg, var(--p-cover2), var(--p-cover)); box-shadow: 0 2.4cqw 5cqw rgba(40, 10, 20, .28); }
.ly--front { left: 9%; width: 82%; bottom: 3%; pointer-events: none; }
.env__front { position: relative; aspect-ratio: 300 / 150; filter: drop-shadow(0 -1.2cqw 2cqw rgba(0, 0, 0, .16)); }
.env__front svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.e-fill { fill: var(--p-cover); }
.e-line { fill: none; stroke: var(--p-b); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.e-line--soft { stroke-opacity: .45; stroke-width: 1; }
.seal {
  position: absolute; left: 50%; top: 56%; width: 13cqw; aspect-ratio: 1; display: grid; place-items: center; translate: -50% -50%;
  border-radius: 50%; color: var(--p-ink); font: 700 5.2cqw/1 var(--font-head);
  background: radial-gradient(circle at 35% 30%, var(--p-a), var(--p-b) 58%, var(--p-d));
  box-shadow: 0 .9cqw 2cqw rgba(0, 0, 0, .38), inset 0 0 0 .5cqw rgba(255, 255, 255, .18);
}
.seal::after { content: ""; position: absolute; inset: 1.2cqw; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .22); }

/* invitation card */
.ly--card { left: 21%; width: 58%; bottom: 21%; rotate: -2.5deg; }
.inv {
  position: relative; aspect-ratio: 3 / 4.15; padding: 5.6cqw 4.5cqw 0; text-align: center; background: var(--p-paper); border-radius: 3px;
  box-shadow: 0 3cqw 6cqw rgba(40, 10, 20, .28), 0 .4cqw 1cqw rgba(40, 10, 20, .15);
}
.inv::before { content: ""; position: absolute; inset: 2cqw; border: 1px solid var(--p-b); border-radius: 2px; }
.inv::after { content: ""; position: absolute; inset: 2.7cqw; border: 1px solid var(--p-b); opacity: .45; border-radius: 1px; }
.inv > * { position: relative; z-index: 1; }
.inv p { margin: 0; }
.ly .inv__orn { display: block; width: 7cqw; height: auto; margin: 0 auto 2.2cqw; fill: none; stroke: var(--p-b); stroke-width: 1.2; stroke-linecap: round; }
.inv__small { font: 500 1.7cqw/1.4 var(--font-body); letter-spacing: .24em; text-transform: uppercase; color: var(--p-ink); opacity: .85; }
.inv__small--v { margin-top: 1.2cqw; opacity: .7; }
.inv__names {
  margin-top: 2.2cqw !important; white-space: nowrap; font: 400 7.6cqw/1.25 var(--font-script); padding-bottom: .6cqw;
  background: linear-gradient(100deg, var(--p-d) 32%, color-mix(in srgb, var(--p-a) 45%, var(--p-d)) 50%, var(--p-d) 68%) 0 0 / 260% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--p-d);
  animation: foil 6s ease-in-out infinite; transition: opacity .25s ease;
}
.inv__names i { font: 500 italic 4.4cqw/1 var(--font-head); }
.inv__names.is-swap { opacity: 0; }
@keyframes foil { 0%, 30% { background-position: 100% 0; } 70%, 100% { background-position: 0 0; } }
.inv__rule { position: relative; display: block; width: 14cqw; height: 1px; margin: 2.2cqw auto; background: var(--p-b); }
.inv__rule::after { content: ""; position: absolute; left: 50%; top: 50%; width: 1.3cqw; height: 1.3cqw; background: var(--p-b); transform: translate(-50%, -50%) rotate(45deg); }
.inv__line { font: italic 500 3.1cqw/1.3 var(--font-head); color: var(--p-ink); }
.inv__date { margin-top: 2.4cqw !important; font: 600 3.7cqw/1.2 var(--font-head); letter-spacing: .02em; color: var(--p-ink); }

/* RSVP card */
.ly--rsvp { right: 1%; top: 41%; width: 24%; rotate: 7deg; }
.rsvp { display: flex; flex-direction: column; gap: 1.4cqw; aspect-ratio: 4 / 5; padding: 3cqw 2.6cqw; background: var(--p-paper); border-radius: 3px; border: 1px solid var(--p-b); box-shadow: 0 2cqw 4cqw rgba(40, 10, 20, .3); }
.rsvp__t { font: 600 3.4cqw/1 var(--font-head); letter-spacing: .24em; color: var(--p-ink); text-align: center; margin-bottom: .6cqw; }
.rsvp__l { display: block; height: 1px; background: var(--p-b); opacity: .7; margin-top: 1.6cqw; }
.rsvp__l--s { width: 60%; }
.rsvp__n { margin-top: auto; font: italic 500 2cqw/1.25 var(--font-head); color: var(--p-ink); text-align: center; }

/* little feature chips */
.chip { display: inline-flex; align-items: center; gap: 1.2cqw; padding: 1.4cqw 2.6cqw; white-space: nowrap; font: 500 2.5cqw/1 var(--font-body); color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; box-shadow: var(--shadow); }
.chip i { color: var(--gold-text); font-size: 2.3cqw; }
.ly--chip1 { left: 0; top: 24%; rotate: -6deg; }
.ly--chip2 { right: 2%; top: 22%; rotate: 5deg; }
.ly--chip3 { left: 5%; bottom: 3%; rotate: -3deg; z-index: 50; }
.ly--chip2 .fl { animation-duration: .9s, 8s; }
.ly--chip3 .fl { animation-duration: .9s, 6.4s; }

/* ---- tablet + mobile ---- */
@media (max-width: 960px) {
  .hero { min-height: 0; }
  .hero__wrap { grid-template-columns: 1fr; gap: 40px; }
  .hero__copy { display: flex; flex-direction: column; align-items: center; text-align: center; }
  .hero__text { margin-inline: auto; }
  .hero__actions, .pick, .facts { justify-content: center; }
  .pick { flex-direction: column; gap: 2px; }
  .pick__name { text-align: center; min-width: 0; }
  .facts li { align-items: center; padding-inline-start: 0; border-inline-start: 0; }
  .facts { gap: 18px 30px; }
  .stage { width: min(100%, 460px); }
}
@media (max-width: 480px) {
  .eyebrow { font-size: .6875rem; letter-spacing: .14em; gap: 8px; }
  .eyebrow span { width: 22px; }
  .facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; }
  .facts strong { font-size: 1.125rem; }
  .facts span { font-size: .75rem; }
  .hero__actions .btn { flex: 1 1 100%; }
  .ly--chip2 { display: none; }
  .chip { font-size: 3.1cqw; }
  .chip i { font-size: 2.9cqw; }
}

/* ===== Section 2: marquee ===== */
.mq { overflow: hidden; background: var(--shade); border-block: 1px solid var(--line); padding-block: clamp(8px, 1.1vw, 13px); }
.mq__row { display: flex; width: max-content; animation: mq 38s linear infinite; }
.mq:hover .mq__row { animation-play-state: paused; }
.mq__track { display: flex; flex: none; align-items: center; }
.mq__track li { display: flex; align-items: center; white-space: nowrap; font: italic 600 clamp(1.05rem, 1.7vw, 1.5rem)/1.25 var(--font-head); color: var(--ink); }
.mq__track li:nth-child(even) { color: var(--gold-text); }
.mq__track i { width: 6px; height: 6px; margin-inline: clamp(16px, 2.4vw, 34px); background: var(--gold); transform: rotate(45deg); flex: none; }
@keyframes mq { to { transform: translateX(-50%); } }
[dir="rtl"] .mq__row { animation-direction: reverse; }

/* ===== Section 2: studio story ===== */
.story { padding-block: clamp(56px, 8vw, 120px); background: var(--bg); }
.story__wrap { width: min(100% - 2 * var(--pad), var(--wrap)); margin-inline: auto; display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1fr); align-items: center; gap: clamp(36px, 6vw, 96px); }

.story__media { position: relative; isolation: isolate; margin: 0; width: min(100%, 480px); justify-self: center; padding: 0 0 7% 0; }
.story__arch {
  position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 999px 999px 6px 6px; background: linear-gradient(160deg, #681F36, #3A1520);
  box-shadow: var(--shadow);
}
.story__arch img { width: 100%; height: 100%; object-fit: cover; }
.story__arch img.is-broken { display: none; }
.story__ring { position: absolute; inset: -14px 14px 14px -14px; z-index: -1; border: 1px solid var(--gold); border-radius: 999px 999px 6px 6px; }
.story__inset { position: absolute; z-index: 2; inset-inline-end: -8%; bottom: 0; width: 34%; aspect-ratio: 1; overflow: hidden; border-radius: 50%; border: 6px solid var(--bg); box-shadow: var(--shadow); background: #681F36; }
.story__inset img { width: 100%; height: 100%; object-fit: cover; }
.story__inset img.is-broken { display: none; }
.story__badge { position: absolute; z-index: 3; inset-inline-start: -5%; top: 12%; width: clamp(84px, 22%, 112px); aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; text-align: center; background: var(--btn-bg); color: var(--btn-fg); font: italic 600 .9375rem/1.15 var(--font-head); box-shadow: var(--shadow); rotate: -10deg; }
.story__badge::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; border: 1px dashed currentColor; opacity: .5; }

/* arch reveal: the photo rises through the arch mask */
.story__media.is-armed .story__arch { clip-path: inset(100% 0 0 0); }
.story__media.is-armed .story__arch img { transform: scale(1.28); }
.story__media.is-armed .story__ring, .story__media.is-armed .story__inset, .story__media.is-armed .story__badge { opacity: 0; }
.story__media.is-armed .story__inset { transform: translateY(24px) scale(.9); }
.story__media.is-in .story__arch { clip-path: inset(0); transition: clip-path 1.5s cubic-bezier(.65, 0, .15, 1); }
.story__media.is-in .story__arch img { transform: none; transition: transform 2.2s cubic-bezier(.2, .7, .2, 1); }
.story__media.is-in .story__ring { opacity: 1; transition: opacity .9s ease 1.1s; }
.story__media.is-in .story__inset { opacity: 1; transform: none; transition: opacity .8s ease 1.2s, transform .9s cubic-bezier(.2, .7, .2, 1) 1.2s; }
.story__media.is-in .story__badge { opacity: 1; transition: opacity .8s ease 1.5s; }

.story__copy h2 { margin: 0 0 18px; font: 600 clamp(2rem, 3.8vw, 3.25rem)/1.08 var(--font-head); color: var(--ink); text-wrap: balance; }
.story__copy .h1__script { font-size: 1.1em; }
.story__copy p { margin: 0 0 14px; color: var(--muted); max-width: 54ch; }
.story__copy .eyebrow { margin-bottom: 14px; color: var(--gold-text); }
.story__copy p.story__lead { font: 500 clamp(1.25rem, 2vw, 1.5rem)/1.4 var(--font-head); color: var(--text); }
.promise { display: grid; gap: 16px; margin: 26px 0 30px; padding-top: 24px; border-top: 1px solid var(--line); }
.promise li { display: flex; gap: 16px; align-items: flex-start; }
.promise i { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--shade-strong); border: 1px solid var(--line); color: var(--gold-text); font-size: 16px; }
.promise strong { display: block; font: 700 1.25rem/1.2 var(--font-head); color: var(--ink); }
.promise span { font-size: .9375rem; color: var(--muted); }
.story__cta i { margin-inline-start: 10px; font-size: .75rem; transition: translate .2s ease; }
.story__cta:hover i { translate: 3px 0; }
[dir="rtl"] .story__cta i { transform: scaleX(-1); }
[dir="rtl"] .story__cta:hover i { translate: -3px 0; }

@media (max-width: 860px) {
  .story__wrap { grid-template-columns: 1fr; }
  .story__media { width: min(86%, 400px); }
  .story__inset { inset-inline-end: -6%; }
  .story__copy { text-align: center; }
  .story__copy p { margin-inline: auto; }
  .story__copy .eyebrow { justify-content: center; }
  .promise { text-align: start; max-width: 460px; margin-inline: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .mq__row { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
  .mq__track[aria-hidden="true"] { display: none; }
  .story__media.is-armed .story__arch { clip-path: none; }
  .story__media.is-armed .story__arch img { transform: none; }
  .story__media.is-armed .story__ring, .story__media.is-armed .story__inset, .story__media.is-armed .story__badge { opacity: 1; transform: none; }
}

/* ===== shared section head ===== */
.sec-head { text-align: center; max-width: 640px; margin: 0 auto clamp(36px, 5vw, 64px); }
.sec-head .eyebrow { justify-content: center; }
.sec-head h2 { margin: 0; font: 600 clamp(2rem, 3.8vw, 3.25rem)/1.08 var(--font-head); color: var(--ink); text-wrap: balance; }
.sec-head .h1__script { font-size: 1.1em; }
.sec-head p:not(.eyebrow) { margin: 14px 0 0; color: var(--muted); }

/* ===== Section 3: collections (books that open) ===== */
.col { padding-block: clamp(64px, 9vw, 130px); background: var(--shade); border-top: 1px solid var(--line); }
.col__wrap { width: min(100% - 2 * var(--pad), var(--wrap)); margin-inline: auto; }
.col__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(48px, 5vw, 72px) clamp(44px, 6vw, 88px); }

.bk { position: relative; margin: 0; }
.bk:hover, .bk.is-open, .bk:has(:focus-visible) { z-index: 5; }
.bk__book { position: relative; width: min(100%, 300px); aspect-ratio: 3 / 4; margin-inline: auto; perspective: 2200px; transition: translate .9s cubic-bezier(.65, 0, .2, 1); }

/* the page you see once the cover swings open (always paper, in light and dark mode) */
.bk__page {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 14% 11%;
  background: #F8F2E9; color: #30242A; border-radius: 2px 6px 6px 2px;
  box-shadow: 0 20px 40px rgba(60, 20, 30, .22), 4px 0 0 -1px #EFE6D6, 7px 0 0 -2px #E2D6C2;
}
.bk__page::before { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(184, 147, 75, .55); border-radius: 2px; pointer-events: none; }
.bk__page::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 14%; border-radius: 2px 0 0 2px; background: linear-gradient(90deg, rgba(60, 20, 30, .2), transparent); pointer-events: none; }
.bk__page > * { position: relative; z-index: 1; }
.bk__page p { margin: 0; }
.bk__kicker { font: 600 .6875rem/1.3 var(--font-body); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-text); }
.bk__name { margin: 8px 0 0; font: 600 clamp(1.6rem, 2.4vw, 2rem)/1.08 var(--font-head); color: #4A1025; text-wrap: balance; }
.bk__rule { position: relative; display: block; width: 64px; height: 1px; margin: 14px auto; background: #C5A46D; }
.bk__rule::after { content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; background: #C5A46D; transform: translate(-50%, -50%) rotate(45deg); }
.bk__price { font: 700 1.75rem/1.1 var(--font-head); color: #30242A; }
.bk__price small { font: 500 .75rem/1 var(--font-body); color: #65545A; letter-spacing: .02em; }
.bk__fin { margin-top: 6px !important; font-size: .8125rem; color: #65545A; }
.bk__enq { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; min-height: 44px; padding: 10px 24px; border-radius: 999px; background: #4A1025; color: #fff; font: 500 .9375rem/1 var(--font-body); text-decoration: none; transition: background .25s ease, transform .25s ease; }
.bk__enq i { font-size: .7rem; transition: translate .2s ease; }
.bk__enq:hover { background: #C5A46D; color: #30242A; transform: translateY(-2px); }
.bk__enq:hover i { translate: 3px 0; }
.bk__enq:focus-visible { outline-color: #C5A46D; }
[dir="rtl"] .bk__enq i { transform: scaleX(-1); }

/* cover */
.bk__cover { position: absolute; inset: 0; z-index: 2; transform-origin: left center; transform-style: preserve-3d; transition: transform 1.1s cubic-bezier(.65, 0, .2, 1); }
[dir="rtl"] .bk__cover { transform-origin: right center; }
.bk__front, .bk__inner { position: absolute; inset: 0; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.bk__front { border-radius: 2px 6px 6px 2px; background: linear-gradient(160deg, var(--cv), var(--cv2)); box-shadow: 0 20px 40px rgba(60, 20, 30, .28); }
.bk__front::before { content: ""; position: absolute; inset: 10px; border: 1.5px solid var(--ft); opacity: .85; border-radius: 1px; }
.bk__front::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 12%; background: linear-gradient(90deg, rgba(0, 0, 0, .28), transparent 40%, rgba(255, 255, 255, .1) 62%, transparent 80%); pointer-events: none; }
.bk__inner {
  transform: rotateY(180deg); border-radius: 6px 2px 2px 6px;
  background:
    repeating-linear-gradient(45deg, transparent 0 9px, color-mix(in srgb, var(--ft) 38%, transparent) 9px 10px),
    repeating-linear-gradient(-45deg, transparent 0 9px, color-mix(in srgb, var(--ft) 38%, transparent) 9px 10px),
    linear-gradient(160deg, var(--cv), var(--cv2));
}
.cv { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: var(--ft); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.cv * { vector-effect: non-scaling-stroke; }
.bk__mono { position: absolute; inset: 0; display: grid; place-items: center; font: 400 clamp(4.5rem, 9vw, 6.5rem)/1 var(--font-script); color: var(--ft); padding-bottom: .1em; }
.bk__tap { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.bk__tap:focus-visible { outline-offset: -6px; }

/* open book: how far it slides and how wide the cover swings are set per screen,
   so the cover never ends up outside the page */
.bk { --bk-shift: 7%; --bk-angle: 104deg; }
.bk.is-open .bk__book, .bk:has(:focus-visible) .bk__book { translate: var(--bk-shift) 0; }
[dir="rtl"] .bk.is-open .bk__book, [dir="rtl"] .bk:has(:focus-visible) .bk__book { translate: calc(var(--bk-shift) * -1) 0; }
.bk.is-open .bk__cover, .bk:has(:focus-visible) .bk__cover { transform: rotateY(calc(var(--bk-angle) * -1)); }
[dir="rtl"] .bk.is-open .bk__cover, [dir="rtl"] .bk:has(:focus-visible) .bk__cover { transform: rotateY(var(--bk-angle)); }
@media (hover: hover) and (pointer: fine) {
  .bk__book:hover { translate: var(--bk-shift) 0; }
  [dir="rtl"] .bk__book:hover { translate: calc(var(--bk-shift) * -1) 0; }
  .bk__book:hover .bk__cover { transform: rotateY(calc(var(--bk-angle) * -1)); }
  [dir="rtl"] .bk__book:hover .bk__cover { transform: rotateY(var(--bk-angle)); }
}
/* 3 columns: the first book needs room on its left, the last one has room on its right */
@media (min-width: 901px) {
  .bk:nth-child(3n + 1) { --bk-shift: 16%; }
  .bk:nth-child(3n) { --bk-shift: 5%; }
}
@media (min-width: 901px) and (max-width: 1360px) {
  .bk { --bk-angle: 98deg; }
  .bk:nth-child(3n + 1) { --bk-shift: 18%; }
}
/* 2 columns: the cover opens a little less wide, left column slides right, right column stays put */
@media (min-width: 561px) and (max-width: 900px) {
  .bk { --bk-angle: 94deg; }
  .bk:nth-child(odd) { --bk-shift: 12%; }
  .bk:nth-child(even) { --bk-shift: 0%; }
}
/* phones: one book per row, slid right so the swung-open cover stays on screen */
@media (max-width: 560px) {
  .bk { --bk-shift: 17%; }
}

.bk figcaption { margin-top: 22px; text-align: center; }
.bk figcaption strong { display: block; font: 700 1.5rem/1.1 var(--font-head); color: var(--ink); }
.bk figcaption span { font-size: .875rem; color: var(--muted); }

/* six cover looks */
.bk--classic     { --cv: #4A1025; --cv2: #4A1827; --ft: #E7C987; }
.bk--floral      { --cv: #F6DCD6; --cv2: #E8BFB8; --ft: #A9604F; }
.bk--minimal     { --cv: #F8F4EC; --cv2: #E9E1D1; --ft: #8A7448; }
.bk--royal       { --cv: #22304F; --cv2: #121A2E; --ft: #E7C987; }
.bk--rustic      { --cv: #B88E66; --cv2: #98704A; --ft: #F6E9D2; }
.bk--destination { --cv: #34706F; --cv2: #1F4B4D; --ft: #F3E2AE; }
.bk--rustic .bk__front { background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 2px, transparent 2px 7px), linear-gradient(160deg, var(--cv), var(--cv2)); }
.bk--minimal .bk__front { box-shadow: 0 20px 40px rgba(60, 20, 30, .2), inset 0 0 0 1px rgba(0, 0, 0, .06); }

@media (max-width: 900px) { .col__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .col__grid { grid-template-columns: 1fr; } .bk__book { width: min(78%, 280px); } }

/* ===== Section 4: featured designs (clean card grid) ===== */
.fs { position: relative; overflow: clip; padding-block: clamp(64px, 8vw, 112px); border-top: 1px solid var(--line); background: var(--bg); }
.fs__wrap { width: min(100% - 2 * var(--pad), var(--wrap)); margin-inline: auto; }
.fs__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 40px; margin-bottom: clamp(28px, 4vw, 48px); }
.fs__head .eyebrow { margin-bottom: 10px; }
.fs__head h2 { margin: 0; font: 600 clamp(2rem, 4vw, 3.25rem)/1.08 var(--font-head); color: var(--ink); }
.fs__head .h1__script { display: inline; }
.fs__side { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.fs__side p { margin: 0; max-width: 30ch; color: var(--muted); font-size: .9375rem; }

.fg__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 32px); }
.fg { position: relative; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); transition: transform .4s cubic-bezier(.2, .8, .2, 1), box-shadow .4s ease, border-color .3s ease; }
.fg:hover, .fg:focus-within { transform: translateY(-6px); border-color: var(--gold); box-shadow: var(--shadow); }
.fg__art { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 4.7; overflow: hidden; background: color-mix(in srgb, var(--p-cover) 22%, var(--surface)); }
.fg__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
.fg:hover .fg__img, .fg:focus-within .fg__img { transform: scale(1.06); }
.fg__art::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(20, 8, 12, .28), transparent 28%); }
.fg__badge { position: absolute; z-index: 1; max-width: calc(100% - 96px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; top: 20px; inset-inline-start: 20px; padding: 5px 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: .75rem; font-weight: 600; letter-spacing: .04em; color: var(--ink); }
.fg__no { position: absolute; z-index: 1; top: 20px; inset-inline-end: 20px; padding: 6px 11px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font: 600 .8125rem/1 var(--font-head); letter-spacing: .1em; color: var(--gold-text); }
.fg__body { display: flex; flex-direction: column; flex: 1; padding: 20px 22px 22px; }
.fg__body h3 { margin: 0 0 4px; font: 600 1.5rem/1.15 var(--font-head); color: var(--ink); }
.fg__best { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 16px; font-size: .875rem; color: var(--muted); }
.fg__best i { color: var(--gold-text); font-size: .78rem; }
.fg__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); }
.fg__pal { display: flex; }
.fg__pal span { width: 22px; height: 22px; margin-inline-end: -6px; border-radius: 50%; border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--line); }
.fg__link { display: inline-flex; align-items: center; gap: 8px; font-size: .9375rem; font-weight: 600; color: var(--ink); text-decoration: none; }
.fg__link::after { content: ""; position: absolute; inset: 0; }
.fg__link i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--gold); color: var(--gold-text); font-size: .7rem; transition: background .25s ease, color .25s ease, translate .25s ease; }
.fg:hover .fg__link i, .fg__link:focus-visible i { background: var(--gold); color: #fff; translate: 3px 0; }
.fg__link:focus-visible { outline: none; }
.fg:focus-within { outline: 3px solid var(--gold); outline-offset: 3px; }
[dir="rtl"] .fg__link i { transform: scaleX(-1); }

@media (max-width: 960px) { .fg__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .fg__grid { grid-template-columns: 1fr; }
  .fg__art { aspect-ratio: 4 / 4.2; }
  .fs__side .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .fg, .fg__img { transition: none; } .ftc__names { animation: none; } }

/* the invitation card (also used in Love notes) */
.ftc { container-type: inline-size; position: relative; width: 100%; aspect-ratio: 3 / 4.1; border-radius: 4px; overflow: hidden; background: var(--p-paper); }
.ftc__face { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 8% 7%; }
.ftc__face::before { content: ""; position: absolute; inset: 3.4cqw; border: 1px solid var(--p-b); }
.ftc__face::after { content: ""; position: absolute; inset: 4.6cqw; border: 1px solid var(--p-b); opacity: .4; }
.ftc__face > * { position: relative; z-index: 1; margin: 0; }
.ftc__orn { display: block; width: 14cqw; height: 22cqw; margin-bottom: 4cqw; fill: none; stroke: var(--p-b); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.ftc__orn--flower, .ftc__orn--compass { width: 22cqw; height: 22cqw; }
.ftc__orn--sprig { width: 9cqw; }
.ftc__orn * { vector-effect: non-scaling-stroke; }
.ftc__small { font: 500 2.8cqw/1.4 var(--font-body); letter-spacing: .26em; text-transform: uppercase; color: var(--p-ink); opacity: .85; }
.ftc__small--v { margin-top: 2cqw !important; opacity: .7; }
.ftc__names { margin-top: 3.6cqw !important; white-space: nowrap; font: 400 11.5cqw/1.2 var(--font-script); padding-bottom: 1cqw; color: var(--p-d); background: linear-gradient(100deg, var(--p-d) 32%, color-mix(in srgb, var(--p-a) 45%, var(--p-d)) 50%, var(--p-d) 68%) 0 0 / 260% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: foil 6s ease-in-out infinite; }
.ftc__names i { font: 500 italic 7cqw/1 var(--font-head); }
.ftc__rule { position: relative; display: block; width: 22cqw; height: 1px; margin: 4cqw auto; background: var(--p-b); }
.ftc__rule::after { content: ""; position: absolute; left: 50%; top: 50%; width: 2cqw; height: 2cqw; background: var(--p-b); transform: translate(-50%, -50%) rotate(45deg); }
.ftc__date { font: 600 5.6cqw/1.2 var(--font-head); color: var(--p-ink); letter-spacing: .02em; }

/* ===== Section 5: the suite (stationery bento + return gifts) ===== */
.sx { position: relative; overflow: clip; color: #F8F2E9; border-top: 1px solid var(--line); padding-block: clamp(64px, 8vw, 112px); background: radial-gradient(60% 50% at 85% 0%, rgba(125, 52, 70, .55), transparent 70%), radial-gradient(45% 40% at 0 100%, rgba(231, 201, 135, .09), transparent 70%), #2A0F17; }
.sx__wrap { position: relative; z-index: 2; width: min(100% - 2 * var(--pad), var(--wrap)); margin-inline: auto; }
.sx__dia { position: absolute; z-index: 1; width: 9px; height: 9px; background: #E7C987; opacity: .5; transform: rotate(45deg); animation: sxDrift 8s ease-in-out infinite alternate; pointer-events: none; }
.sx__dia:nth-of-type(1) { top: 9%; inset-inline-start: 7%; }
.sx__dia:nth-of-type(2) { top: 38%; inset-inline-end: 5%; animation-delay: -3s; width: 12px; height: 12px; }
.sx__dia:nth-of-type(3) { bottom: 10%; inset-inline-start: 12%; animation-delay: -5s; width: 7px; height: 7px; }
@keyframes sxDrift { to { transform: translate(16px, -30px) rotate(225deg) scale(.6); opacity: .15; } }

.sx__head { text-align: center; margin-bottom: clamp(28px, 4vw, 44px); }
.sx__head .eyebrow { justify-content: center; color: #E7C987; }
.sx__head h2 { margin: 0; font: 600 clamp(2rem, 4vw, 3.25rem)/1.08 var(--font-head); color: #F8F2E9; text-wrap: balance; }
.sx__head .h1__script { display: inline; font-size: 1.1em; color: #E7C987; }
.sx__intro { margin: 14px auto 0; max-width: 52ch; color: rgba(251, 247, 240, .76); }
.sx__jump { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin: 26px 0 0; }
.sx__jump a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 20px; border: 1px solid rgba(231, 201, 135, .45); border-radius: 999px; color: #F8F2E9; text-decoration: none; font-weight: 500; font-size: .9375rem; transition: background .25s ease, color .25s ease, transform .25s ease; }
.sx__jump a i { color: #E7C987; transition: color .25s ease; }
.sx__jump a small { font-size: .75rem; opacity: .7; }
.sx__jump a:hover { background: #E7C987; color: #2A0F17; transform: translateY(-2px); }
.sx__jump a:hover i { color: #2A0F17; }
.sx__jump a:focus-visible { outline-color: #E7C987; }

.sx__sub { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 6px 24px; margin-bottom: 18px; scroll-margin-top: calc(var(--h) + 20px); }
.sx__sub h3 { margin: 0; font: 600 clamp(1.5rem, 2.6vw, 2rem)/1.1 var(--font-head); color: #F8F2E9; }
.sx__sub h3 em { font-style: italic; color: #E7C987; font-weight: 500; }
.sx__sub p { margin: 0; color: rgba(251, 247, 240, .68); font-size: .9375rem; }

/* stationery bento */
.sx__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: clamp(280px, 24vw, 320px); gap: 16px; }
.sx__tile { container-type: size; position: relative; grid-column: span 3; border-radius: 14px; overflow: hidden; background: #3A1A24; box-shadow: 0 20px 44px rgba(0, 0, 0, .35); }
.sx__tile--1 { grid-column: span 6; grid-row: span 2; }
.sx__a { position: absolute; inset: 0; display: block; color: inherit; text-decoration: none; }
.sx__a:focus-visible { outline: 3px solid #E7C987; outline-offset: -3px; }
.sx__img { position: absolute; inset: 0; overflow: hidden; }
.sx__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s cubic-bezier(.2, .7, .2, 1); }
.sx__a:hover .sx__img img, .sx__a:focus-visible .sx__img img { transform: scale(1.08); }
.sx__img.is-fallback { display: grid; place-items: center; background: linear-gradient(160deg, #5A2433, #2F1119); }
.sx__img.is-fallback::before { content: "W"; display: grid; place-items: center; width: 90px; aspect-ratio: 5 / 7; border: 1px solid #C9A45C; outline: 1px solid rgba(201, 164, 92, .4); outline-offset: -7px; background: #FFFBF4; font: 700 2.2rem/1 var(--font-head); color: #4A1025; transform: rotate(-4deg); }
.sx__tile::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(30, 8, 14, 0) 38%, rgba(30, 8, 14, .92) 100%); transition: opacity .4s ease; }
.sx__glow { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .3s ease; background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(231, 201, 135, .24), transparent 70%); }
.sx__tile:hover .sx__glow { opacity: 1; }
.sx__frame { position: absolute; inset: 12px; z-index: 2; pointer-events: none; border: 1px solid #E7C987; border-radius: 8px; opacity: 0; transform: scale(1.04); transition: opacity .4s ease, transform .5s cubic-bezier(.2, .8, .2, 1); }
.sx__a:hover .sx__frame, .sx__a:focus-visible .sx__frame { opacity: .8; transform: none; }
.sx__no { position: absolute; z-index: 3; top: 16px; inset-inline-start: 16px; padding: 5px 12px; border-radius: 999px; background: rgba(42, 15, 23, .72); backdrop-filter: blur(6px); font: 600 .8125rem/1 var(--font-head); letter-spacing: .1em; color: #E7C987; }
.sx__body { position: absolute; z-index: 3; inset-inline: 0; bottom: 0; padding: 20px 22px 20px; }
.sx__kick { margin: 0; font: 500 italic 1rem/1.2 var(--font-head); color: #E7C987; }
.sx__body h3 { margin: 2px 0 0; font: 600 clamp(1.375rem, 2vw, 1.75rem)/1.1 var(--font-head); color: #F8F2E9; }
.sx__tile--1 .sx__body h3 { font-size: clamp(1.9rem, 3.2vw, 2.75rem); }
.sx__more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s cubic-bezier(.2, .8, .2, 1); }
.sx__more > div { overflow: hidden; min-height: 0; }
.sx__a:hover .sx__more, .sx__a:focus-visible .sx__more, .sx__tile--1 .sx__more { grid-template-rows: 1fr; }
.sx__desc { margin: 10px 0 12px; max-width: 46ch; font-size: .9375rem; line-height: 1.55; color: rgba(251, 247, 240, .86); }
.sx__spec { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.sx__spec li { padding: 4px 11px; border: 1px solid rgba(231, 201, 135, .5); border-radius: 999px; font-size: .75rem; color: #F8F2E9; background: rgba(42, 15, 23, .45); }
.sx__spec b { font-weight: 600; color: #E7C987; margin-inline-end: 5px; }
.sx__go { display: inline-flex; align-items: center; gap: 8px; font-size: .9375rem; font-weight: 500; color: #E7C987; }
.sx__go i { font-size: .72rem; transition: translate .25s ease; }
.sx__a:hover .sx__go i { translate: 4px 0; }
[dir="rtl"] .sx__go i, [dir="rtl"] .gf__go i { transform: scaleX(-1); }

/* hover state for the small stationery tiles: solid dark panel + compact text so nothing spills out */
.sx__tile:not(.sx__tile--1)::after { transition: background .4s ease; }
.sx__tile:not(.sx__tile--1) .sx__body { max-height: 100%; overflow: hidden; padding: 18px 20px; }
.sx__tile:not(.sx__tile--1) .sx__desc { margin: 8px 0 10px; font-size: .875rem; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
@media (hover: hover) and (min-width: 901px) {
  .sx__tile:not(.sx__tile--1):hover::after, .sx__tile:not(.sx__tile--1):focus-within::after { background: linear-gradient(180deg, rgba(30, 8, 14, .9) 0%, rgba(30, 8, 14, .96) 100%); }
  .sx__tile:not(.sx__tile--1):hover .sx__body, .sx__tile:not(.sx__tile--1):focus-within .sx__body { top: 56px; display: flex; flex-direction: column; justify-content: flex-end; }
}
@container (max-width: 300px) { .sx__tile:not(.sx__tile--1) .sx__go { font-size: .8125rem; white-space: nowrap; } .sx__tile:not(.sx__tile--1) .sx__spec { display: none; } .sx__tile:not(.sx__tile--1) .sx__desc { -webkit-line-clamp: 3; } }
@container (max-height: 310px) { .sx__tile:not(.sx__tile--1) .sx__spec li:nth-child(n+2) { display: none; } }

/* return gifts */
.sx__gifts { margin-top: clamp(56px, 8vw, 96px); }
.sx__ribbon { display: flex; align-items: center; gap: 18px; margin-bottom: clamp(26px, 4vw, 40px); color: #E7C987; }
.sx__ribbon::before, .sx__ribbon::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(231, 201, 135, .6)); }
.sx__ribbon::after { transform: scaleX(-1); }
.sx__ribbon span { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; border: 1px solid rgba(231, 201, 135, .6); font-size: 1.3rem; background: rgba(231, 201, 135, .08); }
.gf__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.gf { container-type: inline-size; border-radius: 14px; overflow: hidden; background: #FBF5EA; box-shadow: 0 16px 36px rgba(0, 0, 0, .3); transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease; }
.gf:hover { transform: translateY(-6px); box-shadow: 0 26px 50px rgba(0, 0, 0, .45); }
.gf__a { display: grid; grid-template-columns: 40% minmax(0, 1fr); height: 100%; color: inherit; text-decoration: none; }
.gf__a:focus-visible { outline: 3px solid #E7C987; outline-offset: -3px; }
.gf__art { position: relative; min-height: 196px; background: var(--art); overflow: hidden; }
.gf__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.2, .7, .2, 1); }
.gf:hover .gf__art img { transform: scale(1.08); }
@container (max-width: 359px) {
  .gf__a { grid-template-columns: 1fr; }
  .gf__art { min-height: 0; aspect-ratio: 16 / 11; }
  .gf__tx { padding: 16px 18px 20px; }
}
.gf__tx { display: flex; flex-direction: column; justify-content: center; padding: 18px 20px; }
.gf__tag { align-self: flex-start; margin-bottom: 8px; padding: 3px 10px; border-radius: 999px; background: rgba(184, 147, 75, .18); font-size: .6875rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #7E5A1B; }
.gf__tx h3 { margin: 0 0 6px; font: 600 1.25rem/1.15 var(--font-head); color: #4A1025; }
.gf__tx p { margin: 0 0 12px; font-size: .875rem; line-height: 1.5; color: #65545A; }
.gf__go { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; font-size: .875rem; font-weight: 600; color: #4A1025; }
.gf__go i { font-size: .7rem; color: #B8934B; transition: translate .25s ease; }
.gf:hover .gf__go i { translate: 4px 0; }

.sx__end { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; margin-top: clamp(32px, 5vw, 56px); padding: clamp(22px, 3vw, 32px) clamp(22px, 4vw, 40px); border: 1px solid rgba(231, 201, 135, .4); border-radius: 16px; background: linear-gradient(120deg, rgba(231, 201, 135, .1), rgba(125, 52, 70, .22)); }
.sx__end h3 { margin: 0 0 4px; font: 600 clamp(1.25rem, 2.2vw, 1.625rem)/1.2 var(--font-head); color: #F8F2E9; }
.sx__end p { margin: 0; color: rgba(251, 247, 240, .75); max-width: 52ch; }
.sx__end .btn { background: #E7C987; color: #2A0F17; }
.sx__end .btn:hover { box-shadow: 0 14px 30px rgba(0, 0, 0, .4); }
.sx__end .btn i { margin-inline-start: 10px; font-size: .75rem; }
[dir="rtl"] .sx__end .btn i { transform: scaleX(-1); }

@media (max-width: 1000px) { .gf__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px), (hover: none) {
  .sx__more { grid-template-rows: 1fr; }
  /* descriptions are always open here, so darken from higher up to keep the text readable on light photos */
  .sx__tile::after { background: linear-gradient(180deg, rgba(30, 8, 14, .1) 0%, rgba(30, 8, 14, .72) 34%, rgba(30, 8, 14, .95) 100%); }
  .sx__kick, .sx__body h3 { text-shadow: 0 1px 10px rgba(20, 5, 10, .55); }
}
@media (max-width: 900px) {
  .sx__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 300px; }
  .sx__tile, .sx__tile--1 { grid-column: span 1; grid-row: span 1; }
  .sx__tile--1 { grid-column: span 2; grid-row: span 2; }
  .sx__tile--5 { grid-column: span 2; }
}
@media (max-width: 600px) {
  .sx__grid { grid-template-columns: 1fr; grid-auto-rows: 340px; }
  .sx__tile, .sx__tile--1, .sx__tile--5 { grid-column: span 1; grid-row: span 1; }
  .gf__grid { grid-template-columns: 1fr; }
  .sx__end .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .sx__dia { animation: none; } .sx__img img, .gf__art img { transition: none; } }

/* ===== Section 6: how it works (gold line + tri-fold cards) ===== */
.hw { padding-block: clamp(64px, 8vw, 112px); border-top: 1px solid var(--line); background: var(--bg); }
.hw__steps { --g: clamp(16px, 2.4vw, 32px); --tfh: 320px; --lp: 1; position: relative; width: min(100% - 2 * var(--pad), var(--wrap)); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--g); }
.hw__steps, .hw__steps li { list-style: none; margin: 0; padding: 0; }
.hw__steps { margin-inline: auto; }
.hw__line { display: block; position: absolute; top: 22px; inset-inline: calc((100% - 3 * var(--g)) / 8); height: 2px; background: var(--line); }
.hw__line i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), #E7C987); transform-origin: left center; transform: scaleX(var(--lp)); }
[dir="rtl"] .hw__line i { transform-origin: right center; }
.hw__node { position: relative; z-index: 1; display: grid; place-items: center; width: 46px; height: 46px; margin: 0 auto 20px; border-radius: 50%; background: var(--bg); border: 2px solid var(--line); font: 700 1.25rem/1 var(--font-head); color: var(--muted); transition: background .4s ease, border-color .4s ease, color .4s ease, transform .4s ease; }
.hw__step.is-on .hw__node { background: var(--gold); border-color: var(--gold); color: #fff; transform: scale(1.08); }
.tf { position: relative; height: var(--tfh); perspective: 1400px; cursor: pointer; }
.tf__p { position: relative; transform-style: preserve-3d; backface-visibility: hidden; -webkit-backface-visibility: hidden; background: var(--surface); border: 1px solid var(--line); padding: 18px 20px; }
.tf__p1 { height: 104px; display: flex; align-items: center; gap: 14px; border-radius: 6px 6px 0 0; box-shadow: var(--shadow); z-index: 3; }
.tf__p1 i { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--shade); color: var(--gold-text); font-size: 1.1rem; }
.tf__p1 h3 { margin: 0; font: 700 1.375rem/1.15 var(--font-head); color: var(--ink); }
.tf__p2, .tf__p3 { position: absolute; top: 100%; inset-inline: 0; transform-origin: top center; border-top: 0; }
.tf__p2 { height: 132px; transition: transform .9s cubic-bezier(.22, .8, .26, 1); background: linear-gradient(var(--shade), transparent 26%), var(--surface); }
.tf__p3 { height: 84px; border-radius: 0 0 6px 6px; background: linear-gradient(var(--shade-strong), transparent 30%), var(--shade), var(--surface); background-blend-mode: normal; transition: transform .9s cubic-bezier(.22, .8, .26, 1); display: flex; flex-direction: column; justify-content: center; }
.tf p { margin: 0; font-size: .9375rem; line-height: 1.55; color: var(--muted); }
.tf__get { font-size: .8125rem; color: var(--gold-text); font-weight: 600; letter-spacing: .04em; }
.tf__p3 strong { display: block; font: 600 1.125rem/1.25 var(--font-head); color: var(--ink); }
.hw__steps.is-armed .tf__p2 { transform: rotateX(180deg); }
.hw__steps.is-armed .tf__p3 { transform: rotateX(180deg); opacity: 0; transition: transform .9s .45s cubic-bezier(.22, .8, .26, 1), opacity 0s .9s; }
.hw__steps.is-armed .is-open .tf__p2 { transform: none; }
.hw__steps.is-armed .is-open .tf__p3 { transform: none; opacity: 1; transition: transform .9s .45s cubic-bezier(.22, .8, .26, 1), opacity 0s .45s; }
@media (max-width: 960px) {
  .hw__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .hw__line { display: none; }
}
@media (max-width: 600px) {
  .hw__steps { grid-template-columns: 1fr; row-gap: 28px; }
  .hw__line { display: block; inset-inline: auto; inset-inline-start: 22px; top: 23px; bottom: calc(var(--tfh) - 23px); width: 2px; height: auto; }
  .hw__line i { transform-origin: top center; transform: scaleY(var(--lp)); }
  .hw__step { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 16px; align-items: start; }
  .hw__node { margin: 0; }
}

/* ===== Section 7: love notes (letter + the couple's own suite) ===== */
.ln { position: relative; overflow: clip; padding-block: clamp(64px, 8vw, 112px); border-top: 1px solid var(--line); background: linear-gradient(var(--shade), transparent 55%), var(--bg); }
.ln__wrap { width: min(100% - 2 * var(--pad), var(--wrap)); margin-inline: auto; }
.ln .sec-head { max-width: 640px; }

.lv { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; gap: clamp(28px, 5vw, 80px); outline-offset: 10px; }
.lv:focus-visible { outline: 3px solid var(--gold); border-radius: 12px; }

/* the letter */
.lv__letter { position: relative; padding: clamp(28px, 4vw, 52px) clamp(24px, 4vw, 56px); color: #30242A; background: repeating-linear-gradient(transparent 0 35px, rgba(184, 147, 75, .16) 35px 36px), #FFFBF4; border: 1px solid rgba(184, 147, 75, .55); border-radius: 6px; box-shadow: var(--shadow); }
.lv__letter::before { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(184, 147, 75, .3); pointer-events: none; }
.lv__mark { position: absolute; top: clamp(8px, 1.6vw, 18px); inset-inline-start: clamp(18px, 3vw, 40px); font: 700 clamp(4.5rem, 9vw, 7rem)/1 var(--font-head); color: rgba(184, 147, 75, .3); pointer-events: none; }
.lv__stamp { position: absolute; top: 20px; inset-inline-end: 22px; width: 46px; height: 54px; display: grid; place-items: center; background: #F3E6CF; outline: 2px dotted rgba(184, 147, 75, .8); outline-offset: -3px; }
.lv__stamp svg { width: 26px; height: 26px; fill: none; stroke: #8F6A25; stroke-width: 1.4; }
.lv__slides { position: relative; display: grid; padding-top: clamp(26px, 4vw, 44px); }
.lv__slide { grid-area: 1 / 1; display: flex; flex-direction: column; justify-content: space-between; gap: 22px; margin: 0; opacity: 0; visibility: hidden; transform: translateY(18px); transition: opacity .45s ease, transform .6s cubic-bezier(.2, .8, .2, 1), visibility 0s .45s; }
.lv__slide.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.lv__dear { margin: 0; font: 500 italic 1.1875rem/1.2 var(--font-head); color: #7E5A1B; }
.lv__slide blockquote { margin: 12px 0 0; font: 500 clamp(1.1875rem, 1.9vw, 1.5rem)/1.6 var(--font-head); color: #30242A; }
.lv__slide footer { display: flex; flex-direction: column; }
.lv__sign { font: 400 clamp(1.75rem, 2.6vw, 2.25rem)/1.1 var(--font-script); color: #4A1025; }
.lv__meta { font-size: .875rem; color: #65545A; }

/* the couple's own invitation */
.lv__visual { position: relative; display: grid; place-items: center; min-height: clamp(340px, 38vw, 480px); }
.lv__halo { position: absolute; width: min(90%, 400px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, var(--glow), transparent 68%); }
.lv__cards { position: relative; display: grid; width: min(72%, 300px); }
.lv__cards::before { content: ""; position: absolute; inset: 0; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); box-shadow: var(--shadow); transform: translate(14%, 4%) rotate(8deg); opacity: .8; }
.lv__card { grid-area: 1 / 1; position: relative; opacity: 0; transform: translateX(40px) rotate(6deg) scale(.94); transition: opacity .5s ease, transform .7s cubic-bezier(.2, .8, .2, 1); }
.lv__card.is-on { opacity: 1; transform: rotate(-3deg); z-index: 2; }
.lv__card .ftc { box-shadow: 0 26px 52px rgba(60, 20, 30, .32), 0 6px 14px rgba(60, 20, 30, .16); }
.lv__tag { position: absolute; z-index: 3; bottom: 2%; inset-inline-start: 4%; display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: .8125rem; font-weight: 500; color: var(--ink); box-shadow: var(--shadow); }
.lv__tag i { color: #7E5A1B; }

/* controls */
.lv__ctrl { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px 18px; margin-top: clamp(28px, 4vw, 44px); }
.lv__btn { width: 46px; height: 46px; display: grid; place-items: center; flex: none; border-radius: 50%; border: 1.5px solid var(--gold); background: transparent; color: var(--ink); cursor: pointer; transition: background .25s ease, color .25s ease, transform .25s ease; }
.lv__btn:hover { background: var(--gold); color: #fff; transform: translateY(-2px); }
[dir="rtl"] .lv__btn i { transform: scaleX(-1); }
.lv__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.lv__chip { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 6px 18px 6px 6px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--text); cursor: pointer; font: 500 .9375rem/1 var(--font-body); overflow: hidden; transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease; }
.lv__chip:hover { transform: translateY(-2px); }
.lv__chip.is-on { border-color: var(--gold); box-shadow: var(--shadow); }
.lv__chip b { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--p-cover); color: var(--p-paper); font: 700 .75rem/1 var(--font-head); letter-spacing: .04em; }
.lv__chip i { position: absolute; inset-inline: 0; bottom: 0; height: 3px; background: var(--gold); transform-origin: left center; transform: scaleX(0); }
[dir="rtl"] .lv__chip i { transform-origin: right center; }
/* ---- Letters from our couples: couple photo in the invitation card + profile avatars ---- */
.ftc__face > .ftc__photo { display: block; flex: none; width: 42cqw; aspect-ratio: 5 / 6; margin-bottom: 4cqw; padding: 1.3cqw; border: 1px solid var(--p-b); border-radius: 21cqw 21cqw 2cqw 2cqw; background: var(--p-paper); box-shadow: 0 1.2cqw 3cqw rgba(60, 20, 30, .18); }
.ftc__photo img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 19.7cqw 19.7cqw .8cqw .8cqw; }
.lv__chip b { position: relative; overflow: hidden; flex: none; box-shadow: 0 0 0 1.5px var(--p-b); }
.lv__chip b img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.lv__chip.is-on i { transform: scaleX(var(--t, 1)); }

/* numbers */

@media (max-width: 860px) {
  .lv { grid-template-columns: 1fr; gap: 36px; }
  .lv__visual { order: -1; min-height: 360px; }
  .lv__cards { width: min(62%, 260px); }
}
@media (max-width: 560px) {
  .lv__visual { min-height: 330px; }
  .lv__chip { padding-inline-end: 14px; font-size: .875rem; }
  }
@media (prefers-reduced-motion: reduce) { .lv__slide, .lv__card { transition: none; } }

/* ===== Section 8: closing CTA (a neat card) + footer ===== */
.cta { padding: clamp(40px, 6vw, 72px) 0 clamp(56px, 8vw, 96px); background: var(--bg); }
.cta__card { position: relative; overflow: hidden; isolation: isolate; width: min(100% - 2 * var(--pad), var(--wrap)); margin-inline: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px; padding: clamp(28px, 4vw, 52px) clamp(24px, 4.5vw, 64px); color: #F8F2E9; border: 1px solid rgba(231, 201, 135, .55); border-radius: 18px; background: radial-gradient(60% 120% at 100% 0%, rgba(125, 52, 70, .6), transparent 70%), radial-gradient(40% 80% at 0 100%, rgba(231, 201, 135, .1), transparent 70%), #2A0F17; box-shadow: var(--shadow); }
.cta__card::before { content: ""; position: absolute; inset: 8px; z-index: -1; border: 1px solid rgba(231, 201, 135, .22); border-radius: 12px; pointer-events: none; }
.cta__card::after { content: ""; position: absolute; z-index: -1; inset-inline-end: -40px; top: -40px; width: 180px; height: 180px; border: 1px solid rgba(231, 201, 135, .25); border-radius: 50%; box-shadow: 0 0 0 22px rgba(231, 201, 135, .05); pointer-events: none; }
.cta__txt { flex: 1 1 380px; min-width: 0; }
.cta .eyebrow { margin-bottom: 10px; color: #E7C987; }
.cta h2 { margin: 0; max-width: 18em; font: 600 clamp(1.75rem, 3.2vw, 2.5rem)/1.15 var(--font-head); color: #F8F2E9; text-wrap: balance; }
.cta .h1__script { display: inline; font-size: 1.05em; color: #E7C987; }
.cta__sub { margin: 12px 0 0; max-width: 46ch; color: rgba(251, 247, 240, .76); }
.cta__act { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.cta__btn { background: #E7C987; color: #2A0F17; }
.cta__btn:hover { box-shadow: 0 14px 30px rgba(0, 0, 0, .4); }
.cta__btn i { margin-inline-start: 10px; font-size: .75rem; transition: translate .25s ease; }
.cta__btn:hover i { translate: 4px 0; }
[dir="rtl"] .cta__btn i { transform: scaleX(-1); }
.cta__btn, .cta__alt { min-width: 190px; min-height: 52px; padding: 14px 30px; font: 500 1rem/1 var(--font-body); }
.cta__alt { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 1.5px solid #E7C987; border-radius: 999px; color: #F8F2E9; background: transparent; text-decoration: none; transition: background .25s ease, color .25s ease, transform .25s ease; }
.cta__alt:hover { background: #E7C987; color: #2A0F17; transform: translateY(-2px); }
.cta__alt:focus-visible, .cta__btn:focus-visible { outline-color: #E7C987; }
@media (max-width: 640px) { .cta__card { text-align: center; justify-content: center; } .cta__act { justify-content: center; width: 100%; } .cta__btn, .cta__alt { width: 100%; } .cta .eyebrow { justify-content: center; } .cta h2, .cta__sub { margin-inline: auto; } }

.ftr { color: rgba(251, 247, 240, .72); background: #1B0910; font-size: .9375rem; }
.ftr::before { content: ""; display: block; height: 1px; background: linear-gradient(90deg, transparent, #C9A45C, transparent); }
.ftr__wrap { width: min(100% - 2 * var(--pad), var(--wrap)); margin-inline: auto; display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: clamp(28px, 4vw, 56px); padding-block: clamp(44px, 6vw, 72px); }
.ftr .brand { color: #F8F2E9; }
.ftr .brand__name { color: #EAD2D0; }
.ftr .brand__tag { color: rgba(251, 247, 240, .6); }
.ftr__about { margin: 16px 0 18px; max-width: 30ch; }
.ftr h3 { margin: 0 0 14px; font: 700 1.25rem/1.2 var(--font-head); color: #EAD2D0; }
.ftr li + li { margin-top: 8px; }
.ftr a { text-decoration: none; transition: color .2s ease; }
.ftr li a:hover, .ftr__bar a:hover { color: #E7C987; }
.ftr li a { display: inline-flex; gap: 10px; align-items: baseline; }
.ftr li a i { color: #E7C987; width: 1.1em; }
.ftr__social { display: flex; gap: 10px; }
.ftr__social a { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid rgba(231, 201, 135, .4); border-radius: 50%; color: #E7C987; }
.ftr__social a:hover { background: #E7C987; color: #1B0910; }
.ftr__bar { border-top: 1px solid rgba(231, 201, 135, .18); }
.ftr__bar p { width: min(100% - 2 * var(--pad), var(--wrap)); margin: 0 auto; padding-block: 18px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; font-size: .8125rem; color: rgba(251, 247, 240, .55); }
@media (max-width: 900px) { .ftr__wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .ftr__wrap { grid-template-columns: 1fr; } }




/* ===== Real printed invitation finishes — tactile paper, foil and botanical detail ===== */
.bk__front {
  isolation: isolate;
  background:
    radial-gradient(ellipse at 18% 12%, rgba(255,255,255,.19), transparent 36%),
    radial-gradient(ellipse at 82% 88%, rgba(0,0,0,.17), transparent 45%),
    linear-gradient(132deg, color-mix(in srgb, var(--cv) 78%, white), var(--cv) 48%, var(--cv2));
  box-shadow:
    0 26px 42px rgba(49, 24, 29, .25),
    inset 1px 0 1px rgba(255,255,255,.32),
    inset -2px 0 3px rgba(0,0,0,.12);
}
.bk__front::before {
  inset: 17px;
  border: 1px solid color-mix(in srgb, var(--ft) 78%, transparent);
  outline: 1px solid color-mix(in srgb, var(--ft) 25%, transparent);
  outline-offset: 4px;
  opacity: .94;
}
.bk__front::after {
  width: 9%;
  background: linear-gradient(90deg, rgba(0,0,0,.25), rgba(255,255,255,.11) 35%, transparent 82%);
}
.bk__inner {
  background:
    radial-gradient(ellipse at 18% 12%, rgba(255,255,255,.15), transparent 42%),
    linear-gradient(145deg, color-mix(in srgb, var(--cv) 75%, white), var(--cv2));
}
.bk__inner::before {
  content: "";
  position: absolute;
  inset: 17px;
  border: 1px solid color-mix(in srgb, var(--ft) 68%, transparent);
  box-shadow: inset 0 0 0 4px color-mix(in srgb, var(--ft) 8%, transparent);
}
.bk__mono {
  text-shadow: 0 1px 0 rgba(255,255,255,.28), 0 3px 7px rgba(0,0,0,.24);
  filter: drop-shadow(0 1px 0 color-mix(in srgb, var(--ft) 55%, transparent));
}
.bk__page {
  background:
    radial-gradient(ellipse at 14% 8%, rgba(255,255,255,.92), transparent 42%),
    repeating-linear-gradient(0deg, rgba(105,78,53,.018) 0 1px, transparent 1px 4px),
    #F8F2E9;
  box-shadow: 0 25px 44px rgba(60,20,30,.25), 3px 0 0 #F1E8D9, 6px 0 0 #E3D6C3;
}
.bk--floral .bk__front {
  background:
    radial-gradient(ellipse at 12% 14%, rgba(255,255,255,.65), transparent 35%),
    radial-gradient(ellipse at 18% 22%, rgba(185,92,91,.17), transparent 20%),
    radial-gradient(ellipse at 78% 78%, rgba(185,92,91,.13), transparent 25%),
    linear-gradient(145deg, #F7E5DE, #EBCBC3 58%, #E2B9B0);
}
.bk--floral .cv { opacity: .9; }
.bk--minimal .bk__front {
  background:
    radial-gradient(ellipse at 20% 15%, rgba(255,255,255,.95), transparent 48%),
    repeating-linear-gradient(0deg, rgba(126,105,76,.025) 0 1px, transparent 1px 5px),
    linear-gradient(145deg, #FFFCF5, #EEE5D5);
}
.bk--rustic .bk__front {
  background:
    repeating-linear-gradient(0deg, rgba(75,47,27,.035) 0 1px, transparent 1px 5px),
    radial-gradient(ellipse at 25% 10%, rgba(255,255,255,.3), transparent 50%),
    linear-gradient(145deg, #C9A27C, #A87C55);
}
.bk--destination .bk__front {
  background:
    radial-gradient(ellipse at 80% 15%, rgba(255,255,255,.18), transparent 34%),
    linear-gradient(145deg, #397D7A, #1F4B4D);
}
.bk--royal .bk__front {
  background:
    radial-gradient(ellipse at 18% 12%, rgba(255,255,255,.16), transparent 38%),
    linear-gradient(145deg, #293B60, #121A2E);
}
@media (prefers-reduced-motion: no-preference) {
  .bk__front { transition: box-shadow .45s ease, filter .45s ease; }
  .bk:hover .bk__front { filter: saturate(1.06); box-shadow: 0 32px 52px rgba(49,24,29,.32), inset 1px 0 1px rgba(255,255,255,.32); }
}


/* Photographed-style printed invitation suites (bundled local artwork) */
.bk__front { overflow:hidden; background:#eee1d6 !important; }
.bk__front::before, .bk__front::after { display:none !important; }
.bk__photo { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; object-position:center; border-radius:inherit; filter:saturate(1.04) contrast(1.03); transition:transform .65s cubic-bezier(.2,.75,.25,1), filter .45s ease; }
.bk:hover .bk__photo, .bk:focus-within .bk__photo { transform:scale(1.055); filter:saturate(1.08) contrast(1.04); }
.bk__mono, .bk__front > .cv { display:none !important; }
.bk__tap { z-index:4; }
@media (prefers-reduced-motion:reduce) { .bk__photo { transition:none; } }


/* ===== Wishcraft footer refinement: balanced columns, richer finish, clear bottom bar ===== */
.ftr {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: rgba(251,247,240,.78);
  background:
    radial-gradient(ellipse at 9% 0%, rgba(128,43,61,.22), transparent 34%),
    radial-gradient(ellipse at 92% 20%, rgba(201,164,92,.09), transparent 28%),
    #1B0910;
  border-top: 1px solid rgba(201,164,92,.22);
}
.ftr::before {
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, #4A1025 16%, #E7C987 50%, #4A1025 84%, transparent 100%);
}
.ftr__wrap {
  position: relative;
  width: min(100% - 2 * var(--pad), var(--wrap));
  grid-template-columns: minmax(220px, 1.25fr) minmax(120px, .72fr) minmax(135px, .82fr) minmax(220px, 1.12fr);
  align-items: start;
  gap: clamp(20px, 2.6vw, 34px);
  padding-block: 42px 36px;
}
.ftr__wrap > nav,
.ftr__wrap > div:last-child { padding-inline-start: 0; border-inline-start: 0; }
.ftr__wrap > div:first-child { max-width: 310px; }
.ftr .brand { gap: 12px; }
.ftr .brand__mark { flex: 0 0 auto; }
.ftr .brand__name { letter-spacing: -.015em; }
.ftr__about { max-width: 29ch; margin: 14px 0 17px; line-height: 1.75; color: rgba(251,247,240,.74); }
.ftr h3 {
  position: relative;
  display: inline-block;
  margin: 2px 0 15px;
  padding-bottom: 10px;
  font-size: 1.22rem;
  letter-spacing: .01em;
  color: #EAD2D0;
}
.ftr h3::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  bottom: 0;
  width: 32px;
  height: 1px;
  background: #C9A45C;
}
.ftr ul { margin: 0; padding: 0; list-style: none; }
.ftr li + li { margin-top: 9px; }
.ftr li a { align-items: flex-start; gap: 10px; line-height: 1.55; color: rgba(251,247,240,.76); }
.ftr li a i { margin-top: .18em; flex: 0 0 1.1em; }
.ftr li a:hover { color: #E7C987; }
.ftr__social { gap: 11px; }
.ftr__social a { width: 42px; height: 42px; border-color: rgba(231,201,135,.42); background: rgba(255,255,255,.018); transition: transform .22s ease, background .22s ease, color .22s ease; }
.ftr__social a:hover { transform: translateY(-3px); }
.ftr__bar {
  border-top: 1px solid rgba(231,201,135,.2);
  background: rgba(0,0,0,.16);
}
.ftr__bar p {
  min-height: 52px;
  box-sizing: border-box;
  align-items: center;
  padding-block: 16px;
  font-size: .8125rem;
  letter-spacing: .01em;
  color: rgba(251,247,240,.62);
}
.ftr__bar p span:last-child { color: #D6B779; }

/* "Have a lovely idea in mind?" card in the footer's last column (same on every page) */
.ftr__note {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-top: 22px;
  padding: 14px 15px;
  border: 1px solid rgba(231,201,135,.24);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(231,201,135,.09), rgba(128,43,61,.10));
  max-width: 290px;
}
.ftr__note-mark {
  display: grid;
  place-items: center;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: #E7C987;
  border: 1px solid rgba(231,201,135,.38);
  font-size: 15px;
}
.ftr__note p { margin: 0 0 6px; color: rgba(251,247,240,.72); font-size: .88rem; line-height: 1.5; }
.ftr__note a { color: #E7C987; font-size: .84rem; font-weight: 600; text-decoration: none; }
.ftr__note a:hover { color: #fff0c9; }
@media (max-width: 900px) {
  .ftr__wrap { grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr); gap: 34px 42px; }
  .ftr__wrap > div:first-child { max-width: 360px; }
}
@media (max-width: 520px) {
  .ftr__wrap { grid-template-columns: minmax(0,1fr); gap: 28px; padding-block: 36px 30px; }
  .ftr__wrap > div:first-child { max-width: 100%; }
  .ftr h3 { margin-bottom: 14px; }
  .ftr li + li { margin-top: 10px; }
  .ftr__bar p { align-items: flex-start; flex-direction: column; gap: 8px; padding-block: 15px; }
}
@media (min-width: 901px) and (max-width: 1100px) {
  .ftr__wrap { grid-template-columns: minmax(190px,1.2fr) minmax(100px,.7fr) minmax(120px,.8fr) minmax(190px,1.1fr); gap: 24px; }
  .ftr li a { overflow-wrap: anywhere; }
}


/* Wishcraft motion polish — smooth, restrained, accessible interactions */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* ===================================================================
   HOME 2
   Same page width (1320px container) and section spacing as Home 1
   =================================================================== */
.h2-btn { width: 46px; height: 46px; flex: none; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--gold); border-radius: 50%; color: var(--ink); font-size: 15px; cursor: pointer; transition: background .25s ease, color .25s ease, transform .25s ease, opacity .25s ease; }
.h2-btn:hover:not(:disabled) { background: var(--gold); color: #fff; transform: translateY(-2px); }
.h2-btn:disabled { opacity: .4; cursor: default; }
[dir="rtl"] .h2-btn i { transform: scaleX(-1); }

/* ----- 1. split hero ----- */
.h2-hero { position: relative; overflow: hidden; display: flex; align-items: center; min-height: calc(100svh - var(--h)); padding-block: clamp(28px, 4vw, 56px); background: radial-gradient(50% 60% at 88% 42%, var(--glow), transparent 72%), radial-gradient(35% 45% at 0 100%, var(--glow), transparent 70%), var(--bg); }
@media (min-width: 960px) { .h2-hero { height: calc(100svh - var(--h)); min-height: 620px; } }
.h2-hero__in { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
@media (min-width: 960px) { .h2-hero__in { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); } }
.h2-hero h1 { margin: 0; font: 600 clamp(2.4rem, 5vw, 4.4rem)/1.06 var(--font-head); letter-spacing: -.01em; color: var(--ink); text-wrap: balance; }
.h2-hero__text { max-width: 50ch; margin: 20px 0 0; font-size: 1.0625rem; color: var(--muted); }
.h2-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.h2-hero__facts { display: flex; flex-wrap: wrap; gap: 12px 26px; margin: 30px 0 0; padding: 0; list-style: none; font-size: .9375rem; color: var(--muted); }
.h2-hero__facts li { display: flex; align-items: center; gap: 10px; }
.h2-hero__facts i { color: var(--gold-text); font-size: 16px; }
@media (max-width: 959px) {
  .h2-hero__copy { text-align: center; }
  .h2-hero__text { margin-inline: auto; }
  .h2-hero__actions, .h2-hero__facts { justify-content: center; }
  .h2-hero .eyebrow { justify-content: center; }
}

.h2-hero__deck { display: grid; justify-items: center; gap: 26px; }
.deck { position: relative; isolation: isolate; width: min(100%, clamp(250px, 34vh + 10vw, 400px)); aspect-ratio: 4 / 5; touch-action: pan-y; cursor: grab; outline-offset: 10px; -webkit-tap-highlight-color: transparent; }
.deck::before { content: ""; position: absolute; inset: -7% -12% -5%; z-index: -1; border: 1.5px solid var(--line); border-radius: 999px 999px 28px 28px; background: linear-gradient(180deg, var(--shade), transparent 80%); }
.dk {
  position: absolute; inset: 0; margin: 0; padding: 0; background: var(--shade); border-radius: 18px; box-shadow: var(--shadow);
  transform-origin: 50% 90%; opacity: 0; transform: translateY(40px) scale(.9);
  transition: transform .7s cubic-bezier(.22, 1, .36, 1), opacity .5s ease;
}
.dk img { width: 100%; height: 100%; object-fit: cover; border-radius: 18px; user-select: none; -webkit-user-drag: none; }
.dk figcaption { position: absolute; inset: auto 0 0; display: flex; flex-direction: column; gap: 2px; padding: 56px 20px 20px; border-radius: 0 0 18px 18px; background: linear-gradient(transparent, rgba(30, 8, 16, .84)); color: #FBF6EE; opacity: 0; transition: opacity .4s ease .2s; }
.dk figcaption strong { font: 600 1.5rem/1.15 var(--font-head); }
.dk figcaption span { font-size: .9375rem; opacity: .92; }
.deck.is-in .dk[data-pos="0"] { opacity: 1; transform: none; z-index: 6; }
.deck.is-in .dk[data-pos="0"] figcaption { opacity: 1; }
.deck.is-in .dk[data-pos="1"] { opacity: 1; transform: translate(7%, 3%) rotate(5deg) scale(.95); z-index: 5; transition-delay: .08s; }
.deck.is-in .dk[data-pos="2"] { opacity: 1; transform: translate(-7%, 5%) rotate(-5deg) scale(.9); z-index: 4; transition-delay: .16s; }
.deck.is-in .dk[data-pos="3"] { opacity: 0; transform: translateY(6%) scale(.86); z-index: 3; }
.deck.is-in .dk[data-pos="4"] { opacity: 0; transform: translateY(6%) scale(.86); z-index: 2; }
.deck.is-in .dk[data-pos="5"] { opacity: 0; transform: translateY(6%) scale(.86); z-index: 1; }
.deck.is-in .dk.is-out[data-pos] { opacity: 0; transform: translate(115%, -6%) rotate(14deg); transition-duration: .45s; transition-delay: 0s; }
.deck__ctrl { display: flex; align-items: center; gap: 18px; }
.deck__now { margin: 0; min-width: 190px; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.deck__now span { font-size: .8125rem; font-weight: 600; letter-spacing: .16em; color: var(--muted); font-variant-numeric: tabular-nums; }
.deck__now b { font: 600 1.25rem/1.2 var(--font-head); color: var(--ink); }

/* ----- 2. promise strip: slim band on a real photo ----- */
.h2-prom { position: relative; isolation: isolate; padding-block: clamp(18px, 2.4vw, 28px); color: #FBF6EE; border-block: 1px solid rgba(231, 201, 135, .35); }
.h2-prom__bg { position: absolute; inset: 0; z-index: -2; }
.h2-prom__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.h2-prom::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(42, 15, 23, .94), rgba(74, 24, 39, .88), rgba(42, 15, 23, .94)); }
.h2-prom__list { display: grid; grid-template-columns: repeat(2, 1fr); margin: 0; padding: 0; list-style: none; }
.h2-prom__list li { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 12px 8px; }
.h2-prom__list li:nth-child(even) { border-inline-start: 1px solid rgba(231, 201, 135, .28); }
.h2-prom__list li:nth-child(n+3) { border-top: 1px solid rgba(231, 201, 135, .28); }
.h2-prom__list i { font-size: 18px; color: #E7C987; }
.h2-prom__list strong { display: block; font: 700 clamp(1.5rem, 2.6vw, 2rem)/1 var(--font-head); color: #E7C987; font-variant-numeric: tabular-nums; }
.h2-prom__list span { display: block; margin-top: 3px; font-size: .875rem; color: rgba(251, 246, 238, .86); }
@media (min-width: 900px) {
  .h2-prom__list { grid-template-columns: repeat(4, 1fr); }
  .h2-prom__list li:nth-child(n+3) { border-top: 0; }
  .h2-prom__list li + li { border-inline-start: 1px solid rgba(231, 201, 135, .28); }
}

/* ----- 3. collections rail ----- */
.h2-rail { padding-block: clamp(64px, 8vw, 112px); background: var(--bg); overflow: clip; }
.h2-rail__head { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; margin-bottom: clamp(32px, 4.5vw, 56px); }
@media (min-width: 760px) { .h2-rail__head { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 40px; } }
.h2-rail__intro { max-width: 640px; }
.h2-rail h2 { margin: 0; font: 600 clamp(2rem, 3.8vw, 3.25rem)/1.08 var(--font-head); color: var(--ink); text-wrap: balance; }
.h2-rail__lead { margin: 14px 0 0; color: var(--muted); }
.h2-rail__ctrl { display: flex; gap: 12px; }
/* ---- Home 2 collections: expanding panels ---- */
.acc { display: flex; gap: 10px; height: clamp(470px, 46vw, 590px); margin-top: clamp(28px, 4vw, 48px); }
.ac { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; border-radius: 22px; background: #2A0F17; box-shadow: var(--shadow); transition: flex .7s cubic-bezier(.22, 1, .36, 1); }
.ac.is-on { flex: 5.2 1 0; }
.ac__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); filter: saturate(.8) brightness(.72); transition: transform 1s cubic-bezier(.22, 1, .36, 1), filter .6s ease; }
.ac.is-on .ac__img { transform: none; filter: none; }
.ac::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(42, 15, 23, .35), transparent 30%, rgba(42, 15, 23, .88)); }
.ac__tab { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 22px 0 26px; border: 0; background: none; color: #F8F2E9; cursor: pointer; transition: opacity .35s ease; }
.ac__tab b { font: 600 1rem/1 var(--font-head); color: #E7C987; letter-spacing: .08em; }
.ac__tab span { writing-mode: vertical-rl; transform: rotate(180deg); font: 600 1.375rem/1 var(--font-head); white-space: nowrap; }
.ac.is-on .ac__tab { opacity: 0; pointer-events: none; }
.ac__tab:focus-visible { outline: 2px solid #E7C987; outline-offset: -4px; border-radius: 22px; }
.ac__panel { position: absolute; z-index: 2; inset: auto 0 0; padding: clamp(20px, 2.6vw, 34px); color: #F8F2E9; opacity: 0; visibility: hidden; transform: translateY(18px); transition: opacity .4s ease, transform .5s ease, visibility 0s .4s; }
.ac.is-on .ac__panel { opacity: 1; visibility: visible; transform: none; transition: opacity .5s ease .25s, transform .6s ease .25s; }
.ac__kind { margin: 0; font-size: .78rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #E7C987; }
.ac__name { margin: 6px 0 0; font: 600 clamp(1.75rem, 3vw, 2.5rem)/1.1 var(--font-head); }
.ac__fin { margin: 6px 0 0; opacity: .85; }
.ac__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 18px; margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(231, 201, 135, .4); }
.ac__price { font-weight: 600; }
.ac__go { display: inline-flex; align-items: center; gap: 10px; padding: 11px 22px; border-radius: 999px; background: #E7C987; color: #2A0F17; font-weight: 600; transition: transform .25s ease, box-shadow .25s ease; }
.ac__go:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0, 0, 0, .4); }
.ac__go i { font-size: .75rem; }
[dir="rtl"] .ac__go i { transform: scaleX(-1); }
@media (max-width: 899px) {
  .acc { flex-direction: column; height: auto; }
  .ac { flex: none; height: 74px; transition: height .6s cubic-bezier(.22, 1, .36, 1); }
  .ac.is-on { flex: none; height: clamp(400px, 112vw, 480px); }
  .ac__tab { flex-direction: row; justify-content: flex-start; gap: 16px; padding: 0 22px; }
  .ac__tab span { writing-mode: horizontal-tb; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .ac, .ac__img, .ac__panel { transition: none; } }

[dir="rtl"] .rail__bar i { transform-origin: right center; }

/* ----- shared bits for the new sections ----- */
.h2-fin h2, .h2-cs h2 { margin: 0; font: 600 clamp(2rem, 3.6vw, 3.1rem)/1.1 var(--font-head); color: #FBF6EE; text-wrap: balance; }
.h2-fin .btn--solid, .h2-cs .btn--solid { background: #E7C987; color: #3A1520; }
.h2-fin .eyebrow, .h2-cs .eyebrow { color: #E7C987; }
.h2-fin .eyebrow span, .h2-cs .eyebrow span, .h2-fin .eyebrow span::after, .h2-cs .eyebrow span::after { background: #E7C987; }
.h2-fin .h1__script, .h2-cs .h1__script { color: #E7C987; }

/* ----- 4. finishes ----- */
.h2-fin { position: relative; overflow: clip; padding-block: clamp(64px, 8vw, 112px); color: #F8F2E9; border-top: 1px solid var(--line); background: radial-gradient(60% 50% at 85% 10%, rgba(125, 52, 70, .55), transparent 70%), radial-gradient(40% 40% at 0 100%, rgba(231, 201, 135, .08), transparent 70%), #2A0F17; }
.h2-fin__in { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(36px, 5vw, 72px); align-items: center; }
@media (min-width: 900px) { .h2-fin__in { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } }
.fin__frame { position: relative; width: min(100%, 420px); margin-inline: auto; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 999px 999px 24px 24px; box-shadow: 0 30px 60px rgba(0, 0, 0, .45); outline: 1px solid rgba(231, 201, 135, .5); outline-offset: 10px; }
.fin__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.75); transform-origin: var(--o, 50% 50%); transition: opacity .7s ease, transform 0s linear .7s; }
.fin__img.is-on { opacity: 1; transform: scale(1.3); transition: opacity .7s ease, transform 9s cubic-bezier(.2, .6, .2, 1); }
.fin__used { margin: 28px 0 0; text-align: center; font-size: .9375rem; color: rgba(248, 242, 233, .82); }
.fin__tabs { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 0; }
.fin__tab { display: inline-flex; align-items: center; gap: 10px; padding: 10px 20px; border-radius: 999px; border: 1px solid rgba(231, 201, 135, .45); background: transparent; color: #F8F2E9; font: 500 .9375rem/1 var(--font-body); cursor: pointer; transition: background .25s ease, color .25s ease, border-color .25s ease; }
.fin__tab span { font-size: .8125rem; opacity: .7; font-variant-numeric: tabular-nums; }
.fin__tab:hover { border-color: #E7C987; }
.fin__tab[aria-selected="true"] { background: #E7C987; border-color: #E7C987; color: #3A1520; }
.fin__panel { margin: 26px 0 30px; min-height: 12.5rem; }
.fin__panel.is-swap { animation: finIn .6s ease; }
@keyframes finIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.fin__panel h3 { margin: 0 0 10px; font: 600 1.75rem/1.2 var(--font-head); color: #FBF6EE; }
.fin__panel p { margin: 0; max-width: 52ch; color: rgba(248, 242, 233, .88); }
.fin__panel ul { display: grid; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; font-size: .9375rem; color: rgba(248, 242, 233, .9); }
.fin__panel li { position: relative; padding-inline-start: 22px; }
.fin__panel li::before { content: ""; position: absolute; inset-inline-start: 0; top: .6em; width: 7px; height: 7px; background: #E7C987; transform: rotate(45deg); }

/* ----- 6. gallery ----- */
.h2-gal { padding-block: clamp(64px, 8vw, 112px); background: var(--bg); border-top: 1px solid var(--line); }
.gal { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(170px, 38vw, 230px); grid-auto-flow: dense; gap: clamp(10px, 1.6vw, 18px); }
.gt { position: relative; margin: 0; overflow: hidden; border-radius: 18px; background: var(--shade); outline-offset: 3px; }
.gt--a { grid-column: span 2; grid-row: span 2; }
.gt--q { grid-column: span 2; }
.gt img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.22, 1, .36, 1); }
.gt:hover img, .gt:focus-visible img { transform: scale(1.06); }
.gt figcaption { position: absolute; inset: auto 0 0; display: flex; flex-direction: column; gap: 2px; padding: 44px 16px 14px; color: #FBF6EE; background: linear-gradient(transparent, rgba(30, 8, 16, .84)); opacity: 0; transform: translateY(8px); transition: opacity .35s ease, transform .35s ease; }
.gt:hover figcaption, .gt:focus-visible figcaption, .gt:focus-within figcaption { opacity: 1; transform: none; }
@media (hover: none) { .gt figcaption { opacity: 1; transform: none; } }
.gt figcaption strong { font: 600 1.125rem/1.2 var(--font-head); }
.gt figcaption span { font-size: .875rem; opacity: .9; }
.gt--q { display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: clamp(20px, 3vw, 36px); color: #F8F2E9; background: radial-gradient(70% 70% at 100% 0, rgba(125, 52, 70, .6), transparent 70%), #2A0F17; }
.gt--q > i { font-size: 22px; color: #E7C987; }
.gt--q blockquote { margin: 0; font: italic 500 clamp(1.0625rem, 1.7vw, 1.4rem)/1.45 var(--font-head); }
.gt--q figcaption { position: static; padding: 0; opacity: 1; transform: none; background: none; }
.gt--q figcaption span { color: rgba(248, 242, 233, .8); }
.gal__more { margin: clamp(32px, 4vw, 48px) 0 0; text-align: center; }
@media (min-width: 900px) {
  .gal { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(190px, 17vw, 250px); }
  .gt--c { grid-row: span 2; }
}

/* ----- 7. consultation ----- */
.h2-cs { position: relative; isolation: isolate; overflow: clip; padding-block: clamp(64px, 8vw, 112px); color: #F8F2E9; }
.h2-cs__bg { position: absolute; inset: 0; z-index: -2; }
.h2-cs__bg img { width: 100%; height: 100%; object-fit: cover; filter: blur(3px); transform: scale(1.05); }
.h2-cs::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 60% at 80% 20%, rgba(125, 52, 70, .5), transparent 70%), linear-gradient(180deg, rgba(42, 15, 23, .92), rgba(30, 8, 16, .96)); }
.h2-cs__in { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
@media (min-width: 900px) { .h2-cs__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.h2-cs__lead { margin: 18px 0 0; max-width: 46ch; color: rgba(248, 242, 233, .88); }
.h2-cs__pts { display: grid; gap: 12px; margin: 26px 0 0; padding: 0; list-style: none; }
.h2-cs__pts li { display: flex; align-items: center; gap: 12px; font-size: 1rem; }
.h2-cs__pts i { width: 22px; text-align: center; color: #E7C987; }

.cs__stage { position: relative; perspective: 1200px; margin-top: clamp(80px, 10vw, 120px); }
.cs__card { position: relative; z-index: 2; padding: clamp(24px, 3.5vw, 40px); border: 1px solid rgba(231, 201, 135, .45); border-radius: 22px; background: rgba(255, 255, 255, .07); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 30px 60px rgba(0, 0, 0, .4); transition: transform 1s cubic-bezier(.22, 1, .36, 1) .5s, opacity .8s ease .5s; }
.cs__stage.is-armed:not(.is-in) .cs__card { opacity: 0; transform: translateY(40px); }
.cs__card h3 { margin: 0; font: 600 1.625rem/1.2 var(--font-head); color: #FBF6EE; }
.cs__note { margin: 6px 0 22px; font-size: .9375rem; color: rgba(248, 242, 233, .8); }
.cs__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
@media (min-width: 560px) { .cs__grid { grid-template-columns: 1fr 1fr; } .cs__f--full { grid-column: 1 / -1; } }
.cs__f label { display: block; margin-bottom: 4px; font-size: .875rem; font-weight: 500; color: rgba(248, 242, 233, .86); }
.cs__f input, .cs__f select { width: 100%; padding: 10px 0; background: transparent; border: 0; border-bottom: 1px solid rgba(248, 242, 233, .45); border-radius: 0; color: #FBF6EE; font: 400 1rem/1.4 var(--font-body); color-scheme: dark; transition: border-color .25s ease; }
.cs__f input::placeholder { color: rgba(248, 242, 233, .5); }
.cs__f input:focus, .cs__f select:focus { outline: none; border-bottom-color: #E7C987; }
.cs__f input[aria-invalid="true"] { border-bottom-color: #FFB4A8; }
.cs__f option { color: #2A0F17; }
.cs__err { margin: 16px 0 0; font-size: .9375rem; color: #FFB4A8; }
.cs__card .btn { margin-top: 24px; gap: 10px; }
[dir="rtl"] .cs__card .btn i { transform: scaleX(-1); }

.cs__flap, .cs__seal { display: none; }
.cs__stage.is-armed .cs__flap { display: block; position: absolute; z-index: 3; top: 0; inset-inline: 0; height: clamp(80px, 10vw, 120px); transform-origin: top center; background: linear-gradient(180deg, #8C3B4F, #5A1F2D); clip-path: polygon(0 0, 100% 0, 50% 100%); transition: transform .9s cubic-bezier(.65, 0, .35, 1) .1s, z-index 0s .5s; }
.cs__stage.is-armed.is-in .cs__flap { transform: rotateX(180deg); z-index: 1; }
.cs__stage.is-armed .cs__seal { display: grid; place-items: center; position: absolute; z-index: 4; top: clamp(80px, 10vw, 120px); left: 50%; width: 46px; height: 46px; border-radius: 50%; transform: translate(-50%, -50%); color: #5A1F2D; font: 700 1.125rem/1 var(--font-head); background: radial-gradient(circle at 35% 30%, #F0D79B, #C9A45C 55%, #8F6A25); box-shadow: 0 4px 10px rgba(0, 0, 0, .4); transition: opacity .4s ease, transform .6s ease; }
.cs__stage.is-armed.is-in .cs__seal { opacity: 0; transform: translate(-50%, -20%) scale(.5); }

@media (prefers-reduced-motion: reduce) {
  .fin__img, .fin__img.is-on { transition-duration: .01ms; transition-delay: 0s; }
  .dk { transition-duration: .01ms; transition-delay: 0s; }
}

/* HOME 2 HERO — enforce readable contrast in both themes */
.h2-hero .h2-hero__copy,
.h2-hero .h2-hero__copy p,
.h2-hero .h2-hero__copy h1,
.h2-hero .h2-hero__copy .h1__script,
.h2-hero .h2-hero__facts,
.h2-hero .h2-hero__facts li {
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  text-shadow: none;
}
.h2-hero .h2-hero__copy h1 { color: #4A1025 !important; }
.h2-hero .h2-hero__copy .h1__script { color: #7A2942 !important; }
.h2-hero .h2-hero__copy > .eyebrow { color: #805B24 !important; }
.h2-hero .h2-hero__copy > .eyebrow span,
.h2-hero .h2-hero__copy > .eyebrow span::after { background-color: #805B24 !important; }
.h2-hero .h2-hero__text,
.h2-hero .h2-hero__facts { color: #55434A !important; }
.h2-hero .h2-hero__facts i { color: #805B24 !important; }
[data-theme="dark"] .h2-hero .h2-hero__copy h1 { color: #FFF4EA !important; }
[data-theme="dark"] .h2-hero .h2-hero__copy .h1__script { color: #E7C987 !important; }
[data-theme="dark"] .h2-hero .h2-hero__copy > .eyebrow { color: #E7C987 !important; }
[data-theme="dark"] .h2-hero .h2-hero__copy > .eyebrow span,
[data-theme="dark"] .h2-hero .h2-hero__copy > .eyebrow span::after { background-color: #E7C987 !important; }
[data-theme="dark"] .h2-hero .h2-hero__text,
[data-theme="dark"] .h2-hero .h2-hero__facts { color: #E4D5D3 !important; }
[data-theme="dark"] .h2-hero .h2-hero__facts i { color: #E7C987 !important; }


/* ===== Products page (compact: small type, small photos, tight cards) ===== */
[data-th="classic"]     { --t1: #4A1025; --tg: #B8934B; --tp: #F6ECDC; --tb: #EADBC6; }
[data-th="floral"]      { --t1: #8A3F52; --tg: #C98A93; --tp: #FCF1EE; --tb: #F3D9D6; }
[data-th="minimal"]     { --t1: #3F3B34; --tg: #9C8B66; --tp: #FAF8F3; --tb: #E9E4DA; }
[data-th="royal"]       { --t1: #1F2E4F; --tg: #C5A46D; --tp: #F3F5F9; --tb: #D5DBE8; }
[data-th="rustic"]      { --t1: #5E3B22; --tg: #A5784F; --tp: #F4E7D3; --tb: #E2CBAA; }
[data-th="destination"] { --t1: #1F5254; --tg: #C9A961; --tp: #F1F6F3; --tb: #CFE0DB; }

.pr-wrap { width: min(100% - 2 * var(--pad), var(--wrap)); margin-inline: auto; }
.pr-hero h1 em, .pr-head h2 em, .pr-grid h2 em { font-style: italic; font-weight: 500; color: var(--gold-text); }

/* paper pieces drawn in CSS (used in cards and the hero) */
.pc { position: relative; width: 100%; container-type: inline-size; background: var(--tp); color: var(--t1); border-radius: 2px; box-shadow: 0 8px 18px rgba(60, 20, 30, .22), 0 1px 3px rgba(60, 20, 30, .12); transition: background-color .6s ease, color .6s ease; }
.pc::before { content: ""; position: absolute; inset: 4cqw; border: 1px solid var(--tg); border-radius: 1px; transition: border-color .6s ease; }
.pc__in { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 9cqw 8cqw; }
.pc p { margin: 0; }
.pc--sd, .pc--thx { aspect-ratio: 7 / 5; }
.pc--rsvp { aspect-ratio: 4 / 5; }
.pc--menu { aspect-ratio: 1 / 1.9; }
.pc__s { font: 600 5cqw/1.3 var(--font-body); letter-spacing: .2em; text-transform: uppercase; }
.pc__s--b { margin-top: auto !important; letter-spacing: .04em; text-transform: none; font-style: italic; font-family: var(--font-head); font-weight: 500; font-size: 6.4cqw; }
.pc__d { margin-top: 3cqw !important; font: italic 600 11cqw/1.1 var(--font-head); }
.pc__n { font: italic 500 6.4cqw/1.3 var(--font-head); opacity: .85; }
.pc__h { font: 600 8cqw/1 var(--font-head); letter-spacing: .22em; padding-inline-start: .22em; }
.pc__t { font: italic 700 13cqw/1.1 var(--font-head); }
.pc__i { font: italic 500 6cqw/1.4 var(--font-head); opacity: .9; }
.pc--menu .pc__i { margin-top: 3cqw; font-size: 7.4cqw; }
.pc__r { position: relative; display: block; width: 18cqw; height: 1px; margin: 4cqw auto; background: var(--tg); }
.pc__r::after { content: ""; position: absolute; left: 50%; top: 50%; width: 2.6cqw; height: 2.6cqw; background: var(--tg); transform: translate(-50%, -50%) rotate(45deg); }
.pc__l { display: block; width: 100%; height: 1px; margin-top: 7cqw; background: var(--tg); opacity: .8; }
.pc__l--s { width: 58%; align-self: flex-start; }

/* ---- 1. hero ---- */
.pr-hero { position: relative; overflow: hidden; padding-block: clamp(24px, 3.5vw, 44px) clamp(32px, 4.5vw, 56px); background: radial-gradient(48% 70% at 80% 42%, var(--glow), transparent 72%), var(--bg); }
.pr-hero__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(24px, 5vw, 64px); align-items: center; }
.pr-crumb { display: flex; gap: 8px; margin-bottom: 16px; font-size: .8125rem; color: var(--muted); }
.pr-crumb a { text-decoration: none; }
.pr-crumb a:hover { color: var(--gold-text); }
.pr-hero h1 { margin: 0; font: 600 clamp(1.75rem, 3.1vw, 2.5rem)/1.15 var(--font-head); color: var(--ink); text-wrap: balance; }
.pr-hero__text { max-width: 48ch; margin: 14px 0 0; color: var(--muted); }
.pr-hero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.pr-hero__actions .btn i { margin-inline-start: 8px; font-size: .75rem; transition: translate .2s ease; }
.pr-hero__actions .btn--solid:hover i { translate: 0 3px; }
.pr-facts { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); font-size: .875rem; color: var(--muted); }
.pr-facts li { display: inline-flex; align-items: center; gap: 8px; }
.pr-facts i { color: var(--gold-text); }
.pr-hero__copy > * { animation: prUp .8s cubic-bezier(.2, .7, .2, 1) both; }
.pr-hero__copy > :nth-child(2) { animation-delay: .06s; } .pr-hero__copy > :nth-child(3) { animation-delay: .12s; } .pr-hero__copy > :nth-child(4) { animation-delay: .18s; } .pr-hero__copy > :nth-child(5) { animation-delay: .24s; } .pr-hero__copy > :nth-child(6) { animation-delay: .3s; }
@keyframes prUp { from { opacity: 0; transform: translateY(18px); } }

.pr-hero__art { display: grid; justify-items: center; gap: 14px; }
.pr-art { position: relative; width: min(100%, 330px); aspect-ratio: 1 / .92; container-type: inline-size; }
.pr-art__arch, .pr-art__ring { position: absolute; left: 19cqw; top: 4cqw; width: 62cqw; aspect-ratio: 4 / 5; border-radius: 999px 999px 6px 6px; }
.pr-art__arch { overflow: hidden; background: var(--tb); box-shadow: var(--shadow); animation: prArch 1.3s cubic-bezier(.65, 0, .15, 1) both; transition: background-color .6s ease; }
.pr-art__ring { border: 1px solid var(--gold); translate: -3cqw 3cqw; animation: prFade 1s ease .9s both; }
@keyframes prArch { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0); } }
@keyframes prFade { from { opacity: 0; } }
.pr-art__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; scale: 1.08; transition: opacity .7s ease, scale 1.4s ease; }
.pr-art__img.is-on { opacity: 1; scale: 1; }
.pr-art__pc { position: absolute; z-index: 3; animation: prPop .9s cubic-bezier(.2, .8, .2, 1) 1s both, prBob 6s ease-in-out 2s infinite; }
.pr-art__pc--a { left: 0; bottom: 8cqw; width: 27cqw; rotate: -8deg; }
.pr-art__pc--b { right: -2cqw; top: 32cqw; width: 36cqw; rotate: 6deg; animation-delay: 1.15s, 3s; }
@keyframes prPop { from { opacity: 0; transform: translateY(24px) scale(.9); } }
@keyframes prBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.pr-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.pr-chip, .pr-pill { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font: 500 .8125rem/1 var(--font-body); cursor: pointer; white-space: nowrap; transition: background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease; }
.pr-chip i, .pr-pill i { width: 9px; height: 9px; border-radius: 50%; background: linear-gradient(135deg, var(--t1) 50%, var(--tg) 50%); box-shadow: 0 0 0 1px rgba(0, 0, 0, .12); }
.pr-chip:hover, .pr-pill:hover { border-color: var(--gold); transform: translateY(-1px); }
.pr-chip[aria-pressed="true"], .pr-pill[aria-pressed="true"] { background: var(--btn-bg); color: var(--btn-fg); border-color: var(--btn-bg); }
.pr-cap { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 2px 12px; margin: 0; text-align: center; font-size: .875rem; color: var(--muted); }
.pr-cap strong { font: 600 1.0625rem/1.2 var(--font-head); color: var(--ink); }
.pr-cap a { font-weight: 600; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--gold); }
.pr-cap a:hover { color: var(--gold-text); }
.pr-cap a i { margin-inline-start: 6px; font-size: .7rem; }

/* ---- 2. theme tiles ---- */
.pr-themes { padding-block: clamp(36px, 5vw, 64px); background: var(--shade); border-block: 1px solid var(--line); }
.pr-head { max-width: 560px; margin-bottom: clamp(20px, 3vw, 32px); }
.pr-head h2, .pr-grid h2 { margin: 0; font: 600 clamp(1.5rem, 2.4vw, 2rem)/1.15 var(--font-head); color: var(--ink); text-wrap: balance; }
.pr-head p:not(.eyebrow) { margin: 8px 0 0; color: var(--muted); font-size: .9375rem; }
.pr-tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(12px, 2vw, 24px); }
.pr-tile { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; color: var(--text); text-decoration: none; }
.pr-tile__img { position: relative; display: block; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 999px 999px 8px 8px; background: var(--tb); box-shadow: 0 10px 22px rgba(107, 39, 55, .14); transition: transform .5s cubic-bezier(.2, .7, .2, 1), box-shadow .5s ease; }
.pr-tile__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
.pr-tile:hover .pr-tile__img, .pr-tile:focus-visible .pr-tile__img { transform: translateY(-6px); box-shadow: 0 18px 32px rgba(107, 39, 55, .22); }
.pr-tile:hover img, .pr-tile:focus-visible img { transform: scale(1.07); }
.pr-tile__sw { position: absolute; inset: auto 0 0; display: flex; justify-content: center; gap: 6px; padding: 22px 0 10px; background: linear-gradient(transparent, rgba(0, 0, 0, .5)); translate: 0 101%; transition: translate .4s cubic-bezier(.2, .7, .2, 1); }
.pr-tile:hover .pr-tile__sw, .pr-tile:focus-visible .pr-tile__sw { translate: 0 0; }
.pr-tile__sw i { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid #fff; }
.pr-tile__sw i:nth-child(1) { background: var(--t1); } .pr-tile__sw i:nth-child(2) { background: var(--tg); } .pr-tile__sw i:nth-child(3) { background: var(--tp); }
.pr-tile__name { margin-top: 12px; font: 600 1.0625rem/1.2 var(--font-head); color: var(--ink); }
.pr-tile__meta { font-size: .75rem; color: var(--muted); }
.pr-tile__go { position: absolute; top: 4px; inset-inline-end: 4px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--btn-bg); color: var(--btn-fg); font-size: .7rem; opacity: 0; scale: .6; transition: opacity .3s ease, scale .3s ease; }
.pr-tile:hover .pr-tile__go, .pr-tile:focus-visible .pr-tile__go { opacity: 1; scale: 1; }
.pr-tile.is-active .pr-tile__img { outline: 2px solid var(--gold); outline-offset: 3px; }
.pr-tile.is-active .pr-tile__name { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 4px; }
[dir="rtl"] .pr-tile__go i, [dir="rtl"] .pcard__enq i, [dir="rtl"] .pr-cap a i { transform: scaleX(-1); }

/* ---- 3. product grid ---- */
.pr-grid { padding-block: clamp(36px, 5vw, 64px) clamp(48px, 6vw, 80px); }
.pr-head--row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; max-width: none; margin-bottom: 14px; scroll-margin-top: calc(var(--h) + 12px); }
.pr-count { margin: 0; font-size: .875rem; color: var(--muted); }
.pr-bar { position: sticky; top: var(--h); z-index: 40; display: grid; gap: 8px; padding-block: 10px; margin-bottom: 20px; background: color-mix(in srgb, var(--bg) 94%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.pr-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.pr-pills--type .pr-pill { border-radius: 8px; }
.pr-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 20px; }
.pcard { display: flex; flex-direction: column; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; transition: translate .35s ease, box-shadow .35s ease, opacity .6s ease; }
.pcard[hidden] { display: none; }
.pcard:hover { translate: 0 -4px; box-shadow: var(--shadow); }
.pr-js .pcard { opacity: 0; translate: 0 18px; }
.pr-js .pcard.is-in { opacity: 1; translate: 0 0; }
.pr-js .pcard.is-in:hover { translate: 0 -4px; }
.pcard__media { position: relative; display: grid; place-items: center; aspect-ratio: 5 / 6; overflow: hidden; background: var(--tb); text-decoration: none; }
.pcard__media::before { content: ""; position: absolute; inset: 14% 16% 0; border: 1px solid var(--tg); border-bottom: 0; border-radius: 999px 999px 0 0; opacity: .5; }
.pcard__media:has(img)::before { display: none; }
.pcard__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
.pcard:hover .pcard__media img { transform: scale(1.06); }
.pcard__media .pc { position: relative; z-index: 1; rotate: -3deg; transition: rotate .5s ease, scale .5s ease, background-color .6s ease; }
.pcard:hover .pcard__media .pc { rotate: 0deg; scale: 1.05; }
.pcard__media .pc--sd, .pcard__media .pc--thx { width: 72%; }
.pcard__media .pc--rsvp { width: 54%; }
.pcard__media .pc--menu { width: 46%; }
.pcard__chip { position: absolute; z-index: 2; inset-inline-start: 10px; top: 10px; padding: 4px 10px; border-radius: 999px; background: rgba(255, 253, 249, .94); color: #4A1025; font: 600 .6875rem/1 var(--font-body); letter-spacing: .03em; }
.pcard__body { display: flex; flex: 1; flex-direction: column; gap: 3px; padding: 12px 14px 12px; }
.pcard__kind { margin: 0; font: 600 .625rem/1.3 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, var(--gold) 65%, var(--ink)); }
.pcard__name { margin: 0; font: 600 1.0625rem/1.25 var(--font-head); color: var(--ink); }
.pcard__fin { margin: 0; font-size: .75rem; color: var(--muted); }
.pcard__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 8px; margin-top: auto; padding-top: 8px; border-top: 1px dashed var(--line); }
.pcard__price { font: 700 1rem/1 var(--font-head); color: var(--ink); }
.pcard__price small { font: 500 .6875rem/1 var(--font-body); color: var(--muted); }
.pcard__enq { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; font-size: .8125rem; font-weight: 600; color: var(--ink); text-decoration: none; }
.pcard__enq i { font-size: .65rem; transition: translate .2s ease; }
.pcard__enq:hover { color: var(--gold-text); }
.pcard:hover .pcard__enq i, .pcard__enq:hover i { translate: 3px 0; }
.pr-empty { margin: 24px 0 0; text-align: center; color: var(--muted); }
.pr-more { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 18px; margin-top: 28px; }
.pr-reset { background: none; border: 0; padding: 8px; color: var(--ink); font: 500 .875rem/1 var(--font-body); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 4px; cursor: pointer; }

@media (max-width: 960px) {
  .pr-hero__grid { grid-template-columns: 1fr; }
  .pr-hero__copy { text-align: center; }
  .pr-crumb, .pr-hero__actions, .pr-facts { justify-content: center; }
  .pr-hero__text { margin-inline: auto; }
  .pr-hero .eyebrow { justify-content: center; }
  .pr-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 16px; }
}
@media (max-width: 640px) {
  .pr-bar { gap: 6px; }
  .pr-pills { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--pad) * -1); padding-inline: var(--pad); }
  .pr-pills::-webkit-scrollbar { display: none; }
  .pr-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .pcard__body { padding: 10px 11px 10px; }
  .pcard__name { font-size: .9375rem; }
  .pcard__price small { display: none; }
  .pr-art { width: min(100%, 290px); }
}
@media (prefers-reduced-motion: reduce) {
  .pr-hero__copy > *, .pr-art__arch, .pr-art__ring, .pr-art__pc { animation: none !important; }
  .pr-js .pcard { opacity: 1; translate: 0 0; }
}

/* products page fixes */
.pr-more [hidden], .pr-empty[hidden], .pr-reset[hidden] { display: none !important; }
.pr-hero__art { justify-items: center; }
.pr-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: min(100%, 330px); gap: 6px; }
.pr-chips .pr-chip { justify-content: center; padding-inline: 8px; }


/* ===== Back to top (all pages) ===== */
.totop {
  position: fixed; z-index: 900;
  inset-inline-end: clamp(14px, 2.5vw, 28px);
  bottom: calc(clamp(14px, 2.5vw, 28px) + env(safe-area-inset-bottom, 0px));
  display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%;
  background: var(--btn-bg); color: var(--btn-fg); box-shadow: var(--shadow); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  opacity: 0; visibility: hidden; transform: translateY(14px) scale(.9);
  transition: opacity .3s ease, transform .3s ease, visibility 0s linear .3s, box-shadow .25s ease;
}
.totop.is-visible { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.totop.is-visible:hover { transform: translateY(-3px); box-shadow: 0 22px 44px rgba(107, 39, 55, .3); }
.totop:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.totop__ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); fill: none; pointer-events: none; }
.totop__track { stroke: currentColor; stroke-opacity: .22; stroke-width: 2; }
.totop__bar { stroke: #E7C987; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 138.23; stroke-dashoffset: 138.23; transition: stroke-dashoffset .12s linear; }
.totop__arrow { position: relative; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s ease; pointer-events: none; }
.totop:hover .totop__arrow { transform: translateY(-2px); }
@media (max-width: 600px) { .totop { width: 44px; height: 44px; } }
@media (prefers-reduced-motion: reduce) {
  .totop { transform: none; transition: opacity .01s, visibility 0s; }
  .totop.is-visible:hover { transform: none; }
  .totop__bar, .totop__arrow { transition: none; }
}
@media print { .totop { display: none; } }


/* ===================== about (page styles) ===================== */
/* ===== Wishcraft About page (built on the Home design tokens) ===== */
.ab{ background: var(--bg); color: var(--text); overflow-x: clip; }

.ab-w{ width: min(100% - 2 * var(--pad), var(--wrap)); margin-inline: auto; }

.ab section{ position: relative; }

.ab-sec{ padding-block: clamp(64px, 8vw, 112px); }

.ab h1, .ab h2, .ab h3{ margin: 0; font-family: var(--font-head); color: var(--ink); }

.ab h2{ font: 600 clamp(2rem, 4vw, 3.25rem)/1.08 var(--font-head); text-wrap: balance; }

.ab .h1__script{ display: inline; }

.ab-head{ text-align: center; max-width: 660px; margin: 0 auto clamp(32px, 5vw, 56px); }

.ab-head .eyebrow{ justify-content: center; }

.ab-head p:not(.eyebrow){ margin: 14px 0 0; color: var(--muted); }

.ab-lead{ color: var(--muted); font-size: 1.0625rem; max-width: 52ch; }


/* reveal (only when JS is running) */
.ab-js .ab-rv{ opacity: 0; transform: translateY(26px); transition: opacity .8s ease, transform .9s cubic-bezier(.2, .8, .2, 1); transition-delay: var(--d, 0s); }

.ab-js .ab-rv.is-in{ opacity: 1; transform: none; }


/* 1. hero */
.ab-hero{ padding-block: clamp(40px, 6vw, 88px) clamp(48px, 6vw, 80px); background: radial-gradient(55% 60% at 90% 10%, var(--glow), transparent 70%), radial-gradient(40% 45% at 0 100%, var(--shade), transparent 70%), var(--bg); }

.ab-hero__grid{ display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: clamp(32px, 6vw, 96px); }

.ab-hero h1{ font: 600 clamp(2.5rem, 5.4vw, 4.5rem)/1.05 var(--font-head); text-wrap: balance; }

.ab-hero .ab-lead{ margin: 22px 0 30px; }

.ab-btns{ display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }

.ab-btns .btn i{ margin-inline-start: 10px; font-size: .75rem; transition: translate .25s ease; }

.ab-btns .btn:hover i{ translate: 4px 0; }

.ab-hero__note{ display: flex; align-items: center; gap: 14px; margin-top: 30px; color: var(--muted); font-size: .875rem; }

.ab-hero__note span{ width: 44px; height: 1px; background: var(--gold); }


.ab-art{ position: relative; width: min(100%, 520px); aspect-ratio: 1 / 1.04; margin-inline: auto; }

.ab-art__arch{ position: absolute; inset: 0 6% 6% 6%; border-radius: 999px 999px 20px 20px; border: 1px solid var(--line); background: linear-gradient(180deg, var(--glow), var(--shade) 70%, transparent), var(--surface); box-shadow: var(--shadow); }

.ab-art__arch::after{ content: ""; position: absolute; inset: 12px; border: 1px solid var(--line); border-radius: 999px 999px 12px 12px; opacity: .7; }

.ab-art__c{ position: absolute; width: 44%; }

.ab-art__c .ftc{ box-shadow: 0 22px 40px rgba(60, 20, 30, .3), 0 4px 10px rgba(60, 20, 30, .14); }

.ab-art__c--1{ left: 5%; top: 24%; transform: rotate(-10deg); }

.ab-art__c--3{ right: 5%; top: 22%; transform: rotate(9deg); }

.ab-art__c--2{ left: 28%; top: 14%; width: 46%; z-index: 2; transform: rotate(-1deg); }

.ab-art__c{ transition: transform .7s cubic-bezier(.2, .8, .2, 1); }

.ab-art:hover .ab-art__c--1{ transform: rotate(-14deg) translateX(-4%); }

.ab-art:hover .ab-art__c--3{ transform: rotate(13deg) translateX(4%); }

.ab-art:hover .ab-art__c--2{ transform: rotate(0) translateY(-3%); }

.ab-art__seal{ position: absolute; z-index: 3; right: 2%; bottom: 2%; width: 104px; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; font: 700 2.5rem/1 var(--font-head); color: #4A1827; background: radial-gradient(circle at 35% 30%, #F0D79B, #C9A45C 58%, #8F6A25); box-shadow: 0 14px 28px rgba(60, 30, 10, .4), inset 0 0 0 5px rgba(255, 255, 255, .18); }

.ab-art__seal::before{ content: ""; position: absolute; inset: 10px; border-radius: 50%; border: 1px solid rgba(74, 24, 39, .35); }

.ab-art__chip{ position: absolute; z-index: 3; left: 0; bottom: 14%; display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); box-shadow: var(--shadow); font-size: .8125rem; font-weight: 500; color: var(--ink); }

.ab-art__chip i{ color: var(--gold-text); }


/* facts strip */
.ab-facts{ border-block: 1px solid var(--line); background: var(--surface); }

.ab-facts ul{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }

.ab-facts li{ display: flex; align-items: center; gap: 14px; padding: 22px 18px; }

.ab-facts li + li{ border-inline-start: 1px solid var(--line); }

.ab-facts i{ flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--shade); color: var(--gold-text); }

.ab-facts strong{ display: block; font: 600 1.0625rem/1.2 var(--font-head); color: var(--ink); }

.ab-facts span{ font-size: .8125rem; color: var(--muted); }


/* 2. story */
.ab-story__grid{ display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: clamp(32px, 7vw, 110px); }

.ab-story__vis{ position: relative; display: grid; place-items: center; aspect-ratio: 4 / 4.5; border-radius: 20px; overflow: hidden; background: radial-gradient(70% 60% at 50% 40%, rgba(255, 255, 255, .5), transparent 70%), linear-gradient(160deg, #F3D9D2, #E3B9B0); box-shadow: var(--shadow); }

.ab-story__vis::before{ content: ""; position: absolute; inset: 14px; border: 1px solid rgba(143, 106, 37, .5); border-radius: 12px; }

.ab-story__card{ width: 50%; transform: rotate(-4deg); }

.ab-story__card .ftc{ box-shadow: 0 26px 50px rgba(74, 24, 39, .35); }

.ab-story__env{ position: absolute; width: 42%; aspect-ratio: 4 / 3; right: 8%; bottom: 12%; border-radius: 4px; background: linear-gradient(160deg, #4A1025, #681F36); box-shadow: 0 16px 30px rgba(40, 10, 20, .4); transform: rotate(7deg); }

.ab-story__env::before{ content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom right, transparent 49.5%, rgba(231, 201, 135, .35) 50%) top / 100% 62% no-repeat, linear-gradient(to bottom left, transparent 49.5%, rgba(231, 201, 135, .35) 50%) top / 100% 62% no-repeat; clip-path: inset(0 0 38% 0); }

.ab-story__env::after{ content: "W"; position: absolute; left: 50%; top: 52%; width: 34px; aspect-ratio: 1; display: grid; place-items: center; translate: -50% -50%; border-radius: 50%; font: 700 .95rem/1 var(--font-head); color: #4A1827; background: radial-gradient(circle at 35% 30%, #F0D79B, #C9A45C 60%, #8F6A25); }

.ab-story__tag{ position: absolute; z-index: 2; left: 22px; bottom: 22px; padding: 7px 14px; border-radius: 999px; background: rgba(255, 251, 244, .9); font: 500 italic .9375rem/1.2 var(--font-head); color: #4A1025; }

.ab-story__copy h2{ margin-bottom: 22px; }

.ab-story__copy p{ margin: 0 0 16px; color: var(--muted); }

.ab-story__sign{ margin-top: 22px; font: 400 2rem/1.1 var(--font-script); color: var(--ink); }


/* 3. values (dark) */
.ab-val{ color: #F8F2E9; background: radial-gradient(60% 50% at 85% 0%, rgba(125, 52, 70, .55), transparent 70%), radial-gradient(40% 40% at 0 100%, rgba(231, 201, 135, .09), transparent 70%), #2A0F17; }

.ab-val .eyebrow{ color: #E7C987; }

.ab-val h2{ color: #F8F2E9; }

.ab-val .h1__script{ color: #E7C987; }

.ab-val__top{ display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 48px; margin-bottom: clamp(30px, 5vw, 52px); }

.ab-val__top h2{ max-width: 14em; }

.ab-val__top p{ margin: 0; max-width: 40ch; color: rgba(251, 247, 240, .76); }

.ab-val__grid{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); }

.ab-val__card{ position: relative; padding: clamp(24px, 3vw, 36px); border: 1px solid rgba(231, 201, 135, .3); border-radius: 16px; background: linear-gradient(160deg, rgba(231, 201, 135, .08), rgba(255, 255, 255, .02)); transition: transform .35s ease, border-color .3s ease, background .3s ease; }

.ab-val__card:hover{ transform: translateY(-6px); border-color: rgba(231, 201, 135, .7); background: linear-gradient(160deg, rgba(231, 201, 135, .14), rgba(255, 255, 255, .03)); }

.ab-val__no{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 26px; font: italic 500 1.125rem/1 var(--font-head); color: #E7C987; }

.ab-val__no i{ display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid rgba(231, 201, 135, .5); border-radius: 50%; font-size: 1rem; font-style: normal; }

.ab-val__card h3{ margin-bottom: 10px; font: 600 1.625rem/1.15 var(--font-head); color: #F8F2E9; }

.ab-val__card p{ margin: 0; color: rgba(251, 247, 240, .78); font-size: .9375rem; }


/* 4. process */
.ab-steps{ position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px); counter-reset: s; }

.ab-steps::before{ content: ""; position: absolute; top: 23px; inset-inline: 12.5%; height: 2px; background: linear-gradient(90deg, var(--gold), var(--line)); }

.ab-step{ position: relative; text-align: center; }

.ab-step__n{ position: relative; z-index: 1; display: grid; place-items: center; width: 48px; height: 48px; margin: 0 auto 20px; border-radius: 50%; border: 2px solid var(--gold); background: var(--bg); font: 700 1.25rem/1 var(--font-head); color: var(--ink); transition: background .3s ease, color .3s ease; }

.ab-step:hover .ab-step__n{ background: var(--gold); color: #fff; }

.ab-step__c{ height: calc(100% - 68px); padding: 24px 22px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); transition: transform .35s ease, box-shadow .35s ease; }

.ab-step:hover .ab-step__c{ transform: translateY(-5px); box-shadow: var(--shadow); }

.ab-step__c > i{ display: grid; place-items: center; width: 46px; height: 46px; margin: 0 auto 14px; border-radius: 50%; background: var(--shade); color: var(--gold-text); }

.ab-step h3{ margin-bottom: 8px; font: 600 1.25rem/1.2 var(--font-head); }

.ab-step p{ margin: 0 0 14px; color: var(--muted); font-size: .9375rem; }

.ab-step small{ display: block; padding-top: 12px; border-top: 1px solid var(--line); font-size: .8125rem; color: var(--muted); }

.ab-step small b{ color: var(--gold-text); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; margin-inline-end: 6px; }


/* 5. finishes */
.ab-fin{ background: linear-gradient(180deg, var(--shade), transparent 60%), var(--bg); border-top: 1px solid var(--line); }

.ab-fin__grid{ display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: center; gap: clamp(32px, 6vw, 96px); }

.ab-fin__copy h2{ margin-bottom: 18px; }

.ab-fin__copy .ab-lead{ margin: 0 0 26px; }

.ab-fin__tiles{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }

.ab-tile{ padding: 22px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }

.ab-tile:hover{ transform: translateY(-5px); border-color: var(--gold); box-shadow: var(--shadow); }

.ab-tile i{ display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 14px; border-radius: 12px; background: var(--shade); color: var(--gold-text); transition: background .3s ease, color .3s ease; }

.ab-tile:hover i{ background: var(--gold); color: #fff; }

.ab-tile h3{ margin-bottom: 4px; font: 600 1.125rem/1.2 var(--font-head); }

.ab-tile p{ margin: 0; font-size: .8125rem; line-height: 1.5; color: var(--muted); }


/* 6. team */
.ab-team{ border-top: 1px solid var(--line); }

.ab-team__grid{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 32px); }

.ab-tm{ overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); transition: transform .4s cubic-bezier(.2, .8, .2, 1), box-shadow .4s ease, border-color .3s ease; }

.ab-tm:hover{ transform: translateY(-6px); border-color: var(--gold); box-shadow: var(--shadow); }

.ab-tm__ph{ position: relative; aspect-ratio: 4 / 4.4; overflow: hidden; background: linear-gradient(160deg, var(--p-cover), var(--p-cover2)); }

.ab-tm__ph::before{ content: attr(data-i); position: absolute; inset: 0; display: grid; place-items: center; font: 600 5rem/1 var(--font-head); color: var(--p-paper); opacity: .8; }

.ab-tm__ph img{ position: relative; width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.2, .7, .2, 1); }

.ab-tm:hover .ab-tm__ph img{ transform: scale(1.05); }

.ab-tm__role{ position: absolute; z-index: 1; left: 16px; bottom: 16px; padding: 6px 14px; border-radius: 999px; background: rgba(255, 251, 244, .92); font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #4A1025; }

.ab-tm__b{ padding: 20px 22px 24px; }

.ab-tm__b h3{ margin-bottom: 2px; font: 600 1.5rem/1.15 var(--font-head); }

.ab-tm__b em{ display: block; margin-bottom: 10px; font-style: normal; font-size: .875rem; color: var(--gold-text); font-weight: 600; }

.ab-tm__b p{ margin: 0; color: var(--muted); font-size: .9375rem; }


/* 7. quote */
.ab-q{ padding-block: clamp(56px, 7vw, 96px); background: linear-gradient(var(--shade), transparent), var(--bg); border-top: 1px solid var(--line); }

.ab-q__in{ position: relative; max-width: 820px; margin-inline: auto; text-align: center; }

.ab-q__mark{ display: block; font: 700 clamp(5rem, 10vw, 8rem)/.7 var(--font-head); color: var(--gold-text); opacity: .6; }

.ab-q blockquote{ margin: 8px 0 22px; font: 500 clamp(1.375rem, 2.8vw, 2rem)/1.5 var(--font-head); color: var(--ink); text-wrap: balance; }

.ab-q cite{ display: block; font: 400 2rem/1.1 var(--font-script); font-style: normal; color: var(--ink); }

.ab-q small{ display: block; margin-top: 4px; color: var(--muted); font-size: .875rem; }


/* 8. closing card: reuses the Home .cta card */
.ab .cta{ border-top: 0; }
@media (max-width: 1000px) {
  .ab-steps{ grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
  .ab-steps::before{ display: none; }
  .ab-step__c{ height: auto; }
  .ab-fin__grid{ grid-template-columns: 1fr; }
  .ab-facts ul{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ab-facts li:nth-child(3){ border-inline-start: 0; }
  .ab-facts li:nth-child(n+3){ border-top: 1px solid var(--line); }
}
@media (max-width: 860px) {
  .ab-hero__grid, .ab-story__grid{ grid-template-columns: 1fr; }
  .ab-hero__copy{ text-align: center; }
  .ab-hero__copy .ab-lead{ margin-inline: auto; }
  .ab-btns, .ab-hero__note{ justify-content: center; }
  .ab-story__vis{ max-width: 460px; margin-inline: auto; width: 100%; }
  .ab-val__grid, .ab-team__grid{ grid-template-columns: 1fr; }
  .ab-team__grid{ max-width: 440px; margin-inline: auto; }
}
@media (max-width: 560px) {
  .ab-steps{ grid-template-columns: 1fr; }
  .ab-fin__tiles{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ab-facts ul{ grid-template-columns: 1fr; }
  .ab-facts li + li{ border-inline-start: 0; border-top: 1px solid var(--line); }
  .ab-btns .btn{ width: 100%; }
  .ab-art__seal{ width: 80px; font-size: 2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ab-js .ab-rv{ opacity: 1; transform: none; transition: none; }
  .ab-art__c, .ab-val__card, .ab-tm, .ab-step__c, .ab-tile{ transition: none; }
}


/* Image polish: keep Mira's portrait proportionate and give the story artwork a real photographic backdrop. */
.ab-story__vis{
  background-image: linear-gradient(180deg, rgba(243,217,210,.28), rgba(227,185,176,.48)), url('../images/contact-hero.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.ab-tm__ph{ aspect-ratio: 3 / 4; }

.ab-tm__ph img{ object-fit: cover; object-position: center 24%; }

.ab-tm:hover .ab-tm__ph img{ transform: scale(1.025); }
@media (max-width: 600px) {
  .ab-tm__ph{ aspect-ratio: 4 / 4.8; }
  .ab-tm__ph img{ object-position: center 20%; }
}


/* Light-theme contrast fix: the closing CTA stays dark, so its headline must stay ivory. */
.ab .cta .cta__card h2,
.ab .cta .cta__card h2:not(.h1__script){
  color: #F8F2E9 !important;
}

.ab .cta .cta__card h2 .h1__script{
  color: #E7C987 !important;
}

.ab .cta .cta__sub{ color: rgba(251,247,240,.84); }

.ab .cta .cta__card .eyebrow{ color: #E7C987; }
/* Footer styles now live in style.css so every page shares the same footer. */

/* ===================== contact (page styles) ===================== */
/* =====================================================================
   Wishcraft — Contact page
   Uses the shared tokens from style.css / darkmode.css, so dark mode
   and RTL come for free. Every class is prefixed cx-.
   Scroll motion is switched on by html.cx-js (set in <head>, skipped
   when the visitor prefers reduced motion), so the page is fully
   readable without JavaScript.
   ===================================================================== */

.cx-page{ overflow-x: clip; background: var(--bg); color: var(--text); --cx-err: #b23b48; }

.cx-w{ width: min(100% - 2 * var(--pad), var(--wrap)); margin-inline: auto; }

.cx-page :where(h1, h2, h3, p, ul, ol, figure){ margin: 0; }

.cx-page :where(ul, ol){ padding: 0; list-style: none; }

.cx-page img{ display: block; width: 100%; height: 100%; object-fit: cover; }

.cx-page a{ text-decoration: none; }

.cx-page [id]{ scroll-margin-top: calc(var(--h) + 24px); }

.cx-page :focus-visible{ outline: 2px solid var(--gold); outline-offset: 3px; }


.cx-h2{ font-family: var(--font-head); font-weight: 500; color: var(--ink); font-size: clamp(2rem, 3.5vw, 3rem); line-height: 1.07; letter-spacing: -.02em; }

.cx-sub{ max-width: 46ch; margin-top: 12px; font-size: 1.02rem; line-height: 1.8; color: var(--muted); }


/* scroll progress */
.cx-prog{ position: fixed; z-index: 1200; inset: 0 0 auto 0; height: 3px; pointer-events: none; }

.cx-prog i{ display: block; height: 100%; background: linear-gradient(90deg, var(--gold), #E7C987); transform-origin: left; transform: scaleX(var(--p, 0)); }


/* ------------------------------------------------ scroll reveal system -- */
.cx-js [data-r]{ opacity: 0; transform: translateY(26px); transition: opacity .8s var(--d, 0s) ease, transform .9s var(--d, 0s) cubic-bezier(.2, .8, .3, 1); }

.cx-js [data-r].is-in{ opacity: 1; transform: none; }


.cx-js .cx-un{ clip-path: inset(0 0 100% 0); transition: clip-path 1.3s var(--d, 0s) cubic-bezier(.77, 0, .18, 1); }

.cx-js .cx-un img{ transform: scale(1.22); transition: transform 1.8s var(--d, 0s) cubic-bezier(.2, .7, .2, 1); }

.cx-js .cx-un.is-in{ clip-path: inset(-60px); }

.cx-js .cx-un.is-in img{ transform: none; }


.cx-par{ transform: translate3d(0, var(--py, 0px), 0); will-change: transform; }


.cx-ul{ position: relative; display: inline-block; }

.cx-ul::after{ content: ""; position: absolute; inset-inline: 1% 1%; bottom: .02em; height: 2px; background: var(--gold); opacity: .75; transform-origin: left; }

.cx-js .cx-ul::after{ transform: scaleX(0); transition: transform 1.1s var(--d, .9s) cubic-bezier(.65, 0, .2, 1); }

.cx-js .is-in .cx-ul::after, .cx-js .cx-ul.is-in::after{ transform: scaleX(1); }


/* ---------------------------------------------------------------- HERO -- */
.cx-hero{ position: relative; overflow: clip; padding: clamp(18px, 2.6vw, 36px) 0 clamp(36px, 4.5vw, 64px);
  background: radial-gradient(52% 62% at 82% 40%, var(--glow), transparent 72%), radial-gradient(40% 50% at 0% 100%, var(--shade), transparent 70%), var(--bg); }

.cx-hero__grid{ display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: clamp(32px, 5vw, 80px); align-items: center; min-height: min(580px, calc(100svh - var(--h) - 90px)); }


.cx-hero h1{ font-family: var(--font-head); font-weight: 500; color: var(--ink); font-size: clamp(2.7rem, 5vw, 4.8rem); line-height: 1.04; letter-spacing: -.03em; }

.cx-line{ display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }

.cx-line > span{ display: inline-block; }

.cx-js .cx-line > span{ transform: translateY(112%); transition: transform 1.1s var(--d, 0s) cubic-bezier(.2, .8, .2, 1); }

.cx-js .is-in .cx-line > span{ transform: none; }

.cx-line--em{ font-style: italic; color: var(--gold-text); }


.cx-lead{ max-width: 46ch; margin-top: clamp(16px, 2vw, 24px); font-size: clamp(1rem, 1.25vw, 1.14rem); line-height: 1.8; color: var(--muted); }

.cx-actions{ display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 24px; }

.cx-actions .btn i, .cx-submit i{ margin-inline-start: 12px; transition: translate .3s; }

.cx-actions .btn:hover i, .cx-submit:hover i{ translate: 4px 0; }

.cx-link{ position: relative; padding-block: 4px; font-weight: 600; font-size: .95rem; color: var(--ink); }

.cx-link::after{ content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 1px; background: var(--gold); transform-origin: left; transition: transform .35s; }

.cx-link:hover::after{ transform: scaleX(.35); }


.cx-chips{ display: flex; flex-wrap: wrap; gap: 16px clamp(24px, 3.4vw, 48px); margin-top: clamp(22px, 3vw, 34px); padding-top: 20px; border-top: 1px solid var(--line); }

.cx-chip{ display: flex; align-items: center; gap: 12px; color: inherit; min-width: 0; }

.cx-chip__ic{ flex: none; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--gold-text); font-size: .95rem; transition: background .3s, color .3s, border-color .3s; }

a.cx-chip:hover .cx-chip__ic{ background: var(--gold); color: #fff; border-color: var(--gold); }

.cx-chip span:last-child{ display: grid; gap: 2px; min-width: 0; }

.cx-chip small{ font-size: .78rem; color: var(--muted); }

.cx-chip strong{ font-size: .92rem; font-weight: 600; color: var(--ink); white-space: nowrap; }


.cx-hero__art{ position: relative; width: min(100%, 470px); margin-inline: auto 0; }

.cx-arch{ position: relative; border-radius: 999px 999px 22px 22px; outline: 1px solid var(--gold); outline-offset: 14px; box-shadow: var(--shadow); }

.cx-arch__img{ aspect-ratio: 10 / 11; border-radius: inherit; overflow: hidden; background: var(--shade-strong); }

.cx-arch__img img{ object-position: 38% 50%; }

.cx-par--tile{ position: absolute; inset-inline-start: -13%; bottom: -7%; width: 38%; z-index: 2; }

.cx-tile{ aspect-ratio: 3 / 4; overflow: hidden; border-radius: 14px; background: var(--shade-strong); box-shadow: var(--shadow); }

.cx-tile--hero{ border: 6px solid var(--surface); rotate: -5deg; }


/* ------------------------------------------------------- CONSULTATION -- */
.cx-consult{ padding: clamp(38px, 5vw, 68px) 0; background: var(--surface); border-block: 1px solid var(--line); }

.cx-consult__grid{ display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 72px); align-items: start; }

.cx-side{ position: sticky; top: calc(var(--h) + 28px); }

.cx-flow{ position: relative; margin-top: clamp(18px, 2.4vw, 28px); display: grid; gap: 0; }

.cx-flow::before, .cx-flow::after{ content: ""; position: absolute; inset-inline-start: 19px; top: 20px; bottom: 20px; width: 2px; background: var(--line); }

.cx-flow::after{ background: var(--gold); transform-origin: top; transform: scaleY(var(--fill, 0)); transition: transform .6s cubic-bezier(.2, .8, .3, 1); }

.cx-flow li{ position: relative; display: flex; align-items: center; gap: 16px; padding: 7px 0; color: var(--muted); transition: color .4s; }

.cx-flow__dot{ position: relative; z-index: 1; flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); font: 500 1rem var(--font-head); transition: background .4s, color .4s, border-color .4s, transform .5s cubic-bezier(.2, .8, .3, 1); }

.cx-flow li strong{ display: block; font-size: 1rem; font-weight: 600; color: inherit; }

.cx-flow li small{ font-size: .84rem; color: var(--muted); }

.cx-flow li.is-on{ color: var(--ink); }

.cx-flow li.is-on .cx-flow__dot{ background: var(--gold); border-color: var(--gold); color: #fff; }

.cx-flow li.is-cur .cx-flow__dot{ transform: scale(1.14); box-shadow: 0 0 0 6px color-mix(in srgb, var(--gold) 22%, transparent); }

.cx-reply{ display: flex; align-items: center; gap: 14px; margin-top: clamp(18px, 2.2vw, 26px); padding: 13px 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--bg); }

.cx-reply i{ font-size: 1.15rem; color: var(--gold-text); }

.cx-reply strong{ display: block; color: var(--ink); font-size: .95rem; }

.cx-reply small{ color: var(--muted); font-size: .85rem; }


.cx-card{ position: relative; padding: clamp(20px, 2.8vw, 34px); border-radius: 24px; background: var(--bg); border: 1px solid var(--line); box-shadow: var(--shadow); }

.cx-card::before{ content: ""; position: absolute; inset: 8px; border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent); border-radius: 17px; pointer-events: none; }

.cx-form{ position: relative; display: grid; gap: clamp(18px, 2.4vw, 26px); }

.cx-group{ display: grid; gap: 12px; }

.cx-group h3{ display: flex; align-items: center; gap: 14px; font: 500 1.2rem var(--font-head); color: var(--ink); }

.cx-group h3::after{ content: ""; flex: 1; height: 1px; background: var(--line); }

.cx-fields{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }

.cx-field{ display: grid; gap: 6px; align-content: start; min-width: 0; }

.cx-field--full{ grid-column: 1 / -1; }

.cx-field label{ display: flex; align-items: center; gap: 6px; font-size: .88rem; font-weight: 600; color: var(--ink); }

.cx-field label b{ color: var(--gold-text); }

.cx-field label::after{ content: "\f00c"; font: 900 .62rem "Font Awesome 6 Free"; display: grid; place-items: center; width: 17px; height: 17px; margin-inline-start: auto; border-radius: 50%; background: var(--gold); color: #fff; scale: 0; transition: scale .4s cubic-bezier(.2, 1.6, .4, 1); }

.cx-field.is-valid label::after{ scale: 1; }

.cx-field input, .cx-field select, .cx-field textarea{ width: 100%; min-height: 46px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--text); font: 400 1rem var(--font-body); transition: border-color .25s, box-shadow .25s, background .25s; }

.cx-field textarea{ min-height: 96px; resize: vertical; line-height: 1.6; }

.cx-field select{ appearance: none; -webkit-appearance: none; padding-inline-end: 44px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1.5l6 6 6-6' fill='none' stroke='%23C5A46D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; }

.cx-field input::placeholder, .cx-field textarea::placeholder{ color: color-mix(in srgb, var(--muted) 72%, transparent); }

.cx-field input:hover, .cx-field select:hover, .cx-field textarea:hover{ border-color: var(--gold); }

.cx-field input:focus, .cx-field select:focus, .cx-field textarea:focus{ outline: 0; border-color: var(--gold); box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 24%, transparent); }

.cx-field [aria-invalid="true"]{ border-color: var(--cx-err); }

.cx-field [aria-invalid="true"]:focus{ box-shadow: 0 0 0 4px color-mix(in srgb, var(--cx-err) 20%, transparent); }

.cx-error{ display: none; font-size: .84rem; line-height: 1.5; color: var(--cx-err); }

.cx-error:not(:empty){ display: block; animation: cx-shake .4s; }

@keyframes cx-shake{ 20%, 60% { translate: -4px 0; } 40%, 80% { translate: 4px 0; } }

.cx-count{ display: flex; justify-content: space-between; gap: 12px; font-size: .82rem; color: var(--muted); }


.cx-check{ display: flex; align-items: flex-start; gap: 12px; font-size: .92rem; line-height: 1.6; color: var(--text); cursor: pointer; }

.cx-check input{ flex: none; width: 20px; height: 20px; margin-top: 2px; accent-color: var(--gold); }

.cx-check b{ color: var(--gold-text); }

.cx-error--consent{ margin-top: -14px; }

.cx-submit{ justify-self: start; min-width: 220px; }

.cx-fine{ font-size: .8rem; line-height: 1.6; color: var(--muted); margin-top: -6px; }


.cx-success{ display: none; align-items: center; gap: 18px; padding: 20px 22px; border-radius: 16px; border: 1px solid var(--gold); background: color-mix(in srgb, var(--gold) 14%, var(--surface)); color: var(--text); }

.cx-success:not([hidden]){ display: flex; animation: cx-rise .7s cubic-bezier(.2, .8, .3, 1); }

@keyframes cx-rise{ from { opacity: 0; transform: translateY(16px) scale(.97); } }

.cx-success svg{ flex: none; width: 54px; height: 54px; }

.cx-success circle{ fill: none; stroke: var(--gold); stroke-width: 2; stroke-dasharray: 152; stroke-dashoffset: 152; animation: cx-draw .9s .1s ease forwards; }

.cx-success path{ fill: none; stroke: var(--gold); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: cx-draw .6s .8s ease forwards; }

@keyframes cx-draw{ to { stroke-dashoffset: 0; } }

.cx-success strong{ color: var(--ink); }


/* -------------------------------------------------------------- STUDIO -- */
.cx-studio{ padding: clamp(40px, 5.5vw, 76px) 0; }

.cx-studio__grid{ display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(30px, 6vw, 90px); align-items: center; }

.cx-studio__art{ position: relative; width: 100%; max-width: 480px; justify-self: center; aspect-ratio: 1 / 1.12; margin-block: 14px; }  /* height follows width, so the photos can never spill out of the box */

.cx-studio__art .cx-par{ position: absolute; width: 58%; }

.cx-studio__art .cx-par--a{ inset-block-start: 0; inset-inline-start: 0; }

.cx-studio__art .cx-par--b{ inset-block-end: 0; inset-inline-end: 0; width: 54%; z-index: 2; }

.cx-studio__art .cx-tile{ border: 6px solid var(--surface); }

.cx-studio__art .cx-par--a .cx-tile{ rotate: -3deg; }

.cx-studio__art .cx-par--b .cx-tile{ rotate: 4deg; }


.cx-steps{ position: relative; display: grid; gap: clamp(14px, 2vw, 22px); margin-top: clamp(18px, 2.4vw, 28px); }

.cx-steps::before, .cx-steps::after{ content: ""; position: absolute; inset-inline-start: 25px; top: 26px; bottom: 26px; width: 2px; background: var(--line); }

.cx-steps::after{ background: var(--gold); transform-origin: top; transform: scaleY(var(--fill, 0)); }

.cx-steps li{ position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 20px; align-items: start; }

.cx-steps__dot{ position: relative; z-index: 1; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--muted); font-size: 1.05rem; transition: background .5s, color .5s, border-color .5s, transform .6s cubic-bezier(.2, .8, .3, 1); }

.cx-steps li > div{ padding-top: 4px; opacity: .5; transform: translateY(6px); transition: opacity .6s .1s, transform .6s .1s; }

.cx-steps h3{ font: 500 1.28rem var(--font-head); color: var(--ink); }

.cx-steps p{ margin-top: 6px; max-width: 44ch; font-size: .96rem; line-height: 1.7; color: var(--muted); }

.cx-steps li.is-on .cx-steps__dot{ background: var(--gold); border-color: var(--gold); color: #fff; transform: scale(1.06); }

.cx-steps li.is-on > div{ opacity: 1; transform: none; }

.cx-steps b[data-count]{ font-variant-numeric: tabular-nums; color: var(--ink); }


.cx-lines{ display: grid; margin-top: clamp(20px, 2.6vw, 30px); border-top: 1px solid var(--line); }

.cx-lines a, .cx-lines > div{ display: flex; align-items: center; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line); color: inherit; transition: padding .3s, background .3s; }

.cx-lines a:hover{ padding-inline-start: 10px; }

.cx-lines .cx-chip__ic{ width: 44px; height: 44px; }

.cx-lines a:hover .cx-chip__ic{ background: var(--gold); color: #fff; border-color: var(--gold); }

.cx-lines small{ display: block; font-size: .8rem; color: var(--muted); }

.cx-lines strong{ font-size: 1.02rem; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }


/* ----------------------------------------------------------------- MAP -- */
.cx-map{ padding: 0 0 clamp(40px, 5.5vw, 76px); }

.cx-map__head{ display: flex; justify-content: space-between; align-items: end; gap: 32px; margin-bottom: clamp(16px, 2vw, 24px); }

.cx-map__head > p{ max-width: 42ch; font-size: .95rem; line-height: 1.8; color: var(--muted); }

.cx-map__frame{ position: relative; height: clamp(250px, 30vw, 380px); border-radius: 24px; overflow: hidden; border: 1px solid var(--line); background: var(--shade-strong); box-shadow: var(--shadow); }

.cx-map__frame iframe{ display: block; width: 100%; height: 100%; border: 0; filter: saturate(.8); }

.cx-map__chip{ position: absolute; inset-inline-start: 18px; bottom: 18px; max-width: min(340px, calc(100% - 36px)); padding: 16px 18px; border-radius: 16px; background: var(--surface); color: var(--text); box-shadow: var(--shadow); font-size: .86rem; line-height: 1.55; }

.cx-map__chip strong{ display: block; margin-bottom: 2px; font: 500 1.08rem var(--font-head); color: var(--ink); }

.cx-map__chip a{ display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; font-weight: 600; color: var(--ink); border-bottom: 1px solid var(--gold); }


/* ----------------------------------------------------------------- CTA -- */
.cx-final{ position: relative; overflow: clip; text-align: center; padding: clamp(48px, 6.5vw, 88px) var(--pad); background: linear-gradient(125deg, var(--shade), transparent 55%), var(--surface); border-top: 1px solid var(--line); }

.cx-final__in{ position: relative; z-index: 1; max-width: 760px; margin-inline: auto; }

.cx-final h2{ font-family: var(--font-head); font-weight: 500; color: var(--ink); font-size: clamp(2.2rem, 4.4vw, 3.8rem); line-height: 1.06; letter-spacing: -.03em; }

.cx-final h2 em{ font-style: italic; color: var(--gold-text); }

.cx-final p{ margin: 14px auto 22px; max-width: 40ch; color: var(--muted); line-height: 1.7; }

.cx-final .cx-par{ position: absolute; width: clamp(130px, 15vw, 210px); top: 50%; margin-top: calc(clamp(130px, 15vw, 210px) * -.67); }

.cx-final .cx-par{ transform: translate3d(0, calc(var(--py, 0px) * .3), 0); }  /* gentler drift so the photos stay inside the banner */

.cx-final .cx-par--l{ inset-inline-start: clamp(12px, 5vw, 90px); }

.cx-final .cx-par--r{ inset-inline-end: clamp(12px, 5vw, 90px); }

.cx-final .cx-par--l .cx-tile{ rotate: -7deg; }

.cx-final .cx-par--r .cx-tile{ rotate: 7deg; }

.cx-final .cx-tile{ border: 5px solid var(--bg); }
/* ---------------------------------------------------------- responsive -- */
@media (max-width: 1080px) {
  .cx-final .cx-par{ opacity: .55; }
}
@media (max-width: 980px) {
  .cx-hero__grid{ grid-template-columns: 1fr; min-height: 0; }
  .cx-hero__art{ width: min(calc(100% - 28px), 460px); margin-inline: auto; margin-top: 14px; }
  .cx-arch{ outline-offset: 9px; }
  .cx-hero{ padding-bottom: clamp(60px, 9vw, 84px); }  /* room for the small photo that hangs below the arch */
  .cx-consult__grid{ grid-template-columns: 1fr; }
  .cx-side{ position: static; }
  .cx-studio__grid{ grid-template-columns: 1fr; }
  .cx-studio__art{ order: 2; max-width: min(440px, 100%); margin: 36px auto 14px; }
  .cx-map__head{ flex-direction: column; align-items: flex-start; }
}
@media (max-width: 760px) {
  .cx-chips{ flex-direction: column; }
  .cx-chip strong{ white-space: normal; overflow-wrap: anywhere; }
  .cx-fields{ grid-template-columns: 1fr; }
  /* closing banner: the two photos sit side by side above the heading instead of being hidden */
  .cx-final{ padding-top: clamp(176px, 46vw, 220px); }
  .cx-final .cx-par{ display: block; opacity: 1; width: clamp(88px, 24vw, 120px); top: 28px; margin-top: 0; }
  .cx-final .cx-par--l{ inset-inline-start: calc(50% - clamp(88px, 24vw, 120px) - 12px); inset-inline-end: auto; }
  .cx-final .cx-par--r{ inset-inline-start: calc(50% + 12px); inset-inline-end: auto; }
  .cx-final .cx-tile{ border-width: 4px; }
  .cx-par--tile{ inset-inline-start: -4%; }
  .cx-submit{ justify-self: stretch; }
}
/* --------------------------------------------------------------- reduced -- */
@media (prefers-reduced-motion: reduce) {
  .cx-page *, .cx-page *::before, .cx-page *::after{ animation: none !important; transition-duration: .01ms !important; }
  .cx-par{ transform: none !important; }
}

/* ===================== custom (page styles) ===================== */
/* =====================================================================
   Wishcraft: Custom Design page
   Uses the shared tokens (style.css / darkmode.css), so dark mode and RTL
   come for free. All classes are prefixed cd-.
   ===================================================================== */
@property --cd-1{ syntax: "<color>"; inherits: true; initial-value: #6B2737; }

@property --cd-2{ syntax: "<color>"; inherits: true; initial-value: #4A1025; }

@property --cd-paper{ syntax: "<color>"; inherits: true; initial-value: #FBF5EA; }

@property --cd-foil{ syntax: "<color>"; inherits: true; initial-value: #C9A45C; }

@property --cd-ink{ syntax: "<color>"; inherits: true; initial-value: #4A1025; }


[data-pal="burgundy"]{ --cd-1: #6B2737; --cd-2: #4A1025; --cd-paper: #FBF5EA; --cd-foil: #C9A45C; --cd-ink: #4A1025; }

[data-pal="blush"]{ --cd-1: #E7B8B2; --cd-2: #C9877F; --cd-paper: #FFF6F3; --cd-foil: #B9707B; --cd-ink: #7C3A48; }

[data-pal="midnight"]{ --cd-1: #25365C; --cd-2: #121B33; --cd-paper: #F4F6FA; --cd-foil: #C9B27A; --cd-ink: #1B2848; }

[data-pal="sage"]{ --cd-1: #6F8A73; --cd-2: #435C49; --cd-paper: #F6F8F1; --cd-foil: #C0A050; --cd-ink: #34493A; }

[data-pal="terracotta"]{ --cd-1: #B96A4B; --cd-2: #8C4A33; --cd-paper: #FBEFE2; --cd-foil: #D9A965; --cd-ink: #6B3524; }

[data-pal="ocean"]{ --cd-1: #2F6A6B; --cd-2: #1C4647; --cd-paper: #F1F6F4; --cd-foil: #D8B964; --cd-ink: #1C4647; }


.cd-page{ overflow-x: clip; color: var(--text); background: var(--bg); }

.cd-w{ width: min(100% - 2 * var(--pad), var(--wrap)); margin-inline: auto; }

.cd-page :where(h1, h2, h3, p, ul, figure){ margin: 0; }

.cd-page :where(ul){ padding: 0; list-style: none; }

.cd-page [id]{ scroll-margin-top: calc(var(--h) + 24px); }

.cd-page img{ display: block; width: 100%; height: 100%; object-fit: cover; }

.cd-page a{ text-decoration: none; }

.cd-eyebrow{ display: inline-flex; align-items: center; gap: 12px; font-size: .8125rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-text); }

.cd-eyebrow::before{ content: ""; width: 38px; height: 1px; background: var(--gold); }

.cd-h2{ font-family: var(--font-head); font-weight: 500; color: var(--ink); line-height: 1.06; letter-spacing: -.02em; font-size: clamp(2rem, 4vw, 3.4rem); text-wrap: balance; margin-top: 14px !important; }

.cd-h2 em{ font-style: italic; color: var(--gold-text); }

.cd-head{ display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 56px; margin-bottom: clamp(28px, 4vw, 52px); }

.cd-head__lead{ max-width: 44ch; color: var(--muted); font-size: 1.0625rem; }


/* ---------------------------------------------------------- 1. HERO -- */
.cd-hero{ position: relative; overflow: clip; padding: clamp(20px, 3vw, 40px) 0 clamp(56px, 7vw, 104px); background: radial-gradient(55% 65% at 80% 45%, var(--glow), transparent 72%), radial-gradient(40% 50% at 2% 100%, var(--shade), transparent 70%), var(--bg); }

.cd-crumb{ display: flex; gap: 10px; align-items: center; margin-bottom: clamp(18px, 3vw, 36px); font-size: .85rem; color: var(--muted); }

.cd-crumb a{ color: var(--muted); transition: color .2s; }

.cd-crumb a:hover{ color: var(--gold-text); }

.cd-hero__grid{ display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(28px, 5vw, 80px); align-items: center; }

.cd-hero h1{ margin: 18px 0 22px !important; font-family: var(--font-head); font-weight: 500; color: var(--ink); font-size: clamp(2.8rem, 5.6vw, 5.2rem); line-height: 1.02; letter-spacing: -.035em; text-wrap: balance; }

.cd-hero h1 em{ position: relative; display: inline-block; font-style: italic; color: var(--gold-text); }

.cd-hero h1 em::after{ content: ""; position: absolute; left: 0; right: 0; bottom: .02em; height: 3px; background: linear-gradient(90deg, var(--gold), transparent); transform-origin: left; animation: cdLine 1.2s cubic-bezier(.65, 0, .15, 1) 1.2s both; }

@keyframes cdLine{ from { transform: scaleX(0); } }

.cd-lead{ max-width: 46ch; font-size: 1.1875rem; line-height: 1.65; color: var(--muted); }

.cd-actions{ display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

.cd-actions .btn i{ margin-inline-start: 10px; font-size: .75rem; transition: translate .2s ease; }

.cd-actions .btn--solid:hover i{ translate: 0 3px; }

.cd-facts{ display: flex; flex-wrap: wrap; gap: 18px clamp(22px, 3.4vw, 44px); margin-top: 38px; padding-top: 24px; border-top: 1px solid var(--line); }

.cd-facts li{ display: grid; gap: 2px; padding-inline-start: 14px; border-inline-start: 2px solid var(--gold); }

.cd-facts strong{ font: 600 1.5rem/1.1 var(--font-head); color: var(--ink); }

.cd-facts span{ font-size: .8125rem; color: var(--muted); }

.cd-hero__copy > *{ animation: cdUp .9s cubic-bezier(.2, .7, .2, 1) both; }

.cd-hero__copy > :nth-child(2){ animation-delay: .08s; }
 .cd-hero__copy > :nth-child(3){ animation-delay: .16s; }
 .cd-hero__copy > :nth-child(4){ animation-delay: .24s; }
 .cd-hero__copy > :nth-child(5){ animation-delay: .32s; }

@keyframes cdUp{ from { opacity: 0; transform: translateY(26px); } }


/* collage: sketch draws first, then the photo opens through the sketch */
.cd-art{ position: relative; width: min(100%, 600px); aspect-ratio: 1 / 1.04; margin-inline: auto; container-type: inline-size; --mx: 0; --my: 0; }

.cd-ly{ position: absolute; translate: calc(var(--mx) * var(--z, 0) * 1px) calc(var(--my) * var(--z, 0) * 1px); transition: translate .35s ease-out; }

.cd-ly--main{ left: 18cqw; top: 3cqw; width: 60cqw; aspect-ratio: 3 / 4; }

.cd-arch{ position: absolute; inset: 0; overflow: hidden; border-radius: 999px 999px 20px 20px; background: var(--shade); box-shadow: 0 34px 64px rgba(74, 16, 37, .28); clip-path: circle(0% at 50% 62%); animation: cdOpen 1.7s cubic-bezier(.65, 0, .15, 1) 1.2s forwards; }

.cd-arch img{ scale: 1.2; animation: cdZoom 2.4s cubic-bezier(.2, .7, .2, 1) 1.2s forwards; }

@keyframes cdOpen{ to { clip-path: circle(150% at 50% 62%); } }

@keyframes cdZoom{ to { scale: 1; } }

.cd-sketch{ position: absolute; z-index: 3; left: -5%; top: -3%; width: 110%; height: 106%; fill: none; stroke: var(--cd-foil); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; transition: stroke .8s ease; }

.cd-sketch path{ stroke-dasharray: 1; stroke-dashoffset: 1; animation: cdDraw 2s cubic-bezier(.6, 0, .2, 1) .3s forwards; }

.cd-sketch__in{ animation-delay: .7s !important; stroke-dasharray: .02 .018 !important; stroke-dashoffset: 0 !important; opacity: 0; animation: cdFade 1s ease 1.4s forwards !important; }

.cd-sketch__tk{ stroke-width: 1; animation-delay: .9s !important; }

@keyframes cdDraw{ to { stroke-dashoffset: 0; } }

@keyframes cdFade{ to { opacity: .7; } }

.cd-pic{ position: relative; overflow: hidden; background: var(--shade); border: 6px solid var(--bg); box-shadow: 0 20px 44px rgba(74, 16, 37, .26); }

.cd-pic img{ scale: 1.1; transition: scale 1.6s ease; }

.cd-ly--b{ right: -1cqw; top: 36cqw; width: 33cqw; rotate: 5deg; animation: cdSlideR 1s cubic-bezier(.2, .8, .2, 1) 2.2s both; }

.cd-pic--b{ aspect-ratio: 4 / 5; border-radius: 14px; }

.cd-ly--c{ left: 0; bottom: 7cqw; width: 27cqw; animation: cdPop .9s cubic-bezier(.2, .9, .2, 1.2) 2.5s both; }

.cd-pic--c{ aspect-ratio: 1; border-radius: 50%; }

@keyframes cdSlideR{ from { opacity: 0; transform: translateX(60px) rotate(8deg); } }

@keyframes cdPop{ from { opacity: 0; transform: scale(.5); } }

.cd-ly--seal{ left: 1cqw; top: 2cqw; width: 21cqw; animation: cdPop .9s cubic-bezier(.2, .9, .2, 1.2) 2.1s both; }

.cd-badge{ position: relative; width: 100%; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: var(--cd-1); color: var(--cd-foil); box-shadow: 0 14px 28px rgba(74, 16, 37, .3); transition: background-color .8s ease, color .8s ease; }

.cd-badge svg{ position: absolute; inset: 0; width: 100%; height: 100%; animation: cdSpin 22s linear infinite; }

.cd-badge text{ fill: currentColor; font: 600 9.4px/1 var(--font-body); }

.cd-badge span{ position: relative; font: 700 6.2cqw/1 var(--font-head); }

@keyframes cdSpin{ to { rotate: 360deg; } }

.cd-ly--note{ right: 2cqw; top: 5cqw; rotate: 4deg; animation: cdUp .9s ease 2.7s both; }

.cd-note{ display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; background: rgba(255, 253, 249, .94); color: #4A1025; font-size: .8125rem; font-weight: 600; box-shadow: 0 10px 24px rgba(74, 16, 37, .2); white-space: nowrap; }

.cd-note i{ color: #B8934B; }

.cd-ly--pal{ left: 50%; bottom: -1cqw; translate: calc(-50% + var(--mx) * var(--z) * 1px) calc(var(--my) * var(--z) * 1px); animation: cdUp .9s ease 2.9s both; }

.cd-pal{ display: flex; gap: 2px; padding: 4px 8px; border-radius: 999px; background: rgba(255, 253, 249, .95); box-shadow: 0 14px 30px rgba(74, 16, 37, .22); }

.cd-pal button, .cd-sw{ cursor: pointer; background: none; border: 0; }

.cd-pal button{ width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border-radius: 50%; }

.cd-pal i, .cd-sw i{ display: block; width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, var(--cd-1) 52%, var(--cd-foil) 52%); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14); transition: transform .3s ease, box-shadow .3s ease; }

.cd-pal button:hover i{ transform: scale(1.18); }

.cd-pal button[aria-pressed="true"] i{ box-shadow: 0 0 0 2px #FFFDF9, 0 0 0 3.5px #B8934B; transform: scale(1.1); }

.cd-pal button[data-pal], .cd-sw[data-pal]{ }


/* ------------------------------------------------- 2. LIVE BUILDER -- */
.cd-build{ padding: clamp(64px, 8vw, 120px) 0; background: var(--shade); border-block: 1px solid var(--line); }

.cd-lab{ display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(24px, 4vw, 56px); align-items: start; }

.cd-panel{ padding: clamp(20px, 3vw, 36px); border-radius: 26px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }

.cd-step + .cd-step{ margin-top: 24px; padding-top: 24px; border-top: 1px dashed var(--line); }

.cd-step h3{ display: flex; align-items: center; gap: 12px; margin-bottom: 14px !important; font: 600 1.375rem/1.2 var(--font-head); color: var(--ink); }

.cd-step h3 span{ display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--gold); font: 600 .75rem/1 var(--font-body); color: var(--gold-text); letter-spacing: .04em; }

.cd-names{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.cd-names label{ display: grid; gap: 6px; }

.cd-names__date{ grid-column: 1 / -1; }

.cd-names label span{ font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

.cd-names input{ width: 100%; min-height: 48px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--text); font: 500 1rem/1.2 var(--font-body); transition: border-color .2s, box-shadow .2s; }

.cd-names input:focus{ outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--shade-strong); }

.cd-swatches{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }

.cd-sw{ display: grid; justify-items: center; gap: 6px; padding: 10px 6px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg); color: var(--text); font: 500 .8125rem/1.2 var(--font-body); text-align: center; transition: border-color .25s, background .25s, transform .25s; }

.cd-sw i{ width: 34px; height: 34px; }

.cd-sw:hover{ transform: translateY(-2px); border-color: var(--gold); }

.cd-sw[aria-pressed="true"], .cd-fb[aria-pressed="true"], .cd-sb[aria-pressed="true"], .cd-pb[aria-pressed="true"]{ border-color: var(--ink); background: var(--shade-strong); box-shadow: inset 0 0 0 1px var(--ink); }

.cd-fins, .cd-stys{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }

.cd-paps{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }

.cd-fb, .cd-sb, .cd-pb{ display: grid; justify-items: center; align-content: center; gap: 6px; min-height: 84px; padding: 10px 6px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg); color: var(--text); font: 500 .8125rem/1.2 var(--font-body); text-align: center; cursor: pointer; transition: border-color .25s, background .25s, transform .25s; }

.cd-fb:hover, .cd-sb:hover, .cd-pb:hover{ transform: translateY(-2px); border-color: var(--gold); }

.cd-fb__s{ font: 700 1.75rem/1 var(--font-head); }

.cd-fb__s[data-fin="foil"]{ background: linear-gradient(100deg, #A9833A 20%, #F1D88F 50%, #A9833A 80%) 0 0 / 220% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: cdFoil 3.6s ease-in-out infinite; }

.cd-fb__s[data-fin="press"]{ color: #4A1025; text-shadow: 0 1px 0 rgba(255, 255, 255, .8), 0 -1px 0 rgba(0, 0, 0, .4); }

.cd-fb__s[data-fin="emboss"]{ color: #D9CDBA; text-shadow: 1px 1px 0 #fff, -1px -1px 1px rgba(0, 0, 0, .3); }

.cd-fb__s[data-fin="blind"]{ color: #E6DDCD; text-shadow: 1px 1px 1px #fff, -1px -1px 1px rgba(0, 0, 0, .2); }

.cd-sb svg{ width: 30px; height: 32px; fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

.cd-pb i{ width: 40px; height: 40px; border-radius: 8px; border: 1px solid rgba(0, 0, 0, .12); }

.cd-pb i[data-paper="ivory"]{ background: #F7EEDC; }

.cd-pb i[data-paper="cotton"]{ background: #FFFFFF; }

.cd-pb i[data-paper="kraft"]{ background: #D2B48C; background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, .12) 0 2px, transparent 2px 6px); }


.cd-preview{ position: sticky; top: calc(var(--h) + 20px); display: grid; gap: 16px; }

.cd-tabs{ display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }

.cd-tab{ min-height: 40px; padding: 8px 18px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font: 500 .875rem/1 var(--font-body); cursor: pointer; transition: background .25s, color .25s, border-color .25s, transform .25s; }

.cd-tab:hover{ border-color: var(--gold); transform: translateY(-1px); }

.cd-tab[aria-selected="true"]{ background: var(--btn-bg); color: var(--btn-fg); border-color: var(--btn-bg); }


.cd-scene{ position: relative; width: min(100%, 560px); aspect-ratio: 1 / 1.04; margin-inline: auto; container-type: inline-size; border-radius: 28px; overflow: hidden; background: radial-gradient(70% 60% at 50% 35%, color-mix(in srgb, var(--cd-1) 14%, transparent), transparent 75%), var(--bg); border: 1px solid var(--line); transition: --cd-1 .7s ease, --cd-2 .7s ease, --cd-paper .7s ease, --cd-foil .7s ease, --cd-ink .7s ease; --cd-line: var(--cd-foil); }

.cd-scene__arch{ position: absolute; left: 12cqw; right: 12cqw; top: 6cqw; bottom: 0; border-radius: 999px 999px 0 0; border: 1px solid var(--cd-foil); border-bottom: 0; opacity: .45; transition: border-color .7s ease; }

.cd-scene[data-fin="press"]{ --cd-line: var(--cd-ink); }

.cd-scene[data-fin="emboss"]{ --cd-line: color-mix(in srgb, var(--cd-ink) 55%, var(--cd-paper)); }

.cd-scene[data-fin="blind"]{ --cd-line: color-mix(in srgb, var(--cd-paper) 80%, #000); }


.cd-env{ position: absolute; left: 7cqw; right: 7cqw; bottom: 4cqw; aspect-ratio: 300 / 170; z-index: 1; filter: drop-shadow(0 3cqw 4cqw rgba(40, 10, 20, .28)); }

.cd-env svg{ position: absolute; inset: 0; width: 100%; height: 100%; }

.ce-back{ fill: var(--cd-2); transition: fill .7s ease; }

.ce-fill{ fill: var(--cd-1); transition: fill .7s ease; }

.ce-line{ fill: none; stroke: var(--cd-foil); stroke-width: 1.4; vector-effect: non-scaling-stroke; }

.ce-line--s{ stroke-opacity: .45; stroke-width: 1; }

.cd-env--front{ z-index: 3; pointer-events: none; filter: drop-shadow(0 -1.2cqw 2cqw rgba(0, 0, 0, .18)); }

.cd-seal{ position: absolute; left: 50%; top: 46%; width: 12cqw; aspect-ratio: 1; display: grid; place-items: center; translate: -50% -50%; border-radius: 50%; font: 700 5cqw/1 var(--font-head); color: var(--cd-2); background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--cd-foil) 55%, #fff), var(--cd-foil) 58%, color-mix(in srgb, var(--cd-foil) 60%, #000)); box-shadow: 0 1cqw 2.4cqw rgba(0, 0, 0, .4), inset 0 0 0 .5cqw rgba(255, 255, 255, .2); }

.cd-seal::after{ content: ""; position: absolute; inset: 1cqw; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .22); }


.cd-card{ position: absolute; z-index: 2; left: 20cqw; right: 20cqw; top: 6cqw; aspect-ratio: 3 / 4.1; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; padding: 7cqw 4cqw 0; background-color: var(--cd-paper); border-radius: 2px; box-shadow: 0 3cqw 6cqw rgba(40, 10, 20, .3), 0 .4cqw 1cqw rgba(40, 10, 20, .16); rotate: -1.6deg; transition: transform .35s ease, opacity .35s ease, background-color .7s ease; }

.cd-card.is-out{ transform: translateY(2.4cqw) rotateY(80deg); opacity: 0; }

.cd-card::before{ content: ""; position: absolute; inset: 2.2cqw; border: 1px solid var(--cd-line); border-radius: 1px; pointer-events: none; transition: border-color .7s ease; }

.cd-scene[data-sty="frame"] .cd-card::after{ content: ""; position: absolute; inset: 3.2cqw; border: 1px solid var(--cd-line); opacity: .55; pointer-events: none; }

.cd-scene[data-paper="cotton"] .cd-card{ background-color: #FFFFFF; }

.cd-scene[data-paper="kraft"] .cd-card{ background-color: #D6B88F; }

.cd-scene[data-paper="kraft"] .cd-card::after{ content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .1) 0 2px, transparent 2px 7px), repeating-linear-gradient(0deg, rgba(120, 80, 40, .06) 0 1px, transparent 1px 5px); }

.cd-scene[data-paper="cotton"] .cd-card::after{ content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5; background: radial-gradient(circle at 20% 15%, rgba(0, 0, 0, .04) 0 1px, transparent 2px) 0 0 / 14px 14px; }

.cd-card > *{ position: relative; z-index: 1; }

.cd-card > .cd-hole{ position: absolute; top: 3.4cqw; left: 50%; width: 3.6cqw; height: 3.6cqw; margin-left: -1.8cqw; border-radius: 50%; border: 1px solid var(--cd-line); background: var(--shade-strong); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .18); }

.cd-card[data-piece="favor"] .cd-t{ margin-top: 5cqw; }

.cd-card p{ margin: 0; }

.cd-orn{ display: block; width: 8.4cqw; height: 11cqw; margin-bottom: 1.8cqw; fill: none; stroke: var(--cd-line); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; transition: stroke .7s ease; }

.cd-orn--b{ width: 24cqw; height: 9cqw; }

.cd-mono{ display: flex; align-items: center; justify-content: center; gap: 1cqw; width: 14cqw; height: 14cqw; margin-bottom: 2cqw; border: 1px solid var(--cd-line); border-radius: 50%; font: 600 4.6cqw/1 var(--font-head); transition: border-color .7s ease; }

.cd-mono i{ font: italic 500 3cqw/1 var(--font-head); color: var(--cd-ink); }

.cd-t{ font: 600 1.55cqw/1.45 var(--font-body); letter-spacing: .22em; text-transform: uppercase; color: var(--cd-ink); opacity: .85; }

.cd-t--v{ margin-top: 1.4cqw !important; opacity: .65; }

.cd-names-l{ margin-top: 2cqw !important; max-width: 100%; white-space: nowrap; font: italic 500 5.4cqw/1.2 var(--font-head); padding: .4cqw .6cqw .8cqw; }

.cd-names-l i{ font-size: .62em; font-style: italic; opacity: .9; }

.cd-big{ margin-top: 3cqw !important; font: italic 600 7.8cqw/1.15 var(--font-head); padding-bottom: .6cqw; }

.cd-h{ margin-top: 1cqw !important; font: 600 4cqw/1.1 var(--font-head); letter-spacing: .24em; padding-inline-start: .24em; }

.cd-script{ margin-top: 3cqw !important; font: italic 600 7.4cqw/1.2 var(--font-head); padding-bottom: .8cqw; }

.cd-rule{ position: relative; display: block; width: 11cqw; height: 1px; margin: 2.4cqw auto; background: var(--cd-line); transition: background-color .7s ease; }

.cd-rule::after{ content: ""; position: absolute; left: 50%; top: 50%; width: 1.4cqw; height: 1.4cqw; background: var(--cd-line); transform: translate(-50%, -50%) rotate(45deg); }

.cd-it{ font: italic 500 2.5cqw/1.4 var(--font-head); color: var(--cd-ink); opacity: .9; }

.cd-it + .cd-it{ margin-top: .6cqw !important; }

.cd-date{ margin-top: 2cqw !important; font: 600 3cqw/1.2 var(--font-head); padding-bottom: .4cqw; }

.cd-lines{ width: 100%; display: grid; gap: 3.6cqw; margin-top: 3.4cqw; }

.cd-lines span{ display: block; padding-bottom: .8cqw; border-bottom: 1px solid var(--cd-line); font: 600 1.5cqw/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--cd-ink); opacity: .75; text-align: start; }

.cd-bot{ position: absolute; left: 0; right: 0; bottom: 4.6cqw; }

.cd-sprig{ position: absolute; bottom: 8cqw; width: 6cqw; height: auto; fill: none; stroke: var(--cd-line); stroke-width: 1.3; stroke-linecap: round; }

.cd-sprig--l{ left: 4.4cqw; }
 .cd-sprig--r{ right: 4.4cqw; scale: -1 1; }


/* finishes: how the lettering looks */
.cd-ink{ color: var(--cd-ink); }

.cd-scene[data-fin="foil"] .cd-ink{ background: linear-gradient(100deg, var(--cd-foil) 30%, color-mix(in srgb, var(--cd-foil) 38%, #fff) 50%, var(--cd-foil) 70%) 0 0 / 260% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--cd-foil); animation: cdFoil 5s ease-in-out infinite; }

.cd-scene[data-fin="foil"] .cd-mono{ color: var(--cd-foil); }

.cd-scene[data-fin="press"] .cd-ink{ text-shadow: 0 1px 0 rgba(255, 255, 255, .75), 0 -1px 0 rgba(0, 0, 0, .35); }

.cd-scene[data-fin="emboss"] .cd-ink{ text-shadow: 1px 1px 0 rgba(255, 255, 255, .95), -1px -1px 1px rgba(0, 0, 0, .28); }

.cd-scene[data-fin="blind"] .cd-ink{ color: color-mix(in srgb, var(--cd-paper) 84%, #000); text-shadow: 1px 1px 1px rgba(255, 255, 255, .95), -1px -1px 1px rgba(0, 0, 0, .2); }

.cd-scene[data-fin="blind"] .cd-t, .cd-scene[data-fin="blind"] .cd-it, .cd-scene[data-fin="blind"] .cd-lines span{ color: color-mix(in srgb, var(--cd-paper) 76%, #000); text-shadow: 1px 1px 1px rgba(255, 255, 255, .9); opacity: .9; }

.cd-scene[data-fin="emboss"] .cd-t, .cd-scene[data-fin="emboss"] .cd-it{ text-shadow: .5px .5px 0 rgba(255, 255, 255, .9); }

@keyframes cdFoil{ 0%, 30% { background-position: 100% 0; } 70%, 100% { background-position: 0 0; } }


.cd-spec{ display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }

.cd-spec li{ display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: .8125rem; color: var(--muted); }

.cd-spec b{ font-weight: 600; color: var(--ink); }

.cd-cta{ display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 22px; }

.cd-cta .btn i{ margin-inline-start: 10px; font-size: .75rem; transition: translate .2s ease; }

.cd-cta .btn:hover i{ translate: 3px 0; }

.cd-link{ display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 4px; background: none; border: 0; color: var(--ink); font: 500 .9375rem/1 var(--font-body); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 5px; cursor: pointer; }

.cd-link i{ color: var(--gold-text); transition: rotate .5s ease; }

.cd-link:hover i{ rotate: 180deg; }


/* ------------------------------------------ 3. WHAT WE CUSTOMISE -- */
.cd-cust{ padding: clamp(64px, 8vw, 120px) 0; background: var(--bg); }

.cd-bento{ display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); }

.cd-cap{ position: relative; grid-column: span 4; min-height: 360px; overflow: hidden; border-radius: 26px; color: #fff; isolation: isolate; background: #2A0F17; box-shadow: 0 18px 40px rgba(74, 16, 37, .18); transform-style: preserve-3d; transition: box-shadow .5s ease; --px: 50%; --py: 50%; }

.cd-cap--span-7{ grid-column: span 7; }
 .cd-cap--span-5{ grid-column: span 5; }
 .cd-cap--span-12{ grid-column: span 12; min-height: 320px; }

.cd-cap__img{ position: absolute; inset: 0; z-index: -2; }

.cd-cap__img img{ scale: 1.08; translate: var(--tx, 0px) var(--ty, 0px); transition: scale 1.4s cubic-bezier(.2, .7, .2, 1), translate .6s ease-out; }

.cd-cap:hover .cd-cap__img img{ scale: 1.16; }

.cd-js .cd-cap__img{ clip-path: inset(0 0 100% 0); transition: clip-path 1.3s cubic-bezier(.65, 0, .15, 1); }

.cd-js .cd-cap.is-in .cd-cap__img{ clip-path: inset(0); }

.cd-cap__shade{ position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(26, 8, 14, .05) 20%, rgba(26, 8, 14, .86) 100%), radial-gradient(420px circle at var(--px) var(--py), rgba(231, 201, 135, .22), transparent 60%); }

.cd-cap:hover{ box-shadow: 0 30px 60px rgba(74, 16, 37, .32); }

.cd-cap__body{ position: absolute; inset: auto 0 0; display: grid; gap: 10px; padding: clamp(20px, 2.6vw, 34px); }

.cd-cap__n{ font: 600 .8125rem/1 var(--font-body); letter-spacing: .2em; color: #E7C987; }

.cd-cap h3{ font: 600 clamp(1.5rem, 2.2vw, 2rem)/1.15 var(--font-head); color: #FFFDF9; }

.cd-cap p{ max-width: 42ch; font-size: .9375rem; line-height: 1.55; color: rgba(255, 253, 249, .86); }

.cdm{ margin-top: 6px !important; }

.cdm--names{ display: flex; align-items: center; gap: 10px; font: italic 600 2.1rem/1 var(--font-head); color: #E7C987; }

.cdm--names b{ display: inline-block; animation: cdLetter 3.6s ease-in-out infinite; }

.cdm--names b:last-child{ animation-delay: .5s; }

.cdm--names i{ font-size: 1.3rem; opacity: .85; }

@keyframes cdLetter{ 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

.cdm--sw{ display: flex; gap: 8px; }

.cdm--sw i{ width: 30px; height: 30px; border-radius: 50%; background: var(--c); border: 2px solid rgba(255, 255, 255, .85); transition: transform .4s cubic-bezier(.2, .9, .2, 1.4); }

.cd-cap:hover .cdm--sw i{ transform: translateY(-6px); }

.cd-cap:hover .cdm--sw i:nth-child(2){ transition-delay: .04s; }
 .cd-cap:hover .cdm--sw i:nth-child(3){ transition-delay: .08s; }
 .cd-cap:hover .cdm--sw i:nth-child(4){ transition-delay: .12s; }
 .cd-cap:hover .cdm--sw i:nth-child(5){ transition-delay: .16s; }
 .cd-cap:hover .cdm--sw i:nth-child(6){ transition-delay: .2s; }

.cdm--chips{ display: flex; flex-wrap: wrap; gap: 6px; }

.cdm--chips span{ padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(255, 253, 249, .5); background: rgba(255, 253, 249, .1); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font-size: .8125rem; font-weight: 500; color: #FFFDF9; transition: background .3s, color .3s, transform .3s; }

.cd-cap:hover .cdm--chips span{ background: #FFFDF9; color: #4A1025; }

.cd-cap:hover .cdm--chips span:nth-child(2n){ transform: translateY(-3px); }

.cdm--lang{ min-height: 1.6em; font: italic 600 1.375rem/1.3 var(--font-head); color: #E7C987; transition: opacity .35s ease, translate .35s ease; }

.cdm--lang.is-out{ opacity: 0; translate: 0 8px; }

.cdm--shapes{ display: flex; align-items: flex-end; gap: 14px; }

.cdm--shapes i{ display: block; border: 1.5px solid #E7C987; background: rgba(255, 253, 249, .08); transition: transform .5s cubic-bezier(.2, .9, .2, 1.3), background .3s; }

.cdm--shapes .s1{ width: 42px; height: 56px; border-radius: 3px; }
 .cdm--shapes .s2{ width: 42px; height: 56px; border-radius: 999px 999px 3px 3px; }
 .cdm--shapes .s3{ width: 52px; height: 52px; border-radius: 50%; }
 .cdm--shapes .s4{ width: 28px; height: 72px; border-radius: 3px; }

.cd-cap:hover .cdm--shapes i{ transform: translateY(-8px) rotate(-4deg); background: rgba(231, 201, 135, .25); }

.cd-cap:hover .cdm--shapes .s2{ transition-delay: .05s; }
 .cd-cap:hover .cdm--shapes .s3{ transition-delay: .1s; transform: translateY(-8px) rotate(4deg); }
 .cd-cap:hover .cdm--shapes .s4{ transition-delay: .15s; }

.cd-cap--span-12 .cd-cap__body{ grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 40px; }

.cd-cap--span-12 .cd-cap__n, .cd-cap--span-12 h3, .cd-cap--span-12 p{ grid-column: 1; }

.cd-cap--span-12 .cdm--shapes{ grid-column: 2; grid-row: 1 / span 3; align-self: end; margin-bottom: 6px !important; }
/* ------------------------------------------------------ responsive -- */
@media (max-width: 1000px) {
  .cd-hero__grid{ grid-template-columns: 1fr; }
  .cd-hero__copy{ text-align: center; }
  .cd-hero__copy .cd-eyebrow{ justify-content: center; }
  .cd-lead{ margin-inline: auto; }
  .cd-actions, .cd-facts, .cd-crumb{ justify-content: center; }
  .cd-facts li{ text-align: start; }
  .cd-lab{ grid-template-columns: 1fr; }
  .cd-preview{ position: static; order: -1; }
  .cd-bento{ grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .cd-cap, .cd-cap--span-7, .cd-cap--span-5{ grid-column: span 3; }
  .cd-cap--span-12{ grid-column: span 6; }
}
@media (max-width: 640px) {
  .cd-head{ align-items: flex-start; }
  .cd-fins, .cd-stys{ grid-template-columns: repeat(2, 1fr); }
  .cd-swatches{ grid-template-columns: repeat(2, 1fr); }
  .cd-names{ grid-template-columns: 1fr; }
  .cd-bento{ grid-template-columns: 1fr; }
  .cd-cap, .cd-cap--span-7, .cd-cap--span-5, .cd-cap--span-12{ grid-column: 1; min-height: 340px; }
  .cd-cap--span-12 .cd-cap__body{ grid-template-columns: 1fr; }
  .cd-cap--span-12 .cdm--shapes{ grid-column: 1; grid-row: auto; }
  .cd-note{ font-size: .75rem; padding: 7px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .cd-hero__copy > *, .cd-arch, .cd-arch img, .cd-sketch path, .cd-ly--b, .cd-ly--c, .cd-ly--seal, .cd-ly--note, .cd-ly--pal, .cd-badge svg, .cd-hero h1 em::after{ animation: none !important; }
  .cd-arch{ clip-path: none; }
  .cd-arch img{ scale: 1; }
  .cd-sketch path{ stroke-dashoffset: 0; }
  .cd-sketch__in{ opacity: .7; }
  .cd-js .cd-cap__img{ clip-path: none; }
  .cd-ly{ translate: none !important; }
}


.cd-art{ transition: --cd-1 .8s ease, --cd-2 .8s ease, --cd-foil .8s ease; }

.cd-pal button:focus-visible, .cd-sw:focus-visible, .cd-fb:focus-visible, .cd-sb:focus-visible, .cd-pb:focus-visible, .cd-tab:focus-visible, .cd-link:focus-visible{ outline: 2px solid var(--gold); outline-offset: 3px; }


/* ------------------------------------------- shared pill buttons -- */
.cd-ba-tabs, .cd-lib__tabs{ display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 24px; }

.cd-ba-tabs button, .cd-lib__tabs button{ min-height: 44px; padding: 10px 22px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font: 500 .9375rem/1 var(--font-body); cursor: pointer; transition: background .25s, color .25s, border-color .25s, transform .25s; }

.cd-ba-tabs button:hover, .cd-lib__tabs button:hover{ border-color: var(--gold); transform: translateY(-1px); }

.cd-ba-tabs button[aria-selected="true"], .cd-lib__tabs button[aria-selected="true"]{ background: var(--btn-bg); color: var(--btn-fg); border-color: var(--btn-bg); }

.cd-ba-tabs button:focus-visible, .cd-lib__tabs button:focus-visible, .cd-lib__item:focus-visible, .cd-faq__q:focus-visible{ outline: 2px solid var(--gold); outline-offset: 3px; }


/* ------------------------- 4. CUSTOM PROCESS (five step cards) -- */
.cd-j{ position: relative; overflow: clip; padding: clamp(64px, 8vw, 120px) 0; background: radial-gradient(50% 40% at 50% 0%, var(--glow), transparent 72%), var(--shade); border-block: 1px solid var(--line); }

.cd-j__head{ max-width: 680px; margin: 0 auto clamp(32px, 5vw, 60px); text-align: center; }

.cd-j__head .cd-eyebrow{ justify-content: center; }

.cd-j__head .cd-eyebrow::after{ content: ""; width: 38px; height: 1px; background: var(--gold); }

.cd-j__lead{ margin-top: 14px !important; color: var(--muted); font-size: 1.0625rem; }


.cd-j__list{ display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(16px, 2vw, 26px); margin: 0; padding: 0; list-style: none; }

.cd-j__row{ grid-column: span 2; display: flex; --d: 0s; transition: opacity .8s ease var(--d), translate .9s cubic-bezier(.2, .7, .2, 1) var(--d); }

.cd-j__row:nth-child(n+4){ grid-column: span 3; }

.cd-j__card{ position: relative; width: 100%; display: flex; flex-direction: column; padding: 12px; border-radius: 28px; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow); transition: translate .4s ease, border-color .4s ease; }

.cd-j__row:hover .cd-j__card{ translate: 0 -6px; border-color: var(--gold); }

.cd-j__row:nth-child(n+4) .cd-j__card{ flex-direction: row; align-items: center; gap: 8px; }

.cd-j__row:nth-child(n+4) .cd-j__fig{ flex: 0 0 42%; aspect-ratio: 4 / 5; }

.cd-j__row:nth-child(n+4) .cd-j__body{ flex: 1; min-width: 0; }


/* arch photo */
.cd-j__fig{ position: relative; overflow: hidden; aspect-ratio: 4 / 3; border-radius: 999px 999px 16px 16px; background: var(--shade-strong); isolation: isolate; }

.cd-j__fig img{ position: absolute; inset: 0; transition: filter 1.4s ease, scale 1.8s cubic-bezier(.2, .7, .2, 1); scale: 1.08; }

.cd-j__row:not(.is-in) .cd-j__fig img{ filter: grayscale(1) brightness(1.06) contrast(.9); }

.cd-j__row.is-in .cd-j__fig--1 img{ filter: grayscale(.8) sepia(.3) contrast(.92) brightness(1.06); }

.cd-j__row.is-in .cd-j__fig--2 img{ filter: grayscale(1) contrast(1.2) brightness(1.02); }

.cd-j__row.is-in .cd-j__fig img{ scale: 1; }

.cd-j__row:hover .cd-j__fig img{ scale: 1.05; }

.cd-j__paper{ position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply; background: rgba(239, 229, 211, .6); }

.cd-j__sketch{ position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: #5A3420; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

.cd-j__sketch path{ stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s ease calc(.5s + var(--k) * .35s); }

.cd-j__row.is-in .cd-j__sketch path{ stroke-dashoffset: 0; }


.cd-j__chips{ position: absolute; inset-inline: 14px; bottom: 16px; z-index: 3; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; pointer-events: none; }

.cd-j__chips span{ padding: 8px 13px; border-radius: 999px; background: rgba(255, 253, 249, .95); color: #4A1025; font: 600 .75rem/1 var(--font-body); white-space: nowrap; box-shadow: 0 6px 16px rgba(30, 10, 20, .22); opacity: 0; translate: 0 12px; transition: opacity .6s ease calc(.5s + var(--i) * .12s), translate .7s cubic-bezier(.2, .7, .2, 1) calc(.5s + var(--i) * .12s); }

.cd-j__chips span::before{ content: ""; display: inline-block; width: 6px; height: 6px; margin-inline-end: 7px; border-radius: 50%; background: #B8934B; }

.cd-j__row.is-in .cd-j__chips span{ opacity: 1; translate: 0 0; }


.cd-j__stamp{ position: absolute; z-index: 4; top: 6%; inset-inline-end: 3%; display: grid; justify-items: center; gap: 1px; padding: 8px 16px; border: 2px dashed #3E7D55; border-radius: 12px; background: rgba(255, 253, 249, .93); color: #2F6B47; rotate: -9deg; scale: 2.2; opacity: 0; transition: scale .5s cubic-bezier(.3, 1.6, .5, 1) .6s, opacity .3s ease .6s; }

.cd-j__stamp b{ font-size: .75rem; }
 .cd-j__stamp span{ font: 700 1.125rem/1.1 var(--font-head); letter-spacing: .1em; text-transform: uppercase; }

.cd-j__row.is-in .cd-j__stamp{ scale: 1; opacity: 1; }


.cd-j__foil{ position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(110deg, transparent 36%, rgba(255, 238, 178, .7) 50%, transparent 64%); background-size: 260% 100%; background-position: 130% 0; mix-blend-mode: screen; }

.cd-j__row.is-in .cd-j__foil{ animation: cdJFoil 3.6s ease-in-out .5s infinite; }

@keyframes cdJFoil{ 0% { background-position: 130% 0; } 55%, 100% { background-position: -40% 0; } }

.cd-j__spark{ position: absolute; z-index: 3; width: 14px; height: 14px; opacity: 0; background: radial-gradient(circle, #FFF3C4 0 25%, transparent 26%), conic-gradient(from 45deg, transparent 0 20%, #FFF3C4 0 25%, transparent 0 45%, #FFF3C4 0 50%, transparent 0 70%, #FFF3C4 0 75%, transparent 0 95%, #FFF3C4 0); border-radius: 50%; }

.cd-j__spark--1{ left: 28%; top: 30%; }
 .cd-j__spark--2{ left: 66%; top: 46%; width: 18px; height: 18px; }
 .cd-j__spark--3{ left: 44%; top: 62%; width: 11px; height: 11px; }

.cd-j__row.is-in .cd-j__spark{ animation: cdJTwinkle 2.2s ease-in-out infinite; }

.cd-j__row.is-in .cd-j__spark--2{ animation-delay: .7s; }
 .cd-j__row.is-in .cd-j__spark--3{ animation-delay: 1.3s; }

@keyframes cdJTwinkle{ 0%, 100% { opacity: 0; scale: .4; } 50% { opacity: 1; scale: 1.2; } }


.cd-j__seal{ position: absolute; z-index: 4; top: 16%; inset-inline-end: 9%; display: grid; place-items: center; width: 64px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #B04A5D, #6B2737 70%); color: #FFE9D6; font: 700 1.75rem/1 var(--font-head); box-shadow: 0 10px 22px rgba(60, 10, 25, .4); scale: 0; rotate: -25deg; transition: scale .6s cubic-bezier(.3, 1.6, .5, 1) .6s, rotate .6s ease .6s; }

.cd-j__seal::after{ content: ""; position: absolute; inset: 14%; border-radius: 50%; border: 2px solid rgba(255, 220, 190, .3); }

.cd-j__row.is-in .cd-j__seal{ scale: 1; rotate: 0deg; }


/* text */
.cd-j__body{ position: relative; padding: 22px 14px 12px; }

.cd-j__body::after{ content: attr(data-n); position: absolute; top: 10px; inset-inline-end: 12px; font: 500 3.25rem/1 var(--font-head); letter-spacing: -.03em; color: transparent; -webkit-text-stroke: 1px color-mix(in srgb, var(--gold) 60%, transparent); pointer-events: none; }

.cd-j__kick{ font-size: .75rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-text); }

.cd-j__body h3{ margin-top: 6px !important; font-family: var(--font-head); font-weight: 500; font-size: clamp(1.4rem, 2vw, 1.75rem); line-height: 1.12; letter-spacing: -.015em; color: var(--ink); }

.cd-j__body > p:not(.cd-j__kick){ margin-top: 10px !important; color: var(--muted); font-size: .9375rem; line-height: 1.65; }

.cd-j__yw{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 16px 0 0; }

.cd-j__yw > div{ padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--shade); }

.cd-j__yw dt{ font-size: .6875rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-text); }

.cd-j__yw dd{ margin: 3px 0 0; font-size: .8125rem; line-height: 1.4; color: var(--text); }


.cd-j__cta{ display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: clamp(32px, 4vw, 56px); text-align: center; }

.cd-j__cta p{ margin: 0; font: 500 clamp(1.25rem, 2vw, 1.625rem)/1.2 var(--font-head); color: var(--ink); }


/* scroll reveal (only when JS is running and motion is allowed) */
.cd-j.is-anim .cd-j__row{ opacity: 0; translate: 0 36px; }

.cd-j.is-anim .cd-j__row.is-in{ opacity: 1; translate: 0 0; }
@media (max-width: 1024px) {
  .cd-j__list{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cd-j__row, .cd-j__row:nth-child(n+4){ grid-column: span 1; }
  .cd-j__row:nth-child(n+4) .cd-j__card{ flex-direction: column; align-items: stretch; gap: 0; }
  .cd-j__row:nth-child(n+4) .cd-j__fig{ flex: none; aspect-ratio: 4 / 3; }
  .cd-j__row:last-child{ grid-column: span 2; }
  .cd-j__row:last-child .cd-j__card{ flex-direction: row; align-items: center; gap: 8px; }
  .cd-j__row:last-child .cd-j__fig{ flex: 0 0 42%; aspect-ratio: 4 / 5; }
}
@media (max-width: 640px) {
  .cd-j__list{ grid-template-columns: minmax(0, 1fr); }
  .cd-j__row, .cd-j__row:last-child{ grid-column: span 1; }
  .cd-j__row:last-child .cd-j__card{ flex-direction: column; align-items: stretch; gap: 0; }
  .cd-j__row:last-child .cd-j__fig{ flex: none; aspect-ratio: 4 / 3; }
  .cd-j__card{ padding: 10px; border-radius: 24px; }
  .cd-j__body{ padding: 18px 10px 8px; }
  .cd-j__chips span{ padding: 7px 11px; font-size: .6875rem; }
  .cd-j__seal{ width: 52px; font-size: 1.4rem; }
}
@media (max-width: 400px) {
  .cd-j__yw{ grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .cd-j__foil, .cd-j__spark{ animation: none !important; }
  .cd-j__sketch path{ stroke-dashoffset: 0; transition: none; }
  .cd-j__row, .cd-j__card{ transition: none; }
}


/* ------------------------------------------- 5. BEFORE / AFTER -- */
.cd-ba-sec{ padding: clamp(64px, 8vw, 120px) 0; background: var(--bg); }

.cd-ba{ position: relative; width: min(100%, 1000px); aspect-ratio: 16 / 10; margin-inline: auto; overflow: hidden; border-radius: 26px; border: 1px solid var(--line); box-shadow: var(--shadow); background: #E9DFCF; user-select: none; -webkit-user-select: none; }

.cd-ba__after, .cd-ba__before{ position: absolute; inset: 0; }

.cd-ba__after img{ transition: opacity .5s ease; }

.cd-ba__before{ clip-path: inset(0 calc(100% - var(--p)) 0 0); }

.mb{ position: absolute; inset: 0; background-color: #EFE5D3; background-image: linear-gradient(rgba(120, 90, 50, .09) 1px, transparent 1px), linear-gradient(90deg, rgba(120, 90, 50, .09) 1px, transparent 1px); background-size: 30px 30px; }

.mb__pol{ position: absolute; width: 21%; margin: 0; padding: 1.1cqw 1.1cqw 3.4cqw; background: #FFFDF9; box-shadow: 0 14px 26px rgba(60, 30, 20, .28); }

.mb__pol div{ aspect-ratio: 1; overflow: hidden; background: var(--shade-strong); }

.mb__pol::before{ content: ""; position: absolute; left: 50%; top: -12px; width: 64px; height: 22px; translate: -50% 0; background: rgba(231, 201, 135, .55); rotate: -3deg; }

.mb__pol--1{ left: 5%; top: 9%; rotate: -6deg; }

.mb__pol--2{ left: 23%; bottom: 9%; rotate: 5deg; }

.mb__sw{ position: absolute; left: 5%; bottom: 8%; display: flex; gap: 8px; }

.mb__sw i{ width: 34px; height: 34px; border-radius: 50%; background: var(--c, #ccc); border: 2px solid #FFFDF9; box-shadow: 0 6px 12px rgba(60, 30, 20, .25); }

.mb__note{ position: absolute; margin: 0; font: italic 600 clamp(1.1rem, 2.4vw, 1.9rem)/1.2 var(--font-head); color: #7A4A32; white-space: nowrap; }

.mb__note::after{ content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: #C9A45C; opacity: .8; border-radius: 2px; }

.mb__note--1{ left: 8%; top: 52%; rotate: -4deg; }

.mb__note--2{ left: 31%; top: 12%; rotate: 3deg; }

.mb__note--3{ left: 49%; top: 46%; rotate: -2deg; }

.mb__sketch{ position: absolute; left: 62%; top: 10%; width: 21%; fill: none; stroke: #7A4A32; stroke-width: 1.4; stroke-dasharray: 5 5; stroke-linecap: round; opacity: .7; }

.cd-ba__tag{ position: absolute; z-index: 3; top: 16px; padding: 8px 16px; border-radius: 999px; background: rgba(255, 253, 249, .95); color: #4A1025; font: 600 .75rem/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; box-shadow: 0 8px 18px rgba(0, 0, 0, .18); pointer-events: none; }

.cd-ba__tag--l{ left: 16px; }
 .cd-ba__tag--r{ right: 16px; }

.cd-ba__line{ position: absolute; z-index: 3; top: 0; bottom: 0; left: var(--p); width: 2px; translate: -50% 0; background: #FFFDF9; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08), 0 0 22px rgba(0, 0, 0, .35); pointer-events: none; }

.cd-ba__knob{ position: absolute; top: 50%; left: 50%; width: 56px; height: 56px; display: grid; place-items: center; translate: -50% -50%; border-radius: 50%; background: #FFFDF9; color: #4A1025; box-shadow: 0 12px 26px rgba(0, 0, 0, .32); font-size: 1rem; }

.cd-ba__knob::before, .cd-ba__knob::after{ content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 1px solid rgba(255, 253, 249, .7); animation: cdPulse 2.4s ease-out infinite; }

.cd-ba__knob::after{ animation-delay: 1.2s; }

@keyframes cdPulse{ from { scale: .85; opacity: .9; } to { scale: 1.5; opacity: 0; } }

.cd-ba__range{ position: absolute; z-index: 4; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; background: transparent; }

.cd-ba:has(.cd-ba__range:focus-visible) .cd-ba__knob{ outline: 3px solid var(--gold); outline-offset: 4px; }

.cd-ba__cap{ max-width: 62ch; margin: 22px auto 0 !important; text-align: center; color: var(--muted); }

.cd-ba__cap strong{ color: var(--ink); font-family: var(--font-head); font-size: 1.125rem; }


/* ------------------------------------ 6. PAPER AND FINISH LIBRARY -- */
.cd-lib{ padding: clamp(64px, 8vw, 120px) 0; background: var(--shade); border-block: 1px solid var(--line); }

.cd-lib__grid{ display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: clamp(20px, 3vw, 40px); align-items: stretch; }

.cd-lib__list{ display: grid; gap: 10px; align-content: start; }

.cd-lib__item{ display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 12px 18px 12px 12px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); color: var(--text); font: inherit; text-align: start; cursor: pointer; transition: transform .3s ease, border-color .3s ease, background .3s ease, box-shadow .3s ease; }

.cd-lib__item:hover{ transform: translateX(6px); border-color: var(--gold); }

.cd-lib__item[aria-pressed="true"]{ border-color: var(--ink); background: var(--shade-strong); box-shadow: inset 0 0 0 1px var(--ink); }

.cd-lib__item b{ display: block; font: 600 1.25rem/1.2 var(--font-head); color: var(--ink); }

.cd-lib__item small{ font-size: .8125rem; color: var(--muted); }

.cd-lib__item > i{ color: var(--gold-text); font-size: .8rem; opacity: 0; translate: -6px 0; transition: opacity .3s, translate .3s; }

.cd-lib__item:hover > i, .cd-lib__item[aria-pressed="true"] > i{ opacity: 1; translate: 0 0; }

.cd-lib__sw{ width: 64px; height: 64px; border-radius: 12px; border: 1px solid rgba(0, 0, 0, .12); }

.sw-ivory{ background: #F7EEDC; }

.sw-cotton{ background: #fff radial-gradient(circle, rgba(0, 0, 0, .06) 1px, transparent 1.5px) 0 0 / 9px 9px; }

.sw-kraft{ background: #D2B48C repeating-linear-gradient(90deg, rgba(255, 255, 255, .14) 0 2px, transparent 2px 6px); }

.sw-handmade{ background: #F4EEE2 radial-gradient(circle at 30% 30%, rgba(120, 90, 50, .16) 0 1px, transparent 2px) 0 0 / 11px 11px; border-radius: 14px 20px 11px 18px; }

.sw-foil{ background: linear-gradient(135deg, #8F6A25, #F1D88F 45%, #B8934B 70%, #8F6A25); }

.sw-press{ background: #6B2737; box-shadow: inset 0 3px 7px rgba(0, 0, 0, .55), inset 0 -1px 0 rgba(255, 255, 255, .25); }

.sw-emboss{ background: #EFE6D6; box-shadow: inset 4px 4px 7px rgba(255, 255, 255, .95), inset -4px -4px 7px rgba(0, 0, 0, .2); }

.sw-blind{ background: #E8DFCE; box-shadow: inset 2px 2px 3px rgba(255, 255, 255, .95), inset -2px -2px 3px rgba(0, 0, 0, .15); }

.cd-lib__detail{ display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(18px, 3vw, 40px); align-items: center; padding: clamp(18px, 2.4vw, 30px); border-radius: 28px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }

.cd-lib__photo{ position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 999px 999px 18px 18px; background: var(--shade-strong); }

.cd-lib__photo img{ position: absolute; inset: 0; opacity: 1; scale: 1; transition: opacity .8s ease, scale 1.6s cubic-bezier(.2, .7, .2, 1); }

.cd-lib__photo img.is-new{ opacity: 0; scale: 1.12; }

.cd-lib__shine{ position: absolute; z-index: 2; inset: 0; pointer-events: none; background: linear-gradient(110deg, transparent 38%, rgba(255, 255, 255, .6) 50%, transparent 62%) 120% 0 / 260% 100% no-repeat; mix-blend-mode: soft-light; animation: cdShine 4.5s ease-in-out infinite; }

@keyframes cdShine{ 0% { background-position: 120% 0; } 55%, 100% { background-position: -40% 0; } }

.cd-lib__kicker{ font-size: .8125rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-text); }

.cd-lib__info h3{ margin: 8px 0 12px !important; font: 600 clamp(1.75rem, 2.8vw, 2.5rem)/1.1 var(--font-head); color: var(--ink); }

.cd-lib__info > p:not(.cd-lib__kicker){ color: var(--muted); font-size: 1.0625rem; line-height: 1.65; }

.cd-lib__specs{ margin: 20px 0 26px !important; border-top: 1px solid var(--line); }

.cd-lib__specs li{ display: flex; justify-content: space-between; gap: 18px; padding: 12px 0; border-bottom: 1px dashed var(--line); font-size: .9375rem; }

.cd-lib__specs b{ font-weight: 600; color: var(--ink); }
 .cd-lib__specs span{ color: var(--muted); text-align: end; }

.cd-lib__info .btn i{ margin-inline-start: 10px; font-size: .75rem; transition: translate .2s; }

.cd-lib__info .btn:hover i{ translate: 3px 0; }

.cd-lib__info.is-swap > *{ animation: cdUp .6s cubic-bezier(.2, .7, .2, 1) both; }

.cd-lib__info.is-swap > :nth-child(2){ animation-delay: .05s; }
 .cd-lib__info.is-swap > :nth-child(3){ animation-delay: .1s; }
 .cd-lib__info.is-swap > :nth-child(4){ animation-delay: .15s; }
 .cd-lib__info.is-swap > :nth-child(5){ animation-delay: .2s; }


/* -------------------------------- 7. QUESTIONS + CLOSING CTA -- */
.cd-end{ padding: clamp(64px, 8vw, 120px) 0 clamp(72px, 9vw, 130px); background: var(--bg); }

.cd-end__grid{ display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(28px, 5vw, 88px); align-items: start; }

.cd-faq__list{ margin-top: 30px; border-top: 1px solid var(--line); }

.cd-faq__item{ border-bottom: 1px solid var(--line); }

.cd-faq__item h3{ margin: 0; }

.cd-faq__q{ display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%; padding: 22px 0; background: none; border: 0; text-align: start; cursor: pointer; font: 600 clamp(1.125rem, 1.6vw, 1.375rem)/1.3 var(--font-head); color: var(--ink); transition: color .25s; }

.cd-faq__q:hover{ color: var(--gold-text); }

.cd-faq__q i{ position: relative; flex: none; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--gold); transition: background .35s, rotate .45s cubic-bezier(.2, .8, .2, 1.2); }

.cd-faq__q i::before, .cd-faq__q i::after{ content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.5px; translate: -50% -50%; background: var(--gold); transition: background .3s; }

.cd-faq__q i::after{ rotate: 90deg; }

.cd-faq__item.is-open .cd-faq__q i{ rotate: 135deg; background: var(--gold); }

.cd-faq__item.is-open .cd-faq__q i::before, .cd-faq__item.is-open .cd-faq__q i::after{ background: #2A0F17; }

.cd-faq__a{ display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s cubic-bezier(.2, .7, .2, 1); }

.cd-faq__a > div{ overflow: hidden; }

.cd-faq__a p{ padding: 0 0 24px; max-width: 58ch; color: var(--muted); font-size: 1.0625rem; line-height: 1.7; opacity: 0; translate: 0 -8px; transition: opacity .4s ease, translate .5s ease; }

.cd-faq__item.is-open .cd-faq__a{ grid-template-rows: 1fr; }

.cd-faq__item.is-open .cd-faq__a p{ opacity: 1; translate: 0 0; transition-delay: .15s; }

.cd-cta-card{ position: sticky; top: calc(var(--h) + 24px); padding: 30px 30px 36px; border-radius: 30px; text-align: center; color: #FFFDF9; background: radial-gradient(80% 50% at 50% 0, rgba(125, 52, 70, .75), transparent 70%), #2A0F17; box-shadow: 0 30px 60px rgba(42, 15, 23, .35); overflow: hidden; }

.cd-cta-card__arch{ width: min(68%, 250px); aspect-ratio: 4 / 5; margin: 0 auto 24px; overflow: hidden; border-radius: 999px 999px 16px 16px; border: 1px solid rgba(231, 201, 135, .55); box-shadow: 0 24px 44px rgba(0, 0, 0, .45); }

.cd-cta-card__arch img{ scale: 1.05; animation: cdBreath 9s ease-in-out infinite alternate; }

@keyframes cdBreath{ to { scale: 1.16; } }

.cd-cta-card__script{ margin-bottom: 4px !important; font: italic 500 1.5rem/1.2 var(--font-head); color: #E7C987; }

.cd-cta-card h3{ margin-bottom: 10px !important; font: 600 clamp(1.75rem, 2.6vw, 2.25rem)/1.12 var(--font-head); color: #FFFDF9; }

.cd-cta-card__body > p:not(.cd-cta-card__script){ max-width: 36ch; margin: 0 auto 22px !important; color: rgba(255, 253, 249, .8); }

.cd-cta-card .btn--solid{ background: #E7C987; color: #2A0F17; }

.cd-cta-card .btn--solid:hover{ background: #F3DDA6; }

.cd-cta-card .btn i{ margin-inline-start: 10px; font-size: .75rem; transition: translate .2s; }

.cd-cta-card .btn:hover i{ translate: 3px 0; }

.cd-cta-card .cd-link{ display: flex; justify-content: center; margin-top: 8px; color: #E7C987; text-decoration-color: rgba(231, 201, 135, .6); }
@media (max-width: 900px) {
  .cd-lib__grid, .cd-end__grid{ grid-template-columns: 1fr; }
  .cd-lib__detail{ grid-template-columns: 1fr; }
  .cd-lib__photo{ width: min(100%, 320px); margin-inline: auto; }
  .cd-cta-card{ position: static; }
  .cd-ba{ aspect-ratio: 4 / 3; }
  .mb__pol{ width: 26%; }
}
@media (max-width: 560px) {
  .cd-ba{ aspect-ratio: 1 / 1.05; }
  .cd-ba__tag{ top: 10px; padding: 6px 12px; font-size: .6875rem; }
  .cd-ba__tag--l{ left: 10px; }
  .cd-ba__tag--r{ right: 10px; }
  .mb__pol{ width: 34%; }
  .mb__note--3{ left: 40%; top: 58%; }
  .mb__sketch{ left: 56%; width: 30%; }
  .cd-lib__item{ grid-template-columns: 56px minmax(0, 1fr) auto; }
  .cd-lib__sw{ width: 56px; height: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  .cd-ba__knob::before, .cd-ba__knob::after, .cd-lib__shine, .cd-cta-card__arch img{ animation: none !important; }
}

/* ===================== home2-hero (page styles) ===================== */
/* =====================================================================
   Wishcraft — Home 2 hero. Deep burgundy stage, copy on the left, a stacked
   invitation suite on the right (front card + two peeking behind), a rotating
   finishes seal and a live collection tag. Same look in light and dark mode.
   RTL: --s flips every sideways offset. Classes are prefixed hx-.
   ===================================================================== */
.hx{
  --s: 1;
  --hx-ivory: #FBF6EE;
  --hx-gold: #E7C987;
  --hx-wine: #4A1025;
  position: relative;
  overflow: clip;
  display: flex;
  align-items: center;
  padding-block: clamp(44px, 6vw, 84px);
  min-height: min(840px, max(620px, calc(100svh - var(--h))));
  color: var(--hx-ivory);
  background:
    radial-gradient(50% 70% at 82% 48%, rgba(197, 164, 109, .22), transparent 70%),
    radial-gradient(40% 50% at 0 100%, rgba(0, 0, 0, .35), transparent 70%),
    linear-gradient(135deg, #3A0C1D 0%, #4A1025 52%, #5C1A33 100%);
  isolation: isolate;
}

/* faint paper photo for texture */
.hx::before{
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: url("../images/home1-royal.webp") center / cover no-repeat;
  opacity: .05; mix-blend-mode: luminosity; filter: blur(3px);
}

.hx__in{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(44px, 6vw, 60px);
  align-items: center;
}
@media (min-width: 960px) {
  .hx__in{ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 5vw, 80px); }
}


/* ---- copy ---- */
.hx__pill{
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 22px; padding: 8px 18px 8px 14px;
  border: 1px solid rgba(231, 201, 135, .55); border-radius: 999px; background: rgba(251, 246, 238, .07);
  font-size: .875rem; font-weight: 500; color: var(--hx-gold);
}

.hx__pill i{ font-size: .7rem; }

.hx h1{ margin: 0; font: 600 clamp(2.5rem, 5.2vw, 4.4rem)/1.07 var(--font-head); letter-spacing: -.015em; color: var(--hx-ivory); text-wrap: balance; }

.hx__script{ display: block; margin-top: .06em; font-style: italic; font-weight: 500; color: var(--hx-gold); }

.hx__text{ max-width: 50ch; margin: 22px 0 0; font-size: 1.0625rem; line-height: 1.8; color: rgba(251, 246, 238, .82); }

.hx__actions{ display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }

.hx-btn-gold, .hx-btn-line{
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 14px 30px;
  border-radius: 999px; font: 600 1rem/1 var(--font-body); text-decoration: none; cursor: pointer;
  border: 1.5px solid var(--hx-gold); transition: transform .25s ease, background .25s ease, color .25s ease, box-shadow .25s ease;
}

.hx-btn-gold{ background: var(--hx-gold); color: #3A0C1D; }

.hx-btn-gold:hover{ background: #F3DAA0; transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0, 0, 0, .3); }

.hx-btn-gold i{ font-size: .75rem; transition: translate .25s ease; }

.hx-btn-gold:hover i{ translate: 4px 0; }

.hx-btn-line{ background: transparent; color: var(--hx-ivory); border-color: rgba(251, 246, 238, .55); }

.hx-btn-line:hover{ background: var(--hx-ivory); color: var(--hx-wine); border-color: var(--hx-ivory); transform: translateY(-2px); }

.hx a:focus-visible, .hx button:focus-visible, .hx-stack:focus-visible{ outline: 3px solid var(--hx-gold); outline-offset: 3px; }


.hx__facts{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 40px 0 0; padding: 0; list-style: none; max-width: 560px; }

.hx__facts li{
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px;
  border: 1px solid rgba(231, 201, 135, .28); border-radius: 16px; background: rgba(251, 246, 238, .06);
  font-size: .8125rem; line-height: 1.4; color: rgba(251, 246, 238, .75);
}

.hx__facts i{ display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(231, 201, 135, .16); color: var(--hx-gold); font-size: .9rem; }

.hx__facts b{ display: block; font-weight: 600; color: var(--hx-ivory); }


/* ---- showcase ---- */
.hx__visual{ display: grid; justify-items: center; gap: 22px; }

.hx-deck{ position: relative; width: min(100%, 500px); }

.hx-arch{
  position: absolute; inset-block: -4% 6%; inset-inline-end: 0; width: 66%;
  border: 1px solid rgba(231, 201, 135, .55); border-radius: 999px 999px 0 0;
  box-shadow: 0 0 0 14px transparent, 0 0 0 15px rgba(231, 201, 135, .3), 0 0 0 36px transparent, 0 0 0 37px rgba(231, 201, 135, .14);
}

.hx-stack{ position: relative; width: 100%; aspect-ratio: 1 / 1; touch-action: pan-y; }

.hx-card{
  position: absolute; top: 5%; inset-inline-start: 0; width: 66%; margin: 0; padding: 8px;
  background: var(--hx-ivory); border-radius: 16px; box-shadow: 0 26px 54px rgba(0, 0, 0, .4);
  transform-origin: 50% 100%; opacity: 0; pointer-events: none; z-index: 0;
  transform: translateX(calc(var(--s) * 40%)) rotate(calc(var(--s) * 10deg)) scale(.85);
  transition: transform .9s cubic-bezier(.2, .7, .2, 1), opacity .7s ease, filter .7s ease;
}

.hx-card img{ width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 10px; user-select: none; -webkit-user-drag: none; }

.hx-card[data-pos="0"]{ opacity: 1; z-index: 4; pointer-events: auto; transform: none; }

.hx-card[data-pos="1"]{ opacity: 1; z-index: 3; filter: brightness(.8); transform: translateX(calc(var(--s) * 22%)) rotate(calc(var(--s) * 5deg)) scale(.95); }

.hx-card[data-pos="2"]{ opacity: .95; z-index: 2; filter: brightness(.58); transform: translateX(calc(var(--s) * 40%)) rotate(calc(var(--s) * 10deg)) scale(.9); }

.hx-card[data-pos="out"]{ opacity: 0; z-index: 5; transform: translateX(calc(var(--s) * -34%)) rotate(calc(var(--s) * -9deg)) scale(.95); }


/* rotating finishes seal */
.hx-seal{ position: absolute; top: -2%; inset-inline-end: 1%; z-index: 6; display: grid; place-items: center; width: clamp(86px, 20%, 108px); aspect-ratio: 1; border-radius: 50%; background: var(--hx-wine); border: 1px solid var(--hx-gold); box-shadow: 0 14px 30px rgba(0, 0, 0, .4); }

.hx-seal svg{ position: absolute; inset: 0; width: 100%; height: 100%; animation: hx-spin 28s linear infinite; }

.hx-seal text{ font: italic 500 10.5px var(--font-head); fill: var(--hx-gold); }

.hx-seal b{ font: 600 1.6rem/1 var(--font-head); color: var(--hx-gold); }

@keyframes hx-spin{ to { transform: rotate(360deg); } }


/* glass proof chip */
.hx-chip{
  position: absolute; z-index: 6; inset-inline-end: -2%; top: 52%; display: flex; align-items: center; gap: 12px; margin: 0; padding: 12px 18px 12px 14px;
  border: 1px solid rgba(231, 201, 135, .45); border-radius: 16px; background: rgba(58, 12, 29, .72);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font-size: .8125rem; line-height: 1.35; color: rgba(251, 246, 238, .8); box-shadow: 0 14px 30px rgba(0, 0, 0, .3);
}

.hx-chip i{ display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: rgba(231, 201, 135, .18); color: var(--hx-gold); font-size: .9rem; }

.hx-chip b{ display: block; font-weight: 600; color: var(--hx-ivory); }


/* live collection tag */
.hx-tag{
  position: absolute; z-index: 6; inset-inline-start: -3%; bottom: 3%; display: flex; align-items: center; gap: 16px; max-width: 74%;
  padding: 14px 14px 14px 20px; border-radius: 18px; background: var(--hx-ivory); color: var(--hx-wine); box-shadow: 0 20px 44px rgba(0, 0, 0, .38);
}

.hx-tag__txt{ min-width: 0; transition: opacity .25s ease, transform .25s ease; }

.hx-tag__txt.is-swap{ opacity: 0; transform: translateY(6px); }

.hx-tag span{ display: block; font-size: .8125rem; font-weight: 600; color: #805B24; }

.hx-tag strong{ display: block; margin: 2px 0; font: 600 1.375rem/1.15 var(--font-head); }

.hx-tag em{ font-style: normal; font-size: .875rem; color: #65545A; }

.hx-tag a{ flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--hx-wine); color: var(--hx-ivory); font-size: .8rem; text-decoration: none; transition: background .25s ease, color .25s ease, transform .25s ease; }

.hx-tag a:hover{ background: var(--hx-gold); color: var(--hx-wine); transform: translateX(3px); }


/* ---- picker ---- */
.hx-ctrl{ display: flex; align-items: center; gap: 18px; }

.hx-btn{ flex: none; display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid rgba(231, 201, 135, .55); border-radius: 50%; background: transparent; color: var(--hx-ivory); font-size: .8rem; cursor: pointer; transition: background .25s ease, color .25s ease; }

.hx-btn:hover{ background: var(--hx-gold); color: var(--hx-wine); }

.hx-dots{ display: flex; align-items: center; gap: 6px; }

.hx-dot{ position: relative; width: 22px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer; transition: width .35s ease; }

.hx-dot::before{ content: ""; position: absolute; inset-inline: 0; top: 50%; height: 4px; margin-top: -2px; border-radius: 4px; background: rgba(251, 246, 238, .3); transition: background .25s ease; }

.hx-dot:hover::before{ background: rgba(251, 246, 238, .6); }

.hx-dot.is-active{ width: 52px; }

.hx-dot.is-active::before{ background: rgba(251, 246, 238, .3); }

.hx-dot.is-active::after{ content: ""; position: absolute; inset-inline: 0; top: 50%; height: 4px; margin-top: -2px; border-radius: 4px; background: var(--hx-gold); transform-origin: left; transform: scaleX(0); animation: hx-prog var(--dur, 5.5s) linear forwards; }

.hx__visual.is-paused .hx-dot.is-active::after{ animation-play-state: paused; }

@keyframes hx-prog{ to { transform: scaleX(1); } }


/* ---- one entrance sequence ---- */
.hx__copy > *, .hx-deck, .hx-ctrl{ opacity: 0; transform: translateY(20px); animation: hx-in .85s cubic-bezier(.2, .8, .2, 1) forwards; }

.hx__copy > :nth-child(2){ animation-delay: .08s; }
 .hx__copy > :nth-child(3){ animation-delay: .16s; }

.hx__copy > :nth-child(4){ animation-delay: .24s; }
 .hx__copy > :nth-child(5){ animation-delay: .32s; }

.hx-deck{ animation-delay: .2s; }
 .hx-ctrl{ animation-delay: .4s; }

@keyframes hx-in{ to { opacity: 1; transform: none; } }
/* ---- responsive ---- */
@media (max-width: 959px) {
  .hx{ min-height: 0; text-align: center; }
  .hx__text{ margin-inline: auto; }
  .hx__actions{ justify-content: center; }
  .hx__facts{ margin-inline: auto; }
  .hx__facts li{ align-items: center; text-align: center; }
}
@media (max-width: 640px) {
  .hx__facts{ grid-template-columns: 1fr; gap: 10px; max-width: 360px; }
  .hx__facts li{ flex-direction: row; align-items: center; text-align: start; gap: 14px; padding: 12px 16px; }
  .hx-deck{ width: min(100%, 380px); }
  .hx-chip{ display: none; }
  .hx-tag{ inset-inline-start: 0; max-width: 82%; padding: 12px 12px 12px 16px; }
  .hx-tag strong{ font-size: 1.2rem; }
  .hx-ctrl{ gap: 10px; }
  .hx-dot{ width: 16px; }
  .hx-dot.is-active{ width: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .hx__copy > *, .hx-deck, .hx-ctrl{ animation: none; opacity: 1; transform: none; }
  .hx-card{ transition-duration: .01ms; }
  .hx-seal svg{ animation: none; }
  .hx-dot.is-active::after{ animation: none; transform: scaleX(1); }
}

/* ===================== home2-time (page styles) ===================== */
/* =====================================================================
   Wishcraft — Home 2, "Your stationery timeline".
   Deep burgundy band: a six-stop rail of photo nodes (count back from the
   wedding date), and a ticket-style card under it with the selected step.
   Same look in light and dark mode. RTL: logical properties throughout.
   ===================================================================== */
.tl{
  --tl-bg: #2F0A18;
  --tl-gold: #E7C987;
  --tl-ivory: #FBF6EE;
  --tl-wine: #4A1025;
  position: relative;
  padding-block: clamp(64px, 8vw, 112px);
  color: var(--tl-ivory);
  background:
    radial-gradient(46% 50% at 12% 0, rgba(197, 164, 109, .2), transparent 70%),
    radial-gradient(40% 46% at 100% 100%, rgba(197, 164, 109, .14), transparent 70%),
    var(--tl-bg);
  border-top: 0;
  overflow: clip;
}

.tl .sec-head h2{ color: var(--tl-ivory); }

.tl .sec-head .h1__script{ color: var(--tl-gold); }

.tl .eyebrow{ color: var(--tl-gold); }

.tl .eyebrow span, .tl .eyebrow span::after{ background: var(--tl-gold); }

.tl .sec-head p:not(.eyebrow){ color: rgba(251, 246, 238, .78); }

.tl a:focus-visible, .tl button:focus-visible, .tl input:focus-visible{ outline: 3px solid var(--tl-gold); outline-offset: 3px; }


/* ---- date bar ---- */
.tl__bar{
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px;
  width: fit-content; max-width: 100%; margin: 0 auto; padding: 8px 10px 8px 22px;
  border: 1px solid rgba(231, 201, 135, .5); border-radius: 999px; background: rgba(251, 246, 238, .07);
}

.tl__bar label{ display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: .9375rem; color: var(--tl-gold); }

.tl__bar input{
  min-height: 44px; padding: 8px 16px; border: 0; border-radius: 999px; background: var(--tl-ivory); color: var(--tl-wine);
  font: 500 .9375rem/1 var(--font-body); color-scheme: light;
}

.tl__clear{ min-height: 44px; padding: 8px 18px; border: 1px solid rgba(251, 246, 238, .45); border-radius: 999px; background: none; color: var(--tl-ivory); font: 500 .875rem/1 var(--font-body); cursor: pointer; transition: background .25s ease, color .25s ease; }

.tl__clear:hover{ background: var(--tl-ivory); color: var(--tl-wine); }

.tl__msg{ margin: 14px 0 0; text-align: center; font-size: .9375rem; color: rgba(251, 246, 238, .72); }


/* ---- rail ---- */
.tl__rail{ --pic: 68px; position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin-top: clamp(34px, 5vw, 56px); }

.tl__line{ position: absolute; top: calc(var(--pic) / 2 + 8px); inset-inline: calc(100% / 12); height: 2px; background: rgba(231, 201, 135, .25); }

.tl__line i{ position: absolute; inset-block: 0; inset-inline-start: 0; width: calc(var(--i, 0) / 5 * 100%); background: var(--tl-gold); transition: width .7s cubic-bezier(.22, 1, .36, 1); }

.tl__node{ position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 8px 4px 0; border: 0; background: none; color: var(--tl-ivory); cursor: pointer; text-align: center; }

.tl__pic{
  display: block; width: var(--pic); height: var(--pic); overflow: hidden; border-radius: 50%;
  border: 2px solid rgba(231, 201, 135, .45); background: var(--tl-wine);
  filter: grayscale(.85) brightness(.7);
  transition: transform .45s cubic-bezier(.22, 1, .36, 1), filter .45s ease, border-color .3s ease, box-shadow .3s ease;
}

.tl__pic img{ width: 100%; height: 100%; object-fit: cover; }

.tl__node:hover .tl__pic{ filter: none; border-color: var(--tl-gold); }

.tl__node.is-reached .tl__pic{ filter: none; border-color: var(--tl-gold); }

.tl__node.is-active .tl__pic{ transform: scale(1.16); box-shadow: 0 0 0 6px rgba(231, 201, 135, .22), 0 14px 30px rgba(0, 0, 0, .4); }

.tl__node--day .tl__pic{ border-width: 3px; border-color: var(--tl-gold); }

.tl__node--day .tl__pic::after{ content: "\f004"; font: 900 1rem/1 "Font Awesome 6 Free"; position: absolute; top: 8px; inset-inline-end: calc(50% - var(--pic) / 2 - 2px); display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--tl-gold); color: var(--tl-wine); font-size: .625rem; }

.tl__node--day{ --dayw: 1; }

.tl__lab{ display: grid; gap: 2px; margin-top: 4px; line-height: 1.3; }

.tl__lab b{ font-size: .875rem; font-weight: 600; color: rgba(251, 246, 238, .7); transition: color .25s ease; }

.tl__sh{ font-size: .8125rem; font-weight: 500; color: var(--tl-gold); }

.tl__node.is-active .tl__lab b, .tl__node:hover .tl__lab b{ color: var(--tl-ivory); }

.tl__node.is-late .tl__sh::after{ content: " ·"; }

.tl__node.is-late .tl__sh{ color: #F2B8B0; }


/* ---- ticket card ---- */
.tl__stage{
  --notch: var(--tl-bg);
  display: grid; grid-template-columns: minmax(0, 1fr); margin-top: clamp(30px, 4vw, 48px);
  background: var(--tl-ivory); color: var(--tl-wine); border-radius: 28px; overflow: hidden; box-shadow: 0 30px 70px rgba(0, 0, 0, .45);
}
@media (min-width: 860px) {
  .tl__stage{ grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); }
}

.tl__media{ position: relative; min-height: 260px; aspect-ratio: 16 / 10; background: var(--tl-wine); isolation: isolate; }
@media (min-width: 860px) {
  .tl__media{ aspect-ratio: auto; min-height: 470px; }
}

.tl__media img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity .7s ease, transform 1.4s cubic-bezier(.2, .7, .2, 1); }

.tl__media img.is-on{ opacity: 1; transform: none; }

.tl__media::after{ content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(40, 8, 20, .78), transparent 58%); pointer-events: none; }

.tl__no{ position: absolute; z-index: 2; inset-inline-start: clamp(20px, 4vw, 36px); bottom: clamp(8px, 2vw, 18px); font: 700 clamp(4.5rem, 10vw, 8rem)/1 var(--font-head); color: transparent; -webkit-text-stroke: 1.5px rgba(251, 246, 238, .9); }


.tl__panel{ position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 28px; padding: clamp(26px, 4vw, 52px); }
@media (min-width: 860px) {
  .tl__panel::before{ content: ""; position: absolute; inset-block: 18px; inset-inline-start: 0; border-inline-start: 2px dashed rgba(74, 16, 37, .22); }
  .tl__panel::after{
    content: ""; position: absolute; inset-inline-start: -14px; inset-block: -14px; width: 28px; pointer-events: none;
    background:
      radial-gradient(circle at 50% 14px, var(--notch) 13px, transparent 14px) top / 28px 28px no-repeat,
      radial-gradient(circle at 50% 14px, var(--notch) 13px, transparent 14px) bottom / 28px 28px no-repeat;
  }
}

.tl__body.is-swap > *{ animation: tl-in .55s cubic-bezier(.2, .8, .2, 1) both; }

.tl__body.is-swap > :nth-child(2){ animation-delay: .05s; }
 .tl__body.is-swap > :nth-child(3){ animation-delay: .1s; }

.tl__body.is-swap > :nth-child(4){ animation-delay: .15s; }
 .tl__body.is-swap > :nth-child(5){ animation-delay: .2s; }

@keyframes tl-in{ from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }


.tl__when{ display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: .9375rem; font-weight: 600; color: #805B24; }

.tl__when i{ display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(197, 164, 109, .22); font-size: .85rem; }

.tl__panel h3{ margin: 0; font: 600 clamp(1.75rem, 3.2vw, 2.5rem)/1.12 var(--font-head); color: var(--tl-wine); }

.tl__date{ display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin: 16px 0 0; padding: 10px 18px; border: 1px solid rgba(197, 164, 109, .7); border-radius: 14px; background: rgba(197, 164, 109, .14); }

.tl__date[hidden]{ display: none; }

.tl__date span{ font-size: .875rem; font-weight: 600; color: #805B24; }

.tl__date strong{ font: 600 1.25rem/1.2 var(--font-head); color: var(--tl-wine); }

.tl__text{ margin: 16px 0 0; max-width: 54ch; color: #65545A; }

.tl__pts{ display: grid; gap: 10px; margin: 20px 0 0; padding: 0; list-style: none; }

.tl__pts li{ position: relative; padding-inline-start: 32px; color: var(--tl-wine); font-size: .9375rem; line-height: 1.5; }

.tl__pts li::before{ content: "\f00c"; font: 900 .6rem/1 "Font Awesome 6 Free"; position: absolute; inset-inline-start: 0; top: .1em; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--tl-wine); color: var(--tl-gold); }

.tl__rush{ display: flex; gap: 10px; margin: 18px 0 0; padding: 12px 16px; border-radius: 12px; background: #F6E1DC; color: #7A2230; font-size: .875rem; line-height: 1.5; }

.tl__rush[hidden]{ display: none; }

.tl__rush i{ margin-top: .25em; }


.tl__foot{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-top: 22px; border-top: 1px solid rgba(197, 164, 109, .5); }

.tl__cta{ display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 12px 26px; border-radius: 999px; background: var(--tl-wine); color: var(--tl-ivory); font: 600 .9375rem/1 var(--font-body); text-decoration: none; transition: background .25s ease, color .25s ease, transform .25s ease; }

.tl__cta i{ font-size: .75rem; transition: translate .25s ease; }

.tl__cta:hover{ background: #6B1E3A; transform: translateY(-2px); }

.tl__cta:hover i{ translate: 4px 0; }

.tl__nav{ display: flex; align-items: center; gap: 12px; }

.tl__btn{ display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid var(--tl-gold); border-radius: 50%; background: none; color: var(--tl-wine); font-size: .8rem; cursor: pointer; transition: background .25s ease, color .25s ease; }

.tl__btn:hover{ background: var(--tl-wine); color: var(--tl-gold); border-color: var(--tl-wine); }

.tl__count{ min-width: 3.4em; text-align: center; font-size: .9375rem; font-weight: 600; color: #65545A; font-variant-numeric: tabular-nums; }

.tl__stage a:focus-visible, .tl__stage button:focus-visible{ outline-color: var(--tl-wine); }
/* ---- responsive ---- */
@media (max-width: 760px) {
  .tl__rail{ --pic: 46px; }
  .tl__node{ gap: 8px; padding-inline: 0; }
  .tl__lab b{ display: none; }
  .tl__sh{ font-size: .6875rem; }
  .tl__node--day .tl__pic::after{ width: 18px; height: 18px; top: 6px; font-size: .5rem; }
  .tl__bar{ padding: 10px 12px 10px 16px; border-radius: 24px; justify-content: center; }
  .tl__foot{ justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .tl__line i, .tl__pic, .tl__media img{ transition-duration: .01ms; }
  .tl__body.is-swap > *{ animation: none; }
}

/* ===================== home2-cta (page styles) ===================== */
/* =====================================================================
   Wishcraft — Home 2, consultation CTA as one rounded card:
   burgundy photo panel with the copy, ivory form panel beside it.
   Form panel uses theme tokens, so dark mode and RTL follow the site.
   ===================================================================== */
.h2-cs.ccd{ overflow: visible; isolation: auto; padding-block: clamp(64px, 8vw, 112px); background: var(--shade); color: var(--text); border-top: 1px solid var(--line); }

.h2-cs.ccd::before{ display: none; }


.ccd__card{
  display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden;
  border: 1px solid var(--line); border-radius: 32px; background: var(--surface); box-shadow: var(--shadow);
}
@media (min-width: 900px) {
  .ccd__card{ grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); }
}


/* ---- left: photo + copy ---- */
.ccd__side{ position: relative; display: flex; align-items: center; isolation: isolate; color: #F8F2E9; background: #3A0C1D; }

.ccd__photo{ position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }

.ccd__side::before{ content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(160deg, rgba(58, 12, 29, .9), rgba(42, 8, 20, .96)); }

.ccd__side::after{ content: ""; position: absolute; inset: 14px; z-index: -1; border: 1px solid rgba(231, 201, 135, .35); border-radius: 22px; pointer-events: none; }

.ccd__copy{ padding: clamp(36px, 5vw, 64px) clamp(30px, 4.5vw, 60px); }

.ccd .h2-cs__lead{ color: rgba(248, 242, 233, .88); }


/* ---- right: form ---- */
.ccd__form{ margin: 0; perspective: none; display: flex; align-items: center; }

.ccd .cs__stage.is-armed:not(.is-in) .cs__card{ opacity: 1; transform: none; }

.ccd .cs__card{
  width: 100%; padding: clamp(30px, 4.5vw, 60px); border: 0; border-radius: 0; background: transparent;
  -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; opacity: 1; transform: none; color: var(--text);
}

.ccd .cs__card h3{ color: var(--ink); font-size: clamp(1.5rem, 2.4vw, 1.875rem); }

.ccd .cs__note{ color: var(--muted); margin-bottom: 26px; }

.ccd .cs__f label{ margin-bottom: 8px; color: var(--ink); font-weight: 600; }

.ccd .cs__f input, .ccd .cs__f select{
  min-height: 52px; padding: 13px 16px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--bg); color: var(--text); color-scheme: normal; transition: border-color .25s ease, box-shadow .25s ease;
}

.ccd .cs__f input::placeholder{ color: var(--muted); opacity: .7; }

.ccd .cs__f input:focus, .ccd .cs__f select:focus{ border-color: var(--gold); box-shadow: 0 0 0 3px rgba(197, 164, 109, .3); }

.ccd .cs__f input[aria-invalid="true"]{ border-color: #C0392B; }

.ccd .cs__f option{ color: var(--text); background: var(--surface); }

.ccd .cs__err{ color: #B3261E; }

.ccd .cs__card .btn--solid{ width: 100%; margin-top: 28px; background: var(--btn-bg); color: var(--btn-fg); }

.ccd .cs__card .btn--solid:hover{ transform: translateY(-2px); box-shadow: var(--shadow); }

.ccd a:focus-visible, .ccd button:focus-visible, .ccd input:focus-visible, .ccd select:focus-visible{ outline: 3px solid var(--gold); outline-offset: 3px; }
@media (max-width: 899px) {
  .ccd__card{ border-radius: 24px; }
}

/* ===================== home2-favors (page styles) ===================== */
/* =====================================================================
   Wishcraft — Home 2, "Wedding favors": copy on one side, a bento of
   five favor photos on the other. Theme tokens, so dark mode + RTL follow.
   ===================================================================== */
.h2-fv{ padding-block: clamp(64px, 8vw, 112px); background: var(--surface); border-top: 1px solid var(--line); overflow: clip; }

.fv__in{ display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(36px, 5vw, 72px); align-items: center; }
@media (min-width: 960px) {
  .fv__in{ grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
}

.fv__copy h2{ margin: 0; font: 600 clamp(2rem, 3.8vw, 3.25rem)/1.08 var(--font-head); color: var(--ink); text-wrap: balance; }

.fv__copy .h1__script{ font-size: 1.1em; }

.fv__lead{ max-width: 46ch; margin: 18px 0 0; color: var(--muted); }

.fv__pts{ display: grid; gap: 12px; margin: 26px 0 0; padding: 0; list-style: none; }

.fv__pts li{ display: flex; align-items: center; gap: 14px; font-weight: 500; color: var(--text); }

.fv__pts i{ display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--shade); border: 1px solid var(--line); color: var(--gold-text); font-size: .9rem; }

.fv__actions{ display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }

.fv__actions .btn i{ margin-inline-start: 10px; font-size: .75rem; transition: translate .25s ease; }

.fv__actions .btn:hover i{ translate: 4px 0; }


.fv__grid{
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(160px, 38vw, 220px);
  gap: clamp(10px, 1.6vw, 16px); margin: 0; padding: 0; list-style: none;
}
@media (min-width: 640px) {
  .fv__grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: clamp(170px, 19vw, 230px); }
}

.fv__t{ position: relative; overflow: hidden; border-radius: 22px; background: var(--shade-strong); border: 1px solid var(--line); isolation: isolate; }

.fv__t:nth-child(even){ border-radius: 22px 22px 22px 70px; }

.fv__t--tall{ grid-row: span 2; border-radius: 999px 999px 22px 22px !important; }


.fv__t img{ width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.2, .7, .2, 1); }

.fv__t:hover img{ transform: scale(1.06); }

.fv__t::after{ content: ""; position: absolute; inset: auto 0 0; height: 55%; z-index: 1; background: linear-gradient(transparent, rgba(40, 8, 20, .85)); pointer-events: none; }

.fv__cap{ position: absolute; z-index: 2; inset: auto 0 0; padding: 0 16px 14px; font-size: .8125rem; line-height: 1.35; color: rgba(251, 246, 238, .86); }

.fv__t--tall .fv__cap{ padding-bottom: 28px; text-align: center; }

.fv__cap b{ display: block; margin-bottom: 2px; font: 600 1.0625rem/1.2 var(--font-head); color: #FBF6EE; }
@media (max-width: 639px) {
  .fv__t--tall{ grid-row: span 2; }
  .fv__cap{ font-size: .75rem; padding: 0 12px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .fv__t img{ transition: none; }
  .fv__t:hover img{ transform: none; }
}

/* ===================== products (page styles) ===================== */
/* =====================================================================
   Wishcraft — Products page (shop by theme)
   Uses the shared tokens from style.css / darkmode.css, so dark mode
   and RTL come for free. All classes are prefixed pp- / pt- / sc-.
   ===================================================================== */

.pp-page{ overflow-x: clip; color: var(--text); background: var(--bg); }

.pp-w{ width: min(100% - 2 * var(--pad), var(--wrap)); margin-inline: auto; }

.pp-page img{ display: block; width: 100%; height: 100%; object-fit: cover; }

.pp-page a{ text-decoration: none; }

.pp-page :where(h1, h2, h3, p, dl, dd, figure, ul){ margin: 0; }

.pp-page :where(ul){ padding: 0; list-style: none; }

.pp-page [id]{ scroll-margin-top: calc(var(--h) + 72px); }


.pp-eyebrow{ display: inline-flex; align-items: center; gap: 12px; font-size: .8125rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-text); }

.pp-eyebrow::before{ content: ""; width: 38px; height: 1px; background: var(--gold); }

.pp-h2{ font-family: var(--font-head); font-weight: 500; color: var(--ink); line-height: 1.06; letter-spacing: -.02em; font-size: clamp(2rem, 4vw, 3.4rem); }

.pp-h2 em{ font-style: italic; color: var(--gold-text); }


/* ------------------------------------------------------------ HERO -- */
.pp-hero{ position: relative; padding: clamp(20px, 3vw, 40px) 0 clamp(48px, 6vw, 88px); background:
  radial-gradient(55% 65% at 80% 42%, var(--glow), transparent 72%),
  radial-gradient(40% 50% at 4% 100%, var(--shade), transparent 70%), var(--bg); overflow: clip; }

.pp-crumb{ display: flex; gap: 10px; align-items: center; margin-bottom: clamp(20px, 3vw, 40px); font-size: .85rem; color: var(--muted); }

.pp-crumb a{ color: var(--muted); transition: color .2s; }

.pp-crumb a:hover{ color: var(--ink); }

.pp-crumb [aria-current]{ color: var(--ink); font-weight: 600; }


.pp-hero__grid{ display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; min-height: calc(100svh - var(--h) - 190px); }

.pp-hero h1{ margin: 18px 0 22px; font-family: var(--font-head); font-weight: 500; color: var(--ink); font-size: clamp(2.9rem, 6vw, 5.6rem); line-height: 1.01; letter-spacing: -.035em; }

.pp-hero h1 em{ position: relative; display: inline-block; font-style: italic; color: var(--gold-text); }

.pp-hero h1 em::after{ content: ""; position: absolute; inset-inline: 2% 2%; bottom: .04em; height: 2px; background: var(--gold); transform-origin: left; transform: scaleX(0); animation: pp-draw 1.1s .9s cubic-bezier(.65, 0, .2, 1) forwards; opacity: .7; }

@keyframes pp-draw{ to { transform: scaleX(1); } }

.pp-hero__lead{ max-width: 52ch; font-size: clamp(1rem, 1.25vw, 1.15rem); line-height: 1.75; color: var(--muted); }

.pp-hero__actions{ display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

.pp-facts{ display: flex; flex-wrap: wrap; gap: clamp(20px, 3vw, 44px); margin-top: clamp(30px, 4vw, 48px); padding-top: 26px; border-top: 1px solid var(--line); }

.pp-facts li{ display: grid; gap: 2px; }

.pp-facts strong{ font-family: var(--font-head); font-weight: 500; font-size: clamp(1.8rem, 3vw, 2.5rem); line-height: 1; color: var(--ink); }

.pp-facts span{ font-size: .82rem; color: var(--muted); letter-spacing: .02em; }


/* hero collage */
.pp-stage{ --mx: 0; --my: 0; position: relative; width: min(100%, 560px); aspect-ratio: 1 / 1.04; margin-inline: auto; }

.pp-lay{ position: absolute; transform: translate3d(calc(var(--mx) * var(--d, 10) * 1px), calc(var(--my) * var(--d, 10) * 1px), 0); transition: transform .5s cubic-bezier(.22, .8, .3, 1); }

.pp-fl{ width: 100%; height: 100%; animation: pp-float 7s ease-in-out infinite; animation-delay: var(--fd, 0s); }

@keyframes pp-float{ 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-9px) rotate(.4deg); } }

.pp-lay--arch{ inset: 0 8% 7% 14%; --d: 6; }

.pp-arch{ position: relative; width: 100%; height: 100%; border-radius: 999px 999px 26px 26px; overflow: hidden; box-shadow: var(--shadow); outline: 1px solid var(--gold); outline-offset: 10px; background: var(--shade-strong); }

.pp-arch .pp-par{ position: absolute; inset: -8% 0; }

.pp-lay--card{ width: 40%; left: 0; bottom: 0; --d: 18; --fd: -2s; }

.pp-card{ aspect-ratio: 3 / 4; border: 7px solid var(--surface); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow); transform: rotate(-5deg); background: var(--surface); }

.pp-lay--round{ width: 29%; right: 0; top: 7%; --d: 24; --fd: -4s; }

.pp-round{ aspect-ratio: 1; border: 6px solid var(--surface); border-radius: 50%; overflow: hidden; box-shadow: var(--shadow); }

.pp-lay--seal{ width: 112px; right: 3%; bottom: 3%; --d: 30; }

.pp-seal{ position: relative; width: 112px; height: 112px; display: grid; place-items: center; border-radius: 50%; background: var(--btn-bg); color: var(--btn-fg); box-shadow: var(--shadow); }

.pp-seal svg{ position: absolute; inset: 0; width: 100%; height: 100%; animation: pp-spin 22s linear infinite; }

.pp-seal text{ fill: currentColor; font: 600 8.6px var(--font-body); letter-spacing: .1em; text-transform: uppercase; }

.pp-seal b{ font-family: var(--font-head); font-size: 1.7rem; font-weight: 500; }

@keyframes pp-spin{ to { transform: rotate(360deg); } }

.pp-chip{ display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); font-size: .82rem; font-weight: 600; color: var(--ink); white-space: nowrap; }

.pp-chip i{ color: var(--gold-text); }

.pp-lay--c1{ left: 2%; top: 20%; --d: 34; --fd: -1s; }

.pp-lay--c2{ right: 4%; top: 52%; --d: 28; --fd: -3s; }

.pp-lay--c1, .pp-lay--c2{ width: auto; }


.pp-scroll{ position: absolute; inset-inline-start: 50%; bottom: 14px; display: grid; justify-items: center; gap: 6px; font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); transform: translateX(-50%); }

.pp-scroll i{ width: 1px; height: 30px; background: linear-gradient(var(--gold), transparent); animation: pp-drip 1.9s ease-in-out infinite; transform-origin: top; }

@keyframes pp-drip{ 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }


/* ----------------------------------------------------------- MARQUEE -- */
.pp-marq{ overflow: hidden; border-block: 1px solid var(--line); background: var(--surface); padding: 15px 0; }

.pp-marq__t{ display: flex; width: max-content; animation: pp-marq 38s linear infinite; }

.pp-marq:hover .pp-marq__t{ animation-play-state: paused; }

.pp-marq span{ display: inline-flex; align-items: center; gap: 28px; padding-inline-end: 28px; font-family: var(--font-head); font-style: italic; font-size: clamp(1.05rem, 1.6vw, 1.35rem); color: var(--ink); white-space: nowrap; }

.pp-marq span::after{ content: ""; width: 7px; height: 7px; background: var(--gold); transform: rotate(45deg); }

@keyframes pp-marq{ to { transform: translateX(-50%); } }

@keyframes pp-marq-r{ to { transform: translateX(50%); } }


/* --------------------------------------------------- STICKY NAVIGATOR -- */
.pp-nav{ position: sticky; top: var(--h); z-index: 900; background: color-mix(in srgb, var(--bg) 90%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); transition: box-shadow .3s; }

.pp-nav.is-stuck{ box-shadow: 0 10px 30px var(--shade-strong); }

.pp-nav__in{ width: min(100% - 2 * var(--pad), var(--wrap)); margin-inline: auto; display: flex; align-items: center; gap: 8px; padding: 10px 0; overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; }

.pp-nav__in::-webkit-scrollbar{ display: none; }

.pp-nav__label{ flex: none; margin-inline-end: 10px; padding-inline-end: 18px; border-inline-end: 1px solid var(--line); font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-text); }

.pp-nav a{ flex: none; display: inline-flex; align-items: center; gap: 10px; padding: 5px 16px 5px 5px; border: 1px solid transparent; border-radius: 999px; font-size: .9rem; font-weight: 600; color: var(--muted); white-space: nowrap; transition: background .3s, color .3s, border-color .3s; }

.pp-nav a:hover{ border-color: var(--line); color: var(--ink); }

.pp-nav a img{ width: 38px; height: 38px; border-radius: 50%; object-fit: cover; transition: transform .4s; }

.pp-nav a:hover img{ transform: scale(1.08) rotate(-4deg); }

.pp-nav a.is-active{ background: var(--ink); color: var(--bg); border-color: var(--ink); }

.pp-nav a.pp-nav__suite{ padding: 5px 16px; }

/* centre the row; auto margins keep every item reachable when it scrolls on small screens */
.pp-nav__in > :first-child{ margin-inline-start: auto; }
.pp-nav__in > :last-child{ margin-inline-end: auto; }

.pp-nav__prog{ position: absolute; inset-inline: 0; bottom: -1px; height: 2px; background: var(--gold); transform-origin: left; transform: scaleX(var(--p, 0)); }


/* ------------------------------------------------------------ INTRO -- */
.pp-intro{ padding: clamp(56px, 8vw, 104px) 0 clamp(8px, 2vw, 24px); text-align: center; }

.pp-intro .pp-eyebrow::after{ content: ""; width: 38px; height: 1px; background: var(--gold); }

.pp-intro .pp-h2{ margin: 16px auto 18px; max-width: 18ch; }

.pp-intro p{ max-width: 58ch; margin-inline: auto; line-height: 1.8; color: var(--muted); }


/* ------------------------------------------------------ THEME SECTIONS -- */
.pt{ --pt-bg: var(--bg); position: relative; padding: clamp(56px, 8vw, 112px) 0; background: var(--pt-bg); }

.pt--alt{ --pt-bg: var(--surface); }

.pt[data-pth="classic"]{ --ta: #9a2f4c; --shape: 999px 999px 22px 22px; }

.pt[data-pth="floral"]{ --ta: #c98a93; --shape: 50% 50% 46% 46% / 62% 62% 38% 38%; }

.pt[data-pth="minimal"]{ --ta: #9c8b66; --shape: 2px; }

.pt[data-pth="royal"]{ --ta: #4d6aa5; --shape: 999px 999px 22px 22px; }

.pt[data-pth="rustic"]{ --ta: #b58b63; --shape: 26px; }

.pt[data-pth="destination"]{ --ta: #2f8a8b; --shape: 220px 22px 220px 22px; }


.pt__grid{ display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 100px); align-items: center; }

.pt--flip .pt__media{ order: 2; }


.pt__media{ position: relative; width: min(100%, 540px); aspect-ratio: 4 / 5; margin-inline: auto; }

.pt__num{ position: absolute; z-index: 0; top: -.12em; inset-inline-start: -.08em; font-family: var(--font-head); font-size: clamp(6rem, 13vw, 11rem); line-height: 1; color: transparent; -webkit-text-stroke: 1px var(--ta); opacity: .55; pointer-events: none; }

.pt__main{ position: absolute; z-index: 1; inset: 0 9% 11% 0; border-radius: var(--shape); overflow: hidden; background: var(--shade-strong); box-shadow: var(--shadow); }

.pt[data-pth="royal"] .pt__main, .pt[data-pth="classic"] .pt__main{ outline: 1px solid var(--gold); outline-offset: 9px; }

.pt__par{ position: absolute; inset: -9% 0; }

.pt__main img{ transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }

.pt__main:hover img{ transform: scale(1.06); }

.pt__detail{ position: absolute; z-index: 2; inset-inline-end: 0; bottom: 0; width: 42%; aspect-ratio: 1; border: 8px solid var(--pt-bg); border-radius: 20px; overflow: hidden; box-shadow: var(--shadow); transition: transform .5s cubic-bezier(.2, .8, .3, 1); }

.pt__detail:hover{ transform: rotate(-3deg) scale(1.04); }

.pt__chip{ position: absolute; z-index: 3; inset-inline-start: -2%; bottom: 26%; }

.pt__chip .pp-chip{ animation: pp-float 6s ease-in-out infinite; }


/* clip-path unveil (only when JS is running) */
.pp-js .pt__main{ clip-path: inset(0 0 100% 0); transition: clip-path 1.3s cubic-bezier(.77, 0, .18, 1); }

.pp-js .pt__main img{ transform: scale(1.25); }

.pp-js .pt__media.is-in .pt__main{ clip-path: inset(0 0 0 0); }

.pp-js .pt__media.is-in .pt__main img{ transform: scale(1); }

.pp-js .pt__media.is-in .pt__main:hover img{ transform: scale(1.06); }

.pp-js .pt__detail, .pp-js .pt__chip{ opacity: 0; transform: translateY(26px) scale(.94); transition: opacity .8s .7s, transform .9s .7s cubic-bezier(.2, .8, .3, 1); }

.pp-js .pt__media.is-in .pt__detail, .pp-js .pt__media.is-in .pt__chip{ opacity: 1; transform: none; }


.pt__copy{ display: grid; gap: 20px; align-content: center; }

.pt__kicker{ display: flex; align-items: center; gap: 14px; font-size: .78rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-text); }

.pt__kicker::before{ content: ""; width: 38px; height: 1px; background: var(--gold); }

.pt__title{ font-family: var(--font-head); font-weight: 500; color: var(--ink); font-size: clamp(2.6rem, 5vw, 4.6rem); line-height: 1; letter-spacing: -.03em; }

.pt__tag{ font-family: var(--font-head); font-style: italic; font-size: clamp(1.1rem, 1.7vw, 1.4rem); color: var(--gold-text); }

.pt__text{ max-width: 52ch; line-height: 1.8; color: var(--muted); }


.pt__meta{ display: grid; gap: 0; margin: 4px 0; border-block: 1px solid var(--line); }

.pt__meta > div{ display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 14px; align-items: center; padding: 13px 0; }

.pt__meta > div + div{ border-top: 1px dashed var(--line); }

.pt__meta dt{ font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }

.pt__meta dd{ font-size: .95rem; color: var(--ink); font-weight: 500; }

.pt__sw{ display: flex; gap: 8px; }

.pt__sw i{ width: 28px; height: 28px; border-radius: 50%; background: var(--c); border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--line); transition: transform .3s; }

.pt__sw i:hover{ transform: translateY(-4px) scale(1.12); }


.pt__pieces{ display: grid; }

.pt__pieces li{ display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 13px 8px; border-bottom: 1px solid var(--line); transition: background .3s, padding .3s; }

.pt__pieces li:hover{ background: var(--shade); padding-inline: 16px; }

.pt__pieces .ic{ width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--ta) 16%, transparent); color: var(--ink); font-size: .9rem; transition: background .3s, color .3s; }

.pt__pieces li:hover .ic{ background: var(--ta); color: #fff; }

.pt__pieces strong{ display: block; font-size: .98rem; color: var(--ink); }

.pt__pieces small{ font-size: .84rem; color: var(--muted); }

.pt__pieces .ar{ color: var(--gold-text); transition: transform .3s; }

.pt__pieces li:hover .ar{ transform: translateX(5px); }

.pt__actions{ display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; }


/* -------------------------------------------------------------- SUITE -- */
.ps{ padding: clamp(64px, 9vw, 120px) 0; background: var(--bg); border-top: 1px solid var(--line); }

.ps__head{ display: flex; flex-wrap: wrap; gap: 24px 48px; align-items: end; justify-content: space-between; margin-bottom: clamp(28px, 4vw, 48px); }

.ps__head .pp-h2{ margin-top: 14px; max-width: 14ch; }

.ps__head p{ max-width: 44ch; line-height: 1.8; color: var(--muted); }

.ps__bar{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 30px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }

.ps__filters{ display: flex; flex-wrap: wrap; gap: 10px; }

.ps__f{ min-height: 42px; padding: 8px 20px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink); font: 600 .88rem var(--font-body); cursor: pointer; transition: background .3s, color .3s, border-color .3s, transform .3s; }

.ps__f:hover{ border-color: var(--gold); transform: translateY(-2px); }

.ps__f[aria-pressed="true"]{ background: var(--btn-bg); color: var(--btn-fg); border-color: var(--btn-bg); }

.ps__f:focus-visible, .pp-nav a:focus-visible{ outline: 2px solid var(--gold); outline-offset: 3px; }

.ps__count{ font-size: .88rem; color: var(--muted); }

.ps__count b{ font-family: var(--font-head); font-size: 1.4rem; font-weight: 500; color: var(--ink); }


.ps__grid{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }

.ps__item[hidden]{ display: none; }

.ps__in{ height: 100%; }

.ps__card{ display: grid; gap: 14px; height: 100%; color: inherit; }

.ps__img{ position: relative; aspect-ratio: 4 / 5; border-radius: 18px; overflow: hidden; background: var(--shade-strong); box-shadow: 0 8px 22px var(--shade-strong); transition: box-shadow .4s, transform .5s cubic-bezier(.2, .8, .3, 1); }

.ps__art{ background: var(--art, var(--shade-strong)); }

.ps__art svg{ position: absolute; inset: 0; width: 100%; height: 100%; transition: transform 1s cubic-bezier(.2, .7, .2, 1); }

.ps__art text{ font-family: var(--font-head); }

.ps__card:hover .ps__art svg{ transform: scale(1.06); }

.ps__img img{ transition: transform 1s cubic-bezier(.2, .7, .2, 1); }

.ps__card:hover .ps__img{ transform: translateY(-6px); box-shadow: var(--shadow); }

.ps__card:hover .ps__img img{ transform: scale(1.08); }

.ps__img::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 55%, rgba(30, 8, 16, .5)); opacity: 0; transition: opacity .4s; }

.ps__card:hover .ps__img::after{ opacity: 1; }

.ps__badge{ position: absolute; z-index: 2; inset-block-start: 12px; inset-inline-start: 12px; padding: 5px 12px; border-radius: 999px; background: color-mix(in srgb, var(--surface) 92%, transparent); font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }

.ps__go{ position: absolute; z-index: 2; inset-block-end: 12px; inset-inline-end: 12px; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: var(--surface); color: var(--ink); opacity: 0; transform: translateY(10px); transition: opacity .35s, transform .35s; }

.ps__card:hover .ps__go, .ps__card:focus-visible .ps__go{ opacity: 1; transform: none; }

.ps__card h3{ font-family: var(--font-head); font-weight: 500; font-size: 1.28rem; color: var(--ink); line-height: 1.2; }

.ps__card p{ margin-top: 4px; font-size: .9rem; line-height: 1.6; color: var(--muted); }

.ps__card:focus-visible{ outline: 2px solid var(--gold); outline-offset: 6px; border-radius: 18px; }


/* ----------------------------------------------------------- RESPONSIVE -- */
@media (max-width: 1100px) {
  .ps__grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .pp-hero__grid{ grid-template-columns: 1fr; min-height: 0; }
  .pp-scroll{ display: none; }
  .pp-stage{ width: min(100%, 460px); }
  .pt__grid{ grid-template-columns: 1fr; }
  .pt--flip .pt__media{ order: 0; }
  .pt__media{ width: min(100%, 460px); }
}
@media (max-width: 760px) {
  .ps__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pp-nav__label{ display: none; }
}
@media (max-width: 480px) {
  .pp-lay--seal{ width: 84px; }
  .pp-seal{ width: 84px; height: 84px; }
  .pp-seal b{ font-size: 1.3rem; }
  .pp-chip{ padding: 7px 12px; font-size: .74rem; }
  .pt__meta > div{ grid-template-columns: 1fr; gap: 6px; }
  .ps__card h3{ font-size: 1.1rem; }
  .ps__card p{ font-size: .84rem; }
  .ps__go{ display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pp-page *, .pp-page *::before, .pp-page *::after{ animation: none !important; transition-duration: .01ms !important; }
  .pp-js .pt__main, .pp-js .pt__detail, .pp-js .pt__chip, .pp-js .pt__main img{ clip-path: none !important; opacity: 1 !important; transform: none !important; }
  .pp-hero h1 em::after{ transform: scaleX(1); }
}


/* =====================================================================
   SESSION 4 — Finishes & paper, and the process
   ===================================================================== */
.pf{ padding: clamp(64px, 9vw, 120px) 0; background: var(--surface); border-top: 1px solid var(--line); }

.pf__grid{ display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); align-items: start; }

.pf__side{ position: sticky; top: calc(var(--h) + 96px); display: grid; gap: 22px; }

.pf__side .pp-h2{ max-width: 12ch; }

.pf__side > p{ max-width: 42ch; line-height: 1.8; color: var(--muted); }


.pf__tabs{ display: grid; margin-top: 6px; border-top: 1px solid var(--line); }

.pf__tab{ position: relative; display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 14px; align-items: center; width: 100%; padding: 16px 6px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--muted); font: inherit; text-align: start; cursor: pointer; transition: color .3s, padding .35s cubic-bezier(.2, .8, .3, 1), background .3s; }

.pf__tab:hover{ color: var(--ink); background: var(--shade); }

.pf__tab:focus-visible{ outline: 2px solid var(--gold); outline-offset: -2px; }

.pf__n{ font-family: var(--font-head); font-size: 1.05rem; color: var(--gold-text); }

.pf__t{ font-family: var(--font-head); font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.15; }

.pf__t small{ display: block; margin-top: 3px; font-family: var(--font-body); font-size: .8rem; color: var(--muted); letter-spacing: .01em; }

.pf__ar{ opacity: 0; transform: translateX(-8px); color: var(--gold-text); transition: opacity .3s, transform .3s; }

.pf__tab[aria-selected="true"]{ color: var(--ink); padding-inline-start: 18px; }

.pf__tab[aria-selected="true"] .pf__ar{ opacity: 1; transform: none; }

.pf__bar{ position: absolute; inset-inline: 0; bottom: -1px; height: 2px; background: var(--gold); transform-origin: left; transform: scaleX(0); }

.pf__tab[aria-selected="true"] .pf__bar{ animation: pf-fill 7s linear forwards; }

.pf__tabs:hover .pf__bar, .pf__tabs:focus-within .pf__bar, .pf__tabs.is-paused .pf__bar{ animation-play-state: paused; }

.pf__tabs.is-static .pf__tab[aria-selected="true"] .pf__bar{ animation: none; transform: scaleX(1); }

@keyframes pf-fill{ to { transform: scaleX(1); } }


.pf__stage{ display: grid; }

.pf__panel{ grid-area: 1 / 1; display: grid; gap: 26px; align-content: start; opacity: 0; visibility: hidden; transform: translateY(18px); transition: opacity .6s, transform .7s cubic-bezier(.2, .8, .3, 1), visibility 0s .6s; }

.pf__panel.is-on{ opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }

.pf__photo{ position: relative; aspect-ratio: 16 / 11; border-radius: 26px; overflow: hidden; background: var(--shade-strong); box-shadow: var(--shadow); }

.pf__photo img{ transform: scale(1.08); transition: transform 1.8s cubic-bezier(.2, .7, .2, 1); }

.pf__panel.is-on .pf__photo img{ transform: scale(1); }

.pf__photo::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(30, 8, 16, .35), transparent 55%); }


/* live finish sample */
.pf__sample{ position: absolute; z-index: 2; inset-inline-start: clamp(14px, 3vw, 34px); inset-block-end: clamp(14px, 3vw, 30px); width: min(44%, 250px); aspect-ratio: 4 / 5; display: grid; place-content: center; justify-items: center; gap: 8px; padding: 14px; text-align: center; color: #4A1025; filter: drop-shadow(0 14px 22px rgba(30, 8, 16, .45)); }

.pf__sample::before{ content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(145deg, #FBF6EC, #F0E5D0); border-radius: 3px; }

.pf__sample small{ font-size: .56rem; letter-spacing: .26em; text-transform: uppercase; color: var(--gold-text); }

.pf__sample b{ font-family: var(--font-head); font-weight: 500; font-size: clamp(1.15rem, 2.4vw, 1.7rem); line-height: 1.1; }

.pf__sample i{ width: 38px; height: 1px; background: currentColor; opacity: .45; }

.pf__sample em{ font-family: var(--font-head); font-size: .8rem; color: #6c5540; }


.pf-foil b{ background: linear-gradient(100deg, #8F6A25 20%, #F6E3A5 38%, #C9A45C 50%, #FFF4CC 58%, #8F6A25 78%); background-size: 240% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: pf-sheen 3.6s ease-in-out infinite; }

.pf-foil i{ background: #C9A45C; opacity: 1; }

@keyframes pf-sheen{ 0% { background-position: 100% 0; } 100% { background-position: -40% 0; } }

.pf-press b{ color: #3a1a24; text-shadow: 0 1px 0 rgba(255, 255, 255, .85), 0 -1px 1px rgba(40, 10, 20, .55); letter-spacing: .01em; }

.pf-emboss b{ color: #EFE3CC; text-shadow: 1px 1px 1px rgba(255, 255, 255, .95), -1px -1px 2px rgba(110, 80, 40, .35); }

.pf-emboss i{ box-shadow: 1px 1px 1px #fff, -1px -1px 1px rgba(110, 80, 40, .3); background: #EFE3CC; opacity: 1; }

.pf-emboss small{ color: #d6c6a6; text-shadow: 1px 1px 0 #fff; }

.pf-deckle::before{ filter: url(#ppDeckle); border-radius: 0; }

.pf-seal-s{ align-content: center; }

.pf-seal-s::after{ content: ""; position: absolute; inset-inline: -6%; top: 56%; height: 22px; z-index: -1; background: linear-gradient(#2d0a17, #5a1b30 50%, #2d0a17); box-shadow: 0 2px 6px rgba(0, 0, 0, .3); }

.pf-seal-s .pf-wax{ position: absolute; inset-inline-start: 50%; top: 56%; width: 58px; height: 58px; margin: -18px 0 0 -29px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #b0314f, #6e1230 60%, #4a0b20); color: #f0cf8a; font-family: var(--font-head); font-size: 1.45rem; box-shadow: 0 5px 10px rgba(0, 0, 0, .4), inset 0 0 0 4px rgba(255, 255, 255, .08); }


.pf__copy{ display: grid; gap: 14px; }

.pf__copy h3{ font-family: var(--font-head); font-weight: 500; font-size: clamp(1.8rem, 3vw, 2.5rem); line-height: 1.05; letter-spacing: -.02em; color: var(--ink); }

.pf__copy > p{ max-width: 56ch; line-height: 1.8; color: var(--muted); }

.pf__meta{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-block: 1px solid var(--line); margin-top: 6px; }

.pf__meta > div{ padding: 14px 16px; }

.pf__meta > div + div{ border-inline-start: 1px dashed var(--line); }

.pf__meta dt{ font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }

.pf__meta dd{ margin: 6px 0 0; font-size: .92rem; font-weight: 500; color: var(--ink); line-height: 1.45; }

.pf__chips{ display: flex; flex-wrap: wrap; gap: 6px; }

.pf__chips a{ padding: 3px 11px; border: 1px solid var(--line); border-radius: 999px; font-size: .8rem; font-weight: 600; color: var(--ink); transition: background .25s, color .25s, border-color .25s; }

.pf__chips a:hover{ background: var(--ink); color: var(--bg); border-color: var(--ink); }


/* process */
.ph{ padding: clamp(64px, 9vw, 120px) 0; background: var(--bg); border-top: 1px solid var(--line); }

.ph__head{ max-width: 640px; margin: 0 auto clamp(40px, 6vw, 72px); text-align: center; display: grid; gap: 16px; justify-items: center; }

.ph__head p{ line-height: 1.8; color: var(--muted); }

.ph__steps{ margin: 0; padding: 0; list-style: none; --lp: 0; position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 32px); counter-reset: ph; }

.ph__track{ position: absolute; inset-inline: 12.5%; top: 34px; height: 2px; background: var(--line); }

.ph__track i{ position: absolute; inset: 0; background: var(--gold); transform-origin: left; transform: scaleX(var(--lp)); }

.ph__step{ position: relative; display: grid; justify-items: center; gap: 14px; text-align: center; padding: 0 6px; }

.ph__dot{ position: relative; z-index: 1; width: 68px; height: 68px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--muted); font-size: 1.25rem; transition: background .5s, color .5s, border-color .5s, transform .6s cubic-bezier(.2, .8, .3, 1), box-shadow .5s; }

.ph__step.is-on .ph__dot{ background: var(--btn-bg); color: var(--btn-fg); border-color: var(--btn-bg); transform: scale(1.08); box-shadow: 0 0 0 8px color-mix(in srgb, var(--gold) 22%, transparent); }

.ph__no{ font-size: .72rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-text); }

.ph__step h3{ font-family: var(--font-head); font-weight: 500; font-size: 1.4rem; color: var(--ink); line-height: 1.15; }

.ph__step p{ max-width: 26ch; font-size: .93rem; line-height: 1.7; color: var(--muted); }

.ph__tag{ display: inline-block; padding: 4px 12px; border-radius: 999px; background: var(--shade-strong); font-size: .76rem; font-weight: 600; color: var(--ink); }

.ph__step > :not(.ph__dot){ opacity: .45; transform: translateY(6px); transition: opacity .6s .1s, transform .6s .1s; }

.ph__step.is-on > :not(.ph__dot){ opacity: 1; transform: none; }
@media (max-width: 960px) {
  .pf__grid{ grid-template-columns: 1fr; }
  .pf__side{ position: static; }
  .pf__side .pp-h2{ max-width: none; }
}
@media (max-width: 760px) {
  .pf__meta{ grid-template-columns: 1fr; }
  .pf__meta > div + div{ border-inline-start: 0; border-top: 1px dashed var(--line); }
  .ph__steps{ grid-template-columns: 1fr; gap: 28px; padding-inline-start: 0; }
  .ph__track{ inset-inline: auto; inset-inline-start: 33px; top: 34px; bottom: 34px; width: 2px; height: auto; }
  .ph__track i{ transform-origin: top; transform: scaleY(var(--lp)); }
  .ph__step{ grid-template-columns: 68px minmax(0, 1fr); justify-items: start; text-align: start; column-gap: 18px; row-gap: 6px; align-items: start; }
  .ph__dot{ grid-row: 1 / span 4; }
  .ph__step p{ max-width: none; }
}
@media (max-width: 480px) {
  .pf__sample{ width: 52%; }
}
@media (prefers-reduced-motion: reduce) {
  .pf__panel{ transition: none; }
  .pf__bar{ animation: none !important; }
  .ph__step > :not(.ph__dot){ opacity: 1; transform: none; }
}

/* ----------------------------------------------------------
   CUSTOM DESIGN HERO — full-bleed photographic cover + centered copy
   Scoped to Custom Design page only.
---------------------------------------------------------- */
.cd-page .cd-hero{
  min-height: clamp(560px, 76vh, 790px);
  display: flex;
  align-items: center;
  padding: clamp(34px, 5vw, 68px) 0 clamp(44px, 6vw, 76px);
  background:
    linear-gradient(180deg, rgba(35, 25, 35, .54) 0%, rgba(35, 25, 35, .64) 48%, rgba(35, 25, 35, .76) 100%),
    url('../images/home1-minimal.png') center 48% / cover no-repeat;
  isolation: isolate;
}
.cd-page .cd-hero > .cd-w{ position: relative; z-index: 1; width: min(100% - 40px, 1120px); margin-inline: auto; }
.cd-page .cd-crumb{ justify-content: center; margin-bottom: clamp(30px, 5vh, 54px); color: rgba(255,255,255,.78); }
.cd-page .cd-crumb a{ color: rgba(255,255,255,.78); }
.cd-page .cd-crumb a:hover{ color: #F5E9B9; }
.cd-page .cd-hero__grid{ display: block; }
.cd-page .cd-hero__copy{ max-width: 850px; margin-inline: auto; text-align: center; }
.cd-page .cd-hero__copy .cd-eyebrow{ justify-content: center; color: #F5E9B9; }
.cd-page .cd-hero__copy .cd-eyebrow::before{ background: #F5E9B9; }
.cd-page .cd-hero h1{ max-width: 850px; margin: 22px auto 24px !important; color: #fffaf4; font-size: clamp(3rem, 7vw, 6.1rem); line-height: .99; }
.cd-page .cd-hero h1 em{ color: #F5E9B9; }
.cd-page .cd-hero h1 em::after{ background: linear-gradient(90deg, #F5E9B9, rgba(245,233,185,.1)); }
.cd-page .cd-hero .cd-lead{ max-width: 650px; margin-inline: auto; color: rgba(255,250,244,.88); font-size: clamp(1rem, 1.5vw, 1.18rem); }
.cd-page .cd-hero .cd-actions{ justify-content: center; margin-top: 30px; }
.cd-page .cd-hero .cd-facts{ justify-content: center; max-width: 760px; margin: 42px auto 0; padding-top: 24px; border-top-color: rgba(255,250,244,.32); }
.cd-page .cd-hero .cd-facts li{ text-align: center; padding-inline: 18px; border-inline-start-color: #F5E9B9; }
.cd-page .cd-hero .cd-facts li:first-child{ border-inline-start: 0; }
.cd-page .cd-hero .cd-facts strong{ color: #fffaf4; }
.cd-page .cd-hero .cd-facts span{ color: rgba(255,250,244,.78); }
.cd-page .cd-hero__art{ display: none !important; }
@media (max-width: 640px){
  .cd-page .cd-hero{ min-height: 0; padding: 34px 0 48px; background-position: 55% center; }
  .cd-page .cd-hero > .cd-w{ width: min(100% - 28px, 1120px); }
  .cd-page .cd-crumb{ margin-bottom: 34px; font-size: .78rem; }
  .cd-page .cd-hero h1{ font-size: clamp(2.65rem, 12vw, 4rem); margin: 18px auto 20px !important; }
  .cd-page .cd-hero .cd-actions{ flex-direction: column; align-items: stretch; max-width: 300px; margin-inline: auto; }
  .cd-page .cd-hero .cd-actions .btn{ justify-content: center; }
  .cd-page .cd-hero .cd-facts{ gap: 16px 0; margin-top: 32px; padding-top: 20px; }
  .cd-page .cd-hero .cd-facts li{ flex: 1 1 30%; padding-inline: 8px; }
  .cd-page .cd-hero .cd-facts strong{ font-size: 1.25rem; }
  .cd-page .cd-hero .cd-facts span{ font-size: .72rem; }
}
@media (prefers-reduced-motion: reduce){ .cd-page .cd-hero__copy > *{ animation: none !important; } }

/* CUSTOM DESIGN HERO — editorial split composition (replaces full-cover version) */
.cd-page .cd-hero{
  min-height: unset;
  display:block;
  padding: clamp(28px, 4vw, 54px) 0 clamp(58px, 7vw, 88px);
  background:
    radial-gradient(ellipse at 86% 46%, rgba(215,182,201,.28), transparent 42%),
    linear-gradient(115deg, #FCF7EE 0%, #F5E9B9 100%);
  isolation:isolate;
}
.cd-page .cd-hero > .cd-w{width:min(100% - 48px, 1220px);margin-inline:auto}
.cd-page .cd-crumb{justify-content:flex-start;margin-bottom:clamp(22px,3vw,38px);color:#786575}
.cd-page .cd-crumb a{color:#786575}
.cd-page .cd-crumb a:hover{color:#8B607D}
.cd-page .cd-hero__grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(28px,5vw,76px);align-items:center}
.cd-page .cd-hero__copy{max-width:590px;margin:0;text-align:left;position:relative;z-index:2}
.cd-page .cd-hero__copy .cd-eyebrow{justify-content:flex-start;color:#8B607D;letter-spacing:.18em}
.cd-page .cd-hero__copy .cd-eyebrow::before{background:#8B607D}
.cd-page .cd-hero h1{max-width:600px;margin:18px 0 22px!important;color:#392D3A;font-size:clamp(2.8rem,5.3vw,5.3rem);line-height:1.02;letter-spacing:-.04em}
.cd-page .cd-hero h1 em{color:#8B607D}
.cd-page .cd-hero h1 em::after{background:linear-gradient(90deg,#8B607D,rgba(139,96,125,.12))}
.cd-page .cd-hero .cd-lead{max-width:47ch;margin:0;color:#685968;font-size:clamp(1rem,1.25vw,1.12rem);line-height:1.8}
.cd-page .cd-hero .cd-actions{justify-content:flex-start;margin-top:28px}
.cd-page .cd-hero .cd-facts{justify-content:flex-start;max-width:100%;margin:34px 0 0;padding-top:20px;border-top-color:rgba(57,45,58,.2);gap:16px 24px}
.cd-page .cd-hero .cd-facts li{text-align:left;padding-inline:12px;border-inline-start-color:#8B607D}
.cd-page .cd-hero .cd-facts li:first-child{border-inline-start:0;padding-inline-start:0}
.cd-page .cd-hero .cd-facts strong{color:#392D3A}
.cd-page .cd-hero .cd-facts span{color:#756776}
.cd-page .cd-hero__art{display:block!important;min-width:0;position:relative}
.cd-page .cd-art{width:min(100%,650px);filter:drop-shadow(0 22px 26px rgba(57,45,58,.10));transform:rotate(1.5deg)}
.cd-page .cd-hero__art::before{content:"MADE WITH MEANING";position:absolute;z-index:0;right:-1%;top:7%;writing-mode:vertical-rl;font-size:.65rem;letter-spacing:.25em;color:#8B607D;opacity:.8}
.cd-page .cd-art{z-index:1}
@media(max-width:800px){
 .cd-page .cd-hero__grid{grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:24px}
 .cd-page .cd-hero h1{font-size:clamp(2.45rem,6vw,4rem)}
 .cd-page .cd-hero .cd-facts{gap:14px 16px}
 .cd-page .cd-hero .cd-facts li{padding-inline:9px}
}
@media(max-width:640px){
 .cd-page .cd-hero{padding:25px 0 48px}
 .cd-page .cd-hero > .cd-w{width:min(100% - 30px,1220px)}
 .cd-page .cd-crumb{margin-bottom:22px;font-size:.78rem}
 .cd-page .cd-hero__grid{grid-template-columns:1fr;gap:16px}
 .cd-page .cd-hero__copy{max-width:100%;text-align:center}
 .cd-page .cd-hero__copy .cd-eyebrow{justify-content:center}
 .cd-page .cd-hero h1{font-size:clamp(2.55rem,11vw,3.8rem);margin:16px auto 18px!important}
 .cd-page .cd-hero .cd-lead{margin-inline:auto;max-width:40ch;font-size:.98rem}
 .cd-page .cd-hero .cd-actions{justify-content:center;flex-direction:column;align-items:stretch;max-width:310px;margin:24px auto 0}
 .cd-page .cd-hero .cd-actions .btn{justify-content:center}
 .cd-page .cd-hero .cd-facts{justify-content:center;margin:24px auto 0;padding-top:16px;gap:12px 0}
 .cd-page .cd-hero .cd-facts li{flex:1 1 30%;text-align:center;padding-inline:7px}
 .cd-page .cd-hero .cd-facts li:first-child{padding-inline:7px}
 .cd-page .cd-hero .cd-facts strong{font-size:1.2rem}
 .cd-page .cd-hero .cd-facts span{font-size:.7rem}
 .cd-page .cd-hero__art{width:min(100%,430px);margin-inline:auto}
 .cd-page .cd-art{width:100%;transform:none}
 .cd-page .cd-hero__art::before{right:0;font-size:.55rem}
}

/* CUSTOM DESIGN HERO — Home 1 inspired, with a bespoke studio composition */
.cd-page .cd-hero{
  position:relative; overflow:hidden; min-height:0; padding:clamp(42px,6vw,78px) 0 clamp(54px,7vw,92px);
  background:linear-gradient(115deg,#FCF7EE 0%,#F8F0E5 54%,#F5E9B9 100%);
  isolation:isolate;
}
.cd-page .cd-hero::before{content:"";position:absolute;z-index:-1;width:clamp(260px,38vw,560px);aspect-ratio:1;border:1px solid rgba(139,96,125,.22);border-radius:50%;right:-8%;top:-28%;box-shadow:0 0 0 34px rgba(215,182,201,.10),0 0 0 74px rgba(215,182,201,.07)}
.cd-page .cd-hero::after{content:"";position:absolute;inset-inline:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,#8B607D66,transparent)}
.cd-page .cd-hero > .cd-w{position:relative;z-index:1;width:min(100% - 48px,1220px);margin-inline:auto}
.cd-page .cd-crumb{justify-content:flex-start;margin:0 0 clamp(26px,3.4vw,42px);color:#786575;font-size:.82rem}
.cd-page .cd-crumb a{color:#786575;text-decoration:none}
.cd-page .cd-crumb a:hover{color:#8B607D}
.cd-page .cd-hero__grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(24px,5vw,72px);align-items:center}
.cd-page .cd-hero__copy{position:relative;z-index:2;max-width:590px;margin:0;text-align:left}
.cd-page .cd-hero__copy .cd-eyebrow{display:flex;justify-content:flex-start;align-items:center;gap:10px;color:#8B607D;font-size:.76rem;font-weight:700;letter-spacing:.19em;text-transform:uppercase}
.cd-page .cd-hero__copy .cd-eyebrow::before{content:"";display:inline-block;width:28px;height:1px;background:#8B607D}
.cd-page .cd-hero h1{max-width:610px;margin:20px 0 22px!important;color:#392D3A;font-family:var(--font-head,"Playfair Display",serif);font-size:clamp(2.8rem,5.2vw,5.2rem);line-height:1.02;letter-spacing:-.035em;text-wrap:balance}
.cd-page .cd-hero h1 em{color:#8B607D;font-weight:500}
.cd-page .cd-hero h1 em::after{background:linear-gradient(90deg,#8B607D,rgba(139,96,125,.12))}
.cd-page .cd-hero .cd-lead{max-width:47ch;margin:0;color:#685968;font-size:clamp(1rem,1.2vw,1.12rem);line-height:1.8}
.cd-page .cd-hero .cd-actions{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:12px;margin-top:27px}
.cd-page .cd-hero .cd-actions .btn{min-height:48px}
.cd-page .cd-hero .cd-facts{display:flex;flex-wrap:wrap;justify-content:flex-start;max-width:100%;gap:14px 0;margin:34px 0 0;padding:20px 0 0;border-top:1px solid rgba(57,45,58,.18)}
.cd-page .cd-hero .cd-facts li{flex:0 1 auto;text-align:left;padding:0 18px;border-inline-start:1px solid #8B607D;list-style:none}
.cd-page .cd-hero .cd-facts li:first-child{border-inline-start:0;padding-inline-start:0}
.cd-page .cd-hero .cd-facts strong{display:block;color:#392D3A;font-family:var(--font-head,"Playfair Display",serif);font-size:1.42rem;font-weight:600;line-height:1.2}
.cd-page .cd-hero .cd-facts span{display:block;margin-top:4px;color:#756776;font-size:.78rem;line-height:1.4}
.cd-page .cd-hero__art{display:block!important;position:relative;min-width:0;width:100%;max-width:640px;margin-inline:auto;isolation:isolate}
.cd-page .cd-hero__art::before{content:"A SUITE AS UNIQUE AS YOU";position:absolute;z-index:3;top:2%;right:0;writing-mode:vertical-rl;color:#8B607D;font-size:.62rem;letter-spacing:.22em;font-weight:700;opacity:.8}
.cd-page .cd-art{position:relative;z-index:1;width:min(100%,620px);margin-inline:auto;filter:drop-shadow(0 22px 25px rgba(57,45,58,.12));transform:rotate(1deg);animation:cdHeroFloat 7s ease-in-out infinite}
.cd-page .cd-art .cd-ly--main{transform:translate(-1%,0) rotate(-2deg)}
.cd-page .cd-art .cd-ly--b{transform:translate(5%,7%) rotate(7deg)}
.cd-page .cd-art .cd-ly--c{transform:translate(-8%,10%) rotate(-8deg)}
@keyframes cdHeroFloat{0%,100%{translate:0 0}50%{translate:0 -8px}}
@media(max-width:900px){
 .cd-page .cd-hero__grid{grid-template-columns:minmax(0,.98fr) minmax(0,1.02fr);gap:24px}
 .cd-page .cd-hero h1{font-size:clamp(2.55rem,5.5vw,4.25rem)}
 .cd-page .cd-hero .cd-facts li{padding-inline:12px}
 .cd-page .cd-hero__art::before{right:-2px;font-size:.54rem}
}
@media(max-width:680px){
 .cd-page .cd-hero{padding:28px 0 46px}
 .cd-page .cd-hero > .cd-w{width:min(100% - 30px,1220px)}
 .cd-page .cd-crumb{margin-bottom:22px;font-size:.76rem}
 .cd-page .cd-hero__grid{grid-template-columns:1fr;gap:16px}
 .cd-page .cd-hero__copy{max-width:560px;margin-inline:auto;text-align:center}
 .cd-page .cd-hero__copy .cd-eyebrow{justify-content:center}
 .cd-page .cd-hero h1{font-size:clamp(2.5rem,10.5vw,3.8rem);margin:15px auto 17px!important;max-width:15ch}
 .cd-page .cd-hero .cd-lead{margin-inline:auto;max-width:42ch;font-size:.98rem}
 .cd-page .cd-hero .cd-actions{justify-content:center;gap:10px;margin-top:22px}
 .cd-page .cd-hero .cd-actions .btn{justify-content:center}
 .cd-page .cd-hero__art{width:min(100%,450px);margin:0 auto}
 .cd-page .cd-art{width:100%;transform:none;animation:none}
 .cd-page .cd-hero__art::before{top:0;right:1%;font-size:.5rem}
 .cd-page .cd-hero .cd-facts{justify-content:center;gap:12px 0;margin:25px 0 0;padding-top:16px}
 .cd-page .cd-hero .cd-facts li{flex:1 1 30%;text-align:center;padding-inline:7px}
 .cd-page .cd-hero .cd-facts li:first-child{padding-inline:7px}
 .cd-page .cd-hero .cd-facts strong{font-size:1.18rem}
 .cd-page .cd-hero .cd-facts span{font-size:.7rem}
}
@media(max-width:390px){
 .cd-page .cd-hero .cd-actions{flex-direction:column;align-items:stretch;max-width:290px;margin-inline:auto}
 .cd-page .cd-hero .cd-actions .btn{width:100%}
 .cd-page .cd-hero .cd-facts li{padding-inline:5px}
 .cd-page .cd-hero .cd-facts span{font-size:.66rem}
}
@media(prefers-reduced-motion:reduce){.cd-page .cd-art{animation:none!important}}


/* CUSTOM DESIGN HERO — match Home 1 hero composition */
.cd-page .cd-hero{min-height:calc(100svh - var(--h));display:flex;align-items:center;padding-block:clamp(28px,4vw,56px);background:radial-gradient(52% 62% at 76% 46%,var(--glow),transparent 72%),radial-gradient(40% 40% at 4% 0%,var(--shade-strong),transparent 70%),var(--bg)}
.cd-page .cd-hero::before{width:clamp(260px,38vw,560px);aspect-ratio:1;border:1px solid rgba(139,96,125,.16);border-radius:50%;right:-8%;top:-28%;box-shadow:0 0 0 34px rgba(215,182,201,.08),0 0 0 74px rgba(215,182,201,.05)}
.cd-page .cd-hero > .cd-w{width:min(100% - 2 * var(--pad),var(--wrap));margin-inline:auto}
.cd-page .cd-crumb{justify-content:flex-start;margin:0 0 22px;color:var(--muted);font-size:.8rem}
.cd-page .cd-crumb a{color:var(--muted)}
.cd-page .cd-hero__grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);align-items:center;gap:clamp(24px,4vw,64px)}
.cd-page .cd-hero__copy{max-width:none;margin:0;text-align:left}
.cd-page .cd-hero__copy .cd-eyebrow{justify-content:flex-start;color: var(--gold-text)}
.cd-page .cd-hero__copy .cd-eyebrow::before{background:var(--gold)}
.cd-page .cd-hero h1{max-width:unset;margin:0!important;font-size:clamp(2.4rem,4.4vw,4rem);line-height:1.04;letter-spacing:-.01em;color:var(--ink)}
.cd-page .cd-hero h1 em{display:block;margin-top:.04em;color: var(--gold-text);font-weight:400}
.cd-page .cd-hero h1 em::after{background:linear-gradient(90deg,var(--gold),transparent)}
.cd-page .cd-hero .cd-lead{max-width:50ch;margin:14px 0 0;color:var(--muted);font-size:1.0625rem;line-height:1.7}
.cd-page .cd-hero .cd-actions{justify-content:flex-start;gap:12px;margin-top:22px}
.cd-page .cd-hero .cd-facts{justify-content:flex-start;max-width:100%;gap:14px clamp(18px,3vw,36px);margin:24px 0 0;padding-top:0;border-top:0}
.cd-page .cd-hero .cd-facts li{flex:0 1 auto;text-align:left;padding-inline-start:14px;border-inline-start:2px solid var(--gold)}
.cd-page .cd-hero .cd-facts li:first-child{border-inline-start:2px solid var(--gold);padding-inline-start:14px}
.cd-page .cd-hero .cd-facts strong{color:var(--ink);font-size:1.375rem}
.cd-page .cd-hero .cd-facts span{color:var(--muted);font-size:.8125rem}
.cd-page .cd-hero__art{display:block!important;width:min(100%,540px);max-width:540px;margin-inline:auto;position:relative;min-width:0}
.cd-page .cd-hero__art::before{display:none}
.cd-page .cd-hero__art .stage{width:100%;max-width:540px}
.cd-page .cd-hero__art .stage__in{aspect-ratio:1/1.06}
@media(max-width:900px){.cd-page .cd-hero{min-height:0}.cd-page .cd-hero__grid{grid-template-columns:minmax(0,1fr) minmax(0,.95fr);gap:24px}.cd-page .cd-hero h1{font-size:clamp(2.3rem,5vw,3.6rem)}}
@media(max-width:680px){.cd-page .cd-hero{padding:28px 0 42px}.cd-page .cd-hero > .cd-w{width:min(100% - 30px, var(--wrap))}.cd-page .cd-crumb{margin-bottom:18px}.cd-page .cd-hero__grid{grid-template-columns:1fr;gap:18px}.cd-page .cd-hero__copy{text-align:center}.cd-page .cd-hero__copy .cd-eyebrow{justify-content:center}.cd-page .cd-hero h1{font-size:clamp(2.5rem,10.5vw,3.8rem);margin:0 auto!important}.cd-page .cd-hero .cd-lead{margin-inline:auto;font-size:.98rem}.cd-page .cd-hero .cd-actions{justify-content:center;flex-direction:row;flex-wrap:wrap}.cd-page .cd-hero .cd-facts{justify-content:center;gap:14px 10px;margin-top:22px}.cd-page .cd-hero .cd-facts li{flex:1 1 28%;text-align:center;padding-inline:7px}.cd-page .cd-hero .cd-facts li:first-child{padding-inline:7px}.cd-page .cd-hero__art{width:min(100%,430px)}.cd-page .cd-hero__art .stage{width:100%}}
@media(max-width:390px){.cd-page .cd-hero .cd-actions{flex-direction:column;align-items:stretch;max-width:290px;margin-inline:auto}.cd-page .cd-hero .cd-actions .btn{width:100%}}

/* CUSTOM DESIGN HERO — full-bleed photo with readable left-side copy */
.cd-page .cd-hero{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:clamp(570px,calc(100svh - var(--h)),760px);
  padding:clamp(30px,4vw,54px) 0;
  background-image:url('../images/home2-couple.jpg');
  background-size:cover;background-position:center 42%;background-repeat:no-repeat;
  display:flex;align-items:center;
}
.cd-page .cd-hero::before{
  content:"";position:absolute;inset:0;z-index:-1;width:auto;height:auto;aspect-ratio:auto;
  border:0;border-radius:0;box-shadow:none;
  background:linear-gradient(90deg,rgba(35,10,23,.86) 0%,rgba(48,17,32,.77) 35%,rgba(48,17,32,.40) 58%,rgba(48,17,32,.08) 100%),linear-gradient(0deg,rgba(35,10,23,.18),rgba(35,10,23,.08));
}
.cd-page .cd-hero::after{content:"";position:absolute;inset-inline:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(222,190,126,.85),transparent);opacity:1}
.cd-page .cd-hero > .cd-w{position:relative;z-index:1;width:min(100% - 2 * var(--pad),var(--wrap));margin-inline:auto}
.cd-page .cd-crumb{display:none}
.cd-page .cd-hero__grid{display:block;width:min(100%,660px);margin:0}
.cd-page .cd-hero__copy{max-width:660px;margin:0;text-align:left}
.cd-page .cd-hero__copy .cd-eyebrow{justify-content:flex-start;color:#e6c68b}
.cd-page .cd-hero__copy .cd-eyebrow::before{background:#e6c68b}
.cd-page .cd-hero h1{max-width:650px;color:#fff8ef;font-size:clamp(2.8rem,5.3vw,5rem);line-height:1.02;text-shadow:0 2px 24px rgba(20,5,13,.2)}
.cd-page .cd-hero h1 em{color:#e4bf7d}
.cd-page .cd-hero h1 em::after{background:linear-gradient(90deg,#e4bf7d,transparent)}
.cd-page .cd-hero .cd-lead{max-width:53ch;color:rgba(255,248,239,.9);font-size:clamp(1rem,1.25vw,1.1rem);line-height:1.75}
.cd-page .cd-hero .cd-actions{justify-content:flex-start;gap:12px;margin-top:24px}
.cd-page .cd-hero .cd-actions .btn--solid{background:#f7ead8;color:#4a1027;border-color:#f7ead8}
.cd-page .cd-hero .cd-actions .btn--solid:hover{background:#e4bf7d;border-color:#e4bf7d}
.cd-page .cd-hero .cd-actions .btn--ghost{color:#fff8ef;border-color:rgba(255,248,239,.7);background:rgba(255,248,239,.06)}
.cd-page .cd-hero .cd-actions .btn--ghost:hover{background:rgba(255,248,239,.15)}
.cd-page .cd-hero .cd-facts{justify-content:flex-start;gap:14px clamp(18px,3vw,34px);margin-top:26px}
.cd-page .cd-hero .cd-facts li,.cd-page .cd-hero .cd-facts li:first-child{border-inline-start:2px solid #d9b56f;padding-inline-start:14px}
.cd-page .cd-hero .cd-facts strong{color:#fff8ef}
.cd-page .cd-hero .cd-facts span{color:rgba(255,248,239,.78)}
.cd-page .cd-hero__art{display:none!important}
@media(max-width:680px){
  .cd-page .cd-hero{min-height:600px;padding:46px 0;background-position:61% center}
  .cd-page .cd-hero::before{background:linear-gradient(90deg,rgba(35,10,23,.88),rgba(48,17,32,.70)),linear-gradient(0deg,rgba(35,10,23,.25),rgba(35,10,23,.12))}
  .cd-page .cd-hero > .cd-w{width:min(100% - 32px,var(--wrap))}
  .cd-page .cd-hero__grid,.cd-page .cd-hero__copy{width:100%;max-width:100%;text-align:left}
  .cd-page .cd-hero__copy .cd-eyebrow{justify-content:flex-start}
  .cd-page .cd-hero h1{font-size:clamp(2.65rem,10vw,4rem);margin:0!important}
  .cd-page .cd-hero .cd-lead{margin-inline:0;font-size:.98rem}
  .cd-page .cd-hero .cd-actions{justify-content:flex-start;flex-direction:row;flex-wrap:wrap}
  .cd-page .cd-hero .cd-facts{justify-content:flex-start;gap:14px 12px}
  .cd-page .cd-hero .cd-facts li{flex:1 1 27%;text-align:left;padding-inline-start:9px}
}
@media(max-width:390px){
  .cd-page .cd-hero{min-height:640px}
  .cd-page .cd-hero .cd-actions{flex-direction:column;align-items:flex-start;max-width:290px;margin-inline:0}
  .cd-page .cd-hero .cd-actions .btn{width:100%}
  .cd-page .cd-hero .cd-facts li{flex-basis:27%;padding-inline-start:7px}
  .cd-page .cd-hero .cd-facts strong{font-size:1.1rem}
  .cd-page .cd-hero .cd-facts span{font-size:.7rem}
}


/* ===================== CUSTOM DESIGN — FINAL CTA CARD ===================== */
.cd-final-cta{ position:relative; isolation:isolate; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(240px,.9fr); align-items:center; gap:clamp(24px,5vw,76px); width:min( calc(100% - 2 * var(--g, 5.2vw)), 1440px ); margin:0 auto clamp(64px,8vw,112px); padding:clamp(30px,5vw,68px) clamp(24px,5vw,70px); overflow:hidden; border:1px solid rgba(195,155,91,.38); border-radius:30px; color:#fffaf2; background:radial-gradient(ellipse at 12% 0%,rgba(133,78,97,.72),transparent 48%),linear-gradient(125deg,#35101f 0%,#50152b 58%,#2a0f19 100%); box-shadow:0 24px 55px rgba(55,18,34,.15);}
.cd-final-cta::before{content:"";position:absolute;inset:12px;border:1px solid rgba(231,201,135,.24);border-radius:22px;pointer-events:none;z-index:-1}
.cd-final-cta__inner{position:relative;z-index:2;max-width:660px}
.cd-final-cta__ornament{display:grid;place-items:center;width:42px;height:42px;margin-bottom:20px;border:1px solid rgba(231,201,135,.65);border-radius:50%;color:#e7c987;font-size:1.25rem}
.cd-final-cta .cd-eyebrow{color:#e7c987;margin-bottom:12px}
.cd-final-cta h2{max-width:14ch;margin:0 0 16px;font:500 clamp(2.2rem,4.3vw,4.1rem)/1.02 var(--font-head);letter-spacing:-.035em;color:#fffaf2}
.cd-final-cta h2 em{color:#e7c987;font-weight:500}
.cd-final-cta__copy{max-width:52ch;margin:0 0 26px;color:rgba(255,250,242,.78);font-size:1.03rem;line-height:1.75}
.cd-final-cta__actions{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.cd-final-cta .btn--solid{background:#e7c987;color:#32101e;border:1px solid #e7c987}
.cd-final-cta .btn--solid:hover{background:#f3dda6;border-color:#f3dda6}
.cd-final-cta .btn i{margin-inline-start:12px;font-size:.78rem;transition:translate .2s}
.cd-final-cta .btn:hover i{translate:3px 0}
.cd-final-cta__text-link{color:#fffaf2;text-decoration-color:rgba(255,250,242,.5);text-underline-offset:5px;font-size:.95rem}
.cd-final-cta__text-link span{display:inline-block;margin-inline-start:6px;color:#e7c987}
.cd-final-cta__foot{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:32px;padding-top:18px;border-top:1px solid rgba(231,201,135,.24);font-size:.76rem;letter-spacing:.07em;text-transform:uppercase;color:rgba(255,250,242,.65)}
.cd-final-cta__foot i{width:4px;height:4px;border-radius:50%;background:#e7c987}
.cd-final-cta__image{position:relative;justify-self:center;width:min(100%,340px);aspect-ratio:4/4.6;transform:rotate(3deg);filter:drop-shadow(0 24px 24px rgba(0,0,0,.3));}
.cd-final-cta__image::before{content:"";position:absolute;inset:7% -8% -4% 8%;border:1px solid rgba(231,201,135,.6);transform:rotate(-7deg)}
.cd-final-cta__image img{position:relative;width:100%;height:100%;object-fit:cover;border:8px solid #f8f0e4;outline:1px solid rgba(231,201,135,.7);outline-offset:-13px}
@media(max-width:760px){.cd-final-cta{grid-template-columns:1fr;width:calc(100% - 32px);margin-bottom:48px;padding:30px 24px 26px;border-radius:24px;gap:26px}.cd-final-cta::before{inset:8px;border-radius:17px}.cd-final-cta__image{width:min(65%,240px);grid-row:1;justify-self:end;margin:0 10px 0 0;aspect-ratio:4/3.6}.cd-final-cta__inner{grid-row:2}.cd-final-cta h2{max-width:12ch;font-size:clamp(2.15rem,9vw,3.2rem)}.cd-final-cta__actions{align-items:flex-start;flex-direction:column;gap:15px}.cd-final-cta__foot{gap:8px;font-size:.65rem;margin-top:24px}.cd-final-cta__copy{font-size:.96rem}}
@media(prefers-reduced-motion:reduce){.cd-final-cta *{scroll-behavior:auto!important;transition:none!important}}

/* Custom Design CTA — slightly more compact sizing */
.cd-final-cta{gap:clamp(20px,3.5vw,48px);padding:clamp(24px,3.5vw,44px) clamp(24px,4vw,54px);border-radius:26px}
.cd-final-cta__ornament{width:36px;height:36px;margin-bottom:14px;font-size:1.1rem}
.cd-final-cta h2{font-size:clamp(2rem,3.7vw,3.45rem);margin-bottom:12px}
.cd-final-cta__copy{margin-bottom:20px;font-size:.98rem;line-height:1.65}
.cd-final-cta__foot{margin-top:24px;padding-top:14px;font-size:.7rem}
.cd-final-cta__image{width:min(100%,290px)}
@media(max-width:760px){.cd-final-cta{padding:24px 20px 22px;gap:20px;margin-bottom:42px}.cd-final-cta__image{width:min(58%,205px)}.cd-final-cta h2{font-size:clamp(1.95rem,8vw,2.8rem)}.cd-final-cta__copy{font-size:.92rem;margin-bottom:16px}.cd-final-cta__foot{margin-top:18px;padding-top:12px}}


/* Custom Design & Contact — make secondary text links read as real buttons */
.cd-cta-card .cd-link{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:42px; margin:10px auto 0; padding:10px 18px;
  border:1px solid rgba(231,201,135,.72); border-radius:999px;
  background:rgba(231,201,135,.08); color:#f5d995;
  text-decoration:none; font-weight:600; line-height:1.2;
  transition:background .2s ease, color .2s ease, transform .2s ease;
}
.cd-cta-card .cd-link:hover{background:#e7c987;color:#2a0f17;transform:translateY(-1px);text-decoration:none}
.cd-final-cta__text-link{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:11px 18px;border:1px solid rgba(255,250,242,.62);border-radius:999px;background:rgba(255,250,242,.07);color:#fffaf2;text-decoration:none;font-weight:600;line-height:1.2;transition:background .2s ease,border-color .2s ease,transform .2s ease}
.cd-final-cta__text-link:hover{background:#fffaf2;border-color:#fffaf2;color:#35101f;text-decoration:none;transform:translateY(-1px)}
.cd-final-cta__text-link span{margin-inline-start:0;color:#e7c987}
.cd-final-cta__text-link:hover span{color:#35101f}
.cx-link{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:10px 18px;border:1px solid var(--gold);border-radius:999px;background:transparent;color:var(--ink);text-decoration:none;font-weight:600;line-height:1.2;transition:background .2s ease,color .2s ease,transform .2s ease}
.cx-link::after{display:none}
.cx-link:hover{background:var(--gold);color:#32101e;text-decoration:none;transform:translateY(-1px)}
@media(prefers-reduced-motion:reduce){.cd-cta-card .cd-link,.cd-final-cta__text-link,.cx-link{transition:none}}


/* Featured testimonial — editorial split layout */
.ab-q--feature{padding-block:clamp(42px,6vw,78px);background:linear-gradient(135deg,var(--shade),var(--bg) 58%,var(--shade));overflow:hidden;}
.ab-q__feature{display:grid;grid-template-columns:minmax(250px,.86fr) minmax(0,1.14fr);min-height:390px;background:var(--surface, #fcf7ee);border:1px solid var(--line);box-shadow:0 22px 60px rgba(57,45,58,.09);overflow:hidden;}
.ab-q__visual{position:relative;min-height:390px;background:var(--shade);overflow:hidden;}
.ab-q__visual:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(57,17,34,.26),transparent 58%);pointer-events:none;}
.ab-q__visual img{width:100%;height:100%;min-height:390px;position:absolute;inset:0;object-fit:cover;object-position:center;}
.ab-q__stamp{position:absolute;z-index:1;left:22px;bottom:22px;display:grid;place-content:center;width:88px;height:88px;border:1px solid rgba(255,255,255,.75);border-radius:50%;background:rgba(57,17,34,.72);color:#f5e9b9;text-align:center;font:italic 1.05rem/1.12 var(--font-head);transform:rotate(-9deg);}
.ab-q__copy{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:clamp(28px,4.2vw,58px);text-align:left;}
.ab-q__copy .eyebrow{margin:0 0 20px;}
.ab-q__copy .ab-q__mark{font-size:5rem;line-height:.55;margin-bottom:12px;opacity:.72;}
.ab-q--feature blockquote{max-width:620px;margin:0 0 26px;font:500 clamp(1.45rem,2.4vw,2.15rem)/1.38 var(--font-head);color:var(--ink);text-wrap:pretty;}
.ab-q__byline{display:flex;align-items:center;gap:14px;}
.ab-q__rule{width:34px;height:1px;background:var(--gold);flex:0 0 34px;}
.ab-q--feature cite{font-size:1.85rem;}
.ab-q--feature small{font-size:.83rem;}
.ab-q__index{display:flex;align-items:center;gap:10px;margin-top:30px;color:var(--muted);font-size:.67rem;letter-spacing:.18em;font-weight:700;}
.ab-q__index i{display:inline-block;width:36px;height:1px;background:var(--gold);}
@media(max-width:760px){.ab-q--feature{padding-block:34px;}.ab-q__feature{grid-template-columns:1fr;}.ab-q__visual,.ab-q__visual img{min-height:250px;height:250px;}.ab-q__copy{padding:28px 24px 26px;}.ab-q__copy .eyebrow{margin-bottom:16px;}.ab-q--feature blockquote{font-size:clamp(1.35rem,5.2vw,1.8rem);}.ab-q__index{margin-top:22px;}}
@media(max-width:380px){.ab-q__visual,.ab-q__visual img{min-height:210px;height:210px;}.ab-q__copy{padding:24px 18px;}.ab-q__stamp{width:72px;height:72px;font-size:.9rem;}}


/* =====================================================================
   Responsive fixes: hero button pairs, home 2 finish tabs + gallery
   ===================================================================== */

/* hero button pairs (contact + products): same height, same type, same width */
@media (max-width: 980px) {
  .cx-actions, .pp-hero__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: 100%; max-width: 540px; }
  .cx-actions .btn, .cx-actions .cx-link, .pp-hero__actions .btn {
    width: 100%; min-height: 52px; padding: 14px 20px; border-width: 1.5px; border-radius: 999px;
    font: 500 1rem/1.2 var(--font-body); text-align: center;
  }
  .cx-actions .cx-link { border-color: var(--gold); }
  .cx-actions .btn i, .pp-hero__actions .btn i { margin-inline-start: 10px; }
}
@media (max-width: 560px) {
  .cx-actions, .pp-hero__actions { grid-template-columns: minmax(0, 1fr); max-width: 420px; }
}

/* home 2 finishes: four equal tabs in a tidy 2 x 2 grid on phones */
@media (max-width: 699px) {
  .fin__tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .fin__tab { justify-content: center; min-height: 46px; padding: 10px 12px; white-space: nowrap; }
}
@media (max-width: 360px) {
  .fin__tab { gap: 8px; padding-inline: 8px; font-size: .875rem; }
}

/* home 2 gallery (below 900px): big photo, pairs, quote, then a wide closing photo, so no tile is left alone */
@media (max-width: 899px) {
  .gal { grid-auto-flow: row; }
  .gt--a { order: 1; } .gt--b { order: 2; } .gt--c { order: 3; } .gt--d { order: 4; }
  .gt--f { order: 5; } .gt--q { order: 6; } .gt--g { order: 7; grid-column: span 2; }
}

/* ---- Letters from our couples: arrows + couple chips stay tidy on tablets and phones ---- */
@media (max-width: 900px) {
  .lv__ctrl { flex-wrap: nowrap; gap: 12px; }
  .lv__chips { flex: 1 1 0; min-width: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .lv__chip { justify-content: flex-start; min-width: 0; gap: 8px; padding: 6px 10px 6px 6px; font-size: .875rem; white-space: nowrap; }
}
@media (max-width: 760px) {
  /* chips on top in a 2 x 2 grid, the two arrows centred together underneath */
  .lv__ctrl { flex-wrap: wrap; justify-content: center; gap: 16px 14px; }
  .lv__chips { order: -1; flex: 1 0 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .lv__chip { padding-inline-end: 14px; }
}

/* longer header tagline ("Wedding Invitations & Stationery"): keep it from crowding the header tools on small screens */
@media (max-width: 520px) { .brand__tag { font-size: .7rem; margin-top: 3px; } }


/* ===== 404 page ===== */
.nf-page { overflow-x: clip; background: var(--bg); color: var(--text); }
.nf { position: relative; isolation: isolate; display: grid; place-items: center; min-height: calc(100svh - var(--h)); padding: clamp(56px, 9vw, 110px) var(--pad); text-align: center; overflow: hidden; }
.nf__in { position: relative; z-index: 2; width: min(100%, 720px); }
.nf__in > p, .nf__in > h1 { margin: 0; }
.nf .eyebrow { margin-bottom: 6px; }

.nf__glow { position: absolute; z-index: -1; border-radius: 50%; filter: blur(70px); pointer-events: none; }
.nf__glow--a { width: min(46vw, 460px); aspect-ratio: 1; inset-block-start: -8%; inset-inline-start: -8%; background: var(--glow); }
.nf__glow--b { width: min(40vw, 380px); aspect-ratio: 1; inset-block-end: -10%; inset-inline-end: -6%; background: color-mix(in srgb, var(--gold) 28%, transparent); }

/* big 404 with a wax seal for the zero */
.nf__num { display: flex; align-items: center; justify-content: center; gap: clamp(6px, 2vw, 18px); direction: ltr; margin-block: clamp(4px, 1.5vw, 12px) clamp(8px, 2vw, 16px); font: 600 clamp(5.5rem, 21vw, 12rem)/1 var(--font-head); color: var(--ink); letter-spacing: -.02em; }
.nf__num > span:not(.nf__seal) { display: block; text-shadow: 0 10px 30px rgba(107, 39, 55, .14); }
.nf__seal { position: relative; display: grid; place-items: center; width: .74em; aspect-ratio: 1; border-radius: 50%; font-size: inherit; background: radial-gradient(circle at 34% 28%, #8B2B47 0%, #681F36 46%, #4A1025 100%); box-shadow: 0 16px 34px rgba(74, 16, 37, .38), inset 0 -6px 12px rgba(0, 0, 0, .28), inset 0 5px 10px rgba(255, 255, 255, .14); animation: nf-sway 5s ease-in-out infinite; }
.nf__seal::before { content: ""; position: absolute; inset: 11%; border-radius: 50%; border: 2px solid rgba(231, 201, 135, .7); }
.nf__seal::after { content: ""; position: absolute; inset: 20%; border-radius: 50%; border: 1px dashed rgba(231, 201, 135, .45); }
.nf__seal i { position: relative; z-index: 1; font: 400 .34em/1 var(--font-script); font-style: italic; color: #E7C987; }

.nf h1 { font: 600 clamp(1.75rem, 4.4vw, 2.75rem)/1.15 var(--font-head); color: var(--ink); text-wrap: balance; }
.nf h1 em { display: block; margin-top: .06em; font-style: italic; font-weight: 400; color: var(--gold-text); }
.nf__lead { max-width: 54ch; margin: 18px auto 0 !important; color: var(--muted); font-size: clamp(1rem, 1.6vw, 1.125rem); }
.nf__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 14px; margin-top: 30px; }
.nf__actions .btn i { margin-inline-start: 10px; font-size: .75rem; transition: translate .2s ease; }
.nf__actions .btn:hover i { translate: 3px 0; }
[dir="rtl"] .nf__actions .btn i { transform: scaleX(-1); }
[dir="rtl"] .nf__actions .btn:hover i { translate: -3px 0; }

.nf__links { margin-top: clamp(34px, 6vw, 56px); padding-top: 26px; border-top: 1px solid var(--line); }
.nf__links > p { margin: 0 0 16px; font-size: .8125rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-text); }
.nf__links ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.nf__links a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 18px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font-size: .9375rem; font-weight: 500; text-decoration: none; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.nf__links a i { color: var(--gold-text); font-size: .9rem; }
.nf__links a:hover { transform: translateY(-2px); border-color: var(--gold); box-shadow: var(--shadow); }

/* two tilted cards, desktop only */
.nf__card { position: absolute; z-index: 1; margin: 0; width: clamp(150px, 15vw, 230px); aspect-ratio: 4 / 5; padding: 8px; border-radius: 6px; background: #FFFDF9; box-shadow: 0 24px 50px rgba(74, 16, 37, .25); animation: nf-float 7s ease-in-out infinite; }
.nf__card img { width: 100%; height: 100%; object-fit: cover; border-radius: 3px; }
.nf__card--l { inset-inline-start: clamp(16px, 6vw, 110px); inset-block-start: 20%; rotate: -9deg; }
.nf__card--r { inset-inline-end: clamp(16px, 6vw, 110px); inset-block-end: 14%; rotate: 8deg; animation-delay: -3.5s; }
[dir="rtl"] .nf__card--l { rotate: 9deg; }
[dir="rtl"] .nf__card--r { rotate: -8deg; }
@media (max-width: 1100px) { .nf__card { display: none; } }

@keyframes nf-sway { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg) translateY(-4px); } }
@keyframes nf-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -14px; } }
@media (prefers-reduced-motion: reduce) { .nf__seal, .nf__card { animation: none; } }
@media (max-width: 520px) { .nf__actions .btn { width: 100%; } .nf__links a { flex: 1 1 calc(50% - 10px); justify-content: center; padding-inline: 12px; } }