/* final: the Crest chrome re-scoped for design 9. Hand-authored adaptation of
 * crest.css: every [data-design="crest"] selector re-scoped to "final", values
 * untouched, so the borrowed Crest header and footer style identically here. */

/* Full bleed. The cloned Crest chrome caps its sheet at 1440px with an inline
 * style on the one classless wrapper under body; final spans the viewport, and
 * !important is the only way past an inline declaration. Scoped to final, so
 * Crest itself keeps its cap. The centred flex content inside is unaffected. */
:root[data-design="final"] body > div:not([class]) { max-width: none !important; }

/* The review popup on final offers the colours and nothing else. The widget's
 * own JS re-shows its rows when a template is swapped in without a reload (and
 * its warmed cache can hold pages fetched before a rule changed), so the rows
 * final never wants are pinned shut here — the swap keeps data-design on the
 * root current, which makes this hold in every state the widget can reach.
 * The first p.rev__lab is the "Seven templates" label; the colours label and
 * everything after it stay. The sampler keeps all its tools: nothing here
 * applies unless final itself is on screen. */
:root[data-design="final"] .rev__mode,
:root[data-design="final"] .rev__chrome,
:root[data-design="final"] .rev__body > p.rev__lab:first-of-type,
:root[data-design="final"] .rev__list { display: none !important; }

/* -- the hero ---------------------------------------------------------------
 * Header and hero together are one screen. The Crest header's height is the
 * sum of fixed paddings and fixed type sizes, so it is a known number per
 * breakpoint rather than a guess: measured 216px on desktop, and the mobile
 * rules below pin their own figure. min-height, not height, so if copy ever
 * outgrows a short viewport the hero scrolls instead of clipping. */
:root[data-design="final"] { --final-headh: 232px; }
[data-design="final"] .dc-final-hero {
  position: relative; overflow: hidden;
  display: flex; align-items: center;
  min-height: calc(100dvh - var(--final-headh));
  border-bottom: 1px solid var(--line);
}
[data-design="final"] .dc-final-hero__bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  /* Anchored right, biased high: a narrowing window clips from the left so
     the model never leaves frame, and a short wide window crops from the
     bottom paving — never from his head. */
  object-fit: cover; object-position: right 12%; display: block;
}
[data-design="final"] .dc-final-hero__copy {
  position: relative; z-index: 1;
  /* 580px where the screen affords it — the approved width — and narrower
     where it does not: the min() reserves the right ~38% of the hero for the
     photograph's model, so the box can never slide over him as the window
     narrows. Text wraps; it never shrinks or clips. */
  width: min(580px, calc(62% - clamp(36px, 10.8vw, 172px)));
  max-width: calc(100% - 40px);
  /* Left gap at just under double its old clamp(20px, 6vw, 96px). */
  margin: clamp(14px, 1.7vw, 30px) auto clamp(14px, 1.7vw, 30px) clamp(36px, 10.8vw, 172px);
  background: var(--glass); border-top: 3px solid var(--accent);
  display: flex; flex-direction: column; justify-content: center;
  gap: clamp(11px, 1.4vw, 18px);
  padding: clamp(20px, 2.2vw, 34px);
}
[data-design="final"] .dc-final-hero__eyebrow {
  font-family: var(--serif); font-weight: 600; font-size: 13.5px;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent2);
}
[data-design="final"] .dc-final-hero__title {
  font-family: var(--serif); font-weight: 500;
  /* Fixed like the footprint: the same two lines at every window width. */
  font-size: 42px; line-height: 1.1;
  letter-spacing: 0.01em; margin: 0; text-wrap: pretty;
}
/* The divider: a four-pointed sparkle between two hairlines, the whole thing
 * in the theme's secondary colour and running the content's full width. */
[data-design="final"] .dc-final-hero__rule {
  display: flex; align-items: center; gap: 11px; margin: -2px 0;
}
[data-design="final"] .dc-final-hero__rule::before,
[data-design="final"] .dc-final-hero__rule::after {
  content: ''; flex: 1 1 0; height: 1px; background: var(--accent2);
}
[data-design="final"] .dc-final-hero__rule i {
  flex: 0 0 auto; width: 11px; height: 11px; background: var(--accent2);
  clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%);
}
[data-design="final"] .dc-final-hero__lede {
  font-family: var(--sans); font-weight: 500;
  font-size: 17px;
  line-height: 1.62; color: var(--soft); max-width: 46ch; margin: 0;
}
[data-design="final"] .dc-final-hero__ctas {
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
}
[data-design="final"] .dc-final-hero__cta {
  background: var(--ink); color: var(--paper);
  padding: 15px 30px; font-family: var(--serif);
  font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase;
}
[data-design="final"] .dc-final-hero__cta--ghost {
  background: transparent; color: var(--ink); border: 1px solid var(--bord);
}
[data-design="final"] .dc-final-hero__strip {
  display: flex; gap: clamp(16px, 2.6vw, 34px); flex-wrap: wrap;
  padding-top: 14px; border-top: 1px solid var(--line);
  font-family: var(--sans); font-weight: 500; font-size: 12.5px;
  color: var(--mut); letter-spacing: 0.04em;
}
[data-design="final"] .dc-final-hero__card {
  position: absolute; z-index: 1;
  right: 0; bottom: clamp(16px, 2.4vw, 32px);
  background: var(--glass); padding: 15px 20px;
  display: flex; flex-direction: column; gap: 5px; max-width: min(300px, 80%);
}
[data-design="final"] .dc-final-hero__cardlabel {
  font-family: var(--serif); font-size: 10.5px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent);
}
[data-design="final"] .dc-final-hero__cardname {
  font-family: var(--serif); font-weight: 500; font-size: 16.5px; line-height: 1.3;
}
[data-design="final"] .dc-final-hero__cardline {
  font-family: var(--sans); font-size: 13.5px; color: var(--soft);
}

/* The nameplate a size up. The mark's 40 is a width/height attribute on the
 * generated SVG, which CSS outranks on its own; the wordmark's 26px is an
 * inline style, which it does not. --final-headh below follows the taller
 * header, or the hero stops ending at the fold. */
:root[data-design="final"] header > a svg { width: 48px; height: 48px; }
:root[data-design="final"] header > a > span:first-of-type { font-size: 31px !important; }

/* The founding year in Devanagari rather than Roman: MMXXII is २०२२. The
 * string is hardcoded in the generated Crest header, and Crest keeps its own,
 * so the swap is done here where only final sees it. Cinzel carries no
 * Devanagari, so the numerals fall through to a face that does while the
 * Latin around them stays Cinzel. */
:root[data-design="final"] header > a > span:nth-child(3) > span:nth-child(2) {
  font-size: 0 !important;
}
:root[data-design="final"] header > a > span:nth-child(3) > span:nth-child(2)::after {
  /* Six-digit escapes throughout: a shorter one runs on into whatever
     follows, which ate the space after the middot and then swallowed the D
     of DELHI into a Yi syllable. Six digits terminate themselves. */
  content: "EST.\0000A0\000968\000966\000968\000968\0000A0\0000B7\0000A0DELHI";
  font-family: Cinzel, 'Nirmala UI', 'Noto Sans Devanagari', serif;
  font-size: 10px; letter-spacing: 0.24em;
}

/* The nav in the deep navy the user swatched. The swatch came as an image,
 * so the hex is a close visual match, not a sample — correct the one token
 * below if it is off. Hover stays accent. */
:root[data-design="final"] { --final-navy: #1A2338; }
:root[data-design="final"] header nav a { color: var(--final-navy); font-weight: 600; }
:root[data-design="final"] header nav a:hover { color: var(--accent); }

/* -- small screens ----------------------------------------------------------
 * The Crest header's nav is inline-styled by the generated clone, so its
 * mobile manners can only come from here: the row wraps, centred, with the
 * padding brought in. The hero stacks, photograph below the copy, and the
 * height budget switches to the wrapped header's measured figure. */
@media (max-width: 700px) {
  :root[data-design="final"] { --final-headh: 205px; }
  :root[data-design="final"] header { padding: 14px 0 12px !important; gap: 12px !important; }
  :root[data-design="final"] header > a svg { width: 32px; height: 32px; }
  :root[data-design="final"] header nav {
    flex-wrap: wrap !important; gap: 8px 14px !important;
    justify-content: center !important; padding: 4px 14px 0 !important;
    font-size: 10.5px !important; letter-spacing: 0.1em !important;
  }
  [data-design="final"] .dc-final-hero__title { font-size: 27px; }
  [data-design="final"] .dc-final-hero__lede { font-size: 16px; }
}

/* -- when the man and the box cannot share a row ---------------------------
 * The overlap is a function of shape, not just width: a tall window scales
 * the cover image up by HEIGHT, the frame slides left, and the model walks
 * in under the text box. So the stacked layout switches on narrow screens
 * AND on any window squarer than 13:10 — text, then the photograph in its
 * own full-width band with the model wholly in frame, then the card.
 * Nothing overlays him and nothing crops him; he is the point of the
 * picture, and a hero that hides him has failed at its one job. */
@media (max-width: 860px), (max-aspect-ratio: 1/1) and (max-width: 1200px) {
  /* The previous condition stacked at 13:10 regardless of width, which put a
   * 1550px desktop window on the phone layout. Wide windows never overlap —
   * the height-scaled frame still leaves the model right of the box — so the
   * stack engages only when the width is genuinely short, or the window is
   * squarer than 1:1 AND too narrow for the two to share a row. */
  [data-design="final"] .dc-final-hero { flex-direction: column; align-items: stretch; background: var(--paper); min-height: 0; }
  /* The flex item is the <picture> wrapper, not the img inside it: the
     ordering lives on the wrapper or it does not happen at all. */
  [data-design="final"] .dc-final-hero picture { order: 2; display: block; width: 100%; }
  [data-design="final"] .dc-final-hero__bg {
    position: static; inset: auto; order: 2;
    /* The whole photograph, its own shape: a fixed band height was cropping
       the frame from the top and taking the model's head with it. */
    width: 100%; height: auto; aspect-ratio: 1920 / 1080;
    object-fit: cover; object-position: right center;
  }
  [data-design="final"] .dc-final-hero__copy {
    order: 1; width: auto; max-width: 640px; margin: 16px auto;
  }
  /* In flow below the photograph: an absolute card and a fluid box are two
     guesses at the same bottom edge, and they eventually collide. */
  [data-design="final"] .dc-final-hero__card {
    order: 3; position: static; margin: 12px 14px 14px; max-width: none;
  }
}

/* After the stacked block on purpose, so it wins the cascade there. On a
 * phone the full 16:9 frame is a 210px ribbon with a distant figure; a 4:5
 * window cut from the same photograph, pinned to its right edge, fills the
 * band with the man and his side of the garden — a portrait hero without a
 * second asset. A purpose-shot portrait can replace this crop later. */
@media (max-width: 700px) {
  [data-design="final"] .dc-final-hero__bg {
    aspect-ratio: 4 / 5; object-position: right 30%;
  }
}

/* The brief's own ground, which is what the design was drawn on.
 *
 * Two vocabularies on purpose. The brief's markup reads its own names (--desk,
 * --bord, --papermut); the site's chrome, the shared sections appended under
 * the brief, hover states and focus outlines read the site's names
 * (--accent-ink, --on-accent, --line-2, --well). The first cut of this block
 * carried only the brief's names, and every consumer of the other vocabulary
 * quietly resolved to nothing: hovers that never changed, buttons whose text
 * did not paint, wells with no ground. A palette is only a palette here if
 * BOTH vocabularies resolve, and the site's names are derived from the brief's
 * own values so the two cannot disagree.
 *
 * Deliberately NOT :root-scoped. On a normal page these attributes sit on the
 * html element and nothing changes; on the sampler, one page carries all seven
 * themes at once, each section wrapped in a div bearing its own theme's
 * data-design and data-palette, and custom properties cascade from whatever
 * element defines them. :root would have pinned every theme's colours to the
 * one document. */
[data-design="final"][data-palette="own"] {
  --paper: #F6F1E7;
  --ink: #2B1D2E;
  --accent: #7B2D43;
  --accent2: #C89AA6;
  --desk: #EAE4DC;
  --line: #DED8D1;
  --bord: #C1BAB7;
  --faint: #B5ADAC;
  --strike: #A59C9D;
  --mut: #6C6169;
  --soft: #584C57;
  --papermut: #BDB6B3;
  --pmut2: #9D9496;
  --stone: #DAD3CD;
  --inkline: #453946;
  --glass: rgba(246,241,231,0.94);
  --scrim: rgba(43,29,46,0.72);
  --paper-2:   color-mix(in srgb, var(--paper) 55%, var(--desk));
  --paper-3:   var(--desk);
  --well:      var(--stone);
  --well-dim:  color-mix(in srgb, var(--stone) 82%, var(--ink));
  --ink-2:     var(--inkline);
  --line-2:    var(--bord);
  --accent-2:  var(--accent2);
  --accent-ink: var(--accent);
  --on-accent: var(--paper);
}

/* The brief's own base rules, which lived in its <helmet> and were otherwise
   lost with it: the desk tone outside the sheet, and plain ink links that turn
   accent on hover. Scoped to the cloned surfaces (the chrome and the brief's
   own unclassed sections); the shared sections keep the site's styling, and
   anything the brief set inline still wins outright. */
:root[data-design="final"] body { background: var(--paper-3); }
[data-design="final"] :is(header, footer, section:not([class])) a { color: var(--ink); text-decoration: none; }
[data-design="final"] :is(header, footer, section:not([class])) a:hover { color: var(--accent); }

/* The same names, driven by whichever of the 24 palettes is chosen, so the
   colour switcher works on cloned markup without touching a single style="". */
[data-design="final"]:not([data-palette="own"]) {
  --accent2: var(--accent-2);
  --desk: var(--paper-3);
  --bord: var(--line-2);
  --papermut: var(--faint);
  --pmut2: var(--strike);
  --inkline: var(--ink-2);
  --glass: color-mix(in srgb, var(--paper) 94%, transparent);
  --scrim: color-mix(in srgb, var(--ink) 72%, transparent);
}

/* style-hover="..." is an authoring attribute no browser implements. These are
   the brief's own hover declarations, moved into rules that actually fire. */
[data-design="final"] .dc-crest-h0:hover { background: var(--accent); color: var(--paper) }
[data-design="final"] .dc-crest-h1:hover { border-color: var(--ink) }
[data-design="final"] .dc-crest-h2:hover { background: var(--accent2) }
[data-design="final"] .dc-crest-h3:hover { background: var(--accent); color: var(--paper) }
[data-design="final"] .dc-crest-h4:hover { border-color: var(--ink) }

/* The ambient layer: above the sheet's own ground, below everything on it. */
[data-design="final"] .dc-orn {
  position: absolute; inset: 0; overflow: hidden;
  pointer-events: none; z-index: -1;
}
/* An inserted ornament band clips its own overhang so a vine that runs off the
   edge cannot widen the page. */
[data-design="final"] .dc-ins { overflow: hidden; }


/* -- the ambient ground ---------------------------------------------------
   Two counter-blooms, one at the head of the sheet and one at the foot, both
   turned down well under the copy. bloom() already counter-rotates its own
   pair; the speeds here are halved again so the whole thing reads as a slow
   procession rather than as a wheel. */
[data-design="final"] .dc-crest-veil { position: absolute; left: 0; right: 0; overflow: hidden; }
[data-design="final"] .dc-crest-veil--head { top: 0; height: 68%; }
[data-design="final"] .dc-crest-veil--foot { bottom: 0; height: 58%; }

/* -- konia: the two corner pieces that frame the top of the sheet ---------- */
[data-design="final"] .dc-orn .dc-crest-konia {
  position: absolute; display: block;
  width: clamp(66px, 9.5vw, 148px); aspect-ratio: 1;
  opacity: calc(.11 * var(--pattern-intensity, 1));
}
[data-design="final"] .dc-orn .dc-crest-konia--tl {
  inset: clamp(10px, 1.6vw, 24px) auto auto clamp(10px, 1.6vw, 24px);
}
[data-design="final"] .dc-orn .dc-crest-konia--tr {
  inset: clamp(10px, 1.6vw, 24px) clamp(10px, 1.6vw, 24px) auto auto;
}
[data-design="final"] .dc-orn .dc-crest-konia svg {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  animation: dc-crest-glow 58s ease-in-out infinite;
}
[data-design="final"] .dc-orn .dc-crest-konia--tr svg { animation-delay: -29s; }

/* -- the bel, set after the calendar ---------------------------------------
   One wine stroke that travels the border: dasharray 1000 against the
   pathLength the engine stamps on every stroked path, offset walked from 1000
   to 0 and on out to -1000 so the tail leaves the way the head arrived. Slow,
   because this design does not hurry. */
[data-design="final"] .dc-crest-bel {
  padding: clamp(14px, 2.2vw, 30px) clamp(48px, 8.33vw, 120px) clamp(4px, 0.9vw, 12px);
}
[data-design="final"] .dc-crest-bel .belband > span {
  opacity: calc(.72 * var(--pattern-intensity, 1));
}
[data-design="final"] .dc-crest-bel .belband svg {
  height: clamp(34px, 4.4vw, 68px);
}
[data-design="final"] .dc-crest-bel .kl-line {
  stroke-dasharray: 1000;
  animation: dc-crest-draw 44s cubic-bezier(.42, 0, .36, 1) infinite;
}
[data-design="final"] .dc-crest-bel .kl-line--under { animation-delay: -1.8s; }

/* -- the medallion divider, set after the ink band -------------------------
   Centred, because the whole design is. A twelve fold mandala turning as one
   piece between two hairlines that breathe with it. */
[data-design="final"] .dc-crest-medal {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(16px, 2.6vw, 40px);
  padding: clamp(30px, 5vw, 72px) clamp(48px, 8.33vw, 120px);
}
[data-design="final"] .dc-crest-medal__rule {
  display: block; flex: 1 1 0; max-width: 26ch; height: 1px;
  background: linear-gradient(to right,
    color-mix(in srgb, var(--accent) 0%, transparent),
    color-mix(in srgb, var(--accent) 52%, transparent));
  animation: dc-crest-glow 34s ease-in-out infinite;
}
[data-design="final"] .dc-crest-medal__rule:last-child {
  background: linear-gradient(to left,
    color-mix(in srgb, var(--accent) 0%, transparent),
    color-mix(in srgb, var(--accent) 52%, transparent));
  animation-delay: -17s;
}
[data-design="final"] .dc-crest-medal__disc {
  display: block; flex: 0 0 auto;
  width: clamp(112px, 17vw, 224px); aspect-ratio: 1;
  opacity: calc(.82 * var(--pattern-intensity, 1));
  animation: dc-crest-turn 300s linear infinite;
}
[data-design="final"] .dc-crest-medal__disc svg { width: 100%; height: 100%; display: block; }
/* Every band on the same clock and the same direction: ceremonial means the
   whole thing turns together, not that its rings drift against each other. */
[data-design="final"] .dc-crest-medal__disc .mz { animation: dc-crest-turn 460s linear infinite; }
[data-design="final"] .dc-crest-medal__disc .mz-rings { animation: dc-crest-glow 40s ease-in-out infinite; }

@keyframes dc-crest-turn { to { transform: rotate(360deg); } }
@keyframes dc-crest-glow { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
@keyframes dc-crest-draw {
  0%   { stroke-dashoffset: 1000; }
  34%  { stroke-dashoffset: 0; }
  68%  { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -1000; }
}

/* A drawing that never finishes is a line nobody ever sees, so stopped motion
   gets the finished ornament rather than a frozen fragment of it. */
@media (prefers-reduced-motion: reduce) {
  [data-design="final"] .dc-crest-medal__disc,
  [data-design="final"] .dc-crest-medal__disc .mz,
  [data-design="final"] .dc-crest-medal__disc .mz-rings,
  [data-design="final"] .dc-crest-medal__rule,
  [data-design="final"] .dc-orn .dc-crest-konia svg,
  [data-design="final"] .dc-crest-bel .kl-line {
    animation: none !important; transform: none !important; opacity: 1 !important;
  }
  [data-design="final"] .dc-crest-bel .kl-line {
    stroke-dasharray: none !important; stroke-dashoffset: 0 !important;
  }
}


/* ── The four sections below the hero ─────────────────────────────────────
   Wedding dates, Fit printed (the navy interruption), Our commitments,
   Questions before ordering. One shared left datum, an 8px rhythm
   (~112px between sections desktop, ~64px mobile), one gesture per
   section. Everything reads the Crest tokens. */


/* Wedding dates: the season as a horizontal band. One wine datum line runs
   across the track; windows hang from it as columns, the pauses drawn
   narrow. Sideways scroll with snap on phones. */
[data-design="final"] .dc-final-cal {
  padding: 112px clamp(24px, 8.33vw, 120px);
}
[data-design="final"] .dc-final-cal__head { max-width: 62ch; margin: 0 0 44px; }
[data-design="final"] .dc-final-cal__sub { margin: 8px 0 0; color: var(--soft); font-size: 17px; }
[data-design="final"] .dc-final-cal__track {
  list-style: none; margin: 0; padding: 0; position: relative;
  display: grid; grid-template-columns: 0.55fr 1fr 0.55fr 1fr 1fr;
  gap: clamp(18px, 2.6vw, 40px);
}
[data-design="final"] .dc-final-cal__track::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform 1100ms cubic-bezier(.25,.1,.25,1) 120ms;
}
[data-design="final"] .dc-final-cal.is-in .dc-final-cal__track::before { transform: scaleX(1); }
[data-design="final"] .dc-final-cal__col {
  position: relative; padding-top: 26px;
  display: flex; flex-direction: column;
}
[data-design="final"] .dc-final-cal__col::before {
  content: ""; position: absolute; top: -8px; left: 0; width: 1px; height: 17px;
  background: var(--accent);
}
[data-design="final"] .dc-final-cal__col--pause::before { height: 9px; top: -4px; background: var(--bord); }
[data-design="final"] .dc-final-cal__dates {
  font-family: var(--serif); font-size: 13px; letter-spacing: 0.04em;
  color: var(--soft); font-variant-numeric: tabular-nums; margin-bottom: 12px;
}
[data-design="final"] .dc-final-cal__dates b {
  display: block; color: var(--ink); font-weight: 600;
  font-size: 17px; letter-spacing: 0.02em;
}
[data-design="final"] .dc-final-cal__dev {
  display: block; font-style: normal; color: var(--soft);
  font-size: 13px; margin-top: 4px; letter-spacing: 0.06em;
}
[data-design="final"] .dc-final-cal__name {
  font-family: var(--serif); font-weight: 500; margin: 0 0 8px;
  font-size: 18px; letter-spacing: 0.04em;
}
[data-design="final"] .dc-final-cal__col--pause .dc-final-cal__name { color: var(--soft); font-size: 15px; }
[data-design="final"] .dc-final-cal__line {
  margin: 0; font-size: 15px; line-height: 1.6; color: var(--soft);
}
[data-design="final"] .dc-final-cal__col--pause .dc-final-cal__line { color: var(--mut); font-size: 14px; }
[data-design="final"] .dc-final-cal__index { margin: 10px 0 0; font-size: 14px; color: var(--mut); }
[data-design="final"] .dc-final-cal__index a {
  color: var(--accent); text-decoration: none;
  border-bottom: 1px solid var(--bord); padding-bottom: 1px;
}
[data-design="final"] .dc-final-cal__index a:hover { border-color: var(--accent); }
[data-design="final"] .dc-final-cal__fig { margin: 16px 0 0; }
[data-design="final"] .dc-final-cal__fig img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: top;
  display: block; border: 1px solid var(--bord);
}
[data-design="final"] .dc-final-cal__note {
  margin: 30px 0 0; font-style: italic; color: var(--mut); font-size: 14px;
}
@media (max-width: 900px) {
  [data-design="final"] .dc-final-cal { padding: 64px clamp(20px, 6vw, 48px); }
  [data-design="final"] .dc-final-cal__track {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    padding-bottom: 8px; -webkit-overflow-scrolling: touch; gap: 20px;
  }
  [data-design="final"] .dc-final-cal__track::before { content: none; }
  [data-design="final"] .dc-final-cal__col {
    flex: 0 0 70vw; scroll-snap-align: start;
    border-top: 1px solid var(--accent); padding-top: 18px;
  }
  [data-design="final"] .dc-final-cal__col--pause { flex: 0 0 52vw; border-top-color: var(--bord); }
  [data-design="final"] .dc-final-cal__col::before { content: none; }
}

/* Fit, printed: the navy carbon-copy interruption. Full-bleed navy ground,
   ivory rules, wine spent once on the correction note. */
[data-design="final"] .dc-final-sheet {
  background: var(--final-navy, #1A2338);
  padding: 88px clamp(24px, 8.33vw, 120px);
  margin-bottom: 112px;
}
[data-design="final"] .dc-final-sheet__inner { max-width: 1080px; }
[data-design="final"] .dc-final-sheet__title { color: var(--paper); }
[data-design="final"] .dc-final-sheet__head { margin-bottom: 34px; }
[data-design="final"] .dc-final-sheet__sub { margin: 8px 0 0; color: var(--stone); font-size: 17px; }
[data-design="final"] .dc-final-sheet__cols {
  display: grid; grid-template-columns: minmax(0, 420px) 1fr; gap: clamp(32px, 5vw, 72px);
}
[data-design="final"] .dc-final-sheet__tablewrap { overflow-x: auto; }
[data-design="final"] .dc-final-sheet__table { width: 100%; border-collapse: collapse; }
[data-design="final"] .dc-final-sheet__table th,
[data-design="final"] .dc-final-sheet__table td {
  text-align: left; padding: 10px 14px; color: var(--paper);
  border-bottom: 1px solid rgba(246, 241, 231, 0.22);
  font-variant-numeric: tabular-nums;
}
[data-design="final"] .dc-final-sheet__table thead th {
  font-family: var(--serif); font-weight: 600; font-size: 12px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--stone);
  border-bottom: 1px solid var(--paper);
}
[data-design="final"] .dc-final-sheet__table tbody th {
  font-family: var(--serif); font-weight: 600; letter-spacing: 0.08em;
}
[data-design="final"] .dc-final-sheet__legend {
  margin: 14px 0 0; color: var(--stone); font-size: 14px; line-height: 1.6; max-width: 46ch;
}
[data-design="final"] .dc-final-sheet__margin { max-width: 46ch; }
[data-design="final"] .dc-final-sheet__rule-note {
  margin: 0 0 22px; padding-left: 14px; border-left: 2px solid var(--accent2);
  font-style: italic; font-size: 17px; line-height: 1.55; color: var(--paper);
}
[data-design="final"] .dc-final-sheet__minihead {
  font-family: var(--serif); font-weight: 600; font-size: 12px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--stone); margin: 0 0 10px;
}
[data-design="final"] .dc-final-sheet__steps {
  margin: 0 0 18px; padding-left: 18px; color: var(--stone);
  font-size: 15.5px; line-height: 1.6;
}
[data-design="final"] .dc-final-sheet__steps li { margin-bottom: 6px; }
[data-design="final"] .dc-final-sheet__cta {
  color: var(--paper); font-size: 15px; text-decoration: none;
  border-bottom: 1px solid rgba(246, 241, 231, 0.4); padding-bottom: 1px;
}
[data-design="final"] .dc-final-sheet__cta:hover { border-color: var(--paper); }
@media (max-width: 820px) {
  [data-design="final"] .dc-final-sheet { padding: 64px clamp(20px, 6vw, 48px); margin-bottom: 64px; }
  [data-design="final"] .dc-final-sheet__cols { grid-template-columns: 1fr; }
}

/* Our commitments: a compressed operational table. No ornament. */
[data-design="final"] .dc-final-comm {
  padding: 0 clamp(24px, 8.33vw, 120px) 112px;
}
[data-design="final"] .dc-final-comm__head { margin-bottom: 18px; }
[data-design="final"] .dc-final-comm__tablewrap { overflow-x: auto; }
[data-design="final"] .dc-final-comm__table {
  width: 100%; max-width: 880px; border-collapse: collapse;
  border-top: 1px solid var(--ink);
}
[data-design="final"] .dc-final-comm__table th,
[data-design="final"] .dc-final-comm__table td {
  text-align: left; vertical-align: top; padding: 14px 18px 14px 0;
  border-bottom: 1px solid var(--line);
}
[data-design="final"] .dc-final-comm__table th {
  font-family: var(--serif); font-weight: 600; font-size: 12px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent);
  white-space: nowrap; width: 1%; padding-right: clamp(24px, 4vw, 56px); padding-top: 17px;
}
[data-design="final"] .dc-final-comm__table td { font-size: 16px; line-height: 1.6; color: var(--soft); max-width: 62ch; }
@media (max-width: 700px) {
  [data-design="final"] .dc-final-comm { padding-bottom: 64px; }
}

/* Questions before ordering: the body face does the work. */
[data-design="final"] .dc-final-faq {
  padding: 0 clamp(24px, 8.33vw, 120px) 120px;
}
[data-design="final"] .dc-final-faq__head { margin-bottom: 10px; }
[data-design="final"] .dc-final-faq__list { margin: 0; max-width: 66ch; }
[data-design="final"] .dc-final-faq__item { padding: 20px 0; border-bottom: 1px solid var(--line); }
[data-design="final"] .dc-final-faq__item dt {
  font-family: var(--sans); font-weight: 600; font-size: 21px;
  line-height: 1.35; margin-bottom: 8px; color: var(--ink);
}
[data-design="final"] .dc-final-faq__item dd {
  margin: 0; font-size: 17px; line-height: 1.65; color: var(--soft); max-width: 60ch;
}
[data-design="final"] .dc-final-faq__more {
  display: inline-block; margin-top: 20px; font-size: 15px; color: var(--accent);
  border-bottom: 1px solid var(--bord); padding-bottom: 1px; text-decoration: none;
}
[data-design="final"] .dc-final-faq__more:hover { border-color: var(--accent); }
@media (max-width: 700px) {
  [data-design="final"] .dc-final-faq { padding-bottom: 72px; }
}

@media (prefers-reduced-motion: reduce) {
  [data-design="final"] .dc-final-cal__track::before { transition: none; transform: scaleX(1); }
}

/* ── Photography into the page: the rail, the register figures, the sheet ── */

/* The season's suits: a rail of tall frames, scrolling sideways on phones. */
[data-design="final"] .dc-final-rail {
  padding: 112px clamp(24px, 8.33vw, 120px) 0;
}
[data-design="final"] .dc-final-rail__head { margin: 0 0 28px; }
[data-design="final"] .dc-final-rail__sub { margin: 8px 0 0; color: var(--soft); font-size: 17px; }
[data-design="final"] .dc-final-rail__track {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(10px, 1.4vw, 18px);
}
[data-design="final"] .dc-final-rail__card {
  display: block; text-decoration: none; color: var(--ink);
}
[data-design="final"] .dc-final-rail__card img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: top;
  display: block; border: 1px solid var(--bord);
  filter: saturate(0.96);
  transition: filter 300ms ease, transform 300ms ease;
}
[data-design="final"] .dc-final-rail__card:hover img { filter: saturate(1.05); transform: translateY(-3px); }
[data-design="final"] .dc-final-rail__name {
  display: block; margin-top: 10px; font-family: var(--serif);
  font-weight: 500; font-size: 14px; letter-spacing: 0.06em;
}
[data-design="final"] .dc-final-rail__occ {
  display: block; margin-top: 3px; font-size: 12.5px; color: var(--mut); letter-spacing: 0.02em;
}
@media (max-width: 900px) {
  [data-design="final"] .dc-final-rail { padding-top: 64px; }
  [data-design="final"] .dc-final-rail__track {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    gap: 12px; padding-bottom: 8px; -webkit-overflow-scrolling: touch;
  }
  [data-design="final"] .dc-final-rail__card { flex: 0 0 58vw; scroll-snap-align: start; }
}

/* The sheet's garment: a third column on the navy ground. */
[data-design="final"] .dc-final-sheet__cols {
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr) auto;
}
[data-design="final"] .dc-final-sheet__fig { margin: 0; }
[data-design="final"] .dc-final-sheet__fig img {
  width: clamp(150px, 17vw, 230px); aspect-ratio: 3 / 4; object-fit: cover; object-position: top;
  display: block; border: 1px solid rgba(246, 241, 231, 0.35);
}
[data-design="final"] .dc-final-sheet__fig figcaption {
  margin-top: 8px; font-size: 12.5px; color: var(--stone); font-style: italic;
}
@media (max-width: 1020px) {
  [data-design="final"] .dc-final-sheet__cols { grid-template-columns: minmax(0, 420px) 1fr; }
  [data-design="final"] .dc-final-sheet__fig { grid-column: 1 / -1; }
  [data-design="final"] .dc-final-sheet__fig img { width: clamp(150px, 30vw, 230px); }
}
@media (max-width: 820px) {
  [data-design="final"] .dc-final-sheet__cols { grid-template-columns: 1fr; }
}

/* Plain frames for the photographs: hairline, square, quiet. */
[data-design="final"] .dc-final-rail__card img { aspect-ratio: 2 / 3; }
[data-design="final"] .dc-final-sheet__fig img {
  width: clamp(150px, 17vw, 230px); aspect-ratio: 2 / 3;
  object-fit: cover; object-position: top; display: block;
  border: 1px solid rgba(246, 241, 231, 0.35);
}