/* =====================================================================
   PLATFORM PAGES — the shared editorial system (2026-08-04)
   ---------------------------------------------------------------------
   Used by every page under /platform, plus /vision, /how-it-works,
   /occasions, /faq. Inherits colour from styles/tokens.css and the
   header/checkout from assets/main.css — this file adds only the page
   body system.

   ⚠ TYPE FOLLOWS THE HOUSE, AND THE HOUSE IS NOT WHAT I FIRST ASSUMED.
   Measured on the rendered homepage, not read off a stylesheet:
     · DISPLAY  → 'Libre Baskerville' 400  (.hero-title, .how-simple-title,
                  .occ-mosaic-hdr h2, .nav-logo — all Libre Baskerville)
     · BODY     → 'Montserrat' 300/400     (body, .hero-sub, labels, buttons)
     · NUMERALS → 'Cormorant Garamond'     (.hiw-tab-n, .e5-num, .e5-mf-price)
   These pages originally shipped with the first two INVERTED — Cormorant for
   headings and Libre Baskerville for body — which is why they read as a
   different site. Cormorant stays ONLY on numerals, which is exactly where the
   house already uses it.

   Scale is the house's own: hero clamp(2.6rem,5.8vw,5.6rem)/1.05, section
   headings clamp(1.8rem,3.5vw,3rem)/1.15, body clamp(.72rem,1.2vw,.85rem)/1.8.

   THE ONE PRINCIPLE: show the consequence, never the interface.
   A screenshot of a dashboard says "software you must learn". A card
   with a real guest's name on it says "what the software did for you".

   Consequences of that principle, encoded here:
     · NO icon grids. Numerals in Cormorant do the work icons would.
     · NO gradients, no neon, no dark "tech" bands. Ivory is the only
       ground; bloodstone means ACTION and nothing else (house law).
     · Hairline rules and open rings, drawn not filled.
     · Space is the most expensive-looking material available.
   ===================================================================== */

.pf-body { background: var(--ivory); color: var(--onyx); }
.pf-wrap { max-width: 1120px; margin: 0 auto; padding: 0 64px; }
@media (max-width: 760px) { .pf-wrap { padding: 0 28px; } }

.skip-link {
  position: absolute; left: -9999px; top: 0; background: var(--onyx); color: var(--ivory);
  padding: 12px 20px; z-index: 9999; font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase;
}
.skip-link:focus { left: 12px; top: 12px; }

/* ---- hero ---------------------------------------------------------- */
.pf-hero { padding: 190px 0 84px; border-bottom: 1px solid rgba(45,16,21,0.10); }
.pf-hero.pf-hero-tall { padding: 210px 0 110px; }
.pf-eyebrow {
  font-size: 0.6rem; letter-spacing: 0.26em; text-transform: uppercase;
  color: rgba(45,16,21,0.42); font-weight: 500; margin: 0 0 24px;
}
.pf-title {
  font-family: 'Libre Baskerville', serif; font-weight: 400;
  font-size: clamp(2.2rem, 4.6vw, 3.9rem); line-height: 1.08;
  margin: 0 0 24px; letter-spacing: -0.012em; max-width: 15em;
}
.pf-title em { font-style: italic; color: var(--bloodstone); }
.pf-standfirst {
  font-family: 'Montserrat', sans-serif; font-weight: 400;
  font-size: clamp(0.78rem, 1.2vw, 0.92rem); line-height: 1.8;
  color: rgba(45,16,21,0.62); max-width: 40em; margin: 0;
}
.pf-status {
  margin-top: 30px; display: flex; gap: 26px; flex-wrap: wrap;
  font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(45,16,21,0.44);
}
.pf-status span::before { content: "— "; }
.pf-crumb {
  margin-top: 34px; font-size: 0.62rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: rgba(45,16,21,0.42);
}
.pf-crumb a { color: rgba(45,16,21,0.62); text-decoration: none; }
.pf-crumb a:hover { color: var(--bloodstone); }

/* ---- sections ------------------------------------------------------ */
.pf-sec { padding: 92px 0; border-bottom: 1px solid rgba(45,16,21,0.07); }
.pf-sec:last-of-type { border-bottom: none; }
.pf-sec-num {
  font-family: 'Cormorant Garamond', serif; font-size: 0.82rem;
  letter-spacing: 0.3em; color: var(--bloodstone); margin: 0 0 16px; font-weight: 500;
}
.pf-h2 {
  font-family: 'Libre Baskerville', serif; font-weight: 400;
  font-size: clamp(1.8rem, 3.5vw, 3rem); line-height: 1.15;
  margin: 0 0 20px; letter-spacing: -0.006em; max-width: 16em;
}
.pf-h2 em { font-style: italic; color: var(--bloodstone); }
.pf-lede {
  font-family: 'Montserrat', sans-serif; font-weight: 400;
  font-size: clamp(0.76rem, 1.1vw, 0.88rem); line-height: 1.8;
  color: rgba(45,16,21,0.62); max-width: 38em; margin: 0 0 34px;
}
.pf-p { font-size: 0.94rem; line-height: 1.76; color: rgba(45,16,21,0.72); max-width: 38em; margin: 0 0 18px; }
.pf-p strong { font-weight: 600; color: var(--onyx); }

/* ---- statement: one sentence, alone, held for a screen -------------- */
.pf-statement { padding: 130px 0; border-bottom: 1px solid rgba(45,16,21,0.07); }
.pf-statement p {
  font-family: 'Libre Baskerville', serif; font-weight: 400;
  font-size: clamp(1.7rem, 3.6vw, 2.9rem); line-height: 1.26;
  letter-spacing: -0.01em; max-width: 17em; margin: 0; color: var(--onyx);
}
.pf-statement p em { font-style: italic; color: var(--bloodstone); }

/* ---- beats: numerals, never icons ---------------------------------- */
.pf-beats { display: grid; gap: 1px; background: rgba(45,16,21,0.12);
  border: 1px solid rgba(45,16,21,0.12); margin: 38px 0; }
.pf-beat { background: var(--ivory); padding: 30px 32px;
  display: grid; grid-template-columns: 78px 1fr; gap: 26px; align-items: start; }
.pf-beat-n { font-family: 'Cormorant Garamond', serif; font-size: 2.3rem;
  line-height: 1; color: var(--bloodstone); font-weight: 300; }
.pf-beat h3 { margin: 0 0 8px; font-size: 1.02rem; font-weight: 600; letter-spacing: 0.005em; }
.pf-beat p { margin: 0; font-size: 0.9rem; line-height: 1.7; color: rgba(45,16,21,0.64); }
@media (max-width: 620px) { .pf-beat { grid-template-columns: 1fr; gap: 10px; } }

/* ---- feature cards (category pages) -------------------------------- */
.pf-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1px; background: rgba(45,16,21,0.12); border: 1px solid rgba(45,16,21,0.12); margin: 38px 0; }
.pf-card { background: var(--ivory); padding: 34px 32px 30px; text-decoration: none;
  color: inherit; display: block; transition: background 0.3s; }
.pf-card:hover { background: rgba(45,16,21,0.022); }
.pf-card h3 { font-family: 'Libre Baskerville', serif; font-weight: 400;
  font-size: 1.14rem; margin: 0 0 10px; line-height: 1.24; }
.pf-card p { margin: 0 0 18px; font-size: 0.88rem; line-height: 1.7; color: rgba(45,16,21,0.62); }
.pf-card .pf-card-go { font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase;
  font-weight: 600; color: var(--bloodstone); }
.pf-card .pf-soon { display: inline-block; font-size: 0.5rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: rgba(45,16,21,0.42); border: 1px solid rgba(45,16,21,0.16);
  padding: 2px 6px; margin-bottom: 12px; }

/* ---- without / with ------------------------------------------------ */
.pf-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: rgba(45,16,21,0.12); border: 1px solid rgba(45,16,21,0.12); margin: 38px 0; }
.pf-compare > div { background: var(--ivory); padding: 34px 32px 38px; }
.pf-compare h4 { margin: 0 0 6px; font-size: 0.6rem; letter-spacing: 0.2em;
  text-transform: uppercase; font-weight: 600; }
.pf-compare .pf-without h4 { color: rgba(45,16,21,0.42); }
.pf-compare .pf-with h4 { color: var(--bloodstone); }
.pf-compare h5 { font-family: 'Libre Baskerville', serif; font-weight: 400;
  font-size: 1.08rem; margin: 0 0 14px; line-height: 1.3; }
.pf-compare p { margin: 0; font-size: 0.89rem; line-height: 1.72; color: rgba(45,16,21,0.62); }
@media (max-width: 700px) { .pf-compare { grid-template-columns: 1fr; } }

/* ---- honest status list -------------------------------------------- */
.pf-status-list { margin: 34px 0; border: 1px solid rgba(45,16,21,0.12); }
.pf-status-row { display: grid; grid-template-columns: 150px 1fr; gap: 24px;
  padding: 20px 30px; border-bottom: 1px solid rgba(45,16,21,0.07); align-items: baseline; }
.pf-status-row:last-child { border-bottom: none; }
.pf-status-mark { font-size: 0.58rem; letter-spacing: 0.16em; text-transform: uppercase;
  font-weight: 600; color: rgba(45,16,21,0.44); }
.pf-status-mark.is-live { color: var(--bloodstone); }
.pf-status-row p { margin: 0; font-size: 0.92rem; line-height: 1.68; color: rgba(45,16,21,0.7); }
@media (max-width: 620px) { .pf-status-row { grid-template-columns: 1fr; gap: 6px; } }

/* ---- refusal list — what we will not do ---------------------------- */
.pf-refuse { margin: 34px 0; max-width: 40em; }
.pf-refuse li { list-style: none; padding: 14px 0; border-bottom: 1px solid rgba(45,16,21,0.07);
  font-family: 'Libre Baskerville', serif; font-size: 1.02rem; color: rgba(45,16,21,0.55); }
.pf-refuse li:last-child { border-bottom: none; }
.pf-refuse li s { text-decoration-color: rgba(146,38,48,0.5); text-decoration-thickness: 1px; }

/* ---- the artefact frame — a real piece, at real size ---------------- */
.pf-artefact { margin: 42px 0; padding: 54px; border: 1px solid rgba(45,16,21,0.12);
  display: flex; justify-content: center; align-items: center; min-height: 300px; }
.pf-artefact-cap { margin: 12px 0 0; font-size: 0.62rem; letter-spacing: 0.13em;
  text-transform: uppercase; color: rgba(45,16,21,0.42); text-align: center; }
@media (max-width: 700px) { .pf-artefact { padding: 26px; } }

/* ---- hairline diagram — drawn, never filled ------------------------ */
.pf-rings { display: flex; justify-content: center; padding: 30px 0 8px; }
.pf-rings svg { max-width: 100%; height: auto; }
.pf-rings .r-line { fill: none; stroke: rgba(45,16,21,0.28); stroke-width: 1; }
.pf-rings .r-line-soft { fill: none; stroke: rgba(45,16,21,0.14); stroke-width: 1; stroke-dasharray: 3 5; }
.pf-rings .r-dot { fill: var(--bloodstone); }
.pf-rings .r-label { font-family: 'Montserrat', sans-serif; font-size: 8px;
  letter-spacing: 0.18em; text-transform: uppercase; fill: rgba(45,16,21,0.55); }

/* ---- the Foundation Ring — /vision §02 ------------------------------
   The drawing ported from docs/VISION.html. Everything is namespaced
   `vr-` on purpose: the source board used bare .card / .close / .state /
   .layer, every one of which already means something else in main.css.

   COLOUR CARRIES MEANING and there are exactly three states, one hue
   each, used identically in the SVG, in the key, in the readout swatch
   and on the pillar cards:
     · solid sage    = available today
     · gold + hatch  = under construction
     · onyx, dotted  = where we are heading (open, not a product)
   Bloodstone is deliberately absent from the whole diagram — house law
   reserves it for actions, and there is no action inside a diagram.

   The ring is drawn on IVORY, not the source board's greige. Plates,
   wedge separators and pip fills are all #FAF6EE for that reason; a
   stray #EEF2F1 shows up as a grey card floating on cream.
   -------------------------------------------------------------------- */
.pf-ring-key {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1px; background: rgba(45,16,21,0.12);
  border: 1px solid rgba(45,16,21,0.12); margin: 34px 0 0;
}
.pf-ring-key > div { background: var(--ivory); padding: 22px 26px 24px; }
.pf-ring-key svg { display: block; margin-bottom: 13px; }
.pf-ring-key h3 {
  font-family: 'Montserrat', sans-serif; font-size: 0.6rem; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase; margin: 0 0 7px;
}
.pf-ring-key .k-today h3 { color: #2A4642; }
.pf-ring-key .k-building h3 { color: #7C6033; }
.pf-ring-key .k-heading h3 { color: rgba(45,16,21,0.55); }
.pf-ring-key p { margin: 0; font-size: 0.76rem; line-height: 1.7; color: rgba(45,16,21,0.62); }

.pf-ring-controls {
  display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center;
  margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(45,16,21,0.10);
}
.pf-ring-controls .c-lab {
  font-size: 0.58rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: rgba(45,16,21,0.5); font-weight: 500;
}
.pf-seg { display: flex; border: 1px solid rgba(45,16,21,0.16); }
.pf-seg button {
  appearance: none; background: none; border: 0; border-right: 1px solid rgba(45,16,21,0.16);
  font-family: 'Montserrat', sans-serif; font-size: 0.62rem; font-weight: 400;
  letter-spacing: 0.18em; text-transform: uppercase; color: rgba(45,16,21,0.6);
  padding: 10px 17px; cursor: pointer; transition: background 0.35s, color 0.35s;
}
.pf-seg button:last-child { border-right: 0; }
.pf-seg button:hover { color: var(--onyx); }
.pf-seg button[aria-pressed="true"] { background: rgba(45,16,21,0.05); color: var(--onyx); font-weight: 600; }
.pf-replay {
  appearance: none; background: none; border: 0; padding: 0 0 3px; cursor: pointer;
  font-family: 'Montserrat', sans-serif; font-size: 0.62rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--bloodstone);
  border-bottom: 1px solid rgba(146,38,48,0.35); transition: border-color 0.35s;
}
.pf-replay:hover { border-color: var(--bloodstone); }

.pf-ring-row {
  display: grid; grid-template-columns: minmax(300px, 500px) 1fr;
  gap: clamp(30px, 4vw, 56px); align-items: center; margin-top: clamp(34px, 5vw, 54px);
}
.pf-ring-fig { margin: 0; }
/* overflow:hidden is right here ON PURPOSE: the outer ring is MEANT to be
   cut by the frame. The clipping is the message — the vision continues
   past the edge of the drawing, so the drawing has no outer edge. */
.pf-ring-fig svg { display: block; width: 100%; height: auto; overflow: hidden; }

.pf-beyond h3 {
  font-family: 'Montserrat', sans-serif; font-size: 0.62rem; letter-spacing: 0.2em;
  text-transform: uppercase; font-weight: 700; color: rgba(45,16,21,0.55); margin: 0 0 8px;
}
.pf-beyond > p { font-size: 0.78rem; line-height: 1.7; color: rgba(45,16,21,0.62); margin: 0 0 20px; max-width: 60ch; }
.pf-later { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; margin: 0; padding: 0; }
.pf-later li {
  list-style: none; border: 1px dotted rgba(45,16,21,0.35); background: none;
  padding: 13px 15px; display: flex; gap: 10px; align-items: flex-start;
  transition: border-color 0.3s, background 0.3s;
}
.pf-later li:hover { border-color: rgba(45,16,21,0.6); background: rgba(45,16,21,0.022); }
.pf-later .l-n { font-size: 0.58rem; font-weight: 700; letter-spacing: 0.1em; color: rgba(45,16,21,0.5); flex: 0 0 auto; padding-top: 2px; }
.pf-later .l-t { font-size: 0.76rem; line-height: 1.5; color: rgba(45,16,21,0.78); }

.pf-ring-readout {
  margin-top: 26px; border-top: 1px solid rgba(45,16,21,0.10); padding-top: 15px;
  display: flex; gap: 14px; align-items: flex-start; min-height: 64px;
}
.pf-ring-readout .vr-ro-mark { flex: 0 0 auto; margin-top: 4px; }
.pf-ring-readout .vr-ro-title {
  font-size: 0.64rem; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; margin: 0 0 5px; color: var(--onyx);
}
.pf-ring-readout .vr-ro-desc { margin: 0; font-size: 0.78rem; line-height: 1.68; color: rgba(45,16,21,0.66); max-width: 88ch; }
.pf-ring-readout.is-idle .vr-ro-title { color: rgba(45,16,21,0.5); font-weight: 500; }
.pf-ring-readout.is-idle .vr-ro-desc { opacity: 0.82; }

/* ---- type inside the drawing --------------------------------------- */
.pf-ring-fig svg text { font-family: 'Montserrat', sans-serif; font-weight: 400; }
/* Wedge labels are ivory on the two sage wedges and ONYX on the gold one.
   Measured, not assumed: ivory on #B8935A is 2.65:1 and ivory on the source
   board's light sage #6B8F88 is 3.30:1 — both fail at 9px. Onyx on gold is
   6.15:1, and pillar 03 now uses the house --sage #40645F at 6.07:1.
   test/vision-ring-contrast.test.mjs asserts every one of these. */
.pf-ring-fig .vr-num { font-size: 13px; font-weight: 600; letter-spacing: 0.1em; fill: var(--ivory); }
.pf-ring-fig .vr-name { font-size: 9.2px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; fill: var(--ivory); }
.pf-ring-fig .vr-num.vr-on-light, .pf-ring-fig .vr-name.vr-on-light { fill: var(--onyx); }
.pf-ring-fig .vr-ctr-a { font-family: 'Libre Baskerville', serif; font-size: 15px; fill: var(--onyx); }
.pf-ring-fig .vr-ctr-b { font-size: 7.6px; letter-spacing: 0.2em; text-transform: uppercase; fill: rgba(45,16,21,0.68); }
.pf-ring-fig .vr-build { font-size: 7.4px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; fill: #7C6033; }
/* The four smallest captions all sit on tinted or hatched ground. At the
   opacities the source board used they measured under 4.5:1 once the ground
   became ivory, which at 6px is where a caption stops being read and starts
   being texture. These values are the ones the contrast script passes. */
.pf-ring-fig .vr-micro { font-size: 6px; letter-spacing: 0.15em; text-transform: uppercase; fill: rgba(45,16,21,0.66); }
.pf-ring-fig .vr-seam { font-size: 6.2px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; fill: #59401F; }
.pf-ring-fig .vr-pip-n { font-size: 7.4px; font-weight: 600; fill: rgba(45,16,21,0.7); }
.pf-ring-fig .vr-open { font-size: 7px; letter-spacing: 0.16em; text-transform: uppercase; fill: rgba(45,16,21,0.68); }

/* ---- staged reveal + stage focus ------------------------------------ */
.pf-ring-fig .vr-layer {
  opacity: 0; transform: scale(0.9);
  transform-box: view-box; transform-origin: 250px 250px;
  transition: opacity 0.85s cubic-bezier(0.22,0.7,0.28,1), transform 1.05s cubic-bezier(0.22,0.7,0.28,1);
}
.pf-ring-fig.is-in .vr-layer { opacity: 1; transform: scale(1); }
.pf-ring-fig.is-in .vr-L-today { transition-delay: 0.05s; }
.pf-ring-fig.is-in .vr-L-building { transition-delay: 0.36s; }
.pf-ring-fig.is-in .vr-L-heading { transition-delay: 0.66s; }
/* The stage filter keys off each REGION's own state, not the layer it is
   drawn in. Wedge 02's unbuilt rim lives inside the today layer so it can
   never drift from its wedge during the reveal, but it belongs to
   "building" — a layer-level filter would have dimmed it with the wedge and
   hidden the one thing the Building view most needs to show. Decoration is
   filtered separately, and the core disc carries no state class at all, so
   it never dims. */
.pf-ring-fig .vr-hit, .pf-ring-fig .vr-deco { transition: filter 0.45s; }
#vr-root[data-focus="today"]    .vr-hit:not([data-stage="today"]),
#vr-root[data-focus="building"] .vr-hit:not([data-stage="building"]),
#vr-root[data-focus="heading"]  .vr-hit:not([data-stage="heading"]),
#vr-root[data-focus="today"]    .vr-deco-building,
#vr-root[data-focus="today"]    .vr-deco-heading,
#vr-root[data-focus="building"] .vr-deco-heading,
#vr-root[data-focus="heading"]  .vr-deco-building { filter: opacity(0.1) grayscale(0.55); }
/* The beyond-list dims by the same rule the wedges do: nothing on it belongs
   to either inner ring, so Today and Building both push it back. */
#vr-root[data-focus="today"] .pf-later,
#vr-root[data-focus="building"] .pf-later { opacity: 0.32; }
.pf-later { transition: opacity 0.5s; }

.pf-ring-fig .vr-hit { cursor: default; }
.pf-ring-fig:hover .vr-hit:not(:hover) { filter: opacity(0.3); }
.pf-ring-fig .vr-hit:focus-visible { outline: 2px solid var(--bloodstone); outline-offset: 2px; }
.pf-ring-fig .vr-pip.is-lit circle { stroke: var(--onyx); stroke-width: 1.6; }

@media (prefers-reduced-motion: reduce) {
  .pf-ring-fig .vr-layer { opacity: 1; transform: none; transition: none; }
  .pf-ring-fig .vr-hit, .pf-ring-fig:hover .vr-hit:not(:hover) { transition: none; filter: none; }
}
@media (max-width: 900px) {
  .pf-ring-row { grid-template-columns: 1fr; }
  /* width:100% is load-bearing and is NOT redundant beside max-width. An auto
     margin on a grid item cancels the default `justify-items: stretch`, so the
     figure sizes to fit-content instead of to its column — and its only child
     is an SVG set to width:100%, which is circular. The SVG then falls back to
     the 300x150 default intrinsic size of a replaced element, and the drawing
     rendered 300px wide inside a 319px column on a 375px phone. Measured, not
     theorised. Keep all three declarations. */
  .pf-ring-fig { width: 100%; max-width: 480px; margin: 0 auto; }
}
/* Once the three state definitions stop being columns they must stop looking
   like columns: the 26px column padding otherwise survives the stack and
   reads as an indent, pushing each definition off its own heading. */
@media (max-width: 760px) {
  .pf-ring-key { grid-template-columns: 1fr; }
  .pf-ring-key > div { padding: 20px 0 22px; background: var(--ivory); }
  .pf-ring-key { background: none; border: 0; border-top: 1px solid rgba(45,16,21,0.12); gap: 0; }
  .pf-ring-key > div + div { border-top: 1px solid rgba(45,16,21,0.12); }
  /* Four filter buttons in one row need ~430px; at 330 the last is cut off
     mid-word. They fold into a 2x2 block, and the dividers fold with them —
     otherwise the right-hand pair keeps a border facing nothing. */
  .pf-seg { flex-wrap: wrap; }
  .pf-seg button { flex: 1 0 50%; border-bottom: 1px solid rgba(45,16,21,0.16); }
  .pf-seg button:nth-child(2n) { border-right: 0; }
  .pf-seg button:nth-last-child(-n+2) { border-bottom: 0; }
}
@media print {
  .pf-ring-controls, .pf-ring-readout { display: none; }
  .pf-ring-fig .vr-layer { opacity: 1 !important; transform: none !important; }
}

/* ---- table --------------------------------------------------------- */
.pf-table-scroll { overflow-x: auto; margin: 34px 0; }
.pf-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; min-width: 520px; }
.pf-table th { text-align: left; font-size: 0.56rem; letter-spacing: 0.17em;
  text-transform: uppercase; font-weight: 600; color: rgba(45,16,21,0.42);
  padding: 0 16px 12px 0; border-bottom: 1px solid rgba(45,16,21,0.14); }
.pf-table td { padding: 15px 16px 15px 0; border-bottom: 1px solid rgba(45,16,21,0.07);
  vertical-align: top; color: rgba(45,16,21,0.7); line-height: 1.65; }
.pf-table td strong { color: var(--onyx); font-weight: 600; }

/* ---- pull quote / rule box ----------------------------------------- */
.pf-note { border-left: 2px solid var(--bloodstone); padding: 8px 0 8px 26px;
  margin: 36px 0; max-width: 40em; }
.pf-note p { font-family: 'Montserrat', sans-serif; font-size: 0.84rem;
  line-height: 1.85; color: rgba(45,16,21,0.66); margin: 0; }
.pf-note p + p { margin-top: 14px; }

/* ---- FAQ ----------------------------------------------------------- */
.pf-faq { margin: 34px 0; max-width: 44em; }
.pf-faq details { border-bottom: 1px solid rgba(45,16,21,0.10); }
.pf-faq summary { cursor: pointer; padding: 22px 0; list-style: none;
  font-family: 'Libre Baskerville', serif; font-size: 1rem; color: var(--onyx);
  display: flex; justify-content: space-between; gap: 20px; align-items: baseline; }
.pf-faq summary::-webkit-details-marker { display: none; }
.pf-faq summary::after { content: "+"; color: var(--bloodstone); font-size: 1.1rem; flex: none; }
.pf-faq details[open] summary::after { content: "–"; }
.pf-faq details > div { padding: 0 0 24px; font-size: 0.92rem; line-height: 1.76;
  color: rgba(45,16,21,0.68); max-width: 40em; }

/* ---- closing CTA --------------------------------------------------- */
.pf-close { padding: 104px 0 118px; text-align: center; border-top: 1px solid rgba(45,16,21,0.10); }
.pf-close h2 { font-family: 'Libre Baskerville', serif; font-weight: 400;
  font-size: clamp(1.8rem, 3.5vw, 3rem); line-height: 1.15; margin: 0 0 20px; }
.pf-close h2 em { font-style: italic; color: var(--bloodstone); }
.pf-close p { font-family: 'Montserrat', sans-serif; font-size: 0.84rem;
  color: rgba(45,16,21,0.6); max-width: 40em; margin: 0 auto 34px; line-height: 1.85; }
.pf-close-btns { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; }
.pf-btn-p { background: var(--bloodstone); color: #FAF6EE; border: 1px solid var(--bloodstone);
  padding: 15px 34px; font-family: 'Montserrat', sans-serif; font-size: 0.62rem;
  letter-spacing: 0.2em; text-transform: uppercase; font-weight: 600;
  text-decoration: none; cursor: pointer; transition: background 0.3s; display: inline-block; }
.pf-btn-p:hover { background: var(--bloodstone-dk); color: #FAF6EE; }
.pf-btn-g { background: none; color: var(--onyx); border: 1px solid rgba(45,16,21,0.24);
  padding: 15px 34px; font-family: 'Montserrat', sans-serif; font-size: 0.62rem;
  letter-spacing: 0.2em; text-transform: uppercase; font-weight: 600;
  text-decoration: none; transition: border-color 0.3s; display: inline-block; }
.pf-btn-g:hover { border-color: var(--onyx); }

/* ---- onward links -------------------------------------------------- */
.pf-onward { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr));
  gap: 1px; background: rgba(45,16,21,0.12); border: 1px solid rgba(45,16,21,0.12); margin: 40px 0 0; }
.pf-onward a { background: var(--ivory); padding: 26px 28px; text-decoration: none; color: inherit;
  transition: background 0.3s; }
.pf-onward a:hover { background: rgba(45,16,21,0.022); }
.pf-onward .o-lab { display: block; font-size: 0.56rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: rgba(45,16,21,0.4); margin-bottom: 7px; }
.pf-onward .o-name { display: block; font-family: 'Libre Baskerville', serif;
  font-size: 1rem; color: var(--onyx); line-height: 1.4; }

/* ---- footer -------------------------------------------------------- */
.pf-footer { background: var(--ivory); border-top: 1px solid rgba(45,16,21,0.12);
  padding: 74px 0 40px; }
.pf-footer-top { display: grid; grid-template-columns: 1.7fr repeat(4, 1fr); gap: 42px; }
.pf-footer-logo { font-family: 'Libre Baskerville', serif; font-size: 0.82rem;
  letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none;
  color: var(--onyx); display: block; margin-bottom: 16px; }
.pf-footer-brand p { font-size: 0.82rem; line-height: 1.72; color: rgba(45,16,21,0.55);
  max-width: 30em; margin: 0 0 14px; }
.pf-footer-contact a, .pf-footer-social a { color: var(--bloodstone); text-decoration: none;
  font-size: 0.82rem; margin-right: 18px; }
.pf-footer-contact a:hover, .pf-footer-social a:hover { text-decoration: underline; text-underline-offset: 3px; }
.pf-footer-col .np-h { margin: 0 0 14px; font-size: 0.56rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: rgba(45,16,21,0.42); font-weight: 600; }
.pf-footer-col a { display: block; font-size: 0.82rem; color: rgba(45,16,21,0.68);
  text-decoration: none; padding: 5px 0; }
.pf-footer-col a:hover { color: var(--bloodstone); }
.pf-footer-occasions { margin-top: 54px; padding-top: 30px; border-top: 1px solid rgba(45,16,21,0.08); }
.pf-footer-occasions .np-h { margin: 0 0 14px; font-size: 0.56rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: rgba(45,16,21,0.42); font-weight: 600; }
.pf-footer-occ-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: 4px 20px; }
.pf-footer-occ-grid a { font-size: 0.78rem; color: rgba(45,16,21,0.55); text-decoration: none; padding: 4px 0; }
.pf-footer-occ-grid a:hover { color: var(--bloodstone); }
.pf-footer-base { margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(45,16,21,0.08);
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.pf-footer-base p { margin: 0; font-size: 0.72rem; color: rgba(45,16,21,0.42); }
.pf-footer-base a { color: rgba(45,16,21,0.55); text-decoration: none; }
.pf-footer-base a:hover { color: var(--bloodstone); }
@media (max-width: 900px) { .pf-footer-top { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 560px) { .pf-footer-top { grid-template-columns: 1fr; } }