/* ══════════════════════════════════════════════════════════
   FONTS
   ══════════════════════════════════════════════════════════ */
/* ABC Arizona Plus (Superfamily) variable font: axes are serif (SRFF), width
   (wdth), weight (wght) and slant (slnt). Used for long-form body copy (single
   article, blog panel, property panel description) at serif 70 / width 94 /
   weight 320. Weight and width are driven by font-weight / font-stretch so bold
   text still works; the serif axis is set per selector via font-variation-settings.
   Headlines stay on the 'ABC Arizona' Light display cut above. */
/* Plus carries a slant axis, not a true italic, so map its italic to the
   dedicated Arizona Light Italic cut. Keeps real italics for pull quotes and
   emphasis while upright text rides the Plus variable. */
/* Serif axis applied site-wide. Non-Arizona fonts have no SRFF axis and ignore
   this, so it is inert for the sans UI and only shapes ABC Arizona Plus text. */
body{font-variation-settings:'SRFF' 70}

/* ══════════════════════════════════════════════════════════
   DESIGN TOKENS
   ══════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════
   CROSS-DOCUMENT VIEW TRANSITIONS — progressive enhancement.
   Chrome + Safari animate page-to-page navigation with a soft
   fade/rise; Firefox ignores the at-rule and navigates normally.
   ══════════════════════════════════════════════════════════ */
@view-transition { navigation: auto; }
@keyframes brg-vt-in  { from { opacity:0; } } /* crossfade only — no rise, so the fixed nav/logo stays put on load */
@keyframes brg-vt-out { to   { opacity:0; } }
/* Weighted crossfade. Safe at any duration: the pagereveal gate in <head>
   holds the hero entrance text (html.brg-vt-live) until the fade finishes,
   so the text always starts from rest after the transition — never
   mid-handoff. On slow loads the browser holds the old page and skips the
   fade entirely after its internal (~4s) cap, falling back to a plain load. */
::view-transition-old(root) { animation: brg-vt-out .3s ease both; }
::view-transition-new(root) { animation: brg-vt-in  .35s ease-out both; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}
/* Hero entrance text waits for the fade (class set by the pagereveal gate) */
html.brg-vt-live .he1, html.brg-vt-live .he2, html.brg-vt-live .he3,
html.brg-vt-live .he4, html.brg-vt-live .he5 { animation-play-state: paused; }

/* ══════════════════════════════════════════════════════════
   SHARED MOTION UTILITIES
   .reveal-img  — curtain reveal: container clips open on scroll.
                  Clip only (no img transform) so it composes with
                  the parallax that several pages run on .pxw img.
   .hair-reveal — hairline rules draw in from the left.
   Both are driven by the same IntersectionObserver as .reveal.
   ══════════════════════════════════════════════════════════ */
.reveal-img { clip-path: inset(0 0 96% 0); transition: clip-path 1.1s cubic-bezier(.16,1,.3,1); }
.reveal-img.visible { clip-path: inset(0 0 0 0); }
.hair-reveal { transform: scaleX(0); transform-origin: left center; transition: transform 1.2s cubic-bezier(.16,1,.3,1); }
.hair-reveal.visible { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .reveal-img { clip-path: none !important; transition: none !important; }
  .hair-reveal { transform: none !important; transition: none !important; }
}

/* ══ EDGE-TO-EDGE (viewport-fit=cover) ══
   The layout viewport now extends under the iPhone status bar and home
   indicator, so the menu, nav glass and hero media render truly
   edge-to-edge. Fixed chrome pads itself with the safe-area insets;
   env() is 0 on every other device, so nothing changes elsewhere. */
.nav { padding-top: env(safe-area-inset-top, 0px); }
.brg-mob-wrap { padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
.wa-float { margin-bottom: env(safe-area-inset-bottom, 0px); }

:root{
  --navy:#1B2A4A;--navy-deep:#0F1A2E;--navy-light:#243656;
  --gold:#B8965A;--gold-light:#D4B87A;--gold-pale:#E8D5B0;
  --cream:#F9F6F1;--cream-dark:#EDE8DF;--white:#FFFFFF;
  --text-dark:#1B2A4A;--text-body:#4A5568;--text-muted:#7A8599;
  --text-light:rgba(255,255,255,0.65);
  --serif:'ABC Arizona Plus','ABC Arizona',Georgia,serif;
  --sans:'Neue Montreal',-apple-system,'Helvetica Neue',sans-serif;
  --ease:cubic-bezier(0.16,1,0.3,1);
  --ease-q:cubic-bezier(0.25,1,0.5,1)
}


/* ══════════════════════════════════════════════════════════
   RESET & BASE
   ══════════════════════════════════════════════════════════ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{font-size:16px;-webkit-text-size-adjust:100%}
/* color stays on --text-dark (navy #1B2A4A), NOT --ink (#1D1D1B): they are
   different colours, so swapping it would quietly restyle body copy in light
   mode. --text-dark is remapped for dark in theme-mode.php, so this works in
   both themes while leaving light mode byte-identical. Only the background
   moves to --surface, because --white is deliberately never remapped. */
body{font-family:var(--sans);font-weight:400;color:var(--text-dark);background:var(--surface);overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

/* ══════════════════════════════════════════════════════════
   SCROLL REVEALS
   ══════════════════════════════════════════════════════════ */
.reveal{opacity:0;transition:opacity 1s var(--ease)}
.reveal.visible{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce) {
  .reveal, .s-line {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}
.s-line{opacity:0;transform:scaleX(0);transform-origin:left;transition:opacity .6s var(--ease),transform .8s var(--ease)}
.s-line.visible{opacity:1;transform:scaleX(1)}

/* ══════════════════════════════════════════════════════════
   SECTION HEADERS (shared across templates)
   ══════════════════════════════════════════════════════════ */
.section-eyebrow{
  display:inline-flex;align-items:center;gap:12px;
  font-size:.65rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);margin-bottom:20px
}
.section-eyebrow::before{
  content:'';display:block;width:28px;height:1px;background:var(--gold)
}
.section-title{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(2rem,4vw,3.2rem);line-height:1.15;letter-spacing:-.01em;
  color:var(--navy)
}
.section-title em{font-style:italic;color:var(--gold)}
.section-body{
  font-size:1rem;line-height:1.75;color:var(--text-body);
  max-width:560px
}

/* ══════════════════════════════════════════════════════════
   GLOBAL BUTTONS
   ══════════════════════════════════════════════════════════ */
.btn-od{
  display:inline-block;
  font-size:.68rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--navy);border:1px solid var(--navy);padding:14px 32px;
  background:transparent;transform:scale(1);
  transition:background .9s var(--ease),color .9s var(--ease),
             border-color .9s var(--ease),
             transform .7s cubic-bezier(0.34,1.65,0.64,1);
  will-change:transform
}
.btn-od:hover{background:var(--navy);color:var(--white);transform:scale(1.03)}

.btn-gf{
  display:inline-block;
  font-size:.68rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);border:1px solid var(--gold);padding:14px 32px;
  background:transparent;transform:scale(1);
  transition:background .9s var(--ease),color .9s var(--ease),
             border-color .9s var(--ease),
             transform .7s cubic-bezier(0.34,1.65,0.64,1);
  will-change:transform
}
.btn-gf:hover{background:var(--gold);color:var(--navy-deep);transform:scale(1.02)}

/* UNIFIED BUTTON SYSTEM. Two solid styles, sit alongside legacy hooks (.btn-od/.btn-gf). Do not delete legacy classes. */
.btn-primary,.btn-secondary{
  display:inline-block;border:none;
  padding:18px 36px;
  font-family:var(--sans);font-weight:500;font-size:.72rem;
  letter-spacing:.2em;text-transform:uppercase;text-decoration:none;cursor:pointer;
  transform:scale(1);
  transition:background .9s var(--ease),color .9s var(--ease),
             transform .7s cubic-bezier(0.34,1.65,0.64,1);
  will-change:transform
}
.btn-primary{background:var(--gold);color:var(--white)}
.btn-primary:hover{background:var(--gold-light);transform:scale(1.03)}
.btn-secondary{background:var(--navy);color:var(--white)}
.btn-secondary:hover{background:var(--navy-light);transform:scale(1.03)}
/* Letter-spacing spread: Chrome/Firefox only. Safari (matches -webkit-hyphens:none) skips it to avoid text-reflow jank; scale carries the expand feel there. */
@supports not (-webkit-hyphens:none){
  .btn-primary,.btn-secondary{transition:background .9s var(--ease),color .9s var(--ease),letter-spacing .9s cubic-bezier(0.34,1.45,0.64,1),transform .7s cubic-bezier(0.34,1.65,0.64,1)}
  .btn-primary:hover,.btn-secondary:hover{letter-spacing:.22em}
}
@media(min-width:768px){.btn-primary,.btn-secondary{font-size:.8rem;padding:20px 44px}}

.btn-wt{
  display:inline-block;
  background:#FFFFFF;
  color:#1B2A4A;
  border:none;
  padding:18px 36px;
  font-family:var(--sans);
  font-weight:500;
  font-size:.72rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  text-decoration:none;
  cursor:pointer;
  transition:background .9s var(--ease),color .9s var(--ease),
             transform .7s cubic-bezier(0.34,1.65,0.64,1);
  will-change:transform
}
.btn-wt:hover{background:#FFFFFF;letter-spacing:.22em;transform:scale(1.03)}
/* Legacy buttons letter-spacing spread: Chrome/Firefox only, skipped on Safari to avoid reflow jank. */
@supports not (-webkit-hyphens:none){
  .btn-od,.btn-gf,.btn-wt{transition:background .9s var(--ease),color .9s var(--ease),border-color .9s var(--ease),letter-spacing .9s cubic-bezier(0.34,1.45,0.64,1),transform .7s cubic-bezier(0.34,1.65,0.64,1)}
  .btn-od:hover,.btn-gf:hover,.btn-wt:hover{letter-spacing:.22em}
}

/* ══════════════════════════════════════════════════════════
   NAV — ALWAYS DARK GLASS
   ──────────────────────────────────────────────────────────
   No conditional logic. Dark translucent bar on every page.
   Scroll behaviour: JS adds .brg-scrolled to <nav>.
   CSS transitions .nav-inner height — entire bar compresses.
   ══════════════════════════════════════════════════════════ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:#fff;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  transition:background .45s ease,
             backdrop-filter .45s ease,
             -webkit-backdrop-filter .45s ease
}
.nav.brg-scrolled{
  background:linear-gradient(0deg,transparent 15%,rgba(0,0,0,.25)),
             hsla(0,0%,8%,.3);
  box-shadow:none;
  -webkit-backdrop-filter:blur(20px);
  backdrop-filter:blur(20px)
}

/* ── Inner container — height IS the bar ── */
.nav-inner{
  position:relative;
  display:flex;
  align-items:center;
  height:97px;
  padding:0 24px;
  transition:height .5s var(--ease)
}
@media(min-width:768px){
  .nav-inner{height:120px;padding:0 32px}
}

/* Scrolled: bar compresses to the compact height (matches homepage) */
.nav.brg-scrolled .nav-inner{height:64px}
@media(min-width:768px){
  .nav.brg-scrolled .nav-inner{height:72px}
}

/* ── Left zone ── */
.nav-left{
  display:flex;
  gap:28px;
  align-items:center;
  flex:1;
  justify-content:flex-start
}

/* ── Center zone: logo ── */
.nav-logo{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  line-height:0;
  z-index:1
}
.nav-logo svg{
  height:38px;width:auto;display:block;
  color:#1d1d1b;
  transition:height .5s var(--ease),color .6s ease
}
@media(min-width:768px){
  .nav-logo svg{height:58px}
}

/* Black logo on the white top nav; white logo on the scrolled dark glass.
   One inline SVG recoloured through currentColor for a smooth colour fade. */

/* Scrolled: fade logo to white + shrink to compact size (matches homepage) */
.nav.brg-scrolled .nav-logo svg{color:#fff;height:22px}
@media(min-width:768px){
  .nav.brg-scrolled .nav-logo svg{height:28px}
}

/* ── Right zone ── */
.nav-right{
  display:flex;
  gap:20px;
  align-items:center;
  flex:1;
  justify-content:flex-end
}

/* ══════════════════════════════════════════════════════════
   NAV LINKS — navy on white bg, white on glass
   ══════════════════════════════════════════════════════════ */
.nav-link{
  position:relative;
  font-size:.72rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:#1d1d1b;opacity:.7;padding:4px 0;
  transition:opacity .4s var(--ease-q),color .4s var(--ease-q)
}
@media(min-width:768px){.nav-link{font-size:.8rem}}
.nav-link::after{
  content:'';position:absolute;bottom:-2px;left:0;width:100%;height:1px;
  background:#1d1d1b;transform:scaleX(0);transform-origin:right;
  transition:transform .6s var(--ease),background .45s ease
}
/* Scrolled: underline switches to white for dark glass nav */
.nav.brg-scrolled .nav-link::after{background:#fff}
.nav-link:hover,.nav-link.active{opacity:1;color:#1d1d1b}
.nav-link:hover::after,.nav-link.active::after{transform:scaleX(1);transform-origin:left}
.nav.brg-scrolled .nav-link{color:rgba(255,255,255,.75);opacity:1}
.nav.brg-scrolled .nav-link:hover,.nav.brg-scrolled .nav-link.active{color:#fff;opacity:1}

/* ══════════════════════════════════════════════════════════
   NAV CTA — plain text with underline on hover
   Dark on white, white on glass.
   ══════════════════════════════════════════════════════════ */
.nav-cta-btn{
  position:relative;
  font-size:.72rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:#1d1d1b;opacity:.7;
  background:transparent;border:none;padding:4px 0;
  transition:opacity .4s var(--ease-q),color .4s var(--ease-q)
}
.nav-cta-btn::after{
  content:'';position:absolute;bottom:-2px;left:0;width:100%;height:1px;
  background:#1d1d1b;transform:scaleX(0);transform-origin:right;
  transition:transform .6s var(--ease),background .45s ease
}
/* Scrolled: underline switches to white for dark glass nav */
.nav.brg-scrolled .nav-cta-btn::after{background:#fff}
@media(min-width:768px){.nav-cta-btn{font-size:.8rem}}
.nav-cta-btn:hover{opacity:1;color:#1d1d1b}
.nav-cta-btn:hover::after{transform:scaleX(1);transform-origin:left}
.nav.brg-scrolled .nav-cta-btn{color:rgba(255,255,255,.75);opacity:1}
.nav.brg-scrolled .nav-cta-btn:hover{color:#fff;opacity:1}
.nav.brg-scrolled .nav-cta-btn:hover::after{transform:scaleX(1);transform-origin:left}

/* ══════════════════════════════════════════════════════════
   LANGUAGE SWITCHER
   Matches nav-link/CTA text style.
   Colors transition white↔dark with the bar.
   Chevron rotates when open.
   ══════════════════════════════════════════════════════════ */
.lang-select{position:relative}
.lang-current{
  -webkit-appearance:none;appearance:none;
  display:inline-flex;align-items:center;gap:5px;
  font-family:var(--sans);
  font-size:.72rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:#1d1d1b;opacity:.7;
  background:none;border:none;outline:none;
  padding:4px 0;margin:0;
  transition:opacity .4s var(--ease-q),color .4s var(--ease-q);cursor:pointer
}
@media(min-width:768px){.lang-current{font-size:.8rem}}
.lang-current:hover,.lang-current:focus{opacity:1;outline:none}
.lang-chevron{
  display:inline-block;width:8px;height:8px;flex-shrink:0;
  transition:transform .35s var(--ease-q)
}
.lang-select.open .lang-chevron,.lang-select:hover .lang-chevron{transform:rotate(180deg)}
/* Scrolled: white */
.nav.brg-scrolled .lang-current{color:rgba(255,255,255,.75);opacity:1}
.nav.brg-scrolled .lang-current:hover{color:#fff}
/* Non-scrolled: ink, never orange */
.lang-current:hover,.lang-current:focus{opacity:1;color:#1d1d1b;outline:none}

.lang-dropdown{
  position:absolute;top:calc(100% + 12px);right:-12px;min-width:140px;
  background:rgba(20,20,20,0.96);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 8px 32px rgba(0,0,0,.35);
  padding:10px 0;
  opacity:0;pointer-events:none;
  transform:translateY(-6px);
  transition:opacity .35s var(--ease-q),transform .35s var(--ease-q)
}
.lang-dropdown::before{content:'';position:absolute;top:-14px;left:0;right:0;height:20px}
.lang-select:hover .lang-dropdown,
.lang-select.open  .lang-dropdown{opacity:1;pointer-events:auto;transform:translateY(0)}
.lang-option{
  display:block;padding:9px 20px;
  font-size:.68rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.6);opacity:1;
  transition:color .25s,padding-left .3s var(--ease-q)
}
.lang-option:hover{padding-left:24px;color:#fff}


/* ══════════════════════════════════════════════════════════
   MENU TRIGGER — two bars + word, all viewports.
   Ink on the white bar, white on the scrolled dark glass.
   Matches the homepage trigger exactly.
   ══════════════════════════════════════════════════════════ */
.nav-hamburger{
  display:flex;align-items:center;gap:11px;
  width:auto;height:auto;padding:4px 0;
  background:none;border:none;cursor:pointer;
  color:rgba(29,29,27,.78);
  font-family:var(--sans);font-size:.72rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;
  transition:color .4s var(--ease-q)
}
@media(min-width:768px){.nav-hamburger{font-size:.8rem}}
.nav-hamburger:hover{color:#1d1d1b}
.nav.brg-scrolled .nav-hamburger{color:rgba(255,255,255,.78)}
.nav.brg-scrolled .nav-hamburger:hover{color:#fff}
.nav-hamburger .hb-bars{width:28px;height:10px;position:relative;flex:none}
.nav-hamburger .hb-bars span{
  display:block;position:absolute;height:1px;background:currentColor;
  transition:left .4s ease,width .4s ease
}
.nav-hamburger .hb-bars span:nth-child(1){top:1px;left:0;width:28px}
.nav-hamburger .hb-bars span:nth-child(2){bottom:1px;left:8px;width:20px}
.nav-hamburger:hover .hb-bars span:nth-child(1){left:8px;width:20px}
.nav-hamburger:hover .hb-bars span:nth-child(2){left:0;width:28px}

/* ══════════════════════════════════════════════════════════
   MOBILE MENU — full-screen, RR-style
   Entire viewport fills with blurred overlay.
   Nav links are right-aligned, stagger in from the right.
   ══════════════════════════════════════════════════════════ */

/* Outer wrapper = the whole screen */
.brg-mob-wrap{
  position:fixed;inset:0;z-index:200;
  display:flex;flex-direction:column;
  background:rgba(12,12,12,.72);
  -webkit-backdrop-filter:blur(60px) saturate(1.1);
  backdrop-filter:blur(60px) saturate(1.1);
  opacity:0;
  pointer-events:none;
  visibility:hidden;
  transition:opacity .5s ease
}
.brg-mob-wrap.open{
  opacity:1;
  pointer-events:auto;
  visibility:visible
}

/* Top bar — mirrors the compressed nav bar height */
.brg-mob-head{
  display:flex;align-items:center;justify-content:flex-start;
  height:64px;padding:0 28px;flex-shrink:0
}
@media(min-width:768px){.brg-mob-head{height:72px}}

/* Logo in head (white version, always) */
.brg-mob-logo img{height:36px;width:auto;opacity:.9}

/* Close button */
.brg-mob-close{
  display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;
  color:#fff;background:none;border:none;cursor:pointer;
  opacity:.7;transition:opacity .3s
}
.brg-mob-close:hover{opacity:1}

/* Nav links — fill remaining height, links right-aligned and vertically centered */
.brg-mob-nav{
  flex:1;
  display:flex;flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  padding:0 40px;
  gap:4px
}

/* Each link slides in from right with opacity, staggered */
.m-link{
  font-size:clamp(2.8rem,6.4vw,4.8rem);
  font-family:var(--serif);font-style:italic;font-weight:300;
  color:rgba(255,255,255,.8);
  text-align:left;
  padding:10px 0;
  line-height:1.18;
  transform:translateX(-48px);
  opacity:0;
  transition:transform .65s var(--ease),
             opacity .55s ease,
             color .3s ease
}
.brg-mob-wrap.open .m-link{transform:none;opacity:1}
.m-link:nth-child(1){transition-delay:0s}
.m-link:nth-child(2){transition-delay:.08s}
.m-link:nth-child(3){transition-delay:.16s}
.m-link:nth-child(4){transition-delay:.24s}
.m-link:hover{color:#fff}

/* Footer — CTA + lang switcher, right-aligned, slides up on open */
.brg-mob-footer{
  display:flex;flex-direction:column;align-items:flex-start;
  padding:28px 40px 52px;gap:18px;
  transform:translateY(14px);
  opacity:0;
  transition:opacity .5s ease .28s,transform .5s var(--ease) .28s
}
.brg-mob-wrap.open .brg-mob-footer{
  opacity:1;transform:none
}

/* CTA link in footer */
.m-cta{
  font-size:.72rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.65);
  transition:color .3s
}
.m-cta:hover{color:#fff}

/* Language row in footer */
.brg-mob-langs{
  display:flex;gap:20px;align-items:center
}
.m-lang{
  font-size:.68rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.35);transition:color .3s
}
.m-lang:hover{color:rgba(255,255,255,.8)}
.m-lang-active{color:var(--gold)}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════ */

/* Mobile: hide right-zone text items; Menu trigger stays */
@media(max-width:900px){
  .nav-right .nav-link{display:none}
  .nav-cta-btn{display:none}
  .lang-select{display:none}
}

/* Hide nav logo when mobile menu is open — via body class set by JS */
@media(max-width:900px){
  body.brg-menu-open .nav-logo{
    opacity:0;
    pointer-events:none;
    transition:opacity .25s ease
  }
}

/* ══ BRG DARK THEME — generated, additive; see header.php tokens ══ */

/* ──────────────────────────────────────────────────────────────────────────
   Every rule below is ADDITIVE and scoped to :where(:root[data-theme="dark"]).
   Nothing above this marker was modified, so light mode renders exactly as it
   did before dark mode existed.

   :where() contributes ZERO specificity on purpose. These rules therefore tie
   with the light-mode rules they shadow and win only on source order — which
   means a page template loading after header.php can still override them (that
   is what keeps the photo-hero nav white and transparent).
   ────────────────────────────────────────────────────────────────────────── */
:where(:root[data-theme="dark"]) .section-title{color:var(--ink)}
:where(:root[data-theme="dark"]) .btn-od{color:var(--ink);border:1px solid var(--ink)}
:where(:root[data-theme="dark"]) .btn-gf:hover{color:var(--on-accent)}
:where(:root[data-theme="dark"]) .btn-wt{background:var(--surface);color:var(--ink)}
:where(:root[data-theme="dark"]) .btn-wt:hover{background:var(--surface)}
:where(:root[data-theme="dark"]) .nav{background:var(--surface)}
:where(:root[data-theme="dark"]) .nav-logo svg{color:var(--ink)}
:where(:root[data-theme="dark"]) .nav-link{color:var(--ink)}
:where(:root[data-theme="dark"]) .nav-link:hover,:where(:root[data-theme="dark"]) .nav-link.active{color:var(--ink)}
:where(:root[data-theme="dark"]) .nav-link::after,:where(:root[data-theme="dark"]) .nav-cta-btn::after{background:var(--ink)}
:where(:root[data-theme="dark"]) .nav-cta-btn{color:var(--ink)}
:where(:root[data-theme="dark"]) .nav-cta-btn:hover{color:var(--ink)}
:where(:root[data-theme="dark"]) .lang-current{color:var(--ink)}
:where(:root[data-theme="dark"]) .lang-current:hover,:where(:root[data-theme="dark"]) .lang-current:focus{color:var(--ink)}
:where(:root[data-theme="dark"]) .lang-dropdown{box-shadow:0 8px 32px rgba(0,0,0,0.59)}
:where(:root[data-theme="dark"]) .nav-hamburger{color:rgba(242,242,240,.78)}
:where(:root[data-theme="dark"]) .nav-hamburger:hover{color:var(--ink)}
/* ══ end BRG DARK THEME ══ */