/* =====================================================================
   Ouro Capital Partners — "Obsidian Meridian" presentation + motion layer
   Loaded after theme.json presets. Motion is opacity/transform only.
   All non-essential motion is gated behind html.js + prefers-reduced-motion.
   ===================================================================== */

:root {
  --ob: #0C0B0A;  --charcoal: #16140F; --onyx: #1C190F; --hairline: #2E2A22;
  --bone: #ECE7DD; --titanium: #A7A59C; --graphite: #8B8880;
  --gold: #C8A862; --gold-deep: #9C7C3C; --gold-light: #E0C998;
  --wide: 1180px; --content: 680px;
  --header-h: 72px;
  --ease: cubic-bezier(.2,.7,.2,1);
}

/* ---- base ---------------------------------------------------------- */
html { scroll-behavior: smooth; }
body { background: var(--ob); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-optical-sizing: auto; }
img, svg { max-width: 100%; }
::selection { background: var(--gold); color: var(--ob); }
:where(#top,#mission,#approach,#why,#services,#partners,#contact) { scroll-margin-top: calc(var(--header-h) + .5rem); }
a { -webkit-tap-highlight-color: transparent; }
/* visible keyboard focus (WCAG 2.4.7) — champagne ring on the dark ground */
a:focus-visible,
.ouro-nav a:focus-visible,
.cta a:focus-visible,
.ouro-nav .wp-block-navigation__responsive-container-open:focus-visible,
.ouro-nav .wp-block-navigation__responsive-container-close:focus-visible,
.ouro-nav .is-menu-open a:focus-visible {
  outline: 2px solid var(--gold-light); outline-offset: 3px; border-radius: 2px;
}

/* ---- header -------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; min-height: var(--header-h);
  padding-block: .8rem; background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .4s ease, backdrop-filter .4s ease, border-color .4s ease;
}
.site-header.is-stuck {
  background: rgba(12,11,10,.78);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom-color: var(--hairline);
}
.site-header__inner { width: 100%; max-width: var(--wide); margin-inline: auto; padding-inline: clamp(1.25rem,5vw,4rem); }

.brand-lockup { gap: .65rem; align-items: center; }
.brand-text { line-height: 1; }
.brand-wordmark { font-weight: 600; color: var(--bone); font-size: 1.25rem; letter-spacing: .015em; margin: 0; line-height: 1; }
.brand-sub { font-family: var(--wp--preset--font-family--inter-tight); font-weight: 500; color: var(--graphite);
  text-transform: uppercase; letter-spacing: .22em; font-size: .58rem; margin: .2rem 0 0; line-height: 1; }

/* navigation */
.ouro-nav { font-family: var(--wp--preset--font-family--inter-tight); font-weight: 500; }
.ouro-nav a, .ouro-nav .wp-block-navigation-item__content { color: var(--titanium); text-decoration: none; position: relative; transition: color .3s ease; }
.ouro-nav a:hover { color: var(--bone); }
.ouro-nav .wp-block-navigation-item.is-active > a::after,
.ouro-nav a.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: var(--gold); }
.ouro-nav .wp-block-navigation__responsive-container.is-menu-open { background: var(--ob); }
.ouro-nav .wp-block-navigation__responsive-container.is-menu-open a { color: var(--bone); }
/* overlay menu: center items, give breathing room (don't inherit desktop right-justify) */
.ouro-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { width: 100%; padding-top: 2rem; align-items: center; }
.ouro-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { justify-content: center; align-items: center; gap: 1.75rem; }
.ouro-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { font-size: 1.25rem; letter-spacing: .01em; padding-block: .5rem; }

/* ---- brand mark (infinity ouroboros — the official logo, symbol only) ----
   Filled champagne-gold glyph; the loop voids are transparent so the dark
   ground shows through. Sized by WIDTH (the cropped viewBox fixes the ~2.17:1
   aspect); height is auto → no distortion, CLS 0. The wordmark stays live text. */
.brand-mark { display: inline-flex; line-height: 0; flex: none; }
.brand-mark .ouro-mark { width: 100%; height: auto; display: block; overflow: visible; }
.ouro-mark__glyph { fill: var(--gold); }

.site-header   .brand-mark { width: 38px; }
.hero          .brand-mark { width: clamp(72px,11vw,100px); }
.contact__mark .brand-mark { width: 46px; }
.site-footer   .brand-mark { width: 32px; }
/* footer is the quiet, muted register — let the mark sit back a touch */
.site-footer   .ouro-mark__glyph { fill: var(--gold-deep); opacity: .9; }

/* ---- sections ------------------------------------------------------ */
.ouro-section { padding-block: clamp(6rem,4rem + 8vw,11rem); padding-inline: clamp(1.25rem,5vw,4rem); position: relative; }

/* widen the "wide" sections so the index, lead and grids share one left edge */
.section-why > :not(.alignfull), .section-services > :not(.alignfull), .section-approach > :not(.alignfull) { max-width: var(--wide); }

/* section index spine + drawing hairline */
.section-index { position: relative; padding-bottom: 1.1rem; margin-bottom: 2.5rem; }
.section-index__label { font-family: var(--wp--preset--font-family--inter-tight); font-weight: 500;
  font-size: var(--wp--preset--font-size--eyebrow); letter-spacing: .2em; text-transform: uppercase;
  color: var(--titanium); margin: 0; line-height: 1.4; }
.section-index::after { content: ""; position: absolute; left: 0; bottom: 0; width: clamp(120px,38%,360px); height: 1px; background: var(--gold); transform: scaleX(1); transform-origin: left; }
.section-index--center { flex-direction: column; align-items: center; text-align: center; padding-bottom: 1.5rem; }
.section-index--center::after { left: 50%; width: 80px; transform: translateX(-50%) scaleX(1); transform-origin: center; }

.section-lead { color: var(--bone); font-family: var(--wp--preset--font-family--fraunces); font-weight: 600; letter-spacing: -.01em; margin: 0 0 3rem; max-width: 24ch; }

/* ---- hero ---------------------------------------------------------- */
.hero.wp-block-cover { min-height: 92svh; text-align: center; isolation: isolate; }
.hero .wp-block-cover__inner-container { display: flex; flex-direction: column; align-items: center; gap: 1.2rem; padding-inline: clamp(1.25rem,5vw,4rem); position: relative; z-index: 1; }
.hero__lockup { display: flex; flex-direction: column; align-items: center; gap: .55rem; position: relative; margin-bottom: .25rem; }
.hero__lockup::before { content: ""; position: absolute; left: 50%; top: 38%; width: min(440px,90vw); height: min(440px,90vw);
  transform: translate(-50%,-38%); background: radial-gradient(circle, rgba(200,168,98,.06), transparent 62%); z-index: -1; pointer-events: none; }
.brand-wordmark--hero { font-size: var(--wp--preset--font-size--wordmark); color: var(--bone); letter-spacing: .03em; }
.brand-sub--hero { font-size: .8rem; letter-spacing: .3em; margin-top: .45rem; }
.eyebrow { color: var(--graphite); text-transform: uppercase; letter-spacing: .22em; font-weight: 500; margin: 0;
  font-family: var(--wp--preset--font-family--inter-tight); }
.hero__headline { margin: 0; max-width: 18ch; }
.hero__headline .gold, .gold { color: var(--gold); }
.hero__subhead { margin: 0 auto; max-width: 46ch; color: var(--titanium); }

/* ---- CTA (text + gold arrow, no filled buttons) ------------------- */
.cta { font-family: var(--wp--preset--font-family--inter-tight); font-weight: 500; }
.cta a { color: var(--bone); text-decoration: none; display: inline-flex; align-items: center; gap: .5rem; position: relative; padding-block: .3rem; }
.cta a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: var(--gold);
  transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.cta a:hover::after { transform: scaleX(1); }
.cta-arrow { display: inline-block; transition: transform .35s var(--ease); }
.cta a:hover .cta-arrow { transform: translateX(6px); }
.cta--hero a { color: var(--gold); letter-spacing: .02em; }
.cta--hero a::after { background: var(--gold-light); }

/* ---- mission / vision — "the cycle" -------------------------------
   Signature: the brand's infinity mark, enlarged to a single gilded stroke,
   frames Mission & Vision as the two loops of one continuous figure-8
   (left loop ↔ Mission, right loop ↔ Vision). The divider becomes the cycle. */
.section-mv { overflow: hidden; }
.mv-cycle { position: absolute; inset: 0; margin: auto;
  width: min(680px, 90vw); height: auto; aspect-ratio: 200 / 96; pointer-events: none; z-index: 0; }
/* lit core — a soft champagne bloom sits inside each loop's void */
.mv-cycle::before { content: ""; position: absolute; inset: 0; margin: auto; width: 100%; height: 100%;
  background:
    radial-gradient(ellipse 26% 78% at 25% 50%, rgba(200,168,98,.15), rgba(200,168,98,.05) 46%, transparent 72%),
    radial-gradient(ellipse 26% 78% at 75% 50%, rgba(200,168,98,.15), rgba(200,168,98,.05) 46%, transparent 72%); }
/* gilded stroke: a polished champagne band (metallic gradient + soft halo) — real
   weight, not a hairline. Gradient lives in the SVG <defs id="mvGold">. */
.mv-cycle .mv-ring { position: absolute; inset: 0; width: 100%; height: 100%;
  filter: drop-shadow(0 0 11px rgba(200,168,98,.40)) drop-shadow(0 0 2px rgba(224,201,152,.5)); }
.mv-cycle .mv-ring .mv-svg { width: 100%; height: 100%; display: block; overflow: visible; }
.mv-cycle .mv-path { fill: none; stroke: url(#mvGold); stroke-width: 2.4; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 0; opacity: .62; }
/* the cycle in motion: a champagne light travels the figure-8 (CSS offset-path,
   same coords as .mv-path so it tracks the stroke; falls back to the centre dot) */
.mv-comet { fill: var(--gold-light); opacity: 0;
  offset-path: path("M100,48 C70,12 16,12 16,48 C16,84 70,84 100,48 C130,12 184,12 184,48 C184,84 130,84 100,48 Z");
  offset-rotate: 0deg; offset-distance: 0%;
  filter: drop-shadow(0 0 2px rgba(224,201,152,.95)) drop-shadow(0 0 6px rgba(200,168,98,.55)); }
.section-mv > .section-index, .section-mv > .mv-grid { position: relative; z-index: 1; }

.mv-grid { gap: clamp(2.5rem, 6vw, 5rem); margin: 0; max-width: var(--content); }
.mv-label { position: relative; padding-top: 1rem; margin: 0 0 1.1rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; }
.mv-label::before { content: ""; position: absolute; top: 0; left: 0; width: 40px; height: 1px; background: var(--gold); }
.mv-statement { color: var(--bone); margin: 0; font-family: var(--wp--preset--font-family--fraunces);
  font-weight: 400; font-size: clamp(1.2rem, 1.02rem + .7vw, 1.55rem); line-height: 1.36; letter-spacing: -.005em;
  text-shadow: 0 1px 10px rgba(12,11,10,.7); }
.bone-em { color: var(--bone); font-weight: 600; }
@media (max-width: 782px) {
  .mv-cycle { width: min(560px, 94vw); }
  .mv-cycle .mv-path { opacity: .5; stroke-width: 2.7; }
}

/* ---- approach (02): editorial copy + anonymous imagery ------------- */
.section-approach .approach-grid { gap: clamp(2rem,5vw,4.5rem); margin-top: 1rem; max-width: var(--wide); }
.approach-lead { color: var(--bone); font-family: var(--wp--preset--font-family--fraunces); font-weight: 400;
  font-size: clamp(1.2rem,1.02rem + .7vw,1.6rem); line-height: 1.42; letter-spacing: -.005em; margin: 0 0 2.25rem; max-width: 32ch; }
.principles { display: flex; flex-direction: column; gap: 1.4rem; }
.principle { position: relative; padding-left: 1.25rem; }
.principle::before { content: ""; position: absolute; left: 0; top: .22rem; bottom: .22rem; width: 1px; background: var(--gold); opacity: .5; }
.principle__title { margin: 0 0 .3rem; font-size: 1.0625rem; }
.principle__blurb { margin: 0; font-size: .9375rem; line-height: 1.55; }
.approach-figure { margin: 0; border: 1px solid var(--hairline); border-radius: 2px; overflow: hidden; position: relative; }
.approach-figure::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(200,168,98,.10); }
.approach-figure img { display: block; width: 100%; height: auto; }
@media (max-width: 781px) {
  .section-approach .approach-grid { gap: 2.25rem; }
  .approach-figure { max-width: 540px; margin-inline: auto; }
}

/* ---- why us pillars ------------------------------------------------ */
.ouro-section .pillars { display: grid; grid-template-columns: repeat(4,1fr); gap: 0; margin-top: 1rem; max-width: var(--wide); }
.pillars .wp-block-column { padding: 0 clamp(1rem,2vw,1.75rem); }
.pillars .wp-block-column:first-child { padding-left: 0; }
.pillars .wp-block-column + .wp-block-column { border-left: 1px solid var(--hairline); }
.pillar__num { margin: 0 0 .85rem; letter-spacing: .1em; font-variant-numeric: tabular-nums; }
.pillar__title { margin: 0 0 .6rem; font-size: 1.0625rem; }
.pillar__blurb { margin: 0; font-size: .9375rem; line-height: 1.55; }

/* pillar icons — Phosphor "light" glyphs (filled paths), recoloured champagne gold.
   Always-on static fills (no draw-on needed); they ride the column .reveal fade-in.
   Vector only, fixed 40×40 box → CLS 0. */
.pillar-icon { display: block; width: 40px; height: 40px; margin: 0 0 1.15rem; }
.pillar-icon .pi { width: 100%; height: 100%; display: block; overflow: visible; }
.pi-glyph { fill: var(--gold); opacity: .92; }
.pillar--keystone .pi-glyph { opacity: 1; }
@media (max-width: 900px) {
  .ouro-section .pillars { grid-template-columns: repeat(2,1fr); row-gap: 2.5rem; }
  .pillars .wp-block-column { padding: 0 clamp(1rem,3vw,2rem); }
  .pillars .wp-block-column:nth-child(odd) { border-left: 0; padding-left: 0; }
}
@media (max-width: 560px) {
  .ouro-section .pillars { grid-template-columns: 1fr; row-gap: 0; }
  .pillars .wp-block-column { padding: 0; border-left: 0; }
  .pillars .wp-block-column + .wp-block-column { border-left: 0; border-top: 1px solid var(--hairline); padding-top: 2rem; margin-top: 2rem; }
}

/* ---- services cards ------------------------------------------------ */
.ouro-section .svc-row { display: grid; grid-template-columns: repeat(2,1fr); gap: clamp(1rem,2vw,1.5rem); margin-top: 1rem; max-width: var(--wide); }
.svc-row .wp-block-column { display: flex; }
.svc-card { background: var(--onyx); border: 1px solid var(--hairline); border-radius: 2px;
  padding: clamp(1.75rem,1.5rem + 1vw,2.5rem); position: relative; width: 100%;
  transition: border-color .3s ease, transform .3s ease; }
.svc-card--wide { margin-top: clamp(1rem,2vw,1.5rem); max-width: var(--wide); }
.svc-card--flagship::before { content: ""; position: absolute; top: -1px; left: -1px; right: -1px; height: 2px;
  background: var(--gold); transform: scaleX(1); transform-origin: left; }
/* service icon — same Phosphor "light" gold glyph treatment as the Why pillars,
   so the two sections read as one icon family. Fixed 38×38 box → CLS 0. */
.svc-icon { display: block; width: 38px; height: 38px; margin: 0 0 1.25rem; }
.svc-icon .pi { width: 100%; height: 100%; display: block; overflow: visible; }
.svc-card--flagship .pi-glyph { opacity: 1; }
.svc-card__label { margin: 0 0 .85rem; letter-spacing: .22em; font-weight: 500; text-transform: uppercase; }
.svc-card__title { margin: 0 0 .75rem; font-size: 1.125rem; }
.svc-card__blurb { margin: 0; line-height: 1.6; }
.svc-card__caps { margin: 1.25rem 0 0; letter-spacing: .14em; line-height: 1.6; }
.svc-card--wide .svc-card__caps { color: var(--graphite); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .svc-card { transition: border-color .3s ease, transform .3s ease, box-shadow .3s ease; }
  .svc-card:hover { border-color: rgba(200,168,98,.45); transform: translateY(-3px);
    box-shadow: 0 20px 44px -30px rgba(200,168,98,.4); }
  .svc-card:hover .pi-glyph { opacity: 1; }
}
@media (max-width: 680px) { .ouro-section .svc-row { grid-template-columns: 1fr; } }
/* section supporting visual — a wide cinematic strip (Why coda, Services coda) */
.section-figure { margin: clamp(1.75rem,3vw,2.75rem) 0 0; max-width: var(--wide); height: clamp(240px,32vh,360px);
  border: 1px solid var(--hairline); border-radius: 2px; overflow: hidden; }
.section-figure img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 45%; }
.section-figure--stilllife img { object-position: center 58%; }

/* ---- partners ------------------------------------------------------ */
.partners-line { color: var(--bone); max-width: 40ch; margin: 0 0 2.5rem; }
.partners-row { margin: 0 0 1.5rem; }
.partners-row--categories { text-transform: uppercase; letter-spacing: .18em; font-size: .8rem; color: var(--graphite); }
.partners-row--names { color: var(--titanium); letter-spacing: .04em; }
.partners-caption { margin: 0; }
.is-gated { display: none; }

/* abstract relationship network behind the copy — confidentiality-safe (no names, no
   logos, no map of real places). Masked to the right so it never crowds the text.
   Base = static faint mesh (no-JS / reduced-motion); twinkle + signal added below. CLS 0. */
.partners-constellation { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  -webkit-mask-image: radial-gradient(ellipse 64% 84% at 74% 46%, #000 26%, transparent 76%);
          mask-image: radial-gradient(ellipse 64% 84% at 74% 46%, #000 26%, transparent 76%); }
.partners-constellation svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.con-lines line { stroke: var(--gold); stroke-width: 1; opacity: .16; vector-effect: non-scaling-stroke; }
.con-node { fill: var(--gold); opacity: .42; }
.con-node--bright { fill: var(--gold-light); opacity: .6; }
.con-signal { fill: none; stroke: var(--gold-light); stroke-width: 1.6; vector-effect: non-scaling-stroke;
  stroke-linecap: round; stroke-dasharray: .12 .88; opacity: 0;
  filter: drop-shadow(0 0 4px rgba(224,201,152,.7)) drop-shadow(0 0 10px rgba(200,168,98,.4)); }
/* keep all partners copy above the network */
.section-partners > :not(.partners-constellation) { position: relative; z-index: 1; }

/* ---- contact ------------------------------------------------------- */
.section-contact { text-align: center; }
.section-contact .section-index { justify-content: center; }
.contact__line { color: var(--bone); margin: 0 auto 1.5rem; max-width: 34ch; }
.contact__person { margin: 0 auto 1.5rem; display: flex; flex-direction: column; gap: .2rem; align-items: center; }
.contact__person-name { color: var(--bone); font-family: var(--wp--preset--font-family--fraunces); font-weight: 600; font-size: 1.0625rem; letter-spacing: -.005em; }
.contact__person-role { color: var(--titanium); font-size: .78rem; text-transform: uppercase; letter-spacing: .2em; }
.cta--contact { margin: 0 0 1.25rem; font-size: clamp(1.25rem,1rem + 1.4vw,1.875rem); }
.cta--contact a { color: var(--bone); font-family: var(--wp--preset--font-family--fraunces); }
.contact__address { margin: 0 auto 3rem; }
.contact__mark { display: flex; justify-content: center; opacity: .85; }

/* ---- footer -------------------------------------------------------- */
.site-footer { border-top: 1px solid var(--hairline); padding-block: clamp(3rem,2rem + 3vw,4.5rem); padding-inline: clamp(1.25rem,5vw,4rem); }
.site-footer__inner { max-width: var(--wide); margin-inline: auto; }
.site-footer__row { gap: 1.25rem 2rem; margin-bottom: 1.25rem; }
.brand-lockup--footer { gap: .55rem; }
.brand-wordmark--footer { font-size: 1rem; color: var(--titanium); }
.brand-sub-inline { font-family: var(--wp--preset--font-family--inter-tight); font-size: .58rem; letter-spacing: .22em; color: var(--graphite); margin-left: .45rem; }
.footer-legal { margin: 0; }
.footer-disclaimer { margin: 0 0 1rem; max-width: 64ch; line-height: 1.6; }
.footer-top-link { margin: 0; }
.footer-top-link a { color: var(--titanium); text-decoration: none; transition: color .3s ease; }
.footer-top-link a:hover { color: var(--bone); }
/* Reserved single-hairline red option (OFF by default):
.footer-disclaimer { border-left: 1px solid #8E2F24; padding-left: 1rem; } */

/* =====================================================================
   IMAGERY — "Architectural Light" (AI-generated, self-hosted WebP).
   Backgrounds only: no layout impact (CLS 0), no JS dependency, no motion.
   Overlays/washes guarantee text legibility over the stone-and-light art.
   ===================================================================== */

/* ---- hero: stone + raking gold light behind a legibility gradient ---- */
.hero.wp-block-cover {
  background-image: url("../img/hero.webp");
  background-size: cover;
  background-position: 42% 45%;
  background-repeat: no-repeat;
}
/* rewrite the cover's flat dim into a crafted darkening: a dark central pocket
   for the lockup / headline / subhead, the stone revealed at the edges, a dark
   top for the sticky header, a muted right third (keeps the light reading as
   "light on stone", never "a room"), and a dark base to hand off to Mission. */
.hero .wp-block-cover__background {
  opacity: 1;
  background:
    radial-gradient(ellipse 82% 74% at 50% 48%, rgba(12,11,10,.80), rgba(12,11,10,.54) 52%, rgba(12,11,10,.14) 100%),
    linear-gradient(to bottom, rgba(12,11,10,.58) 0%, rgba(12,11,10,.22) 14%, rgba(12,11,10,.34) 40%, rgba(12,11,10,.50) 62%, rgba(12,11,10,.40) 72%, rgba(12,11,10,.92) 94%, rgba(12,11,10,1) 100%),
    linear-gradient(to right, rgba(12,11,10,0) 50%, rgba(12,11,10,.20) 78%, rgba(12,11,10,.46) 100%);
}
/* belt-and-braces legibility for the text sitting over the lit stone */
.hero__headline { text-shadow: 0 1px 24px rgba(12,11,10,.45); }
.hero__subhead { text-shadow: 0 1px 2px rgba(12,11,10,.55), 0 2px 18px rgba(12,11,10,.45); }
.cta--hero a { text-shadow: 0 1px 12px rgba(12,11,10,.55); }

/* ---- faint section atmospheres (washes under content) --------------
   Intent: full-image bookends (hero + contact) with a whisper-faint, calm
   middle (Why / Services stay near-clean so the dense copy reads). Masks fade
   fully to the page base so adjacent sections meet on identical black. */
.section-why::before,
.section-services::before,
.section-contact::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-position: center; background-size: cover; background-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 24%, #000 76%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 24%, #000 76%, transparent 100%);
}
.section-why::before      { background-image: url("../img/atmo-why.webp");      opacity: .10; }
.section-services::before { background-image: url("../img/atmo-services.webp"); opacity: .09; }
.section-contact::before  { background-image: url("../img/atmo-contact.webp");  opacity: .18; background-position: 50% 38%; }
/* contact wash: keep the gold bloom behind the centred contact block on phones */
@media (max-width: 680px) {
  .section-contact::before { background-position: 50% 30%; opacity: .16; }
}
/* keep all section content above the wash */
.section-why > *,
.section-services > *,
.section-contact > * { position: relative; z-index: 1; }

/* ---- full-width image band — a cinematic pause before Contact ------ */
.image-band { position: relative; width: 100%; max-width: 100%; height: clamp(300px,54vh,580px); overflow: hidden; }
.image-band__figure { margin: 0; height: 100%; }
.image-band__figure img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 46%; }
/* melt the band edges into the dark sections above/below */
.image-band::before, .image-band::after { content: ""; position: absolute; left: 0; right: 0; height: 110px; pointer-events: none; z-index: 1; }
.image-band::before { top: 0; background: linear-gradient(to bottom, var(--ob), transparent); }
.image-band::after { bottom: 0; background: linear-gradient(to top, var(--ob), transparent); }
@media (max-width: 680px) { .image-band { height: clamp(240px,42vh,360px); } }

/* =====================================================================
   MOTION — gated behind html.js + prefers-reduced-motion: no-preference.
   No-JS and reduced-motion both render everything in its final, drawn state.
   ===================================================================== */
@media (prefers-reduced-motion: no-preference) {

  /* reveal engine */
  html.js .reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
  html.js .reveal.is-visible { opacity: 1; transform: none; }
  /* failsafe: if motion.js never executes (404 / CSP / blocker / throw), the head-injected
     timer adds html.no-motion after 4s → reveal everything so no section is stranded hidden.
     motion.js clears that timer when it runs, so the normal scroll-reveal path is untouched. */
  html.no-motion .reveal { opacity: 1; transform: none; }

  /* HERO entrance is CSS-load-driven (NOT the footer-deferred reveal observer)
     so the above-the-fold text never waits on JS; the headline — the LCP element —
     stays fully opaque and only slides, so it paints with the first frame. */
  html.js .hero .reveal { animation: ouro-rise .8s var(--ease) both; }
  html.js .hero .wp-block-cover__inner-container > .reveal:nth-child(1) { animation-delay: .05s; }
  html.js .hero .wp-block-cover__inner-container > .reveal:nth-child(2) { animation-delay: .15s; }
  html.js .hero .wp-block-cover__inner-container > .reveal:nth-child(3) { animation-delay: .25s; }
  html.js .hero .wp-block-cover__inner-container > .reveal:nth-child(4) { animation-delay: .35s; }
  html.js .hero .wp-block-cover__inner-container > .reveal:nth-child(5) { animation-delay: .45s; }
  html.js .hero .hero__headline.reveal { opacity: 1; animation-name: ouro-slide; }
  html.js .mv-col.reveal:nth-child(2) { transition-delay: .12s; }
  html.js .pillars .pillar.reveal:nth-child(2) { transition-delay: .09s; }
  html.js .pillars .pillar.reveal:nth-child(3) { transition-delay: .18s; }
  html.js .pillars .pillar.reveal:nth-child(4) { transition-delay: .27s; }
  html.js .svc-row .wp-block-column:nth-child(2) .svc-card.reveal { transition-delay: .1s; }

  /* drawing section-header hairline */
  html.js .section-index::after { transform: scaleX(0); transition: transform .6s var(--ease) .15s; }
  html.js .section-index.is-visible::after { transform: scaleX(1); }
  html.js .section-index--center::after { transform: translateX(-50%) scaleX(0); }
  html.js .section-index--center.is-visible::after { transform: translateX(-50%) scaleX(1); }

  /* flagship card gold top rule draws */
  html.js .svc-card--flagship::before { transform: scaleX(0); transition: transform .6s var(--ease) .2s; }
  html.js .svc-card--flagship.is-visible::before,
  html.js .svc-row .wp-block-column:has(.svc-card--flagship.is-visible)::before { transform: scaleX(1); }
  html.js .svc-card--flagship.reveal.is-visible::before { transform: scaleX(1); }

  /* signature beat 1 — hero mark settles in (filled gold glyph: subtle scale + fade, CLS 0) */
  html.js .hero .ouro-mark { animation: ouro-mark-rise 1s var(--ease) .2s both; }

  /* signature beat 2 — contact reprise settles when the mark enters, then rests */
  html.js .contact__mark .ouro-mark { opacity: 0; transform: scale(.92); }
  html.js .contact__mark.is-visible .ouro-mark { animation: ouro-mark-rise 1s var(--ease) forwards; }

  /* mission cycle: the gilded infinity frames Mission & Vision, drawing the whole
     figure-8 as one stroke as it enters. mv-draw animates dashoffset ONLY so the
     metallic gradient stroke survives the draw; then the comet travels the loop. */
  html.js .mv-cycle .mv-path { stroke-dashoffset: 1; }
  html.js .mv-cycle.is-visible .mv-path { animation: mv-draw 1.9s var(--ease) forwards; }
  html.js .mv-comet { opacity: 0; }
  html.js .mv-cycle.is-visible .mv-comet { opacity: 1; animation: mv-comet-travel 18s linear 1.7s infinite; }
}

@keyframes ouro-mark-rise { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
@keyframes ouro-rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes ouro-slide { from { transform: translateY(16px); } to { transform: none; } }
@keyframes mv-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes mv-comet-travel { from { offset-distance: 0%; } to { offset-distance: 100%; } }

/* =====================================================================
   MOTION (Wave 2.8) — pillar icons + partners constellation.
   Gated behind html.js + prefers-reduced-motion: no-preference. The base
   states above are the fully-drawn / static fallbacks for no-JS + reduced
   motion. All motion is opacity / transform / dashoffset only → CLS 0.
   ===================================================================== */
@media (prefers-reduced-motion: no-preference) {

  /* partners constellation: nodes twinkle out of phase; one champagne signal crosses the mesh */
  html.js .partners-constellation.is-visible .con-node { animation: con-twinkle 5.5s ease-in-out infinite; }
  html.js .partners-constellation.is-visible .con-node:nth-child(2n) { animation-duration: 6.6s; animation-delay: -2s; }
  html.js .partners-constellation.is-visible .con-node:nth-child(3n) { animation-delay: -3.4s; }
  html.js .partners-constellation.is-visible .con-node:nth-child(4n) { animation-duration: 7.2s; animation-delay: -1.1s; }
  html.js .partners-constellation.is-visible .con-node--bright { animation-name: con-twinkle-bright; } /* keep accent nodes brighter through the loop */
  html.js .partners-constellation.is-visible .con-signal { opacity: 1; animation: con-signal-travel 7s linear 1s infinite; }
}

@keyframes con-twinkle { 0%,100% { opacity: .22; } 50% { opacity: .52; } }
@keyframes con-twinkle-bright { 0%,100% { opacity: .42; } 50% { opacity: .85; } }
@keyframes con-signal-travel { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* =====================================================================
   FAILSAFE COMPLETION — if motion.js is enqueued but never runs (404 / CSP /
   blocker / throw), the head timer adds html.no-motion after 4s. The base rule
   (html.no-motion .reveal) un-hides text; these additionally restore the
   signature line-graphics to their final drawn/static state so the Mission
   ring, pillar icons, contact mark, section hairlines and the flagship rule
   can never be stranded invisible. Final states only → CLS 0.
   ===================================================================== */
@media (prefers-reduced-motion: no-preference) {
  html.no-motion .section-index::after { transform: scaleX(1); }
  html.no-motion .section-index--center::after { transform: translateX(-50%) scaleX(1); }
  html.no-motion .svc-card--flagship::before { transform: scaleX(1); }
  html.no-motion .mv-cycle .mv-path { stroke-dashoffset: 0; animation: none; }
  html.no-motion .contact__mark .ouro-mark { opacity: 1; transform: none; animation: none; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }