/* Rowan — tokeni templata, scopovani na .sec-rowan-parallax. */

/* ============================================================
   DESIGN TOKENS — Template 9 "Rowan"
   Niche variant: H — Dentures / prosthetics for patients 60+
   >>> NEW variant, not in the original style guide. Rules and
       reasoning live in the BUILDER-LOG, §4e. <<<

   Register: dignified, concrete, unhurried. Chestnut is the
   structure, deep teal is the only accent.
   Shape language: an asymmetric "shoulder" radius (one corner
   much larger than the other three) plus an offset backing
   plate behind cards.
   Type is deliberately one step larger than the rest of the
   series — 18px body, not 16px. The audience is 60+.
   Change ONLY this file to re-skin the whole template.
   ============================================================ */

.sec-rowan-parallax {
  /* ---------- Color ---------- */
  --c-bg:          #FAF7F4;   /* warm ivory, very low chroma */
  --c-bg-alt:      #F2ECE5;
  --c-white:       #FFFFFF;
  --c-surface:     #EFE5DB;   /* sand tint for cards / soft fills */

  --c-primary:     #5A3B30;   /* chestnut — 9.3:1 on --c-bg, safe for text */
  --c-primary-dk:  #3E2822;   /* headings, dark sections */
  --c-primary-lt:  #9A7B6E;
  --c-primary-08:  rgba(90, 59, 48, 0.08);
  --c-primary-14:  rgba(90, 59, 48, 0.14);

  --c-accent:      #3E7C74;   /* deep teal — icons, fills; carries WHITE text (4.8:1) */
  --c-accent-dk:   #2F6058;   /* AA-safe teal for TEXT on light (6.8:1) */
  --c-accent-soft: #DFEBE8;
  --c-accent-tint: rgba(62, 124, 116, 0.16);

  --c-text:        #2A211D;
  --c-text-muted:  #6B5C55;   /* 6.1:1 on --c-bg */
  --c-on-dark:     #F6EFE8;
  --c-on-dark-mu:  rgba(246, 239, 232, 0.78);

  --c-line:        rgba(42, 33, 29, 0.11);
  --c-line-strong: rgba(42, 33, 29, 0.22);
  --c-line-dark:   rgba(246, 239, 232, 0.22);

  --c-whatsapp:    #128C7E;
  --c-whatsapp-dk: #0E6F63;
  --c-star:        #C98A22;

  /* ---------- Elevation — soft, never hard-edged ---------- */
  --sh-xs: 0 1px 2px rgba(62, 40, 34, 0.06);
  --sh-sm: 0 4px 14px -6px rgba(62, 40, 34, 0.16);
  --sh-md: 0 14px 32px -14px rgba(62, 40, 34, 0.26);
  --sh-lg: 0 26px 56px -20px rgba(62, 40, 34, 0.30);
  --sh-xl: 0 44px 88px -30px rgba(62, 40, 34, 0.34);

  /* ---------- Radius ---------- */
  --r-xs:  10px;
  --r-sm:  14px;
  --r-md:  20px;
  --r-lg:  28px;
  --r-xl:  40px;
  --r-2xl: 56px;
  --r-pill: 999px;
  --r-circle: 50%;

  /* Signature: one corner takes the big radius, the rest stay
     small. Written as a shorthand so a card only needs .u-shoulder. */
  --r-shoulder:    56px 20px 20px 20px;
  --r-shoulder-br: 20px 20px 56px 20px;
  --r-shoulder-sm: 34px 14px 14px 14px;

  /* Gallery tiles are pinned at 12px on purpose: the brief asks for
     10–15px there, deliberately crisper than the 20–56px used
     everywhere else so a dense grid does not read as one blob. */
  --r-gallery: 12px;

  /* ---------- Spacing — 8px base ---------- */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:  16px;
  --sp-4:  24px;
  --sp-5:  32px;
  --sp-6:  48px;
  --sp-7:  64px;
  --sp-8:  96px;
  --sp-9: 128px;

  --section-y: clamp(68px, 8.5vw, 120px);
  --gutter:    clamp(20px, 5vw, 48px);
  --maxw:      1260px;

  /* ---------- Typography ----------
     One step up from the rest of the series: body is 18px, lead
     is 20–22px. Nothing below 15px outside the footer legal row. */
  --ff-display: "Rubik", "Segoe UI", system-ui, sans-serif;
  --ff-body:    "Open Sans", "Segoe UI", system-ui, -apple-system, sans-serif;

  --fs-xs:   0.9375rem;   /* 15px — the floor */
  --fs-sm:   1rem;        /* 16px */
  --fs-base: 1.0625rem;
  --fs-md:   1.125rem;    /* 18px — body default */
  --fs-lg:   clamp(1.25rem, 0.45vw + 1.15rem, 1.375rem);
  --fs-h4:   clamp(1.25rem, 0.6vw + 1.1rem, 1.5rem);
  --fs-h3:   clamp(1.5rem, 1vw + 1.25rem, 1.9375rem);
  --fs-h2:   clamp(2.0625rem, 2.4vw + 1.45rem, 3.1875rem);
  --fs-h1:   clamp(2.5rem, 3.7vw + 1.5rem, 4.25rem);

  --lh-tight: 1.06;
  --lh-snug:  1.2;
  --lh-body:  1.62;

  --ls-tight: -0.02em;
  --ls-label:  0.13em;

  /* ---------- Motion ----------
     Variant H allows no auto-motion: these durations only ever
     run on user-initiated state changes and scroll reveals. */
  --ease:      cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --t-fast: 150ms;
  --t-base: 260ms;
  --t-slow: 600ms;

  /* ---------- Layout ---------- */
  --header-h:  84px;
  --z-header: 100;
  --z-mobilebar: 90;
  --z-menu: 95;
  --z-lightbox: 200;

  /* Touch targets are 48px here, not 44px — variant H rule. */
  --tap: 48px;
}

@media (max-width: 900px) {
  .sec-rowan-parallax { --header-h: 68px; }
}

/* Rowan — reset i zajedničke primitive (base.css). */

/* ============================================================
   BASE — Template 9 "Rowan"
   Signature devices:
     .u-shoulder — asymmetric radius, one corner much larger
     .u-plate    — an offset backing plate behind a card
   Both are soft-edged by definition, which is what the style
   guide asks for, and neither repeats T1–T8.
   ============================================================ */

.sec-rowan-parallax *, .sec-rowan-parallax *::before, .sec-rowan-parallax *::after { box-sizing: border-box; }

.sec-rowan-parallax {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 24px);
}

.sec-rowan-parallax {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--ff-body);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  overflow-x: clip;
}

.sec-rowan-parallax img, .sec-rowan-parallax svg, .sec-rowan-parallax video { display: block; max-width: 100%; }
.sec-rowan-parallax img, .sec-rowan-parallax video { height: auto; }

.sec-rowan-parallax h1, .sec-rowan-parallax h2, .sec-rowan-parallax h3, .sec-rowan-parallax h4 {
  font-family: var(--ff-display);
  font-weight: 600;
  color: var(--c-primary-dk);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-snug);
  margin: 0;
  text-wrap: balance;
}
.sec-rowan-parallax h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); font-weight: 700; }
.sec-rowan-parallax h2 { font-size: var(--fs-h2); line-height: 1.12; font-weight: 700; }
.sec-rowan-parallax h3 { font-size: var(--fs-h3); }
.sec-rowan-parallax h4 { font-size: var(--fs-h4); }

.sec-rowan-parallax p { margin: 0; text-wrap: pretty; }
.sec-rowan-parallax ul, .sec-rowan-parallax ol { margin: 0; padding: 0; list-style: none; }

.sec-rowan-parallax a { color: inherit; text-decoration: none; transition: color var(--t-fast) var(--ease); }
.sec-rowan-parallax button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }

/* A 3px ring at 60+ eyesight is not decoration — keep it thick. */
.sec-rowan-parallax :focus-visible { outline: 3px solid var(--c-primary); outline-offset: 3px; border-radius: var(--r-xs); }
.sec-rowan-parallax :focus:not(:focus-visible) { outline: none; }
.sec-rowan-parallax ::selection { background: var(--c-accent-soft); color: var(--c-primary-dk); }

/* Text-size preference (header toggle, stored in localStorage).
   Everything on the page is sized in rem, so lifting the root size
   scales body copy, buttons and spacing that depends on them. The
   vw half of a clamp() heading deliberately does not grow — the
   headlines are already large and would start wrapping badly. */
.sec-rowan-parallax.is-lg { font-size: 118%; }

/* ---------- Layout primitives ---------- */

.sec-rowan-parallax .u-container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.sec-rowan-parallax .u-section { position: relative; padding-block: var(--section-y); }
.sec-rowan-parallax .u-section--alt { background: var(--c-bg-alt); }

.sec-rowan-parallax .u-sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

.sec-rowan-parallax .u-skip-link {
  position: absolute; top: 8px; left: 8px; z-index: 999;
  transform: translateY(-200%);
  background: var(--c-primary-dk); color: var(--c-white);
  padding: 14px 24px; border-radius: var(--r-pill);
  font-size: var(--fs-sm); font-weight: 700;
}
.sec-rowan-parallax .u-skip-link:focus { transform: translateY(0); }

/* ============================================================
   DARK SCOPE
   A section on a brand-coloured background inherits the wrong
   text colours: h2 defaults to --c-primary-dk and .u-label to
   --c-accent-dk, both tuned for light backgrounds. Put .u-dark
   on the section and the whole subtree is corrected in one place.
   (BUILDER-LOG section 4 — this was missed in T6 and had to be
   fixed from a screenshot afterwards.)
   ============================================================ */
.sec-rowan-parallax .u-dark { color: var(--c-on-dark); }
.sec-rowan-parallax .u-dark h1, .sec-rowan-parallax .u-dark h2, .sec-rowan-parallax .u-dark h3, .sec-rowan-parallax .u-dark h4 { color: var(--c-on-dark); }
.sec-rowan-parallax .u-dark p { color: var(--c-on-dark-mu); }
.sec-rowan-parallax .u-dark .u-label { color: var(--c-accent-soft); }
.sec-rowan-parallax .u-dark .u-label::before { background: var(--c-accent-soft); }
.sec-rowan-parallax .u-dark .u-head p { color: var(--c-on-dark-mu); }

/* ---------- Eyebrow label + section head ---------- */

.sec-rowan-parallax .u-label {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--ff-display);
  font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--c-accent-dk);
}
.sec-rowan-parallax .u-label::before {
  content: "";
  width: 30px; height: 3px; border-radius: var(--r-pill);
  background: var(--c-accent);
  flex: none;
}

.sec-rowan-parallax .u-head > * + * { margin-top: var(--sp-3); }
.sec-rowan-parallax .u-head--center { text-align: center; margin-inline: auto; }
.sec-rowan-parallax .u-head--center .u-label { justify-content: center; }
.sec-rowan-parallax .u-head h2 { max-width: 19ch; }
.sec-rowan-parallax .u-head--center h2 { margin-inline: auto; }
.sec-rowan-parallax .u-head p { color: var(--c-text-muted); font-size: var(--fs-lg); max-width: 60ch; }
.sec-rowan-parallax .u-head--center p { margin-inline: auto; }

/* Underlined word — the "smile arc" the style guide suggests,
   drawn as a soft curve under one word instead of a straight rule. */
.sec-rowan-parallax .u-arc {
  position: relative;
  white-space: nowrap;
  color: var(--c-primary);
}
.sec-rowan-parallax .u-arc::after {
  content: "";
  position: absolute; left: -2%; right: -2%; bottom: -0.14em;
  height: 0.32em;
  border-radius: 0 0 var(--r-pill) var(--r-pill);
  border-bottom: 6px solid var(--c-accent);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
}
.sec-rowan-parallax .u-dark .u-arc { color: var(--c-white); }
.sec-rowan-parallax .u-dark .u-arc::after { border-bottom-color: var(--c-accent-soft); }

/* ---------- Signature: shoulder radius + offset plate ---------- */

.sec-rowan-parallax .u-shoulder { border-radius: var(--r-shoulder); }
.sec-rowan-parallax .u-shoulder--br { border-radius: var(--r-shoulder-br); }
.sec-rowan-parallax .u-shoulder--sm { border-radius: var(--r-shoulder-sm); }

/* The plate sits behind its parent, shifted down and to one side.
   The parent needs its own background, otherwise the plate shows
   through instead of behind. */
.sec-rowan-parallax .u-plate { position: relative; }
.sec-rowan-parallax .u-plate::before {
  content: "";
  position: absolute;
  inset: var(--plate-off, 16px) calc(var(--plate-off, 16px) * -1) calc(var(--plate-off, 16px) * -1) var(--plate-off, 16px);
  border-radius: inherit;
  background: var(--plate-bg, var(--c-accent-tint));
  z-index: -1;
}

/* Media frame used by hero, about, gallery and parallax. */
.sec-rowan-parallax .u-frame {
  position: relative;
  overflow: hidden;
  background: var(--c-surface);
  border-radius: var(--r-shoulder);
}
.sec-rowan-parallax .u-frame :is(img, video) { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Pills / chips ---------- */

.sec-rowan-parallax .u-pill {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 42px;
  padding: 9px 18px;
  border-radius: var(--r-pill);
  background: var(--pill-bg, var(--c-white));
  color: var(--pill-fg, var(--c-primary-dk));
  border: 1px solid var(--pill-bd, var(--c-line));
  font-family: var(--ff-display);
  font-size: var(--fs-sm); font-weight: 500;
  white-space: nowrap;
}
.sec-rowan-parallax .u-pill--accent { --pill-bg: var(--c-accent-soft); --pill-bd: transparent; --pill-fg: var(--c-accent-dk); }
.sec-rowan-parallax .u-pill--sand { --pill-bg: var(--c-surface); --pill-bd: transparent; --pill-fg: var(--c-primary-dk); }
.sec-rowan-parallax .u-pill svg { width: 19px; height: 19px; flex: none; color: var(--c-accent-dk); }

/* ---------- Stars ---------- */

.sec-rowan-parallax .u-stars { display: inline-flex; gap: 2px; }
.sec-rowan-parallax .u-stars svg { width: 18px; height: 18px; color: var(--c-star); }
.sec-rowan-parallax .u-stars--lg svg { width: 24px; height: 24px; }

/* ---------- Buttons ----------
   Minimum height is 56px (--tap is 48): a primary action on this
   template is meant to be hit without aiming. */

.sec-rowan-parallax .u-btn {
  --btn-bg: var(--c-primary);
  --btn-fg: var(--c-white);
  --btn-bd: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: 11px;
  min-height: 56px;
  padding: 15px 30px;
  border: 2px solid var(--btn-bd);
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--ff-display);
  font-size: var(--fs-md); font-weight: 500;
  line-height: 1.1;
  text-align: center;
  cursor: pointer;
  transition: transform var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out),
              background-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease);
}
.sec-rowan-parallax .u-btn svg { flex: none; width: 22px; height: 22px; }
.sec-rowan-parallax .u-btn:hover { transform: translateY(-2px); }
.sec-rowan-parallax .u-btn:active { transform: translateY(0) scale(0.995); transition-duration: 60ms; }

.sec-rowan-parallax .u-btn--solid { box-shadow: var(--sh-md); }
.sec-rowan-parallax .u-btn--solid:hover { --btn-bg: var(--c-primary-dk); box-shadow: var(--sh-lg); }

.sec-rowan-parallax .u-btn--line { --btn-bg: transparent; --btn-fg: var(--c-primary-dk); --btn-bd: var(--c-line-strong); }
.sec-rowan-parallax .u-btn--line:hover { --btn-bd: var(--c-primary); --btn-bg: var(--c-white); }

.sec-rowan-parallax .u-btn--teal { --btn-bg: var(--c-accent); --btn-fg: var(--c-white); box-shadow: var(--sh-md); }
.sec-rowan-parallax .u-btn--teal:hover { --btn-bg: var(--c-accent-dk); box-shadow: var(--sh-lg); }

.sec-rowan-parallax .u-btn--soft { --btn-bg: var(--c-accent-soft); --btn-fg: var(--c-accent-dk); }
.sec-rowan-parallax .u-btn--soft:hover { --btn-bg: #CFE1DD; }

.sec-rowan-parallax .u-btn--white { --btn-bg: var(--c-white); --btn-fg: var(--c-primary-dk); box-shadow: var(--sh-md); }
.sec-rowan-parallax .u-btn--white:hover { --btn-bg: var(--c-bg-alt); }

.sec-rowan-parallax .u-btn--ghost { --btn-bg: transparent; --btn-fg: var(--c-on-dark); --btn-bd: var(--c-line-dark); }
.sec-rowan-parallax .u-btn--ghost:hover { --btn-bg: rgba(246, 239, 232, 0.12); --btn-bd: rgba(246, 239, 232, 0.5); }

.sec-rowan-parallax .u-btn--wa { --btn-bg: var(--c-whatsapp); --btn-fg: #fff; box-shadow: var(--sh-md); }
.sec-rowan-parallax .u-btn--wa:hover { --btn-bg: var(--c-whatsapp-dk); box-shadow: var(--sh-lg); }

.sec-rowan-parallax .u-btn--lg { min-height: 64px; padding: 19px 36px; font-size: var(--fs-lg); }
.sec-rowan-parallax .u-btn--block { width: 100%; }

/* ---------- Scroll reveal ---------- */

/* Hidden start state gated on .has-js (set by app.js) so a script
   failure can never leave a blank hole where content should be.
   Travel is short (14px) on purpose — variant H keeps motion low. */
.sec-rowan-parallax.has-js [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 620ms var(--ease-out), transform 620ms var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.sec-rowan-parallax.has-js [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .sec-rowan-parallax { scroll-behavior: auto; }
  .sec-rowan-parallax *, .sec-rowan-parallax *::before, .sec-rowan-parallax *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .sec-rowan-parallax.has-js [data-reveal] { opacity: 1; transform: none; }
}

@media print {
  .sec-rowan-parallax .site-head, .sec-rowan-parallax .mobile-bar, .sec-rowan-parallax .stage { display: none !important; }
  .sec-rowan-parallax { background: #fff; }
}

/* ============================================================
   MEDIA SLOTS — every image slot also takes a <video>

   Each slot rule is written as `:is(img,video)`, so swapping the
   tag is the whole job — sizing, crop and radius stay identical:

     <img   src="_shared/img/hero-band.svg" width="1280" height="640" alt="...">
     <video src="_shared/video/hero.mp4" poster="_shared/img/hero-band.svg"
            width="1280" height="640" data-inline muted loop playsinline
            aria-label="..."></video>

   `data-inline` hands the element to app.js, which plays it only
   while it is on screen, pauses it when the tab is hidden, adds a
   pause control (WCAG 2.2.2) and skips autoplay entirely under
   prefers-reduced-motion — the poster stays in that case.

   Keep width/height (or let the slot aspect-ratio do it) so the
   layout does not shift while the file loads.
   ============================================================ */

/* Baseline for slots that never sized their media explicitly. */
.sec-rowan-parallax video { width: 100%; height: auto; }

/* Parent of an inline video: only promoted when it is static, so a
   slot that already positions itself is left alone. */
.sec-rowan-parallax .has-inline-video { position: relative; }

.sec-rowan-parallax .u-mediactl {
  position: absolute;
  right: 14px; bottom: 14px;
  z-index: 2;
  display: inline-flex; align-items: center; gap: 9px;
  min-height: var(--tap);
  padding: 11px 18px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--sh-sm);
  color: var(--c-text);
  font-family: var(--ff-display);
  font-size: var(--fs-xs); font-weight: 500;
  cursor: pointer;
  transition: background-color var(--t-base) var(--ease);
}
.sec-rowan-parallax .u-mediactl:hover { background: #fff; }
.sec-rowan-parallax .u-mediactl__ic { position: relative; width: 12px; height: 12px; flex: none; }
.sec-rowan-parallax .u-mediactl__ic::before, 
.sec-rowan-parallax .u-mediactl__ic::after {
  content: "";
  position: absolute; top: 0;
  width: 4px; height: 12px;
  border-radius: 1px;
  background: currentColor;
}
.sec-rowan-parallax .u-mediactl__ic::before { left: 0; }
.sec-rowan-parallax .u-mediactl__ic::after { right: 0; }

/* paused -> the icon becomes a play triangle */
.sec-rowan-parallax .u-mediactl[aria-pressed="true"] .u-mediactl__ic::before {
  left: 1px;
  width: 0; height: 0;
  border-radius: 0;
  background: none;
  border-left: 11px solid currentColor;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}
.sec-rowan-parallax .u-mediactl[aria-pressed="true"] .u-mediactl__ic::after { opacity: 0; }

/* Small slots (thumbnails) do not get room for a label. */
.sec-rowan-parallax .u-mediactl--compact { padding: 0; width: var(--tap); justify-content: center; }
.sec-rowan-parallax .u-mediactl--compact .u-mediactl__tx { display: none; }

/* Sekcija parallax. */

/* ============================================================
   PARALLAX — the frame widens as the section is scrolled through
   ============================================================ */

.sec-rowan-parallax .stage {
  position: relative;
  padding-block: clamp(48px, 6vw, 88px);
  background: var(--c-bg);
  /* clip, never hidden: overflow:hidden would make this a scroll
     container and break anything sticky inside or below.
     (BUILDER-LOG §4, learned in T7.) */
  overflow: clip;
}

.sec-rowan-parallax .stage__frame {
  /* --p is the scroll progress, 0 = inset card, 1 = full width.
     It defaults to 1, so without JS the section renders in its
     final, full-width state instead of a narrow card. */
  --p: 1;
  --pad: clamp(16px, 9vw, 190px);

  position: relative;
  min-height: min(76vh, 660px);
  display: grid;
  align-items: end;
  margin-inline: calc(var(--pad) * (1 - var(--p)));
  border-radius: calc(56px - 32px * var(--p));
  overflow: hidden;
  background: var(--c-primary-dk);
  box-shadow: var(--sh-lg);
}

.sec-rowan-parallax .stage__media { position: absolute; inset: 0; }
.sec-rowan-parallax .stage__media :is(img, video) { width: 100%; height: 100%; object-fit: cover; }
/* Scrim: the copy has to stay readable over any photograph the
   client drops in, including a bright one. */
.sec-rowan-parallax .stage__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(62, 40, 34, 0.24) 0%, rgba(62, 40, 34, 0.58) 46%, rgba(62, 40, 34, 0.88) 100%),
    linear-gradient(90deg, rgba(62, 40, 34, 0.62) 0%, transparent 62%);
}

.sec-rowan-parallax .stage__body {
  position: relative;
  display: grid;
  gap: clamp(24px, 3vw, 48px);
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding: clamp(32px, 4vw, 64px) clamp(24px, 4vw, 56px);
}

.sec-rowan-parallax .stage__copy > * + * { margin-top: var(--sp-3); }
.sec-rowan-parallax .stage__copy h2 { max-width: 24ch; font-size: clamp(1.75rem, 2.2vw + 1.2rem, 2.75rem); }
.sec-rowan-parallax .stage__copy p { max-width: 62ch; font-size: var(--fs-lg); line-height: 1.55; }

.sec-rowan-parallax .stage__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-4);
  margin: 0;
  padding-top: clamp(20px, 2.4vw, 32px);
  border-top: 1px solid var(--c-line-dark);
}
.sec-rowan-parallax .stage__facts > div { display: flex; flex-direction: column-reverse; gap: 4px; }
.sec-rowan-parallax .stage__facts dt {
  font-size: var(--fs-sm);
  color: var(--c-on-dark-mu);
}
.sec-rowan-parallax .stage__facts dd {
  margin: 0;
  font-family: var(--ff-display);
  font-size: clamp(2rem, 2.4vw + 1.3rem, 3rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--c-on-dark);
}

@media (max-width: 760px) {
  .sec-rowan-parallax .stage__frame { min-height: 0; }
  .sec-rowan-parallax .stage__facts { grid-template-columns: 1fr; gap: var(--sp-3); }
  .sec-rowan-parallax .stage__facts > div { flex-direction: row; align-items: baseline; gap: 12px; }
  .sec-rowan-parallax .stage__facts dd { font-size: 2rem; }
  .sec-rowan-parallax .stage__media::after {
    background: linear-gradient(180deg, rgba(62, 40, 34, 0.5) 0%, rgba(62, 40, 34, 0.9) 100%);
  }
}