@font-face {
  font-family: 'Manrope';
  src: url('../fonts/manrope.woff2') format('woff2');
  font-weight: 400 800; font-style: normal; font-display: swap;
}

/* Shield Low Voltage — site chrome + homepage sections (faithful to the original Elementor design). */

:root {
  --brand: #268DEE;
  --brand-deep: #1B68B1;
  --navy: #16243E;
  --navy-deep: #101C33;
  --cream: #FFF8F2;
  --ink-soft: #6C6E76;
  --line: #E9E5E0;
  --sans: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--sans); color: var(--navy); background: #fff; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; }
a { color: inherit; }
.wrap { max-width: 1290px; margin: 0 auto; padding: 0 24px; }

/* ---------- buttons ---------- */
.btn-blue, .btn-navy {
  display: inline-flex; align-items: center; gap: 9px;
  font: 700 15px/1 var(--sans); letter-spacing: .01em; text-decoration: none;
  padding: 17px 30px; border-radius: 999px; transition: background .25s, transform .2s;
}
.btn-blue { background: var(--brand); color: #fff; }
.btn-blue:hover { background: var(--brand-deep); }
.btn-navy { background: var(--navy); color: #fff; }
.btn-navy:hover { background: var(--navy-deep); }
.btn-blue span, .btn-navy span { font-size: 17px; line-height: 1; transition: transform .2s; }
.btn-blue:hover span, .btn-navy:hover span { transform: translateX(3px); }

.eyebrow-blue { font: 700 17px/1.3 var(--sans); color: var(--brand); margin: 0 0 10px; }
.eyebrow-blue.center { text-align: center; }

/* ================= NAV ================= */
.site-nav { position: relative; z-index: 200; }
/* Overlay pages: transparent over the hero, then the smart-header pattern —
   hide on scroll down, reappear frosted the moment the user scrolls up. */
.nav-overlay .site-nav {
  position: fixed; top: 0; left: 0; right: 0; background: transparent;
  transition: transform .28s ease, background .28s ease, box-shadow .28s ease;
}
.nav-overlay .site-nav.nav-hidden { transform: translateY(-110%); }
.nav-overlay .site-nav.nav-scrolled {
  background: rgba(13, 22, 40, .6);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  backdrop-filter: blur(18px) saturate(1.5);
  box-shadow: 0 2px 18px rgba(10,18,35,.22);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav-overlay .site-nav.nav-scrolled { background: var(--navy); }
}
/* Light-hero overlay variant: identical smart-header behavior, but the
   floating transparent state uses dark links so the nav reads over white
   or very bright heroes. The frosted navy scrolled state (white links)
   takes over as soon as the page moves. */
.nav-overlay.nav-light .site-nav:not(.nav-scrolled) .nav-menu a { color: var(--navy); }
.nav-overlay.nav-light .site-nav:not(.nav-scrolled) .nav-menu > ul > li > a:hover { color: var(--brand); }
.nav-overlay.nav-light .site-nav:not(.nav-scrolled) .nav-burger span { background: var(--navy); }
/* Retrofitted light-overlay pages were laid out for the in-flow sticky bar;
   the fixed nav floats over them, so their heroes need the bar's height back. */
.nav-overlay.nav-light .px-hero, .nav-overlay.nav-light .px-vk-hero-light { padding-top: 96px; }
/* frosted sticky header on interior pages — page tones bleed through the blur,
   but the tint stays heavy enough that the white nav text always reads */
.nav-solid .site-nav {
  position: sticky; top: 0;
  /* Kyle: a touch more transparent so page color reads through the blur.
     .60 keeps white nav text at ~7:1 over the worst-case light pages
     because the blur averages the ground behind it. */
  background: rgba(13, 22, 40, .6);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  backdrop-filter: blur(18px) saturate(1.5);
  box-shadow: 0 2px 18px rgba(10,18,35,.22);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav-solid .site-nav { background: var(--navy); }
}
.nav-wrap {
  position: relative;
  max-width: 1360px; margin: 0 auto; padding: 14px 28px;
  display: flex; align-items: center; gap: 30px;
}
.nav-brand { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.nav-brand img { width: 47px; height: auto; }
.nav-wordmark { display: flex; flex-direction: column; line-height: 1; }
.nav-wordmark strong { font: 800 31.1px/1 var(--sans); letter-spacing: .02em; }
.nav-wordmark em { font: 800 12.9px/1 var(--sans); font-style: normal; letter-spacing: .18em; margin-top: 5px; }
.nav-wordmark strong, .nav-wordmark em {
  color: #2E62F0; /* fallback: mid-tone of the insignia gradient */
  background: linear-gradient(180deg, #4A7EFF 0%, #2E62F0 55%, #1B41CC 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* dark bar: bevel edge + soft lift, like the insignia (text-shadow bleeds through clipped
   gradients, so drop-shadow filters instead) */
.site-nav .nav-wordmark strong, .site-nav .nav-wordmark em {
  background: linear-gradient(180deg, #4A7EFF 0%, #3568F4 55%, #2857D8 100%); /* a notch brighter than the footer */
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-stroke: 1px #3568F4; /* Manrope tops out at wght 800 — stroke fattens the letters past it */
  filter: drop-shadow(0 1px 0 #0D2168); /* bevel edge only; soft shadow removed */
}

/* footer lockup: larger text against the 67px logo, same width-locked proportions */
.foot-logo .nav-wordmark strong { font-size: 36.7px; }
.foot-logo .nav-wordmark em { font-size: 15.2px; margin-top: 6px; }

.nav-menu { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); transition: opacity .5s ease; }
body.touring-ui .nav-menu { opacity: 0; pointer-events: none; }
.nav-cta { margin-left: auto; }
.nav-menu > ul { display: flex; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; }
.nav-menu > ul > li { position: relative; }
.nav-menu a {
  display: flex; align-items: center; gap: 7px;
  font: 700 15px/1 var(--sans); color: #fff; text-decoration: none;
  padding: 14px 15px; border-radius: 8px; transition: color .2s;
}
.nav-menu > ul > li > a:hover { color: var(--brand); }
.caret { width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); opacity: .8; }
.caret.side { transform: rotate(-45deg); margin-left: auto; }

.nav-menu .sub {
  position: absolute; top: 100%; left: 0; min-width: 250px;
  background: #fff; border-radius: 10px; box-shadow: 0 18px 50px rgba(10,18,35,.18);
  list-style: none; margin: 0; padding: 10px;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .22s, transform .22s, visibility .22s;
}
.nav-menu li:hover > .sub, .nav-menu li:focus-within > .sub { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-menu .sub li { position: relative; }
.nav-menu .sub a { color: var(--navy); font-weight: 600; font-size: 14.5px; padding: 11px 13px; }
.nav-menu .sub a:hover { color: var(--brand); background: #F3F7FC; }
.nav-menu .side-sub { top: -10px; left: 100%; }

.nav-cta {
  display: inline-flex; align-items: center; gap: 9px;
  font: 800 14px/1 var(--sans); color: #fff; text-decoration: none;
  padding: 16px 26px; border-radius: 999px;
  white-space: nowrap;
  /* Raised navy rather than flat blue, matching the contact panel and the
     hero CTAs. It has to read on two very different grounds — the bright
     sky behind the front-page hero, and the frosted dark header on interior
     pages — so the gradient sits lighter than the header tint and carries
     its own shadow. */
  background:
    radial-gradient(140% 200% at 20% 0%, rgba(124,187,255,.2) 0%, rgba(124,187,255,0) 62%),
    linear-gradient(168deg, #2C4772 0%, #1E3355 54%, #16274A 100%);
  box-shadow:
    inset 0 0 0 1px rgba(232,182,120,.5),
    inset 0 1px 0 rgba(255,255,255,.18),
    0 6px 18px -6px rgba(5,11,24,.7);
  transition: background .25s, box-shadow .25s, transform .2s;
}
.nav-cta:hover {
  background:
    radial-gradient(140% 200% at 20% 0%, rgba(124,187,255,.28) 0%, rgba(124,187,255,0) 62%),
    linear-gradient(168deg, #355384 0%, #253C63 54%, #1A2C52 100%);
  box-shadow:
    inset 0 0 0 1px rgba(232,182,120,.75),
    inset 0 1px 0 rgba(255,255,255,.22),
    0 10px 24px -7px rgba(5,11,24,.8);
  transform: translateY(-1px);
}

.nav-burger { display: none; margin-left: auto; background: none; border: none; cursor: pointer; padding: 10px; }
.nav-burger span { display: block; width: 24px; height: 2.5px; background: #fff; margin: 5px 0; border-radius: 2px; }

/* mobile overlay menu */
.nav-overlay-menu {
  position: fixed; inset: 0; z-index: 500;
  background:
    radial-gradient(120% 60% at 85% -10%, rgba(217,164,65,.14) 0%, rgba(217,164,65,0) 55%),
    linear-gradient(168deg, var(--navy-deep) 0%, #0A1426 100%);
  padding: 20px 28px 44px; overflow-y: auto;
  opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility .35s;
}
.nav-overlay-menu.open { opacity: 1; visibility: visible; }
.ovl-head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 18px; margin-bottom: 10px;
  border-bottom: 1px solid rgba(217,164,65,.28);
}
.ovl-x {
  width: 42px; height: 42px; border-radius: 50%;
  background: none; border: 1px solid rgba(255,255,255,.28); color: #fff;
  font-size: 24px; line-height: 1; cursor: pointer; padding: 0;
  transition: border-color .2s, color .2s;
}
.ovl-x:hover { border-color: #D9A441; color: #D9A441; }
.ovl-link {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  font: 400 27px/1.25 'Marcellus', 'Georgia', serif; letter-spacing: .015em;
  color: #fff; text-decoration: none; text-align: left;
  background: none; border: none; border-bottom: 1px solid rgba(255,255,255,.08);
  padding: 19px 2px; cursor: pointer;
}
.ovl-link .caret {
  border-color: #D9A441; opacity: .9;
  transition: transform .3s ease;
  transform: rotate(45deg) translateY(-2px);
}
.ovl-acc.open .caret { transform: rotate(225deg) translateY(-2px); }
.ovl-sub {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .4s cubic-bezier(.4, 0, .2, 1);
}
.ovl-sub.open { grid-template-rows: 1fr; }
.ovl-sub-in {
  overflow: hidden; min-height: 0;
  border-left: 1px solid rgba(217,164,65,.35);
  margin: 0 0 0 3px; padding-left: 15px;
}
.ovl-sub-in > :first-child { margin-top: 8px; }
.ovl-sub-in > :last-child { margin-bottom: 14px; }
.ovl-sub a {
  display: block; font: 600 15.5px/1.4 var(--sans); color: #B9C7DD;
  text-decoration: none; padding: 10px 10px;
  border-radius: 8px; transition: color .15s, background .15s;
}
.ovl-sub a:active, .ovl-sub a:hover { color: #fff; background: rgba(255,255,255,.05); }
.ovl-cta {
  display: flex; justify-content: center; margin-top: 30px;
  font: 800 15px/1 var(--sans); color: #fff; text-decoration: none;
  padding: 18px 30px; border-radius: 999px;
  background:
    radial-gradient(140% 200% at 20% 0%, rgba(124,187,255,.2) 0%, rgba(124,187,255,0) 62%),
    linear-gradient(168deg, #2C4772 0%, #1E3355 54%, #16274A 100%);
  box-shadow:
    inset 0 0 0 1px rgba(232,182,120,.5),
    inset 0 1px 0 rgba(255,255,255,.18),
    0 14px 34px -10px rgba(5,11,24,.75);
}

.ovl-foot {
  margin: 22px 0 0; text-align: center;
  font: 600 12px/1.8 var(--sans); letter-spacing: .04em; color: #7186A6;
}
@media (prefers-reduced-motion: no-preference) {
  .nav-overlay-menu nav > * { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s cubic-bezier(.16, 1, .3, 1); }
  .nav-overlay-menu.open nav > *  { opacity: 1; transform: none; }
  .nav-overlay-menu.open nav > *:nth-child(1) { transition-delay: .05s; }
  .nav-overlay-menu.open nav > *:nth-child(2) { transition-delay: .1s; }
  .nav-overlay-menu.open nav > *:nth-child(3) { transition-delay: .14s; }
  .nav-overlay-menu.open nav > *:nth-child(4) { transition-delay: .18s; }
  .nav-overlay-menu.open nav > *:nth-child(5) { transition-delay: .22s; }
  .nav-overlay-menu.open nav > *:nth-child(6) { transition-delay: .26s; }
  .nav-overlay-menu.open nav > *:nth-child(7) { transition-delay: .3s; }
  .nav-overlay-menu.open nav > *:nth-child(8) { transition-delay: .34s; }
  /* accordion panels answer the tap immediately — no entrance stagger,
     no inherited delay on their height animation */
  .nav-overlay-menu nav > .ovl-sub,
  .nav-overlay-menu.open nav > .ovl-sub {
    opacity: 1; transform: none;
    transition: grid-template-rows .35s cubic-bezier(.4, 0, .2, 1);
    transition-delay: 0s;
  }
}

/* hero sits under the transparent nav — push the headline clear of it */
@media (min-width: 761px) {
  .nav-overlay .stage .copy { top: clamp(92px, 11vh, 122px); }
}
.stage .copy h1 { color: #F4F8FF; }.mi-lbl.on { color: #fff; }.mi-toggle .knob {
  position: absolute; top: 4px; left: 5px; width: 18px; height: 18px;
  border-radius: 50%; background: #fff; transition: transform .25s;
}
.mi-toggle[aria-checked="true"] .knob { transform: translateX(24px); }
/* ================= BLOG ================= */
.sec-blog { background: #fff; padding: 96px 0 100px; }
.blog-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 44px; }
.blog-head h2 { font: 800 40px/1.2 var(--sans); margin: 0; }
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.blog-card { border: 1px solid #ECECEC; border-radius: 12px; background: #fff; box-shadow: 0 10px 34px rgba(16,28,51,.05); overflow: hidden; display: flex; flex-direction: column; }
.bc-img { display: block; margin: 18px 18px 0; border-radius: 8px; overflow: hidden; }
.bc-img img { display: block; width: 100%; height: 215px; object-fit: cover; transition: transform .6s; }
.blog-card:hover .bc-img img { transform: scale(1.06); }
.bc-body { padding: 20px 26px 28px; display: flex; flex-direction: column; align-items: flex-start; }
.bc-meta { display: flex; gap: 22px; font: 600 13.5px/1 var(--sans); color: var(--ink-soft); margin: 0 0 6px; padding-bottom: 14px; border-bottom: 1px solid #F0F0F0; width: 100%; }
.bc-meta span { display: inline-flex; align-items: center; gap: 7px; }
.bc-meta svg { color: var(--brand); }
.bc-body h3 { font: 800 19.5px/1.35 var(--sans); margin: 12px 0 10px; }
.bc-body h3 a { color: var(--brand); text-decoration: none; }
.bc-body h3 a:hover { color: var(--navy); }
.bc-excerpt { font: 500 14.5px/1.65 var(--sans); color: var(--ink-soft); margin: 0 0 16px; }
.bc-more { font: 800 14px/1 var(--sans); color: var(--navy); text-decoration: none; display: inline-flex; align-items: center; gap: 7px; }
.bc-more:hover { color: var(--brand); }

/* ================= PARTNERS ================= */
.sec-partners { background: #fff; padding: 20px 0 90px; }
.sec-partners h2 { font: 800 40px/1.2 var(--sans); text-align: center; margin: 0 0 46px; }
.partner-marquee { overflow: hidden; }
.pm-track { display: flex; width: max-content; animation: pm-scroll 42s linear infinite; }
.partner-marquee:hover .pm-track { animation-play-state: paused; }
/* once the JS rail controller is live it owns the transform, so the keyframe
   animation stands down; it remains the fallback when JS doesn't run */
.partner-marquee.pm-js .pm-track { animation: none; }
.partner-marquee.pm-js { cursor: grab; }
.partner-marquee.pm-drag { cursor: grabbing; user-select: none; }
.partner-marquee.pm-drag a { pointer-events: none; }
.pm-set { display: flex; align-items: center; gap: 30px; padding-right: 30px; }
.pm-set img { width: 160px; height: auto; }
.pm-set a { display: block; line-height: 0; }
@keyframes pm-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .pm-track { animation: none; } }

/* ================= CONTACT STRIP ================= */
.contact-strip-band { background: #fff; padding: 64px 0 90px; }

/* The contact panel carries the company's name now, so it had to stop
   looking like a blue button and start looking like the rest of the site:
   the same navy the dark panels use, a hairline edge, and a slow wash of
   light off the top-left so it reads as a surface rather than a swatch. */
.contact-strip {
  position: relative; overflow: hidden;
  background:
    radial-gradient(120% 150% at 8% 0%, rgba(124,187,255,.13) 0%, rgba(124,187,255,0) 58%),
    linear-gradient(158deg, #12203A 0%, #16243E 52%, #1A2C4C 100%);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 20px; color: #fff;
  display: grid; grid-template-columns: minmax(0, .84fr) minmax(0, 1.58fr);
  gap: 46px; padding: 40px 48px 42px; align-items: center;
}
/* a single gold filament along the top edge — the only warm thing here */
.contact-strip::before {
  content: ''; position: absolute; left: 48px; right: 48px; top: 0; height: 1px;
  background: linear-gradient(90deg, rgba(233,201,137,0) 0%, rgba(233,201,137,.7) 22%, rgba(233,201,137,.7) 78%, rgba(233,201,137,0) 100%);
}

.cs-id { display: flex; flex-direction: column; align-items: flex-start; }
.cs-logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.cs-logo img { width: 50px; height: auto; }
.nav-wordmark.on-dark strong, .nav-wordmark.on-dark em {
  background: none; -webkit-text-fill-color: currentColor; color: #fff;
}
.nav-wordmark.on-dark em { color: #7CBBFF; }

.cs-line {
  margin: 17px 0 0; max-width: 40ch;
  font: 500 14.5px/1.75 var(--sans); color: #A9BCD6;
}
.cs-social { display: flex; gap: 9px; padding-top: 22px; }
.cs-social a {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
  color: #C4D2E8; display: inline-flex; align-items: center; justify-content: center;
  transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.cs-social a:hover { background: var(--brand); border-color: var(--brand); color: #fff; transform: translateY(-2px); }
.cs-social a:focus-visible { outline: 2px solid #E9C989; outline-offset: 2px; }

/* three ways to reach us, each its own quiet tile */
.cs-reach { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; }
.cs-item {
  display: flex; flex-direction: column; align-items: flex-start;
  text-decoration: none; color: #fff;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09);
  border-radius: 13px; padding: 20px 20px 18px;
  transition: background .2s, border-color .2s, transform .2s;
}
.cs-item:hover { background: rgba(255,255,255,.08); border-color: rgba(124,187,255,.42); transform: translateY(-2px); }
.cs-item:focus-visible { outline: 2px solid #E9C989; outline-offset: 2px; }
.cs-ico { color: #E9C989; display: inline-flex; margin-bottom: 13px; }
.cs-lbl {
  font: 800 10.5px/1 var(--sans); letter-spacing: .15em; text-transform: uppercase;
  color: #8FA3C2; margin-bottom: 8px;
}
.cs-val { font: 800 16px/1.35 var(--sans); color: #fff; }
.cs-alt { font: 500 13px/1.5 var(--sans); color: #A9BCD6; margin-top: 3px; }

/* ================= FOOTER ================= */
.site-foot { background: #fff; position: relative; }
.foot-grid {
  display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.02fr) minmax(0, 1.02fr) minmax(0, 1.34fr); gap: 34px;
  padding-top: 4px;
  padding-top: 8px; padding-bottom: 66px;
}.foot-brand p { font: 500 14.5px/1.85 var(--sans); color: var(--ink-soft); margin: 0 0 22px; max-width: 40ch; }.foot-col h5 { font: 800 16.5px/1 var(--sans); color: var(--navy); margin: 14px 0 8px; padding-bottom: 13px; position: relative; }
.foot-col h5::after { content: ''; position: absolute; left: 0; bottom: 0; width: 42px; height: 2px; background: var(--navy); }
.foot-col a {
  display: block; font: 700 13.5px/1.4 var(--sans); color: var(--brand);
  text-decoration: none; margin-top: 13px;
}
.foot-col a::before { content: '\00BB'; margin-right: 10px; }
.foot-col a:hover { color: var(--navy); }
/* twelve brands read better as two ranks of six */
.foot-brand-cols { display: grid; grid-template-columns: 1fr 1fr; column-gap: 18px; }
.foot-brand-cols a { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.foot-bottom { border-top: 1px solid #EEEDEB; padding: 22px 0; }
.fb-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.fb-row p { margin: 0; font: 500 14px/1.5 var(--sans); color: var(--ink-soft); }
.fb-links a { color: var(--brand); font-weight: 700; text-decoration: none; margin-left: 22px; }
/* ================= RESPONSIVE ================= */
@media (max-width: 1080px) {
  .nav-menu { display: none; }
  .nav-cta { display: none; }
  .nav-burger { display: block; }  .foot-grid { grid-template-columns: 1fr 1fr; }
  .contact-strip { grid-template-columns: 1fr; gap: 34px; padding: 34px 30px 36px; }
  .cs-social { padding-top: 20px; }
}

@media (max-width: 760px) {  .wa-item { min-height: 84px; }
  .wa-item img { position: absolute; }
  .wa-item.active { min-height: 320px; }  .sec-blog { padding: 64px 0 70px; }
  .blog-head { flex-direction: column; align-items: flex-start; }
  .blog-head h2 { font-size: 30px; }
  .blog-grid { grid-template-columns: 1fr; }
  .sec-partners h2 { font-size: 30px; }
  .contact-strip { grid-template-columns: 1fr; padding: 30px 26px; }
  .foot-grid { grid-template-columns: 1fr; gap: 8px; }
  .cs-reach { grid-template-columns: 1fr; }
  .contact-strip::before { left: 26px; right: 26px; }
  .fb-row { justify-content: center; text-align: center; }
}


/* ---------- reviews carousel (grx) — luxury pass over the old grid ---------- */
.grx { background: var(--cream); padding: 96px 0 84px; }
.grx-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 34px; flex-wrap: wrap; margin-bottom: 44px; }
.grx .grx-eyebrow { color: var(--brand); letter-spacing: .14em; }
.grx-title { font: 400 clamp(30px, 3.4vw, 44px)/1.12 'Marcellus', 'Georgia', serif; color: var(--navy); margin: 10px 0 0; letter-spacing: .01em; }
.grx-scores { display: flex; gap: 0; align-items: stretch; }
.grx-score {
  display: flex; flex-direction: column; align-items: flex-end; gap: 3px;
  padding: 2px 26px; text-decoration: none;
}
.grx-score + .grx-score { border-left: 1px solid rgba(22,36,62,.14); }
.grx-score:last-child { padding-right: 0; }
.grx-score strong { font: 800 30px/1 var(--sans); color: var(--navy); }
.grx-stars { color: #D9A441; font-size: 12px; letter-spacing: 2px; }
.grx-score em { font: 600 12.5px/1.2 var(--sans); font-style: normal; color: var(--ink-soft); white-space: nowrap; }
.grx-g { color: #4285F4; } .grx-tt, .grx-src-thumbtack { color: #009FD9; } .grx-an, .grx-src-angi { color: #FF6153; }
.grx-bk, .grx-src-bark { color: #111637; }
.grx-src-google { color: #4285F4; }
.grx-score em b { font-weight: 800; }
a.grx-score:hover strong { color: var(--brand); }

.grx-railwrap { position: relative; }
.grx-rail {
  display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 6px 4px 26px; margin: 0 -4px;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
}
.grx-rail::-webkit-scrollbar { display: none; }
.grx-card {
  flex: 0 0 390px; scroll-snap-align: start;
  position: relative; margin: 0;
  background: #fff; border: 1px solid rgba(22,36,62,.10); border-radius: 20px;
  padding: 34px 32px 28px; display: flex; flex-direction: column;
  box-shadow: 0 18px 44px rgba(22,36,62,.07);
}
.grx-quote {
  position: absolute; top: 10px; right: 24px;
  font: 400 92px/1 'Marcellus', 'Georgia', serif; color: rgba(185,138,70,.16);
  pointer-events: none;
}
.grx-card-stars { color: #D9A441; font-size: 14px; letter-spacing: 3.5px; margin-bottom: 14px; }
.grx-card blockquote { margin: 0 0 22px; font: 500 15.5px/1.68 var(--sans); color: #3d4a63; flex: 1; }
.grx-card figcaption { display: flex; align-items: center; gap: 12px; border-top: 1px solid rgba(22,36,62,.08); padding-top: 16px; }
.grx-card figcaption img { border-radius: 50%; display: block; width: 40px; height: 40px; object-fit: cover; }
.grx-ava { position: relative; flex: none; width: 40px; height: 40px; }
/* Google's Local Guide badge, recreated so the circle crop can't clip it —
   it overlaps the avatar edge just like the original */
.grx-lg {
  position: absolute; right: -3px; bottom: -3px;
  width: 19px; height: 19px; border-radius: 50%;
  background: #E8710A; border: 2px solid #fff;
  display: flex; align-items: center; justify-content: center;
}
.grx-mono {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--navy); color: #E9C989;
  font: 400 18px/1 'Marcellus', 'Georgia', serif; font-style: normal;
}
.grx-card figcaption strong { display: block; font: 700 14.5px/1.2 var(--sans); color: var(--navy); }
.grx-card figcaption em { font: 600 12.5px/1.4 var(--sans); font-style: normal; color: var(--ink-soft); }
.grx-card figcaption em b { font-weight: 800; }
.grx-guide { color: #B98A46; font-weight: 800; }
.grx-nav { display: flex; justify-content: flex-end; gap: 10px; margin-top: 2px; }
.grx-arrow {
  width: 46px; height: 46px; border-radius: 50%;
  border: 1.5px solid rgba(22,36,62,.22); background: none; color: var(--navy);
  font-size: 18px; cursor: pointer; transition: border-color .2s, color .2s, background .2s;
}
.grx-arrow:hover { border-color: var(--brand); color: var(--brand); background: #fff; }
.grx-foot { text-align: center; margin: 8px 0 0; }
.grx-foot a { font: 700 14.5px/1 var(--sans); color: var(--brand); text-decoration: none; }
.grx-foot a:hover { text-decoration: underline; }
@media (max-width: 900px) {
  .grx { padding: 70px 0 60px; }
  .grx-scores { width: 100%; justify-content: space-between; }
  .grx-score { padding: 2px 12px; align-items: flex-start; }
  .grx-score:first-child { padding-left: 0; }
  /* full-bleed rail; cards snap to CENTER so both edges peek evenly */
  .grx-rail {
    margin: 0 -24px; padding: 6px 24px 22px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 30px, #000 calc(100% - 30px), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 30px, #000 calc(100% - 30px), transparent 100%);
  }
  .grx-card { flex-basis: calc(100vw - 88px); scroll-snap-align: center; }
  .grx-nav { display: none; }
}

/* brand-page hero overline: the dealer claim, above the headline */
.brand-overline {
  font: 800 12px/1 var(--sans); letter-spacing: .15em; text-transform: uppercase;
  color: #fff; opacity: .82; margin: 0 0 16px;
}

/* ---------- services mega-menu ---------- */
.nav-menu .mega {
  position: absolute; top: 100%; left: 50%;
  /* geometric center reads left of the trigger word because the panel's
     left-aligned content carries the visual weight — nudge right */
  transform: translateX(calc(-50% + 16px)) translateY(12px);
  width: 660px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px 26px;
  background: #fff; border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 24px 64px rgba(13, 27, 51, .16);
  padding: 26px 26px 20px;
  opacity: 0; visibility: hidden;
  transition: opacity .22s, transform .22s, visibility .22s;
}
.nav-menu li:hover > .mega, .nav-menu li:focus-within > .mega {
  opacity: 1; visibility: visible; transform: translateX(calc(-50% + 16px)) translateY(4px);
}
.mega-label {
  display: flex; align-items: center; gap: 8px;
  font: 800 11.5px/1 var(--sans); letter-spacing: .13em; text-transform: uppercase;
  color: var(--brand); margin: 0 0 10px; padding: 0 12px;
}
.mega-label svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mega-col a {
  display: block; font: 600 14.5px/1.35 var(--sans); color: var(--navy); text-decoration: none;
  padding: 10px 12px; border-radius: 9px; transition: background .15s, color .15s;
}
.mega-col a:hover { background: #F1F6FC; color: var(--brand); }
.mega-foot {
  grid-column: 1 / -1; display: flex; gap: 12px;
  border-top: 1px solid var(--line); margin-top: 16px; padding: 18px 6px 2px;
}
.mega-cta {
  display: inline-flex; align-items: center; gap: 7px;
  font: 700 13.5px/1 var(--sans); color: var(--brand); text-decoration: none;
  border: 1.5px solid rgba(38,141,238,.45); border-radius: 999px; padding: 11px 20px;
  transition: background .2s, color .2s, border-color .2s;
}
.mega-cta:hover { background: #F1F6FC; border-color: var(--brand); }
.mega-cta-solid { background: var(--brand); color: #fff; border-color: var(--brand); }
.mega-cta-solid:hover { background: var(--brand-deep); border-color: var(--brand-deep); color: #fff; }
/* outrank the white `.nav-menu a` base color */
.nav-menu a.mega-cta { color: var(--brand); padding: 11px 20px; }
.nav-menu a.mega-cta.mega-cta-solid { color: #fff; }
.mega-cta span { transition: transform .2s; }
.mega-cta:hover span { transform: translateX(3px); }

/* single-audience dropdown variant */
.nav-menu .mega-single { width: 360px; grid-template-columns: 1fr; padding: 22px 20px 18px; }
.mega-single .mega-foot { flex-direction: column; gap: 9px; padding: 16px 4px 2px; }
.mega-single .mega-foot .mega-cta { justify-content: center; }

/* ---------- brands dropdown ----------
   Two columns of name + descriptor. The descriptor is the point: "Verkada"
   and "Josh.ai" mean nothing to a visitor who hasn't met them, so the menu
   has to say what each one is rather than just list marks. */
.nav-menu .mega-brands { width: 560px; grid-template-columns: 1fr; padding: 22px 20px 18px; }
/* Residential mega: three labelled clusters instead of nine links in a rope.
   The labels are the site's own architecture — protect / automate / connect. */
.mega-res { min-width: 640px; }
.mega-res-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px 26px; padding: 4px; }
.mega-res .mega-label { margin-bottom: 6px; }
.mega-res .mega-col a { white-space: nowrap; }

/* Group labels inside the mobile accordion. */
.ovl-gl {
  display: block; margin: 16px 0 3px; padding-left: 10px;
  font: 800 10.5px/1.4 var(--sans); letter-spacing: .18em; text-transform: uppercase;
  color: #D9A441;
}
.ovl-sub .ovl-gl:first-child { margin-top: 4px; }

/* The footer's brand block, folded into the Main Menu column. */
.foot-sub {
  display: block; margin: 14px 0 4px;
  font: 800 11px/1.4 var(--sans); letter-spacing: .13em; text-transform: uppercase;
  color: var(--brand);
}
.foot-col .foot-brand-link { font-size: 14px; }

/* ---- legal pages ---- */
.lg { background: #fff; }
.lg-wrap { max-width: 760px; padding-top: 64px; padding-bottom: 90px; }
.lg-head h1 { font-size: clamp(32px, 4vw, 44px); font-weight: 800; color: var(--navy); margin: 0 0 8px; }
.lg-updated { font: 600 13.5px/1.5 var(--sans); color: var(--ink-soft); margin: 0 0 36px; }
.lg-body { font-size: 16px; line-height: 1.75; color: #2C3648; }
.lg-body > * + * { margin-top: 1em; }
.lg-body h2 { font-size: 22px; font-weight: 800; color: var(--navy); margin-top: 2em; }
.lg-body h3 { font-size: 17px; font-weight: 800; color: var(--navy); margin-top: 1.5em; }
.lg-body ul { padding-left: 1.3em; }
.lg-body li + li { margin-top: .4em; }
.lg-body a { color: var(--brand); }

/* ============================================================
   Homepage: the evening, continued (.hm-)
   The hero's scrim dissolves into --navy; these sections deepen
   navy to night and hand back to daylight at the morning CTA.
   ============================================================ */
.hm-thesis {
  background: linear-gradient(180deg, var(--navy) 0%, #0B1322 100%);
  padding: 120px 0 110px; text-align: center;
}
.hm-eyebrow {
  font: 700 12px/1.4 var(--sans); letter-spacing: .32em; text-transform: uppercase;
  color: #E8B678; margin: 0 0 22px;
}
.hm-display {
  font-family: 'Marcellus', Georgia, serif; font-weight: 400;
  font-size: clamp(38px, 5.4vw, 68px); line-height: 1.12; color: #F4F2EC; margin: 0;
  letter-spacing: .01em;
}
.hm-display-sm {
  font-family: 'Marcellus', Georgia, serif; font-weight: 400;
  font-size: clamp(27px, 3vw, 40px); line-height: 1.16; color: #F4F2EC; margin: 0 0 18px;
  letter-spacing: .01em;
}
.hm-lead {
  font: 400 17px/1.75 var(--sans); color: #93A0B4;
  max-width: 560px; margin: 22px auto 0;
}
.hm-cta-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 38px; }
.hm-cta {
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
  border: 1px solid rgba(232,182,120,.35); border-radius: 999px;
  font: 700 15px/1.2 var(--sans); color: #F4F2EC; padding: 16px 28px;
  transition: border-color .2s, background .2s, transform .2s;
}
.hm-cta em { font-style: normal; font-weight: 500; font-size: 12.5px; color: #93A0B4; }
.hm-cta:hover { border-color: #E8B678; transform: translateY(-1px); }
/* The primary hero CTA used to be a flat blue pill — the same treatment the
   old contact bubble had. It now borrows the contact panel's material: a
   navy gradient with light washing off the top-left corner, a gold hairline,
   and a fine inner highlight standing in for the panel's gold filament,
   which a pill cannot carry along its edge.
   The gradient is deliberately lighter than .hm-thesis sits behind it — a
   navy button on a navy ground has to be raised to read at all — and it
   still holds its shape over the photography in .hm-morning. */
.hm-cta-solid {
  background:
    radial-gradient(135% 190% at 18% 0%, rgba(124,187,255,.17) 0%, rgba(124,187,255,0) 62%),
    linear-gradient(168deg, #263D63 0%, #1B2E4E 54%, #142440 100%);
  border-color: rgba(232,182,120,.5);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.15),
    0 8px 22px -9px rgba(5,11,24,.8);
}
.hm-cta-solid:hover {
  background:
    radial-gradient(135% 190% at 18% 0%, rgba(124,187,255,.24) 0%, rgba(124,187,255,0) 62%),
    linear-gradient(168deg, #2E4874 0%, #21375B 54%, #182A4A 100%);
  border-color: #E8B678;
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.2),
    0 14px 28px -10px rgba(5,11,24,.9);
}
.hm-cta-solid span { transition: transform .2s; }
.hm-cta-solid:hover span { transform: translateX(3px); }
.hm-cta-light { border-color: rgba(255,255,255,.7); }

/* the rooms */
.hm-rooms { background: #0B1322; padding: 0 0 40px; }
.hm-room {
  display: grid; grid-template-columns: 58fr 42fr; align-items: center;
  max-width: 1440px; margin: 0 auto; padding: 40px clamp(20px, 4vw, 64px);
  gap: clamp(28px, 5vw, 76px);
}
.hm-room-flip { grid-template-columns: 42fr 58fr; }
.hm-room-flip .hm-room-media { order: 2; }
.hm-room-media { margin: 0; overflow: hidden; border-radius: 4px; }
.hm-room-media img {
  width: 100%; height: 100%; max-height: 620px; object-fit: cover; display: block;
  transform: scale(1.02); transition: transform 1.2s cubic-bezier(.2,.6,.2,1);
}
.hm-room:hover .hm-room-media img { transform: scale(1.055); }
.hm-room-copy p:not(.hm-eyebrow) { font: 400 16px/1.8 var(--sans); color: #93A0B4; margin: 0 0 24px; max-width: 46ch; }
.hm-room-copy .hm-eyebrow { margin-bottom: 14px; }
.hm-room-links { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.hm-room-links a {
  font: 700 14px/1.4 var(--sans); color: #F4F2EC; text-decoration: none;
  padding-bottom: 3px; border-bottom: 1px solid rgba(232,182,120,.35);
  transition: color .18s, border-color .18s;
}
.hm-room-links a:hover { color: #E8B678; border-color: #E8B678; }

/* the craft strip */
.hm-craft { position: relative; isolation: isolate; background: #0B1322; padding: clamp(90px, 12vw, 170px) 0; }
.hm-craft-media { position: absolute; inset: 0; margin: 0; z-index: -1; }
.hm-craft-media img { width: 100%; height: 100%; object-fit: cover; object-position: 65% 50%; opacity: .6; }
.hm-craft::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(11,19,34,.94) 0%, rgba(11,19,34,.62) 46%, rgba(11,19,34,.12) 100%);
}
.hm-craft-copy { max-width: 1290px; }
.hm-craft-copy p:not(.hm-eyebrow) { font: 400 16.5px/1.8 var(--sans); color: #C6CDD9; max-width: 52ch; margin: 20px 0 0; }
.hm-craft-license { font-size: 13px !important; color: #93A0B4 !important; letter-spacing: .04em; }

/* the morning */
.hm-morning {
  position: relative; isolation: isolate; overflow: hidden; text-align: center;
  /* copy lives in the top dark-to-sky band; the house below stays unobstructed */
  min-height: clamp(620px, 52vw, 880px);
  padding: clamp(64px, 7vw, 110px) 24px 0;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
}
.hm-morning-media { position: absolute; inset: 0; margin: 0; z-index: -1; }
.hm-morning-media img { width: 100%; height: 100%; object-fit: cover; }
.hm-morning::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, #0B1322 0%, rgba(11,19,34,.55) 18%, rgba(11,19,34,.18) 42%, rgba(11,19,34,0) 62%);
}
.hm-morning .hm-eyebrow { color: #FFE9C4; text-shadow: 0 1px 14px rgba(10,16,28,.6); }
.hm-morning .hm-display { text-shadow: 0 2px 30px rgba(10,16,28,.55); }
.hm-morning .hm-lead { color: #EDEAE2; text-shadow: 0 1px 16px rgba(10,16,28,.6); }

/* Scroll reveal, v2. The first version hid whole sections until an observer
   fired, which read as broken on a fast scroll. Rules now: imagery never goes
   fully invisible, copy rises a short distance, the hidden state is applied
   by JS only to elements still below the fold, and the trigger fires before
   the element enters the viewport — so a fast scroller sees finished rooms
   and a slow one catches the tail of the motion. */
.rv { transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); }
.rv-wait { opacity: 0; transform: translateY(16px); }
.rv-media.rv-wait { opacity: .35; transform: translateY(0) scale(1.03); }
@media (prefers-reduced-motion: reduce) {
  .hm-room-media img { transition: none; }
  .rv { transition: none; }
  .rv-wait { opacity: 1; transform: none; }
}

@media (max-width: 860px) {
  .hm-thesis { padding: 72px 0 64px; }
  .hm-room, .hm-room-flip { grid-template-columns: 1fr; gap: 22px; padding: 26px 20px; }
  .hm-room-flip .hm-room-media { order: 0; }
  .hm-room-media img { max-height: 340px; }
  .hm-room-copy p:not(.hm-eyebrow) { max-width: none; }
  .hm-cta { padding: 14px 22px; }
}


.bc-meta span:first-child { display: none; } /* posts are authored 'admin' — the byline subtracts */

/* ---- Google reviews, first-party (.gr-) — daylight zone ---- */
.gr { background: var(--cream); padding: 96px 0; }/* the amber{ font: 800 clamp(26px, 3vw, 38px)/1.2 var(--sans); color: var(--navy); margin: 0; }@media (max-width: 980px) {}
@media (max-width: 640px) {
  .gr { padding: 64px 0; }}

/* Anchor targets clear the sticky chrome. The offset is measured from the
   real rendered nav + subnav by site.js (the subnav wraps to two rows on
   narrow screens, so no constant survives contact with every viewport); the
   fallback covers the first paint before the script runs. */
[id] { scroll-margin-top: var(--anchor-offset, 125px); }.foot-brands > .foot-sub { margin: 0 0 4px; }

/* Audience switch: both content sets are server-rendered; the hero toggle and
   /commercial/'s server-set body class decide which shows */
.aud-c { display: none; }
body.aud-com .aud-c { display: block; }
body.aud-com .aud-r { display: none; }
/* ---------- the brand-page attribution ----------
   One line, as it was. The difference is that our own name is set larger
   than the rest of it and carries the insignia's bevel, so a visitor who
   landed from a search for "Alarm.com Utah" can see who fits it without
   reading the smallest type on the page. */
.inst-by {
  margin: 0 0 16px;
  font: 800 11.5px/1.5 var(--sans); letter-spacing: .16em; text-transform: uppercase;
  color: rgba(9,15,26,.45);
}
.inst-by-brand { color: var(--pxa, var(--brand)); }
.inst-by-name {
  display: inline-block;
  font-size: 17px; letter-spacing: .06em;
  /* The insignia's own gradient, clipped to the letters. text-shadow bleeds
     through a clipped gradient, so the bevel is a drop-shadow filter — the
     near one is the extruded edge, the far one lifts it off the page. */
  color: #2E62F0;
  background: linear-gradient(180deg, #4A7EFF 0%, #2E62F0 55%, #1B41CC 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter:
    drop-shadow(0 1px 0 rgba(13,33,104,.62))
    drop-shadow(0 1px 2px rgba(9,15,26,.16));
}
.inst-by.on-dark { color: rgba(255,255,255,.5); }
/* On a dark hero the gradient loses against the ground, so the name goes
   white and the bevel does the work on its own. */
.inst-by.on-dark .inst-by-name {
  background: none; -webkit-text-fill-color: #FFFFFF; color: #FFFFFF;
  filter:
    drop-shadow(0 1px 0 rgba(0,0,0,.7))
    drop-shadow(0 2px 7px rgba(0,0,0,.55));
}
@media (max-width: 600px) {
  .inst-by { font-size: 10.5px; letter-spacing: .14em; }
  .inst-by-name { font-size: 15px; }
}

/* --- the brand line above each thesis ---
   .hm-eyebrow is the section label used all down this page — Protect,
   Automate, Connect — and those should stay small and quiet. Only the two
   that carry our own name get this: larger, and struck in metal rather than
   printed flat, so the name reads as a mark rather than a caption.

   The gradient runs pale at the top to bronze at the bottom, which is where
   the raised look comes from — light catches the top of a struck letter. The
   hard black shadow directly beneath is the extruded edge; the soft one lifts
   the whole thing off the navy. text-shadow bleeds through a clipped
   gradient, so both are drop-shadow filters. */
.hm-eyebrow-brand {
  font-size: 17px;
  letter-spacing: .24em;
  margin-bottom: 26px;
  color: #E8B678;
  background: linear-gradient(180deg, #FCE8C4 0%, #EFC189 40%, #E8B678 62%, #AC7830 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter:
    drop-shadow(0 1px 0 rgba(0,0,0,.8))
    drop-shadow(0 2px 5px rgba(0,0,0,.5));
}
@media (max-width: 700px) {
  /* long enough to wrap on a phone once it grows — the commercial one reads
     "Shield Low Voltage — Commercial" — so it gives back some of the size */
  .hm-eyebrow-brand { font-size: 13.5px; letter-spacing: .2em; margin-bottom: 20px; }
}

/* ---------- machined silver: the UniFi palette ----------
   Shared by the storefront and the brand page, so the two read as one
   room rather than two designs of the same logo. Ubiquiti build in
   anodised aluminium, so the material is cool silver with hairline
   edges — see the long note in shop.css for the reasoning. */
.px-unifi {
  --m-ink:     #0B1017;  /* near-black, biased blue so it agrees with silver */
  --m-steel:   #59636F;  /* secondary text */
  --m-ground:  #E8ECF0;  /* the silver the plates sit on */
  --m-edge:    #D2D8E0;  /* hairlines */
  --m-face-hi: #FDFEFE;  /* plate face, lit edge */
  --m-face-lo: #EDF0F4;  /* plate face, shaded edge */
  --m-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
}
/* unifi hero: logo leads, so it needs less clearance under the floating nav */
.nav-overlay.nav-light .px-unifi .px-hero { padding-top: 48px; }

/* ---------- Mobile hero art direction ----------
   Desktop heroes are 16:9; cropped into a phone they lose a third of the
   frame and the subject shrinks to texture. The base mobile rule also drops
   the photo to opacity .5, dissolving it into the navy.

   Opted-in pages put .hero-m and a --hero-m portrait image on the hero
   SECTION, and author the photo div inside .cx-hero-copy. Desktop ignores
   the DOM position entirely (the photo is absolutely positioned against
   .cx-hero), so nothing changes there. On mobile the photo becomes a flow
   item ordered to the top: a full-bleed vertical image running to the top of
   the page, its base fading out, with the headline overlaying the fade and
   the supporting copy below on clean ground. */
@media (max-width: 760px) {
  .cx-hero.hero-m .cx-hero-grid { padding-top: 0; padding-bottom: 40px; }
  .cx-hero.hero-m .cx-hero-copy { display: flex; flex-direction: column; }
  .cx-hero.hero-m .cx-hero-photo {
    order: -1;
    position: static !important;
    inset: auto !important;
    width: 100vw;
    margin: 0 0 -16vw calc(50% - 50vw);
    height: 120vw !important;
    opacity: 1 !important;
    background-image: var(--hero-m) !important;
    background-position: center top !important;
    /* a real alpha fade at the base so the image dissolves into the ground
       instead of ending on a hard edge */
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 52%, rgba(0,0,0,.62) 74%, rgba(0,0,0,.12) 92%, rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 52%, rgba(0,0,0,.62) 74%, rgba(0,0,0,.12) 92%, rgba(0,0,0,0) 100%);
  }
  /* keep the floating nav legible over the top of the photo */
  .cx-hero.hero-m .cx-hero-photo::before {
    background: linear-gradient(180deg, rgba(13,27,51,.62) 0%, rgba(13,27,51,.18) 16%, rgba(13,27,51,0) 32%) !important;
  }
  /* whatever follows the photo (brand logo or eyebrow) rides up into its
     fading base, and everything after it paints above the image */
  .cx-hero.hero-m .cx-hero-copy > :not(.cx-hero-photo) { position: relative; z-index: 2; }
}

/* Josh.ai uses its own hero markup (.px-josh-hero / .px-josh-hero-bg) rather
   than the shared .cx-hero structure, so it needs the same treatment spelled
   out against its own class names. */
.px-josh-hero-inner > .px-josh-hero-bg { z-index: 0; }
.px-josh-hero-inner > :not(.px-josh-hero-bg) { position: relative; z-index: 1; }
@media (max-width: 760px) {
  .px-josh-hero.hero-m .px-josh-hero-inner { display: flex; flex-direction: column; padding-top: 0; padding-bottom: 40px; }
  .px-josh-hero.hero-m .px-josh-hero-bg {
    order: -1;
    position: static !important;
    inset: auto !important;
    width: 100vw;
    margin: 0 0 -16vw calc(50% - 50vw);
    height: 120vw !important;
    background-image: var(--hero-m) !important;
    background-position: center top !important;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 52%, rgba(0,0,0,.62) 74%, rgba(0,0,0,.12) 92%, rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 52%, rgba(0,0,0,.62) 74%, rgba(0,0,0,.12) 92%, rgba(0,0,0,0) 100%);
  }
  /* the flat .58 black wash is what buried this photo — replace it with a
     top-only gradient that just keeps the floating nav legible */
  .px-josh-hero.hero-m .px-josh-hero-bg::before {
    background: linear-gradient(180deg, rgba(8,9,11,.62) 0%, rgba(8,9,11,.18) 16%, rgba(8,9,11,0) 32%) !important;
  }
  .px-josh-hero.hero-m .px-josh-hero-inner > :not(.px-josh-hero-bg) { z-index: 2; }
}

/* Each platform's credential wears that platform's own colour — Kyle's call,
   and it matches how the badges actually look on the profiles themselves.
   Text tones are darkened from the raw brand hex so 9.5px type still clears
   contrast on the tinted pill; the tint keeps the brand hue. */
.grx-cred {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 3px; padding: 3px 8px; border-radius: 999px; white-space: nowrap;
  font: 800 9.5px/1 var(--sans); letter-spacing: .07em; text-transform: uppercase;
}
.grx-cred svg { width: 11px; height: 11px; flex: none; }
.grx-cred-g  { color: #1A62C4; background: rgba(66,133,244,.12); }
.grx-cred-tt { color: #0A7BA8; background: rgba(0,159,217,.12); }
.grx-cred-an { color: #CB3A2C; background: rgba(255,97,83,.13); }
.grx-cred-bk { color: #111637; background: rgba(17,22,55,.08); }
/* four scores no longer fit one row on a phone — go 2x2 rather than squeeze */
@media (max-width: 560px) {
  .grx-scores { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 0; }
  .grx-score { padding: 2px 14px; }
  .grx-score + .grx-score { border-left: none; }
  .grx-score:nth-child(odd) { padding-left: 0; }
  .grx-score:nth-child(even) { border-left: 1px solid rgba(22,36,62,.14); }
  .grx-score strong { font-size: 26px; }
}