/* rich.css: the gradient and glow layer on top of the component library. Loads last. */
.section.surface{background:linear-gradient(180deg,var(--surface) 0%,#f7f9fc 55%,var(--surface-2) 100%)}
.section:not(.surface):not(.on-dark){background:radial-gradient(1100px 520px at 12% -10%,rgba(11,42,92,.07),transparent 60%),radial-gradient(900px 480px at 100% 110%,rgba(215,20,28,.10),transparent 60%)}
.stat-bar{background:linear-gradient(120deg,var(--primary-dark) 0%,var(--primary) 45%,#041533 100%);position:relative;overflow:hidden}
.stat-bar::before{content:"";position:absolute;inset:-40% -10%;background:radial-gradient(closest-side,rgba(255,255,255,.14),transparent 70%);transform:translateX(30%);pointer-events:none;animation:richDrift 14s ease-in-out infinite alternate}
.process,.cta-band,.trust-bar{background:linear-gradient(160deg,#041533 0%,#082352 55%,#0b2a5c 100%)!important;position:relative;overflow:hidden}
.process::before,.cta-band::before,.trust-bar::before{content:"";position:absolute;inset:-30% -20%;background:radial-gradient(620px 420px at 20% 30%,rgba(215,20,28,.22),transparent 60%),radial-gradient(700px 500px at 85% 80%,rgba(11,42,92,.28),transparent 60%);pointer-events:none;z-index:0;animation:richDrift 18s ease-in-out infinite alternate}
.process>.container,.cta-band>.container,.trust-bar>.container{position:relative;z-index:1}
.process::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:44px 44px;-webkit-mask-image:radial-gradient(70% 70% at 50% 50%,#000 30%,transparent 100%);mask-image:radial-gradient(70% 70% at 50% 50%,#000 30%,transparent 100%);pointer-events:none;z-index:0}
.hero-dark::before{background:linear-gradient(100deg,rgba(4,21,51,.88) 0%,rgba(11,42,92,.62) 50%,rgba(4,21,51,.25) 100%)!important}
.hero-dark .hero-content{position:relative;z-index:2}
.btn-primary{background:linear-gradient(135deg,#df1c24 0%,var(--accent) 50%,#a50e14 100%);color:var(--accent-ink);border:0;box-shadow:0 8px 24px rgba(215,20,28,.28),inset 0 1px 0 rgba(255,255,255,.35)}
.btn-primary,.quote-fab{filter:brightness(.85);transition:filter .3s var(--ease-hover),transform .25s var(--ease-hover),box-shadow .3s var(--ease-hover),opacity .25s var(--ease-hover)}
.btn-primary:hover{background:linear-gradient(135deg,#df1c24 0%,var(--accent) 50%,#a50e14 100%);filter:brightness(1);box-shadow:0 12px 30px rgba(215,20,28,.38)}
.btn-primary:focus-visible{filter:brightness(1)}
.quote-fab:hover,.quote-fab:focus-visible{filter:brightness(1)}
@media(prefers-reduced-motion:reduce){.btn-primary,.quote-fab{transition:none}}
.quote-fab{background:linear-gradient(135deg,#df1c24,#a50e14);color:var(--accent-ink)}
.card,.img-card{border:1px solid rgba(6,26,61,.06);box-shadow:0 1px 2px rgba(6,26,61,.04),0 12px 30px -18px rgba(6,26,61,.25)}
.card:hover,.img-card:hover{box-shadow:0 0 0 1px rgba(215,20,28,.45),0 22px 48px -20px rgba(6,26,61,.45)}
.card-icon{background:linear-gradient(135deg,rgba(11,42,92,.12),rgba(215,20,28,.18));color:var(--primary-dark)}
.section-header h2::after{background:linear-gradient(90deg,var(--primary),var(--accent))!important}
/* Headlines stay one colour (client feedback): .hl is kept in markup but no longer recoloured. */
.hero-content h1 .hl,.hero-dark h1 .hl{background:none;color:inherit}
.split-media img,.ic-media img{filter:saturate(1.05) contrast(1.03)}
.split-media{position:relative}
.split-media::after{content:"";position:absolute;inset:auto -14px -14px auto;width:60%;height:60%;border-radius:var(--radius-lg);background:linear-gradient(135deg,rgba(11,42,92,.16),rgba(215,20,28,.18));z-index:-1}
.eyebrow{background:linear-gradient(90deg,rgba(11,42,92,.10),rgba(215,20,28,.14))}
.on-dark .eyebrow{background:rgba(255,255,255,.08)}
/* Labels on navy read in white; red stays for the dot and buttons only. */
:is(.on-dark,.section.dark,.hero-dark,.process,.cta-dark,.cta-band,.sidebar-cta,.quick-response,.trust-bar,.stat-bar) .eyebrow{color:rgba(255,255,255,.88)}
.faq-item{background:linear-gradient(180deg,#fff,#f7f9fc)}
.site-footer{background:linear-gradient(180deg,#061a3d 0%,#041533 100%)!important}
.footer-top{border-top:3px solid transparent;border-image:linear-gradient(90deg,var(--primary),var(--accent)) 1}
@keyframes richDrift{from{transform:translate3d(-3%,-2%,0)}to{transform:translate3d(3%,3%,0)}}
@media(prefers-reduced-motion:reduce){.stat-bar::before,.process::before,.cta-band::before,.trust-bar::before{animation:none}}

/* QA pass: dropdown dismissed with Escape; FAB tucks away over quote forms and under the drawer */
.nav-dropdown.is-dismissed .dropdown-menu{opacity:0!important;visibility:hidden!important;pointer-events:none!important;transform:translateY(6px)!important}
.quote-fab.is-away,body.nav-open .quote-fab{opacity:0;pointer-events:none;transform:translateY(24px)}
/* Trust ticker */
.brand-marquee.trust-ticker{padding:34px 0;background:linear-gradient(180deg,var(--surface) 0%,var(--bg) 100%)}
.brand-marquee.trust-ticker .brand-track{gap:0;animation-duration:48s}
.brand-marquee.trust-ticker .brand-track span{font-family:var(--font-display);font-weight:600;font-size:1.35rem;color:var(--text-secondary);opacity:.85;padding:0 26px;white-space:nowrap}
.brand-marquee.trust-ticker .brand-track .bm-dot{padding:0;width:7px;height:7px;border-radius:50%;background:var(--accent);opacity:1;display:inline-block}

/* Focus ring: white on navy surfaces (base red ring lives in components.css). */
:is(.on-dark,.section.dark,.hero-dark,.process,.cta-band,.trust-bar,.stat-bar,.site-footer,.site-header.header-transparent:not(.header-scrolled)) :is(a,button,input,select,textarea,[tabindex]):focus-visible,.quote-fab:focus-visible,.btn-primary:focus-visible{outline-color:#fff}
.btn-primary:focus-visible{box-shadow:0 0 0 5px var(--accent)}
/* Glow CTA: pulse on its own ring layer, so hover never freezes a half-drawn glow (the old flicker). */
.btn-glow{animation:none}
.btn-glow::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;animation:btn-ring 2.8s ease-in-out infinite;transition:opacity .3s var(--ease-hover)}
.btn-glow:hover::after,.btn-glow:focus-visible::after{opacity:0}
@keyframes btn-ring{0%{box-shadow:0 0 0 0 rgba(215,20,28,.5)}70%,100%{box-shadow:0 0 0 12px rgba(215,20,28,0)}}
@media(prefers-reduced-motion:reduce){.btn-glow::after{animation:none}}
/* Card links match the navy "Details →" links elsewhere instead of falling back to body text. */
.img-card .cc-foot{display:inline-flex;align-items:center;gap:7px;margin-top:auto;font-weight:600;font-size:.9rem;color:var(--primary);white-space:nowrap}
.img-card .cc-foot svg{width:15px;height:15px;transition:transform .16s var(--ease-hover)}
.img-card:hover .cc-foot svg{transform:translateX(4px)}
/* Page heroes clear the fixed header (topbar + nav) instead of tucking the label under it. */
main > .hero-pad:first-child{padding-top:calc(var(--header-total) + 56px)}
@media(max-width:768px){main > .hero-pad:first-child{padding-top:calc(var(--header-total) + 36px)}}
/* Step numbers on navy: white numeral inside the red ring (red text on navy was 3.3:1). */
.process-num{color:#fff}
/* Phones: the work gallery reads as a two-up grid instead of twelve full-width cards. */
@media(max-width:640px){#work .grid-4{grid-template-columns:1fr 1fr;gap:12px}#work .img-card .ic-body{padding:12px 12px 14px}#work .img-card h3,#work .img-card h4{font-size:.95rem}}