/* ==========================================================================
   2026-09-04: the header was still set in Clash Display and General Sans, the
   faces the kit retired. Every page renders Fraunces + Geist, so the chrome now
   does too: Fraunces on the display lines, Geist on nav, labels and body.
   ========================================================================== */

:root{
  --navy:var(--e-global-color-primary,#171D3A); --navy-deep:var(--e-global-color-primary_deep,#112337); --navy-2:#1D2547; --gold:var(--e-global-color-accent,#FFB000); --gold-deep:var(--e-global-color-accent_hover,#E29C00);
  --cream:var(--e-global-color-surface_alt,#F7F2E7); --cream-2:#F3EDDF; --slate:var(--e-global-color-secondary,#374763); --white:#FFF; --border:#E5E1D6;
  --maxw:1240px; --content:768px;
  --ease:cubic-bezier(.22,.61,.36,1); --ease-out:cubic-bezier(.19,1,.22,1);
  --sect:clamp(100px,9vw,132px);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Geist',-apple-system,sans-serif;color:var(--navy);background:var(--white);font-size:17px;line-height:1.75;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.fraunces,h1,h2,h3.serif{font-family:'Fraunces',Georgia,serif;font-weight:600;letter-spacing:-.012em;font-optical-sizing:auto}
h1{font-size:clamp(40px,5.6vw,76px);line-height:1.03;letter-spacing:-.025em}
h2{font-size:clamp(31px,3.6vw,48px);line-height:1.1;letter-spacing:-.018em}
h3{font-size:18.5px;line-height:1.35;font-weight:700}
p{margin:0 0 1.3em}
/* The trailing margin inside a widget is dead space. Elementor spaces widgets with the container's
   gap and each widget carries its own margin from the composer, so the theme's 16px on the last line
   of a heading or a paragraph lands *inside* the card and the card grows by it. Measured on the
   licensing stat card: 16px under the figure and 16px under the caption, which with the 28px padding
   read as 45px of nothing beneath a two-line sentence. Scoped to Elementor containers, so the post
   and guide templates keep their own rhythm.

   Elementor's optimized markup drops the .elementor-widget-container div, so the last child sits
   directly under .elementor-widget on some widgets and under the container on others. Both. */
.e-con .elementor-heading-title{margin-bottom:0}
.e-con .elementor-widget-container>*:last-child,
.e-con .elementor-widget>*:last-child{margin-bottom:0}
a{color:var(--navy)}
img{max-width:100%}
::selection{background:var(--gold);color:var(--navy)}
.navy-s.grain::before{opacity:.12;mix-blend-mode:overlay}
.navy-s.dots::after{background-image:radial-gradient(circle,rgba(247,242,231,.18) 1.2px,transparent 1.3px)}
.navy-s[data-num]::before{-webkit-text-stroke:1.5px rgba(247,242,231,.1)!important}
@keyframes drift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(50px,-36px) scale(1.07)}}
@keyframes drift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-40px,32px) scale(.94)}}

.btn{position:relative;display:inline-flex;align-items:center;gap:10px;background:var(--gold);color:var(--navy);font-weight:700;font-size:16px;padding:18px 36px;border-radius:999px;text-decoration:none;transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s;box-shadow:0 12px 32px rgba(255,176,0,.32);overflow:hidden}
.btn svg{width:15px;height:15px;stroke:currentColor;stroke-width:2.4;fill:none;transition:transform .3s var(--ease)}
.btn::after{content:"";position:absolute;top:0;left:-80%;width:50%;height:100%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);transition:left .55s var(--ease)}
.btn:hover{background:var(--gold-deep);transform:translateY(-2.5px);box-shadow:0 20px 44px rgba(255,176,0,.44)}
.btn:hover::after{left:120%}
.btn:hover svg{transform:translateX(4px)}
.goldlink{color:var(--navy);font-weight:600;font-size:14.5px;text-decoration:none;position:relative;padding-bottom:3px;background:linear-gradient(90deg,var(--gold),var(--gold)) no-repeat 0 100%/100% 2px;transition:color .2s}
.goldlink::after{content:"→";display:inline-block;margin-left:7px;transition:transform .3s var(--ease);color:var(--gold-deep)}
.goldlink:hover{color:var(--slate)}
.goldlink:hover::after{transform:translateX(5px)}

/* ============ capsule header ============ */
.hdr{position:fixed;top:0;left:0;right:0;z-index:400;transition:padding .45s var(--ease)}
.hdr-in{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:16px 32px;transition:all .45s var(--ease);background:rgba(255,255,255,.9);backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);border-bottom:1px solid rgba(23,29,58,.08)}
.hdr.scrolled{padding:12px 20px}
.hdr.scrolled .hdr-in{max-width:1080px;border-radius:999px;background:rgba(255,255,255,.58);backdrop-filter:blur(22px) saturate(1.6);-webkit-backdrop-filter:blur(22px) saturate(1.6);border:1px solid rgba(255,255,255,.65);box-shadow:0 22px 60px rgba(17,29,58,.18),inset 0 1px 0 rgba(255,255,255,.8);padding:9px 12px 9px 24px}
.hdr.scrolled .hdr-nav{background:rgba(23,29,58,.07)}
.hdr-logo img{width:190px;display:block;transition:width .45s var(--ease)}
.hdr.scrolled .hdr-logo img{width:152px}
.hdr-nav{display:flex;gap:2px;list-style:none;background:rgba(23,29,58,.045);border-radius:999px;padding:4px}
.hdr-nav a{text-decoration:none;font-weight:600;font-size:14.5px;padding:8px 17px;color:var(--navy);border-radius:10px;transition:background .3s,color .3s;position:relative}
.hdr-nav>ul>li>a,.hdr-nav>a{border-radius:999px}
.hdr-nav .mi{border-radius:12px}
.hdr-nav a:hover{background:rgba(255,176,0,.16)}
.hdr-nav a.active{background:var(--navy);color:var(--white)}
.hdr-nav a.active::after{content:"";position:absolute;right:9px;top:9px;width:5px;height:5px;border-radius:50%;background:var(--gold)}
.hdr .btn{font-size:14px;padding:12px 24px;box-shadow:none;white-space:nowrap}
.burger{display:none;background:none;border:0;cursor:pointer;padding:8px}
.burger span{display:block;width:22px;height:2.5px;background:var(--navy);margin:4.5px 0;border-radius:2px}@media (max-width:1080px){.hdr-nav{display:none}.burger{display:block}.hdr-logo img{width:150px}}@media (max-width:480px){.hdr-logo img{width:104px}.hdr .btn{font-size:10.5px;padding:9px 11px;gap:5px}.hdr .btn svg{width:11px;height:11px}.hdr-in{padding:12px 14px;gap:8px}}
@keyframes swatch{to{background-size:100% .24em}}

/* dashboard mock: pure skeleton graphics, zero readable text */
.hero-dash{position:relative;z-index:3}
@keyframes ping{70%{box-shadow:0 0 0 12px rgba(255,176,0,0)}100%{box-shadow:0 0 0 0 rgba(255,176,0,0)}}
.spark-line{fill:none;stroke:var(--gold);stroke-width:2.6;stroke-linecap:round;stroke-dasharray:320;stroke-dashoffset:320}
.in .spark-line{animation:draw 1.7s var(--ease) forwards .35s}
@keyframes draw{to{stroke-dashoffset:0}}
.navy-s{background:radial-gradient(1000px 520px at 16% 0%,var(--navy-2) 0%,var(--navy) 50%,var(--navy-deep) 100%);color:var(--white)}
.navy-s h2{color:var(--white)}
.navy-s .sec-k{color:var(--gold)}
@keyframes pulse{0%{box-shadow:0 16px 48px rgba(0,0,0,.42),0 0 0 0 rgba(255,176,0,.45)}100%{box-shadow:0 16px 48px rgba(0,0,0,.42),0 0 0 28px rgba(255,176,0,0)}}
@property --bang{syntax:"<angle>";initial-value:0deg;inherits:false}
@keyframes beamspin{to{--bang:360deg}}
.bcard .goldlink{align-self:flex-start;margin-top:14px}

/* ============ FAQ v6: two columns, exclusive ============ */
.faq-cols{display:grid;grid-template-columns:1fr 1fr;gap:18px 44px;align-items:start;max-width:1120px;margin:0 auto}
@keyframes sheen{0%,100%{background-position:0% 0}50%{background-position:100% 0}}
.btn-xl{font-size:17px;padding:20px 40px}
@keyframes selring{0%{transform:scale(.85);opacity:1}100%{transform:scale(1.18);opacity:0}}
/* footer */
.values{background:radial-gradient(1100px 560px at 30% 0%,var(--navy-2) 0%,var(--navy) 55%,var(--navy-deep) 100%);padding:66px 0;position:relative;overflow:hidden}
.values::before{content:"";position:absolute;inset:0;background-image:var(--grain);background-size:140px;opacity:.11;mix-blend-mode:overlay;z-index:2;pointer-events:none}
.values::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--gold),var(--gold-deep),var(--navy))}
.vmq{overflow:hidden;white-space:nowrap;transform:rotate(-1.2deg) scale(1.02);border-top:1px solid rgba(255,176,0,.25);border-bottom:1px solid rgba(255,176,0,.25);padding:26px 0;background:rgba(17,35,55,.3)}
.vmq-track{display:inline-flex;will-change:transform}
.vseg{display:inline-flex;align-items:center;flex:none}
.vclause{font-family:'Fraunces',Georgia,serif;font-weight:600;font-style:normal;font-size:clamp(44px,6vw,84px);line-height:1.1;color:transparent;-webkit-text-stroke:1.6px rgba(247,242,231,.85);letter-spacing:-.015em;padding:0 34px;transition:color .4s,-webkit-text-stroke .4s}
.vclause:hover{color:var(--white);-webkit-text-stroke:1.6px transparent}
.vclause.vgold{font-style:italic;color:var(--gold);-webkit-text-stroke:0;text-shadow:0 0 44px rgba(255,176,0,.35)}
.vnum{font-family:'Fraunces',serif;font-weight:600;font-size:clamp(19px,2vw,30px);color:transparent;-webkit-text-stroke:1.2px var(--gold);letter-spacing:.08em;margin:0 4px 0 26px;transform:translateY(-6px)}
.vdia{width:14px;height:14px;background:var(--gold);transform:rotate(45deg);border-radius:3px;flex:none;box-shadow:0 0 16px rgba(255,176,0,.6);margin:0 6px}@media (prefers-reduced-motion: reduce){.vmq{transform:none}.vmq-track{flex-wrap:wrap;justify-content:center;white-space:normal}}
.radix-card{background:linear-gradient(165deg,var(--navy-2),#0F2032);border:1px solid rgba(255,176,0,.28);border-radius:18px;padding:22px;position:relative;overflow:hidden}
.radix-card::after{content:"";position:absolute;right:-30px;top:-30px;width:110px;height:110px;border-radius:50%;background:radial-gradient(circle,rgba(255,176,0,.16),transparent 70%)}
.bhp-fmain .h, .radix-card .h{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:20px}



/* ================= v4 layer ================= */
/* custom scrollbar removed Aug 22 per Adam: default browser scrollbar */

/* ---- mega menu ---- */
.hdr-nav .car{width:10px;height:7px;fill:none;stroke:currentColor;stroke-width:1.8;margin-left:6px;transition:transform .3s var(--ease)}
.has-mega{position:relative}
.has-mega:hover .car,.has-mega:focus-within .car{transform:rotate(180deg)}
.mega{position:absolute;top:calc(100% + 16px);left:50%;transform:translateX(-50%) translateY(14px) scale(.98);width:min(880px,92vw);opacity:0;visibility:hidden;transition:opacity .35s var(--ease),transform .35s var(--ease),visibility 0s .35s;z-index:500}
.has-mega:hover .mega,.has-mega:focus-within .mega{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0) scale(1);transition-delay:0s}
.mega::before{content:"";position:absolute;top:-16px;left:0;right:0;height:16px}
.mega-in{display:grid;grid-template-columns:1.9fr .95fr;gap:0;background:rgba(255,255,255,.97);backdrop-filter:blur(20px);border:1px solid rgba(23,29,58,.09);border-radius:22px;box-shadow:0 44px 110px rgba(17,29,58,.24);overflow:hidden;position:relative}
.mega-in::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--gold),var(--gold-deep),var(--navy))}
.mega-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px;padding:22px}
.mi{display:flex;gap:14px;align-items:center;text-decoration:none;padding:13px 14px;border-radius:14px;transition:background .25s,transform .25s var(--ease)}
.mi:hover{background:rgba(255,176,0,.1);transform:translateX(3px)}
.mic{flex:0 0 40px;height:40px;border-radius:12px;background:rgba(23,29,58,.06);display:flex;align-items:center;justify-content:center;transition:background .25s}
.mi:hover .mic{background:var(--navy)}
.mic svg{width:21px;height:21px;fill:none;stroke:var(--slate);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:stroke .25s}
.mi:hover .mic svg{stroke:var(--gold)}
.mi b{display:block;font-size:14.5px;color:var(--navy);line-height:1.3}
.mi small{display:block;font-size:12px;color:var(--slate);margin-top:2px}
.mega-feature{background:linear-gradient(165deg,var(--navy-2),var(--navy-deep));padding:28px 26px;display:flex;flex-direction:column;gap:8px;justify-content:flex-end;position:relative;overflow:hidden}
.mega-feature::after{content:"";position:absolute;right:-40px;top:-40px;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle,rgba(255,176,0,.16),transparent 70%)}
.mega-feature b{color:var(--white);font-size:17px;font-family:'Fraunces',Georgia,serif;font-weight:600}
.mega-feature small{color:rgba(247,242,231,.75);font-size:13px;line-height:1.5}
.mega-feature .goldlink{color:var(--gold);margin-top:8px;background:linear-gradient(90deg,var(--gold),var(--gold)) no-repeat 0 100%/100% 1.5px}
.mega-feature .goldlink:hover{color:#FFD574}

/* ==========================================================================
   2026-09-17: the "Explore ..." cards, on four pages.

   The arrow was a block of its own under the title, pinned to the bottom of the card, so it read as
   an orphan on a line by itself and the card looked unfinished. It is part of the link now, the same
   way every other link on the site carries its arrow. A pseudo-element sits directly after the last
   character with no whitespace between, so there is no break opportunity: the arrow can never end up
   on a line of its own, and if the last word wraps the arrow goes with it.

   The arrow keeps the drawn shape the cards already used rather than a text glyph, so nothing about
   the visual language changes, only where it sits.
   ========================================================================== */
.engcard .engt a::after{
  content:"";display:inline-block;width:19px;height:9px;margin-left:9px;
  background:var(--gold);opacity:.9;vertical-align:middle;
  clip-path:polygon(0 45%,72% 45%,72% 0,100% 50%,72% 100%,72% 55%,0 55%);
  transition:transform .22s ease}
.engcard:hover .engt a::after{transform:translateX(5px)}
/* the card no longer needs to reserve a row for it */
.engcard .engarrow{display:none}

/* ==========================================================================
   2026-09-17: the mega-menu feature card carries a photograph.

   It used to carry the BHP mark, drawn and animated. Two problems with that, and neither was a
   tuning problem: the mark sat directly under the real logo in the header, so the panel showed the
   same device twice, and a logo is an identity rather than an illustration, which left the slot
   saying nothing about the menu it belongs to. The picture is an Elementor control, so it is the
   client's to change, and clearing the control gives a clean text-only card.
   ========================================================================== */
.mf-img{border-radius:12px;overflow:hidden;margin-bottom:12px;aspect-ratio:16/9;
  border:1px solid rgba(247,242,231,.14);background:rgba(247,242,231,.05)}
.mf-img img{display:block;width:100%;height:100%;object-fit:cover;
  transform:scale(1.05);opacity:.9;transition:transform .9s var(--ease-out),opacity .5s ease}
/* the panel only exists while it is hovered, so the image settles as the menu opens */
.has-mega:hover .mf-img img{transform:scale(1);opacity:1}
@media (prefers-reduced-motion:reduce){
  .mf-img img{transform:none;opacity:1;transition:none}
}
.has-mega:hover .mega-spark{animation:draw 1.3s var(--ease) forwards .15s}@media (max-width:1080px){.mega{display:none}}

/* ---- hero v4: satellite cards + streak + mesh ---- */
@keyframes mesh1{0%,100%{transform:translate(0,0)}50%{transform:translate(-60px,40px)}}
@keyframes streak{0%,72%{opacity:0;transform:rotate(-18deg) translateX(0)}78%{opacity:1}92%,100%{opacity:0;transform:rotate(-18deg) translateX(160%)}}
@keyframes starpop{from{transform:scale(0) rotate(-40deg);opacity:0}to{transform:none;opacity:1}}
@keyframes eq{0%,100%{transform:scaleY(.6)}50%{transform:scaleY(1.15)}}
@keyframes decay{0%{opacity:1}60%,100%{opacity:.18}}
@keyframes icondraw{to{stroke-dashoffset:0}}
@keyframes scan{to{top:130%}}

/* ---- team v7: carousel of portrait tiles ---- */
.car-wrap{margin-top:56px;position:relative}
.car-ui{display:flex;align-items:center;justify-content:space-between;gap:26px;margin-top:18px}
.car-prog{flex:1;height:3px;border-radius:3px;background:rgba(23,29,58,.12);overflow:hidden}
.car-prog i{display:block;height:100%;width:20%;border-radius:3px;background:linear-gradient(90deg,var(--gold),var(--gold-deep));transition:width .3s var(--ease),transform .3s var(--ease)}
.car-btns{display:flex;gap:10px}
.car-btn{width:48px;height:48px;border-radius:50%;border:1.5px solid rgba(23,29,58,.2);background:var(--white);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .3s,border-color .3s,transform .3s var(--ease)}
.car-btn svg{width:16px;height:16px;fill:none;stroke:var(--navy);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:stroke .3s}
.car-btn:hover{background:var(--navy);border-color:var(--navy);transform:translateY(-2px)}
.car-btn:hover svg{stroke:var(--gold)}
.car-btn:disabled{opacity:.35;cursor:default;transform:none}
.car-btn:disabled:hover{background:var(--white);border-color:rgba(23,29,58,.2)}
.car-btn:disabled:hover svg{stroke:var(--navy)}
@keyframes twinkle{0%,100%{opacity:0;transform:scale(.6)}50%{opacity:.85;transform:scale(1.15)}}

/* ---- values scrub ---- */
.values .fraunces span{opacity:.25;transition:opacity .4s}
.values .fraunces span.lit{opacity:1}
@keyframes baru{0%,100%{transform:scaleY(.55)}50%{transform:scaleY(1.2)}}
@keyframes vidpulse{0%,100%{box-shadow:0 0 0 0 rgba(255,176,0,0)}45%{box-shadow:0 0 0 9px rgba(255,176,0,.12)}}

/* v7: mobile drawer */
.drawer{position:fixed;inset:0;z-index:390;background:linear-gradient(165deg,var(--navy) 0%,var(--navy-deep) 90%);padding:110px 30px 40px;opacity:0;visibility:hidden;transform:translateY(-12px);transition:opacity .4s var(--ease),transform .4s var(--ease),visibility 0s .4s;overflow-y:auto}
.drawer.open{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.dw-in{max-width:460px;margin:0 auto;display:flex;flex-direction:column;gap:4px}
.dw-link{display:block;color:var(--white);text-decoration:none;font-family:'Geist',-apple-system,sans-serif;font-weight:600;font-size:27px;padding:13px 0;border-bottom:1px solid rgba(247,242,231,.12)}
.dw-subs{display:grid;grid-template-columns:1fr 1fr;gap:2px 18px;padding:12px 0 8px}
.dw-subs a{color:rgba(247,242,231,.8);text-decoration:none;font-size:14.5px;padding:7px 0 7px 14px;position:relative}
.dw-subs a::before{content:"";position:absolute;left:0;top:50%;width:6px;height:2px;background:var(--gold);margin-top:-1px}
.dw-subs a:hover{color:var(--gold)}
body.dw-lock{overflow:hidden}
.burger{position:relative;z-index:400}
.burger span{transition:transform .35s var(--ease),opacity .3s}
.burger.x span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.x span:nth-child(2){opacity:0}
.burger.x span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* v7: hide floating satellites on small screens (overflow) */
@media (max-width:640px){.sat,.sat-share{display:none}.facade{transform:none!important}}
/* v7: spacing + responsive audit */
:root{--sect:clamp(76px,9vw,132px)}

body.admin-bar .hdr{top:32px}
.elementor-widget .spark-line{}
.navy-s.n05::before{-webkit-text-stroke:1.5px rgba(247,242,231,.1)}
/* Elementor button skin to match .btn */
.magnet .elementor-button,.hdr .elementor-button{background:var(--gold);color:var(--navy);font-weight:700;border-radius:999px;transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s;overflow:hidden;position:relative}
.magnet .elementor-button{font-size:16px;padding:18px 36px;box-shadow:0 12px 32px rgba(255,176,0,.32)}
.magnet.btn-xl .elementor-button{font-size:17px;padding:20px 40px}
.hdr .elementor-button{font-size:14px;padding:12px 24px;white-space:nowrap}
.magnet .elementor-button:hover,.hdr .elementor-button:hover{background:var(--gold-deep);transform:translateY(-2.5px);box-shadow:0 20px 44px rgba(255,176,0,.44)}
.magnet .elementor-button::after,.hdr .elementor-button::after{content:"";position:absolute;top:0;left:-80%;width:50%;height:100%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);transition:left .55s var(--ease)}
.magnet .elementor-button:hover::after,.hdr .elementor-button:hover::after{left:120%}
.elementor-button .elementor-button-icon svg{width:15px;height:15px;fill:currentColor}
/* heading widgets inside styled shells */
.hero .elementor-widget-heading h1{color:var(--white)}
/* wp admin bar fix for drawer */
body.admin-bar .drawer{padding-top:140px}
/* hide legacy site-chrome header CSS conflicts on BHP pages */
.afc-header{display:none!important}@media (max-width:760px){.qflank .elementor-widget-bhp_decor_chart{display:none}}
/* serif heading utility for wrapper-classed widgets */
.wserif .elementor-heading-title{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:clamp(22px,2.2vw,29px);line-height:1.25;letter-spacing:-.012em}
/* header container enforcement over Elementor con vars */
.hdr{position:fixed!important;top:0;left:0;right:0;z-index:400!important;width:100%!important;max-width:none!important;padding:0!important;background:transparent!important}
.hdr-in{display:flex!important;flex-direction:row!important;justify-content:space-between!important;align-items:center!important;width:100%!important}
.hdr .hdr-logo{width:auto!important}

/* ---- overflow fix round ---- */
html,body{overflow-x:clip}
.hdr-in>.elementor-element{width:auto!important;flex:0 0 auto!important;max-width:none!important}
.hdr-in .elementor-widget-bhp_mega_nav{flex:1 1 auto!important;min-width:0!important;display:flex;justify-content:center}@media (max-width:1080px){
  .hdr-in .elementor-widget-bhp_mega_nav{order:3;flex:0 0 auto!important;justify-content:flex-end}
  .hdr-in .elementor-widget-button{order:2;margin-left:auto}}
.values{overflow:hidden!important}
.vmq{transform-origin:center}@media (max-width:480px){
  .hdr-in .elementor-widget-button .elementor-button{font-size:10.5px;padding:9px 12px}
  .hdr-logo img{width:104px!important}}

/* ================= fidelity round: kit-specificity overrides ================= */
/* A. header: full-bleed white bar when unscrolled, capsule when scrolled */
.hdr{background:rgba(255,255,255,.92)!important;backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);border-bottom:1px solid rgba(23,29,58,.08)}
.hdr::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--gold) 0%,var(--gold-deep) 40%,var(--navy) 100%);z-index:2}
.hdr .hdr-in{background:transparent;border:0;box-shadow:none}
.hdr.scrolled{background:transparent!important;border-bottom:0;backdrop-filter:none;-webkit-backdrop-filter:none}
.hdr.scrolled::before{display:none}
.hdr.scrolled .hdr-in{background:rgba(255,255,255,.6);backdrop-filter:blur(22px) saturate(1.6);-webkit-backdrop-filter:blur(22px) saturate(1.6);border:1px solid rgba(255,255,255,.65);box-shadow:0 22px 60px rgba(17,29,58,.18),inset 0 1px 0 rgba(255,255,255,.8)}
/* B. eyebrow headings inherit their shell */
.k .elementor-heading-title{font-family:inherit!important;font-size:inherit!important;font-weight:inherit!important;letter-spacing:inherit!important;text-transform:inherit!important;color:inherit!important;line-height:inherit!important}
.hero .k,.navy-s .k{color:var(--gold)!important}
/* E. headings and body text on navy sections beat kit */
.navy-s h2.elementor-heading-title,.navy-s h2,.hero h1.elementor-heading-title{color:#fff!important}
.navy-s .wserif .elementor-heading-title{color:#fff!important}
.navy-s .sub,.navy-s .sub p{color:var(--e-global-color-surface_alt,#F7F2E7)!important}
/* G. conviction centered */
.conviction,.conviction .elementor-heading-title,.conviction p{text-align:center!important}
.stat .n .elementor-heading-title,.stat .c .elementor-heading-title{font-family:inherit!important;font-size:inherit!important;font-weight:inherit!important;color:inherit!important;line-height:inherit!important;letter-spacing:inherit!important}
.stats>.e-con-inner,.stats>div{gap:0!important}
/* I. footer radix card text */
.radix-card p{color:var(--e-global-color-surface_alt,#F7F2E7)!important}
.radix-card a{color:var(--gold)!important}
/* content column paragraphs default slate on light sections */
.pad .content-col .elementor-widget-text-editor{color:var(--slate)}
/* 3. carousel buttons: undo kit button styling on plain <button> */
body .car-btn{background:#fff!important;color:var(--navy)!important;border:1.5px solid rgba(23,29,58,.2)!important;border-radius:50%!important;padding:0!important;width:48px!important;height:48px!important;box-shadow:none!important}
body .car-btn:hover{background:var(--navy)!important;border-color:var(--navy)!important}
body .car-btn svg{stroke:var(--navy)!important;width:16px!important;height:16px!important;fill:none!important}
body .car-btn:hover svg{stroke:var(--gold)!important}
/* 4. bento: 3 clean rows, wide features, no vertical voids */
.bento{grid-template-areas:
  "b-seo b-seo b-local b-ppc"
  "b-web b-web b-leads b-content"
  "b-social b-video b-photo b-cro"!important;grid-auto-rows:auto!important}
/* 6. footer dark scope: all text cream, links gold on hover */
[data-elementor-type="footer"] .elementor-widget-text-editor,[data-elementor-type="footer"] .elementor-widget-text-editor p{color:var(--e-global-color-surface_alt,#F7F2E7)}
[data-elementor-type="footer"] .elementor-widget-text-editor a{color:var(--gold)}
/* HEADER: solid white, centered inner bar */
body .hdr{background:#fff!important}
body .hdr .hdr-in{max-width:1240px!important;margin-left:auto!important;margin-right:auto!important;padding:15px 32px!important}
body .hdr.scrolled{background:transparent!important}
body .hdr.scrolled .hdr-in{max-width:1080px!important;padding:9px 12px 9px 24px!important}
/* HERO internal alignment: children flush with content edge */
body .hero .e-con.e-child{padding-left:0!important;padding-right:0!important}
/* STAT BAND: kill broken vertical ticks, keep diagonal texture */
.stats::before{background-image:repeating-linear-gradient(115deg,rgba(23,29,58,.05) 0 1.5px,transparent 1.5px 28px)!important;background-size:auto!important}
body .k .elementor-heading-title{margin:0!important;width:auto!important}
/* 3. footer: radix card + list alignment + rhythm */
body .radix-card{background:linear-gradient(165deg,var(--navy-2),#0F2032)!important;border:1px solid rgba(255,176,0,.3)!important;border-radius:18px!important;padding:24px!important;position:relative;overflow:hidden}
body .radix-card::after{content:"";position:absolute;right:-30px;top:-30px;width:110px;height:110px;border-radius:50%;background:radial-gradient(circle,rgba(255,176,0,.16),transparent 70%)}
body .radix-card .h,body .radix-card .elementor-heading-title{color:var(--gold)!important;font-size:12px!important;font-weight:700!important;letter-spacing:.16em!important;text-transform:uppercase!important;margin-bottom:12px!important}
[data-elementor-type="footer"] .elementor-icon-list-item{align-items:flex-start!important}
[data-elementor-type="footer"] .elementor-icon-list-icon{margin-top:7px}
[data-elementor-type="footer"] .elementor-icon-list-text{line-height:1.55!important}
.sect.pad:not(.navy-s):not(.cream-s):not(.hero){background-image:radial-gradient(640px 420px at 88% 18%,rgba(247,242,231,.75),transparent 70%),radial-gradient(520px 380px at 6% 82%,rgba(247,242,231,.6),transparent 70%)}

/* ================= round 6.0.8 ================= */
/* 1. radix card: compact, warm, crafted */
body .radix-card{align-self:flex-start!important;height:auto!important;padding:26px 24px 24px!important;border:1px solid rgba(255,176,0,.35)!important;border-radius:18px!important;background:linear-gradient(165deg,var(--navy-2),#0F2032)!important}
body .radix-card::before{content:"";position:absolute;top:0;left:22px;right:22px;height:2.5px;border-radius:0 0 4px 4px;background:linear-gradient(90deg,var(--gold),var(--gold-deep))}
body .radix-card::after{content:"";position:absolute;right:16px;top:18px;width:30px;height:30px;border-radius:50%;border:1.5px solid rgba(255,176,0,.55);background:
  linear-gradient(var(--gold),var(--gold)) center/12px 2px no-repeat,
  linear-gradient(var(--gold),var(--gold)) center/2px 12px no-repeat}
body .radix-card p{color:var(--e-global-color-surface_alt,#F7F2E7)!important;font-size:14.5px!important;line-height:1.65!important;margin:0!important}
body .radix-card a{color:var(--gold)!important;font-weight:600;border-bottom:1.5px solid rgba(255,176,0,.5)}
body .radix-card .elementor-heading-title{padding-right:40px}
/* 2. header: smooth morph + floating offset */
body .hdr{transition:background .5s var(--ease),box-shadow .5s var(--ease),padding .5s var(--ease)!important}
body .hdr .hdr-in{transition:max-width .55s var(--ease),padding .55s var(--ease),background .5s var(--ease),border-radius .55s var(--ease),box-shadow .5s var(--ease),border-color .5s var(--ease)!important;border:1px solid transparent;border-radius:999px}
body .hdr.scrolled{padding:14px 22px 0!important;border-bottom:0!important}
body .hdr.scrolled .hdr-in{background:rgba(255,255,255,.85)!important;backdrop-filter:blur(24px) saturate(1.5);-webkit-backdrop-filter:blur(24px) saturate(1.5)}
/* 3. mega panel: viewport-centered with breathing room */
body .mega{position:fixed!important;left:50%!important;top:104px!important;transform:translateX(-50%) translateY(10px) scale(.98)!important;width:min(880px,94vw)!important}
body .has-mega:hover .mega,body .has-mega:focus-within .mega{transform:translateX(-50%) translateY(0) scale(1)!important}
body .mega::before{top:-30px;height:30px}
/* 4. white sections: crafted, not empty */
.sect.pad:not(.navy-s):not(.cream-s):not(.hero){background-image:
  radial-gradient(circle at 94% 12%, rgba(23,29,58,.16) 1.3px, transparent 1.4px),
  radial-gradient(circle at 0% 0%, transparent 0, transparent 100%),
  radial-gradient(720px 460px at 90% 8%, rgba(247,242,231,.9), transparent 68%),
  radial-gradient(560px 400px at 4% 90%, rgba(247,242,231,.8), transparent 68%)!important;background-size:22px 22px,auto,auto,auto}
.sect.pad:not(.navy-s):not(.cream-s):not(.hero)::after{opacity:1}
/* gold underline signature beneath primary section headings */
.h2-row h2 .elementor-heading-title::after,.h2-row h2::after,
.content-col>.elementor-widget-heading:first-child .elementor-heading-title::after{content:"";display:block;width:64px;height:3.5px;border-radius:3px;background:linear-gradient(90deg,var(--gold),var(--gold-deep));margin-top:20px}
.conviction .elementor-heading-title::after{margin-left:auto;margin-right:auto}
.faq-cols ~ * .elementor-heading-title::after{display:none}

/* 6.0.9: tone the white-section texture back to corners + washes only */
.sect.pad:not(.navy-s):not(.cream-s):not(.hero){background-image:
  radial-gradient(720px 460px at 90% 8%, rgba(247,242,231,.9), transparent 68%),
  radial-gradient(560px 400px at 4% 90%, rgba(247,242,231,.8), transparent 68%)!important;background-size:auto!important}
/* radix link styling: only the anchor is gold */
body .radix-card a{border-bottom:1.5px solid rgba(255,176,0,.5)!important;text-decoration:none!important}

/* ================= 6.1.0: editor + responsive round ================= */
/* editor safety: everything visible, no fixed chrome weirdness */
.elementor-editor-active .rv{opacity:1!important;transform:none!important;filter:none!important}
.elementor-editor-active .scrub-h2 span,.elementor-editor-active .scrubq .q span{color:inherit!important}
.elementor-editor-active #progress,.elementor-editor-active #glow{display:none!important}
/* header: never wrap, tame the burger */
body .hdr .hdr-in{flex-wrap:nowrap!important;gap:12px!important}
body .burger{background:transparent!important;border:0!important;border-radius:10px!important;padding:10px!important;width:auto!important;height:auto!important;box-shadow:none!important;flex:0 0 auto}
body .burger:hover{background:rgba(23,29,58,.06)!important}
body .hdr-logo{min-width:0}@media (max-width:1080px){
  body .hdr .hdr-in{gap:8px!important;padding:12px 18px!important}
  body .hdr-in .elementor-widget-bhp_mega_nav{flex:0 0 auto!important;order:3;display:flex;justify-content:flex-end}
  body .hdr-in .elementor-widget-button{order:2;margin-left:auto!important}
  /* no capsule morph on small screens: stay a clean full bar */
  body .hdr.scrolled{padding:0!important;background:#fff!important;box-shadow:0 12px 34px rgba(17,29,58,.14)!important}
  body .hdr.scrolled .hdr-in{max-width:100%!important;border-radius:0!important;background:transparent!important;border:0!important;box-shadow:none!important;padding:10px 18px!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}}@media (max-width:480px){
  body .hdr .hdr-in,body .hdr.scrolled .hdr-in{padding:10px 14px!important}
  body .hdr .elementor-button{font-size:10px!important;padding:9px 11px!important}
  body .hdr-logo img{width:96px!important}
  body .burger{padding:8px!important}
  body .burger span{width:19px}}
/* page gutters on smaller screens */
@media (max-width:1280px){
  body .sect,body .stats{padding-left:32px!important;padding-right:32px!important}
}
/* hero search window smaller on mobile */
@media (max-width:640px){
  .hero-dash{max-width:330px;margin:8px auto 0}
  .dash-chart svg{height:64px}
  body .hero.sect{padding-bottom:84px!important}
}
/* bento: release grid areas on smaller screens (they were forcing 4 columns) */
@media (max-width:1000px){
  .bento{grid-template-areas:none!important;grid-template-columns:1fr 1fr!important}
  .bento>*{grid-area:auto!important}
}
/* carousel disabled buttons stay legible */
body .car-btn:disabled{opacity:1!important;background:#fff!important;border-color:rgba(23,29,58,.12)!important;cursor:default}
body .car-btn:disabled svg{stroke:rgba(23,29,58,.3)!important}
/* mega closed on touch/tablet handled by drawer; ensure hidden */
@media (max-width:1080px){body .mega{display:none!important}}

/* ================= 6.1.1 ================= */
/* drawer menu colors beat kit */
body .drawer .dw-link{color:#fff!important;font-family:'Geist',-apple-system,sans-serif!important;font-size:26px!important}
body .drawer .dw-subs a{color:rgba(247,242,231,.85)!important;font-size:14.5px!important}
body .drawer .dw-subs a:hover{color:var(--gold)!important}
/* hero patterns restored: grid + twin glows as background layers, grain keeps the pseudo */
body .hero.sect{background-image:
  linear-gradient(rgba(247,242,231,.05) 1px,transparent 1px),
  linear-gradient(90deg,rgba(247,242,231,.05) 1px,transparent 1px),
  radial-gradient(540px 540px at 106% -6%,rgba(255,176,0,.15),transparent 62%),
  radial-gradient(480px 480px at -8% 108%,rgba(247,242,231,.06),transparent 65%),
  radial-gradient(1300px 700px at 74% -12%,#26305C 0%,var(--navy) 44%,var(--navy-deep) 100%)!important;
  background-size:72px 72px,72px 72px,auto,auto,auto!important}
/* navy sections keep their glow + grid character */
body .navy-s.glowbg{background-image:
  linear-gradient(rgba(247,242,231,.035) 1px,transparent 1px),
  linear-gradient(90deg,rgba(247,242,231,.035) 1px,transparent 1px),
  radial-gradient(540px 540px at 106% -6%,rgba(255,176,0,.12),transparent 62%),
  radial-gradient(1000px 520px at 16% 0%,var(--navy-2) 0%,var(--navy) 50%,var(--navy-deep) 100%)!important;
  background-size:72px 72px,72px 72px,auto,auto!important}

/* ================= 6.1.2: drawer v2 + header align + realistic SERP ================= */
/* drawer: opaque, top of everything, with its own header */
body .drawer{position:fixed!important;inset:0!important;z-index:100000!important;background:linear-gradient(170deg,#1D2547 0%,var(--navy) 45%,var(--navy-deep) 100%)!important;padding:0!important;opacity:0;visibility:hidden;transform:translateY(-10px);transition:opacity .35s var(--ease),transform .35s var(--ease),visibility 0s .35s;overflow-y:auto}
body .drawer.open{opacity:1;visibility:visible;transform:none;transition-delay:0s}
body .dw-top{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid rgba(247,242,231,.14);position:sticky;top:0;background:rgba(17,29,58,.65);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);z-index:2}
body .dw-logo{width:150px;filter:brightness(0) invert(1)}
body .dw-close{width:44px;height:44px;border-radius:50%!important;border:1.5px solid rgba(247,242,231,.4)!important;background:rgba(247,242,231,.08)!important;cursor:pointer;position:relative;padding:0!important;flex:0 0 44px;box-shadow:none!important}
body .dw-close span{position:absolute;left:50%;top:50%;width:18px;height:2px;background:var(--gold);border-radius:2px}
body .dw-close span:first-child{transform:translate(-50%,-50%) rotate(45deg)}
body .dw-close span:last-child{transform:translate(-50%,-50%) rotate(-45deg)}
body .drawer .dw-in{max-width:520px;margin:0 auto;display:flex;flex-direction:column;gap:2px;padding:26px 24px 48px}
body .drawer .dw-link{color:#fff!important;font-family:'Geist',-apple-system,sans-serif!important;font-weight:600;font-size:24px!important;padding:14px 0!important;border-bottom:1px solid rgba(247,242,231,.12);text-decoration:none}
body .drawer .dw-subs{display:grid;grid-template-columns:1fr 1fr;gap:4px 14px;padding:14px 0 10px}@media (max-width:420px){body .drawer .dw-subs{grid-template-columns:1fr}}
body .drawer .dw-subs a{display:flex;align-items:center;gap:10px;color:rgba(247,242,231,.9)!important;font-size:14px!important;padding:9px 10px!important;border-radius:10px;text-decoration:none;transition:background .25s}
body .drawer .dw-subs a::before{display:none!important}
body .drawer .dw-subs a:hover{background:rgba(255,176,0,.12);color:var(--gold)!important}
body .dwic{flex:0 0 30px;height:30px;border-radius:9px;background:rgba(247,242,231,.1);display:inline-flex;align-items:center;justify-content:center}
body .dwic svg{width:16px;height:16px;fill:none;stroke:var(--gold);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
body .dw-cta{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:26px;background:var(--gold)!important;color:var(--navy)!important;font-weight:700;font-size:16px;padding:17px 26px;border-radius:999px;text-decoration:none;box-shadow:0 14px 36px rgba(255,176,0,.35)}
body .dw-cta svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.4}
/* header vertical alignment: CTA + burger perfectly centered */
body .hdr .hdr-in>.elementor-element{display:flex;align-items:center}
body .burger{display:none!important;flex-direction:column;justify-content:center;align-items:center;height:42px;width:42px;gap:4px}@media (max-width:1080px){body .burger{display:inline-flex!important}}
body .burger span{margin:0!important}
body .dash-chart .spark-line{stroke:#4285F4!important;stroke-width:2.2!important}
/* ================= 6.1.2 ================= */
/* Global Kit 6 was imported from the live site so blog posts render correctly.
   It declares .elementor-kit-6 a{color:var(--e-global-color-f99445e)} = #FFB000.
   At (0,1,1) that outranks our (0,1,0) link rules: the whole header turned gold
   and the gold CTA rendered invisible (gold text on a gold pill).
   Re-assert the intended chrome colours above that specificity. */
body .hdr a{color:var(--navy)}
body .hdr a.btn-gold{color:var(--navy)}
body .hdr .mi b{color:var(--navy)}
body .hdr .mi small{color:var(--slate)}
body .hdr .goldlink{color:var(--navy)}
body .hdr-nav a.active{color:var(--white)}
body a.btn.btn-gold{color:var(--navy)}

/* mega-menu feature link on the dark panel: was navy on navy (Aug 22 QA) */
.mega .mfeat a,.mega-feat a,.mfeat .go,.mega .go{color:#FFB000}
.mega [class*="feat"] a{color:#FFB000}
.mega [class*="feat"] a:hover{color:#fff}
/* mobile tap targets: 44px minimum */
@media (max-width:900px){
  .hdr-burger,.burger,[class*="burger"]{min-width:44px;min-height:44px}
  .hdr-cta,.hdr .btn{min-height:44px;display:inline-flex;align-items:center}
}

/* ==========================================================================
   HEADER AND MEGA MENU, 2026-08-25
   Three things were wrong and one was overdue.

   1. The panel was rgba(255,255,255,.97). At that alpha the hero headline
      behind it still ghosted through legibly, because the hero is near white
      on near navy and that is about as much contrast as a page can carry.
      Measured both ways: solid white renders clean with the backdrop blur
      left on, so the alpha was the cause, not the blur.
   2. The feature panel asked for 'Fraunces', which the site stopped using when
      the kit moved to Clash Display and General Sans. It was falling back to a
      generic serif, which is why the header did not match the pages.
   3. The nav sat at 14.5px with no tracking, lighter than everything it sits
      above.
   ========================================================================== */

/* ---- the panel itself ---- */
.hdr .mega-in{
  background:#FFFFFF;
  border:1px solid rgba(23,29,58,.10);
  border-radius:20px;
  box-shadow:0 30px 70px rgba(11,18,32,.20),0 4px 14px rgba(11,18,32,.08);
  grid-template-columns:1.85fr 1fr}
.hdr .mega-in::before{height:2px}

/* ---- nav: same family and weight as the page headings, sized to match ---- */
.hdr .hdr-nav a{
  font-family:'Geist',-apple-system,sans-serif;
  font-size:15px;font-weight:600;letter-spacing:.005em;padding:9px 18px}
.hdr .hdr-nav .car{width:9px;height:6px;stroke-width:2;margin-left:7px;opacity:.6}
.hdr .has-mega:hover .car{opacity:1}

/* ---- mega items ---- */
.hdr .mega-grid{padding:24px 22px;gap:4px}
.hdr .mega-grid .mi{
  padding:13px 14px;border-radius:12px;gap:14px;align-items:flex-start;
  transition:background .22s ease,transform .22s ease}
.hdr .mega-grid .mi:hover{background:rgba(23,29,58,.045);transform:translateX(2px)}
/* 2026-09-04, corrected: the menu names the same things the pages do, in the same words, so it is set
   in the same face. A service card title on a page ('.svc h3', e.g. "Feasibility Study") is Fraunces
   600; the menu entry that points at it is now Fraunces 600 too, and the line under it is Geist, the
   page's body face. Measured against the page rather than chosen: the two now match. */
.hdr .mega-grid .mi b{
  font-family:'Fraunces',Georgia,serif;
  font-size:15.5px;font-weight:600;letter-spacing:-.008em;line-height:1.3;
  font-optical-sizing:auto;color:var(--navy);display:block}
.hdr .mega-grid .mi small{
  font-family:'Geist',-apple-system,sans-serif;
  font-size:12.5px;font-weight:400;line-height:1.45;letter-spacing:normal;
  color:rgba(23,29,58,.6);display:block;margin-top:3px}
.hdr .mega-grid .mi:hover b{color:var(--gold-deep,#8A6200)}

/* the little glyph plate, quieter and square with the text */
.hdr .mega-grid .mi svg,.hdr .mega-grid .mi .ic{flex:none}
.hdr .mega-grid .mi>span:first-child,.hdr .mega-grid .mi .ic{
  width:38px;height:38px;border-radius:10px;
  background:rgba(23,29,58,.045);border:1px solid rgba(23,29,58,.06);
  display:flex;align-items:center;justify-content:center}

/* ---- feature panel: the site's display face, not the retired one ---- */
.hdr .mega-feature{padding:26px 24px;gap:7px}
.hdr .mega-feature b{
  font-family:'Fraunces',Georgia,serif;
  font-size:18px;font-weight:600;letter-spacing:-.012em;line-height:1.2;
  font-optical-sizing:auto;color:var(--white,#F7F2E7)}
.hdr .mega-feature small{
  font-family:'Geist',-apple-system,sans-serif;
  font-size:12.5px;font-weight:400;line-height:1.5;color:rgba(247,242,231,.72)}
.hdr .mega-feature .goldlink{
  font-family:'Geist',-apple-system,sans-serif;
  font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  margin-top:12px;padding-bottom:5px}

/* ---- drawer copy on the same families ---- */
.hdr .drawer a,.hdr .dw-in a{
  font-family:'Geist',-apple-system,sans-serif}
.hdr .drawer .dw-in b,.hdr .drawer h4{
  font-family:'Fraunces',Georgia,serif;
  font-weight:600;letter-spacing:-.008em;font-optical-sizing:auto}

/* ================= 2026-08-26: scrolled capsule must never wrap its nav ================= */
body .hdr .hdr-nav{flex-wrap:nowrap!important;white-space:nowrap}
body .hdr .hdr-nav a,body .hdr .hdr-nav button,body .hdr .hdr-nav .ni>*{white-space:nowrap!important}
body .hdr .hdr-nav .car{display:inline-block;vertical-align:middle}
body .hdr.scrolled .hdr-in{max-width:1180px!important;padding:9px 12px 9px 22px!important}
@media (min-width:1101px){
  body .hdr.scrolled .hdr-nav a,body .hdr.scrolled .hdr-nav button{padding:8px 13px!important;font-size:14px!important}
  body .hdr.scrolled .hdr .btn,body .hdr.scrolled .elementor-button{padding:11px 20px!important;font-size:13.5px!important}
}

/* 2026-09-04: the header button and the drawer were falling back to the system stack, which is how
   the same button rendered at two different weights on two different pages. */
.hdr .btn,.hdr .btn-gold,.hdr .dw-cta{font-family:'Geist',-apple-system,sans-serif;
  font-size:14px;font-weight:600;letter-spacing:.005em}
.hdr .dw-link,.hdr .dw-subs a{font-family:'Geist',-apple-system,sans-serif}


/* ==========================================================================
   2026-09-04: /top-rehab-marketing-agency-for-addiction/ (page 900314), colour only.

   Every band on that page is navy or slate, but most of its text carries no colour of
   its own, so it inherited the theme's #333 and #1f2124 and disappeared into the
   background. Nothing else about the page is touched: these rules sit at the lowest
   specificity that beats the theme default, so every element the page colours on
   purpose (gold, cream at reduced alpha, the CTA) keeps exactly the colour it has.
   ========================================================================== */
body.page-id-900314{color:#F5F1EA}
body.page-id-900314 h1,body.page-id-900314 h2,body.page-id-900314 h3,
body.page-id-900314 h4,body.page-id-900314 h5,body.page-id-900314 h6,
body.page-id-900314 p,body.page-id-900314 li,body.page-id-900314 strong,
body.page-id-900314 em,body.page-id-900314 td,body.page-id-900314 th{color:inherit}
body.page-id-900314 .elementor-heading-title{color:inherit}
/* the nested accordion sets its own near-black on the question and the body */
body.page-id-900314 .e-n-accordion-item-title,
body.page-id-900314 .e-n-accordion-item-title-text,
body.page-id-900314 .e-n-accordion-item > .e-con{color:#F5F1EA}
/* the open/close glyph is an inline SVG, so it takes fill, not colour */
body.page-id-900314 .e-n-accordion-item-title-icon{color:var(--gold,#FFB000)}
body.page-id-900314 .e-n-accordion-item-title-icon svg,
body.page-id-900314 .e-n-accordion-item-title-icon svg path,
body.page-id-900314 .e-n-accordion-item-title-icon i{fill:var(--gold,#FFB000)!important;
  color:var(--gold,#FFB000)!important}
/* a rise stated in a warning red, on navy, at 1.5:1. The figure is good news and it has
   to be readable: the page's own gold, matched to the arrow beside it. The rule matches
   the inline colour exactly, so no other inline-styled line is touched. */
/* the page writes the same hex in both cases, so the match is case-insensitive */
body.page-id-900314 p[style*="b84438" i]{color:var(--gold,#FFB000)!important}


/* ==========================================================================
   2026-09-04: one FAQ for the whole site.

   The homepage's accordion is the approved one: hairline rows, the question on the left, a circled
   plus on the right that fills gold when the row is open. Every other page was drawing a small gold
   glyph on the LEFT with no rules, which is what the client kept seeing as "not the same FAQ".
   The rules moved here, keyed on the .faq class the composer puts on every accordion, so the design
   is one thing in one place rather than a homepage-only block. They are !important because they beat
   Elementor's own per-widget accordion CSS, which is written at page-id specificity.
   ========================================================================== */
.faq .elementor-accordion .elementor-accordion-item{
  border:0!important;border-top:1px solid rgba(23,29,58,.14)!important}
.faq .elementor-accordion .elementor-accordion-item:last-child{
  border-bottom:1px solid rgba(23,29,58,.14)!important}
.faq .elementor-tab-title{display:flex;align-items:center;justify-content:space-between;gap:20px;
  text-align:start}
.faq .elementor-tab-title .elementor-accordion-title{order:1;flex:1;text-align:start}
/* Elementor sizes the glyph in ems at page-id specificity, which came out 24px wide against a 30px
   circle, so the box is stated here */
.faq .elementor-tab-title .elementor-accordion-icon{order:2;width:30px!important;height:30px!important;
  border-radius:50%;border:1px solid rgba(23,29,58,.14);display:grid;place-items:center;float:none;
  flex:none;transition:background .2s,border-color .2s}
.faq .elementor-tab-title .elementor-accordion-icon i,
.faq .elementor-tab-title .elementor-accordion-icon svg{font-size:12px;width:12px;height:12px;
  line-height:1}
.faq .elementor-tab-title.elementor-active .elementor-accordion-icon{background:#FFB000;
  border-color:#FFB000}
.faq .elementor-tab-content{border:0!important}


/* ==========================================================================
   2026-09-05: the drawer and the reading dial were on the system stack.
   The drawer renders as a sibling of .hdr, so every `.hdr .dw-*` rule missed it. The reading dial is
   appended to <body>, outside the article scope, so it never inherited the article's font.
   ========================================================================== */
.drawer,.drawer a,.drawer button,.drawer .dw-link,.drawer .dw-cta,.drawer .dw-subs a{
  font-family:'Geist',-apple-system,sans-serif}
.drawer .dw-link{font-weight:600;letter-spacing:.005em}
.drawer .dw-cta{font-weight:600;letter-spacing:.005em}
.bhpblog-bar,.bhpblog-dial,.bhpblog-dial .t,.bhpblog-dial .t small{
  font-family:'Geist',-apple-system,sans-serif}


/* ==========================================================================
   2026-09-05: the brand, in one place. Every layer used to declare its own copy of these values.
   Changing a face or a colour is now a change here, and each scope reads from it.
   ========================================================================== */
:root{
  --bhp-disp:'Fraunces',Georgia,serif;
  --bhp-body:'Geist',-apple-system,'Segoe UI',Roboto,sans-serif;
  --bhp-navy:#171D3A;
  --bhp-deep:#112337;
  --bhp-gold:#FFB000;
  --bhp-gold-deep:#E29C00;
  --bhp-cream:#F7F2E7;
  --bhp-slate:#374763;
  --bhp-line:rgba(23,29,58,.12);
  --bhp-on-dark:rgba(247,242,231,.78);
  --bhp-field:linear-gradient(160deg,#171D3A 0%,#141F3B 45%,#112337 100%);
  --bhp-glow:radial-gradient(50% 60% at 100% 0%,rgba(255,176,0,.12),rgba(255,176,0,0) 70%);
}


/* ==========================================================================
   2026-09-05: the mobile type scale for the AFC widgets only.

   Everything Elementor composes now carries its own tablet and mobile size, written into the widget
   by build/responsive.py, so nothing here needs to argue with it. What is left are the AFC widgets,
   whose markup is rendered by PHP and styled by their own stylesheets: those never had a mobile size
   at all. They are addressed by the class Elementor gives every custom widget, which is exact, so
   these rules can be ordinary declarations rather than another layer of !important.
   ========================================================================== */
@media (max-width:767px){
  [class*="elementor-widget-bhp_"] h2{font-size:26px;line-height:1.16;letter-spacing:-.018em}
  [class*="elementor-widget-bhp_"] h3{font-size:19px;line-height:1.3;letter-spacing:-.012em}
  [class*="elementor-widget-bhp_"] p{font-size:16.5px;line-height:1.7}

  /* the things that are meant to be a different size keep it */
  [class*="elementor-widget-bhp_"] :is(.fig,.eyebrow,.sk,.k,.chip,.b-ct,.bst-ct,.bab-date,.bst-state){
    font-size:revert;line-height:revert}
}


/* ==========================================================================
   2026-09-05: buttons that sit together are the same size.
   The pair in a hero or a CTA row was rendering at two different heights because each button sized
   itself to its own label. They share a height and a shape now, and the support line under each one
   starts on the same line as its neighbour's.
   ========================================================================== */
.paths,.cta-row,.v10-ctas{align-items:flex-start}
/* the buttons are not always inside a .paths row, so the rule is on the button itself.
   A shared height belongs to things that LOOK like buttons. Elementor also calls an underlined text
   link a button, and giving that a 50px box drops its gold rule to the bottom of the box, which reads
   as a stray line floating well below the words. Those are marked `.tlink` by the composer and a
   `.goldlink` in the hand-written pages, and they are excluded here rather than corrected afterwards. */
.elementor-button,.btn,.cta-row .pri,.cta-row .sec2{
  min-height:50px;display:inline-flex;align-items:center;justify-content:center;
  box-sizing:border-box;line-height:1.2}
.elementor-button.elementor-size-lg,.btn.big{min-height:56px}
/* An underline hugs its words. Elementor puts a widget's own classes on the wrapper div, not on the
   <a>, so the link is reached as `.tlink .elementor-button`; that is two classes against the one
   above, which is what lets it undo the shared height without saying !important. */
.tlink .elementor-button,.tlink.elementor-button,a.goldlink,.btn.goldlink{
  min-height:0;height:auto;display:inline-flex;align-items:baseline;justify-content:flex-start;
  line-height:1.3;
  /* the rule is as wide as the words. Elementor gives a button widget's <a> the full width of its
     column, so without this the underline ran the whole width of the card with the text at one end. */
  width:auto;max-width:100%;align-self:flex-start}
/* the widget wrapper must not stretch it either */
.elementor-widget.tlink{width:auto;max-width:100%}
.tlink .elementor-button.elementor-size-lg,.tlink.elementor-button.elementor-size-lg{min-height:0}
/* the chrome keeps its own proportions: a header pill is not a page CTA */
.elementor-location-header .elementor-button,.elementor-location-footer .elementor-button,
.hdr .btn,.hdr .elementor-button,.drawer .dw-cta{min-height:0}
/* the caption under a button: same gap from the button on every column */
.paths + .support,.paths + .ctanote,.pathcap,.paths .cap{margin-top:14px}
@media (max-width:767px){
  /* on a phone a pair stacks, and a stacked pair reads better full width */
  .paths .btn,.paths .elementor-button{width:100%;max-width:420px}
}


/* 2026-09-05: the header CTA was overflowing a 390px screen on both sides. It now fits the bar. */
@media (max-width:767px){
  .hdr .hdr-in,.elementor-location-header .e-con-inner{gap:8px}
  .hdr .hdr-cta,.hdr .btn-gold,.hdr .btn,.hdr .elementor-button,
  header .elementor-button,header .btn,
  .elementor-location-header .elementor-button,
  .elementor-location-header .btn,
  body .hdr a.btn-gold,body .hdr a.btn,body header a.btn-gold{display:none!important}
  /* the menu button carries the whole bar on a phone */
  .hdr .burger,.hdr .hdr-burger{margin-left:auto}
}



/* ==========================================================================
   2026-09-05, what the widget settings cannot reach.
   ========================================================================== */
@media (max-width:767px){
  /* The eyebrow keeps its size because responsive.py leaves anything at 18px or under alone, so
     nothing here has to hold it down any more. The AFC widgets still need a stated size, since their
     eyebrows are PHP markup rather than heading widgets. */
  [class*="elementor-widget-bhp_"] :is(.eyebrow,.sk,.lab-eyebrow,.bst-t,.eb){
    font-size:11.5px;line-height:1.5;letter-spacing:.16em;font-weight:500}

  /* copy takes the column it is given */
  body [class*="bhp-"] p,body .sec p,body .e-con p{width:100%;max-width:none}
  body [class*="bhp-"] .elementor-heading-title,body .sec h1,body .sec h2,body .sec h3{
    max-width:none}

  /* A stacked PAIR of buttons is one width. This used to say `body .e-con .elementor-button`, which is
     every button on the site, and it was stretching underlined text links to the full width of their
     card so the gold rule ran on long past the words. Scoped to the rows that actually hold a pair. */
  body :is(.paths,.cta-row,.v10-ctas,.ctarow) :is(.btn,.elementor-button):not(.tlink){
    width:100%;max-width:100%}
}


/* ==========================================================================
   2026-09-05: on a phone, a column is the measure.

   This used to force every widget and inner container to width:100%!important below 1024px, to undo
   the desktop percentages (70%, 64%, 74%) that had no mobile value. build/responsive.py now writes a
   mobile width into the widget itself, so the sweeping rule is not only redundant, it was doing harm:
   a widget that is positioned absolutely on purpose, like the step numeral on the photography page,
   was stretched to the full width of its card and hung 15px past the edge of the screen.

   What is left is the one thing the widget settings cannot say: a container may still be narrower
   than its parent for a good reason, so nothing is forced here.
   ========================================================================== */
@media (max-width:1024px){
  body .elementor-widget-container{max-width:100%}
  body .bhp-authorbox,body .bhp-states{width:100%}
}

/* The level-of-care cards turn on their side on a phone (build/home-a/compose.py). The theme puts a
   16px bottom margin on every heading title, an inner element no Elementor control reaches, so the
   two-line label inside the card carried 32px of air that does nothing once the card is a row. */
@media (max-width:767px){
  .slot .elementor-heading-title{margin-bottom:0}
  /* Elementor's phone breakpoint runs all the way to 767px, so a full-width card there is 660px of
     background holding three words. The card is capped and centred instead; the content stays packed
     left, which keeps the three icons on one vertical line. */
  .slot{max-width:420px;margin-left:auto;margin-right:auto}
}

/* An FAQ question where the accordion states no size of its own: Elementor writes nothing per widget,
   so the theme default carried a desktop 28px onto a phone and the question outsized the section
   heading above it. An ordinary rule is enough here, because there is nothing to outrank. */
@media (max-width:1024px){
  .elementor-widget-accordion .elementor-tab-title,
  .elementor-widget-toggle .elementor-tab-title{font-size:26px;line-height:1.3}
  .elementor-widget-accordion .elementor-tab-content,
  .elementor-widget-toggle .elementor-tab-content{font-size:17px;line-height:1.7}
}
@media (max-width:767px){
  .elementor-widget-accordion .elementor-tab-title,
  .elementor-widget-toggle .elementor-tab-title{font-size:20px}
  .elementor-widget-accordion .elementor-tab-content,
  .elementor-widget-toggle .elementor-tab-content{font-size:16.5px}
}


/* 2026-09-05: the stat figure.

   This was a `clamp(30px,8.5vw,40px)!important` written when the figures were being crushed by the
   old mobile paragraph rule. Both are gone: build/responsive.py now writes 36px into the figure
   widget itself, keyed on the `fig` class the composers already give it. The override outlived its
   reason and had started doing harm, because 8.5vw at 390px is 33.15px, so it beat the 36px the
   widget was asking for and the figures still did not match each other page to page.

   What is left is the AFC widgets, whose figures are PHP markup that no widget setting reaches. */
@media (max-width:767px){
  [class*="elementor-widget-bhp_"] :is(.fig,.stat .n,.lstat b,.statrow b,.istat b){
    font-size:36px;line-height:1.05;letter-spacing:-.02em;display:block}
  [class*="elementor-widget-bhp_"] :is(.lstat p,.statrow p,.istat p,.lstat .cap,.stat .c){
    font-size:13px;line-height:1.5;letter-spacing:.02em}
}

/* ==========================================================================
   2026-09-17: a focused button must keep its label.

   Hello Elementor's reset.css carries `[type="button"]:focus{color:#fff}` (and a debug pink on
   `[type="button"]` itself). It loads AFTER the widget stylesheets and matches at the same
   specificity, so it wins: every real <button> on a light panel turns its label white the instant it
   is clicked, and the word disappears. The client photographed it on the region tabs, where clicking
   "Midwest" made the word vanish.

   Elementor's own buttons are <a> elements and were never affected. This is scoped to the real
   buttons we render, so nothing else inherits a colour it did not ask for.
   ========================================================================== */
.bst-tab:focus,.bst-tab:focus-visible,.bst-tab:active{color:var(--navy,#171D3A)}
.ptab:focus,.ptab:focus-visible,.ptab:active{color:inherit}
.faq summary:focus,.faq summary:focus-visible,
.elementor-tab-title:focus,.elementor-tab-title:focus-visible{color:inherit}
.burger:focus,.burger:focus-visible{color:inherit}


/* ==========================================================================
   2026-09-17: the figure has to fit inside its ring.

   "150-400" was set at 30px inside a 124px circle, so it ran almost to the stroke and pushed
   "photos delivered" onto two cramped lines. The ring is a touch larger, the figure is sized to the
   width actually available inside a circle (about two thirds of the diameter, not all of it), and
   the figure never wraps: a range broken across two lines stops reading as one number.

   The class is doubled on purpose. The per-page stylesheets (bhp-csp.css and the bhp-*-el layers)
   are enqueued AFTER this file, so at equal specificity they win and a plain `.ec-ring` rule here
   would never apply. Doubling costs nothing and settles it regardless of load order. */
.ec-ring.ec-ring{width:136px;height:136px}
.ec-fig.ec-fig{padding-inline:15%}
.ec-fig.ec-fig b{font-size:25px;white-space:nowrap;letter-spacing:-.025em}
.ec-fig.ec-fig small{font-size:8.5px;line-height:1.25;letter-spacing:.08em}
@media (max-width:767px){
  .ec-ring.ec-ring{width:124px;height:124px}
  .ec-fig.ec-fig b{font-size:23px}
}

/* ==========================================================================
   2026-09-17: one team card for the whole site.

   Team sections were built two ways: a photo-led card on some pages (.tcard) and, on others, a text
   card with a decorative number and no face (.pcard). The numbers are gone and every card now carries
   a headshot, so the two only need to agree on proportions. Class doubled because the per-page
   stylesheets load after this file.
   ========================================================================== */
.pcard.pcard{display:flex;flex-direction:column;overflow:hidden}
.pcard.pcard .ph{width:100%;margin:0 0 4px}
.pcard.pcard .ph .elementor-widget-image{margin:0;width:100%}
.pcard.pcard .ph img{display:block;width:100%;height:230px;object-fit:cover;object-position:center 22%;
  border-radius:12px}
.pcard.pcard .tbody{display:flex;flex-direction:column}
@media (max-width:1024px){ .pcard.pcard .ph img{height:210px} }
@media (max-width:767px){ .pcard.pcard .ph img{height:240px} }

/* A hyphen is its own break opportunity, so a bound last pair can still break inside the hyphenated
   word. compose.no_orphan() wraps those in .nb; this is what makes it hold. */
.nb{white-space:nowrap}