/* ============================================================
   TEHIDY PARK — Cinematic Enhancement Layer (CSS)
   Restrained, premium motion for the Reverent-Traditionalist register.
   Pairs with tehidy-enhance.js. Progressive: markup works without it.
   All motion uses transform/opacity only. Honours reduced-motion.
   ============================================================ */

/* ---- 1. SCROLL REVEAL (richer than base; opt-in via data-reveal) ---- */
[data-reveal]{opacity:0;transform:translateY(34px);transition:opacity 1.1s cubic-bezier(.16,1,.3,1),transform 1.1s cubic-bezier(.16,1,.3,1)}
[data-reveal].in{opacity:1;transform:none}
[data-reveal="left"]{transform:translateX(-40px)}
[data-reveal="right"]{transform:translateX(40px)}
[data-reveal="scale"]{transform:scale(.94)}
[data-reveal].in{transform:none}
/* stagger children */
[data-reveal-group]>*{opacity:0;transform:translateY(30px);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}
[data-reveal-group].in>*{opacity:1;transform:none}
[data-reveal-group].in>*:nth-child(1){transition-delay:.00s}
[data-reveal-group].in>*:nth-child(2){transition-delay:.08s}
[data-reveal-group].in>*:nth-child(3){transition-delay:.16s}
[data-reveal-group].in>*:nth-child(4){transition-delay:.24s}
[data-reveal-group].in>*:nth-child(5){transition-delay:.32s}
[data-reveal-group].in>*:nth-child(6){transition-delay:.40s}

/* ---- 2. TEXT-MASK REVEAL (line rises from a clipped mask) ---- */
.tx-mask{display:inline-block}
.tx-mask .tx-line{display:block;overflow:hidden}
.tx-mask .tx-line>span{display:inline-block;transform:translateY(110%);transition:transform 1s cubic-bezier(.16,1,.3,1)}
.tx-mask.in .tx-line>span{transform:none}
.tx-mask.in .tx-line:nth-child(2)>span{transition-delay:.09s}
.tx-mask.in .tx-line:nth-child(3)>span{transition-delay:.18s}

/* ---- 3. ODOMETER / COUNT-UP STAT BLOCK ---- */
.stat-band{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(200,146,42,.18);border-block:1px solid rgba(200,146,42,.18)}
.stat{background:var(--forest,#1a2e14);padding:46px 24px;text-align:center}
.stat .num{font-family:var(--serif,Georgia,serif);font-size:52px;line-height:1;color:var(--gold,#c8922a);font-variant-numeric:tabular-nums}
.stat .num .suf{font-size:26px}
.stat .lab{font-size:9px;letter-spacing:3px;text-transform:uppercase;color:rgba(245,240,230,.72);margin-top:14px}
@media(max-width:760px){.stat-band{grid-template-columns:1fr 1fr}.stat .num{font-size:42px}}

/* ---- 4. SPOTLIGHT BORDER on cards (radial glow follows cursor) ---- */
.spotlight{position:relative;isolation:isolate}
.spotlight::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:radial-gradient(160px circle at var(--mx,50%) var(--my,50%),rgba(200,146,42,.55),transparent 60%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .35s;pointer-events:none;z-index:2}
.spotlight:hover::before{opacity:1}
.spotlight::after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),rgba(200,146,42,.07),transparent 55%);opacity:0;transition:opacity .35s;pointer-events:none;z-index:0}
.spotlight:hover::after{opacity:1}

/* ---- 5. SUBTLE 3D TILT (very restrained — max ~4deg) ---- */
.tilt{transition:transform .5s cubic-bezier(.16,1,.3,1);transform-style:preserve-3d;will-change:transform}

/* ---- 6. MAGNETIC (JS sets transform; smooth return) ---- */
.magnetic{transition:transform .45s cubic-bezier(.16,1,.3,1)}

/* ---- 7. HERO KEN-BURNS DRIFT (slow ambient scale, premium stillness) ---- */
.kenburns{animation:kb 24s ease-in-out infinite alternate}
@keyframes kb{from{transform:scale(1.04) translateY(0)}to{transform:scale(1.12) translateY(-1.5%)}}

/* ---- 8. GOLD RULE DRAW (extends the existing .line-draw idea) ---- */
.rule-draw{width:0;height:1px;background:linear-gradient(to right,var(--gold,#c8922a),transparent);transition:width 1.2s cubic-bezier(.76,0,.24,1) .15s}
.rule-draw.in{width:120px}
.rule-draw.center{margin-inline:auto;background:linear-gradient(to right,transparent,var(--gold,#c8922a),transparent)}
.rule-draw.center.in{width:80px}

/* ---- 9. IMAGE CLIP-WIPE (gold-edged reveal for figures) ---- */
.clip-wipe{clip-path:inset(0 100% 0 0);transition:clip-path 1.3s cubic-bezier(.76,0,.24,1)}
.clip-wipe.in{clip-path:inset(0 0 0 0)}

/* ---- 10. PARALLAX (JS-driven; just hints here) ---- */
[data-parallax]{will-change:transform}

/* ---- REDUCED MOTION: disable everything non-essential ---- */
@media(prefers-reduced-motion:reduce){
  [data-reveal],[data-reveal-group]>*,.tx-mask .tx-line>span,.clip-wipe{opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important}
  .rule-draw{width:120px!important;transition:none!important}
  .kenburns{animation:none!important}
  .tilt,.magnetic{transform:none!important}
  [data-parallax]{transform:none!important}
}

/* ============================================================
   ACCESSIBILITY LAYER (from WEB-DOSSIER HIGH items H4/H5/H6)
   Global — applies to every page that links this file.
   ============================================================ */

/* H5 — focus-visible in brand gold (replaces any outline:none) */
:focus:not(:focus-visible){outline:none}
:focus-visible{outline:3px solid var(--gold,#c8922a);outline-offset:3px;border-radius:1px}

/* H6 — skip link, visible only on keyboard focus */
.skip-link{position:absolute;left:-9999px;top:0;z-index:10000;background:var(--forest,#1a2e14);color:var(--cream,#f5f0e6);padding:14px 22px;font-size:11px;letter-spacing:2px;text-transform:uppercase;text-decoration:none}
.skip-link:focus{left:12px;top:12px}

/* H4 — global reduced-motion safety net (belt-and-braces) */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important
  }
  .kenburns{animation:none!important}
}

/* ============================================================
   NAV DROPDOWNS + DECLUTTER  (consistent across all pages)
   Scoped to #navbar so it overrides each page's inline nav CSS.
   ============================================================ */
#navbar .nav-links{align-items:center}
#navbar .nav-dd{position:relative;display:inline-block}
#navbar .dd-trigger,#navbar .nav-top{
  font-size:11px;letter-spacing:3px;text-transform:uppercase;
  color:rgba(255,255,255,.92);text-decoration:none;text-shadow:0 1px 6px rgba(0,0,0,.5);
  display:inline-flex;align-items:center;gap:7px;cursor:none;transition:color .3s}
#navbar .dd-trigger::after{content:"";width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.65;transition:transform .3s}
#navbar .nav-dd:hover .dd-trigger::after,#navbar .nav-dd:focus-within .dd-trigger::after,#navbar .nav-dd.open .dd-trigger::after{transform:rotate(225deg) translateY(0)}
#navbar .dd-trigger:hover,#navbar .nav-top:hover,#navbar .nav-dd:hover .dd-trigger{color:var(--gold,#c8922a)}
#navbar.scrolled .dd-trigger,#navbar.scrolled .nav-top{color:var(--mid,#5a5a5a);text-shadow:none}
#navbar.scrolled .dd-trigger:hover,#navbar.scrolled .nav-top:hover,#navbar.scrolled .nav-dd:hover .dd-trigger{color:var(--crimson,#7b1c1c)}
#navbar .nav-dd.active .dd-trigger,#navbar .nav-top.active{color:var(--gold,#c8922a)}
#navbar.scrolled .nav-dd.active .dd-trigger,#navbar.scrolled .nav-top.active{color:var(--crimson,#7b1c1c)}

/* dropdown panel */
#navbar .nav-dd-menu{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(10px);
  min-width:215px;background:rgba(18,31,13,.97);backdrop-filter:blur(14px);
  border:1px solid rgba(200,146,42,.2);padding:8px 0;opacity:0;visibility:hidden;
  transition:opacity .25s ease,transform .25s ease;z-index:130;box-shadow:0 22px 54px rgba(0,0,0,.34)}
#navbar .nav-dd-menu::before{content:"";position:absolute;top:-14px;left:0;right:0;height:14px}
#navbar .nav-dd:hover .nav-dd-menu,#navbar .nav-dd:focus-within .nav-dd-menu,#navbar .nav-dd.open .nav-dd-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
#navbar .nav-dd-menu a{display:block;padding:12px 26px;font-size:10px;letter-spacing:2.5px;text-transform:uppercase;
  color:rgba(245,240,230,.82);text-decoration:none;white-space:nowrap;text-align:center;text-shadow:none;transition:color .2s,background .2s}
#navbar .nav-dd-menu a:hover{color:var(--gold,#c8922a);background:rgba(200,146,42,.08)}

/* small utility link */
#navbar .nav-util a,#navbar .nav-util-inline{font-size:9px;letter-spacing:2px;text-transform:uppercase;
  color:rgba(255,255,255,.5);text-decoration:none;text-shadow:0 1px 6px rgba(0,0,0,.5);transition:color .3s}
#navbar.scrolled .nav-util a,#navbar.scrolled .nav-util-inline{color:var(--mid,#5a5a5a);text-shadow:none}
#navbar .nav-util a:hover,#navbar .nav-util-inline:hover{color:var(--gold,#c8922a)}

/* mobile: dropdowns become open accordions in the drawer */
@media(max-width:768px){
  #navbar .nav-links,#navbar .nav-dd{display:block;text-align:center}
  #navbar .nav-dd-menu{position:static;transform:none!important;opacity:1!important;visibility:visible!important;
    background:none;border:none;box-shadow:none;backdrop-filter:none;padding:2px 0 14px;min-width:0}
  #navbar .nav-dd-menu::before{display:none}
  #navbar .nav-dd-menu a{padding:9px 0;color:rgba(245,240,230,.7);white-space:normal}
  #navbar .dd-trigger::after{display:none}
  #navbar .dd-trigger,#navbar .nav-top{display:block;padding:14px 0;font-size:13px}
  #navbar .nav-util{margin-top:10px}
}

/* ============================================================
   HERO TEXT LEGIBILITY  (overrides per-page hero styles)
   ============================================================ */
.phero-overlay{background:linear-gradient(to bottom,rgba(8,18,6,.5) 0%,rgba(8,18,6,.42) 45%,rgba(8,18,6,.85) 100%)!important}
.phero-eyebrow{color:#e8cd92!important;opacity:1!important;text-shadow:0 2px 16px rgba(0,0,0,.75)}
.phero-title{text-shadow:0 4px 44px rgba(0,0,0,.6)!important}
.phero-sub{color:rgba(255,255,255,.94)!important;text-shadow:0 2px 14px rgba(0,0,0,.7)}
.phero-note{color:rgba(245,240,230,.9)!important;text-shadow:0 2px 12px rgba(0,0,0,.75)}
.hero-eyebrow{text-shadow:0 2px 16px rgba(0,0,0,.7)!important}
.hero-sub{text-shadow:0 2px 12px rgba(0,0,0,.6)!important}

/* ============================================================
   FOREST TEXTURE — static fallback for the known green blocks
   (JS in tehidy-enhance.js catches the rest by computed colour)
   ============================================================ */
.benefits, .recip, .quote-band, .find-us-text, .stat-band{
  background-image:
    repeating-linear-gradient(45deg,transparent 0,transparent 5px,rgba(255,255,255,.03) 5px,rgba(255,255,255,.03) 6px),
    repeating-linear-gradient(-45deg,transparent 0,transparent 5px,rgba(255,255,255,.03) 5px,rgba(255,255,255,.03) 6px);
}

/* ============================================================
   CINEMATIC MOMENTS  (text-mask hero reveal + scroll colour-shift)
   ============================================================ */

/* Hero text-mask: each line rises from behind a clip. Inner pages only
   (.phero-title); homepage .hero-title keeps its own word-split. */
.phero-title .thl{display:block;overflow:hidden}
.phero-title .thl>span{display:block;transform:translateY(108%);transition:transform .8s cubic-bezier(.22,1,.36,1)}
.phero-title.th-in .thl>span{transform:translateY(0)}
.phero-title.th-in .thl:nth-child(2)>span{transition-delay:.11s}
.phero-title.th-in .thl:nth-child(3)>span{transition-delay:.22s}

/* Scroll colour-shift: a very slow warm→cool drift of the page base,
   visible only in the gaps between full-bleed/photographic sections. */
body{transition:background-color 1.2s linear}

@media(prefers-reduced-motion:reduce){
  .phero-title .thl>span{transform:none!important;transition:none!important}
  body{transition:none!important}
}

/* ============================================================
   NAV V2 — 3-zone centred, hide-on-scroll-down / reveal-on-up,
   frosted opaque overlay on scroll. Scoped #navbar, !important
   to override each page's inline nav rules.
   ============================================================ */
#navbar{
  display:grid!important;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;
  transition:transform .5s cubic-bezier(.22,1,.36,1),background .45s ease,backdrop-filter .45s ease,padding .35s ease,box-shadow .4s ease!important;
}
#navbar .nav-zone{display:flex;align-items:center}
#navbar .nav-left{justify-self:start}
#navbar .nav-center{justify-self:center;gap:30px;flex-wrap:nowrap}
#navbar .nav-end{justify-self:end;gap:24px}
#navbar .nav-cta{white-space:nowrap}

/* hide on scroll-down */
#navbar.nav-hidden{transform:translateY(-108%)!important}

/* frosted opaque overlay once scrolled */
#navbar.scrolled{
  background:rgba(244,239,228,.93)!important;
  -webkit-backdrop-filter:blur(18px) saturate(1.08);backdrop-filter:blur(18px) saturate(1.08);
  box-shadow:0 10px 38px rgba(26,46,20,.13);border-bottom:1px solid rgba(200,146,42,.2);
  padding-top:14px!important;padding-bottom:14px!important;
}
#navbar.scrolled .nav-util-inline{color:var(--mid,#5a5a5a);text-shadow:none}
#navbar.scrolled .nav-util-inline:hover{color:var(--crimson,#7b1c1c)}
#navbar.scrolled .nav-cta{color:var(--crimson,#7b1c1c);border-bottom-color:rgba(123,28,28,.4);text-shadow:none}
.nav-util-inline{font-size:9px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.55);text-decoration:none;text-shadow:0 1px 6px rgba(0,0,0,.5);transition:color .3s}
.nav-util-inline:hover{color:var(--gold,#c8922a)}

/* mobile drawer */
@media(max-width:768px){
  #navbar{grid-template-columns:1fr auto!important;gap:0}
  #navbar .nav-center,#navbar .nav-end{display:none}
  #navbar .nav-burger{display:flex;justify-self:end}
  #navbar.open{position:fixed;inset:0;height:100dvh;grid-template-columns:1fr!important;
    grid-auto-rows:min-content;align-content:center;justify-items:center;gap:6px;
    background:rgba(18,31,13,.98);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
    overflow:auto;padding:96px 24px 48px;transform:none!important}
  #navbar.open .nav-left{justify-self:center}
  #navbar.open .nav-center,#navbar.open .nav-end{display:flex;flex-direction:column;align-items:center;gap:4px;justify-self:center}
  #navbar.open .nav-end{margin-top:18px;gap:18px}
  #navbar.open .nav-burger{position:fixed;top:20px;right:22px}
  #navbar.open .nav-burger span{background:var(--cream,#f5f0e6)!important}
  #navbar.open .dd-trigger,#navbar.open .nav-top,#navbar.open .nav-util-inline,#navbar.open .nav-cta{color:rgba(245,240,230,.9)!important;text-shadow:none!important}
}

/* ============================================================
   CAROUSEL  (.tcar)  — drag / swipe / arrows, scroll-snap
   Editorial, restrained. Works with markup:
   <div class="tcar"><button class="tcar-prev">…<div class="tcar-track">
     <div class="tcar-slide">…</div> … </div><button class="tcar-next">…
     <div class="tcar-dots"></div></div>
   ============================================================ */
.tcar{position:relative}
.tcar-track{display:flex;gap:26px;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;-webkit-overflow-scrolling:touch;padding:6px 2px 30px;scrollbar-width:none}
.tcar-track::-webkit-scrollbar{display:none}
.tcar-slide{scroll-snap-align:center;flex:0 0 auto}
.tcar-arrow{position:absolute;top:42%;transform:translateY(-50%);z-index:5;width:52px;height:52px;
  border:1px solid rgba(200,146,42,.5);background:rgba(245,240,230,.85);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border-radius:50%;cursor:none;display:flex;align-items:center;justify-content:center;transition:background .3s,border-color .3s,opacity .3s}
.tcar-arrow:hover{background:var(--gold,#c8922a);border-color:var(--gold,#c8922a)}
.tcar-arrow svg{width:16px;height:16px;stroke:var(--forest,#1a2e14);fill:none;stroke-width:1.5}
.tcar-arrow:hover svg{stroke:#fff}
.tcar-prev{left:-12px}.tcar-next{right:-12px}
.tcar-arrow[disabled]{opacity:.25;pointer-events:none}
.tcar-dots{display:flex;gap:9px;justify-content:center;margin-top:6px}
.tcar-dots button{width:7px;height:7px;border-radius:50%;border:none;background:rgba(26,46,20,.22);cursor:none;padding:0;transition:background .3s,width .3s}
.tcar-dots button.on{background:var(--gold,#c8922a);width:22px;border-radius:4px}
.tcar.on-dark .tcar-dots button{background:rgba(245,240,230,.25)}
.tcar.on-dark .tcar-dots button.on{background:var(--gold,#c8922a)}
.tcar.on-dark .tcar-arrow{background:rgba(18,31,13,.6);border-color:rgba(200,146,42,.45)}
.tcar.on-dark .tcar-arrow svg{stroke:var(--cream,#f5f0e6)}
@media(max-width:768px){.tcar-arrow{display:none}.tcar-track{gap:16px}}

/* ============================================================
   CURSOR REMOVED — use the normal system cursor everywhere.
   Overrides every page's inline `cursor:none` + hides dot/ring.
   ============================================================ */
html, body, a, button, summary, input, select, textarea, .btn-crimson-outline,
.card-link, .nav-cta, .dd-trigger, .tcar-arrow, .tcar-dots button, form button,
* { cursor: auto !important; }
a, button, summary, .nav-cta, .card-link, .dd-trigger, .tcar-arrow, label[for],
.tcar-dots button, [role="button"], [onclick],
.btn-primary, .btn-outline, .btn-crimson-outline, .btn-gold-ghost,
.text-link, .text-link-light, .arrowlink, .enter-link, .magnetic,
.nav-top, .nav-util-inline, .map-directions, .journal-card, .journal-all,
.idx-card, tr.row-enter, tr.row-enter *, details summary { cursor: pointer !important; }
input, textarea { cursor: text !important; }
select { cursor: pointer !important; }
#cursor-dot, #cursor-ring { display: none !important; opacity: 0 !important; visibility: hidden !important; }

/* ============================================================
   COOKIE CONSENT BANNER (PECR/GDPR gate for the Meta Pixel)
   Injected by tehidy-enhance.js only when no prior choice exists.
   On-brand: cream surface, ink text, crimson controls. Accept and
   Reject are equally prominent (reject as easy as accept).
   ============================================================ */
#tehidy-consent{
  position:fixed;left:0;right:0;bottom:0;z-index:1000;
  background:var(--cream,#f5f0e6);
  border-top:2px solid var(--crimson,#7b1c1c);
  box-shadow:0 -6px 30px rgba(26,46,20,.18);
  transform:translateY(100%);transition:transform .5s cubic-bezier(.16,1,.3,1);
}
#tehidy-consent.tc-show{transform:none}
.tc-inner{
  max-width:1200px;margin:0 auto;padding:20px 40px;
  display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;
}
.tc-text{
  font-family:var(--sans,'Helvetica Neue',Arial,sans-serif);
  font-size:14px;line-height:1.6;color:var(--ink,#1a1a1a);
  max-width:70ch;margin:0;
}
.tc-text a{color:var(--crimson,#7b1c1c);text-decoration:underline;text-underline-offset:2px}
.tc-actions{display:flex;gap:12px;flex-shrink:0}
.tc-btn{
  font-family:var(--sans,'Helvetica Neue',Arial,sans-serif);
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  padding:13px 30px;min-height:44px;cursor:pointer;
  border:1px solid var(--crimson,#7b1c1c);
  transition:background .3s,color .3s;
}
.tc-accept{background:var(--crimson,#7b1c1c);color:var(--cream,#f5f0e6)}
.tc-accept:hover{background:#640f0f}
.tc-reject{background:transparent;color:var(--crimson,#7b1c1c)}
.tc-reject:hover{background:var(--crimson,#7b1c1c);color:var(--cream,#f5f0e6)}
.tc-btn:focus-visible{outline:3px solid var(--crimson,#7b1c1c);outline-offset:3px}
@media(max-width:640px){
  .tc-inner{padding:18px 22px;gap:16px}
  .tc-actions{width:100%}
  .tc-btn{flex:1 1 0}
}
@media(prefers-reduced-motion:reduce){
  #tehidy-consent{transition:none}
}

/* ============================================================
   NAV CTA HIERARCHY + TRIGGER BREATHING ROOM  (2026-07-09)
   Fixes: (1) no clear primary in the nav — Enquire is promoted to a
   solid crimson button so it clearly outranks Members Login, which
   stays a small utility link beside it. (2) Top-level items had no
   padding, so hovering felt cramped — they now get room to breathe.
   Scoped #navbar + placed last so it wins over the NAV V2 rules above.
   ============================================================ */

/* Breathing room around the centre nav items (hover no longer feels cramped) */
#navbar .nav-center{gap:18px}
#navbar .dd-trigger,#navbar .nav-top{padding:10px 8px}

/* Enquire = the primary nav action. Overrides the gold underline-link style. */
#navbar .nav-cta{
  background:var(--crimson,#7b1c1c);color:var(--cream,#f5f0e6);
  border:1px solid var(--crimson,#7b1c1c);border-bottom:1px solid var(--crimson,#7b1c1c);
  padding:11px 26px;letter-spacing:3px;text-shadow:none;
  transition:background .3s,border-color .3s,color .3s;
}
#navbar .nav-cta:hover{background:#640f0f;border-color:#640f0f;color:var(--cream,#f5f0e6)}
#navbar.scrolled .nav-cta{
  background:var(--crimson,#7b1c1c);color:var(--cream,#f5f0e6);
  border-color:var(--crimson,#7b1c1c);border-bottom-color:var(--crimson,#7b1c1c);
}
#navbar.scrolled .nav-cta:hover{background:#640f0f;border-color:#640f0f;color:var(--cream,#f5f0e6)}

/* Members Login: reads as a peer of the top-level menu items (same size, weight
   and opacity), so it isn't a faint afterthought. It stays subordinate to the
   ENQUIRE button, which is the primary CTA. */
#navbar .nav-util-inline{font-size:11px;letter-spacing:3px;color:rgba(255,255,255,.9)}
#navbar.scrolled .nav-util-inline{color:var(--mid,#5a5a5a)}