/* ==========================================================================
   Forever Florals — Stylesheet v2
   Bold, elegant, colourful. Full-bleed saturated colour fields, oversized
   Bodoni display type, editorial asymmetry.
   Depends on tokens.css
   ========================================================================== */

/* ---------- 1. Reset & base ---------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--topbar-h, 0px) + var(--header-h, 4.5rem) + 1.5rem);
}

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--color-background);
  color: var(--color-foreground);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, picture, svg, video { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, h5, h6, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  top: 0; left: 50%;
  transform: translate(-50%, -120%);
  z-index: var(--z-modal);
  padding: var(--space-xs) var(--space-md);
  background: var(--ink);
  color: var(--paper);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  transition: transform var(--dur-base) var(--ease-out);
}
.skip-link:focus { transform: translate(-50%, 0); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}


/* ---------- 2. Typography ------------------------------------------------ */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
  text-wrap: balance;
}

h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-xl); font-weight: 500; }
h4 { font-size: var(--text-lg); font-weight: 500; }

/* Oversized editorial display type — see --text-display in tokens.css */
.display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-display);
  line-height: var(--leading-mega);
  letter-spacing: var(--tracking-mega);
  text-wrap: balance;
}
.display--mega {
  font-size: var(--text-display-mega);
  line-height: 0.82;
}
.display em, .italic {
  font-style: italic;
  font-weight: 400;
}

p { text-wrap: pretty; }

/* Letterspaced label */
.eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  margin-bottom: var(--space-md);
  opacity: 0.72;
}

.lead {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  max-width: var(--container-text);
}

/* Sub-heading inside a prose block. Sans, not the display face, so it reads
   as a label within body copy rather than competing with the section h2. */
.prose__heading {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  margin-top: var(--space-lg);
}
.prose__heading + p { margin-top: var(--space-2xs); }

.prose > * + * { margin-top: var(--space-md); }
.prose p { line-height: var(--leading-relaxed); max-width: var(--container-text); }
.prose strong { font-weight: 600; }
/* Plain <ol>/<ul> inside prose keep their markers - the ul[class] reset only
   strips list styling from classed lists. This just gives them room to breathe. */
.prose ol, .prose ul { padding-left: 1.4em; }
.prose li { line-height: var(--leading-relaxed); max-width: var(--container-text); }
.prose li + li { margin-top: var(--space-sm); }
.prose li::marker { color: var(--terracotta); }
.prose a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  font-weight: 500;
}
.prose a:hover { text-decoration-thickness: 2px; }

.muted { color: var(--color-foreground-muted); }
.text-center { text-align: center; }
.text-center .lead, .text-center .prose p { margin-inline: auto; }

/* Big editorial numeral */
.numeral {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  line-height: 0.85;
  font-weight: 400;
  opacity: 0.3;
}


/* ---------- 3. Layout ---------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  /* .field is display:grid, so this is a grid item and inherits min-width:auto.
     Any wide child (the pricing table's min-width:34rem) would then stretch the
     container past the viewport instead of letting .table-wrap scroll. */
  min-width: 0;
}
.container--wide { max-width: var(--container-wide); }
.container--text { max-width: var(--container-narrow); }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: var(--section-y-tight); }

/* ---- Full-bleed saturated colour fields -------------------------------
   Every field pairs with a text colour verified at AA. See tokens.css. */
.field { padding-block: var(--section-y); }

/* Light grounds — all verified with ink text at AA body */
.field--paper     { background: var(--paper);        color: var(--ink); }
.field--peach     { background: var(--peach);        color: var(--ink); }
.field--peach-t   { background: var(--peach-tint);   color: var(--ink); }
.field--honey-t   { background: var(--honey-tint);   color: var(--ink); }
/* Light apricot: ink text (7.00). ink-soft only manages 3.18, so .muted is
   forced to full ink, and the 12px eyebrow needs full opacity — at the
   default 0.72 it measures 3.76, under the 4.5 small text requires. */
.field--apricot-m { background: var(--apricot-mid);  color: var(--ink); }
.field--apricot-m .muted   { color: var(--ink); }
.field--apricot-m .eyebrow { opacity: 1; }
.field--sand-t    { background: var(--sand-tint);    color: var(--ink); }

/* Unused at present. If it goes into service, note that paper text reaches
   only 2.08 on it, so it must stay an ink field despite reading as a bold
   colour — and .muted would need forcing to full ink (ink-soft is 3.03). */
.field--orange    { background: var(--orange);       color: var(--ink); }
.field--golden    { background: var(--golden);       color: var(--ink); }
.field--golden-t  { background: var(--golden-tint);  color: var(--ink); }
.field--apricot   { background: var(--apricot);      color: var(--ink); }
.field--lilac     { background: var(--lilac);        color: var(--ink); }
.field--lilac-t   { background: var(--lilac-tint);   color: var(--ink); }
.field--periwinkle{ background: var(--periwinkle);   color: var(--ink); }
.field--periwinkle .muted { color: var(--ink); }   /* ink-soft on periwinkle is 4.31:1 */
.field--sky       { background: var(--sky);          color: var(--ink); }
/* Sky is a mid-tone like sage: ink-soft on it is only 4.17:1, under AA. */
.field--sky .muted { color: var(--ink); }
.field--sky-t     { background: var(--sky-tint);     color: var(--ink); }
.field--sage-t    { background: var(--sage-tint);    color: var(--ink); }
.field--sage-s    { background: var(--sage-soft);    color: var(--ink); }
/* Sage is a mid-tone ground, so two inherited treatments stop working on it.
   The ink-tint veil on the "won't find" column drops its muted text to 4.15:1,
   under AA - a white veil lifts it to ~5.5:1. And ink-soft on sage is only
   4.56:1, technically passing but too close to the line for body copy, so
   .muted goes full ink here, as it already does on apricot. */
.field--sage-s .compare__col--no { background: rgba(255, 255, 255, 0.5); }
.field--sage-s .muted { color: var(--ink); }
.field--cream     { background: var(--cream);        color: var(--ink); }

/* Mid-luminance red. Kept out of the dark-field muted rule below so its body
   copy renders at full paper strength rather than being dimmed to 2.16:1.
   Even so, paper on this ground is 3.09 — fine for the display heading, but
   under the 4.5 that the intro paragraph needs. #C74244 (same hue, 12%
   darker) clears it at 4.63 if that trade is worth making. */
.field--rose-mid  { background: var(--rose-mid);     color: var(--paper); }

/* Dark / saturated grounds — paper text */
.field--terracotta { background: var(--terracotta); color: var(--paper); }
.field--rust       { background: var(--rust);       color: var(--paper); }
.field--plum       { background: var(--plum);       color: var(--paper); }
.field--blue-deep  { background: var(--blue-deep);  color: var(--paper); }
.field--ink        { background: var(--ink);        color: var(--paper); }

/* On dark fields, muted copy lightens instead of darkening */
.field--terracotta .muted, .field--rust .muted, .field--plum .muted,
.field--blue-deep .muted, .field--ink .muted {
  color: rgba(253, 248, 242, 0.80);
}

/* rose-mid gets no dimming at all — at 3.09:1 full-strength paper is already
   the most legible option available on that ground. */
.field--rose-mid .muted { color: var(--paper); }

/* The 12px eyebrow is small text needing 4.5:1, and the default 0.72 opacity
   drops it below that on these two mid-tone grounds. Full strength gets
   rose-mid only reaches 3.09 even at full
   strength — that ground cannot carry 12px text; #C74244 would fix it. */
.field--rose-mid .eyebrow { opacity: 1; }

.section-head { margin-bottom: var(--space-2xl); }
.section-head .lead { margin-top: var(--space-md); }

.grid { display: grid; gap: var(--space-lg); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, var(--space-3xl));
  align-items: center;
}
.split--image-first > .split__text  { order: 2; }
.split--image-first > .split__media { order: 1; }

/* Give the media column extra width so the arch pair reads at the scale of
   the reference. Physical column order, so there are two variants: use
   --media-left when the media sits in column one, --media-right otherwise. */
.split--media-left  { grid-template-columns: 1.2fr 0.8fr; }
.split--media-right { grid-template-columns: 0.8fr 1.2fr; }

/* Editorial offset: pull a column vertically out of alignment */
.offset-up   { margin-top: calc(-1 * var(--space-2xl)); }
.offset-down { margin-top: var(--space-2xl); }


/* ---------- 4. Header ---------------------------------------------------- */

.header {
  position: sticky;
  top: var(--topbar-h, 0px);   /* docks under the sticky top bar */
  z-index: var(--z-header);
  /* Cream, so the chrome stays neutral and the section colours lead. The
     hairline below is what separates it from paper sections — a coloured
     bar would do that too, but at the cost of promoting a secondary hue
     above the peach/orange the brand leads with. */
  background: var(--paper);
  color: var(--ink);
  border-bottom: 1px solid rgba(51, 34, 59, 0.16);
  transition: background-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.header.is-scrolled { box-shadow: var(--shadow-sm); }

/* Transparent header sitting over a coloured hero.
   Stays position:fixed throughout — switching from absolute to fixed on
   scroll would jump the layout. The hero reserves top padding for it. */
/* Sticky rather than fixed, so the standalone top bar can scroll away above
   it. The hero is pulled up underneath by the same amount (see .hero), which
   keeps the transparent-header-over-photo effect. */
.header--over {
  background: transparent;
  border-bottom-color: transparent;
  color: var(--paper);
}
/* No separate fade on the nav row — the hero's own overlay covers it, as
   it did originally. */

/* Scrolled: the bar fills with soft lilac. That ground is too light to carry
   white — 2.71:1 — so the contents flip to ink (5.40:1) and the logo swaps
   to the dark lockup, which would otherwise disappear. */
.header--over.is-scrolled {
  background: var(--paper);
  border-bottom-color: rgba(51, 34, 59, 0.16);
  color: var(--ink);
}
.header--over.is-scrolled .logo__light { display: none; }
.header--over.is-scrolled .logo__dark  { display: block; }

/* Logo hard left, everything else grouped hard right. */
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  min-height: 4.5rem;
  padding-block: var(--space-sm);
}
.header__right {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.4vw, 2.5rem);
}

/* Logo lockup — uses Talyssa's own logo files */
.logo { display: flex; align-items: center; flex-shrink: 0; }
/* Sized by width, per the 150px target. The source artwork had the infinity
   mark sitting 2.4% right of the wordmark's centre, which read as off-centre
   however well the box was aligned — the *-aligned.png files correct that at
   the source. See NOTES.md. */
.logo img {
  width: clamp(150px, 16vw, 230px);
  height: auto;
}
/* Dark logo on paper, white logo on colour — swapped by which file is shown */
.logo__dark { display: block; }
.logo__light { display: none; }
.header--over .logo__dark { display: none; }
.header--over .logo__light { display: block; }

.nav { display: none; }
.nav__list { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); }
.nav__link {
  position: relative;
  display: inline-block;
  padding: var(--space-2xs) 0;
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.nav__link::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}
.nav__link:hover::after,
.nav__link[aria-current='page']::after { transform: scaleX(1); }

/* The CTA follows the bar it sits on: cream while the header is transparent
   over the hero photo, ink once the bar fills with cream (on scroll, and on
   every interior page) — where a cream pill would be invisible at 1.0:1.
   Markup stays .btn--ink; this override only applies in the transparent state.
   Specificity is (0,4,0), comfortably above .btn--ink's (0,1,0). */
.header--over:not(.is-scrolled) .btn.header__cta {
  background: var(--paper);
  color: var(--ink);
}
.header--over:not(.is-scrolled) .btn.header__cta:hover {
  background: var(--apricot-mid);
  color: var(--ink);
}

/* Compound selector: plain .header__cta ties with .btn, declared later.
   68em not 64em: with a 230px logo, the nav + button only clear it
   comfortably past ~1088px. Below that the hamburger takes over. */
.btn.header__cta { display: none; }
@media (min-width: 68em) { .btn.header__cta { display: inline-flex; } }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  padding: 0;
  background: none;
  border: 0;
  color: inherit;
}
.nav-toggle svg { width: 24px; height: 24px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded='true'] .icon-open  { display: none; }
.nav-toggle[aria-expanded='true'] .icon-close { display: block; }

/* Mobile drawer. --header-h is measured by main.js so this tracks the
   header at any width (the logo scales with clamp). */
.mobile-nav {
  position: fixed;
  inset: calc(var(--topbar-h, 0px) + var(--header-h, 4.5rem)) 0 auto 0;
  z-index: var(--z-overlay);
  max-height: calc(100dvh - var(--topbar-h, 0px) - var(--header-h, 4.5rem));
  overflow-y: auto;
  padding: var(--space-lg) var(--gutter) var(--space-2xl);
  background: var(--ink);
  color: var(--paper);
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              visibility var(--dur-base);
}
.mobile-nav.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.mobile-nav__list { display: flex; flex-direction: column; }
.mobile-nav__link {
  display: block;
  padding: var(--space-sm) 0;
  min-height: 48px;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  border-bottom: 1px solid rgba(255, 248, 243, 0.16);
}
.mobile-nav__link[aria-current='page'] { font-style: italic; }
.mobile-nav .btn { margin-top: var(--space-lg); width: 100%; }


/* ---------- 5. Buttons --------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  min-height: 48px;
  padding: var(--space-xs) var(--space-lg);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  text-align: center;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  transition: background-color var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.btn:active { transform: scale(0.98); }
.btn svg { width: 15px; height: 15px; }

.btn--primary { background: var(--terracotta); color: var(--paper-pure); }
.btn--primary:hover { background: var(--rust); }

/* Dark at rest, lilac on hover. The hover fill is light, so the label flips
   to ink with it — ink reaches 5.40:1 there where paper is only 2.71:1. */
.btn--ink { background: var(--ink); color: var(--paper); }
.btn--ink:hover { background: #B193B9; color: var(--ink); }

.btn--light { background: var(--paper); color: var(--ink); }
/* Apricot on hover — a clear warm shift from the cream rest state, where the
   lighter honey read as too subtle against the lilac bar. Label 7.0:1. */
.btn--light:hover { background: var(--apricot-mid); color: var(--ink); }

.btn--outline { background: transparent; color: inherit; border-color: currentColor; }
/* Hover fills with sage on every ground. Because the fill is opaque the
   label can always be ink, which retires the old per-field label-flip lists
   (28 lines of selectors that had to be kept in step with every new field). */
.btn--outline:hover {
  background: #D6D9AE;
  border-color: #D6D9AE;
  color: var(--ink);   /* 10.05:1 on the sage fill */
}

.btn--text {
  min-height: 44px;
  padding: var(--space-2xs) 0;
  background: none;
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid currentColor;
}
.btn--text:hover { gap: var(--space-sm); }

.btn[disabled], .btn[aria-disabled='true'] { opacity: 0.45; pointer-events: none; }

.btn-group { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-xl); }
.text-center .btn-group { justify-content: center; }


/* ---------- 6. Hero ------------------------------------------------------
   Full-bleed saturated field, photograph, and the logo/wordmark set huge
   across it — the Rosa & Verde / Floral Fragility treatment. */

.hero {
  position: relative;
  /* pulled up under the sticky header so the photo runs behind it */
  margin-top: calc(-1 * var(--header-h, 4.5rem));
  min-height: min(92dvh, 54rem);
  display: grid;
  align-items: center;
  text-align: center;
  overflow: hidden;
  background: var(--terracotta);
  color: var(--paper);
  isolation: isolate;
}

/* The photograph */
.hero__photo {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  /* No extra zoom — the full photograph shows, as Talyssa preferred.
     The multiply tint below handles the pale studio background instead. */
  filter: saturate(1.18) contrast(1.05);
}

/* Colour field.
   There is no alpha cutout available for these photographs, so a multiply
   tint is what unifies the remaining pale studio background into a single
   saturated ground — the flat-colour effect of the reference images.
   Held at 0.8 so the yellow centres and blue delphinium keep their identity
   instead of going fully monochrome pink. */
.hero__tint {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: #FFC08A;   /* peach, not pink — this is the brand's lead colour */
  mix-blend-mode: multiply;
  opacity: 0.82;
}

/* Scrim, not a colour wash. A tinted gradient over the whole photo turns the
   pastels muddy; this keeps the middle of the frame almost clear so the
   flowers stay vivid, and only darkens where type actually sits. */
.hero__grade {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* A single flat overlay across the whole hero, as originally — in the
     announcement-bar purple, so the header sits on it too. Raised from 0.5 to
     0.6 on 6 Sep: at 0.5 the brightest petals behind the headline measured
     2.28:1, under the 3:1 large text needs. */
  background: rgba(116, 87, 131, 0.6);   /* #745783 */
}

.hero__inner {
  position: relative;
  z-index: var(--z-raised);
  width: 100%;
  padding-block: calc(var(--header-h, 4.5rem) + var(--space-2xl)) var(--space-2xl);
}

/* The hero statement — the only thing carrying the top of the page now that
   the logo lives in the header. */
/* Sized and measured to break across two lines rather than three.
   ~38ch measure with a matching font size gets a clean two-line break at
   every width from phone to desktop. */
.hero__statement {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.35rem, 0.85rem + 1.9vw, 2.9rem);
  line-height: 1.18;
  letter-spacing: 0.01em;
  text-align: center;
  text-wrap: balance;
  max-width: 38ch;
  margin-inline: auto;
}

/* Top bar — a standalone strip above the header. Sticky, so it stays visible
   for the whole page; the header docks beneath it via --topbar-h, which
   main.js measures (the bar wraps to two lines on narrow screens). */
.topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-topbar);
  background: #33223B;
  color: #FDF8F2;   /* 13.88:1 */
}
/* .topbar__list beats the reset's ul[class]{padding:0} on specificity */
.topbar .topbar__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2xs) var(--space-xl);
  padding-block: var(--space-2xs);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  text-align: center;
}

/* Scroll cue */
.hero__cue {
  position: absolute;
  right: var(--gutter);
  bottom: var(--space-lg);
  z-index: var(--z-raised);
  display: none;
  align-items: center;
  gap: var(--space-2xs);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  writing-mode: vertical-rl;
}
@media (min-width: 64em) { .hero__cue { display: flex; } }


/* ---------- 7. Imagery -------------------------------------------------- */

/* Explicit ratio: without it the arch takes the image's own ratio, and a
   landscape photo turns the tall arch into a squashed dome. */
.arch { aspect-ratio: 3 / 4; border-radius: var(--radius-arch); overflow: hidden; }

/* ---- Arch + inset pair -------------------------------------------------
   A tall arch with a smaller mat-bordered photo overlapping its lower
   corner. Default: arch right, inset lower-left. .duo--mirror flips it. */
.duo {
  position: relative;
  /* room for the inset, which hangs below the arch */
  padding-bottom: 11%;
}

.duo__arch {
  width: 80%;
  margin-left: auto;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-arch);   /* shared with .arch */
  overflow: hidden;
}
.duo__arch img { width: 100%; height: 100%; object-fit: cover; }

.duo__inset {
  position: absolute;
  left: 0;
  bottom: 0;
  /* ~72% of the arch width, matching the reference proportion */
  width: 58%;
  padding: 5%;
  background: var(--paper-pure);
  box-shadow: var(--shadow-md);
}
.duo__inset img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}
/* Landscape inset — for framed pieces shot wide */
.duo__inset--wide img { aspect-ratio: 4 / 3; }

/* Mirrored: arch left, inset lower-right */
.duo--mirror .duo__arch  { margin-left: 0; margin-right: auto; }
.duo--mirror .duo__inset { left: auto; right: 0; }

@media (max-width: 37.4375em) {
  /* Tighter on phones so the inset never crowds the arch */
  .duo { padding-bottom: 18%; }
  .duo__arch { width: 84%; }
  .duo__inset { width: 54%; padding: 4.5%; }
}
.oval { border-radius: var(--radius-oval); overflow: hidden; aspect-ratio: 3 / 4; }
.oval img, .arch img { width: 100%; height: 100%; object-fit: cover; }

.frame { overflow: hidden; border-radius: var(--radius-md); }
.frame img { width: 100%; object-fit: cover; }

.media-caption {
  margin-top: var(--space-xs);
  font-size: var(--text-sm);
  font-style: italic;
  opacity: 0.75;
}

/* Colour block sitting behind an image, offset — editorial detail */
.block-behind { position: relative; }
.block-behind::before {
  content: '';
  position: absolute;
  inset: auto -6% -6% 12%;
  aspect-ratio: 1;
  background: var(--golden);
  z-index: -1;
  border-radius: var(--radius-md);
}


/* ---------- 8. Cards ---------------------------------------------------- */

.card {
  display: flex;
  flex-direction: column;
  background: var(--paper-pure);
  /* Cards are a light surface that can sit on a dark field, so they must
     reset the text colour. Without this they inherited the field's paper,
     leaving the outline button's label at 1.06:1 on white. */
  color: var(--ink);
  overflow: hidden;
  border-radius: var(--radius-md);
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.card--tinted { background: var(--paper); }
/* display:block matters: when .card__media is an <a> (journal cards) it would
   otherwise stay inline, and aspect-ratio has no effect on inline elements. */
.card__media { display: block; position: relative; aspect-ratio: 4 / 5; overflow: hidden; }
.card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.card__body { display: flex; flex-direction: column; flex: 1; padding: var(--space-lg); }
/* Product card headings — 4.58:1 on the white card, AA body. */
/* Sized here rather than inherited from the heading level: journal cards use
   <h2> (correct semantically for a list of articles) and were picking up the
   base h2 at 56px. */
.card__title {
  margin-bottom: var(--space-3xs);
  color: #91669C;
  font-size: var(--text-xl);   /* matches the h3 base rule the pricing cards used */
  line-height: var(--leading-snug);
}
.card__price {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--terracotta);
  margin-bottom: var(--space-sm);
  font-variant-numeric: tabular-nums;
}
.card__body p { color: var(--color-foreground-muted); line-height: var(--leading-relaxed); }

/* Set apart from the product description — this is a personal aside, not a
   selling point, so it reads quieter and sits at the foot of the card. */
.card__note {
  margin-top: auto;
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-sm);
  font-style: italic;
}
.card__body > .card__note { margin-top: var(--space-lg); }
/* Product-card outline buttons: ink border at rest, no border on hover.
   Scoped with :not(:hover) because this selector ties with
   .btn--outline:hover on specificity and is declared later — without it the
   ink border survived the hover and ringed the sage fill. */
.card .btn--outline:not(:hover) {
  border-color: #33223B;   /* 14.66:1 on the white card */
}
.card .btn--outline:hover {
  border-color: transparent;   /* sage fill shows through the border box */
}
.card__body .btn { margin-top: auto; align-self: flex-start; }
.card__body > * + .btn { margin-top: var(--space-lg); }

a.card:hover, .card--interactive:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
a.card:hover .card__media img, .card--interactive:hover .card__media img { transform: scale(1.05); }

.card__ribbon {
  position: absolute;
  top: var(--space-sm); left: var(--space-sm);
  z-index: var(--z-raised);
  padding: 0.35rem var(--space-sm);
  background: var(--ink);
  color: var(--paper);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  border-radius: var(--radius-pill);
}

/* Illustrative panel for a product with no photograph yet — deliberately
   not a stand-in photo of a different product. */
.card__media--placeholder {
  display: grid;
  place-items: center;
  background:
    repeating-linear-gradient(-45deg, transparent 0 12px, rgba(43,20,32,0.05) 12px 13px),
    var(--lilac-tint);
}
.card__media--placeholder svg { width: 34%; max-width: 5.5rem; opacity: 0.4; }


/* ---------- 9. Steps ---------------------------------------------------- */

.steps { display: grid; gap: var(--space-xl); counter-reset: step; }
.step { display: grid; gap: var(--space-sm); }
.step__num {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  line-height: 0.9;
  opacity: 0.32;
}
.step__num::before { counter-increment: step; content: counter(step, decimal-leading-zero); }
.step h3 { margin-bottom: var(--space-3xs); }
.step p { line-height: var(--leading-relaxed); opacity: 0.9; }
.step__figure img { width: 100%; max-width: 7rem; margin-bottom: var(--space-sm); }


/* ---------- 10. Quote --------------------------------------------------- */

.quote { max-width: 52rem; margin-inline: auto; text-align: center; }
.quote blockquote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-3xl);
  line-height: var(--leading-snug);
}
/* The line is already italic, so the emphasised word flips upright to stand
   out rather than italicising further, which would be invisible.
   NOTE: #B193B9 measures 2.57:1 on paper — under the 3:1 large-text minimum.
   #A785B0 is the same hue at 3.00 if that needs to clear. */
.quote blockquote em {
  font-style: normal;
  color: #B193B9;
}
.quote figcaption {
  margin-top: var(--space-lg);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  /* 0.85 not 0.7 — at 12px this is small text needing 4.5:1, and 0.7 ink
     over the mid-tone grounds measured only 3.76. */
  opacity: 0.85;
}


/* ---------- 11. Notice -------------------------------------------------- */

.notice {
  display: flex;
  gap: var(--space-md);
  padding: var(--space-lg);
  background: var(--paper-pure);
  border-left: 4px solid var(--terracotta);
  border-radius: var(--radius-md);
  color: var(--ink);
}
.notice__icon { flex-shrink: 0; width: 22px; height: 22px; color: var(--terracotta); margin-top: 3px; }
.notice h3 {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  margin-bottom: var(--space-3xs);
}
.notice p { line-height: var(--leading-relaxed); color: var(--color-foreground-muted); }


/* ---------- 12. Gallery + lightbox -------------------------------------- */

.gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); }
.gallery__item {
  position: relative;
  padding: 0; border: 0;
  background: var(--peach-tint);
  overflow: hidden;
  border-radius: var(--radius-md);
  cursor: zoom-in;
}
.gallery__item img {
  width: 100%; height: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.gallery__item:hover img { transform: scale(1.05); }
.gallery__item--oval { border-radius: var(--radius-oval); }
.gallery__item--tall { grid-row: span 2; }
.gallery__item--tall img { aspect-ratio: 3 / 6.2; }
.gallery__item--wide { grid-column: span 2; }
.gallery__item--wide img { aspect-ratio: 16 / 10; }

.gallery__caption {
  position: absolute; inset: auto 0 0 0;
  padding: var(--space-md) var(--space-sm) var(--space-sm);
  background: linear-gradient(to top, rgba(43,20,32,0.78), transparent);
  color: var(--paper);
  font-size: var(--text-sm);
  text-align: left;
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}
.gallery__item:hover .gallery__caption,
.gallery__item:focus-visible .gallery__caption { opacity: 1; }

.filters { display: flex; flex-wrap: wrap; gap: var(--space-2xs); justify-content: center; margin-bottom: var(--space-2xl); }
.filter {
  min-height: 44px;
  padding: var(--space-2xs) var(--space-md);
  background: transparent;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  transition: background-color var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.filter:hover { border-color: var(--ink); }
.filter[aria-pressed='true'] { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.lightbox {
  position: fixed; inset: 0;
  z-index: var(--z-modal);
  display: grid; place-items: center;
  padding: var(--gutter);
  background: var(--color-scrim);
  backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-base) var(--ease-out), visibility var(--dur-base);
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox__figure {
  max-width: min(60rem, 92vw);
  transform: scale(0.96);
  transition: transform var(--dur-base) var(--ease-out);
}
.lightbox.is-open .lightbox__figure { transform: scale(1); }
.lightbox__figure img { max-height: 78dvh; width: auto; margin-inline: auto; border-radius: var(--radius-md); }
.lightbox__figure figcaption { margin-top: var(--space-sm); color: var(--paper); font-size: var(--text-sm); text-align: center; }
.lightbox__close, .lightbox__nav {
  position: absolute;
  display: grid; place-items: center;
  width: 48px; height: 48px;
  background: rgba(255,248,243,0.14);
  border: 1px solid rgba(255,248,243,0.4);
  border-radius: 50%;
  color: var(--paper);
}
.lightbox__close:hover, .lightbox__nav:hover { background: rgba(255,248,243,0.28); }
.lightbox__close { top: var(--space-md); right: var(--space-md); }
.lightbox__close svg, .lightbox__nav svg { width: 20px; height: 20px; }
.lightbox__nav { top: 50%; transform: translateY(-50%); }
.lightbox__nav--prev { left: var(--space-sm); }
.lightbox__nav--next { right: var(--space-sm); }
body.is-locked { overflow: hidden; }


/* ---------- 13. Pricing ------------------------------------------------- */

.price-card {
  display: flex; flex-direction: column;
  padding: var(--space-xl);
  background: var(--paper-pure);
  border-radius: var(--radius-lg);
  color: var(--ink);
}
.price-card--featured { background: var(--ink); color: var(--paper); position: relative; }
.price-card--featured .price-card__from { border-color: rgba(255,248,243,0.28); }
.price-card.price-card--featured li { color: rgba(255,248,243,0.85); }  /* compound: must outrank .price-card li below */
.price-card__flag {
  position: absolute; top: -0.8rem; left: var(--space-xl);
  padding: 0.3rem var(--space-sm);
  background: var(--golden);
  color: var(--ink);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  border-radius: var(--radius-pill);
}
.price-card h3 { margin-bottom: var(--space-3xs); }
.price-card__sub { font-size: var(--text-sm); opacity: 0.7; margin-bottom: var(--space-lg); }
.price-card__from {
  display: flex; align-items: baseline; gap: var(--space-2xs);
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--color-border);
}
.price-card__from .label {
  font-size: var(--text-xs); font-weight: 500;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  opacity: 0.7;
}
.price-card__from .amount {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.price-card ul { display: grid; gap: var(--space-sm); }
.price-card li { display: flex; gap: var(--space-2xs); line-height: var(--leading-normal); color: var(--color-foreground-muted); }
.price-card li svg { flex-shrink: 0; width: 17px; height: 17px; margin-top: 4px; color: var(--sage-deep); }
.price-card--featured li svg { color: var(--golden); }
.price-card .btn { margin-top: var(--space-xl); }

.table-wrap { overflow-x: auto; background: var(--paper-pure); border-radius: var(--radius-lg); }
table.data { width: 100%; min-width: 34rem; border-collapse: collapse; font-variant-numeric: tabular-nums; }
table.data caption { padding: var(--space-md) var(--space-lg) 0; font-size: var(--text-sm); opacity: 0.7; text-align: left; }
table.data th, table.data td { padding: var(--space-sm) var(--space-lg); text-align: left; border-bottom: 1px solid var(--color-border); }
table.data thead th {
  font-family: var(--font-body);
  font-size: var(--text-xs); font-weight: 600;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  background: var(--peach-tint);
}
table.data tbody tr:last-child td, table.data tbody tr:last-child th { border-bottom: 0; }
table.data td.num { text-align: right; }

.compare { display: grid; gap: var(--space-lg); }
.compare__col { padding: var(--space-lg); border-radius: var(--radius-lg); }
.compare__col--yes { background: var(--paper-pure); }
.compare__col--no  { background: rgba(43, 20, 32, 0.05); }
.compare h3 {
  font-family: var(--font-body);
  font-size: var(--text-sm); font-weight: 600;
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  margin-bottom: var(--space-md);
}
.compare ul { display: grid; gap: var(--space-sm); }
.compare li { display: flex; gap: var(--space-2xs); color: var(--color-foreground-muted); }
.compare li svg { flex-shrink: 0; width: 17px; height: 17px; margin-top: 4px; }
.compare__col--yes svg { color: var(--sage-deep); }
.compare__col--no svg { opacity: 0.45; }

.price-note { font-size: var(--text-sm); opacity: 0.75; margin-top: var(--space-lg); }

/* Placeholder-price marker, so TBC figures are unmistakable */
.tbc {
  display: inline-block;
  padding: 0.1rem 0.4rem;
  margin-left: 0.3rem;
  background: var(--golden);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  vertical-align: middle;
}


/* ---------- 13b. Frame options ------------------------------------------ */

.opt-block + .opt-block { margin-top: var(--space-2xl); }
.opt-block__head {
  font-family: var(--font-body);
  font-size: var(--text-xs); font-weight: 600;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  padding-bottom: var(--space-2xs);
  margin-bottom: var(--space-lg);
  border-bottom: 1px solid var(--color-border);
}

.opts { display: grid; gap: var(--space-md); }

.opt {
  display: flex; flex-direction: column;
  padding: var(--space-md);
  background: var(--paper-pure);
  border-radius: var(--radius-md);
}
.opt__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-sm); }
.opt__name { font-family: var(--font-display); font-size: var(--text-xl); line-height: 1.15; }
.opt__price {
  flex-shrink: 0;
  font-size: var(--text-xs); font-weight: 600;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--rust);
}
.opt__price--free { color: var(--ink-soft); }
.opt p { margin-top: var(--space-2xs); font-size: var(--text-sm); color: var(--color-foreground-muted); }

/* Frame-finish tiles. Talyssa's own frame photography does not exist yet, so
   each tile shows the finish as a swatch and says plainly that a photo is
   coming. Swap .swatch for an <img> once the photos are shot. */
.finish { display: flex; flex-direction: column; gap: var(--space-sm); }
.finish__media { aspect-ratio: 1; border-radius: var(--radius-md); overflow: hidden; }
.finish__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.swatch {
  display: grid; place-content: center; gap: var(--space-sm);
  height: 100%;
  padding: var(--space-md);
  text-align: center;
  border: 1px dashed rgba(51, 34, 59, 0.3);
  border-radius: var(--radius-md);
  background: var(--paper);
}
.swatch__chip {
  width: min(7rem, 42vw); aspect-ratio: 1;
  margin-inline: auto;
  border-radius: var(--radius-sm);
  box-shadow: inset 0 0 0 1px rgba(51, 34, 59, 0.2);
}
/* A hint of grain so raw timber does not read as flat brown. */
.swatch__chip--timber {
  background:
    repeating-linear-gradient(90deg, rgba(120,78,40,0.16) 0 2px, rgba(120,78,40,0) 2px 9px),
    linear-gradient(160deg, #D8AC7C, #C08F5D);
}
.swatch__chip--white { background: linear-gradient(160deg, #FFFFFF, #EFEAE4); }
.swatch__chip--black { background: linear-gradient(160deg, #33313A, #1D1B22); }
.swatch__note {
  font-size: var(--text-xs); font-weight: 600;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--ink-soft);
}
.finish__name { font-family: var(--font-display); font-size: var(--text-lg); }

@media (min-width: 40em) {
  .opts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .opts--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* ---------- 13c. Size cards ---------------------------------------------- */

/* auto-fit rather than a fixed count: four across on a wide screen, two on a
   tablet, one on a phone, without a media query per breakpoint. */
.sizes {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr));
}

.size-card {
  display: flex; flex-direction: column;
  background: var(--paper-pure);
  color: var(--ink);
  border-radius: var(--radius-md);
  overflow: hidden;
}
/* Each card shows its frame's REAL proportions, so the shapes differ the way
   the products do. A-series is always 1:1.414; 50x50 is square. Without this
   every size rendered 4:5 and looked identical. */
.size-card__media { aspect-ratio: 1 / 1.414; }
.size-card--square .size-card__media { aspect-ratio: 1 / 1; }
.size-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Stand-in until Talyssa's per-size frame photos exist. */
.photo-pending {
  display: grid; place-items: center;
  height: 100%;
  padding: var(--space-md);
  text-align: center;
  background: var(--paper);
  border-bottom: 1px dashed rgba(51, 34, 59, 0.25);
  font-size: var(--text-xs); font-weight: 600;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--ink-soft);
}

.size-card__body { display: flex; flex-direction: column; flex: 1; padding: var(--space-md); }
.size-card__name { font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1.1; }
.size-card__dims {
  margin-top: var(--space-3xs);
  font-size: var(--text-xs); font-weight: 600;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--ink-soft);
}
.size-card__guide {
  margin-top: var(--space-sm);
  font-size: var(--text-sm);
  color: var(--color-foreground-muted);
}
/* margin-top:auto pins the price to the bottom so it lines up across cards
   even when the guidance copy runs to different lengths. */
.size-card__price {
  margin-top: auto; padding-top: var(--space-md);
  font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1;
}
.size-card__alt {
  display: block; margin-top: var(--space-3xs);
  font-family: var(--font-body);
  font-size: var(--text-xs); font-weight: 600;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--ink-soft);
}

/* Custom framing gets a photo and a wider footprint than the four standard
   sizes, because it is illustrating possibility rather than listing a product. */
.size-custom {
  display: grid;
  gap: 0;
  margin-top: var(--space-lg);
  background: var(--paper-pure);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.size-custom__media { aspect-ratio: 4 / 3; }
.size-custom__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.size-custom__media .photo-pending { border-bottom: 1px dashed rgba(51, 34, 59, 0.25); }
.size-custom__body { padding: var(--space-lg); align-self: center; }
.size-custom h3 { font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1.15; }
.size-custom p { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-foreground-muted); }

@media (min-width: 48em) {
  .size-custom { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
  /* Keep the 4:3 ratio on desktop too. Letting the media stretch to the text
     height squashed it to a 534x227 sliver, which would crop most of a
     gallery-wall photo away. The photo now sets the row height instead. */
  .size-custom__body { align-self: center; }
  .size-custom__media .photo-pending { border-bottom: 0; border-right: 1px dashed rgba(51, 34, 59, 0.25); }
}


/* ---------- 13d. Journal ------------------------------------------------- */

.journal-grid {
  display: grid;
  gap: var(--space-lg);
  /* Capped at 24rem rather than 1fr: with only two articles, auto-fit stretched
     each card to 554px, and the portrait media then ran 693px tall. */
  grid-template-columns: repeat(auto-fit, minmax(17rem, 24rem));
  justify-content: center;
}
/* Article cards read better landscape than the portrait product crop. */
.journal-card .card__media { aspect-ratio: 3 / 2; }
.journal-card__standfirst { color: var(--color-foreground-muted); margin-bottom: var(--space-md); }
.journal-card .card__body .btn { margin-top: auto; align-self: flex-start; }

/* Long-form article body. Sits inside .prose, so paragraph rhythm is already
   handled - this only adds what an article needs beyond a block of copy. */
.article { max-width: var(--container-text); margin-inline: auto; }
.article h2 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  margin-top: var(--space-2xl);
}
.article h2 + p { margin-top: var(--space-sm); }
.article ul { list-style: disc; padding-left: 1.25em; }
.article li { line-height: var(--leading-relaxed); }
.article li + li { margin-top: var(--space-2xs); }
.article__lead { font-size: var(--text-lg); line-height: var(--leading-relaxed); }

/* Pulled-out line for the one sentence a reader should leave with. */
.article__pull {
  margin-top: var(--space-xl);
  padding-left: var(--space-lg);
  border-left: 3px solid var(--terracotta);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  font-style: italic;
}


/* ---------- 13e. Holding page -------------------------------------------- */

/* Self-contained full-screen page for coming-soon.html. No sticky header, no
   nav - there is nothing to navigate to while the rest of the site is offline. */
.holding {
  position: relative;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--space-2xl) var(--gutter);
  text-align: center;
  color: var(--paper);
  overflow: hidden;
}
.holding__photo { position: absolute; inset: 0; z-index: -2; }
.holding__photo img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 45%;
  filter: saturate(1.12) contrast(1.04);
}
/* Deeper than the homepage hero: this page carries body copy and links, not a
   single large line, so it needs a stronger ground. Measured, not guessed. */
.holding__grade { position: absolute; inset: 0; z-index: -1; background: rgba(51, 34, 59, 0.72); }

/* Wider than the body copy needs, so the tagline breaks over two lines rather
   than three. .prose is pulled back in below to keep the paragraph readable. */
.holding__inner { max-width: 54rem; }
.holding__inner .prose { max-width: 40rem; margin-inline: auto; }
.holding__note { max-width: 44rem; margin-inline: auto; }
.holding__logo { width: min(200px, 55vw); height: auto; margin: 0 auto var(--space-xl); display: block; }
/* Sized down from the site-wide display scale so the whole page - headline,
   copy and the Email button - lands inside one screen. At the standard 110px
   the h1 ran to three lines and pushed the button below the fold. */
.holding__inner .display {
  color: var(--paper);
  font-size: clamp(2.6rem, 1.6rem + 4.2vw, 5rem);
  line-height: 1.04;
}
.holding__inner .subtitle {
  color: var(--paper);
  margin-inline: auto;
  font-size: clamp(1.15rem, 0.95rem + 0.9vw, 1.65rem);
  /* The base .subtitle caps at 22ch, which forced the tagline onto three
     lines. Widened so it breaks over two; text-wrap:balance evens them. */
  max-width: 38ch;
}
.holding__inner p { color: var(--paper); line-height: var(--leading-relaxed); }
.holding__inner .prose > * + * { margin-top: var(--space-md); }
.holding__note {
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid rgba(253, 248, 242, 0.28);
  font-size: var(--text-sm);
}
/* Registered entity + ABN. Small and quiet - it is a credibility signal for
   anyone who looks for it, not a headline. */
.holding__abn {
  margin-top: var(--space-md);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  color: rgba(253, 248, 242, 0.68);
}
/* The address is shown as text, not just wrapped in the button. A mailto:
   only works if the visitor has a mail client configured - anyone on Gmail or
   Outlook web gets nothing from a click, so they need to be able to read and
   copy it instead. */
.holding__email {
  margin-top: var(--space-sm);
  font-size: var(--text-sm);
  color: var(--paper);
}
.holding__email a {
  color: var(--paper);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  white-space: nowrap;
}
.holding__email a:hover { text-decoration-thickness: 2px; }

.holding__meta {
  margin-top: var(--space-lg);
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-xs) var(--space-lg);
  font-size: var(--text-xs); font-weight: 600;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: rgba(253, 248, 242, 0.82);
}


/* Holding page on short viewports.
   The page is designed to land in one screen, but "one screen" is a height, and
   most laptops are shorter than the pane this was built in. At 1440x900 the
   page ran 1028px and cut off the ABN line. These tighten type and spacing by
   viewport HEIGHT so it keeps fitting on a MacBook (~800px usable) and a
   1366x768 screen (~650px usable). Verified by measurement at each step. */
@media (max-height: 950px) {
  .holding { padding-block: var(--space-lg); }
  .holding__logo { width: min(170px, 50vw); margin-bottom: var(--space-md); }
  .holding__inner .display { font-size: clamp(2.2rem, 1.4rem + 3.2vw, 4rem); }
  .holding__inner .subtitle { font-size: clamp(1.05rem, 0.9rem + 0.6vw, 1.35rem); }
  .holding__note { margin-top: var(--space-md); padding-top: var(--space-md); }
  .holding .btn-group { margin-top: var(--space-md); }
  .holding__meta { margin-top: var(--space-md); }
  .holding__abn { margin-top: var(--space-xs); }
}

/* Phones sit around 812px tall, above the 780px breakpoint below, so they need
   their own tightening: the body copy reflows to six lines at 375px wide. */
@media (max-width: 40em) and (max-height: 900px) {
  .holding__inner .prose p { font-size: var(--text-sm); }
  .holding__note { font-size: var(--text-xs); margin-top: var(--space-sm); padding-top: var(--space-sm); }
  .holding__logo { width: min(150px, 46vw); margin-bottom: var(--space-sm); }
  .holding__inner .subtitle { font-size: 1rem; }
  .holding__meta { gap: var(--space-3xs) var(--space-md); margin-top: var(--space-sm); }
}

@media (max-height: 780px) {
  .holding__logo { width: min(140px, 44vw); margin-bottom: var(--space-sm); }
  .holding__inner .display { font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3rem); }
  .holding__inner .subtitle { font-size: 1.05rem; }
  .holding__inner .prose p { font-size: var(--text-sm); }
  .holding__note { font-size: var(--text-xs); }
}


/* ---------- 14. Accordion ----------------------------------------------- */

.accordion { max-width: var(--container-narrow); margin-inline: auto; border-top: 1px solid var(--color-border); }
.accordion__item { border-bottom: 1px solid var(--color-border); }
.accordion__trigger {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--space-md);
  width: 100%; min-height: 56px;
  padding: var(--space-md) 0;
  background: none; border: 0; text-align: left;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  color: inherit;
}
.accordion__trigger:hover { font-style: italic; }
.accordion__icon { flex-shrink: 0; width: 20px; height: 20px; margin-top: 6px; color: var(--terracotta); transition: transform var(--dur-base) var(--ease-out); }
.accordion__trigger[aria-expanded='true'] .accordion__icon { transform: rotate(45deg); }
.accordion__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-base) var(--ease-out); }
.accordion__panel[data-open='true'] { grid-template-rows: 1fr; }
.accordion__panel > div { overflow: hidden; }
.accordion__panel p { padding-bottom: var(--space-lg); line-height: var(--leading-relaxed); color: var(--color-foreground-muted); }
.accordion__panel p + p { padding-top: var(--space-sm); }

/* Accordion answers set --color-foreground-muted directly rather than via
   .muted, so the mid-tone grounds need naming again here. Measured ink-soft:
   periwinkle 4.31, sky 4.17, sage 4.56 - all at or under AA for body copy. */
.field--periwinkle .accordion__panel p,
.field--sky .accordion__panel p,
.field--sage-s .accordion__panel p { color: var(--ink); }

/* The +/x icon signals that a row expands, so it is a UI component and needs
   3:1. Terracotta only just clears that on the mid-tones (sky 3.04, periwinkle
   3.14, sage 3.32); rust keeps the warm accent and lifts them to 3.65-3.99. */
.field--periwinkle .accordion__icon,
.field--sky .accordion__icon,
.field--sage-s .accordion__icon { color: var(--rust); }


/* ---------- 15. Forms --------------------------------------------------- */

.form { max-width: 44rem; }
.form__grid { display: grid; gap: var(--space-lg); }
.form__row { display: grid; gap: var(--space-lg); }

fieldset { padding: 0; margin: 0; border: 0; }
fieldset + fieldset { margin-top: var(--space-2xl); padding-top: var(--space-2xl); border-top: 1px solid var(--color-border); }
legend {
  padding: 0; margin-bottom: var(--space-lg);
  font-family: var(--font-body);
  font-size: var(--text-xs); font-weight: 600;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  opacity: 0.7;
}

.field { display: grid; gap: var(--space-3xs); }
.field > label { font-size: var(--text-sm); font-weight: 500; }
.field .req { color: var(--terracotta); }
.field .hint { font-size: var(--text-sm); opacity: 0.68; line-height: var(--leading-normal); }

.field input[type='text'], .field input[type='email'], .field input[type='tel'],
.field input[type='date'], .field input[type='number'], .field select, .field textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--space-xs) var(--space-sm);
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--ink);
  background: var(--paper-pure);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.field textarea { min-height: 8rem; resize: vertical; line-height: var(--leading-normal); }
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232B1420' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-sm) center;
  background-size: 18px;
  padding-right: var(--space-2xl);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--terracotta);
  box-shadow: 0 0 0 3px rgba(192, 23, 95, 0.16);
}
.field input::placeholder, .field textarea::placeholder { color: rgba(43,20,32,0.42); }

.field .error { display: none; align-items: center; gap: var(--space-3xs); font-size: var(--text-sm); color: #A3242B; }
.field .error svg { width: 15px; height: 15px; flex-shrink: 0; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: #A3242B; }
.field.has-error .error { display: flex; }

.options { display: grid; gap: var(--space-2xs); }
.option {
  display: flex; align-items: flex-start; gap: var(--space-sm);
  min-height: 48px;
  padding: var(--space-xs) var(--space-sm);
  background: var(--paper-pure);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.option:hover { border-color: var(--color-border-strong); }
.option input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--terracotta); flex-shrink: 0; }
.option:has(input:checked) { border-color: var(--terracotta); background: rgba(192, 23, 95, 0.05); }
.option__text { display: grid; gap: 2px; }
.option__text strong { font-weight: 600; }
.option__text span { font-size: var(--text-sm); opacity: 0.7; }

.form__summary {
  display: none;
  padding: var(--space-md) var(--space-lg);
  margin-bottom: var(--space-xl);
  background: #FBEEEF;
  border-left: 4px solid #A3242B;
  border-radius: var(--radius-md);
  color: var(--ink);
}
.form__summary[data-visible='true'] { display: block; }
.form__summary h3 { font-family: var(--font-body); font-size: var(--text-base); font-weight: 600; color: #A3242B; margin-bottom: var(--space-3xs); }
.form__summary ul { display: grid; gap: var(--space-3xs); }
.form__summary a { color: #A3242B; text-decoration: underline; font-size: var(--text-sm); }

.form__success {
  display: none;
  padding: var(--space-xl);
  background: var(--golden-tint);
  border-radius: var(--radius-lg);
  text-align: center;
  color: var(--ink);
}
.form__success[data-visible='true'] { display: block; }
.form__success svg { width: 40px; height: 40px; margin: 0 auto var(--space-md); color: var(--sage-deep); }

.form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); margin-top: var(--space-2xl); }
.form__actions .btn { min-width: 12rem; }

.btn__spinner { display: none; width: 16px; height: 16px; }
.btn.is-loading .btn__spinner { display: block; animation: spin 700ms linear infinite; }
.btn.is-loading { pointer-events: none; opacity: 0.75; }
@keyframes spin { to { transform: rotate(360deg); } }

.fine-print {
  margin-top: var(--space-2xl);
  padding: var(--space-lg);
  background: rgba(43, 20, 32, 0.05);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}
.fine-print h3 {
  font-family: var(--font-body);
  font-size: var(--text-xs); font-weight: 600;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  margin-bottom: var(--space-3xs); opacity: 0.7;
}
.fine-print p + p { margin-top: var(--space-sm); }


/* ---------- 16. Testimonials -------------------------------------------- */

.testimonial { display: flex; flex-direction: column; padding: var(--space-xl); background: var(--paper-pure); border-radius: var(--radius-lg); color: var(--ink); }
.testimonial__stars { display: flex; gap: 2px; margin-bottom: var(--space-md); }
.testimonial__stars svg { width: 16px; height: 16px; color: var(--golden); }
.testimonial blockquote { flex: 1; font-family: var(--font-display); font-style: italic; font-size: var(--text-lg); line-height: var(--leading-relaxed); }
.testimonial figcaption {
  margin-top: var(--space-lg); padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-xs); font-weight: 500;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  opacity: 0.7;
}


/* ---------- 17. Instagram ----------------------------------------------- */

.insta-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xs); }
.insta-strip a { position: relative; overflow: hidden; border-radius: var(--radius-sm); }
.insta-strip img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.insta-strip a:hover img { transform: scale(1.07); }
.insta-strip a::after {
  content: '';
  position: absolute; inset: 0;
  background: rgba(43,20,32,0.3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 24 24' fill='none' stroke='%23FFF8F3' stroke-width='1.6'%3E%3Crect x='2' y='2' width='20' height='20' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M17.5 6.5h.01'/%3E%3C/svg%3E") center no-repeat;
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}
.insta-strip a:hover::after { opacity: 1; }


/* ---------- 18. Page head (interior pages) ------------------------------ */

/* The header is sticky and therefore still in normal flow, so this must NOT
   add --header-h on top — that was only correct while the header was fixed. */
.page-head { padding-block: var(--space-3xl) var(--section-y-tight); }
.page-head--center { text-align: center; }
.page-head--center .lead { margin-inline: auto; }
.page-head .display { margin-bottom: var(--space-md); }

.breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs);
  margin-bottom: var(--space-md);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  opacity: 0.75;
}
.page-head--center .breadcrumb { justify-content: center; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb li { display: flex; align-items: center; gap: var(--space-2xs); }
.breadcrumb li + li::before { content: '/'; opacity: 0.5; }


/* ---------- 19. Blog ---------------------------------------------------- */

.post-card { display: flex; flex-direction: column; }
.post-card__media { aspect-ratio: 3 / 2; border-radius: var(--radius-md); overflow: hidden; margin-bottom: var(--space-md); }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.post-card:hover .post-card__media img { transform: scale(1.05); }
.post-card__meta {
  display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-sm);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  opacity: 0.7; margin-bottom: var(--space-3xs);
}
.post-card h3 { margin-bottom: var(--space-3xs); }
.post-card:hover h3 { font-style: italic; }
.post-card p { color: var(--color-foreground-muted); line-height: var(--leading-relaxed); }

.empty-state {
  padding: var(--space-3xl) var(--space-lg);
  text-align: center;
  background: var(--paper-pure);
  border-radius: var(--radius-lg);
}
.empty-state svg { width: 36px; height: 36px; margin: 0 auto var(--space-md); color: var(--terracotta); opacity: 0.6; }
.empty-state h3 { margin-bottom: var(--space-3xs); }
.empty-state p { color: var(--color-foreground-muted); max-width: 32rem; margin-inline: auto; }


/* ---------- 20. Footer -------------------------------------------------- */

.footer { background: var(--ink); color: rgba(255, 248, 243, 0.8); padding-block: var(--section-y-tight) var(--space-xl); }
.footer__top { display: grid; gap: var(--space-2xl); padding-bottom: var(--space-2xl); border-bottom: 1px solid rgba(255,248,243,0.18); }
.footer__brand img { height: 6.5rem; width: auto; margin-bottom: var(--space-md); }
.footer__brand p { max-width: 26rem; line-height: var(--leading-relaxed); }
.footer__cols { display: grid; gap: var(--space-xl); }
.footer h3 {
  font-family: var(--font-body);
  font-size: var(--text-xs); font-weight: 600;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--honey-tint);   /* 11.88:1 on the footer ink */
  margin-bottom: var(--space-md);
}
.footer ul { display: grid; gap: var(--space-2xs); }
.footer a:hover { color: var(--paper); text-decoration: underline; text-underline-offset: 3px; }
.footer__list a { display: inline-block; min-height: 32px; padding-block: 4px; }
.footer__contact li { display: flex; gap: var(--space-2xs); align-items: flex-start; min-width: 0; }
/* The email address is longer than the footer column at some widths. Without
   these the flex row refuses to shrink and pushes the page into horizontal
   scroll (measured 11px at a 1258px viewport). */
.footer__contact li > :not(svg) { min-width: 0; overflow-wrap: anywhere; }
.footer__contact svg { width: 16px; height: 16px; margin-top: 5px; flex-shrink: 0; color: var(--honey-tint); }

.socials { display: flex; gap: var(--space-2xs); margin-top: var(--space-md); }
.socials a {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border: 1px solid rgba(255,248,243,0.3);
  border-radius: 50%;
  transition: background-color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.socials a:hover { background: rgba(255,248,243,0.14); border-color: var(--paper); }
.socials svg { width: 19px; height: 19px; }

.footer__bottom {
  display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-lg);
  align-items: center; justify-content: space-between;
  padding-top: var(--space-xl);
  font-size: var(--text-sm);
}
.footer__bottom p { opacity: 0.65; }
.footer__abn { display: inline-block; margin-top: var(--space-3xs); opacity: 0.72; }
.footer__legal { display: flex; flex-wrap: wrap; gap: var(--space-md); }


/* ---------- 21. Scroll reveal ------------------------------------------- */

[data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
[data-reveal].is-visible { opacity: 1; transform: none; }

[data-reveal-stagger] > * { opacity: 0; transform: translateY(18px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
[data-reveal-stagger].is-visible > * { opacity: 1; transform: none; }
[data-reveal-stagger].is-visible > *:nth-child(1) { transition-delay: 0ms; }
[data-reveal-stagger].is-visible > *:nth-child(2) { transition-delay: 70ms; }
[data-reveal-stagger].is-visible > *:nth-child(3) { transition-delay: 140ms; }
[data-reveal-stagger].is-visible > *:nth-child(4) { transition-delay: 210ms; }
[data-reveal-stagger].is-visible > *:nth-child(5) { transition-delay: 280ms; }
[data-reveal-stagger].is-visible > *:nth-child(6) { transition-delay: 350ms; }
[data-reveal-stagger].is-visible > *:nth-child(7) { transition-delay: 420ms; }
[data-reveal-stagger].is-visible > *:nth-child(8) { transition-delay: 490ms; }


/* ---------- 22. Responsive ---------------------------------------------- */

@media (min-width: 37.5em) {
  .form__row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .insta-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .compare { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 48em) {
  .footer__top { grid-template-columns: 1fr 1.25fr; gap: var(--space-3xl); }
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 64em) {
  .gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* Header swaps to the full nav a little later than the content breakpoint —
   the 230px logo needs the extra room. */
@media (min-width: 68em) {
  .nav { display: block; }
  .nav-toggle { display: none; }
  .mobile-nav { display: none; }
}

@media (max-width: 37.4375em) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; }
  .split--image-first > .split__text  { order: 1; }
  .split--image-first > .split__media { order: 2; }
  .btn-group .btn { width: 100%; }
  .offset-up, .offset-down { margin-top: 0; }
  .gallery__item--tall { grid-row: span 1; }
  .gallery__item--tall img { aspect-ratio: 3 / 4; }
  .hero { min-height: auto; }
}

@media (max-height: 30em) and (orientation: landscape) {
  :root { --section-y: 2.75rem; --section-y-tight: 2rem; }
  .hero { min-height: auto; }
}


/* ---------- 23. Reduced motion ------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal], [data-reveal-stagger] > * { opacity: 1; transform: none; }
  .card:hover, a.card:hover { transform: none; }
}


/* ---------- 24. Print --------------------------------------------------- */

@media print {
  .header, .mobile-nav, .footer, .nav-toggle, .lightbox, .hero__cue { display: none !important; }
  body { background: #fff; color: #000; }
  .field, .section { padding-block: 1rem; }
}


/* Sits under an h1 as the human counterpart to a factual heading. Set at
   display size so the phrase still reads as a phrase — as an .eyebrow it
   would be squashed to 12px uppercase and lose its meaning. */
.subtitle {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  margin-top: var(--space-sm);
  max-width: 22ch;
  text-wrap: balance;
}
.subtitle em { font-style: normal; }

/* ---------- 25b. Process steps (How It Works) ----------------------------
   No illustrations: the site's visual language is oversized type, flat colour
   and photography, so a set of decorative icons was a fourth language with no
   home. The numerals carry the sequence instead. */

.process { counter-reset: step; }

.process__step {
  padding-block: var(--space-2xl);
  border-top: 1px solid var(--color-border);
}
.process__step:first-child { border-top: 0; padding-top: 0; }
.process__step:last-child  { padding-bottom: 0; }

/* Oversized numeral, hung in the margin on wide screens so the headings and
   body copy stay on one clean left edge. */
.process__num {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-display);
  line-height: 0.8;
  color: var(--terracotta);
  opacity: 0.28;
  margin-bottom: var(--space-2xs);
}
.process__num::before { counter-increment: step; content: counter(step, decimal-leading-zero); }

.process__step h2 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-md);
}

/* Highlighted line within a step — the timing rule, the recreations note */
.process__note {
  padding: var(--space-md) var(--space-lg);
  margin-top: var(--space-md);
  max-width: var(--container-text);
  background: rgba(51, 34, 59, 0.05);
  border-left: 3px solid var(--terracotta);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

@media (min-width: 56em) {
  .process__step {
    display: grid;
    grid-template-columns: 9rem 1fr;
    column-gap: var(--space-2xl);
  }
  .process__num { grid-row: 1 / span 4; margin-bottom: 0; text-align: right; }
  .process__step > :not(.process__num) { grid-column: 2; }
}

/* ---------- 26. Definition block (About) -------------------------------- */

.definition { max-width: 44rem; margin-inline: auto; text-align: center; }
.definition__word {
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-style: italic;
  line-height: 1;
  margin-bottom: var(--space-xs);
}
.definition__pos {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-xl);
  opacity: 0.75;
  margin-bottom: var(--space-lg);
}
.definition__meaning {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  text-wrap: balance;
}

/* Small botanical rule, used to close a section */
.flourish {
  display: block;
  width: clamp(3rem, 6vw, 4.5rem);
  height: auto;
  margin: var(--space-2xl) auto 0;
  opacity: 0.7;
}

/* The pricing table is the point of the pricing page, so the price columns must
   not sit off-screen behind a horizontal swipe on a phone. Dropping the
   min-width and tightening the cells lets all four columns fit at 375px;
   .table-wrap still scrolls if a future column makes that impossible. */
@media (max-width: 34em) {
  table.data { min-width: 0; font-size: var(--text-sm); }
  table.data caption { padding: var(--space-md) var(--space-md) 0; }
  table.data th, table.data td { padding: var(--space-sm) var(--space-2xs); }
  table.data thead th:first-child, table.data tbody th { padding-left: var(--space-md); }
  table.data thead th:last-child, table.data td:last-child { padding-right: var(--space-md); }
}