/* 2Rsystems — shared design tokens & components (nav, footer, buttons, section shell, fact list, model cards, product hero, cta band) */
:root{
  --navy:#0B2233;
  --navy-2:#142E42;
  --ivory:#F5F3EE;
  --sky:#1F9DE3;
  --sky-deep:#0C7ABF;
  --graphite:#4B5563;
  --alu:#C7CDD4;
  --alu-line: rgba(199,205,212,0.35);
  --max: 1240px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--ivory);
  color:var(--navy);
  font-family:'Inter', sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2{font-family:'Gruppo', Arial, sans-serif; letter-spacing:-0.01em;}
h3,h4{font-family:'Space Grotesk', sans-serif; letter-spacing:-0.01em;}
.mono{font-family:'IBM Plex Mono', monospace; letter-spacing:0.02em;}
a{color:inherit; text-decoration:none;}
.wrap{max-width:var(--max); margin:0 auto; padding:0 32px;}
img{max-width:100%; display:block;}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
}

/* ---------- GRID OVERLAY (technical watermark) ---------- */
.grid-overlay{
  position:absolute; inset:0; opacity:.10; z-index:1; pointer-events:none;
  background-image:
    linear-gradient(var(--alu-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--alu-line) 1px, transparent 1px);
  background-size:64px 64px;
}

/* ---------- NAV ---------- */
header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:22px 0;
  transition:background .35s ease, padding .35s ease, border-color .35s ease;
  border-bottom:1px solid transparent;
}
header.solid{
  background:rgba(245,243,238,0.92);
  backdrop-filter:blur(10px);
  padding:14px 0;
  border-bottom:1px solid rgba(11,34,51,0.08);
}
nav.wrap{display:flex; align-items:center; justify-content:space-between; position:relative;}
.logo{font-family:'Space Grotesk'; font-weight:700; font-size:20px; letter-spacing:-0.02em; display:flex; align-items:center; gap:10px; color:var(--ivory); transition:color .3s ease;}
.logo .accent{color:var(--sky);}
.logo img{height:50px; width:50px; object-fit:contain; padding:4px; background:var(--ivory); border-radius:4px; flex:none;}
.navlinks{display:flex; gap:34px; align-items:center; font-size:14.5px; font-weight:500;}
.navlinks a{color:var(--ivory); opacity:.85; transition:opacity .2s, color .3s ease;}
.navlinks a:hover{opacity:1; color:var(--sky);}
header.solid .logo{color:var(--navy);}
header.solid .navlinks a{color:var(--navy);}
header.solid .navlinks a:hover{color:var(--sky-deep);}
.navcta{
  background:var(--navy); color:var(--ivory); padding:11px 22px; border-radius:2px;
  font-size:14px; font-weight:600; letter-spacing:.02em;
  transition:background .2s;
  white-space:nowrap;
}
.navcta:hover{background:var(--sky-deep);}
.nav-right{display:flex; align-items:center; gap:14px;}

.hamburger{
  display:none; width:40px; height:40px; border:1px solid rgba(245,243,238,0.35);
  background:none; border-radius:2px; position:relative; flex:none; cursor:pointer;
  transition:border-color .3s ease;
}
.hamburger span{
  position:absolute; left:10px; right:10px; height:2px; background:var(--ivory);
  transition:transform .25s ease, opacity .2s ease, background .3s ease;
}
.hamburger span:nth-child(1){top:14px;}
.hamburger span:nth-child(2){top:19px;}
.hamburger span:nth-child(3){top:24px;}
header.solid .hamburger{border-color:rgba(11,34,51,0.2);}
header.solid .hamburger span{background:var(--navy);}
.hamburger.open span:nth-child(1){transform:translateY(5px) rotate(45deg);}
.hamburger.open span:nth-child(2){opacity:0;}
.hamburger.open span:nth-child(3){transform:translateY(-5px) rotate(-45deg);}

.mobile-panel{
  display:flex; position:fixed; inset:0; z-index:99;
  background:var(--ivory);
  padding:100px 32px 40px;
  flex-direction:column; gap:6px;
  transform:translateY(-8px); opacity:0;
  transition:transform .25s ease, opacity .2s ease;
  pointer-events:none;
}
.mobile-panel.open{opacity:1; transform:translateY(0); pointer-events:auto;}
.mobile-panel a{
  font-family:'Space Grotesk'; font-size:26px; font-weight:600; padding:16px 0;
  border-bottom:1px solid rgba(11,34,51,0.08); color:var(--navy);
}
.mobile-panel .navcta{margin-top:26px; text-align:center; font-size:15px; padding:16px; color:var(--ivory);}
body.nav-open{overflow:hidden;}

/* ---------- NAV DROPDOWN: "Technical" ---------- */
.nav-dropdown{position:relative;}
.nav-dropdown-trigger{
  font:inherit; background:none; border:none; padding:0; margin:0; cursor:pointer;
  color:var(--ivory); opacity:.85; transition:opacity .2s, color .3s ease;
  display:inline-flex; align-items:center; gap:5px;
}
.nav-dropdown-trigger:hover, .nav-dropdown.open .nav-dropdown-trigger{opacity:1; color:var(--sky);}
.nav-dropdown-trigger .caret{width:0; height:0; border-left:4px solid transparent; border-right:4px solid transparent; border-top:5px solid currentColor; transition:transform .2s ease; flex:none;}
.nav-dropdown.open .nav-dropdown-trigger .caret{transform:rotate(180deg);}
header.solid .nav-dropdown-trigger{color:var(--navy);}
header.solid .nav-dropdown-trigger:hover, header.solid .nav-dropdown.open .nav-dropdown-trigger{color:var(--sky-deep);}

.nav-dropdown-menu{
  position:absolute; top:calc(100% + 18px); left:50%; transform:translateX(-50%) translateY(-6px);
  background:var(--navy); border:1px solid rgba(245,243,238,0.12); border-radius:2px;
  min-width:220px; padding:8px 0; box-shadow:0 16px 32px rgba(11,34,51,0.35);
  opacity:0; pointer-events:none; transition:opacity .18s ease, transform .18s ease;
  z-index:200;
}
.nav-dropdown.open .nav-dropdown-menu{opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0);}
.nav-dropdown-menu a{display:block; padding:11px 20px; font-family:'Inter'; font-size:14px; font-weight:500; color:var(--ivory); opacity:.85; white-space:nowrap;}
.nav-dropdown-menu a:hover{background:rgba(245,243,238,0.06); color:var(--sky); opacity:1;}
/* the dropdown panel is always navy, regardless of header scroll state — its
   links must stay ivory even when ".navlinks a" is repainted navy on scroll */
header.solid .navlinks .nav-dropdown-menu a{color:var(--ivory);}
header.solid .navlinks .nav-dropdown-menu a:hover{color:var(--sky);}

/* ---------- MOBILE NAV ACCORDION: "Technical" ---------- */
.mobile-dropdown-trigger{
  width:100%; text-align:left; background:none; border:none; cursor:pointer; margin:0;
  font-family:'Space Grotesk'; font-size:26px; font-weight:600; padding:16px 0;
  border-bottom:1px solid rgba(11,34,51,0.08); color:var(--navy);
  display:flex; align-items:center; justify-content:space-between;
}
.mobile-dropdown-trigger .caret{width:0; height:0; border-left:6px solid transparent; border-right:6px solid transparent; border-top:7px solid var(--navy); transition:transform .2s ease; flex:none;}
.mobile-dropdown.open .mobile-dropdown-trigger .caret{transform:rotate(180deg);}
.mobile-dropdown-menu{max-height:0; overflow:hidden; transition:max-height .25s ease;}
.mobile-dropdown.open .mobile-dropdown-menu{max-height:220px;}
.mobile-dropdown-menu a{display:block; font-family:'Inter'; font-size:17px; font-weight:500; padding:14px 0 14px 18px; color:var(--graphite); border-bottom:none;}
body.pdf-modal-open{overflow:hidden;}

/* ---------- PDF BROCHURE MODAL ---------- */
.pdf-modal{position:fixed; inset:0; z-index:2000; display:none; align-items:center; justify-content:center; background:rgba(11,34,51,0.92); padding:32px 16px; opacity:0; transition:opacity .25s ease;}
.pdf-modal.open{display:flex; opacity:1;}
.pdf-modal-inner{position:relative; width:min(920px,94vw); height:min(86vh,1100px); background:#fff; border-radius:2px; box-shadow:0 24px 60px rgba(0,0,0,.5); overflow:hidden;}
.pdf-modal-inner iframe{width:100%; height:100%; border:0; display:block;}
.pdf-modal-close{position:absolute; top:12px; right:12px; z-index:2; width:36px; height:36px; border:none; border-radius:50%; background:var(--navy); color:var(--ivory); font-size:20px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 8px rgba(0,0,0,.35); transition:background .2s ease;}
.pdf-modal-close:hover{background:var(--sky-deep);}

/* ---------- BUTTONS ---------- */
.hero-ctas{display:flex; gap:16px; margin-top:40px;}
.btn-primary{background:var(--sky); color:var(--navy); padding:15px 28px; font-weight:600; font-size:14.5px; border-radius:2px; transition:background .2s, transform .2s;}
.btn-primary:hover{background:#3fb0ee; transform:translateY(-1px);}
.btn-ghost{border:1px solid rgba(245,243,238,0.3); padding:15px 26px; font-weight:600; font-size:14.5px; border-radius:2px; transition:border-color .2s, background .2s;}
.btn-ghost:hover{border-color:var(--ivory); background:rgba(245,243,238,0.06);}
.brochure-link{display:inline-flex; align-items:center; gap:8px; margin-top:22px; font-family:'IBM Plex Mono'; font-size:12.5px; letter-spacing:.04em; color:var(--sky); border-bottom:1px solid rgba(31,157,227,0.35); padding-bottom:3px; transition:border-color .2s ease, color .2s ease;}
.brochure-link:hover{border-color:var(--sky); color:#3fb0ee;}

/* ---------- SECTION SHELL ---------- */
section{padding:120px 0;}
.section-head{max-width:640px; margin-bottom:60px;}
.eyebrow-dark{font-family:'IBM Plex Mono'; font-size:12.5px; letter-spacing:.12em; color:var(--sky-deep); text-transform:uppercase; display:flex; align-items:center; gap:10px; margin-bottom:16px;}
.eyebrow-dark::before{content:''; width:26px; height:1px; background:var(--sky-deep);}
.section-head h2{font-size:clamp(28px,3vw,40px); font-weight:600;}
.section-head p{margin-top:16px; color:var(--graphite); font-size:16px; line-height:1.6;}

/* ---------- BREADCRUMB (product subpages) ---------- */
.breadcrumb{font-family:'IBM Plex Mono'; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:rgba(245,243,238,.55); display:flex; align-items:center; gap:8px; margin-bottom:32px;}
.breadcrumb a{color:var(--sky);}
.breadcrumb a:hover{text-decoration:underline;}

/* ---------- PRODUCT HERO (product subpages) ---------- */
.product-hero{position:relative; background:linear-gradient(180deg, var(--navy) 0%, #0E2A3E 100%); color:var(--ivory); padding:158px 0 96px; overflow:hidden;}
.product-grid{position:relative; z-index:2; display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;}
.product-hero h1{font-size:clamp(32px,4.4vw,52px); font-weight:600; line-height:1.05;}
.product-badge{font-family:'IBM Plex Mono'; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--sky); display:inline-block; margin-top:16px;}
.product-hero p.lead{margin-top:18px; font-size:16px; line-height:1.65; color:rgba(245,243,238,.72); max-width:460px;}
.media-panel{position:relative; aspect-ratio:4/3; border:1px solid rgba(245,243,238,.16); background:#EFECE4; overflow:hidden;}
.media-panel img{width:100%; height:100%; object-fit:contain;}

/* ---------- DARK PANEL (fact list — why-choose-us / product features) ---------- */
.dark-panel{background:var(--navy); color:var(--ivory);}
.dark-panel .eyebrow-dark{color:var(--sky);}
.dark-panel .eyebrow-dark::before{background:var(--sky);}
.dark-panel .section-head h2{color:var(--ivory);}
.fact-list{border-top:1px solid rgba(245,243,238,0.14);}
.fact-row{display:grid; grid-template-columns:100px 1fr; gap:28px; padding:32px 0; border-bottom:1px solid rgba(245,243,238,0.14); align-items:baseline; transition:padding-left .25s ease, border-color .25s ease;}
.fact-row:hover{padding-left:14px; border-color:var(--sky);}
.fact-idx{font-size:14px; color:var(--sky);}
.fact-body h3{font-size:20px; font-weight:600;}
.fact-body p{margin-top:8px; color:rgba(245,243,238,0.62); font-size:14.5px; line-height:1.6; max-width:580px;}

/* ---------- SPEC GRID (big-number facts — engineering / product spec sheet) ---------- */
.eng-facts{display:grid; grid-template-columns:1fr 1fr; gap:20px 32px; margin-top:32px;}
.eng-facts.cols-3{grid-template-columns:repeat(3,1fr);}
@media (max-width:600px){ .eng-facts.cols-3{grid-template-columns:1fr 1fr;} }
.fact .n{font-family:'Space Grotesk'; font-size:26px; font-weight:600; color:var(--navy);}
.fact .l{font-family:'IBM Plex Mono'; font-size:12px; color:var(--graphite); margin-top:4px;}
.dark-panel .fact .n{color:var(--ivory);}
.dark-panel .fact .l{color:rgba(245,243,238,0.55);}

/* ---------- PRODUCT GALLERY (manifest-driven carousel) ---------- */
.gallery-hidden{display:none;}
.gallery-main{position:relative; aspect-ratio:16/10; background:#fff; border:1px solid rgba(11,34,51,0.08); overflow:hidden; display:flex; align-items:center; justify-content:center;}
.gallery-main img{max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; display:block; opacity:1; transition:opacity .22s ease;}
.gallery-main img.is-loading{opacity:0;}
.gallery-nav-btn{position:absolute; top:50%; transform:translateY(-50%); width:40px; height:40px; border:none; border-radius:2px; background:rgba(11,34,51,0.55); color:#fff; font-size:16px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .2s ease;}
.gallery-nav-btn:hover{background:rgba(11,34,51,0.8);}
.gallery-nav-btn.gallery-prev{left:14px;}
.gallery-nav-btn.gallery-next{right:14px;}
.gallery-caption{margin-top:18px; display:flex; justify-content:space-between; align-items:baseline; gap:16px;}
.gallery-caption h4{font-family:'Space Grotesk'; font-size:17px; font-weight:600;}
.gallery-caption-text{color:var(--graphite); font-size:14px; line-height:1.6; margin-top:6px;}
.gallery-counter{font-family:'IBM Plex Mono'; font-size:11.5px; color:var(--graphite); white-space:nowrap; flex:none;}
.gallery-thumbs{display:flex; flex-direction:row; align-items:flex-start; gap:10px; margin-top:18px; overflow-x:auto; overflow-y:hidden; padding-bottom:4px;}
.gallery-thumb{flex:0 0 92px; width:92px; height:69px; object-fit:cover; border:2px solid transparent; cursor:pointer; opacity:.6; transition:opacity .2s ease, border-color .2s ease;}
.gallery-thumb:hover{opacity:.9;}
.gallery-thumb.active{opacity:1; border-color:var(--sky);}

/* ---------- SPEC TABLE (certified performance data — product subpages) ---------- */
.spec-table{width:100%; min-width:560px; border-collapse:collapse; font-size:14px;}
.spec-table th{font-family:'IBM Plex Mono'; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--graphite); text-align:left; padding:0 20px 14px 0; border-bottom:1px solid rgba(11,34,51,0.14); white-space:nowrap;}
.spec-table td{padding:14px 20px 14px 0; border-bottom:1px solid rgba(11,34,51,0.08); vertical-align:top; line-height:1.5;}
.spec-table th:last-child, .spec-table td:last-child{padding-right:0;}
.spec-table td:first-child{color:var(--navy); font-weight:500; white-space:nowrap;}
.spec-table td:nth-child(2){font-family:'IBM Plex Mono'; font-size:13px; color:var(--sky-deep);}
.spec-table td:last-child{color:var(--graphite); font-size:13px;}
.spec-table tr:last-child td{border-bottom:none;}
@media (max-width:600px){
  .spec-table{font-size:13px;}
  .spec-table td:nth-child(2){font-size:12px;}
}
.dark-panel .spec-table th{color:rgba(245,243,238,0.5); border-bottom-color:rgba(245,243,238,0.18);}
.dark-panel .spec-table td{border-bottom-color:rgba(245,243,238,0.12);}
.dark-panel .spec-table td:first-child{color:var(--ivory);}
.dark-panel .spec-table td:nth-child(2){color:var(--sky);}
.dark-panel .spec-table td:last-child{color:rgba(245,243,238,0.55);}

/* ---------- MODEL CARDS (systems tabs / related systems) ---------- */
.model-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-bottom:8px;}
.model-card{
  background:#fff; border:1px solid rgba(11,34,51,0.12);
  box-shadow:0 1px 3px rgba(11,34,51,0.05);
  display:flex; flex-direction:column;
  transition:border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.model-card:hover{border-color:var(--sky); transform:translateY(-4px); box-shadow:0 16px 28px rgba(11,34,51,0.12);}
.model-img{aspect-ratio:4/3; background-size:cover; background-position:center; background-color:#EFECE4; border-bottom:1px solid rgba(11,34,51,0.08);}
.model-body{padding:22px 24px; display:flex; flex-direction:column; flex:1;}
.model-badge{font-family:'IBM Plex Mono'; font-size:11.5px; font-weight:500; letter-spacing:.08em; color:var(--sky-deep); text-transform:uppercase;}
.model-card h4{font-family:'Space Grotesk'; font-size:18px; font-weight:600; margin-top:9px; color:var(--navy);}
.model-card p{font-size:13.5px; color:var(--graphite); margin-top:9px; line-height:1.6; flex:1;}
.mini-specs{list-style:none; display:flex; flex-wrap:wrap; gap:7px 14px; margin-top:16px; padding-top:14px; border-top:1px solid rgba(11,34,51,0.08);}
.mini-specs li{font-family:'IBM Plex Mono'; font-size:11.5px; font-weight:500; color:var(--navy); white-space:nowrap;}
.mini-specs li::before{content:'— '; color:var(--sky-deep);}
.model-link{margin-top:16px; font-size:13px; font-weight:600; color:var(--sky-deep); display:inline-block; border-bottom:1px solid transparent;}
.model-link:hover{border-color:var(--sky-deep);}

/* ---------- CTA BAND ---------- */
.cta-band{position:relative; background:var(--navy); color:var(--ivory); padding:90px 0; text-align:center; overflow:hidden;}
.cta-band .grid-overlay{opacity:.14;}
.cta-band h2{position:relative; z-index:2; font-size:clamp(26px,3vw,38px); font-weight:600;}
.cta-band p{position:relative; z-index:2; margin-top:14px; font-size:16px; color:rgba(245,243,238,0.7);}
.cta-band .btn-primary{position:relative; z-index:2; margin-top:28px; display:inline-block;}

/* ---------- FOOTER ---------- */
footer{background:var(--navy); color:rgba(245,243,238,0.7); padding:70px 0 30px;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px;}
footer h4{color:var(--ivory); font-family:'IBM Plex Mono'; font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; margin-bottom:16px;}
footer ul{list-style:none;}
footer li{margin-bottom:10px; font-size:14px;}
footer li a:hover{color:var(--sky);}
.footer-bottom{border-top:1px solid rgba(245,243,238,0.12); margin-top:56px; padding-top:24px; display:flex; justify-content:space-between; font-size:12.5px; flex-wrap:wrap; gap:12px;}

/* ---------- TABLET ---------- */
@media (max-width:960px){
  .wrap{padding:0 24px;}
  section{padding:88px 0;}
  .model-grid{grid-template-columns:repeat(2,1fr);}
  .product-grid{grid-template-columns:1fr; gap:36px;}
  .product-hero{padding:140px 0 72px;}
  .footer-grid{grid-template-columns:1fr 1fr; gap:32px 24px;}
  .navlinks{display:none;}
  .hamburger{display:block;}
  .fact-row{grid-template-columns:70px 1fr; gap:20px;}
}

/* ---------- PHONE ---------- */
@media (max-width:600px){
  .wrap{padding:0 20px;}
  header{padding:16px 0;}
  header.solid{padding:12px 0;}
  .logo{font-size:17px;}
  .nav-right{gap:10px;}
  .navcta{padding:9px 14px; font-size:12.5px;}
  section{padding:64px 0;}
  .hero-ctas{flex-direction:column; gap:12px; margin-top:30px;}
  .hero-ctas a{text-align:center; width:100%;}
  .section-head{margin-bottom:36px;}
  .fact-row{grid-template-columns:1fr; gap:8px;}
  .fact-idx{opacity:.6;}
  .model-grid{grid-template-columns:1fr;}
  .eng-facts{gap:16px 20px;}
  .gallery-nav-btn{width:34px; height:34px; font-size:14px;}
  .gallery-thumb{flex:0 0 72px; width:72px; height:54px;}
  .gallery-caption{flex-direction:column; gap:4px;}
  .product-hero{padding:120px 0 56px;}
  .cta-band{padding:56px 0;}
  .footer-grid{grid-template-columns:1fr; gap:32px;}
  .footer-bottom{flex-direction:column;}
  .mobile-panel{padding:90px 24px 32px;}
  .mobile-panel a{font-size:22px; padding:14px 0;}
}

/* ---------- COOKIE CONSENT BANNER ---------- */
.cookie-banner{
  position:fixed; left:0; right:0; bottom:0; z-index:2500;
  background:var(--navy); color:var(--ivory); padding:22px 32px;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:24px;
  box-shadow:0 -8px 24px rgba(0,0,0,.25);
  transform:translateY(100%); transition:transform .4s ease;
}
.cookie-banner.show{transform:translateY(0);}
.cookie-banner p{font-size:13.5px; line-height:1.6; color:rgba(245,243,238,0.8); max-width:680px; margin:0;}
.cookie-banner a{color:var(--sky); text-decoration:underline; text-underline-offset:2px;}
.cookie-banner-actions{display:flex; gap:12px; flex-shrink:0;}
.cookie-banner button{font-family:'Inter',sans-serif; cursor:pointer;}
.cookie-banner .btn-primary, .cookie-banner .btn-ghost{padding:11px 22px; font-size:13.5px; border:none;}
.cookie-banner .btn-primary{background:var(--sky); color:var(--navy);}
.cookie-banner .btn-primary:hover{background:#3fb0ee;}
.cookie-banner .btn-ghost{background:transparent; border:1px solid rgba(245,243,238,0.3); color:var(--ivory);}
.cookie-banner .btn-ghost:hover{border-color:var(--ivory); background:rgba(245,243,238,0.06);}
@media (max-width:600px){
  .cookie-banner{flex-direction:column; align-items:stretch; text-align:center; padding:20px 18px;}
  .cookie-banner-actions{justify-content:center;}
}