/* ===== Reset & base ===== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--text-on-light);
  background: var(--bg-light);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
button { font: inherit; cursor: pointer; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 700; line-height: var(--lh-tight); letter-spacing: 0.01em; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-pad); }
.section { padding-block: var(--space-9); }
.section--tight { padding-block: var(--space-8); }
.section--dark { background: var(--bg-dark); color: var(--text-on-dark); }
.section--dark-alt { background: var(--bg-dark-alt); color: var(--text-on-dark); }
.section--light-alt { background: var(--bg-light-alt); }
.eyebrow { display: inline-block; font-family: var(--font-display); font-size: var(--fs-sm); letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--space-3); }
.section-head { max-width: 760px; margin-bottom: var(--space-7); }
.section-head h2 { font-size: var(--fs-2xl); text-transform: uppercase; }
.section-head p { margin-top: var(--space-4); font-size: var(--fs-md); color: var(--text-on-light-muted); }
.section--dark .section-head p, .section--dark-alt .section-head p { color: var(--text-on-dark-muted); }
.section-head--center { margin-inline: auto; text-align: center; }

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; top: -48px; left: 0; background: var(--accent); color: var(--navy-900); padding: var(--space-3) var(--space-5); z-index: 999; transition: top var(--dur-fast) var(--ease-out); font-weight: 600; }
.skip-link:focus { top: 0; }

.trial-banner { background: linear-gradient(180deg, var(--gold-400), var(--gold-600)); color: var(--navy-950); text-align: center; font-family: var(--font-display); font-size: var(--fs-xs); letter-spacing: 0.06em; text-transform: uppercase; padding: var(--space-2); }

/* ===== Buttons ===== */
.btn { display: inline-flex; align-items: center; gap: var(--space-2); padding: 0.85rem 1.6rem; border-radius: var(--radius-sm); font-family: var(--font-display); font-size: var(--fs-sm); letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600; border: 2px solid transparent; transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.btn svg { width: 1em; height: 1em; }
.btn-primary { background: linear-gradient(180deg, var(--gold-400), var(--gold-600)); color: var(--navy-900); }
.btn-primary:hover { background: linear-gradient(180deg, var(--gold-300), var(--gold-500)); transform: translateY(-2px); box-shadow: var(--shadow-gold-glow); }
.btn-outline-dark { border-color: rgba(255,255,255,0.35); color: var(--white); }
.btn-outline-dark:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }
.hero-cta .btn-outline-dark { color: #4FBE7C; }
.btn-outline-light { border-color: var(--navy-900); color: var(--navy-900); }
.btn-outline-light:hover { border-color: var(--accent); background: var(--navy-900); color: var(--white); }
.btn-sm { padding: 0.6rem 1.1rem; font-size: var(--fs-xs); }

/* ===== Header ===== */
.site-header { position: sticky; top: 0; z-index: 100; background: var(--navy-900); border-bottom: 3px solid var(--gold-500); }
.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); min-height: 84px; }
.brand { display: flex; align-items: center; gap: var(--space-3); color: var(--white); }
.brand img { height: 34px; width: auto; }
.brand-text { font-family: var(--font-display); font-size: 1.3rem; letter-spacing: 0.02em; }
.brand-text small { display: block; font-family: var(--font-body); font-size: 0.6rem; letter-spacing: 0.2em; color: var(--accent); font-weight: 500; text-transform: uppercase; }

.main-nav { display: flex; }
.main-nav ul { display: flex; align-items: center; gap: var(--space-6); }
.main-nav a { font-family: var(--font-display); font-size: var(--fs-sm); letter-spacing: 0.03em; text-transform: uppercase; color: var(--text-on-dark-muted); padding-block: var(--space-2); position: relative; }
.main-nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 2px; background: var(--accent); transition: right var(--dur-med) var(--ease-out); }
.main-nav a:hover, .main-nav a:focus-visible, .main-nav a[aria-current="page"] { color: var(--white); }
.main-nav a:hover::after, .main-nav a:focus-visible::after, .main-nav a[aria-current="page"]::after { right: 0; }
.nav-item { position: relative; }
.nav-item > a { display: flex; align-items: center; gap: 0.3em; }
.nav-caret { width: 0.6em; height: 0.6em; transition: transform var(--dur-fast) var(--ease-out); }
.nav-item:focus-within .nav-caret { transform: rotate(180deg); }
.dropdown { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(6px); min-width: 240px; background: var(--navy-800); border: 1px solid var(--border-on-dark); border-radius: var(--radius-md); padding: var(--space-3); opacity: 0; visibility: hidden; transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); box-shadow: var(--shadow-md); }
.nav-item:focus-within .dropdown { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
/* :hover is scoped to hover-capable pointers only (desktop/mouse) — on touch devices,
   an unconditional :hover rule makes mobile browsers "absorb" the first tap to simulate
   the hover state before a second tap actually fires the click/navigation. The mobile
   dropdown is already display:none regardless (media query below), so this only affects
   desktop, where (hover: hover) is true and behavior is unchanged. */
@media (hover: hover) {
  .nav-item:hover .nav-caret { transform: rotate(180deg); }
  .nav-item:hover .dropdown { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
}
.dropdown a { display: block; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); text-transform: none; letter-spacing: 0; font-family: var(--font-body); font-size: var(--fs-sm); }
.dropdown a:hover, .dropdown a:focus-visible { background: rgba(234,180,87,0.1); color: var(--accent); }
.dropdown a::after { display: none; }

.header-actions { display: flex; align-items: center; gap: var(--space-5); }
.header-phone { display: flex; align-items: center; gap: var(--space-2); color: var(--white); font-family: var(--font-display); font-size: var(--fs-sm); letter-spacing: 0.02em; white-space: nowrap; }
.header-phone svg { width: 18px; height: 18px; color: var(--accent); flex-shrink: 0; }
.nav-toggle { display: none; background: none; border: 1px solid var(--border-on-dark); border-radius: var(--radius-sm); padding: var(--space-2); color: var(--white); }
.nav-toggle svg { width: 22px; height: 22px; display: block; }

@media (max-width: 1080px) {
  .header-phone span { display: none; }
  .main-nav ul { gap: var(--space-4); }
}
@media (max-width: 900px) {
  /* .main-nav and its <ul> are display:flex on desktop (base rules above) for the
     horizontal row layout. Rather than keep them as flex and rely on stretch/percentage-
     width to fill the panel — which depends on flex-item sizing behavior that isn't
     rendering consistently everywhere — switch both to plain display:block in mobile.
     A block-level box is 100% of its container's width by definition, with no
     flex-stretch ambiguity, so the menu column and everything nested inside it
     (including the dropdowns) reliably fill the panel on every engine. */
  .main-nav { display: block; position: fixed; inset: 84px 0 0 0; background: var(--navy-900); padding: var(--space-6) var(--space-5); overflow-y: auto; transform: translateX(100%); transition: transform var(--dur-med) var(--ease-out); }
  .main-nav.is-open { transform: translateX(0); }
  /* #main-nav is nested inside .site-header's own markup, as a sibling of .brand and
     .header-actions (not a sibling of .site-header itself). Once nav goes position:fixed
     here, it becomes a positioned stacking context and paints above its non-positioned
     siblings regardless of DOM order — .brand/.header-actions were plain static content.
     At the very top of the page, before the sticky header has pinned itself to the
     viewport top (it's still sitting below .trial-banner), that let the open nav panel
     visually cover the logo, hamburger button, and Get a Quote button, since fixed
     positioning starts nav's box from the viewport top regardless of where the header
     currently is. Giving these two an explicit stacking position fixes it without
     changing anything about how the header itself scrolls/sticks. */
  .brand, .header-actions { position: relative; z-index: 1; }
  .main-nav ul { display: block; }
  /* Uniform border/padding/centering for all top-level items (previously only the
     Technology/Products items had this — plain links like Home/Contact inherited the
     much tighter desktop padding, which read as inconsistently cramped and left-aligned). */
  .main-nav > ul > li { border-bottom: 1px solid var(--border-on-dark); }
  .main-nav > ul > li > a { display: block; padding-block: var(--space-5); text-align: center; }
  /* Mobile: no expandable submenu — the dropdown rendering bug wasn't reproducing
     consistently across devices, so Technology/Products are plain links to their hub
     pages here (/technology/, /products/), same as every other top-level item. The
     caret is hidden since there's nothing left to expand. Desktop dropdown (hover-based,
     base rules above) is untouched. */
  .main-nav .dropdown { display: none; }
  .main-nav .nav-caret { display: none; }
  .nav-toggle { display: inline-flex; }
  .header-phone { display: none; }
}

/* ===== Hero ===== */
.hero { position: relative; background: radial-gradient(ellipse 80% 60% at 75% 30%, var(--navy-700), var(--navy-900) 65%); overflow: hidden; color: var(--text-on-dark); }
.hero::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle at 1px 1px, rgba(234,180,87,0.15) 1px, transparent 0); background-size: 28px 28px; opacity: 0.5; pointer-events: none; }
.hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: var(--space-8); align-items: center; padding-block: var(--space-9); }
.hero-copy h1 { font-size: clamp(2.2rem, 4.2vw, var(--fs-4xl)); text-transform: uppercase; margin-bottom: var(--space-5); }
.hero-copy h1 .accent { color: var(--accent); }
.hero-copy p { font-size: var(--fs-md); color: var(--text-on-dark-muted); max-width: 46ch; margin-bottom: var(--space-6); }
.hero-cta { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-bottom: var(--space-7); }
.hero-trustrow { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--space-5); padding-top: var(--space-6); border-top: 1px solid var(--border-on-dark); }
.trust-item { display: flex; flex-direction: column; gap: var(--space-2); }
.trust-item svg { width: 26px; height: 26px; color: var(--accent); }
.trust-item strong { font-family: var(--font-display); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.02em; }
.trust-item span { font-size: var(--fs-xs); color: var(--text-on-dark-muted); }

.hero-visual { position: relative; display: flex; align-items: center; justify-content: center; min-height: 380px; }
.hero-visual .glow-ring { position: absolute; width: min(480px, 90%); aspect-ratio: 1; border: 2px solid var(--gold-400); border-radius: 50% 50% 50% 0; transform: rotate(135deg); opacity: 0.55; box-shadow: var(--shadow-gold-glow); }
@keyframes spin-slow { to { transform: rotate(360deg); } }
.hero-slides { position: relative; width: 100%; height: 360px; }
.hero-slide { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity var(--dur-slow) var(--ease-out); }
.hero-slide.is-active { opacity: 1; }
.hero-slide img { max-height: 340px; width: auto; object-fit: contain; filter: drop-shadow(0 30px 40px rgba(0,0,0,0.45)); }
.hero-eyebrow-strip { position: absolute; bottom: -18px; left: 50%; transform: translateX(-50%); background: var(--navy-800); border: 1px solid var(--border-on-dark); border-radius: var(--radius-pill); padding: var(--space-2) var(--space-5); font-family: var(--font-display); font-size: var(--fs-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); white-space: nowrap; }
.hero-dots { display: flex; gap: var(--space-2); justify-content: center; margin-top: var(--space-6); }
.hero-dots button { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.25); border: none; padding: 0; }
.hero-dots button.is-active { background: var(--accent); width: 26px; border-radius: var(--radius-pill); transition: width var(--dur-med) var(--ease-out); }

.hero-strip { position: relative; background: var(--navy-950); border-top: 1px solid var(--border-on-dark); padding-block: var(--space-6); }
.hero-strip .container { display: flex; flex-wrap: wrap; gap: var(--space-6); align-items: center; justify-content: space-between; }
.hero-strip-stats { display: flex; flex-wrap: wrap; gap: var(--space-8); }
.hero-strip-stats div strong { display: block; font-family: var(--font-display); font-size: var(--fs-xl); color: var(--accent); }
.hero-strip-stats div span { font-size: var(--fs-xs); color: var(--text-on-dark-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.hero-strip-callout { font-family: var(--font-display); font-size: var(--fs-md); text-transform: uppercase; color: var(--white); }
.hero-strip-callout span { display: block; font-family: var(--font-body); font-size: var(--fs-sm); text-transform: none; color: var(--text-on-dark-muted); font-weight: 400; margin-top: 2px; }

@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { order: -1; min-height: 280px; }
  .hero-trustrow { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* ===== Reveal-on-scroll ===== */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ===== Product grid ===== */
.product-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--space-5); }
.product-card { background: var(--card-light-bg); border-radius: var(--radius-lg); box-shadow: var(--card-light-shadow); overflow: hidden; display: flex; flex-direction: column; transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out); border: 1px solid var(--gray-100); }
.product-card:hover { transform: translateY(-6px); box-shadow: 0 24px 40px -16px rgba(15,33,56,0.28); }
.product-card-media { background: linear-gradient(160deg, var(--navy-800), var(--navy-900)); padding: var(--space-6); display: flex; align-items: center; justify-content: center; aspect-ratio: 4/3; }
.product-card-media img { max-height: 100%; object-fit: contain; }
.product-card-body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); flex: 1; }
.product-card-body h3 { font-size: var(--fs-md); text-transform: uppercase; }
.product-card-price { font-size: var(--fs-sm); color: var(--text-on-light-muted); }
.product-card-price strong { color: var(--accent-hover); font-family: var(--font-display); }
.product-card-body .btn { margin-top: auto; align-self: flex-start; }

@media (max-width: 900px) { .product-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) { .product-grid { grid-template-columns: 1fr; } }

/* ===== Technology cards ===== */
.tech-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--space-5); }
.tech-grid--4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.tech-card { border-radius: var(--radius-lg); overflow: hidden; background: var(--card-dark-bg); border: 1px solid var(--border-on-dark); }
.tech-card img { aspect-ratio: 16/10; object-fit: cover; }
.tech-card-body { padding: var(--space-5); }
.tech-card-body h3 { font-size: var(--fs-lg); text-transform: uppercase; margin-bottom: var(--space-3); color: var(--accent); }
.tech-card-body p { color: var(--text-on-dark-muted); font-size: var(--fs-sm); margin-bottom: var(--space-4); }
.tech-card-link { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--accent); font-family: var(--font-display); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 1px solid transparent; }
.tech-card-link svg { width: 12px; height: 12px; }
.tech-card-link:hover { border-bottom-color: var(--accent); }
@media (max-width: 900px) { .tech-grid, .tech-grid--4 { grid-template-columns: 1fr; } }
@media (min-width: 901px) and (max-width: 1100px) { .tech-grid--4 { grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* ===== Section-level "view all" CTA (used by trimmed/preview sections) ===== */
.section-cta { text-align: center; margin-top: var(--space-7); }

/* ===== Stat band ===== */
.stat-band { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--space-5); text-align: center; }
.stat-band .stat strong { display: block; font-family: var(--font-display); font-size: var(--fs-3xl); color: var(--accent); }
.stat-band .stat span { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-on-dark-muted); }
.stat-band-lead { max-width: 760px; margin: 0 auto var(--space-8); text-align: center; font-size: var(--fs-lg); font-family: var(--font-display); text-transform: none; line-height: var(--lh-snug); }
@media (max-width: 700px) { .stat-band { grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--space-6); } }

/* ===== Comparison table ===== */
.compare-wrap { overflow-x: auto; border-radius: var(--radius-lg); box-shadow: var(--card-light-shadow); border: 1px solid var(--gray-100); }
table.compare { width: 100%; border-collapse: collapse; min-width: 760px; background: var(--white); }
table.compare caption { text-align: left; padding: var(--space-4) var(--space-5); font-size: var(--fs-xs); color: var(--text-on-light-muted); }
table.compare th, table.compare td { padding: var(--space-4) var(--space-5); text-align: left; border-bottom: 1px solid var(--gray-100); font-size: var(--fs-sm); }
table.compare thead th { background: var(--navy-900); color: var(--white); font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.02em; font-size: var(--fs-xs); position: sticky; top: 0; }
table.compare thead th:first-child { color: var(--accent); }
table.compare tbody th { font-weight: 600; background: var(--gray-100); white-space: nowrap; }
table.compare tbody tr:hover { background: rgba(230,172,71,0.06); }
table.compare tbody tr:last-child td, table.compare tbody tr:last-child th { border-bottom: none; }

/* ===== Product finder ===== */
.finder-card { background: var(--card-light-bg); border: 1px solid var(--gray-100); border-radius: var(--radius-lg); box-shadow: var(--card-light-shadow); padding: var(--space-6); margin-bottom: var(--space-6); }
.finder-form { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--space-5); align-items: start; }
.finder-field { display: flex; flex-direction: column; }
.finder-field label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-on-light-muted); margin-bottom: var(--space-2); font-weight: 600; }
.finder-field input[type="number"], .finder-field select { width: 100%; background: var(--white); border: 1px solid var(--border-on-light); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); color: var(--text-on-light); font-family: var(--font-body); font-size: var(--fs-sm); }
.finder-field input:focus, .finder-field select:focus { border-color: var(--accent); }
.finder-help { font-size: var(--fs-xs); color: var(--text-on-light-muted); margin-top: var(--space-2); }
.finder-fieldset { border: none; margin: 0; padding: 0; }
.finder-fieldset legend { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-on-light-muted); margin-bottom: var(--space-2); font-weight: 600; padding: 0; }
.finder-options { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.finder-option { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-sm); color: var(--text-on-light); }
.finder-option input { width: 16px; height: 16px; accent-color: var(--accent-hover); }
.finder-actions { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; }
.finder-error { color: #a33; font-size: var(--fs-xs); margin: 0; }

.finder-results { margin-top: var(--space-6); padding-top: var(--space-6); border-top: 1px solid var(--gray-100); }
.finder-summary h3, .finder-recommend h3 { font-size: var(--fs-md); text-transform: uppercase; margin-bottom: var(--space-3); }
.finder-summary ul { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin-bottom: var(--space-6); font-size: var(--fs-sm); color: var(--text-on-light-muted); }
.finder-recommend { background: var(--bg-light-alt); border-radius: var(--radius-md); padding: var(--space-5); margin-bottom: var(--space-4); }
.finder-recommend p { color: var(--text-on-light-muted); font-size: var(--fs-sm); margin-bottom: var(--space-4); }
.finder-recommend--none { background: rgba(230,172,71,0.08); border: 1px solid var(--gold-500); }
.finder-attr-list { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--space-2) var(--space-5); font-size: var(--fs-sm); margin-bottom: var(--space-4); }
.finder-attr-list strong { color: var(--text-on-light); }
.finder-model-list { background: var(--white); border: 1px solid var(--gray-100); border-radius: var(--radius-sm); padding: var(--space-4); margin-bottom: var(--space-4); }
.finder-model-list h4 { font-size: var(--fs-sm); text-transform: uppercase; margin-bottom: var(--space-2); color: var(--accent-hover); }
.finder-model-list ul { display: flex; flex-direction: column; gap: var(--space-2); font-size: var(--fs-sm); }
.finder-also-qualifies { font-size: var(--fs-sm); color: var(--text-on-light-muted); margin-bottom: var(--space-4); }
.finder-also-qualifies a { color: var(--accent-hover); text-decoration: underline; }
.finder-equal-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--space-4); }
.finder-equal-card { background: var(--white); border: 1px solid var(--gray-100); border-radius: var(--radius-md); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
.finder-equal-card h4 { font-size: var(--fs-sm); text-transform: uppercase; }
.finder-equal-card p { font-size: var(--fs-xs); color: var(--text-on-light-muted); flex: 1; margin: 0; }
.finder-equal-card .btn { align-self: flex-start; }
@media (max-width: 900px) { .finder-equal-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) { .finder-equal-grid { grid-template-columns: 1fr; } }
.finder-result-links { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.finder-disclaimer { background: rgba(230,172,71,0.1); border-left: 3px solid var(--gold-500); border-radius: var(--radius-sm); padding: var(--space-4) var(--space-5); font-size: var(--fs-sm); color: var(--text-on-light); margin-bottom: var(--space-6); }
.finder-result-actions { display: flex; gap: var(--space-4); flex-wrap: wrap; }
@media (max-width: 700px) {
  .finder-form { grid-template-columns: 1fr; }
  .finder-attr-list { grid-template-columns: 1fr; }
}

/* ===== Comparison accordion (SEO-preserving, collapsed by default) ===== */
.finder-accordion { border: 1px solid var(--gray-100); border-radius: var(--radius-lg); background: var(--white); overflow: hidden; }
.finder-accordion summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-5) var(--space-6); font-family: var(--font-display); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-on-light); }
.finder-accordion summary::-webkit-details-marker { display: none; }
.finder-accordion-chevron { width: 12px; height: 8px; color: var(--text-on-light-muted); flex-shrink: 0; transition: transform var(--dur-fast) var(--ease-out); }
.finder-accordion[open] .finder-accordion-chevron { transform: rotate(180deg); }
.finder-accordion-body { padding: 0 var(--space-6) var(--space-6); }

/* ===== Branch network teaser (compact — full branch list lives on /our-branches/) ===== */
.branch-teaser { display: flex; align-items: center; gap: var(--space-8); }
.branch-teaser-map-wrap { width: 320px; flex-shrink: 0; padding: var(--space-4); background: var(--white); border-radius: var(--radius-lg); border: 1px solid var(--border-on-dark); }
.branch-teaser-map { width: 100%; display: block; aspect-ratio: 1536 / 1024; }
.branch-teaser-copy p { color: var(--text-on-dark-muted); margin-bottom: var(--space-5); max-width: 48ch; }
@media (max-width: 800px) { .branch-teaser { flex-direction: column; text-align: center; } .branch-teaser-map-wrap { width: 100%; max-width: 320px; } }
@media (max-width: 560px) { .branch-fact-grid { grid-template-columns: 1fr 1fr; } }

/* ===== News & events ===== */
.news-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--space-5); }
.news-card { background: var(--white); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--card-light-shadow); display: flex; flex-direction: column; border: 1px solid var(--gray-100); }
.news-card img { aspect-ratio: 16/10; object-fit: cover; }
.news-card-body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); flex: 1; }
.news-date { font-size: var(--fs-xs); color: var(--accent-hover); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
.news-card-body h3 { font-size: var(--fs-md); line-height: var(--lh-snug); }
.news-card-body p { font-size: var(--fs-sm); color: var(--text-on-light-muted); flex: 1; }
.news-readmore { background: none; border: none; padding: 0; color: var(--accent-hover); font-family: var(--font-display); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em; align-self: flex-start; border-bottom: 1px solid transparent; }
.news-readmore:hover { border-bottom-color: var(--accent-hover); }
@media (max-width: 900px) { .news-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) { .news-grid { grid-template-columns: 1fr; } }

/* ===== Testimonials carousel ===== */
.testimonial-carousel { position: relative; }
.testimonial-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: var(--space-5); padding-bottom: var(--space-4); scrollbar-width: thin; }
.testimonial-card { scroll-snap-align: start; flex: 0 0 min(360px, 85vw); background: var(--card-dark-bg); border: 1px solid var(--border-on-dark); border-radius: var(--radius-lg); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); }
.testimonial-card blockquote { margin: 0; font-size: var(--fs-sm); color: var(--text-on-dark-muted); line-height: var(--lh-normal); }
.testimonial-sig { display: flex; align-items: center; gap: var(--space-3); margin-top: auto; padding-top: var(--space-4); border-top: 1px solid var(--border-on-dark); }
.testimonial-sig img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: var(--white); }
.testimonial-sig strong { display: block; font-size: var(--fs-sm); }
.testimonial-sig span { font-size: var(--fs-xs); color: var(--text-on-dark-muted); }
.carousel-controls { display: flex; gap: var(--space-3); margin-top: var(--space-5); justify-content: flex-end; }
.carousel-controls button { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--border-on-dark); background: transparent; color: var(--white); display: flex; align-items: center; justify-content: center; }
.carousel-controls button:hover { background: var(--accent); color: var(--navy-900); border-color: var(--accent); }
.carousel-controls svg { width: 18px; height: 18px; }

/* ===== Clients strip ===== */
.clients-track-wrap { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.clients-track { display: flex; gap: var(--space-8); align-items: center; width: max-content; animation: marquee 42s linear infinite; }
.clients-track img { height: 72px; width: auto; object-fit: contain; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .clients-track { animation: none; overflow-x: auto; } }

/* ===== Footer ===== */
.site-footer { background: var(--navy-950); color: var(--text-on-dark-muted); padding-top: var(--space-9); }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.2fr; gap: var(--space-7); padding-bottom: var(--space-8); }
.footer-brand img { height: 32px; margin-bottom: var(--space-4); }
.footer-brand p { font-size: var(--fs-sm); max-width: 32ch; margin-bottom: var(--space-5); }
.footer-phones { font-size: var(--fs-sm); line-height: 1.8; margin-bottom: var(--space-5); }
.footer-phones a { color: inherit; }
.footer-phones a:hover { color: var(--accent); }
.footer-social { display: flex; gap: var(--space-3); }
.footer-social a { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border-on-dark); display: flex; align-items: center; justify-content: center; }
.footer-social a:hover { background: var(--accent); border-color: var(--accent); }
.footer-social img { width: 18px; height: 18px; }
.footer-social a:hover img { filter: invert(1); }
.footer-social a[aria-disabled="true"] { opacity: 0.35; cursor: not-allowed; }
.footer-col h4 { font-family: var(--font-display); color: var(--white); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: var(--space-4); }
.footer-col ul { display: flex; flex-direction: column; gap: var(--space-3); }
.footer-col a { font-size: var(--fs-sm); }
.footer-col a:hover { color: var(--accent); }
.footer-branches { display: flex; flex-wrap: wrap; gap: 0 var(--space-3); font-size: var(--fs-sm); }
.footer-branches span::after { content: ","; }
.footer-branches span:last-child::after { content: ""; }
.footer-bottom { border-top: 1px solid var(--border-on-dark); padding-block: var(--space-5); display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; justify-content: space-between; font-size: var(--fs-xs); }
.footer-bottom-links { display: flex; gap: var(--space-5); }
.footer-bottom-links a[aria-disabled="true"] { pointer-events: none; opacity: 0.5; }
.footer-image-credit { margin-top: var(--space-3); padding-bottom: var(--space-9); font-size: 0.6875rem; color: rgba(255,255,255,0.4); }
.footer-image-credit a { color: inherit; text-decoration: underline; }
.footer-image-credit a:hover { color: var(--text-on-dark-muted); }
@media (max-width: 960px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }

/* ===== Modal (Get a Quote) ===== */
.modal-overlay { position: fixed; inset: 0; background: rgba(7,15,29,0.72); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; padding: var(--space-5); z-index: 200; opacity: 0; visibility: hidden; transition: opacity var(--dur-fast) var(--ease-out); }
.modal-overlay.is-open { opacity: 1; visibility: visible; }
.modal { background: var(--navy-900); border: 1px solid var(--border-on-dark); border-radius: var(--radius-lg); max-width: 520px; width: 100%; max-height: 90vh; overflow-y: auto; padding: var(--space-7); position: relative; transform: translateY(16px); transition: transform var(--dur-med) var(--ease-out); }
.modal-overlay.is-open .modal { transform: translateY(0); }
.modal-close { position: absolute; top: var(--space-4); right: var(--space-4); background: none; border: none; color: var(--text-on-dark-muted); width: 32px; height: 32px; }
.modal-close svg { width: 20px; height: 20px; }
.modal h3 { color: var(--white); font-size: var(--fs-xl); text-transform: uppercase; margin-bottom: var(--space-2); }
.modal-note { font-size: var(--fs-xs); color: var(--text-on-dark-muted); margin-bottom: var(--space-5); }
.form-field { margin-bottom: var(--space-4); }
.form-field label { display: block; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-on-dark-muted); margin-bottom: var(--space-2); }
.form-field input, .form-field textarea, .form-field select { width: 100%; background: var(--navy-800); border: 1px solid var(--border-on-dark); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); color: var(--white); font-family: var(--font-body); font-size: var(--fs-sm); }
.form-field input:focus, .form-field textarea:focus, .form-field select:focus { border-color: var(--accent); }
.form-status { font-size: var(--fs-xs); margin-top: var(--space-4); padding: var(--space-3); border-radius: var(--radius-sm); display: none; }
.form-status.is-visible { display: block; background: rgba(47,158,99,0.14); color: #7fe0ab; }
.form-status.is-visible.is-error { background: rgba(220,68,68,0.14); color: #f28b8b; }

/* News modal reuses .modal / .modal-overlay */
.news-modal-body img { border-radius: var(--radius-md); margin-bottom: var(--space-4); aspect-ratio: 16/9; object-fit: cover; }
.news-modal-body .news-date { display: block; margin-bottom: var(--space-3); }
.news-modal-body p { color: var(--text-on-dark-muted); font-size: var(--fs-sm); }

/* ===== Homepage anchor targets (scroll-rail + relocated finder) =====
   Offsets scroll position so the sticky 84px header never covers a section's
   top when jumped to via the scroll-rail or any #anchor link. */
#home, #finder, #products, #technology, #branches, #news, #testimonials, #clients {
  scroll-margin-top: calc(84px + var(--space-5));
}

/* ===== Featured product grid (homepage "3 + View All", Change 5) =====
   Same 3-column .product-grid, given more visual weight since it now holds
   exactly 3 cards instead of 9. */
.product-grid--featured { gap: var(--space-6); }
.product-grid--featured .product-card-media { padding: var(--space-8); aspect-ratio: 5/4; }
.product-grid--featured .product-card-body { padding: var(--space-6); gap: var(--space-3); }
.product-grid--featured .product-card-body h3 { font-size: var(--fs-lg); }
.product-grid--featured .product-card-price { font-size: var(--fs-md); }
@media (max-width: 900px) { .product-grid--featured { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; } }

/* ===== Quick-jump scroll rail (homepage-only, desktop/tablet only, Change 4) =====
   Positioned in the outer gutter beside the container on wide viewports; falls
   back to a small fixed inset once the gutter disappears. Hidden below 900px —
   not adapted for mobile, per spec. */
.scroll-rail {
  position: fixed;
  top: 50%;
  right: max(1rem, calc((100vw - var(--container-max)) / 2 - 2rem));
  transform: translateY(-50%);
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-3) 0;
}
.scroll-rail-dot {
  position: relative;
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--gold-500);
  background: transparent;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.scroll-rail-dot:hover, .scroll-rail-dot:focus-visible { transform: scale(1.2); }
.scroll-rail-dot.is-active { background: var(--gold-500); }
.scroll-rail-label {
  position: absolute;
  right: calc(100% + var(--space-3));
  top: 50%;
  transform: translateY(-50%);
  background: var(--navy-900);
  color: var(--white);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.scroll-rail-dot:hover .scroll-rail-label,
.scroll-rail-dot:focus-visible .scroll-rail-label {
  opacity: 1;
  visibility: visible;
}
@media (max-width: 900px) {
  .scroll-rail { display: none; }
}

/* ===== WhatsApp floating button (site-wide — every page links this stylesheet) ===== */
.whatsapp-float {
  position: fixed;
  right: var(--space-5);
  bottom: var(--space-5);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25d366;
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  z-index: 150;
  transition: transform var(--dur-fast) var(--ease-out);
}
.whatsapp-float:hover, .whatsapp-float:focus-visible { transform: scale(1.08); }
.whatsapp-float svg { width: 30px; height: 30px; }
@media (max-width: 560px) {
  .whatsapp-float { width: 48px; height: 48px; right: var(--space-4); bottom: var(--space-4); }
  .whatsapp-float svg { width: 26px; height: 26px; }
}

/* ===== Call floating button (mobile only — mirrors .whatsapp-float at bottom-left) =====
   Desktop already shows the toll-free number in the header (.header-phone), so unlike
   the WhatsApp button (visible at every width) this one only appears at the same
   max-width: 900px breakpoint the mobile nav uses. Every size/offset/shadow value below
   is copied 1:1 from .whatsapp-float so the pair reads as intentional. */
.call-float {
  display: none;
  position: fixed;
  left: var(--space-5);
  bottom: var(--space-5);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--navy-900);
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  z-index: 150;
  transition: transform var(--dur-fast) var(--ease-out);
}
.call-float:hover, .call-float:focus-visible { transform: scale(1.08); }
.call-float svg { width: 30px; height: 30px; }
@media (max-width: 900px) {
  .call-float { display: flex; }
}
@media (max-width: 560px) {
  .call-float { width: 48px; height: 48px; left: var(--space-4); bottom: var(--space-4); }
  .call-float svg { width: 26px; height: 26px; }
}