/* =====================================================================
   RomaEscape — site.css (global, loaded on every page)

   No framework. The old site loaded a Bootstrap-4-era theme (175 KB) plus the
   Bootstrap 5 JS bundle and fought both with !important overrides; this file keeps
   the RomaEscape look (the --rx-* tokens of the old home.css) and nothing else.

   Page-family styles live next to it and load only where used:
     home.css · tour.css · blog.css · page.css (static/legal/help) · forms.css

   Sections: 1 tokens · 2 base · 3 layout · 4 buttons & section heads · 5 header
             6 footer · 7 WhatsApp · 8 consent · 9 forms (base) · 10 utilities
   ===================================================================== */

/* ===== 1. Tokens ===== */
:root {
  --rx-brand: #2F8C62;
  --rx-brand-dark: #236a4a;
  --rx-brand-deeper: #143c2a;
  --rx-teal: #2D95A3;
  --rx-accent: #E8A84B;
  --rx-gold: #C98C19;
  --rx-ink: #0F1E16;
  --rx-ink-soft: #33423a;
  --rx-muted: #5b6b62;
  --rx-line: rgba(15, 30, 22, .08);
  --rx-line-strong: rgba(15, 30, 22, .16);
  --rx-cream: #FAF7F0;
  --rx-cream-warm: #F4EFE4;
  --rx-white: #fff;
  --rx-danger: #b42318;
  --rx-success: #1f7a4d;

  --rx-radius-lg: 24px;
  --rx-radius-md: 18px;
  --rx-radius-sm: 12px;
  --rx-pill: 999px;

  --rx-font-head: 'Fraunces', Georgia, 'Times New Roman', serif;
  --rx-font-body: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --rx-shadow-sm: 0 2px 8px rgba(15, 30, 22, .06);
  --rx-shadow-md: 0 10px 30px rgba(15, 30, 22, .10);
  --rx-shadow-lg: 0 24px 60px rgba(15, 30, 22, .16);

  --rx-header-h: 62px;          /* compact height: what sticks while scrolling (scroll offsets) */
  --rx-header-h-compact: 62px;
  --rx-header-h-wide: 88px;     /* at the very top of the page */
  --rx-gutter: clamp(1rem, 4vw, 2.5rem);
  --rx-max: 1260px;
  --rx-ease: cubic-bezier(.4, 0, .2, 1);
}
@media (max-width: 992px) {
  :root { --rx-header-h: 56px; --rx-header-h-compact: 56px; --rx-header-h-wide: 68px; }
}

/* ===== 2. Base ===== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--rx-header-h-compact) + 1rem); }
html, body { max-width: 100%; overflow-x: clip; }
body {
  margin: 0;
  font-family: var(--rx-font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--rx-ink);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--rx-font-head);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.015em;
  margin: 0 0 .6em;
  color: var(--rx-ink);
}
p { margin: 0 0 1em; }
a { color: var(--rx-brand-dark); text-underline-offset: .18em; }
a:hover { color: var(--rx-brand-deeper); }
img, svg, video { max-width: 100%; height: auto; }
img { display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--rx-accent); outline-offset: 2px; }
::selection { background: rgba(47, 140, 98, .22); }

/* Icon sprite (icon() helper) */
.i { width: 1em; height: 1em; display: inline-block; vertical-align: -.125em; fill: currentColor; flex-shrink: 0; }

.skip-link {
  position: absolute; left: 1rem; top: -100px; z-index: 3000;
  background: var(--rx-ink); color: #fff; padding: .6rem 1rem; border-radius: var(--rx-radius-sm);
}
.skip-link:focus { top: 1rem; color: #fff; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ===== 3. Layout ===== */
.site-main { display: block; min-height: 50vh; }
.site-header + .site-main { padding-top: var(--rx-header-h-wide); }   /* room for the fixed header (§5) */
.rx-section-inner, .container {
  width: 100%;
  max-width: var(--rx-max);
  margin: 0 auto;
  padding: 0 var(--rx-gutter);
}
.container--narrow { max-width: 860px; }

/* ===== 4. Buttons & section heads ===== */
.rx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--rx-font-body); font-weight: 600; font-size: .95rem; letter-spacing: .01em;
  padding: .95rem 1.6rem; border-radius: var(--rx-pill); border: 1.5px solid transparent;
  cursor: pointer; text-decoration: none; white-space: nowrap; line-height: 1.1;
  transition: transform .2s ease, box-shadow .25s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.rx-btn .i { font-size: 1.1em; }
/* Glass variants: for buttons over photos (hero) */
.rx-btn-primary {
  background: rgba(47, 140, 98, .40); color: #fff; border-color: rgba(47, 140, 98, .58);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 10px 30px rgba(0, 0, 0, .22);
}
.rx-btn-primary:hover, .rx-btn-primary:focus-visible {
  background: rgba(47, 140, 98, .55); border-color: rgba(47, 140, 98, .86); color: #fff;
  transform: translateY(-2px); box-shadow: 0 14px 32px rgba(0, 0, 0, .28);
}
.rx-btn-ghost {
  background: rgba(201, 140, 25, .40); color: #fff; border-color: rgba(201, 140, 25, .62);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.rx-btn-ghost:hover, .rx-btn-ghost:focus-visible {
  background: rgba(201, 140, 25, .55); border-color: rgba(201, 140, 25, .9); color: #fff; transform: translateY(-2px);
}
.rx-btn-light { background: #fff; color: var(--rx-brand-deeper); border-color: #fff; }
.rx-btn-light:hover, .rx-btn-light:focus-visible {
  background: var(--rx-cream); color: var(--rx-brand-deeper); transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0, 0, 0, .22);
}
/* Solid variants: for buttons on light backgrounds (forms, cards) */
.rx-btn-solid { background: var(--rx-brand); color: #fff; border-color: var(--rx-brand); box-shadow: var(--rx-shadow-sm); }
.rx-btn-solid:hover, .rx-btn-solid:focus-visible { background: var(--rx-brand-dark); border-color: var(--rx-brand-dark); color: #fff; transform: translateY(-1px); box-shadow: var(--rx-shadow-md); }
.rx-btn-outline { background: transparent; color: var(--rx-brand-dark); border-color: var(--rx-line-strong); }
.rx-btn-outline:hover, .rx-btn-outline:focus-visible { background: rgba(47, 140, 98, .08); border-color: var(--rx-brand); color: var(--rx-brand-deeper); }
.rx-btn-accent { background: var(--rx-accent); color: var(--rx-brand-deeper); border-color: var(--rx-accent); }
.rx-btn-accent:hover, .rx-btn-accent:focus-visible { background: #dc9a3a; border-color: #dc9a3a; color: var(--rx-brand-deeper); transform: translateY(-1px); }
.rx-btn-sm { padding: .6rem 1.05rem; font-size: .88rem; }
.rx-btn-block { width: 100%; }
.rx-btn[disabled], .rx-btn[aria-disabled="true"] { opacity: .55; pointer-events: none; }

.rx-section-head { max-width: 720px; margin: 0 0 2.5rem; }
.rx-section-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.rx-section-eyebrow {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--rx-font-body); font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--rx-brand-dark); background: rgba(47, 140, 98, .10);
  padding: .35rem .75rem; border-radius: var(--rx-pill); margin-bottom: 1rem;
}
.rx-section-eyebrow--on-dark { color: #fff; background: rgba(255, 255, 255, .14); }
.rx-section-title {
  font-family: var(--rx-font-head); font-weight: 600; font-size: clamp(1.9rem, 3.6vw, 2.75rem);
  line-height: 1.12; letter-spacing: -.015em; margin: 0 0 .75rem; color: var(--rx-ink);
}
.rx-section-title--on-dark { color: #fff; }
.rx-section-sub { font-size: 1.02rem; line-height: 1.65; color: var(--rx-muted); max-width: 56ch; margin: 0; }
.rx-section-head--center .rx-section-sub { margin-left: auto; margin-right: auto; }
.rx-section-sub--on-dark { color: rgba(255, 255, 255, .82); }

/* ===== 5. Header =====
   Always visible (owner decision 2026-10-13): wide at the top of the page, it compacts as
   you scroll — site.js sets --hdr-prog 0 → 1 between 30 and 180 px — and it never hides.
   Solid brand green, except on the home page (the only page with .rx-hero, as on the old
   live site): there it starts as a dark-to-transparent gradient over the photo and the
   green layer (::before) fades in with --hdr-prog. The old hide-on-scroll version is
   archived in _archive/navbar-2026-10-13/. */
/* Fixed, not sticky: a sticky header shrinking in the flow made the page under it move while scrolling,
   and the browsers' scroll anchoring then pushed the page back by what the header grew, so scrolling up
   stopped ~26px short of the top. Out of the flow, the page never moves: <main> keeps the wide header's
   height free (the home hero is pulled up into it, home.css §2). */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 2100;
  background: var(--rx-brand);
  transition: box-shadow .25s ease;
}
.site-header::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--rx-brand); opacity: var(--hdr-prog, 0);
}
body:has(.rx-hero) .site-header {
  background: linear-gradient(105deg, rgba(15, 40, 28, .97) 0%, rgba(15, 40, 28, .78) 42%, rgba(10, 25, 18, .14) 78%, transparent 100%);
}
/* An open mobile menu always sits on a solid bar. */
.site-header:has(.header-toggle[aria-expanded="true"])::before { opacity: 1; }
.site-header.is-scrolled { box-shadow: 0 6px 20px rgba(15, 30, 22, .20); }

.site-header-inner {
  position: relative;
  display: flex; align-items: center; gap: 1rem;
  min-height: calc(var(--rx-header-h-wide) - (var(--rx-header-h-wide) - var(--rx-header-h-compact)) * var(--hdr-prog, 0));
  margin: 0 auto;
  padding: 0 clamp(14px, 3.2vw, 40px);
}
@media (min-width: 993px) {
  /* Full width at the top, converging on the content width as it compacts. */
  .site-header-inner {
    max-width: calc(100% - (100% - min(var(--rx-max), 100%)) * var(--hdr-prog, 0));
    padding-left: calc(clamp(14px, 3.2vw, 40px) + 8px * var(--hdr-prog, 0));
    padding-right: calc(clamp(14px, 3.2vw, 40px) + 8px * var(--hdr-prog, 0));
  }
}

.site-logo { display: inline-flex; flex-shrink: 0; border-radius: 30px; transition: transform .25s ease; }
.site-logo:hover { transform: translateY(-1px); }
.site-logo-pill {
  display: inline-flex; align-items: center; justify-content: center; background: #fff;
  border-radius: 30px;
  padding: calc(6px - 1px * var(--hdr-prog, 0)) calc(13px - 2px * var(--hdr-prog, 0));
  box-shadow: 0 2px 10px rgba(0, 0, 0, .14), 0 1px 3px rgba(0, 0, 0, .08);
}
.site-logo img { height: calc(42px - 8px * var(--hdr-prog, 0)); width: auto; }

.header-nav { margin-left: auto; display: flex; align-items: center; gap: .3rem; }
.header-nav-link, .header-lang {
  position: relative; display: inline-flex; align-items: center; gap: .45rem;
  color: rgba(255, 255, 255, .94); text-decoration: none;
  padding: .62rem 1.1rem; border-radius: var(--rx-pill);   /* owner 2026-10-22: bigger buttons (was .5/.9, .92rem) */
  font-weight: 400; font-size: .9rem; letter-spacing: .005em; line-height: 1.2; white-space: nowrap;   /* owner: .9rem / 400 */
  transition: color .2s ease, background .2s ease;
}
/* small desktops: the bigger buttons still fit on one line next to the logo */
@media (min-width: 993px) and (max-width: 1199.98px) {
  .header-nav { gap: .15rem; }
  .header-nav-link, .header-lang { padding: .55rem .72rem; }
}
/* Nav icons: the sprite's glyphs are fill-only and look hairline at this size; a thin
   stroke in the same colour gives them the weight of the text. overflow:visible stops
   glyphs that touch the viewBox edge from losing their last pixel row. */
.header-nav .i, .header-toggle .i {
  width: 1.1em; height: 1.1em; vertical-align: 0; overflow: visible;
  stroke: currentColor; stroke-width: .45px; paint-order: stroke;
}
/* Nav flag: own size (the nav icon rule would squeeze it square) and a thin light frame,
   so the white of the Italian flag does not melt into the green bar. */
.header-nav .i.flag {
  width: 1.3em; height: .867em; stroke: none; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .75); border-radius: 3px; box-sizing: content-box;
}
.header-nav-link:hover, .header-nav-link:focus-visible,
.header-lang:hover, .header-lang:focus-visible { color: #fff; background: rgba(255, 255, 255, .14); }
.header-nav-link[aria-current="page"] { color: #fff; background: rgba(255, 255, 255, .16); }
.header-nav-link[aria-current="page"]::after {
  content: ''; position: absolute; left: 50%; bottom: 3px; transform: translateX(-50%);
  width: 18px; height: 2px; border-radius: 2px; background: var(--rx-accent);
  box-shadow: 0 0 8px rgba(232, 168, 75, .6);
}
.header-lang { margin-left: .35rem; }
/* Flags: both symbols are 3:2 (the Union Jack is centre-cropped), no outline. */
.flag { width: 1.5em; height: 1em; border-radius: 2px; vertical-align: -.16em; }

.header-toggle {
  display: none; margin-left: auto;
  width: 40px; height: 40px; border-radius: 12px;
  border: 1.5px solid rgba(255, 255, 255, .45); color: #fff; background: rgba(255, 255, 255, .10);
  align-items: center; justify-content: center; font-size: 1.15rem;
  transition: background .2s ease, border-color .2s ease;
}
.header-toggle:hover { background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .7); }
.header-toggle[aria-expanded="true"] { background: #fff; color: var(--rx-brand-dark); border-color: #fff; }
.header-toggle .i-close { display: none; }
.header-toggle[aria-expanded="true"] .i-open { display: none; }
.header-toggle[aria-expanded="true"] .i-close { display: inline-block; }

@media (max-width: 992px) {
  .site-header-inner { padding: 0 12px; gap: .6rem; }
  .site-logo img { height: calc(30px - 4px * var(--hdr-prog, 0)); }
  .header-toggle { display: inline-flex; }
  .header-nav {
    display: none;
    position: absolute; top: calc(100% + .5rem); left: 12px; right: 12px;
    flex-direction: column; align-items: stretch; gap: .3rem;
    background: linear-gradient(180deg, var(--rx-brand) 0%, var(--rx-brand-dark) 100%);
    border: 1px solid rgba(255, 255, 255, .15); border-radius: 18px; padding: .55rem;
    box-shadow: 0 22px 48px rgba(0, 0, 0, .3);
  }
  .header-nav.is-open { display: flex; animation: rxFadeDown .22s var(--rx-ease); }
  .header-nav-link, .header-lang { border-radius: 12px; padding: .7rem .85rem; margin: 0; }
  .header-nav-link[aria-current="page"] { box-shadow: inset 3px 0 0 var(--rx-accent); }
  .header-nav-link[aria-current="page"]::after { display: none; }
  .header-lang { border-top: 1px solid rgba(255, 255, 255, .18); border-radius: 0 0 12px 12px; padding-top: .85rem; }
}
@keyframes rxFadeDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ===== 6. Footer ===== */
.site-footer { position: relative; margin-top: 4rem; color: #f4fbf7; isolation: isolate; }
.site-footer-divider { display: block; width: 100%; height: clamp(48px, 7vw, 88px); color: var(--rx-brand); margin-bottom: -1px; }
.site-footer-shell {
  position: relative; overflow: hidden; padding: 3rem 0 1.6rem;
  background:
    radial-gradient(900px 400px at 85% -10%, rgba(232, 168, 75, .18), transparent 60%),
    radial-gradient(1100px 500px at 10% 110%, rgba(45, 149, 163, .22), transparent 65%),
    linear-gradient(180deg, var(--rx-brand) 0%, var(--rx-brand-dark) 60%, var(--rx-brand-deeper) 100%);
}
.site-footer a { color: rgba(255, 255, 255, .92); text-decoration: none; transition: color .2s ease; }
.site-footer a:hover { color: #fff; }
.site-footer-brandline {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1.25rem 1.5rem;
  padding-bottom: 2rem; margin-bottom: 2rem; border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.site-footer-name { font-family: var(--rx-font-head); font-weight: 600; font-size: clamp(2rem, 4.5vw, 3rem); color: #fff; letter-spacing: -.025em; margin: 0; line-height: 1.05; }
.site-footer-tag { font-size: 1rem; color: rgba(255, 255, 255, .78); margin: .45rem 0 0; max-width: 50ch; }
.site-footer-social { list-style: none; padding: 0; margin: 0; display: flex; gap: .55rem; }
.site-footer-social a {
  display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem;
  border-radius: 10px; background: rgba(255, 255, 255, .12); color: #fff; font-size: 1.15rem;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.site-footer-social a:hover { background: var(--rx-accent); color: var(--rx-brand-deeper); transform: translateY(-2px); }
.site-footer-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; align-items: start; }
.site-footer-title {
  display: flex; align-items: center; gap: .55rem;
  font-family: var(--rx-font-head); font-size: 1.05rem; font-weight: 600; color: #fff;
  margin: 0 0 1.1rem; padding-bottom: .6rem; border-bottom: 1px solid rgba(255, 255, 255, .18);
}
.site-footer-title .i { width: 26px; height: 26px; padding: 5px; border-radius: 8px; background: rgba(255, 255, 255, .12); color: var(--rx-accent); }
.site-footer-links { list-style: none; padding: 0; margin: 0; }
.site-footer-links li + li { margin-top: .55rem; }
.site-footer-links a, .site-footer-links button {
  display: inline-flex; align-items: center; gap: .55rem; font-size: .92rem; color: rgba(255, 255, 255, .82); padding: .15rem 0;
  transition: color .2s ease, transform .2s ease;
}
.site-footer-links button { background: none; border: 0; }
.site-footer-links a .i, .site-footer-links button .i { color: rgba(255, 255, 255, .55); }
.site-footer-links a:hover, .site-footer-links button:hover { color: #fff; transform: translateX(3px); }
.site-footer-links a:hover .i, .site-footer-links button:hover .i { color: var(--rx-accent); }
.site-footer-contact li { display: flex; }
.site-footer-contact a, .site-footer-contact .site-footer-address { display: flex; align-items: flex-start; gap: .7rem; line-height: 1.3; color: rgba(255, 255, 255, .82); font-size: .92rem; }
.site-footer-contact .i-box {
  flex-shrink: 0; width: 32px; height: 32px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .10); color: #fff; transition: background .2s ease, transform .2s ease;
}
.site-footer-contact a:hover { transform: none; }
.site-footer-contact a:hover .i-box { background: var(--rx-accent); color: var(--rx-brand-deeper); transform: rotate(-6deg) scale(1.05); }
/* The icon takes the box colour; on hover this must beat the generic ".site-footer-links a:hover .i"
   (orange), or the icon turns orange on the orange box. */
.site-footer-contact .i-box .i, .site-footer-contact a:hover .i-box .i { color: inherit; }
.site-footer-label { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
.site-footer-value { display: block; font-size: .95rem; font-weight: 600; color: #fff; line-height: 1.35; word-break: break-word; }
.site-footer-bottom {
  margin-top: 2.5rem; padding-top: 1.3rem; border-top: 1px solid rgba(255, 255, 255, .12);
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem 1.25rem;
}
.site-footer-legal { font-size: .82rem; color: rgba(255, 255, 255, .78); display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; margin: 0; }
.site-footer-legal strong { color: #fff; }
.site-footer-legal .sep { color: rgba(255, 255, 255, .35); font-weight: 700; }
.site-footer-credit { margin: 0; font-size: .78rem; color: rgba(255, 255, 255, .7); }
.site-footer-credit a { color: #fff; font-weight: 600; border-bottom: 1px solid rgba(255, 255, 255, .35); }
.site-footer-credit a:hover { border-bottom-color: var(--rx-accent); color: var(--rx-accent); }
@media (max-width: 992px) {
  .site-footer { margin-top: 3rem; }
  .site-footer-shell { padding: 2.2rem 0 5.5rem; }
  .site-footer-grid { grid-template-columns: 1fr; gap: 1.7rem; }
  .site-footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ===== 7. WhatsApp ===== */
.wa-float { position: fixed; left: 16px; bottom: 16px; z-index: 2200; }
.wa-float-btn {
  width: 58px; height: 58px; border-radius: 50%; border: 0; background: #25D366; color: #fff;
  box-shadow: 0 8px 20px rgba(37, 211, 102, .45);
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.7rem;
  transition: transform .2s ease, filter .2s ease;
}
.wa-float-btn:hover { transform: translateY(-2px); filter: brightness(1.04); }
.wa-popup {
  position: absolute; left: 0; bottom: 70px; width: min(310px, calc(100vw - 24px));
  background: #fff; border: 1px solid rgba(0, 0, 0, .08); border-radius: 14px;
  box-shadow: 0 14px 36px rgba(0, 0, 0, .18); padding: .85rem .9rem;
}
.wa-popup[hidden] { display: none; }
.wa-popup-title { font-weight: 800; font-size: .9rem; margin: 0 0 .35rem; }
.wa-popup-text { font-size: .83rem; line-height: 1.45; color: #3c4b55; margin: 0 0 .65rem; }
.wa-popup-cta {
  display: flex; align-items: center; justify-content: center; gap: .45rem; text-decoration: none;
  border-radius: var(--rx-pill); background: #128C4A; color: #fff; font-weight: 700; font-size: .85rem; padding: .62rem .8rem;
}
.wa-popup-cta:hover { color: #fff; background: #0f7a40; }
.wa-popup-close { position: absolute; top: 6px; right: 6px; border: 0; background: transparent; color: #5f6b74; width: 32px; height: 32px; border-radius: 8px; }
.wa-popup-close:hover { background: var(--rx-cream-warm); }
@media (max-width: 860px) { .wa-float-btn { width: 52px; height: 52px; font-size: 1.5rem; } }

/* ===== 8. Consent bar ===== */
.consent {
  position: fixed; z-index: 2300; left: 50%; bottom: 16px; transform: translateX(-50%);
  width: min(720px, calc(100vw - 24px));
  background: #fff; color: var(--rx-ink); border-radius: var(--rx-radius-md);
  box-shadow: var(--rx-shadow-lg); border: 1px solid var(--rx-line);
  padding: 1rem 1.15rem; display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;
}
.consent[hidden] { display: none; }
.consent-text { margin: 0; flex: 1 1 320px; font-size: .88rem; line-height: 1.5; color: var(--rx-ink-soft); }
.consent-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.consent-actions .rx-btn { padding: .65rem 1.15rem; font-size: .88rem; }

/* ===== 9. Forms (base) ===== */
.field { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1rem; }
.field label, .field-label { font-size: .86rem; font-weight: 600; color: var(--rx-ink-soft); }
.field .req { color: var(--rx-danger); }
.input, .field input:not([type=checkbox]):not([type=radio]), .field select, .field textarea {
  width: 100%; padding: .8rem .95rem; border-radius: var(--rx-radius-sm);
  border: 1.5px solid var(--rx-line-strong); background: #fff; font-size: .95rem; line-height: 1.4;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.field textarea { min-height: 8rem; resize: vertical; }
.input:focus, .field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--rx-brand); box-shadow: 0 0 0 4px rgba(47, 140, 98, .15);
}
.field-hint { font-size: .8rem; color: var(--rx-muted); }
.field-error { font-size: .82rem; color: var(--rx-danger); }
.check { display: flex; gap: .6rem; align-items: flex-start; font-size: .9rem; line-height: 1.45; }
.check input { margin-top: .2rem; width: 1.1rem; height: 1.1rem; accent-color: var(--rx-brand); flex-shrink: 0; }
.alert { border-radius: var(--rx-radius-sm); padding: .9rem 1.1rem; margin: 0 0 1.25rem; font-size: .93rem; border: 1px solid; }
.alert-success { background: #ecf7f0; border-color: #b9e0c8; color: #14532d; }
.alert-error { background: #fdf0ef; border-color: #f3c3be; color: #7a1d14; }
.alert-info { background: #eef7f8; border-color: #bfe0e4; color: #164e57; }
/* Honeypot fields: off-screen, never display:none (some bots skip hidden fields) */
.hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }

/* ===== Video player .rp (partials/player.php + site.js) =====
   9:16: cover → silent preview loop while on screen → full clip with our own controls.
   States on the element: is-preview, is-playing, is-paused (none = cover only), is-idle. */
.rp {
  position: relative; aspect-ratio: 9 / 16; overflow: hidden; isolation: isolate;
  border-radius: 20px; background: #0b120e; color: #fff; cursor: pointer;
  -webkit-tap-highlight-color: transparent; user-select: none;
}
.rp-cover, .rp-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rp-video { opacity: 0; transition: opacity .35s ease; }
.rp.is-preview .rp-video, .rp.is-playing .rp-video, .rp.is-paused .rp-video { opacity: 1; }
.rp::after {          /* soft shade so the play button and controls read on any frame */
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(to bottom, rgba(0, 0, 0, .18), transparent 22%, transparent 64%, rgba(0, 0, 0, .55));
  transition: opacity .3s ease;
}
.rp.is-playing::after { opacity: .55; }

/* Big play button: glass circle, only before playing and when paused */
.rp-play {
  position: absolute; left: 50%; top: 50%; z-index: 3; transform: translate(-50%, -50%);
  width: clamp(68px, 6.5vw, 88px); height: clamp(68px, 6.5vw, 88px); border-radius: 50%; border: 0;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .92); color: var(--rx-brand-deeper);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35); transition: transform .25s var(--rx-ease), background .2s, opacity .2s;
}
/* the triangle is already drawn a little right of the icon's centre (optical centring): no extra offset */
.rp-play svg { width: 50%; height: 50%; fill: currentColor; }
.rp:hover .rp-play { transform: translate(-50%, -50%) scale(1.08); background: #fff; }
.rp-play:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.rp.is-playing .rp-play { opacity: 0; pointer-events: none; }

/* Control bar: one slim row at the bottom, appears while playing / paused */
.rp-controls {
  position: absolute; left: .6rem; right: .6rem; bottom: .6rem; z-index: 3;
  display: flex; align-items: center; gap: .45rem; padding: .35rem .5rem;
  border-radius: 999px; background: rgba(10, 16, 13, .55);
  opacity: 0; transform: translateY(6px); pointer-events: none; transition: opacity .25s, transform .25s;
}
.rp.is-playing .rp-controls, .rp.is-paused .rp-controls { opacity: 1; transform: none; pointer-events: auto; }
.rp.is-playing.is-idle .rp-controls { opacity: 0; }          /* hides after 2.5s without movement */
.rp.is-playing.is-idle { cursor: none; }
.rp-btn {
  flex: 0 0 auto; width: 30px; height: 30px; border: 0; border-radius: 50%; padding: 0;
  display: grid; place-items: center; background: transparent; color: #fff;
}
.rp-btn:hover { background: rgba(255, 255, 255, .16); }
.rp-btn:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.rp-btn svg { width: 18px; height: 18px; fill: currentColor; }
.rp-toggle .rp-ico-play { display: none; }
.rp.is-paused .rp-toggle .rp-ico-play { display: block; }
.rp.is-paused .rp-toggle .rp-ico-pause { display: none; }
.rp-toggle .rp-ico-play svg { margin-left: 2px; }
.rp-mute .rp-ico-off { display: none; }
.rp-mute[aria-pressed="false"] .rp-ico-on { display: none; }
.rp-mute[aria-pressed="false"] .rp-ico-off { display: block; }
.rp-bar { position: relative; flex: 1 1 auto; height: 18px; cursor: pointer; }
.rp-bar::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 3px; background: rgba(255, 255, 255, .3); }
.rp-fill { position: absolute; left: 0; top: 50%; height: 3px; margin-top: -1.5px; width: 0; border-radius: 3px; background: var(--rx-accent); }
.rp-fill::after { content: ''; position: absolute; right: -5px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .4); }
.rp-bar:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 4px; }
.rp-time { flex: 0 0 auto; font-size: .72rem; font-weight: 600; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .9); min-width: 2.6em; text-align: right; }
.rp:fullscreen { border-radius: 0; aspect-ratio: auto; background: #000; }
.rp:fullscreen .rp-video, .rp:fullscreen .rp-cover { object-fit: contain; }
@media (max-width: 380px) { .rp-fs { display: none; } }
/* ===== 10. Utilities ===== */
.text-center { text-align: center; }
.muted { color: var(--rx-muted); }
.prose { font-size: 1.04rem; line-height: 1.75; color: var(--rx-ink-soft); }
.prose h2 { font-size: clamp(1.45rem, 2.4vw, 1.85rem); margin-top: 2rem; }
.prose h3 { font-size: 1.25rem; margin-top: 1.6rem; }
.prose ul, .prose ol { padding-left: 1.3rem; margin: 0 0 1em; }
.prose li + li { margin-top: .35rem; }
.prose img { border-radius: var(--rx-radius-md); margin: 1.5rem 0; }
.prose a { color: var(--rx-brand-dark); font-weight: 600; }
.prose blockquote { margin: 1.5rem 0; padding: .8rem 1.2rem; border-left: 4px solid var(--rx-accent); background: var(--rx-cream); border-radius: 0 var(--rx-radius-sm) var(--rx-radius-sm) 0; }
.prose table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: .95rem; }
.prose th, .prose td { border: 1px solid var(--rx-line-strong); padding: .55rem .7rem; text-align: left; vertical-align: top; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ===== Page header (.pg-hero) — static pages, contact, legal (2026-10-14) =====
   Shared here (not page.css) because the contact page loads forms.css. Warm cream band like the article / cooking pages, text aligned left: eyebrow, serif title,
   lead, meta chips. Replaces the old flat green gradient band. */
.pg-hero {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--rx-cream);
  border-bottom: 1px solid var(--rx-line);
  color: var(--rx-ink);
  padding: clamp(2.2rem, 5.5vw, 3.75rem) 0 clamp(1.8rem, 4vw, 2.75rem);
}
.pg-hero::before {   /* soft brand glow, top right */
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  width: 520px; height: 520px; right: -140px; top: -260px; border-radius: 50%;
  background: radial-gradient(circle, rgba(47, 140, 98, .14) 0%, rgba(47, 140, 98, 0) 70%);
}
.pg-hero .container { max-width: 1140px; }
.pg-eyebrow {
  display: inline-flex; align-items: center; gap: .5rem; margin: 0 0 .8rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--rx-brand-dark);
}
.pg-eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--rx-brand); box-shadow: 0 0 0 4px rgba(47, 140, 98, .15); }
.pg-hero h1 {
  color: var(--rx-ink);
  font-size: clamp(2rem, 4.8vw, 3.25rem); line-height: 1.08; letter-spacing: -.02em;
  margin: 0 0 .7rem; max-width: 22ch;
}
.pg-hero h1 .i { display: none; }   /* the eyebrow carries the context now */
.pg-hero-lead {
  font-size: clamp(1rem, 2vw, 1.15rem); line-height: 1.6;
  color: var(--rx-muted); max-width: 62ch; margin: 0;
}
.pg-hero .rx-btn { margin-top: 1.4rem; }
.pg-meta { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.25rem 0 0; padding: 0; }
.pg-meta li {
  display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .85rem; border-radius: var(--rx-pill);
  background: #fff; border: 1px solid var(--rx-line); font-size: .82rem; font-weight: 600; color: var(--rx-ink-soft);
}
.pg-meta .i { color: var(--rx-brand); }