:root {
  color-scheme: light;

  /* House palette (2026-09 redesign, after loropiana.com). Mostly light, as Loro Piana
     is: an ivory page with white cards, so forms read as forms. Deep wine red is the
     "primary" colour (the wordmark, headings, links, the main button, the top strip,
     selected states), Oxford blue the quiet second colour (the footer, dark bands, small
     labels), and burnt orange is kept only for guides. One light theme.
     Older token names stay so every component keeps working:
       --ink / --ink-2  body text
       --paper          raised surfaces (cards, the form), white on ivory
       --chalk          the tinted band behind price lists
       --brass-dark     primary-coloured text (wine)
       --brass-2        accent text on the Oxford band. */
  --primary: #5a1424;        /* deep wine */
  --primary-2: #7a2436;      /* hover / pressed */
  --primary-edge: #5a1424;
  --primary-soft: #f3e6e7;   /* hover and selected-state wash */
  --on-primary: #f7f4ee;     /* ivory lettering on wine */
  --secondary: #14213d;      /* Oxford blue: footer, dark bands */
  --secondary-2: #24365c;
  --on-secondary: #f7f4ee;
  --orange: #b4501f;         /* burnt orange: guides only. 4.9:1 on --bg */
  --orange-soft: #f7e6da;
  --label: #24365c;          /* Oxford blue for eyebrows and small labels */
  --wa-btn: var(--secondary); /* WhatsApp buttons (the round float stays WhatsApp green) */

  --ink: #1d1518;
  --ink-2: #463a3e;
  --chalk: #efe9df;

  --bg: #f7f4ee;             /* ivory */
  --paper: #ffffff;
  --slot: #ebe5da;           /* empty image slots */
  --slot-2: #e2dace;

  --line: #dcd3c5;
  --muted: #5f5a5d;
  --muted-dark: #c9cfdc;     /* muted text on the Oxford band */

  --brass: var(--primary);
  --brass-dark: var(--primary);
  --brass-2: #cdd7ee;

  --wa: #137a3f;
  --on-brand: #fff;
  --error: #b42318;
  --error-bg: #fbe6e2;
  --shadow: #000;

  /* The live suit preview keeps a light backdrop so dark cloths still read. */
  --stage: #fffdf8;
  --stage-2: #e9e1d3;

  --radius: 2px;
  --display: "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --script: "Italianno", "Snell Roundhand", cursive;
  --body: Optima, "Optima nova", Candara, "Mulish", "Segoe UI", sans-serif;
  --wrap: 1120px;
  --head-h: 64px;
  --head-total: 64px; /* sticky header height: the logo row, plus the nav row from 820px */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  padding-bottom: 76px; /* room for the mobile contact bar */
}
img { max-width: 100%; display: block; }
/* <picture> is only a wrapper for the WebP source: the <img> inside is what lays out. */
picture { display: contents; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.08; letter-spacing: -0.01em; margin: 0 0 .5em; }
h1 { font-size: clamp(2.4rem, 8vw, 4.6rem); font-weight: 500; }
h2 { font-size: clamp(1.8rem, 5vw, 2.8rem); font-weight: 500; }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1em; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 16px; }
.eyebrow { font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--brass-dark); margin-bottom: .8rem; }
.muted { color: var(--muted); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Stitch line — the tailor's chalk motif */
.stitch { border: 0; border-top: 2px dashed var(--line); margin: 0; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 16px; }
.logo { font-family: var(--display); font-size: 1.35rem; font-weight: 600; text-decoration: none; display: flex; align-items: center; gap: .45rem; white-space: nowrap; }
.logo-mark { width: 26px; height: 26px; border-radius: 50%; background: var(--primary); color: var(--on-primary); display: grid; place-items: center; font-size: .8rem; font-family: var(--body); font-weight: 800; }
.nav { display: none; gap: 22px; align-items: center; }
.nav a { text-decoration: none; font-weight: 600; font-size: .95rem; }
.nav a:hover { color: var(--brass-dark); }
.btn.header-cta { display: none; }
/* "I know what I want" joins the header only where there is room beside "Book a home visit". */
.btn.header-design { display: none; }
@media (min-width: 1080px) { .btn.header-design { display: inline-flex; } }
@media (min-width: 820px) {
  .btn.header-cta { display: inline-flex; }
  body { padding-bottom: 0; }
}
/* Six links plus the logo and the call to action need the room. */
@media (min-width: 1080px) { .nav { display: inline-flex; } }
/* Below 1080px the section links move to a scrolling row under the (sticky) header. */
.nav-strip { display: flex; gap: 20px; overflow-x: auto; scrollbar-width: none; padding: 10px 16px; border-bottom: 1px solid var(--line); background: var(--bg); white-space: nowrap; }
.nav-strip::-webkit-scrollbar { display: none; }
.nav-strip a { text-decoration: none; font-weight: 700; font-size: .9rem; }
.nav-strip a[aria-current="page"] { color: var(--brass-dark); }
@media (min-width: 1080px) { .nav-strip { display: none; } }
.nav a[aria-current="page"] { color: var(--brass-dark); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 48px; padding: 0 22px; border-radius: 999px; border: 2px solid var(--primary);
  font: 700 1rem var(--body); text-decoration: none; cursor: pointer; transition: transform .15s, background .15s, color .15s;
  background: var(--primary); color: var(--on-primary);
}
.btn:hover { transform: translateY(-1px); }
.btn:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .choice:focus-within {
  outline: 3px solid var(--brass); outline-offset: 2px;
}
.btn-ghost { background: transparent; color: var(--ink); }
.btn-wa { background: var(--wa); border-color: var(--wa); color: var(--on-brand); }
.btn-small { min-height: 40px; padding: 0 16px; font-size: .9rem; }
.btn[disabled] { opacity: .6; cursor: wait; transform: none; }
.icon { width: 20px; height: 20px; flex: none; }

/* ---------- Mobile contact bar ---------- */
.contact-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--primary);
}
.contact-bar .btn { min-height: 48px; border-color: var(--chalk); }
.contact-bar .btn-ghost { color: var(--chalk); }
@media (min-width: 820px) {
  .contact-bar { display: none; }
}
.wa-float { display: none; }
@media (min-width: 820px) {
  .wa-float {
    display: grid; place-items: center; position: fixed; right: 24px; bottom: 24px; z-index: 30;
    width: 60px; height: 60px; border-radius: 50%; background: var(--wa); color: var(--on-brand); box-shadow: 0 10px 30px color-mix(in srgb, var(--shadow) 20%, transparent);
  }
  .wa-float .icon { width: 30px; height: 30px; }
}

/* ---------- Hero ---------- */
.hero { padding: 48px 0 56px; position: relative; overflow: hidden; }
.hero-grid { display: grid; gap: 40px; align-items: center; }
.hero h1 em { font-style: italic; color: var(--brass-dark); }
.hero-lede { font-size: 1.15rem; max-width: 34ch; color: var(--ink-2); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 20px; }
.hero-note { font-size: .9rem; color: var(--muted); display: flex; align-items: center; gap: .5rem; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--wa); box-shadow: 0 0 0 4px color-mix(in srgb, var(--wa) 18%, transparent); }

@media (min-width: 900px) {
  .hero { padding: 80px 0 96px; }
  .hero-grid { grid-template-columns: 1.25fr 1fr; }
}

/* Hero photograph — a tall 3:4 portrait with a subtle frame. Small and centred on
   phones (stacked under the headline, at a reduced height so it doesn't push the
   actions below the fold); fills its grid column once the hero goes two-up at 900px. */
.hero-photo {
  aspect-ratio: 3 / 4; max-width: 260px; margin: 0 auto;
  border: 2px solid var(--line); border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 16px 36px -12px color-mix(in srgb, var(--shadow) 30%, transparent);
}
.hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (min-width: 900px) {
  .hero-photo { max-width: none; width: 100%; }
}

/* ---------- Sections ---------- */
.section { padding: 64px 0; }
.section-dark { background: var(--primary); color: var(--on-primary); }
.section-dark .eyebrow { color: var(--brass-2); }
.section-dark .muted { color: var(--muted-dark); }
.section-chalk { background: var(--chalk); }
.section-head { max-width: 640px; margin-bottom: 36px; }

/* "Why Darzi Direct" feature grid — fit, cloth, free alterations and (last, smallest claim)
   turnaround speed, presented as four peer reasons rather than one headline promise. */
.why-body { display: grid; gap: 20px; }
.why-photo { aspect-ratio: 4 / 3; border: 2px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.why-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (min-width: 900px) { .why-body { grid-template-columns: 300px 1fr; align-items: stretch; } .why-photo { aspect-ratio: auto; height: 100%; } }

.why-grid { display: grid; gap: 16px; }
@media (min-width: 640px) { .why-grid { grid-template-columns: repeat(2, 1fr); } }
.why-item { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.why-item h3 { margin: .2rem 0 .35rem; font-size: 1.1rem; }
.why-item p { color: var(--muted); margin: 0; font-size: .92rem; }

.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 28px; counter-reset: step; }
.steps li { counter-increment: step; padding-top: 18px; border-top: 2px dashed color-mix(in srgb, var(--chalk) 30%, transparent); }
.steps li::before { content: counter(step, decimal-leading-zero); font-family: var(--display); font-size: 2.2rem; color: var(--brass-2); display: block; margin-bottom: .3rem; }
.steps p { color: var(--muted-dark); margin: 0; }
.step-links { list-style: none; padding: 0; margin: .6rem 0 0; display: grid; gap: 6px; }
.step-links li { counter-increment: none; padding: 0; border: 0; }
.step-links li::before { content: none; }
.step-links a { color: var(--brass-2); font-weight: 700; text-decoration: none; }
.step-links a:hover { text-decoration: underline; }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(3, 1fr); } }

.way-tag { font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--brass-dark); }
.way-link { font-weight: 700; }

.prices { display: grid; gap: 0; border-top: 2px solid var(--primary); }
.price-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 18px 0; border-bottom: 1px dashed var(--line); }
.price-row h3 { margin: 0; font-size: 1.3rem; }
.price-row .muted { font-size: .9rem; margin: .2rem 0 0; }
.price { font-family: var(--display); font-size: 1.5rem; white-space: nowrap; }
.price small { font-family: var(--body); font-size: .75rem; color: var(--muted); display: block; text-align: right; }

.faq details { border-bottom: 1px dashed var(--line); padding: 18px 0; }
.faq summary { cursor: pointer; font-weight: 700; font-size: 1.05rem; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--display); font-size: 1.5rem; line-height: 1; color: var(--brass-dark); }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: .8rem 0 0; color: var(--ink-2); }

/* One-line price summary (area pages). */
.price-line { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; }
.price-line p { margin: 0; max-width: 62ch; }
/* Quick enquiry: a direct line for people who'd rather talk. */
.quick-talk { font-size: .92rem; }
.quick-talk a { font-weight: 700; }


/* ---------- Footer ---------- */
.site-footer { padding: 40px 0; border-top: 1px solid var(--line); font-size: .9rem; color: var(--muted); }
.site-footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; }
.site-footer a { text-decoration: none; }

/* ---------- Order form ---------- */
.order-page { padding: 32px 0 64px; }
.order-page h1 { font-size: clamp(2rem, 7vw, 3.2rem); }
/* The form reads at a 760px measure; only the configurator breaks out to the full wrap. */
.form > * { max-width: 760px; }
.form > .fieldset-cfg { max-width: none; }
.fieldset { border: 0; padding: 0; margin: 0 0 36px; min-width: 0; scroll-margin-top: calc(var(--head-total) + 20px); }
.fieldset > legend { font-family: var(--display); font-size: 1.5rem; font-weight: 500; padding: 0; margin-bottom: 4px; display: flex; gap: .6rem; align-items: baseline; }
.fieldset > legend .n { font-family: var(--body); font-size: .8rem; font-weight: 800; color: var(--brass-dark); letter-spacing: .1em; }
.fieldset > .hint { color: var(--muted); font-size: .92rem; margin-bottom: 16px; }

.choices { display: grid; gap: 10px; }
@media (min-width: 640px) { .choices-3 { grid-template-columns: repeat(3, 1fr); } .choices-2 { grid-template-columns: repeat(2, 1fr); } }
.choice { position: relative; display: block; cursor: pointer; }
.choice input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.choice-body { display: block; height: 100%; padding: 16px; border: 2px solid var(--line); border-radius: var(--radius); background: var(--paper); transition: border-color .15s, background .15s; }
.choice-body strong { display: block; font-size: 1.02rem; }
.choice-body span { display: block; color: var(--muted); font-size: .88rem; margin-top: 2px; }
/* Compact photo at the top of a choice card (order page mode cards). Higher specificity
   than the generic ".choice-body span" rule above, which would otherwise mute-colour
   and margin the image span like a description line. */
.choice-body .choice-photo { margin: 0 0 10px; aspect-ratio: 4 / 3; max-width: 220px; border-radius: calc(var(--radius) - 6px); overflow: hidden; }
.choice-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.choice input:checked + .choice-body { border-color: var(--primary); background: var(--chalk); box-shadow: inset 0 0 0 1px var(--primary); }
.choice input:checked + .choice-body strong::before { content: "✓ "; color: var(--brass-dark); }
.choice-body .choice-price { color: var(--ink); font-family: var(--display); font-size: 1.15rem; font-weight: 600; margin-top: 6px; }
.choice-body .choice-badge { display: inline-block; margin: 0 0 6px; padding: 2px 8px; border-radius: 999px; background: var(--primary); color: var(--on-primary); font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }

/* Extras under the garment choices (configurator): tick-boxes for shirt / tie / pocket
   square and the trouser options. */
.extras { margin-top: 18px; }
.extras-head { font-weight: 800; font-size: .92rem; margin: 0 0 8px; }
.extras-note { color: var(--muted); font-size: .88rem; margin: 10px 0 0; }
.extras-list { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.extra { position: relative; display: block; cursor: pointer; }
.extra input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.extra-body { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 10px; padding: 12px 14px 12px 40px; border: 2px solid var(--line); border-radius: var(--radius); background: var(--paper); position: relative; }
.extra-body::before { content: ""; position: absolute; left: 14px; top: 50%; width: 16px; height: 16px; margin-top: -8px; border: 2px solid var(--muted); border-radius: 4px; background: var(--paper); }
.extra-body span { color: var(--muted); font-size: .88rem; white-space: nowrap; }
.extra input:checked + .extra-body { border-color: var(--primary); background: var(--chalk); }
.extra input:checked + .extra-body::before { content: "✓"; border-color: var(--primary); background: var(--primary); color: var(--on-primary); font-size: 12px; line-height: 12px; text-align: center; font-weight: 800; }
.extra input:focus-visible + .extra-body { outline: 3px solid var(--brass); outline-offset: 2px; }
.cloth-intro { margin: -4px 0 14px; }

.grid-2 { display: grid; gap: 14px; }
@media (min-width: 560px) { .grid-2 { grid-template-columns: 1fr 1fr; } }
.grid-m { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
@media (min-width: 640px) { .grid-m { grid-template-columns: repeat(3, 1fr); } }

.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-weight: 700; font-size: .92rem; }
.field .opt { color: var(--muted); font-weight: 500; }

/* Measurement fields on the self-measure form: a small "where the tape goes" thumbnail
   (diagram("measure", key), drawn in currentColor) sits beside the label rather than
   above it, so up to 16 of these stay compact — .grid-m already packs 2–3 per row, and
   stacking the thumbnail would roughly double each field's height. */
.field-measure .field-head { display: flex; align-items: center; gap: 10px; }
.field-head-text { flex: 1; min-width: 0; }
.m-guide {
  flex: none; width: 56px; height: 56px; padding: 6px; display: flex; align-items: center; justify-content: center;
  background: var(--paper); border: 1px solid var(--line); border-radius: calc(var(--radius) - 6px); color: var(--ink);
}
.m-guide svg { width: 100%; height: 100%; }
.field input, .field select, .field textarea {
  font: 500 16px var(--body); color: var(--ink); background: var(--paper); border: 1.5px solid var(--line); border-radius: 10px;
  padding: 12px 14px; min-height: 48px; width: 100%;
}
.field textarea { min-height: 96px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--primary); }
.field .help { font-size: .8rem; color: var(--muted); line-height: 1.35; }
.field .err { font-size: .85rem; color: var(--error); font-weight: 600; display: none; }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: var(--error); }
.field.invalid .err { display: block; }
.choices.invalid .choice-body { border-color: var(--error); }
.group-err { color: var(--error); font-weight: 600; font-size: .9rem; margin-top: 8px; display: none; }
.group-err.show { display: block; }

.unit-toggle { display: inline-flex; border: 1.5px solid var(--primary); border-radius: 999px; overflow: hidden; margin-bottom: 16px; }
.unit-toggle label { cursor: pointer; }
.unit-toggle input { position: absolute; opacity: 0; }
.unit-toggle span { display: block; padding: 8px 18px; font-weight: 700; font-size: .9rem; }
.unit-toggle input:checked + span { background: var(--primary); color: var(--on-primary); }
.unit-toggle input:focus-visible + span { outline: 3px solid var(--brass); }

.measure-tip { background: var(--chalk); border-left: 4px solid var(--brass); padding: 14px 16px; border-radius: 0 10px 10px 0; font-size: .92rem; margin-bottom: 18px; }
.measure-tip p:last-child { margin: 0; }

/* ---------- Style tiles (configurator) ---------- */
/* A responsive grid of selectable option tiles. Each .tile is a <label> wrapping a
   visually-hidden radio/checkbox, a .tile-art box (always on --paper, since the SVG
   diagrams inside draw in currentColor and need a defined light-reading surface in
   both themes), and a .tile-label. Selection state is driven entirely by :has(:checked)
   on the .tile itself — no JS class toggling needed.

   The selected state is deliberately NOT colour-only: border width steps up, the frame
   gets a background wash, and a check badge fills in — three independent cues, so the
   state still reads in greyscale or for colour-blind users.

   Keyboard focus is the main accessibility risk here, since the radio itself is
   invisible (opacity: 0) — an outline drawn on the input would be invisible too, as
   opacity hides the whole box including its outline. :has(input:focus-visible) puts
   the ring on the visible .tile frame instead, and only for keyboard focus.

   Columns are sized with auto-fill/minmax rather than fixed per-breakpoint counts:
   the old repeat(N, 1fr) steps let a long label's min-content width force a column
   wider than its fair share, which could overflow the grid past the form's 760px
   measure. minmax(108px, 1fr) fits more tiles per row as space allows (about 3 across
   a 375px phone, 6+ across the 760px desktop form) while keeping every column an
   equal, content-independent width — and 108px leaves the diagrams (drawn to read at
   ~120px) only a little smaller once the tile's own padding/border is subtracted. */
.tiles { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); }

.tile {
  position: relative; display: flex; flex-direction: column; gap: 6px;
  padding: 6px; border: 2px solid var(--line); border-radius: var(--radius);
  background: var(--bg); cursor: pointer; text-align: center;
  transition: border-color .15s, border-width .15s, background-color .15s, box-shadow .15s;
}
.tile input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.tile-art {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1; border-radius: calc(var(--radius) - 6px);
  background: var(--paper); color: var(--ink); padding: 8px;
}
.tile-art svg { width: 100%; height: 100%; }
.tile-label { font-size: .78rem; font-weight: 700; line-height: 1.2; padding: 0 2px 1px; }

/* Fallback for options that don't have a drawing yet (most of them, at first —
   see public/js/shared/diagrams.js). The option's name already appears once, in
   .tile-label below the art box — repeating it here as well read as a stutter, so
   this box stays empty of text and instead shows one quiet chalk-dot mark, framed by
   the same dashed "chalk line" that appeared here before. That reads as "no drawing
   yet" rather than as an error or a blank/broken box. */
.tile-text {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
  color: var(--line); border: 1px dashed var(--line); border-radius: calc(var(--radius) - 8px);
}
.tile-text::before { content: "○"; font-size: 1.3rem; line-height: 1; }

/* Check badge — an empty ring by default, fills solid on selection. Present regardless
   of colour so the selected state survives greyscale/print. */
.tile::after {
  content: "✓"; position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: .7rem; font-weight: 800;
  background: var(--paper); border: 2px solid var(--line); color: transparent;
  transition: background-color .15s, border-color .15s, color .15s;
}
.tile:has(:checked) {
  border-width: 3px; border-color: var(--primary); background: var(--chalk);
  box-shadow: inset 0 0 0 1px var(--primary), 0 2px 10px color-mix(in srgb, var(--shadow) 12%, transparent);
}
.tile:has(:checked) .tile-art { color: var(--brass-dark); }
.tile:has(:checked)::after { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.tile:has(input:focus-visible) { outline: 3px solid var(--brass); outline-offset: 3px; }

/* ---------- Recommended looks ---------- */
.looks { display: grid; gap: 16px; }
@media (min-width: 640px) { .looks { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .looks { grid-template-columns: repeat(3, 1fr); } }

.look-card {
  position: relative; display: flex; flex-direction: column; gap: 10px;
  padding: 22px; padding-right: 48px; border: 2px solid var(--line); border-radius: var(--radius);
  background: var(--paper); cursor: pointer;
  transition: border-color .15s, border-width .15s, background-color .15s, box-shadow .15s;
}
.look-card input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.look-card h3 { margin: 0; font-size: 1.3rem; }
.look-why { color: var(--muted); font-size: .92rem; margin: 0; font-style: italic; }
.look-spec { font-size: .88rem; color: var(--ink-2); margin: 0; line-height: 1.5; }
/* Carries a full sentence ("A 3-piece starts at ₹15,999 — the same cloth as a
   2-piece comes in under your budget"), so it reads with normal sentence case —
   uppercasing a whole sentence reads as shouting, especially about money. It's set
   apart from .look-why/.look-spec by weight, a smaller size and the accent colour
   instead. */
.badge-overbudget {
  align-self: flex-start; font-size: .8rem; font-weight: 700;
  color: var(--brass-dark); background: var(--chalk); border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px;
}
.look-card::after {
  content: "✓"; position: absolute; top: 16px; right: 16px; width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: .8rem; font-weight: 800;
  background: var(--bg); border: 2px solid var(--line); color: transparent;
  transition: background-color .15s, border-color .15s, color .15s;
}
.look-card:has(:checked) {
  border-width: 3px; border-color: var(--primary); background: var(--chalk);
  box-shadow: inset 0 0 0 1px var(--primary), 0 2px 10px color-mix(in srgb, var(--shadow) 12%, transparent);
}
.look-card:has(:checked)::after { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.look-card:has(input:focus-visible) { outline: 3px solid var(--brass); outline-offset: 3px; }
/* The look's mini preview: full card width (the check badge overlays its corner), on the
   same spotlight backdrop as the configurator's stage. Decorative — aria-hidden in markup. */
.look-art {
  display: flex; justify-content: center; height: 230px; margin: -8px -34px 4px -8px;
  border-radius: calc(var(--radius) - 4px); overflow: hidden;
  background: radial-gradient(ellipse at 50% 35%, var(--stage) 0%, var(--stage-2) 100%);
}
.look-art svg { height: 100%; width: auto; padding: 10px 0 4px; }
.look-price { font-size: .9rem; margin: 0; }
.look-price strong { font-family: var(--display); font-size: 1.2rem; font-weight: 600; }
.look-price span { display: block; color: var(--muted); font-size: .78rem; }

/* ---------- Configurator (direct mode) ---------- */
/* Rail of categories · options for the active one · sticky live preview. The rail and
   panels are presentation over plain named radios (see order.js), so everything here is
   layout and selected/focus states.

   Phones (<900px) stack it as: compact sticky preview (≤40vh, total beside it), then the
   rail as a horizontally scrolling tab strip, then the options. The tab strip is the only
   thing allowed to scroll sideways; every grid item carries min-width: 0 so long option
   labels can't push the page wider. */
.cfg { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); grid-template-areas: "aside" "rail" "options"; margin-top: 8px; }
.cfg-rail { grid-area: rail; min-width: 0; position: relative; }
.cfg-options { grid-area: options; min-width: 0; }
.cfg-aside { grid-area: aside; min-width: 0; }

.cfg-tab {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 0;
  font: inherit; color: var(--ink); text-align: left; cursor: pointer;
  background: none; border: 0; transition: background-color .15s, border-color .15s, color .15s;
}
.cfg-tab-name { font-weight: 700; font-size: .92rem; line-height: 1.25; }
.cfg-tab-value { font-size: .76rem; color: var(--muted); line-height: 1.3; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cfg-tab:focus-visible { outline: 3px solid var(--brass); outline-offset: -3px; }

.cfg-panel-title { font-size: 1.25rem; font-weight: 500; margin: 0 0 14px; }
.cfg-options .tiles { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; }
.tiles.invalid .tile, .cloth-groups.invalid .choice-body, .cloth-groups.invalid .swatch-img { border-color: var(--error); }

/* Cloth: two plain choices, then swatches grouped by family with the family's price step. */
.cloth-special { margin-bottom: 22px; grid-template-columns: 1fr 1fr; }
@media (max-width: 639px) { .cloth-special .choice-body { padding: 12px; } }
.cloth-family + .cloth-family { margin-top: 22px; }
.cloth-family-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  margin: 0 0 10px; padding-bottom: 6px; border-bottom: 1px dashed var(--line); font-weight: 700; font-size: .92rem;
}
.cloth-step { font-size: .82rem; font-weight: 700; color: var(--brass-dark); white-space: nowrap; }
.cloth-note { font-size: .92rem; }
.swatches { display: grid; gap: 12px 10px; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
.swatch { position: relative; display: flex; flex-direction: column; gap: 6px; cursor: pointer; text-align: center; min-width: 0; }
.swatch input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.swatch-img {
  display: block; aspect-ratio: 1; border-radius: 10px; border: 2px solid var(--line);
  /* The fabric tiles are rendered at 256px (tools/make-fabrics.py). Scaling that down
     to fit the ~84px swatch box (the old 128px here) downsamples the fine "plain"
     weave (poly-viscose) below its own period, which beats against the box's own
     pixel grid and reads as a checkered moiré instead of cloth. Painting the texture
     at native scale (or larger) avoids the downscale entirely — the swatch shows a
     genuine, if cropped, patch of the weave, the way twill/herringbone/pinstripe
     already read correctly at closer to native size. */
  background-size: 256px 256px; background-repeat: repeat;
  box-shadow: inset 0 -12px 20px color-mix(in srgb, var(--shadow) 18%, transparent);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.swatch:hover .swatch-img { transform: translateY(-1px); }
.swatch-label { font-size: .78rem; font-weight: 700; line-height: 1.2; }
.swatch::after {
  content: "✓"; position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: .7rem; font-weight: 800;
  background: var(--primary); color: var(--on-primary); border: 2px solid var(--paper);
  opacity: 0; transform: scale(.6); transition: opacity .15s, transform .15s;
}
.swatch:has(:checked) .swatch-img {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--primary), inset 0 -12px 20px color-mix(in srgb, var(--shadow) 18%, transparent);
}
.swatch:has(:checked)::after { opacity: 1; transform: none; }
.swatch:has(:checked) .swatch-label { color: var(--brass-dark); }
.swatch:has(input:focus-visible) .swatch-img { outline: 3px solid var(--brass); outline-offset: 5px; }

/* Preview column: running total, the drawing on a spotlight stage, view toggle, nav. */
.cfg-total { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; margin-bottom: 10px; }
.cfg-total-label { font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--brass-dark); }
.cfg-total-amt { font-family: var(--display); font-size: 2rem; font-weight: 500; line-height: 1; }
.cfg-total-note { flex-basis: 100%; font-size: .78rem; color: var(--muted); }
.cfg-total-note:empty { display: none; }

.cfg-stage {
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: radial-gradient(ellipse at 50% 36%, var(--stage) 0%, var(--stage-2) 100%);
}
.cfg-stage svg { display: block; height: 100%; width: auto; max-width: 100%; }

.cfg-views {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; width: fit-content; max-width: 100%;
  margin: 12px auto 0; padding: 4px; border: 1.5px solid var(--line); border-radius: 999px; background: var(--paper);
}
.cfg-views button {
  font: 700 .85rem var(--body); color: var(--ink); background: none; border: 0; border-radius: 999px;
  min-height: 36px; padding: 0 16px; cursor: pointer; transition: background-color .15s, color .15s;
}
.cfg-views button[aria-pressed="true"] { background: var(--primary); color: var(--on-primary); }
.cfg-views button:focus-visible { outline: 3px solid var(--brass); outline-offset: 2px; }

.cfg-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.cfg-nav .cfg-continue { grid-column: 1 / -1; }
.cfg-nav .btn[disabled] { opacity: .35; cursor: default; }
.cfg-nav-bottom { display: none; }

@media (min-width: 900px) {
  .cfg {
    grid-template-columns: 188px minmax(0, 1fr) minmax(320px, 390px);
    grid-template-areas: "rail options aside"; gap: 28px; align-items: start;
  }
  .cfg-rail { position: sticky; top: calc(var(--head-total) + 20px); display: flex; flex-direction: column; gap: 2px; border-left: 1px solid var(--line); }
  .cfg-tab { width: 100%; margin-left: -1px; padding: 10px 14px; border-left: 3px solid transparent; border-radius: 0 10px 10px 0; }
  .cfg-tab:hover { background: color-mix(in srgb, var(--paper) 55%, transparent); }
  .cfg-tab[aria-selected="true"] { border-left-color: var(--brass); background: var(--paper); }
  .cfg-tab[aria-selected="true"] .cfg-tab-value { color: var(--brass-dark); }
  .cfg-aside { position: sticky; top: calc(var(--head-total) + 16px); }
  .cfg-stage { height: clamp(360px, calc(100vh - 330px), 600px); padding: 14px 0 6px; }
}

@media (max-width: 899px) {
  .cfg-aside {
    position: sticky; top: var(--head-total); z-index: 5; max-height: 40vh;
    display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "stage total" "stage views";
    align-items: center; gap: 6px 14px; margin: 0 -16px; padding: 8px 16px;
    background: var(--bg); border-bottom: 1px solid var(--line);
    box-shadow: 0 8px 16px -12px color-mix(in srgb, var(--shadow) 30%, transparent);
  }
  .cfg-stage { grid-area: stage; height: calc(40vh - 16px); max-height: 340px; aspect-ratio: 300 / 520; padding: 6px 0 2px; }
  .cfg-total { grid-area: total; align-self: end; flex-direction: column; align-items: flex-start; margin: 0; }
  .cfg-total-amt { font-size: 1.7rem; }
  /* A narrow column beside the drawing: stack the views rather than wrap a pill. */
  .cfg-views { grid-area: views; align-self: start; flex-direction: column; align-items: stretch; margin: 0; border-radius: 16px; }
  .cfg-views button { min-height: 32px; padding: 0 14px; font-size: .8rem; border-radius: 12px; text-align: left; }
  .cfg-nav-side { display: none; }
  .cfg-nav-bottom { display: grid; margin-top: 22px; }

  .cfg-rail {
    display: flex; gap: 6px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
    margin: 0 -16px; padding: 2px 16px 6px;
  }
  .cfg-rail::-webkit-scrollbar { display: none; }
  .cfg-tab { flex: none; align-items: center; max-width: 170px; padding: 6px 14px; border: 1.5px solid var(--line); border-radius: 999px; background: var(--paper); }
  .cfg-tab[aria-selected="true"] { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
  .cfg-tab[aria-selected="true"] .cfg-tab-value { color: var(--chalk); opacity: .8; }
}

/* Lining, tie and pocket-square swatches reuse .swatch; paisley gets a small printed pattern. */
.swatch-img.accent-paisley {
  background-image:
    radial-gradient(circle at 30% 30%, #c9a24a 0 3px, transparent 4px),
    radial-gradient(ellipse 7px 11px at 70% 65%, #b8475a 0 60%, transparent 62%),
    radial-gradient(circle at 70% 65%, #e6d3ad 0 2px, transparent 3px);
  background-size: 28px 28px;
}

/* ---------- "Get help from a tailor" (configurator) ---------- */
.link-btn { font: inherit; font-weight: 700; color: var(--brass-dark); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.tailor-help { margin-top: 16px; padding: 14px; border: 1.5px dashed var(--brass); border-radius: var(--radius); background: color-mix(in srgb, var(--chalk) 45%, var(--paper)); }
.tailor-help-head { margin: 0 0 10px; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; }
.tailor-help-head strong { font-size: .95rem; }
.tailor-help-head span { font-size: .78rem; color: var(--muted); }
.tailor-help-ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.tailor-help-way {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 64px; padding: 8px 4px;
  font: 700 .8rem/1.2 var(--body); color: var(--ink); text-align: center; cursor: pointer;
  background: var(--paper); border: 1.5px solid var(--line); border-radius: 10px; transition: border-color .15s, background-color .15s;
}
.tailor-help-way:hover { border-color: var(--primary); }
.tailor-help-way:focus-visible { outline: 3px solid var(--brass); outline-offset: 2px; }
.tailor-help-way .icon { color: var(--brass-dark); }
.tailor-help-inline { margin-top: 22px; }

/* Top-right "Get help from a tailor" (order page). Once the visitor scrolls past the
   first step, order.js adds body.help-float-on: the pill takes the header CTA's place,
   and on wider screens the three-option card drops down under it until dismissed. */
.site-header .help-float-pill { display: none; }
body.help-float-on .site-header .header-cta, body.help-float-on .site-header .header-design { display: none; }
body.help-float-on .site-header .help-float-pill { display: inline-flex; animation: help-pop .3s ease-out; }
.help-float-pill {
  align-items: center; gap: 8px; min-height: 40px; padding: 0 16px;
  font: 700 .9rem var(--body); color: var(--on-primary); background: var(--primary); cursor: pointer;
  border: 0; border-radius: 999px; white-space: nowrap;
}
.help-float-pill .icon { width: 18px; height: 18px; }
.help-float-pill:hover { filter: brightness(1.06); }
.help-float-pill:focus-visible { outline: 3px solid var(--brass); outline-offset: 2px; }
.help-float {
  position: fixed; top: calc(var(--head-total) + 12px); right: max(16px, calc((100vw - 1200px) / 2)); z-index: 25; width: min(320px, calc(100vw - 32px));
  opacity: 0; visibility: hidden; transform: translateY(-10px);
  transition: opacity .25s, transform .25s, visibility 0s linear .25s;
}
body.help-float-on .help-float:not(.is-min) { opacity: 1; visibility: visible; transform: none; transition: opacity .25s, transform .25s, visibility 0s; }
.help-float-card {
  position: relative; padding: 14px; border: 1.5px solid var(--brass); border-radius: var(--radius);
  background: var(--paper); box-shadow: 0 16px 40px color-mix(in srgb, var(--shadow) 35%, transparent);
}
/* A small notch pointing up at the header pill. */
.help-float-card::before {
  content: ""; position: absolute; top: -8px; right: 40px; width: 14px; height: 14px; transform: rotate(45deg);
  background: var(--paper); border-left: 1.5px solid var(--brass); border-top: 1.5px solid var(--brass);
}
.help-float-card .tailor-help-head { padding-right: 28px; }
.help-float-x {
  position: absolute; top: 6px; right: 6px; width: 32px; height: 32px; border-radius: 50%;
  font-size: 1.25rem; line-height: 1; color: var(--ink); background: none; border: 0; cursor: pointer;
}
.help-float-x:hover { background: var(--chalk); }
.help-float-x:focus-visible { outline: 3px solid var(--brass); }
@keyframes help-pop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (max-width: 899px) {
  /* No room for both: the bottom contact bar still carries WhatsApp. */
  body.help-float-on .site-header .btn-wa { display: none; }
  .help-float-pill { min-height: 36px; padding: 0 12px; font-size: .8rem; gap: 6px; }
  .help-float-pill .icon { width: 16px; height: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .help-float, body.help-float-on .help-float:not(.is-min) { transition: none; transform: none; }
  body.help-float-on .site-header .help-float-pill { animation: none; }
}

.help-dialog { width: min(94vw, 560px); max-width: 560px; max-height: min(92vh, 760px); position: relative; }
.help-dialog form { display: flex; flex-direction: column; }
.help-body, .help-done { display: flex; flex-direction: column; gap: 14px; }
.help-body[hidden], .help-done[hidden] { display: none; }
.help-body h2, .help-done h2 { margin: 0; font-size: 1.6rem; }
.help-body .eyebrow, .help-done .eyebrow { margin: 0; }
.help-body > .muted { margin: 0; }
.dialog-x {
  position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; border-radius: 50%;
  font-size: 1.5rem; line-height: 1; color: var(--ink); background: none; border: 0; cursor: pointer;
}
.dialog-x:hover { background: var(--chalk); }
.dialog-x:focus-visible { outline: 3px solid var(--brass); }
.help-ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.help-way { position: relative; display: block; cursor: pointer; min-width: 0; }
.help-way input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.help-way-body { display: block; height: 100%; padding: 12px 10px; border: 2px solid var(--line); border-radius: 12px; background: var(--paper); text-align: center; transition: border-color .15s, background-color .15s; }
.help-way-body strong { display: block; font-size: .92rem; line-height: 1.25; }
.help-way-body span { display: block; margin-top: 2px; font-size: .76rem; color: var(--muted); line-height: 1.3; }
.help-way input:checked + .help-way-body { border-color: var(--primary); background: var(--chalk); box-shadow: inset 0 0 0 1px var(--primary); }
.help-way input:focus-visible + .help-way-body { outline: 3px solid var(--brass); outline-offset: 2px; }
.help-ways.invalid .help-way-body { border-color: var(--error); }
.help-body .group-err { margin-top: -6px; }
.help-body .btn { width: 100%; }
.help-body .fine, .help-body .form-alert { margin: 0; }

/* ---------- Confirmation dialog ---------- */
/* Native <dialog>, shown post-submission. Constrained to the viewport on both axes so
   it never gets cut off on a short landscape phone screen, and scrolls its own content
   instead of overflowing. */
.confirm-dialog {
  border: 2px solid var(--primary); border-radius: var(--radius); padding: 28px 24px;
  width: min(92vw, 480px); max-width: 480px; max-height: min(88vh, 640px); overflow-y: auto;
  background: var(--paper); color: var(--ink);
  box-shadow: 0 20px 60px color-mix(in srgb, var(--shadow) 25%, transparent);
}
.confirm-dialog[open] { display: flex; flex-direction: column; gap: 14px; }
.confirm-dialog h2 { margin: 0; }
.confirm-dialog::backdrop {
  background: color-mix(in srgb, var(--ink) 55%, transparent);
  backdrop-filter: blur(2px);
}
.confirm-dialog .submit-row,
.confirm-dialog .success-actions { margin: 0; }

.submit-row { display: flex; flex-direction: column; gap: 14px; align-items: stretch; }
.submit-row .btn { width: 100%; }
@media (min-width: 560px) { .submit-row .btn { width: auto; align-self: flex-start; } }
.fine { font-size: .82rem; color: var(--muted); }
.form-alert { display: none; background: var(--error-bg); color: var(--error); border-radius: 10px; padding: 12px 14px; font-weight: 600; }
.form-alert.show { display: block; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.success { display: none; max-width: 640px; }
.success.show { display: block; }
.order-id { font-family: var(--display); font-size: clamp(1.8rem, 7vw, 2.6rem); letter-spacing: .02em; background: var(--chalk); border: 2px dashed var(--brass); border-radius: var(--radius); padding: 14px 20px; display: inline-block; margin: 8px 0 20px; }
.success-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 20px 0; }
.success-actions .btn { flex: 1 1 220px; }

[hidden] { display: none !important; }
@media (min-width: 820px) { [data-mobile-only] { display: none !important; } }
.label-like { font-weight: 700; font-size: .92rem; }
.locate-btn { align-self: flex-start; min-height: 48px; }
.locate-btn.done { border-color: var(--wa); color: var(--wa); }
.fieldset > .hint:empty { display: none; }

/* ---------- Homepage quick enquiry ---------- */
.quick-grid { display: grid; gap: 32px; align-items: start; }
@media (min-width: 900px) { .quick-grid { grid-template-columns: 1fr 1.15fr; gap: 56px; } }
.quick-copy h2 { margin-top: 0; }
.quick-steps { margin: 20px 0 0; padding-left: 1.2rem; display: grid; gap: 10px; }
.quick-steps li { padding-left: 4px; }
/* On phones the form itself is the point: skip the three-step recap above it. */
@media (max-width: 639px) { .quick-steps { display: none; } }
.quick-form { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; box-shadow: 0 10px 30px color-mix(in srgb, var(--shadow) 8%, transparent); }
.quick-body { display: grid; gap: 18px; }
.quick-q { border: 0; padding: 0; margin: 0; min-width: 0; }
.quick-q legend { font-weight: 800; font-size: .95rem; margin-bottom: 8px; padding: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.chip span { display: inline-block; padding: 9px 14px; border: 2px solid var(--line); border-radius: 999px; background: var(--paper); font-weight: 600; font-size: .92rem; transition: border-color .15s, background .15s; }
.chip input:checked + span { border-color: var(--primary); background: var(--primary); color: var(--on-primary); }
.chip input:focus-visible + span { outline: 3px solid var(--brass); outline-offset: 2px; }
.chips.invalid .chip span { border-color: var(--error); }
.quick-form .btn[type="submit"] { width: 100%; }
.quick-form .fine { margin: 0; }
.quick-done h3 { font-family: var(--display); font-size: 1.5rem; font-weight: 500; margin: 4px 0 8px; }
.quick-done .btn { margin-top: 8px; }

/* Price list: the Full suit row stands out. */
.price-tag { display: inline-block; vertical-align: middle; margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: var(--primary); color: var(--on-primary); font-family: var(--body); font-size: .7rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }


/* ================================================================
   Darzi Direct: generated pages (site/layout.mjs)
   ================================================================ */

.skip { position: absolute; left: 16px; top: -60px; z-index: 50; background: var(--primary); color: var(--on-primary); padding: 10px 16px; border-radius: 10px; font-weight: 700; text-decoration: none; }
.skip:focus { top: 10px; }

.logo-word em { font-style: italic; color: var(--brass-dark); }
.site-header .btn-wa { min-height: 40px; }

.section-tight { padding: 48px 0; }
.h3 { font-size: 1.25rem; font-weight: 600; }
.text-link { font-weight: 700; color: var(--brass-dark); }

/* Proof points under a hero: a row of ticks. */
.trust { list-style: none; padding: 0; margin: 4px 0 18px; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: .92rem; font-weight: 600; color: var(--ink-2); }
.trust li { display: flex; align-items: center; gap: 7px; }
.trust li::before { content: "✓"; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--chalk); color: var(--brass-dark); font-size: .72rem; font-weight: 800; flex: none; }
.hero .btn-wa .icon, .page-hero .btn-wa .icon { width: 20px; height: 20px; }

/* Landing-page hero: copy beside a 4:3 photo. */
.page-hero { padding: 28px 0 48px; }
.page-hero h1 { font-size: clamp(2.2rem, 6.4vw, 3.8rem); max-width: 18ch; text-wrap: balance; }
.page-hero h1 em { font-style: italic; color: var(--brass-dark); }
.page-hero .hero-lede { max-width: 46ch; }
.page-hero-grid { display: grid; gap: 32px; align-items: center; }
.page-hero-photo { aspect-ratio: 4 / 3; border: 2px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: 0 16px 36px -14px color-mix(in srgb, var(--shadow) 30%, transparent); }
.page-hero-photo img { width: 100%; height: 100%; object-fit: cover; }
.page-hero-plain { padding-bottom: 12px; }
.page-hero-plain .hero-lede { max-width: 56ch; }
@media (min-width: 900px) {
  .page-hero { padding: 36px 0 72px; }
  .page-hero-grid { grid-template-columns: 1.1fr 1fr; gap: 56px; }
}

.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; padding: 0; margin: 0 0 22px; font-size: .85rem; color: var(--muted); }
.crumbs li + li::before { content: "/"; margin-right: 4px; color: var(--line); }
.crumbs a { text-decoration: none; font-weight: 600; }
.crumbs a:hover { color: var(--brass-dark); }

/* Occasion router: four photo cards. */
.occasions { display: grid; gap: 16px; }
/* Homepage: the same four, as compact thumbnail rows. */
.occasions-compact { display: grid; gap: 10px; }
@media (min-width: 560px) { .occasions-compact { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .occasions-compact { grid-template-columns: repeat(4, 1fr); } }
.occ-mini {
  display: flex; align-items: center; gap: 14px; padding: 10px; min-width: 0;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  color: var(--ink); text-decoration: none; transition: border-color .15s, transform .15s;
}
.occ-mini:hover { border-color: var(--primary); transform: translateY(-1px); }
.occ-mini-photo { flex: none; width: 72px; height: 72px; border-radius: calc(var(--radius) - 6px); overflow: hidden; }
.occ-mini-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.occ-mini-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.occ-mini-text strong { font-size: 1rem; line-height: 1.25; }
.occ-mini .way-tag { align-self: flex-start; }
@media (min-width: 560px) { .occasions { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .occasions { grid-template-columns: repeat(4, 1fr); } }
.occasions:has(> .occ:nth-child(3):last-child) { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.occ { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 0 20px 20px; text-decoration: none; overflow: hidden; transition: border-color .15s, transform .15s; }
.occ:hover { border-color: var(--primary); transform: translateY(-2px); }
.occ-photo { aspect-ratio: 4 / 3; margin: 0 -20px 14px; overflow: hidden; }
.occ-photo img { width: 100%; height: 100%; object-fit: cover; }
.occ h3 { margin: .45rem 0 .35rem; font-size: 1.3rem; }
.occ p { color: var(--muted); flex: 1; font-size: .95rem; }

/* Copy beside an aside (date checker, price list). */
.split { display: grid; gap: 32px; align-items: start; }
@media (min-width: 900px) { .split { grid-template-columns: 1.15fr 1fr; gap: 56px; } }
.prose { max-width: 62ch; }
.prose h3 { margin-top: 1.4em; font-size: 1.15rem; }
.prose p { color: var(--ink-2); }
.panel { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }

/* "Can we make your date?" */
.datecheck { display: grid; gap: 14px; }
.datecheck-title { font-size: 1.5rem; margin: 0 0 .2rem; }
.datecheck-head p { margin: 0; }
.datecheck input[type="date"] { max-width: 260px; }
.datecheck-result { margin: 0; font-weight: 700; min-height: 1.4em; }
/* Stays rendered while empty: removing an aria-live region hides its first update from screen readers. */
.datecheck-result[data-tone] { padding: 12px 14px; border-radius: 10px; border-left: 4px solid var(--brass); background: var(--chalk); }
.datecheck-result[data-tone="yes"] { border-left-color: var(--wa); }
.datecheck-result[data-tone="no"] { border-left-color: var(--error); background: var(--error-bg); color: var(--error); }
.datecheck .btn { justify-self: start; }

/* A short sequence: week-by-week plan, hour-by-hour urgent order. */
.timeline { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; max-width: 760px; }
.timeline li { position: relative; padding: 0 0 14px 26px; border-bottom: 1px dashed var(--line); color: var(--ink-2); }
.timeline li::before { content: ""; position: absolute; left: 0; top: .45em; width: 11px; height: 11px; border-radius: 50%; background: var(--brass); }
.timeline strong { display: block; color: var(--ink); font-family: var(--display); font-size: 1.15rem; font-weight: 600; margin-bottom: 2px; }

/* Colour guide on the bandhgala page. */
.shade-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.shade-list li { display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; column-gap: 14px; align-items: center; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; }
.shade { grid-row: span 2; width: 44px; height: 44px; border-radius: 50%; background: var(--c); border: 1px solid color-mix(in srgb, var(--shadow) 22%, transparent); box-shadow: inset 0 -8px 12px color-mix(in srgb, var(--shadow) 18%, transparent); }
.shade-list strong { font-size: 1rem; }
.shade-list span:last-child { color: var(--muted); font-size: .86rem; line-height: 1.35; }

.why-grid-4 { display: grid; gap: 16px; }
@media (min-width: 640px) { .why-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .why-grid-4 { grid-template-columns: repeat(4, 1fr); } }
.why-item a { color: var(--brass-dark); font-weight: 700; }

.price-foot { margin: 16px 0 0; font-size: .9rem; max-width: 70ch; }

/* Area links: five cards with the pincode range. */
.area-links { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.area-links a { display: flex; flex-direction: column; gap: 2px; padding: 16px 18px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; transition: border-color .15s; }
.area-links a:hover { border-color: var(--primary); }
.area-links a[aria-current="page"] { border-color: var(--brass); background: var(--chalk); }
.area-links strong { font-family: var(--display); font-size: 1.15rem; font-weight: 600; }
.area-links span { color: var(--muted); font-size: .85rem; }
.section-dark .area-links a { background: transparent; border-color: color-mix(in srgb, var(--chalk) 25%, transparent); }

.localities { margin: 0 0 14px; display: grid; gap: 12px; }
.localities div { padding-bottom: 12px; border-bottom: 1px dashed var(--line); }
.localities dt { font-weight: 800; font-size: .9rem; }
.localities dd { margin: 2px 0 0; color: var(--ink-2); font-size: .95rem; }

/* FAQ answers can hold links and several paragraphs. */
.faq-a { margin-top: .8rem; color: var(--ink-2); }
.faq-a p { margin: 0 0 .6rem; }
.faq-a a { color: var(--brass-dark); font-weight: 700; }
.faq-more { margin: 20px 0 0; }
.faq-more a { font-weight: 700; color: var(--brass-dark); }
.faq-group { font-size: clamp(1.4rem, 3.4vw, 1.9rem); margin-bottom: .4rem; }

/* Comparison tables: scroll inside their own box on phones. */
.table-scroll { overflow-x: auto; margin: 0 0 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.compare { border-collapse: collapse; width: 100%; min-width: 620px; font-size: .94rem; }
.compare-2 { min-width: 0; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.compare th, .compare td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.compare thead th { font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.compare tbody th { font-weight: 800; }
.compare tr:last-child th, .compare tr:last-child td { border-bottom: 0; }
.compare .is-us { background: var(--chalk); }
.compare .is-us th { color: var(--brass-dark); }

.checklist { list-style: none; padding: 0; margin: 0 0 1em; display: grid; gap: 6px; }
.checklist li { padding-left: 26px; position: relative; color: var(--ink-2); }
.checklist li::before { content: "✓"; position: absolute; left: 0; font-weight: 800; color: var(--wa); }
.checklist-muted li::before { content: "–"; color: var(--muted); }

/* Footer: brand, then three link columns. */
.site-footer .footer-grid { display: grid; gap: 28px; grid-template-columns: 1fr; justify-content: stretch; }
@media (min-width: 700px) { .site-footer .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.footer-brand .logo { margin-bottom: 12px; color: var(--ink); }
.footer-brand p { max-width: 36ch; }
.footer-brand a { color: var(--ink); font-weight: 700; }
.footer-head { font-size: .74rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--brass-dark); margin: 0 0 10px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.site-footer nav a:hover { color: var(--ink); }
.site-footer .footer-base { margin-top: 28px; padding-top: 18px; border-top: 1px dashed var(--line); font-size: .85rem; }

/* Measuring guide: one tape diagram beside each instruction. */
.measure-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
@media (min-width: 760px) { .measure-steps { grid-template-columns: repeat(2, 1fr); } }
.measure-steps li { display: grid; grid-template-columns: 72px 1fr; gap: 16px; align-items: start; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; scroll-margin-top: calc(var(--head-total) + 20px); }
.measure-art { display: block; width: 72px; height: 144px; color: var(--ink); }
.measure-art svg { width: 100%; height: 100%; }
.measure-steps h2 { margin: 0 0 .3rem; }
.measure-steps p { margin: 0 0 .4rem; color: var(--ink-2); }
.measure-steps p.muted { color: var(--muted); font-size: .88rem; margin: 0; }


/* ================================================================
   House style (2026-09): after loropiana.com. Ivory page, Oxford blue, wine red
   and square corners, a serif for headings, small spaced capitals for labels,
   and empty image slots where the photography will go. Later rules here
   override the component rules above on purpose.
   ================================================================ */

@media (min-width: 820px) { :root { --head-h: 76px; --head-total: 120px; } }

body { letter-spacing: .005em; }
h1, h2, h3 { font-family: var(--display); font-weight: 500; letter-spacing: 0; line-height: 1.1; }
h1, h2 { color: var(--brass-dark); }
h1 { font-size: clamp(2.1rem, 5.2vw, 3.3rem); }
h2 { font-size: clamp(1.8rem, 3.8vw, 2.5rem); }
h3 { font-size: 1.3rem; font-weight: 600; }
h1 em, h2 em, .hero h1 em, .page-hero h1 em { font-style: italic; color: var(--ink-2); font-weight: 400; }
.eyebrow { font-size: .7rem; font-weight: 600; letter-spacing: .22em; color: var(--label); }
.muted { color: var(--muted); }
.wrap-wide { max-width: 1400px; margin: 0 auto; padding: 0 16px; }
.bleed { padding: 0 16px; }
@media (min-width: 900px) { .wrap-wide, .bleed { padding: 0 40px; } }
.section { padding: 72px 0; }
.section-tight { padding: 56px 0; }
@media (min-width: 900px) { .section { padding: 104px 0; } .section-tight { padding: 72px 0; } }
.section-head-center { text-align: center; max-width: 640px; margin: 0 auto 44px; padding: 0 16px; }
.section-head-center .muted { margin-left: auto; margin-right: auto; }

/* Dark bands are a deeper wine than the page. */
.section-dark { background: var(--secondary); color: var(--on-secondary); }
.section-dark h2, .section-dark h3 { color: var(--on-secondary); }
.section-dark .eyebrow { color: var(--brass-2); }
.section-chalk { background: var(--chalk); }

/* ---------- Announcement bar + header ---------- */
.announce {
  margin: 0; padding: 8px 16px; background: var(--primary); color: var(--on-primary); text-align: center;
  font-size: .6rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
}
@media (min-width: 820px) { .announce { font-size: .66rem; letter-spacing: .2em; } }
.site-header { background: color-mix(in srgb, var(--bg) 95%, transparent); border-bottom: 1px solid var(--line); }
.site-header .head-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; height: var(--head-h); gap: 12px; }
.head-call { justify-self: start; visibility: hidden; font-size: .78rem; letter-spacing: .1em; color: var(--label); text-decoration: none; }
.head-call:hover { color: var(--brass-dark); }
.head-actions { justify-self: end; display: flex; align-items: center; gap: 8px; }
.logo { justify-self: center; text-decoration: none; }
.logo-script { font-family: var(--script); font-weight: 400; font-size: 3.1rem; line-height: 1; color: var(--brass-dark); letter-spacing: .01em; padding-top: 6px; }
.nav { display: none; }
.nav a { font-size: .74rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; color: var(--ink); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--brass-dark); }
.nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 8px; }
.nav-strip { gap: 22px; }
.nav-strip a { font-size: .72rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.nav-strip a[aria-current="page"] { color: var(--brass-dark); }
@media (min-width: 820px) {
  .head-call { visibility: visible; }
  .logo-script { font-size: 4rem; }
  .nav { display: flex; justify-content: center; gap: 36px; height: 44px; align-items: flex-start; }
  .nav-strip { display: none; }
}

/* ---------- Buttons and links ---------- */
.btn {
  min-height: 48px; padding: 0 28px; border-radius: 0; border: 1px solid var(--primary);
  background: var(--primary); color: var(--on-primary);
  font: 600 .74rem var(--body); letter-spacing: .18em; text-transform: uppercase;
}
.btn, .btn-wa { border-color: var(--primary-edge); }
.btn:hover { transform: none; background: var(--primary-2); border-color: var(--brass-dark); }
.btn-ghost { background: transparent; color: var(--brass-dark); border-color: var(--brass-dark); }
.btn-ghost:hover { background: var(--primary); color: var(--on-primary); }
.btn-wa { background: var(--wa-btn); border-color: var(--wa-btn); color: var(--on-primary); }
.btn-wa:hover { background: var(--primary-2); border-color: var(--brass-dark); }
.btn-small { min-height: 40px; padding: 0 16px; font-size: .68rem; }
.btn:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .choice:focus-within { outline: 2px solid var(--primary); outline-offset: 3px; }
/* Loro-style text links: "— Discover more —". */
.text-link, .faq-more a, .way-link, .step-links a {
  color: var(--brass-dark); font-weight: 500; text-decoration: none; font-size: .95rem;
}
.text-link::before, .faq-more a::before, .way-link::before, .step-links a::before { content: "— "; }
.text-link::after, .faq-more a::after, .way-link::after, .step-links a::after { content: " —"; }
.text-link:hover, .faq-more a:hover, .step-links a:hover { text-decoration: underline; text-underline-offset: 4px; }
.faq-a a, .why-item a, .quick-talk a { color: var(--brass-dark); }

.contact-bar { background: var(--secondary); }
.contact-bar .btn { border-color: color-mix(in srgb, var(--on-secondary) 40%, transparent); }
.contact-bar .btn-ghost { color: var(--on-secondary); }
.contact-bar .btn-wa { background: var(--primary); border-color: var(--brass-dark); }

/* ---------- Empty image slots ---------- */
.slot {
  position: relative; display: flex; align-items: flex-start; width: 100%;
  background: linear-gradient(165deg, var(--slot) 0%, var(--slot-2) 100%);
}
.slot-label {
  margin: 12px; padding: 4px 8px; font: 500 .62rem/1.3 var(--body); letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); background: color-mix(in srgb, var(--paper) 72%, transparent);
}
.r-5x7 { aspect-ratio: 5 / 7; }
.r-4x3 { aspect-ratio: 4 / 3; }
.r-hero { aspect-ratio: 4 / 5; }
.r-banner { aspect-ratio: 4 / 3; }
@media (min-width: 820px) {
  .r-hero { aspect-ratio: auto; height: clamp(440px, 48vw, 760px); }
  .r-banner { aspect-ratio: 21 / 8; max-height: 560px; }
}
/* A photo in a slot: cropped to fill the slot's shape around its focus point. */
.slot-photo { overflow: hidden; background: var(--slot); }
.slot-photo picture { display: contents; }
.slot-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Old photo frames: the slot sets the size now. */
.hero-photo, .page-hero-photo, .occ-photo, .why-photo, .choice-body .choice-photo, .occ-mini-photo {
  aspect-ratio: auto; height: auto; border: 0; border-radius: 0; box-shadow: none; max-width: none;
}

/* ---------- Homepage hero: full width, copy on a card over its lower edge ---------- */
.lux-hero { position: relative; }
.lux-hero-card {
  position: relative; width: min(600px, calc(100% - 32px)); margin: -96px auto 0; padding: 34px 24px 30px;
  background: var(--paper); text-align: center; box-shadow: 0 1px 0 var(--line);
}
.lux-hero-card h1 { font-size: clamp(2rem, 4.6vw, 2.9rem); margin-bottom: .4em; }
.lux-hero-card h1 em { display: block; font-size: .62em; margin-top: .35em; line-height: 1.25; }
.lux-hero-card .hero-actions { justify-content: center; margin: 22px 0 0; }
@media (min-width: 820px) { .lux-hero-card { margin-top: -150px; padding: 44px 48px 40px; } }

/* Homepage lead hero: a shorter banner, then the pitch beside the call-back form. */
.r-lead { aspect-ratio: 3 / 1; }
@media (min-width: 820px) { .r-lead { aspect-ratio: auto; height: clamp(180px, 16vw, 280px); } }
.lux-lead {
  position: relative; display: grid; gap: 32px; margin-top: -48px; padding: 28px 20px;
  background: var(--paper); border-top: 2px solid var(--primary-edge);
}
.lux-lead h1 { font-size: clamp(2rem, 4.2vw, 3rem); margin-bottom: .45em; }
.lux-lead h1 em { display: block; font-size: .6em; margin-top: .4em; line-height: 1.3; color: var(--ink-2); }
.lux-lead .hero-lede { max-width: 56ch; margin-bottom: 1.2em; }
.lux-lead .hero-actions { margin: 20px 0 0; }
.quick-hero { background: var(--bg); border: 1px solid var(--line); padding: 22px 18px; }
.quick-hero .quick-form { background: none; border: 0; padding: 0; margin-top: 14px; box-shadow: none; }
.quick-hero-title { font-size: 1.7rem; margin: 0 0 .25em; }
.quick-hero > .muted { font-size: .9rem; margin: 0; }
/* Phones: heading, then the form, then the rest of the pitch. */
@media (max-width: 979px) {
  .lux-lead { gap: 0; }
  .lux-lead-copy { display: contents; }
  .lux-lead-copy > * { order: 3; }
  .lux-lead-copy > .eyebrow, .lux-lead-copy > h1 { order: 1; }
  .quick-hero { order: 2; margin: 8px 0 28px; }
}
@media (min-width: 980px) {
  .lux-lead { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 48px; margin-top: -120px; padding: 44px 48px; align-items: start; }
  .quick-hero { padding: 28px 28px 24px; }
}

/* The same lead hero on landing pages; without a banner it sits flat under the crumbs. */
.page-hero-lead { padding-bottom: 24px; }
.lux-lead-flat, .page-hero-lead .lux-lead-flat { margin-top: 0; }
.hero-datecheck { margin-top: 24px; background: var(--bg); }
.quick-hero [id="qs-ts"]:empty { display: none; }

/* ---------- The call-back form, tuned for completion ---------- */
.quick-hero { background: var(--paper); border: 1px solid var(--line); box-shadow: 0 12px 32px -18px color-mix(in srgb, var(--shadow) 35%, transparent); }
.lux-lead { background: var(--bg); border-top-color: var(--primary); }
.quick-hero .quick-body { gap: 16px; }
.quick-stepno { display: block; margin-top: 2px; font-size: .72rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.quick-q legend { font-size: 1rem; }
.quick-skip { margin-top: 12px; font-weight: 500; font-size: .88rem; color: var(--muted); }
.quick-step2 { display: grid; gap: 14px; }
.quick-picked { margin: 0; font-size: .9rem; color: var(--ink-2); }
.quick-picked .link-btn { font-size: .88rem; margin-left: 6px; }
.quick-form .field input { background: var(--paper); border: 1px solid #b9ada0; min-height: 52px; font-size: 17px; }
.quick-form .field input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); outline: none; }
.quick-form .btn[type="submit"] { width: 100%; min-height: 54px; font-size: .8rem; }
.quick-promise { margin: -4px 0 0; font-size: .88rem; color: var(--ink-2); text-align: center; }
.quick-alt { margin: 0; font-size: .88rem; color: var(--muted); text-align: center; }
.quick-alt a { color: var(--primary); font-weight: 600; }
.quick-hero .fine { text-align: center; margin: 0; }
/* With js/quick.js running, one step shows at a time. */
.quick-form.is-stepped:not(.on-step-2) [data-quick-step="2"],
.quick-form.is-stepped.on-step-2 [data-quick-step="1"] { display: none; }
.chip span { background: var(--paper); border-color: #cbbfb2; }

/* One strong button beside the form: the hero's other ways in become quiet links, except
   "I know what I want", which stays a real button: the direct way into the order form. */
.lux-lead-copy .hero-actions { gap: 6px 22px; }
.lux-lead-copy .hero-actions .btn:not(.btn-design) {
  min-height: 0; padding: 0; border: 0; background: none; color: var(--primary);
  font: 600 .95rem var(--body); letter-spacing: 0; text-transform: none; text-decoration: underline; text-underline-offset: 4px;
}
.lux-lead-copy .hero-actions .btn:not(.btn-design):hover { background: none; color: var(--primary-2); }
.lux-lead-copy .hero-actions .btn-design { flex: 0 0 100%; max-width: 320px; margin-bottom: 8px; }
.lux-lead-copy .hero-actions .btn .icon { width: 18px; height: 18px; }

/* Phones: no banner and a short top strip, so the form starts on the first screen. */
.quick-design { display: none; }
@media (max-width: 819px) {
  .quick-design { display: block; text-align: center; }
  .quick-design .btn { width: 100%; }
  .quick-design p { margin: 12px 0 10px; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
  .lux-lead-copy .hero-actions .btn-design { display: none; }
  .lux-hero-lead .lux-hero-media, .page-hero-lead .page-hero-photo { display: none; }
  .lux-lead, .page-hero-lead .lux-lead { margin-top: 0; padding: 20px 16px 8px; }
  .announce-wide { display: none; }
  .page-hero-lead .crumbs ol { margin-bottom: 6px; }
}

/* Closing band: one last way in. */
.section-dark .btn-wa { background: var(--on-secondary); border-color: var(--on-secondary); color: var(--secondary); }
.section-dark .btn-wa:hover { background: #fff; border-color: #fff; }
.section-dark .btn-ghost { color: var(--on-secondary); border-color: color-mix(in srgb, var(--on-secondary) 60%, transparent); }
.section-dark .btn-ghost:hover { background: var(--on-secondary); color: var(--secondary); }
.lux-close { border-bottom: 1px solid color-mix(in srgb, var(--on-secondary) 14%, transparent); }
.lux-close { text-align: center; }
.lux-close p { max-width: 56ch; margin: 0 auto; color: var(--muted-dark); }
.lux-close .hero-actions { justify-content: center; margin-top: 26px; }
.lux-intro { padding: 44px 0 0; text-align: center; }
.lux-intro .hero-lede, .page-hero-card .hero-lede, .page-hero-plain .hero-lede { margin-left: auto; margin-right: auto; }
.hero-lede { font-size: 1.08rem; max-width: 52ch; color: var(--ink-2); }
.lux-intro .trust, .page-hero-card .trust, .page-hero-plain .trust { justify-content: center; }
.trust { font-weight: 500; font-size: .86rem; }
.trust li::before { background: transparent; color: var(--brass-dark); width: auto; height: auto; }

/* ---------- Tiles: occasions (portrait tiles, caption underneath) ---------- */
.occasions, .occasions-compact { display: grid; gap: 32px 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1000px) { .occasions, .occasions-compact { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 28px; } }
.occasions:has(> .occ:nth-child(3):last-child) { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.occ { background: none; border: 0; border-radius: 0; padding: 0; text-align: center; color: var(--ink); overflow: visible; }
.occ:hover { transform: none; }
.occ:hover .slot, .lux-card:hover .slot { filter: brightness(.96); }
.occ-photo { display: block; margin: 0 0 16px; }
.way-tag { font-size: .64rem; font-weight: 600; letter-spacing: .2em; color: var(--label); }
.occ h3 { font-size: 1.3rem; font-weight: 500; margin: .35rem 0 .3rem; }
.occ p { font-size: .88rem; }
.way-link { font-size: .85rem; margin-top: 4px; }

/* ---------- How it works: three tall tiles ---------- */
#how .steps { gap: 48px; counter-reset: none; }
#how .steps li { border: 0; padding: 0; text-align: center; }
#how .steps li::before { content: none; }
#how .steps p { color: var(--muted); }
#how .steps .eyebrow { margin: 0 0 .4rem; }
.steps-photo { display: block; margin-bottom: 22px; }
#how .step-links { justify-items: center; }
@media (min-width: 760px) { #how .steps { gap: 28px; } }
.section-dark .step-links a { color: var(--brass-2); }

/* ---------- Half-and-half feature (prices beside a tall image) ---------- */
.lux-feature { display: grid; gap: 40px; align-items: center; }
.lux-feature-copy { padding: 0 16px; }
@media (min-width: 900px) {
  .lux-feature { grid-template-columns: 1fr 1fr; gap: 72px; padding-right: 40px; }
  .lux-feature-copy { padding: 0; max-width: 560px; }
}

/* ---------- Editorial pair: small image and copy, tall image on the right ---------- */
.lux-editorial { display: grid; gap: 40px; align-items: center; }
.lux-editorial-copy { text-align: center; padding: 0 16px; max-width: 480px; margin: 0 auto; }
.lux-editorial-thumb { display: block; width: min(240px, 60%); margin: 0 auto 28px; }
@media (min-width: 900px) { .lux-editorial { grid-template-columns: 1fr 1fr; gap: 56px; } }

/* ---------- A single centred image with its caption ---------- */
.lux-centre { text-align: center; padding-left: 16px; padding-right: 16px; }
.lux-centre-media { width: min(520px, 100%); margin: 0 auto 32px; }
.lux-centre .muted { max-width: 52ch; margin-left: auto; margin-right: auto; }

/* ---------- At your service ---------- */
.lux-service { padding-top: 0; text-align: center; }
.lux-service h2 { margin-bottom: 40px; }
.lux-service-grid { display: grid; gap: 36px; }
.lux-service-grid h3 { font-weight: 500; }
.lux-service-grid .muted { max-width: 34ch; margin: 0 auto .8rem; font-size: .92rem; }
@media (min-width: 760px) { .lux-service-grid { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Area cards ---------- */
.lux-areas { padding-top: 0; }
.lux-areas h2 { margin-bottom: 32px; }
.lux-cards { display: grid; gap: 28px 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1000px) { .lux-cards { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; } }
.lux-card { display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: var(--ink); }
.lux-card strong { font-family: var(--display); font-size: 1.2rem; font-weight: 500; margin-top: 14px; }
.lux-card span:last-child { font-size: .82rem; color: var(--muted); }

/* ---------- Landing-page hero: banner, then a centred card over its edge ---------- */
.page-hero { padding: 16px 0 48px; }
.page-hero .crumbs ol { justify-content: center; margin-bottom: 18px; }
.page-hero-card { max-width: 780px; margin: 0 auto; text-align: center; }
.page-hero-card h1, .page-hero-plain h1 { max-width: none; }
.page-hero-card .hero-actions, .page-hero-plain .hero-actions { justify-content: center; }
.page-hero-banner .page-hero-card { position: relative; margin-top: -72px; padding: 32px 22px 26px; background: var(--paper); }
@media (min-width: 820px) { .page-hero-banner .page-hero-card { margin-top: -140px; padding: 48px 56px 36px; } }
.page-hero-plain { text-align: center; }
.page-hero-plain h1 { margin-left: auto; margin-right: auto; }
/* The urgent page keeps copy beside its date checker. */
.page-hero-grid { text-align: left; }
.page-hero-grid .hero-actions { justify-content: flex-start; }

/* ---------- Lists, prices, FAQ, forms: square corners and hairlines ---------- */
.prices { border-top: 1px solid var(--primary); }
.price-row { border-bottom: 1px solid var(--line); }
.price-row h3 { font-weight: 500; }
.price { color: var(--brass-dark); font-weight: 500; }
.price-tag, .choice-body .choice-badge { border-radius: 0; font-weight: 600; letter-spacing: .14em; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { font-family: var(--display); font-weight: 500; font-size: 1.28rem; }
.faq summary::after { color: var(--brass-dark); }
.panel, .why-item, .quick-form, .area-links a, .shade-list li, .table-scroll, .compare-2 { border-radius: 0; box-shadow: none; }
.area-links strong, .timeline strong { font-weight: 500; }
.why-item h3 { font-weight: 500; font-size: 1.25rem; }
.chip span, .field input, .field select, .field textarea, .choice-body, .extra-body, .tile, .look-card,
.unit-toggle, .cfg-views, .cfg-tab, .tailor-help, .tailor-help-way, .help-way-body, .help-float-card,
.help-float-pill, .confirm-dialog, .form-alert, .order-id, .datecheck-result[data-tone], .swatch-img, .cfg-stage, .look-art, .tile-art { border-radius: 0; }
.chip span { font-weight: 500; transition: border-color .15s, background-color .15s, color .15s; }
.chip:hover span { border-color: var(--primary); background: var(--primary-soft); }
.chip input:checked + span, .chip:hover input:checked + span { border-color: var(--primary); background: var(--primary); color: var(--on-primary); }
.field label, .quick-q legend { font-weight: 600; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--brass-dark); }
.choice input:checked + .choice-body, .extra input:checked + .extra-body, .tile:has(:checked), .look-card:has(:checked), .help-way input:checked + .help-way-body { background: var(--primary-soft); }
.fieldset > legend { color: var(--brass-dark); }
.cfg-total-amt, .look-price strong, .choice-body .choice-price { color: var(--brass-dark); }

/* ---------- Guides: burnt orange (measuring, where the tape goes, tips) ---------- */
.guide .eyebrow, .page-guide .page-hero .eyebrow, .page-guide .measure-steps h2 { color: var(--orange); }
.guide .text-link, .guide-link, .step-links a.guide-link { color: var(--orange); }
.guide .lux-editorial-copy { border-top: 1px solid var(--orange); padding-top: 32px; }
.measure-tip { background: var(--orange-soft); border-left: 3px solid var(--orange); border-radius: 0; }
.measure-tip strong, .measure-tip a { color: var(--orange); }
.m-guide { color: var(--orange); border-color: color-mix(in srgb, var(--orange) 40%, var(--line)); border-radius: 0; }
.measure-art { color: var(--orange); }
.measure-steps li { border-radius: 0; border-top: 2px solid var(--orange); }
.page-guide main .btn:not(.btn-ghost):not(.btn-wa) { background: var(--orange); border-color: var(--orange); }
.page-guide main .btn:not(.btn-ghost):not(.btn-wa):hover { filter: brightness(.92); }
.page-guide main .btn-ghost { color: var(--orange); border-color: var(--orange); }
.page-guide main .btn-ghost:hover { background: var(--orange); color: var(--on-primary); }

/* Measuring guide: the steps open only for people measuring themselves. */
.measure-reveal > summary { list-style: none; cursor: pointer; text-align: center; margin-bottom: 8px; }
.measure-reveal > summary::-webkit-details-marker { display: none; }
.measure-reveal[open] > summary { margin-bottom: 28px; }
.page-guide main .measure-reveal[open] > summary .btn { background: transparent; color: var(--orange); }
.measure-reveal-next { text-align: center; margin: 28px 0 0; }

/* ---------- Footer: deep wine ---------- */
.site-footer { background: var(--secondary); color: var(--muted-dark); border-top: 0; padding: 64px 0 36px; }
.site-footer .logo-script { color: var(--on-secondary); font-size: 3.2rem; }
.footer-brand .logo { justify-self: start; }
.footer-brand a { color: var(--on-secondary); font-weight: 500; }
.footer-head { color: var(--on-secondary); font-weight: 600; letter-spacing: .2em; font-size: .68rem; }
.site-footer nav a:hover { color: var(--on-secondary); text-decoration: underline; text-underline-offset: 4px; }
.site-footer .footer-base { border-top: 1px solid color-mix(in srgb, var(--on-secondary) 18%, transparent); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}