/* ============================================================
   Ray-Nor-Shine Pro Wash — Design System
   Tokens per docs/brand-brief.md · Built by FluxGrid Studio
   ============================================================ */

/* ---------- Fonts (self-hosted) ---------- */
@font-face{font-family:'Oswald';src:url('/assets/fonts/oswald.woff2') format('woff2');font-weight:200 700;font-display:swap;}
@font-face{font-family:'Inter';src:url('/assets/fonts/inter.woff2') format('woff2');font-weight:100 900;font-display:swap;}
@font-face{font-family:'Kaushan Script';src:url('/assets/fonts/kaushan.woff2') format('woff2');font-weight:400;font-display:swap;}

/* ---------- Tokens ---------- */
:root{
  --navy:#0A2050;
  --navy-2:#132E68;      /* hover / gradient stop */
  --royal:#1D3FA8;
  --blue:#0B6BC4;
  --blue-dark:#095AA6;
  --sky:#E8F2FA;
  --sky-deep:#D5E6F4;
  --splash:#3FA9F5;
  --gold:#F2B735;
  --ink:#14181F;
  --muted:#5B6B7C;
  --white:#FFFFFF;
  --disp:'Oswald',system-ui,sans-serif;
  --body:'Inter',system-ui,sans-serif;
  --script:'Kaushan Script',cursive;
  --radius:14px;
  --radius-sm:10px;
  --shadow:0 4px 14px rgba(10,32,80,.08);
  --shadow-lg:0 10px 30px rgba(10,32,80,.14);
  --container:1160px;
}

/* ---------- Reset / base ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{margin:0;font-family:var(--body);font-size:16px;line-height:1.65;color:var(--ink);background:var(--white);}
img,video{max-width:100%;height:auto;display:block;}
a{color:var(--blue);}
h1,h2,h3,h4{font-family:var(--disp);font-weight:600;line-height:1.12;color:var(--navy);margin:0 0 .5em;text-transform:uppercase;letter-spacing:.02em;}
h1{font-size:clamp(2rem,5vw,3.4rem);}
h2{font-size:clamp(1.55rem,3.4vw,2.3rem);}
h3{font-size:clamp(1.15rem,2.2vw,1.4rem);}
p{margin:0 0 1em;}
.container{max-width:var(--container);margin:0 auto;padding:0 20px;}
.section{padding:clamp(56px,9vw,110px) 0;}
.section--sky{background:var(--sky);}
.section--navy{background:linear-gradient(140deg,var(--navy) 0%,var(--navy-2) 60%,var(--royal) 100%);color:#EAF3FB;}
.section--navy h2,.section--navy h3{color:#fff;}
.kicker{font-weight:700;font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:var(--blue);margin:0 0 10px;}
.section--navy .kicker{color:var(--splash);}
.script-accent{font-family:var(--script);color:var(--blue);font-size:clamp(1.25rem,2.6vw,1.7rem);display:inline-block;transform:rotate(-2deg);text-transform:none;letter-spacing:0;}
.section--navy .script-accent,.hero .script-accent{color:var(--splash);}
.lede{font-size:1.08rem;color:var(--muted);max-width:64ch;}
.section--navy .lede{color:#C9DCF2;}
.center{text-align:center;}
.center .lede{margin-inline:auto;}

/* ---------- Buttons ---------- */
/* ---------- Animated CTA border ----------
   A 2mm band sweeping round every call to action, drawn as a masked ring on
   ::before so the ghost/outline buttons keep a genuinely transparent centre.
   @property makes the conic angle animatable; where it is unsupported the
   gradient just sits still, which still reads as a brand border.
   Width and speed are tokens — change --cta-border once, everywhere follows. */
@property --cta-angle{syntax:"<angle>";initial-value:0deg;inherits:false;}
:root{--cta-border:2mm;--cta-sweep:5s;}

.btn{position:relative;isolation:isolate;
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:48px;
  padding:calc(var(--cta-border) + .55rem) calc(var(--cta-border) + 1.15rem);
  border-radius:999px;font-family:var(--disp);font-weight:600;font-size:1rem;letter-spacing:.06em;text-transform:uppercase;
  text-decoration:none;cursor:pointer;border:0;--btn-fill:transparent;
  background:var(--btn-fill);
  transition:transform .15s,background .2s,color .2s;}
/* The ring is a masked pseudo-element rather than a two-layer background: a
   transparent-centred button would otherwise show the gradient straight
   through its middle instead of only around the edge. */
.btn::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  padding:var(--cta-border);pointer-events:none;
  background:conic-gradient(from var(--cta-angle),var(--splash),var(--gold),#fff,var(--splash),var(--blue),var(--splash));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  animation:cta-sweep var(--cta-sweep) linear infinite;}
@keyframes cta-sweep{to{--cta-angle:360deg;}}
.btn:hover{transform:translateY(-2px);--cta-sweep:1.6s;}
.btn--primary{--btn-fill:var(--blue);color:#fff;}
.btn--primary:hover{--btn-fill:var(--blue-dark);color:#fff;}
.btn--outline{--btn-fill:transparent;color:var(--navy);}
.btn--outline:hover{--btn-fill:var(--navy);color:#fff;}
.btn--white{--btn-fill:#fff;color:var(--navy);}
.btn--white:hover{--btn-fill:var(--sky);}
.btn--ghost-light{--btn-fill:transparent;color:#fff;}
.btn--ghost-light:hover{--btn-fill:rgba(255,255,255,.12);}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:70;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--sky-deep);}
.site-header .container{display:flex;align-items:center;gap:18px;min-height:74px;}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;}
.brand img{width:52px;height:52px;border-radius:10px;}
.brand .brand-name{font-family:var(--disp);font-weight:700;font-size:1.12rem;line-height:1.05;color:var(--navy);text-transform:uppercase;letter-spacing:.04em;}
.brand .brand-sub{display:block;font-size:.62rem;font-weight:600;letter-spacing:.28em;color:var(--blue);}
.nav{margin-left:auto;display:flex;align-items:center;gap:26px;}
.nav a{font-weight:600;font-size:.95rem;color:var(--ink);text-decoration:none;}
.nav a:hover,.nav a[aria-current="page"]{color:var(--blue);}
.nav .btn{min-height:44px;padding:.6rem 1.3rem;font-size:.9rem;}
.nav-toggle{display:none;margin-left:auto;background:none;border:0;padding:10px;cursor:pointer;}
.nav-toggle span{display:block;width:26px;height:3px;background:var(--navy);margin:5px 0;border-radius:2px;transition:.25s;}
/* dropdown */
.nav .has-menu{position:relative;}
.nav .has-menu > a::after{content:"";display:inline-block;margin-left:.4em;vertical-align:.12em;
  border:.3em solid transparent;border-top-color:currentColor;border-bottom:0;transition:transform .2s;}
.nav .menu{position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%);background:#fff;border:1px solid var(--sky-deep);
  border-radius:var(--radius-sm);box-shadow:var(--shadow-lg);padding:10px;min-width:250px;display:none;}
/* Hover/focus opening is desktop-only. Left unscoped it outranks the mobile
   collapsed rule, so a tapped sub-menu could never be tapped shut again. */
@media (min-width:981px){
  .nav .has-menu:hover .menu,.nav .has-menu:focus-within .menu{display:block;}
}
.nav .menu a{display:block;padding:9px 14px;border-radius:8px;font-size:.92rem;}
.nav .menu a:hover{background:var(--sky);}

@media (max-width:980px){
  /* Drop-down panel, not a full-screen takeover: it sizes to its own content
     and only scrolls if a visitor opens enough sub-menus to outgrow the screen. */
  .nav{position:fixed;inset:74px 0 auto 0;background:#fff;flex-direction:column;align-items:stretch;gap:0;
    padding:12px 20px 22px;border-bottom:1px solid var(--sky-deep);box-shadow:var(--shadow-lg);display:none;
    max-height:calc(100vh - 74px);overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;}
  .nav.open{display:flex;}
  .nav a{padding:13px 6px;border-bottom:1px solid var(--sky);}
  /* Sub-menus start collapsed and open only on tap — see main.js. */
  .nav .has-menu .menu{position:static;transform:none;display:none;border:0;box-shadow:none;padding:0 0 0 16px;min-width:0;}
  .nav .has-menu.open > .menu{display:block;}
  .nav .has-menu > a{display:flex;align-items:center;justify-content:space-between;}
  .nav .has-menu.open > a::after{transform:rotate(180deg);}
  .nav .btn{margin-top:14px;}
  .nav-toggle{display:block;}
}
@supports (height:100dvh){
  @media (max-width:980px){ .nav{max-height:calc(100dvh - 74px);} }
}

/* While the mobile menu is open, get the floating widgets out of its way.
   The call bar, the accessibility launcher and the consent banner all outrank
   the header in stacking order and would otherwise sit on top of nav rows.
   They come straight back when the menu closes — no consent state is lost. */
body.nav-open .callbar,
body.nav-open .a11y-launcher,
body.nav-open .rns-privacy-banner,
body.nav-open .rns-privacy-reopen,
body.nav-open .rns-lead{display:none;}

/* ---------- Sticky mobile call bar ---------- */
.callbar{display:none;}
@media (max-width:720px){
  .callbar{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:60;}
  .callbar a{flex:1;display:flex;align-items:center;justify-content:center;gap:.45rem;min-height:56px;
    font-family:var(--disp);font-weight:600;font-size:1rem;letter-spacing:.05em;text-transform:uppercase;text-decoration:none;}
  .callbar .call{background:var(--blue);color:#fff;}
  .callbar .quote{background:var(--navy);color:#fff;}
  body{padding-bottom:56px;}
}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:min(88vh,760px);display:flex;align-items:center;overflow:hidden;background:var(--navy);}
.hero video,.hero .hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(10,32,80,.82) 0%,rgba(10,32,80,.55) 45%,rgba(10,32,80,.25) 100%);}
.hero .container{position:relative;z-index:2;padding-top:70px;padding-bottom:80px;}
.hero h1{color:#fff;max-width:15ch;}
.hero h1 .em{color:var(--splash);}
.hero .lede{color:#DCE9F7;font-size:1.12rem;}
.hero .cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px;}
.hero .trust-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:34px;}
.hero .chip{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);color:#fff;border-radius:999px;
  padding:7px 16px;font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;}
/* subpage hero */
.page-hero{background:linear-gradient(140deg,var(--navy) 0%,var(--navy-2) 55%,var(--royal) 100%);color:#EAF3FB;padding:clamp(52px,8vw,90px) 0;}
.page-hero h1{color:#fff;}
.page-hero .lede{color:#C9DCF2;}
.page-hero.has-img{position:relative;background:var(--navy);min-height:min(64vh,540px);display:flex;align-items:center;overflow:hidden;}
.page-hero.has-img .page-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 38%;z-index:0;}
.page-hero.has-img::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(10,32,80,.86) 0%,rgba(10,32,80,.62) 45%,rgba(10,32,80,.32) 100%);z-index:1;}
.page-hero.has-img .container{position:relative;z-index:2;}
.breadcrumbs{font-size:.85rem;margin-bottom:18px;}
.breadcrumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;margin:0;padding:0;}
.breadcrumbs li+li::before{content:"›";margin-right:.4rem;color:var(--splash);}
.breadcrumbs a{color:#BFD6F0;text-decoration:none;}
.breadcrumbs a:hover{color:#fff;}
.breadcrumbs [aria-current]{color:#fff;}

/* ---------- Cards / grids ---------- */
.grid{display:grid;gap:22px;}
.grid--3{grid-template-columns:repeat(3,1fr);}
.grid--2{grid-template-columns:repeat(2,1fr);}
.grid--4{grid-template-columns:repeat(4,1fr);}
@media (max-width:980px){.grid--3,.grid--4{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.grid--3,.grid--2,.grid--4{grid-template-columns:1fr;}}
.card{background:#fff;border:1px solid var(--sky-deep);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;
  display:flex;flex-direction:column;transition:transform .18s,box-shadow .18s;}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);}
.section--sky .card{border-color:#fff;}
.card img{aspect-ratio:4/3;object-fit:cover;width:100%;}
.card .card-body{padding:20px 22px 24px;display:flex;flex-direction:column;gap:8px;flex:1;}
.card h3 a{color:var(--navy);text-decoration:none;}
.card h3 a:hover{color:var(--blue);}
.card p{color:var(--muted);font-size:.95rem;margin:0;}
.card .card-link{margin-top:auto;padding-top:10px;font-family:var(--disp);font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;font-size:.85rem;text-decoration:none;color:var(--blue);}
.card .card-link:hover{color:var(--navy);}

/* sparkle list */
.spark-list{list-style:none;padding:0;margin:0;display:grid;gap:12px;}
.spark-list li{padding-left:30px;position:relative;}
.spark-list li::before{content:"✦";position:absolute;left:2px;color:var(--blue);font-size:1.05rem;}
.section--navy .spark-list li::before{color:var(--splash);}

/* pillars */
.pillars{display:flex;flex-wrap:wrap;gap:12px;}
.pillars span{background:#fff;border:1.5px solid var(--sky-deep);color:var(--navy);font-family:var(--disp);font-weight:600;
  font-size:.85rem;letter-spacing:.14em;text-transform:uppercase;padding:9px 20px;border-radius:999px;}
.section--navy .pillars span{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.35);color:#fff;}

/* ---------- Before/After slider ---------- */
.ba{position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-lg);aspect-ratio:4/3;user-select:none;background:var(--sky);}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;}
.ba .after-wrap{position:absolute;inset:0;overflow:hidden;width:var(--pos,50%);}
.ba .after-wrap img{width:auto;height:100%;max-width:none;}
.ba .handle{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:4px;background:#fff;box-shadow:0 0 8px rgba(0,0,0,.4);transform:translateX(-2px);pointer-events:none;}
.ba .handle::after{content:"⇔";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;
  background:var(--blue);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.2rem;box-shadow:var(--shadow-lg);}
.ba input[type=range]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0;}
.ba .tag{position:absolute;bottom:14px;z-index:2;font-family:var(--disp);font-weight:600;font-size:.75rem;letter-spacing:.14em;
  padding:5px 14px;border-radius:999px;color:#fff;pointer-events:none;}
.ba .tag--before{right:14px;background:var(--navy);}
.ba .tag--after{left:14px;background:var(--blue);}
.ba-caption{margin-top:12px;font-size:.9rem;color:var(--muted);text-align:center;}

/* ---------- Review cards ---------- */
.review{background:#fff;border:1px solid var(--sky-deep);border-radius:var(--radius);box-shadow:var(--shadow);padding:26px 26px 22px;}
.review .stars{color:var(--gold);font-size:1.05rem;letter-spacing:.15em;margin-bottom:10px;}
.review blockquote{margin:0 0 14px;font-size:1rem;color:var(--ink);}
.review .who{font-family:var(--disp);font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-size:.85rem;color:var(--navy);}
.review .where{font-size:.8rem;color:var(--muted);}

/* ---------- Gallery ---------- */
.filter-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:0 0 34px;}
.filter-btn{border:1.5px solid var(--sky-deep);background:#fff;color:var(--navy);border-radius:999px;padding:9px 20px;
  font-family:var(--disp);font-weight:600;font-size:.85rem;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:.2s;}
.filter-btn:hover{border-color:var(--blue);color:var(--blue);}
.filter-btn.active{background:var(--blue);border-color:var(--blue);color:#fff;}
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
@media (max-width:900px){.gallery-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.gallery-grid{grid-template-columns:1fr;}}
.gitem{border-radius:var(--radius-sm);overflow:hidden;position:relative;box-shadow:var(--shadow);}
.gitem img{width:100%;aspect-ratio:1/1;object-fit:cover;transition:transform .25s;}
.gitem:hover img{transform:scale(1.04);}
.gitem .glabel{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(transparent,rgba(10,32,80,.85));
  color:#fff;font-size:.8rem;font-weight:600;padding:26px 12px 10px;}
.gitem[hidden]{display:none;}

/* ---------- Forms ---------- */
.form{display:grid;gap:16px;}
.form .row{display:grid;gap:16px;grid-template-columns:1fr 1fr;}
@media (max-width:640px){.form .row{grid-template-columns:1fr;}}
.form label{font-weight:600;font-size:.9rem;color:var(--navy);display:grid;gap:6px;}
.form input,.form select,.form textarea{font-family:var(--body);font-size:1rem;padding:12px 14px;border:1.5px solid var(--sky-deep);
  border-radius:var(--radius-sm);background:#fff;color:var(--ink);width:100%;}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--blue);outline-offset:1px;border-color:var(--blue);}
.form textarea{min-height:120px;resize:vertical;}
.form .form-note{font-size:.83rem;color:var(--muted);}
.form-status{border-radius:var(--radius-sm);padding:13px 16px;font-weight:600;display:none;}
.form-status.ok{display:block;background:#E7F5EC;color:#15803D;}
.form-status.err{display:block;background:#FBEAEA;color:#B91C1C;}

/* ---------- CTA band ---------- */
.cta-band{text-align:center;}
.cta-band .script-accent{font-size:clamp(1.5rem,3.2vw,2.1rem);margin-bottom:8px;}
.cta-band h2{color:#fff;}
.cta-band .cta-row{display:flex;justify-content:center;flex-wrap:wrap;gap:14px;margin-top:24px;}
.phone-big{font-family:var(--disp);font-weight:700;font-size:clamp(1.4rem,3.4vw,2rem);color:#fff;text-decoration:none;letter-spacing:.04em;}
.phone-big:hover{color:var(--splash);}

/* ---------- Footer ---------- */
.site-footer{background:var(--navy);color:#BFD3EC;padding:60px 0 26px;font-size:.93rem;}
.site-footer a{color:#DCE9F7;text-decoration:none;}
.site-footer a:hover{color:var(--splash);}
.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:34px;margin-bottom:38px;}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr;}}
.site-footer h4{color:#fff;font-size:.95rem;letter-spacing:.1em;margin-bottom:14px;}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;}
.footer-brand img{width:74px;height:74px;border-radius:12px;background:#fff;padding:4px;margin-bottom:14px;}
.footer-brand .tagline{font-family:var(--script);color:var(--splash);font-size:1.15rem;display:block;margin:6px 0 10px;transform:rotate(-1.5deg);}
.footer-pillars{font-family:var(--disp);font-weight:600;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:#8FB4DE;}
.footer-bottom{border-top:1px solid rgba(255,255,255,.14);padding-top:20px;text-align:center;font-size:.8rem;color:#8FA9CC;}
.fg-credit{display:flex;justify-content:center;margin-top:1.2rem;}
.fg-credit a{display:inline-flex;align-items:center;gap:.5rem;font-size:.75rem;color:#7E96BC;text-decoration:none;transition:color .2s;}
.fg-credit a:hover{color:#fff;}
.fg-credit img{height:20px;width:auto;}

/* ---------- Misc ---------- */
.split{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(28px,5vw,64px);align-items:center;}
@media (max-width:900px){.split{grid-template-columns:1fr;}}
.split img{border-radius:var(--radius);box-shadow:var(--shadow-lg);}
.faq details{border:1px solid var(--sky-deep);border-radius:var(--radius-sm);background:#fff;padding:0;margin-bottom:12px;}
.faq summary{cursor:pointer;font-family:var(--disp);font-weight:600;font-size:1.02rem;color:var(--navy);padding:16px 20px;list-style:none;display:flex;justify-content:space-between;align-items:center;text-transform:uppercase;letter-spacing:.03em;}
.faq summary::after{content:"+";font-size:1.3rem;color:var(--blue);}
.faq details[open] summary::after{content:"–";}
.faq details p{padding:0 20px 18px;margin:0;color:var(--muted);}
.area-links{display:flex;flex-wrap:wrap;gap:10px;}
.area-links a{background:#fff;border:1.5px solid var(--sky-deep);border-radius:999px;padding:8px 18px;text-decoration:none;
  color:var(--navy);font-weight:600;font-size:.9rem;transition:.2s;}
.area-links a:hover{border-color:var(--blue);color:var(--blue);}
.section--navy .area-links a{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.3);color:#fff;}
.section--navy .area-links a:hover{background:rgba(255,255,255,.18);}
.skip-link{position:absolute;left:-9999px;top:0;background:#fff;color:var(--navy);padding:10px 16px;z-index:100;}
.skip-link:focus{left:10px;top:10px;}
@media (prefers-reduced-motion:reduce){
  /* pseudo-elements need naming explicitly — a bare `*` does not match them,
     which left the CTA ring sweeping for exactly the people who opted out */
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important;}
  .hero video{display:none;}
}

/* ---------- Honeycomb field (from the crew jersey) ----------
   A tiling SVG laid over dark bands. The host needs position:relative and its
   .container needs z-index, or the lattice paints over the copy. */
.hex-field{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;}
.section--navy,.site-footer,.cta-band{position:relative;isolation:isolate;}
.section--navy > .container,.site-footer > .container,.cta-band > .container{position:relative;z-index:1;}
/* the lattice is texture, not information — drop it where it would only add noise */
@media (max-width:520px){.hex-field{opacity:.6;}}
@media (prefers-reduced-motion:reduce){.hex-field{opacity:.5;}}

/* ---------- Faith mark (cross + sunburst, worn on the jersey) ---------- */
.faith-mark{display:inline-block;vertical-align:-3px;margin-right:4px;flex:none;}
.footer-pillars .faith-mark{vertical-align:-4px;}

/* footer privacy preferences control — matches the footer link styling */
.footer-privacy-btn{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;text-align:left;text-decoration:underline;}
.footer-privacy-btn:hover{color:#fff;}

/* visually hidden, still announced by screen readers */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}