/* ============================================================
   BERUNDA — Flagship homepage
   Built from the design export (ui_kits/website), in the kit's own
   load-bearing order: home.css → tweaks.css → parity.css →
   testimonials.css → mobile.css → hero-stationery.css.
   The kit's nav / cart / footer rules are deliberately NOT here —
   in the theme those live in berunda-chrome.css, website-nav.css,
   berunda-cart.css and footer.css, which every page loads.
   ============================================================ */

/* ===================== 1 · home.css ===================== */
/* ============================================================
   BERUNDA — Flagship Homepage
   Modern royal restraint · LV/Dior × heritage · slow, unhurried motion
   Uses the design-system tokens from ../../styles.css
   ============================================================ */

.bf {
  background: #00060f;
  color: var(--ivory-300);
  overflow-x: clip;
}
.bf * { box-sizing: border-box; }

.bf-container {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 clamp(24px, 6vw, 92px);
}

/* ---- Tracked-caps label (the signature eyebrow) ---- */
.bf-eyebrow {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.34em;
  font-size: clamp(10px, 0.78vw, 12px);
  color: var(--gold-300);
  font-weight: 400;
}

/* ============================================================
   Hero
   ============================================================ */
.bf-hero {
  position: relative;
  /* Tuck the hero up behind the translucent sticky nav so the velvet shows
     THROUGH the nav at the top — the royal "transparency on scroll" look,
     baked in (not a tweak). The -75px pull is fully compensated by +75px on
     both min-height and padding-top, so nothing below the hero shifts. */
  margin-top: -75px;
  min-height: calc(100vh - 49px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: calc(clamp(48px, 8vh, 110px) + 75px) 24px clamp(60px, 9vh, 120px);
  /* Royal-blue SATIN — smooth flowing folds catching a cool, refined sheen, lit
     from the upper-left. This is the base sheet; tweaks.css re-tints it per Court
     and gates the gold halo. Built from the navy scale with var fallbacks so the
     page still reads as satin if the tweak layer never loads. */
  /* Raw velvet drape — shown exactly as supplied; tweaks.css keeps it filter-free. */
  background-color: #1a0306;
  background-image: url("velvet-red-hero-v2.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* Velvet nap — fine fractal-noise grain layered over the drape so it reads as plush cloth, not glass. */
.bf-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='v'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23v)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  opacity: 0.14;
  mix-blend-mode: soft-light;
}
/* faint vignette to deepen the field and sink the fabric edges into shadow */
.bf-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(128% 98% at 44% 36%, transparent 50%, rgba(0,4,18,0.66) 100%);
  pointer-events: none;
}
/* ---- CTA button (thin gold outline, slow fill) ---- */
.bf-btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 12px;
  color: var(--gold-300);
  background: transparent;
  border: 1px solid var(--gold-600);
  padding: 17px 40px;
  cursor: pointer;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: color var(--dur-slow) var(--ease-standard), border-color var(--dur-slow) var(--ease-standard);
}
.bf-btn span { position: relative; z-index: 1; }
.bf-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--regal-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-slow) var(--ease-entrance);
  z-index: 0;
}
.bf-btn:hover { color: var(--navy-900); border-color: var(--regal-gold); }
.bf-btn:hover::before { transform: scaleX(1); }
.bf-btn .arrow { font-size: 1.05em; }

/* ============================================================
   Stats / Four counts  (espresso field)
   ============================================================ */
.bf-stats {
  /* No ground of its own — sits on the page's existing sticky sheet.
     Just a soft glow under the type; no band edges. */
  position: relative;
  /* Generous vertical room so the halo has space to melt into the page on every side */
  padding: clamp(55px, 8.8vh, 114px) 0;
  background: none;
}
/* The halo lives on its own layer that OVERRUNS the section box on every side,
   so its falloff reaches true zero outside the section. Painted on the section
   background it was cut off at the box edge — a faint but real hairline at the
   top and bottom joins. */
.bf-stats::before {
  content: "";
  position: absolute;
  inset: -68px -7%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(56% 52% at 50% 50%, rgba(255, 252, 245, 0.46) 0%, rgba(255, 252, 245, 0.4) 24%, rgba(255, 252, 245, 0.22) 50%, rgba(255, 252, 245, 0.07) 72%, rgba(255, 252, 245, 0) 88%);
}
.bf-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 0;
}
.bf-stat {
  text-align: center;
  padding: 4px clamp(16px, 2.6vw, 40px);
  position: relative;
}
/* hairline + diamond node between facts (editorial structure) */
.bf-stat + .bf-stat::before {
  content: "";
  position: absolute;
  left: 0;
  top: 26px;
  width: 1px;
  height: 145px;
  background: linear-gradient(180deg, rgba(150, 106, 26, 0.42), rgba(150, 106, 26, 0.05));
}
.bf-stat + .bf-stat::after {
  content: "";
  position: absolute;
  left: 0;
  top: 22px;
  width: 5px;
  height: 5px;
  margin-left: -2px;
  transform: rotate(45deg);
  background: var(--gold-600);
  opacity: 0.85;
}
.bf-stat-mark {
  display: block;
  width: 42px;
  height: 42px;
  margin: 0 auto 15px;
  color: var(--gold-600);
  opacity: 0.95;
}
.bf-stat-num {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(24px, 2.3vw, 35px);
  color: var(--navy-800);
  letter-spacing: 0.05em;
  line-height: 1.05;
}
.bf-stat-label {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: clamp(10.5px, 0.84vw, 12px);
  font-weight: 600;
  color: var(--navy-800);
  margin-top: 12px;
  line-height: 1.55;
}

/* ============================================================
   Estate Collection  (parchment field — light, spacious)
   ============================================================ */
.bf-collection {
  position: relative;
  /* Flat warm ivory — no gradient. Subtle engraved botanical friezes frame it. */
  background: #f2ead8;
  padding: clamp(104px, 15vh, 196px) 0 clamp(96px, 13vh, 168px);
  font-size: 18px;
  overflow: hidden;
}
/* faint botanical line art — engraved gold frieze top & bottom of the parchment */
.bf-collection::before,
.bf-collection::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  height: 44px;
  background: url("lotus-single.png") left center / auto 100% repeat-x;
  opacity: 0.12;
  pointer-events: none;
}
.bf-collection::before { top: clamp(34px, 5vh, 60px); }
.bf-collection::after { bottom: clamp(34px, 5vh, 60px); transform: scaleY(-1); }
.bf-collection .bf-eyebrow { color: var(--regal-gold); }
.bf-section-orn { display: flex; justify-content: center; margin-bottom: 10px; }
.bf-section-orn img { height: 38px; width: auto; opacity: 0.95; }
.bf-section-head { text-align: center; max-width: 720px; margin: 0 auto clamp(54px, 7vh, 92px); }
.bf-section-title {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--midnight-navy);
  font-size: clamp(34px, 4.4vw, 58px);
  letter-spacing: 0.05em;
  line-height: 1.06;
  margin: 18px 0 0;
}
.bf-section-lede {
  font-family: var(--font-body);
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.6;
  color: var(--espresso-brown);
  margin: 22px auto 0;
  max-width: 600px;
}

.bf-products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  --bf-pgap: clamp(22px, 2.6vw, 44px);
  gap: var(--bf-pgap);
  position: relative;
}
.bf-product {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: center;
  cursor: pointer;
  display: flex;
  flex-direction: column;
}
/* the dark velvet vitrine — the product photograph, framed in a gold hairline */
.bf-vitrine {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: #1a0306;
  box-shadow: 0 16px 40px rgba(26, 12, 6, 0.22);
  transition: transform var(--dur-slow) var(--ease-entrance), box-shadow var(--dur-slow) var(--ease-standard);
}
.bf-vitrine-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}
.bf-vitrine-frame {
  position: absolute;
  inset: 14px;
  border: 1px solid var(--gold-500);
  opacity: 0.5;
  pointer-events: none;
  transition: inset var(--dur-slow) var(--ease-standard), opacity var(--dur-slow) var(--ease-standard), border-color var(--dur-slow) var(--ease-standard);
}
.bf-product:hover .bf-vitrine { transform: translateY(-8px); box-shadow: 0 30px 60px rgba(26, 12, 6, 0.32); }
.bf-product:hover .bf-vitrine-frame { inset: 10px; opacity: 0.92; border-color: var(--gold-400); }
.bf-product:focus-visible { outline: none; }
.bf-product:focus-visible .bf-vitrine-frame { inset: 10px; opacity: 1; border-color: var(--gold-300); }

.bf-product-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(20px, 1.8vw, 28px) 8px 0;
  position: relative;
}
/* ONE continuous bloom behind the whole row of text — a single wide gaussian
   halo, not one per card. It is anchored on the first vitrine's meta (all metas
   are stretched to equal height, so it lines up) and stretched across all three
   columns, gaps included, so it reads as one long seamless glow. */
.bf-product-meta::before {
  content: "";
  display: none;
  position: absolute;
  inset: 10px 14px 6px;
  background: rgba(245, 238, 224, 0.8);
  border-radius: 120px;
  filter: blur(26px);
  z-index: -1;
  pointer-events: none;
}
.bf-product:first-child .bf-product-meta::before {
  display: block;
  left: -34px;
  right: calc(-200% - 2 * var(--bf-pgap) - 34px);
}
.bf-product-format {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.26em;
  font-size: 10px;
  font-weight: 700;
  color: var(--regal-gold);
}
.bf-product-price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(13px, 1.05vw, 15px);
  letter-spacing: 0.07em;
  color: var(--gold-600);
  margin: 9px 0 0;
}
.bf-product-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(18px, 1.6vw, 23px);
  color: var(--midnight-navy);
  letter-spacing: 0.05em;
  margin: 10px 0 0;
  line-height: 1.1;
}
.bf-product-view { margin-top: clamp(14px, 1.4vw, 20px); display: inline-flex; }
.bf-product-view-label {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.24em;
  font-size: 11px;
  font-weight: 700;
  color: var(--espresso-brown);
  padding-bottom: 5px;
  border-bottom: 1px solid var(--gold-500);
  transition: color var(--dur-slow) var(--ease-standard), border-color var(--dur-slow) var(--ease-standard);
}
.bf-product:hover .bf-product-view-label { color: var(--midnight-navy); border-color: var(--regal-gold); }

/* ============================================================
   Living Mythology  (navy field — dramatic close)
   ============================================================ */
.bf-myth {
  /* Flat deep navy — a dramatic dark close, deepening toward the footer. */
  background: #00091f;
  padding: clamp(56px, 9vh, 116px) 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
/* whisper-faint ceremonial sunburst — a single radiating gold ray motif,
   a royal halo behind the emblem. Masked to fade in from the edges so the
   centred text field stays perfectly clean. Decorative, pointer-inert. */
.bf-myth::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    repeating-conic-gradient(from 0deg at 50% 24%, rgba(212, 162, 63, 0.05) 0 0.4deg, transparent 0.4deg 9deg);
  -webkit-mask-image: radial-gradient(ellipse 70% 58% at 50% 24%, transparent 16%, #000 78%);
  mask-image: radial-gradient(ellipse 70% 58% at 50% 24%, transparent 16%, #000 78%);
}
.bf-myth-inner { max-width: 780px; margin: 0 auto; position: relative; z-index: 1; }
.bf-myth-emblem { display: flex; justify-content: center; margin-bottom: clamp(12px, 1.8vh, 20px); }
.bf-myth-emblem img { height: clamp(64px, 7vw, 92px); width: auto; filter: drop-shadow(0 10px 26px rgba(0, 0, 0, 0.5)); }
.bf-myth .bf-eyebrow { color: var(--gold-300); }
.bf-myth-title {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--gold-400);
  font-size: clamp(30px, 4vw, 54px);
  letter-spacing: 0.05em;
  line-height: 1.12;
  margin: 14px auto 0;
  max-width: 680px;
}
.bf-myth-rule {
  width: 70px; height: 1px;
  background: var(--gold-500);
  margin: 20px auto;
}
.bf-myth-p1 {
  font-family: var(--font-body);
  font-size: clamp(18px, 1.7vw, 23px);
  line-height: 1.62;
  color: var(--ivory-300);
  margin: 0 auto;
  max-width: 620px;
}
.bf-myth-p2 {
  font-family: var(--font-body);
  font-size: clamp(15px, 1.25vw, 17px);
  line-height: 1.62;
  color: var(--ivory-400);
  margin: 16px auto 0;
  max-width: 560px;
}
.bf-myth-cta { margin-top: clamp(22px, 3.2vh, 34px); }
/* refined close CTA on navy — gold outline, slow gold fill + soft glow, nudging arrow */
.bf-myth-cta .bf-btn {
  padding: 18px 46px;
  color: var(--gold-300);
  border-color: var(--gold-500);
  letter-spacing: 0.24em;
}
.bf-myth-cta .bf-btn:hover {
  color: var(--navy-900);
  border-color: var(--regal-gold);
  box-shadow: 0 12px 32px rgba(198, 135, 27, 0.22);
}
.bf-myth-cta .bf-btn .arrow { transition: transform var(--dur-slow) var(--ease-standard); }
.bf-myth-cta .bf-btn:hover .arrow { transform: translateX(4px); }

/* ============================================================
   Scroll-reveal animation primitives
   ============================================================ */
.bf-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1.1s var(--ease-entrance), transform 1.1s var(--ease-entrance);
  will-change: opacity, transform;
}
.bf-reveal.in { opacity: 1; transform: none; }

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .bf-products { grid-template-columns: repeat(2, 1fr); gap: 28px 22px; }
  /* fewer per row / stacked — back to a bloom per card */
  .bf-product-meta::before { display: block; }
  .bf-product:first-child .bf-product-meta::before { left: 14px; right: 14px; }
  .bf-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 0; padding: 34px 0; }
  .bf-stat { padding: 26px clamp(14px, 4vw, 34px); }
  .bf-stat + .bf-stat::before, .bf-stat + .bf-stat::after { display: none; }
  .bf-stat:nth-child(even)::before, .bf-stat:nth-child(even)::after { display: block; }
  .bf-stat:nth-child(even)::before { height: 96px; }
  .bf-stat:nth-child(n+3) { border-top: 1px solid rgba(150, 106, 26, 0.22); }
}
@media (max-width: 680px) {
  .bf-nav-group { display: none; }
  .bf-nav-inner { grid-template-columns: 1fr; justify-items: center; }
  .bf-stats-grid { grid-template-columns: 1fr; }
  .bf-stat::before, .bf-stat::after { display: none !important; }
  .bf-stat { padding: 24px 8px; }
  .bf-stat + .bf-stat { border-top: 1px solid rgba(150, 106, 26, 0.22); }
  .bf-products { grid-template-columns: 1fr; max-width: 360px; margin: 0 auto; }
}

@media (prefers-reduced-motion: reduce) {
  .bf-reveal {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
}

/* ===================== 2 · tweaks.css ===================== */
/* ============================================================
   BERUNDA — Expressive registers (homepage)
   Three registers shape the feel, driven by CSS vars + the
   [data-court] attribute on .bf:
     · Royal Court  — re-tints the dark fields (mood)
     · Ceremony     — motion register (timing + reveal travel)
     · Opulence     — gold / ornament intensity
   ============================================================ */

/* ---- Shipped values (were applied at runtime by the removed tweaks panel) ---- */
.bf {
  --bf-mo: 1.650;    /* motion multiplier (Ceremony)            */
  --bf-op: 1.000;    /* opulence 0–1   (Opulence)              */
  --bf-glow: 0.330;  /* gold field-glow alpha (Opulence)        */
  --bf-hair: 0.360;  /* gold hairline alpha   (Opulence)        */
  --bf-halo: 0;      /* crest gold halo — off                   */
  --satin-wash: transparent;    /* hero cloth re-hue ('color' blend) — none at Midnight */
  --bf-nav-rgb: 0, 9, 31;   /* nav scrim tint (Court)           */

  /* Court ground palette (defaults = Midnight) — the lit fold (g1) is a
     royal satin blue sitting between brand midnight (#01143c) and a brighter
     royal blue, so the upper-left drape reads luminous while valleys stay deep. */
  --ground: #00060f;
  --g1: #16499a; --g2: #04194a; --g3: #00091f; --g4: #00060f;
  --myth1: #01143c; --myth2: #00091f;

  background: var(--ground);
  transition: background-color 0.6s var(--ease-standard);
}

/* ============================================================
   1 · ROYAL COURT — dark-field mood (gold accent kept across all)
   ============================================================ */
.bf[data-court="espresso"] {
  --ground: #0b0603;  --bf-nav-rgb: 26, 15, 8;
  --g1: #3a2316; --g2: #241307; --g3: #150b05; --g4: #0b0603;
  --myth1: #241307; --myth2: #0b0603;
  --satin-wash: #7a5026;
}
.bf[data-court="crimson"] {
  --ground: #0a0205;  --bf-nav-rgb: 28, 4, 8;
  --g1: #5a0c14; --g2: #2c0103; --g3: #150206; --g4: #0a0205;
  --myth1: #2c0103; --myth2: #0a0205;
  --satin-wash: #921521;
}

/* Fields that carry the mood */

.bf-hero {
  /* Raw velvet drape — shown exactly as supplied, no re-tint, blend, halo or
     legibility wash layered on top. */
  background-color: #1a0306;
  background-image: url("velvet-red-hero-v2.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* No grain, no vignette — the photo carries its own surface. */
.bf-hero::before { opacity: 0; }
.bf-hero::after { background: none; }
.bf-myth {
  /* Flat deep navy close (matches home.css) with a faint gold crown glow tied to Opulence. */
  background:
    radial-gradient(60% 60% at 50% 0%, rgba(198, 135, 27, calc(var(--bf-glow) * 0.42)), transparent 70%),
    #00091f;
}

/* gold hairlines tied to Opulence */
.bf-stats    { border-top-color: rgba(198, 135, 27, var(--bf-hair)); border-bottom-color: rgba(198, 135, 27, var(--bf-hair)); }

/* ============================================================
   2 · CEREMONY — motion register (scales all slow timing + travel)
   ============================================================ */
.bf { --dur-slow: calc(480ms * var(--bf-mo)); --dur-normal: calc(240ms * var(--bf-mo)); }

.bf-reveal {
  transition-duration: calc(1.05s * var(--bf-mo)), calc(1.05s * var(--bf-mo));
}
.bf-reveal:not(.in) { transform: translateY(calc(30px * var(--bf-mo))); }

/* ============================================================
   3 · OPULENCE — gold / ornament intensity
   ============================================================ */
.bf-myth-title {
  text-shadow: 0 0 calc(34px * var(--bf-op)) rgba(198, 135, 27, calc(0.42 * var(--bf-op)));
}

@media (prefers-reduced-motion: reduce) {
  .bf-reveal:not(.in) { transform: none; }
}

/* ===================== 3 · parity.css (home) ===================== */
/* The 9s col-card-xfade crossfade is gone — see collection.css. The home page
   carried its own copy of the keyframes, so it had the same self-changing
   product image. Hidden here too, for the same reason. */
.col-card-img--alt { display: none; }
/* ============ HOME — estate collection ============ */
/* crest letterhead field — the same fixed stationery as the collection page,
   clipped to this section (iOS-safe technique) */
.bf-collection {
  background: var(--ivory-beige, #c4b79a);
  overflow: hidden;
  clip-path: inset(0);
}
.bf-collection::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  height: auto;
  width: auto;
  top: 0; left: 0; right: 0; bottom: 0;
  opacity: 1;
  transform: none;
  pointer-events: none;
  background: var(--ivory-beige, #c4b79a) url("collection-hero-crest-v2.webp") center / cover no-repeat;
}
.bf-collection::after { display: none; }
.bf-collection > * { position: relative; z-index: 1; }

/* three vitrines: Arjuna + Gajendra (merged) + Dhrona */
.bf-products {
  grid-template-columns: repeat(3, 1fr);
  max-width: 1080px;
  margin: 0 auto;
}
@media (max-width: 900px) {
  .bf-products { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
  .bf-products { grid-template-columns: 1fr; max-width: 360px; }
}

/* Merged vitrines once dissolved the ground pouch over the drip box and back.
   Removed with the collection-card crossfade — a product photograph that
   changes by itself reads as a fault. Hidden rather than deleted so cached
   markup carrying the element cannot revive it. */
.bf-vitrine-img--alt { display: none; }

/* meta absorbs the stretched card height; View pinned to the bottom.
   The parchment halo now lives as a single soft glow (::before, home.css)
   behind the whole text block instead of a per-line text-shadow. */
.bf-product-meta {
  flex: 1 1 auto;
}
.bf-product-view { margin-top: auto; padding-top: clamp(14px, 1.4vw, 20px); }

/* format label: each format its own segment split by a small gold diamond;
   reserve two lines so names align across cards */
.bf-product-format {
  color: var(--espresso-brown, #422817);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 12px;
  min-height: 32px;
  align-content: flex-start;
}
.bf-format-div {
  width: 5px;
  height: 5px;
  background: var(--gold-600, #b0761a);
  transform: rotate(45deg);
  flex: none;
}

/* ---- product cards are links now (popup retired for full pages) ---- */
a.col-card, a.bf-product {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}


/* ===================== 4 · testimonials.css ===================== */
/* ============================================================
   BERUNDA — Testimonials · "In Their Own Words"
   Beige (ivory) field between the navy stats band and the navy
   Living Mythology close. Navy calling-cards drift in a slow
   ceremonial marquee; hover pauses, arrows nudge.
   ============================================================ */
.bf-praise{position:relative;background:var(--ivory-beige,#c4b79a);padding:clamp(44px,5vw,60px) 0 clamp(56px,7vw,88px);overflow:hidden;clip-path:inset(0)}
/* royal crest letterhead — same fixed stationery as the collection, clipped to this section */
.bf-praise::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background:var(--ivory-beige,#c4b79a) url("collection-hero-crest-v2.webp") center / cover no-repeat}
.bf-praise > *{position:relative;z-index:1}
.bf-praise-head{position:relative;text-align:center;margin-bottom:clamp(28px,3.5vw,40px)}
.bf-praise-head .bf-section-orn img{height:18px;width:auto;opacity:.85}
.bf-praise-title{font-family:var(--font-display);font-weight:700;color:var(--midnight-navy);font-size:clamp(28px,3vw,40px);letter-spacing:.06em;margin:14px 0 0}
.bf-praise-divider{display:block;position:relative;z-index:1;width:92%;max-width:860px;height:1px;margin:0 auto;transform:translateY(calc(-1 * clamp(44px,5vw,60px)));background:linear-gradient(90deg,transparent,var(--gold-500,#c6871b) 50%,transparent);opacity:.7}
/* ---- Round gilt medallion arrows, flanking the cards ---- */
.bf-praise-band-wrap{position:relative;z-index:1}
.bf-praise-arrow--side{position:absolute;top:50%;transform:translateY(-50%);z-index:3}
.bf-praise-arrow--prev{left:clamp(8px,2.5vw,36px)}
.bf-praise-arrow--next{right:clamp(8px,2.5vw,36px)}
.bf-praise-arrow--side:active{transform:translateY(-50%) scale(.95)}
.bf-praise-arrow--side::before{content:"";position:absolute;top:50%;left:50%;width:46px;height:46px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(244,236,220,.95) 0%,rgba(244,236,220,.75) 55%,rgba(244,236,220,0) 100%);z-index:-1;pointer-events:none}
.bf-praise-arrow{display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;background:transparent;border:1px solid rgba(1,17,52,.3);box-shadow:none;color:var(--midnight-navy,#011134);cursor:pointer;transition:color var(--dur-med,240ms) var(--ease-standard,ease),border-color var(--dur-med,240ms) var(--ease-standard,ease),background var(--dur-med,240ms) var(--ease-standard,ease)}
.bf-praise-arrow svg{width:11px;height:18px;transition:transform var(--dur-med,240ms) var(--ease-standard,ease)}
.bf-praise-arrow:hover{color:var(--midnight-navy,#011134);border-color:var(--midnight-navy,#011134);background:rgba(1,17,52,.07);box-shadow:none}
.bf-praise-arrow:hover svg{transform:translateX(2px)}
.bf-praise-arrow[data-dir="-1"]:hover svg{transform:translateX(-2px)}
.bf-praise-arrow:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
/* ---- The drifting band ---- */
.bf-praise-band{position:relative;cursor:grab;touch-action:pan-y}
.bf-praise-band.dragging{cursor:grabbing}
.bf-praise-track{display:flex;width:max-content;will-change:transform;padding:14px 0 26px}
.bf-praise-set{display:flex;gap:clamp(20px,2.4vw,30px);padding-right:clamp(20px,2.4vw,30px)}
.bf-praise-slot{display:flex}
/* ---- The calling card ---- */
.bf-praise-card{position:relative;width:clamp(300px,46vw,580px);min-height:252px;margin:0;perspective:1600px;transform:rotate(var(--tilt,0deg));transition:transform var(--dur-med,240ms) var(--ease-standard,ease),height .66s cubic-bezier(.22,.61,.36,1)}
.pc-inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .82s cubic-bezier(.5,.06,.18,1)}
.pc-face{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;align-items:center;text-align:center;padding:clamp(48px,4.5vw,58px) clamp(28px,3vw,42px) clamp(28px,3vw,38px);background:linear-gradient(158deg,#02205a 0%,#01143c 52%,#010f2e 100%);border-radius:var(--radius-sm,4px);overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;transition:box-shadow var(--dur-med,240ms) var(--ease-standard,ease)}
.bf-praise-card:hover{transform:translateY(-3px) rotate(0deg)}
.bf-praise-card:hover .pc-front{box-shadow:0 0 0 1px rgba(198,135,27,.4)}
.bf-praise-card.has-more{cursor:pointer}
.bf-praise-card.is-open,.bf-praise-card.is-open:hover{transform:rotate(0deg);z-index:5}
.bf-praise-card.is-open .pc-inner{transform:rotateY(180deg)}
.bf-praise-frame{position:absolute;inset:11px;border:1px solid rgba(198,135,27,.28);border-radius:2px;pointer-events:none}
.bf-praise-glyph{display:block;font-family:var(--font-body);font-size:50px;line-height:.6;color:var(--gold-400);flex:none;margin-bottom:16px}
.bf-praise-quote{font-family:var(--font-body);font-style:italic;font-size:clamp(20px,1.8vw,25px);line-height:1.5;color:var(--parchment);margin:0 0 26px;max-width:36ch;text-wrap:pretty;position:relative;z-index:1}
.bf-praise-attr{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;margin-top:26px;position:relative;z-index:1}
.bf-praise-name{font-family:var(--font-display);font-size:11px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-300)}
.bf-praise-crest{position:absolute;right:-14px;bottom:-20px;height:104px;width:auto;opacity:.09;pointer-events:none;user-select:none}
/* ✦ Postmark — faint circular gold city stamp, franked royal mail */
.bf-praise-stamp{display:block;position:absolute;top:17px;right:17px;width:64px;height:64px;border:1px solid rgba(227,189,110,.55);border-radius:50%;transform:rotate(-12deg);opacity:.5;z-index:1;pointer-events:none}
.bf-praise-stamp::before{content:"";position:absolute;inset:4px;border:1px solid rgba(227,189,110,.4);border-radius:50%}
.bf-praise-stamp b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:0 7px;font-family:var(--font-display);font-weight:700;font-size:7.5px;letter-spacing:.22em;text-indent:.22em;text-transform:uppercase;color:var(--gold-300);text-align:center;line-height:1.3}
.bf-praise-stamp i{position:absolute;left:50%;width:3px;height:3px;margin-left:-1.5px;background:var(--gold-400);transform:rotate(45deg)}
.bf-praise-stamp i:first-child{top:10px}
.bf-praise-stamp i:last-child{bottom:10px}
/* ✦ Scattered stationery — alternating ±1° tilt, straightens on hover */
.bf-praise-slot:nth-child(odd) .bf-praise-card{--tilt:-1.1deg}
.bf-praise-slot:nth-child(even) .bf-praise-card{--tilt:1.1deg}
/* ---- Read more (only on notes too long for the card) ---- */
.pc-body{display:flex;flex-direction:column;align-items:center;position:relative;z-index:1}
.pc-more{display:none;position:relative;z-index:2;appearance:none;-webkit-appearance:none;background:none;border:0;margin:-10px 0 0;padding:7px 3px;font-family:var(--font-display);font-weight:700;font-size:10px;letter-spacing:.22em;text-indent:.22em;text-transform:uppercase;color:var(--gold-300);cursor:pointer;transition:color var(--dur-med,240ms) var(--ease-standard,ease)}
.bf-praise-card.has-more .pc-more{display:inline-flex;align-items:center}
.bf-praise-card.has-more .bf-praise-quote{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
.bf-praise-card.m-front .bf-praise-quote,.bf-praise-card.m-back .bf-praise-quote{display:block;overflow:visible}
.pc-front{overflow:hidden}
/* hit area to 44px without growing the button — the card height is measured
   from this button's box, so padding here would resize the whole band */
.pc-more::before{content:"";position:absolute;inset:-8px -3px}
.pc-more::after{content:"";position:absolute;left:3px;right:3px;bottom:3px;height:1px;background:currentColor;opacity:.38;transition:opacity var(--dur-med,240ms) var(--ease-standard,ease)}
.pc-more:hover{color:var(--gold-200,#f0d9a4)}
.pc-more:hover::after{opacity:.9}
.pc-more:focus-visible,.pc-close:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}
/* ---- The reverse: the note written out in full ---- */
.pc-back{transform:rotateY(180deg);background:linear-gradient(158deg,#fbf6e8 0%,#f4ecd8 55%,#ebe0c6 100%);padding:clamp(40px,3.8vw,50px) clamp(28px,3vw,42px) clamp(22px,2.4vw,30px);box-shadow:0 0 0 1px rgba(66,40,23,.16),0 14px 34px rgba(31,18,6,.2)}
.pc-back .bf-praise-frame{border-color:rgba(143,93,17,.34)}
.pc-back .bf-praise-name{color:var(--midnight-navy,#011134)}
.pc-back .bf-praise-crest{right:auto;bottom:auto;left:50%;top:48%;height:190px;opacity:.085;transform:translate(-50%,-50%)}
.pc-back-body{display:flex;flex-direction:column;flex:1 1 auto;width:100%;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(143,93,17,.4) transparent;position:relative;z-index:1}
.pc-full{font-family:var(--font-body);font-style:italic;font-size:clamp(17px,1.45vw,20px);line-height:1.6;color:var(--espresso-brown,#422817);margin:auto;max-width:36ch;text-wrap:pretty}
.pc-back-foot{display:flex;flex-direction:column;align-items:center;gap:14px;width:100%;flex:none;position:relative;z-index:1;padding-top:18px}
.pc-rule{display:block;width:120px;height:1px;background:linear-gradient(90deg,transparent,rgba(143,93,17,.55),transparent)}
.pc-close{appearance:none;-webkit-appearance:none;background:none;border:0;padding:8px 4px 4px;font-family:var(--font-display);font-weight:700;font-size:9.5px;letter-spacing:.24em;text-indent:.24em;text-transform:uppercase;color:rgba(93,60,14,.78);cursor:pointer;transition:color var(--dur-med,240ms) var(--ease-standard,ease)}
.pc-close:hover{color:#2a1810}
/* ---- Measuring passes (JS sizes the cards; never seen) ---- */
.bf-praise-track.no-anim .bf-praise-card,.bf-praise-track.no-anim .pc-inner{transition:none!important}
.bf-praise-card.m-front,.bf-praise-card.m-back{height:auto!important;align-self:flex-start}
.bf-praise-track.no-anim .bf-praise-set,.bf-praise-track.no-anim .bf-praise-slot{align-items:flex-start}
.bf-praise-card.m-front .pc-inner,.bf-praise-card.m-back .pc-inner{position:relative;inset:auto;transform:none!important}
.bf-praise-card.m-front .pc-front,.bf-praise-card.m-back .pc-back{position:relative;inset:auto;transform:none}
.bf-praise-card.m-front .pc-back,.bf-praise-card.m-back .pc-front{display:none}
/* ---- Static fallback (reduced motion): native horizontal scroll ---- */
.bf-praise-band.static{overflow-x:auto;scrollbar-width:none;cursor:default}
.bf-praise-band.static::-webkit-scrollbar{display:none}
.bf-praise-band.static .bf-praise-track{padding-left:max(24px,calc((100vw - 1320px)/2));padding-right:24px}
@media (prefers-reduced-motion: reduce){
}
@media (max-width: 680px){
  .bf-praise-arrow--prev{left:6px}
  .bf-praise-arrow--next{right:6px}
  .bf-praise-head{margin-bottom:30px}
}

/* ===================== 5 · mobile.css (home) ===================== */
@media (max-width: 680px) {
.bf-reveal { transform: translateY(14px); transition-duration: 0.8s; }
.bf-btn:active { transform: scale(0.975); }
.bf-collection { padding: 64px 0 76px; font-size: 17px; }
.bf-section-head { margin-bottom: 44px; }
.bf-section-title { font-size: 30px; }
.bf-section-lede { font-size: 17px; margin-top: 16px; }
.bf-products { max-width: 340px; gap: 52px; }
.bf-product-meta { padding-top: 18px; }
.bf-product-format { display: flex; flex-wrap: wrap; justify-content: center; column-gap: 12px; row-gap: 6px; font-size: 10.5px; letter-spacing: 0.15em; line-height: 1.5; max-width: 320px; }
.bf-format-div { display: none; }
.bf-product-name { font-size: 25px; margin-top: 12px; }
.bf-product-view { margin-top: 16px; }
.bf-product-view-label { font-size: 12px; padding: 12px 26px 11px; border: 1px solid var(--gold-500, #a1730f); }

.bf-stats-grid { padding: 46px 0 50px; gap: 36px 8px; }
.bf-stat-num { font-size: 24px; }
.bf-stat-label { font-size: 10.5px; letter-spacing: 0.18em; margin-top: 11px; }

.bf-praise { padding: 44px 0 56px; }
.bf-praise-title { font-size: 25px; }
.bf-praise-card { min-height: 230px; width: min(86vw, 430px); }
.bf-praise .pc-front { padding: 44px 24px 26px; }
.bf-praise .pc-back { padding: 34px 24px 22px; }
.bf-praise-quote { font-size: 19px; margin-bottom: 22px; }
.bf-praise-name { font-size: 12px; letter-spacing: 0.2em; }

.bf-myth { padding: 72px 0 80px; }
.bf-myth-title { font-size: 27px; margin-top: 18px; }
.bf-myth-rule { margin: 26px auto; }
.bf-myth-p1 { font-size: 18px; }
.bf-myth-p2 { font-size: 16.5px; line-height: 1.62; margin-top: 20px; }
.bf-myth-cta { margin-top: 34px; }
.bf-myth-cta .bf-btn { width: min(100%, 340px); justify-content: center; }
}

/* ===================== 6 · hero-stationery.css ===================== */
/* ============================================================
   BERUNDA — Homepage hero: "The Stationery"
   Loaded LAST on index.html so it supersedes home.css / tweaks.css /
   mobile.css hero + nav rules.

   The hero now rides the same fixed crest letterhead as the Collection,
   Testimonials and About sections — one continuous sheet of estate
   stationery behind the whole page. The product photograph is mounted on
   it as a tipped-in plate: whole, uncropped, gold-hairlined, warm-shadowed.
   Crimson inside gold on beige — the brand's own three colours, nothing else.
   ============================================================ */

.bf {
  --hs-beige: #c4b79a;
  --hs-ink: #01143c;
  --hs-support: #4d3722;
  --hs-gold: #8f5d11;
  position: relative;
  /* Solid ground beneath the fixed sheet below. Mobile Safari does not reliably
     size a viewport-fixed layer to the whole wrapper, and every strip it failed
     to cover showed raw canvas — the band along the bottom of the screen that
     content scrolls over. `isolation` is what makes the fallback safe: it turns
     .bf into its own stacking context so the z-index:-1 sheet paints ABOVE this
     colour instead of being buried under it. Both halves are required — this is
     the same contract .ab and .col already carry. */
  background: var(--hs-beige);
  isolation: isolate;
}
/* ONE sheet for the whole page. The kit's older pattern gave each beige section
   its own position:fixed pseudo-element ground; stacked against the hero that
   left a visible step at every join. This single layer sits at z-index -1 behind
   all in-flow content, so every beige section is literally the same sheet and
   the dark sections simply paint over it. */
body.gradient { background: transparent; }
.hs-sheet {
  position: fixed;
  /* Deliberately overshoots the bottom edge. Mobile Safari resizes an unclipped
     fixed layer as the URL bar grows and shrinks, so a layer ending exactly at
     the viewport bottom leaves a strip uncovered — which showed .bf's flat beige
     where the crest should be. Nothing renders below the screen, so overshooting
     costs nothing and no amount of URL-bar reflow can open a gap. */
  top: 0;
  left: 0;
  right: 0;
  bottom: -180px;
  z-index: -1;
  pointer-events: none;
  background: var(--hs-beige) url("collection-hero-crest-v2.webp") center / cover no-repeat;
}
/* retire the per-section copies on this page */
.bf-collection::before, .bf-praise::before { display: none; }
.bf-collection, .bf-praise { background: transparent; }


/* ---------- The sheet ---------- */
.bf-hero.hs,
.bf[data-clearnav="on"] .bf-hero.hs {
  position: relative;
  margin-top: 0;
  min-height: calc(100svh - 74px);
  display: grid;
  grid-template-columns: minmax(0, 0.395fr) minmax(0, 0.605fr);
  align-items: center;
  gap: clamp(30px, 4.2vw, 68px);
  text-align: left;
  padding: clamp(46px, 7vh, 92px) clamp(24px, 5vw, 84px) clamp(52px, 8vh, 104px);
  background: transparent;
  background-image: none;
  overflow: visible;
}
.bf-hero.hs::before, .bf-hero.hs::after { content: none; display: none; }

/* ---------- The cleared writing field ----------
   A soft ivory wash lifts the left copy off the embossed crests so every line
   is legible, while the right side keeps the full letterhead texture behind the
   dark sachets — a quiet left-to-right light flow that carries the eye to the
   product. Masked to fade before the section edge so there is no seam. */
.hs-glow {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(112% 118% at 19% 42%,
    rgba(234, 226, 206, 0.94) 0%,
    rgba(234, 226, 206, 0.8) 24%,
    rgba(234, 226, 206, 0.4) 44%,
    rgba(234, 226, 206, 0) 60%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 60%, transparent 93%);
  mask-image: linear-gradient(180deg, #000 0%, #000 60%, transparent 93%);
}

/* ---------- Left: tagline, tagline, action ---------- */
.hs-col { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: flex-start; }
.hs-eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.44em;
  text-transform: uppercase;
  color: #7a4b0c;
  margin: 0;
  text-shadow: 0 1px 0 rgba(240, 232, 214, 0.85);
}
.hs-title {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(34px, 3.7vw, 52px);
  letter-spacing: 0.1em;
  line-height: 1.09;
  color: var(--hs-ink);
  margin: clamp(16px, 2.4vh, 26px) 0 0;
  text-wrap: balance;
}
.hs-rule {
  width: 98px;
  height: 1px;
  margin: clamp(22px, 3.2vh, 34px) 0 0;
  background: linear-gradient(90deg, rgba(143, 93, 17, 0.95), rgba(143, 93, 17, 0.1));
}
.hs-lede {
  font-family: var(--font-body);
  font-size: clamp(18px, 1.5vw, 21px);
  line-height: 1.62;
  color: var(--hs-support);
  max-width: 34ch;
  margin: clamp(18px, 2.4vh, 26px) 0 0;
  text-wrap: pretty;
  text-shadow: 0 1px 0 rgba(240, 232, 214, 0.75);
}
.hs-ctas { display: flex; align-items: center; gap: clamp(18px, 2vw, 30px); margin: clamp(28px, 4.2vh, 46px) 0 0; flex-wrap: wrap; }
.hs-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 18px 36px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #f8f1e0;
  background: var(--hs-ink);
  border: 0;
  text-decoration: none;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(227, 189, 110, 0.36), 0 16px 32px -16px rgba(20, 12, 40, 0.5);
  transition: background-color 0.55s var(--ease-standard), box-shadow 0.55s var(--ease-standard), transform 0.55s var(--ease-standard);
}
.hs-cta:hover { background: #042056; box-shadow: inset 0 0 0 1px rgba(227, 189, 110, 0.62), 0 20px 40px -16px rgba(20, 12, 40, 0.56); transform: translateY(-1px); }
.hs-cta:active { transform: translateY(1px); }
.hs-cta-q {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 6px 2px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #43290f;
  text-decoration: none;
  transition: color 0.45s var(--ease-standard);
}
.hs-cta-q::after {
  content: "";
  position: absolute;
  left: 2px; right: 2px; bottom: 6px;
  height: 1px;
  background: currentColor;
  opacity: 0.34;
  transform: scaleX(0.3);
  transform-origin: left;
  transition: transform 0.6s var(--ease-entrance), opacity 0.6s var(--ease-standard);
}
.hs-cta-q:hover { color: #2a1810; }
.hs-cta-q:hover::after { transform: scaleX(1); opacity: 0.7; }

/* ---------- Right: the products, mounted bare on the letterhead ----------
   The image is a background-free cut-out, so there is no plate, no frame and
   no crimson field — the three sachets sit directly on the estate sheet,
   larger, grounded only by their own soft shadow. Below them, a hairline
   index names each variety the way the packaging labels them. */
.hs-mount { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: stretch; }
.hs-plate {
  position: relative;
  aspect-ratio: 969 / 629;
  width: calc(100% + clamp(0px, 3.4vw, 52px));
  margin-right: calc(-1 * clamp(0px, 3.4vw, 52px));
  overflow: visible;
}
.hs-still {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  filter:
    drop-shadow(0 2px 3px rgba(48, 24, 6, 0.4))
    drop-shadow(14px 26px 22px rgba(48, 24, 6, 0.3))
    drop-shadow(28px 54px 46px rgba(48, 24, 6, 0.22));
}
/* ---------- The variety index ---------- */
.hs-index {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(13px, 1.5vh, 17px);
  margin: clamp(28px, 3.4vh, 42px) auto 0;
}
.hs-index-line {
  width: 74px;
  height: 1px;
  background: linear-gradient(90deg, rgba(143, 93, 17, 0), rgba(143, 93, 17, 0.72), rgba(143, 93, 17, 0));
}
.hs-index-names { display: flex; align-items: center; gap: clamp(18px, 1.9vw, 30px); }
.hs-index-names span {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(13px, 1.05vw, 16px);
  letter-spacing: 0.26em;
  text-indent: 0.26em;
  text-transform: uppercase;
  color: var(--hs-ink);
  text-shadow: 0 1px 0 rgba(240, 232, 214, 0.92), 0 0 12px rgba(240, 232, 214, 0.8);
}
.hs-index-names i {
  display: block;
  width: 4px;
  height: 4px;
  background: var(--hs-gold);
  transform: rotate(45deg);
  flex: none;
  box-shadow: 0 0 7px rgba(240, 232, 214, 0.85);
}

/* ---------- No entrance fades — everything paints at full strength ---------- */

/* ---------- Narrow desktop / tablet ---------- */
@media (max-width: 1120px) {
  .bf-hero.hs, .bf[data-clearnav="on"] .bf-hero.hs { grid-template-columns: minmax(0, 0.44fr) minmax(0, 0.56fr); gap: clamp(24px, 3vw, 40px); }
  .hs-title { font-size: clamp(30px, 3.6vw, 42px); }
}

/* ---------- Phone: sheet, the plate on top, then the words ---------- */
@media (max-width: 760px) {
  .bf-hero.hs, .bf[data-clearnav="on"] .bf-hero.hs {
    grid-template-columns: 1fr;
    min-height: 0;
    gap: 0;
    padding: clamp(34px, 5.4svh, 56px) 22px clamp(40px, 6svh, 60px);
  }
  .hs-col { align-items: center; text-align: center; order: 2; }
  .hs-title { font-size: clamp(31px, 8.8vw, 42px); letter-spacing: 0.08em; }
  .hs-rule { margin-left: auto; margin-right: auto; width: 84px; background: linear-gradient(90deg, rgba(143, 93, 17, 0), rgba(143, 93, 17, 0.8), rgba(143, 93, 17, 0)); }
  .hs-lede { max-width: 32ch; margin-left: auto; margin-right: auto; font-size: 17px; }
  .hs-ctas { flex-direction: column; align-items: center; gap: 6px; width: min(100%, 320px); margin: clamp(24px, 3.6svh, 36px) auto 0; }
  .hs-cta { width: 100%; min-height: 58px; padding: 19px 24px; letter-spacing: 0.2em; }
  .hs-cta:active { transform: scale(0.985); }
  /* no hover on touch — the second path shows its underline at rest */
  .hs-cta-q { justify-content: center; min-height: 48px; font-size: 10.5px; }
  .hs-cta-q::after { transform: scaleX(0.42); opacity: 0.4; }
  .hs-cta-q:active { color: #2a1810; }
  /* the sachets lead the page; the variety index belongs to the wide layout only */
  .hs-mount { order: 1; margin-bottom: clamp(20px, 3svh, 34px); padding: 0 4px; }
  .hs-plate { width: 100%; margin-right: 0; }
  .hs-index { display: none; }
  /* the wash follows the copy down so it still lifts it off the embossed crests */
  .hs-glow { background: radial-gradient(140% 60% at 50% 68%, rgba(234, 226, 206, 0.9) 0%, rgba(234, 226, 206, 0.5) 40%, rgba(234, 226, 206, 0) 66%); -webkit-mask-image: none; mask-image: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hs-still { transform: none !important; transition: none !important; }
}


/* ===================== 7 · Dawn interop ===================== */
/* Dawn's base.css hides every empty element (`div:empty { display: none }`).
   The design's structural and decorative layers — the letterhead sheet, the
   hero wash, the hairline rules and the card frames — are all empty <div>s by
   nature, so Dawn hides them and the page loses its ground. `div:empty` is
   (0,1,1), so the override has to be scoped to out-specify it, not just
   re-declared. Applies only while the element really is empty. */
.bf div:empty { display: block; }

/* ===================== 8 · theme adaptations ===================== */
/* The kit's hero is sized for "Coffee Fit / for Royals". The owners' headline
   is "A Taste of / Royal Heritage" — at the kit's size the wider second line
   does not fit the 0.395fr copy column and breaks to a third line. Trim the
   size in every regime so the forced two-line headline stays two lines. */
.hs-title { font-size: clamp(32px, 3vw, 44px); }
@media (max-width: 1120px) {
  .hs-title { font-size: clamp(24px, 3.3vw, 40px); }
}
@media (max-width: 760px) {
  .hs-title { font-size: clamp(26px, 8vw, 42px); }
}

/* Stat 2 carries a place list ("BR Hills, Coorg, Chikmagalur, Baba Budan Giri")
   rather than a short figure, so at the display size it runs to five lines
   against neighbours of one and two. Shrink only this tile — the row stays
   balanced and the wording is never cut. */
.bf-stats-grid .bf-stat:nth-child(2) .bf-stat-num {
  font-size: clamp(15px, 1.45vw, 19px);
  line-height: 1.3;
}

/* ---- Spacing, per the owner's review of the live page ---- */

/* Wide screens only — the phone has its own padding below. */
@media (min-width: 681px) {
  /* The run from the four counts down to "The Estate Collection" read too
     long: 223px of empty sheet. Down 20%, to ~178px. */
  .bf-collection { padding-top: clamp(80px, 10vh, 150px); }
  /* The testimonial cards sat too close to the navy Mythology band —
     the beige needs a beat before the dark. Up 15%, 88px → 101px. */
  .bf-praise { padding-bottom: clamp(56px, 7vw, 101px); }

  /* Same easing the phone got, proportionally: the Mythology block runs
     title → rule → two paragraphs → button, and at the kit's rhythm the
     rule is lost between them here too. */
  .bf-myth-emblem { margin-bottom: clamp(16px, 2.2vh, 24px); }
  .bf-myth-title { line-height: 1.2; }
  .bf-myth-rule { margin: 28px auto; }
  .bf-myth-p2 { margin-top: 22px; }
  .bf-myth-cta { margin-top: clamp(28px, 3.8vh, 40px); }
}

@media (max-width: 680px) {
  /* Hero → first fact was 141px on a 375px screen, an empty half-screen
     between the CTA and "627 years". Down to ~82px. */
  .bf-stats { padding-top: 28px; }
  .bf-stats-grid { padding-top: 30px; }

  /* Living Mythology ran congested on the phone: a 3-line title at 1.12
     line-height, then two dense paragraphs with the hairline rule lost
     between them. Open the rhythm up and give the whole band room at the
     top so it separates from the testimonials above it. */
  .bf-myth { padding-top: 104px; }
  .bf-myth-emblem { margin-bottom: 20px; }
  .bf-myth-title { line-height: 1.22; margin-top: 22px; }
  .bf-myth-rule { margin: 32px auto; }
  .bf-myth-p2 { margin-top: 26px; }
  .bf-myth-cta { margin-top: 40px; }
}