/* =====================================================================
   RACKSQ — Industrial Storage Systems
   Design system: riveted steel nameplate aesthetic
   Display: Oswald (condensed, warehouse signage)
   Body: IBM Plex Sans (technical, utility)
   Data/specs: IBM Plex Mono (spec-sheet numbers)
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root{
  --ink:#2a2c2f;
  --steel:#4a4d52;
  --steel-mid:#6b6e74;
  --steel-light:#aaadb3;
  --plate:#ececec;
  --plate-dark:#dcdcdc;
  --white:#ffffff;
  --safety:#ffc400;
  --safety-dim:#cc9c00;
  --text-muted:#6b7280;
  --radius:4px;
  --shadow-sm:0 2px 10px rgba(20,23,28,.08);
  --shadow-md:0 14px 36px rgba(20,23,28,.16);
  --transition:all .3s cubic-bezier(.4,0,.2,1);
}
/* ===== SPECIFICATIONS SECTION - Improved Design ===== */
.spec-band {
    padding: 70px 0;
    background: #f8f9fa;
}

.spec-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: start;
}

.section-head {
    margin-bottom: 2rem;
}

.section-head .eyebrow {
    font-size: 0.95rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 600;
    color: #0066cc;
}

.spec-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem;
}

.spec-card {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 1.25rem 1.1rem;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.spec-card:hover {
    border-color: #0066cc;
    box-shadow: 0 8px 20px rgba(0,102,204,0.1);
    transform: translateY(-4px);
}

.spec-card .sc-label {
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #555;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.spec-card .sc-value {
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.4;
    color: #222;
}

.spec-card.wide {
    grid-column: 1 / -1;
}

/* Comparison Strip */
.compare-strip {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.cs-card {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.cs-card h4 {
    margin-bottom: 1rem;
    font-size: 1.15rem;
    color: #1a1a1a;
}

/* Responsive */
@media (max-width: 992px) {
    .spec-layout {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    
    .compare-strip {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 576px) {
    .spec-cards {
        grid-template-columns: 1fr;
    }
    
    .spec-card {
        padding: 1.1rem;
    }
}
/* Comparison Strip */
.compare-strip {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.compare-strip .cs-card {
    background: #fff;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 10px;
    padding: 1.4rem 1.3rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.compare-strip .cs-card h4 {
    margin-bottom: 1rem;
    color: #1a1a1a;
    font-size: 1.1rem;
}

.compare-strip .cs-card ul {
    padding-left: 1.2rem;
    margin: 0;
    line-height: 1.7;
}

.compare-strip .cs-card li {
    margin-bottom: 0.6rem;
}

/* Mobile Responsiveness */
@media (max-width: 900px) {
    .spec-layout {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    
    .compare-strip {
        grid-template-columns: 1fr;
    }
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'IBM Plex Sans',sans-serif;
  color:var(--ink);
  background:var(--white);
  line-height:1.65;
  overflow-x:hidden;
}
h1,h2,h3,h4{
  font-family:'Oswald',sans-serif;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.01em;
  line-height:1.12;
  color:var(--ink);
}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
.container{max-width:1280px;margin:0 auto;padding:0 24px}
.mono{font-family:'IBM Plex Mono',monospace}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- Rivet motif (signature element) ---------- */
.rivet{
  position:absolute;width:8px;height:8px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #fff8 0%, #0003 70%), var(--steel-light);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.5), 0 1px 2px rgba(0,0,0,.35);
}
.riveted{position:relative}
.riveted .rivet:nth-child(1){top:10px;left:10px}
.riveted .rivet.tr{top:10px;right:10px;left:auto}
.riveted .rivet.bl{bottom:10px;left:10px;top:auto}
.riveted .rivet.br{bottom:10px;right:10px;top:auto;left:auto}

/* ---------- Hazard strip accent (used sparingly) ---------- */
.hazard-strip{
  height:6px;width:100%;
  background:repeating-linear-gradient(135deg,var(--ink) 0 14px,var(--safety) 14px 28px);
}

/* ---------- Eyebrow / plate label ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:'IBM Plex Mono',monospace;
  font-size:.74rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--safety-dim);
  margin-bottom:.9rem;
}
.eyebrow::before{content:'';width:18px;height:2px;background:var(--safety)}

.section-head{margin-bottom:2.6rem;max-width:680px}
.section-head h2{font-size:clamp(1.7rem,3.6vw,2.5rem);margin-bottom:.7rem}
.section-head p{color:var(--text-muted);font-size:1.02rem}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.section-head.center .eyebrow::before{display:none}

/* =====================================================================
   HEADER — white glass navbar, bigger logo
   FIX: nav-wrap always keeps side padding on mobile so the logo and
   the toggle button never touch the screen edge; toggle is now a
   proper animated hamburger (bars → X) instead of a bare icon.
   ===================================================================== */
.site-header{
  position:sticky;top:0;z-index:1000;
  background:rgba(255,255,255,.94);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--plate-dark);
  box-shadow:0 2px 16px rgba(20,23,28,.05);
}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;padding:.5rem 0;position:relative;gap:1rem}

.brand{display:flex;align-items:center;flex-shrink:0}
.main-nav{display:flex;align-items:center;gap:.1rem}
.main-nav>li{list-style:none;position:relative}
.main-nav a{
  color:var(--steel);font-weight:600;font-size:.86rem;letter-spacing:.03em;text-transform:uppercase;
  padding:.7rem 1.05rem;display:inline-block;transition:var(--transition);
}
.main-nav a:hover,.main-nav a.active{color:var(--safety-dim)}
.nav-cta{background:var(--ink);color:#fff!important;font-weight:700!important;margin-left:.4rem;padding:.62rem 1.3rem!important}
.nav-cta:hover{background:var(--safety);color:var(--ink)!important}

.has-mega{position:relative}
.mega-panel{
  position:absolute;top:100%;left:50%;transform:translateX(-50%);
  background:#fff;box-shadow:var(--shadow-md);border-top:3px solid var(--safety);
  width:560px;padding:1.3rem;display:none;grid-template-columns:1fr 1fr;gap:.2rem;
}
.has-mega:hover .mega-panel{display:grid}
.mega-panel a{color:var(--ink);font-weight:500;font-size:.86rem;text-transform:none;padding:.6rem .8rem;display:flex;align-items:center;gap:.55rem;border-radius:3px}
.mega-panel a:hover{background:var(--plate);color:var(--safety-dim)}
.mega-panel a i{color:var(--safety-dim);width:18px}

/* ---- animated hamburger toggle ---- */
.nav-toggle{
  display:none;background:none;border:1.5px solid var(--plate-dark);color:var(--ink);
  width:42px;height:42px;align-items:center;justify-content:center;cursor:pointer;
  border-radius:3px;flex-shrink:0;position:relative;transition:var(--transition);
}
.nav-toggle .bars{position:relative;width:18px;height:14px;display:block}
.nav-toggle .bars span{
  position:absolute;left:0;width:100%;height:2px;background:var(--ink);
  border-radius:1px;transition:var(--transition);
}
.nav-toggle .bars span:nth-child(1){top:0}
.nav-toggle .bars span:nth-child(2){top:6px}
.nav-toggle .bars span:nth-child(3){top:12px}
.nav-toggle.active{border-color:var(--safety)}
.nav-toggle.active .bars span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-toggle.active .bars span:nth-child(2){opacity:0}
.nav-toggle.active .bars span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.nav-overlay{position:fixed;inset:0;background:rgba(10,12,16,.45);backdrop-filter:blur(2px);opacity:0;visibility:hidden;transition:var(--transition);z-index:998}
.nav-overlay.open{opacity:1;visibility:visible}

@media(max-width:991px){
  .container{padding:0 20px}
  .nav-wrap{padding:.6rem 0}
  .nav-toggle{display:flex}
  .main-nav{
    display:flex;flex-direction:column;align-items:stretch;
    position:absolute;top:100%;left:0;right:0;
    background:rgba(20,23,28,.92);
    backdrop-filter:saturate(180%) blur(18px);
    -webkit-backdrop-filter:saturate(180%) blur(18px);
    padding:1rem 1.2rem 1.6rem;max-height:calc(100vh - 70px);overflow-y:auto;
    box-shadow:0 16px 30px rgba(0,0,0,.35);
    transform:translateY(-8px);opacity:0;visibility:hidden;pointer-events:none;
    transition:var(--transition);z-index:999;
  }
  .main-nav.open{transform:translateY(0);opacity:1;visibility:visible;pointer-events:auto}
  .main-nav a{width:100%;color:rgba(255,255,255,.85)}
  .main-nav a:hover,.main-nav a.active{color:var(--safety)}
  .nav-cta{background:var(--safety);color:var(--ink)!important;text-align:center}
  .nav-cta:hover{background:#fff}
  .mega-panel{position:static;transform:none;width:100%;display:none;box-shadow:none;border-top:none;background:rgba(255,255,255,.05);grid-template-columns:1fr;margin-top:.2rem}
  .mega-panel a{color:#fff}
  .mega-panel a i{color:var(--safety)}
  .has-mega:hover .mega-panel{display:none}
  .has-mega.open .mega-panel{display:grid}
}
@media(max-width:480px){
  .container{padding:0 16px}
  .nav-wrap{gap:.7rem}
}

/* =====================================================================
   HERO SLIDER — full-bleed image background
   FIX: slide-content now carries its own left/right padding and is
   centred to the same 1280px max-width as .container, so headline,
   paragraph and buttons never sit flush against the screen edge —
   even if the slider markup isn't nested inside .container.
   ===================================================================== */
.hero{background:var(--ink);position:relative;overflow:hidden}

.hero-slider{position:relative;min-height:640px}
.slide{
  position:absolute;inset:0;opacity:0;visibility:hidden;
  transition:opacity 1s ease;
}
.slide.active{opacity:1;visibility:visible;position:relative}

.slide-bg{position:absolute;inset:0;z-index:0}
.slide-bg img{width:100%;height:100%;object-fit:cover;object-position:center}
.slide.active .slide-bg img{animation:kenBurns 9s ease-out forwards}
@keyframes kenBurns{from{transform:scale(1.08)}to{transform:scale(1)}}

.slide-overlay{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(100deg, rgba(15,17,21,.92) 0%, rgba(15,17,21,.72) 30%, rgba(15,17,21,.35) 58%, rgba(15,17,21,.08) 82%),
    linear-gradient(0deg, rgba(15,17,21,.55) 0%, rgba(15,17,21,0) 32%);
}

.slide-content{
  position:relative;z-index:2;min-height:640px;
  display:flex;flex-direction:column;justify-content:center;
  max-width:1280px;margin:0 auto;width:100%;
  padding:5rem 24px;
  box-sizing:border-box;
}
.slide-content .eyebrow{color:var(--safety)}
.slide-content h1{font-size:clamp(2rem,4.6vw,3.4rem);color:#fff;margin-bottom:1.1rem;max-width:640px}
.slide-content h1 .hi{color:var(--safety)}
.slide-content p{color:rgba(255,255,255,.75);font-size:1.08rem;max-width:520px;margin-bottom:1.9rem}
.hero-actions{display:flex;gap:1rem;flex-wrap:wrap}

.spec-plate{
  position:absolute;z-index:3;bottom:2.2rem;right:2.2rem;background:rgba(15,17,21,.82);
  border:1px solid rgba(255,255,255,.14);padding:1rem 1.3rem;backdrop-filter:blur(6px);
}
.spec-plate .val{font-family:'IBM Plex Mono',monospace;color:var(--safety);font-weight:600;font-size:1.4rem;display:block}
.spec-plate .lbl{font-family:'IBM Plex Mono',monospace;color:rgba(255,255,255,.6);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase}

.slider-dots{position:absolute;left:0;bottom:1.6rem;z-index:4;display:flex;gap:.6rem;padding-left:24px}
.slider-dots button{
  width:34px;height:3px;background:rgba(255,255,255,.3);border:none;cursor:pointer;padding:0;transition:var(--transition);
}
.slider-dots button.active{background:var(--safety);width:44px}

@media(max-width:900px){
  .hero-slider{min-height:480px}
  .slide-content{min-height:480px;padding:3rem 20px 2.6rem}
  .slide-content h1{font-size:1.9rem;max-width:100%}
  .slide-content p{max-width:100%;font-size:.96rem}
  .slide-overlay{
    background:
      linear-gradient(0deg, rgba(15,17,21,.95) 0%, rgba(15,17,21,.78) 42%, rgba(15,17,21,.42) 70%, rgba(15,17,21,.2) 100%);
  }
  .spec-plate{bottom:1rem;right:1rem;padding:.7rem 1rem}
  .spec-plate .val{font-size:1.15rem}
  .slider-dots{padding-left:20px;bottom:1.1rem}
  .hero-actions .btn{padding:.75rem 1.35rem;font-size:.78rem}
}
@media(max-width:560px){
  .hero-slider{min-height:420px}
  .slide-content{min-height:420px;padding:2.2rem 18px 2rem}
  .slide-content .eyebrow{font-size:.66rem;margin-bottom:.6rem}
  .slide-content h1{font-size:1.5rem;margin-bottom:.7rem;line-height:1.22}
  .slide-content p{margin-bottom:1.2rem;font-size:.88rem;line-height:1.55}
  .hero-actions{gap:.7rem}
  .hero-actions .btn{width:auto;justify-content:center;padding:.68rem 1.15rem;font-size:.72rem;gap:.4rem}
  .slider-dots{padding-left:18px}
}
@media(max-width:380px){
  .slide-content{padding:2rem 16px 1.8rem}
  .slide-content h1{font-size:1.32rem}
  .slide-content p{font-size:.82rem}
  .slider-dots{padding-left:16px}
}
@media(prefers-reduced-motion:reduce){
  .slide.active .slide-bg img{animation:none}
}

/* =====================================================================
   BUTTONS
   ===================================================================== */
.btn{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:'IBM Plex Sans',sans-serif;font-weight:700;font-size:.86rem;letter-spacing:.04em;text-transform:uppercase;
  padding:.9rem 1.7rem;border:2px solid transparent;cursor:pointer;transition:var(--transition);
}
.btn-accent{background:var(--safety);color:var(--ink)}
.btn-accent:hover{background:#fff}
.btn-outline{border-color:rgba(255,255,255,.35);color:#fff}
.btn-outline:hover{border-color:var(--safety);color:var(--safety)}
.btn-outline.dark{border-color:var(--ink);color:var(--ink)}
.btn-outline.dark:hover{border-color:var(--safety-dim);color:var(--safety-dim)}

/* =====================================================================
   TRUST STRIP
   ===================================================================== */
.trust-strip{background:var(--plate);border-bottom:1px solid var(--plate-dark)}
.trust-row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1.4rem;padding:1.4rem 0}
.trust-item{display:flex;align-items:center;gap:.7rem;font-weight:600;font-size:.85rem;color:var(--steel)}
.trust-item i{color:var(--safety-dim);font-size:1.15rem}

/* =====================================================================
   ABOUT BLOCK
   ===================================================================== */
.about-block{padding:5.5rem 0}
.about-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:3.5rem;align-items:center}
.about-graphic{height:400px;position:relative;overflow:hidden;border:1px solid var(--plate-dark)}
.about-graphic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.about-graphic::before{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(20,23,28,.05),rgba(20,23,28,.85) 92%)}
.about-graphic .num{position:absolute;z-index:2;bottom:1.6rem;left:1.6rem;color:#fff;font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:2.1rem}
.about-graphic .num span{display:block;font-size:.78rem;font-weight:500;color:rgba(255,255,255,.65);text-transform:uppercase;letter-spacing:.06em;font-family:'IBM Plex Sans',sans-serif;margin-top:.2rem}
.about-grid p{color:var(--text-muted);margin-bottom:1.1rem}
.checklist{list-style:none;margin-top:1.4rem;display:grid;gap:.75rem}
.checklist li{display:flex;gap:.7rem;align-items:flex-start;font-weight:600;font-size:.92rem;color:var(--ink)}
.checklist i{color:var(--safety-dim);margin-top:.2rem}

/* =====================================================================
   USP CARDS
   ===================================================================== */
.usp-band{background:var(--ink);padding:5rem 0}
.usp-band .section-head h2,.usp-band .section-head p{color:#fff}
.usp-band .section-head p{color:rgba(255,255,255,.6)}
.usp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.08)}
.usp-card{background:#1c2027;padding:2rem 1.5rem;transition:var(--transition);border-top:2px solid transparent}
.usp-card:hover{border-top-color:var(--safety);background:#20242c}
.usp-card .ic{width:44px;height:44px;background:rgba(255,106,19,.12);display:flex;align-items:center;justify-content:center;margin-bottom:1.1rem;color:var(--safety);font-size:1.2rem}
.usp-card h3{font-size:.98rem;color:#fff;margin-bottom:.5rem}
.usp-card p{font-size:.85rem;color:rgba(255,255,255,.55)}
@media(max-width:991px){.usp-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.usp-grid{grid-template-columns:1fr}}

/* =====================================================================
   PRODUCT CARDS
   ===================================================================== */
.products-band{padding:5.5rem 0;background:var(--white)}
.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.product-card{border:1px solid var(--plate-dark);overflow:hidden;background:#fff;transition:var(--transition);display:flex;flex-direction:column}
.product-card:hover{box-shadow:var(--shadow-md);transform:translateY(-6px);border-color:var(--safety)}
.product-thumb{height:190px;position:relative;overflow:hidden}
.product-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.product-card:hover .product-thumb img{transform:scale(1.07)}
.product-thumb .corner{position:absolute;top:0;right:0;background:var(--safety);color:var(--ink);font-family:'IBM Plex Mono',monospace;font-size:.66rem;font-weight:600;letter-spacing:.06em;padding:.32rem .8rem;text-transform:uppercase}
.product-body{padding:1.5rem;flex:1;display:flex;flex-direction:column;gap:.7rem}
.product-body h3{font-size:1.05rem}
.product-body p{font-size:.86rem;color:var(--text-muted);flex:1}
.product-link{font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;color:var(--safety-dim);display:inline-flex;align-items:center;gap:.4rem}
.product-link i{transition:var(--transition)}
.product-link:hover i{transform:translateX(4px)}
@media(max-width:991px){.product-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.product-grid{grid-template-columns:1fr}}

/* =====================================================================
   PROCESS TIMELINE
   ===================================================================== */
.process-band{padding:5.5rem 0;background:var(--plate)}
.timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative}
.timeline::before{content:'';position:absolute;top:27px;left:6%;right:6%;height:2px;background:repeating-linear-gradient(90deg,var(--safety) 0 8px,transparent 8px 16px)}
.tl-step{text-align:center;padding:0 1rem;position:relative}
.tl-step .dot{
  width:54px;height:54px;background:var(--ink);color:var(--safety);font-family:'IBM Plex Mono',monospace;
  display:flex;align-items:center;justify-content:center;margin:0 auto 1.2rem;font-weight:600;
  border:3px solid var(--safety);position:relative;z-index:2;
}
.tl-step h3{font-size:.96rem;margin-bottom:.5rem}
.tl-step p{font-size:.84rem;color:var(--text-muted)}
@media(max-width:850px){.timeline{grid-template-columns:1fr 1fr;row-gap:2.5rem}.timeline::before{display:none}}

/* =====================================================================
   FAQ
   ===================================================================== */
.faq-band{padding:5.5rem 0;background:#fff}
.faq-item{border-bottom:1px solid var(--plate-dark)}
.faq-q{width:100%;text-align:left;background:none;border:none;padding:1.3rem .2rem;display:flex;justify-content:space-between;align-items:center;font-family:'IBM Plex Sans',sans-serif;font-weight:700;font-size:.98rem;color:var(--ink);cursor:pointer}
.faq-q i{color:var(--safety-dim);transition:var(--transition)}
.faq-item.open .faq-q i{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease}
.faq-a p{padding:0 .2rem 1.3rem;color:var(--text-muted);font-size:.92rem}

/* =====================================================================
   CTA BAND
   ===================================================================== */
.cta-band{background:var(--ink);padding:4.2rem 0;text-align:center;color:#fff;position:relative;overflow:hidden;border-top:4px solid var(--safety)}
.cta-band h2{color:#fff;font-size:clamp(1.6rem,3.6vw,2.3rem);margin-bottom:.8rem}
.cta-band p{color:rgba(255,255,255,.65);max-width:520px;margin:0 auto 1.8rem}

/* =====================================================================
   SPEC BAND + FEATURE LIST (product pages)
   ===================================================================== */
.spec-band{padding:5.5rem 0;background:var(--plate)}
.spec-layout{display:grid;grid-template-columns:1.15fr .85fr;gap:3.5rem;align-items:start}

.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--plate-dark);border-left:3px solid var(--safety);background:#fff;box-shadow:var(--shadow-sm)}

.spec-table{width:100%;min-width:460px;border-collapse:collapse}
.spec-table tr{border-bottom:1px solid var(--plate-dark)}
.spec-table tr:last-child{border-bottom:none}
.spec-table tr:nth-child(even){background:var(--plate)}
.spec-table th,.spec-table td{padding:1rem 1.3rem;text-align:left;vertical-align:top;font-size:.88rem}
.spec-table th{
  font-family:'IBM Plex Mono',monospace;font-weight:600;color:var(--steel);
  letter-spacing:.03em;text-transform:uppercase;font-size:.72rem;
  white-space:nowrap;width:38%;border-right:1px solid var(--plate-dark);
}
.spec-table td{color:var(--ink);font-weight:500;font-family:'IBM Plex Mono',monospace;font-size:.84rem}

.feature-list{list-style:none;display:grid;gap:1.2rem}
.feature-list li{
  display:flex;gap:1.1rem;align-items:flex-start;padding:1.3rem;
  background:#fff;border:1px solid var(--plate-dark);transition:var(--transition);
}
.feature-list li:hover{border-color:var(--safety);box-shadow:var(--shadow-sm);transform:translateY(-2px)}
.feature-list li i{
  flex:0 0 44px;width:44px;height:44px;border-radius:2px;
  background:var(--ink);color:var(--safety);
  display:flex;align-items:center;justify-content:center;font-size:1.05rem;
}
.feature-list li div{display:flex;flex-direction:column;gap:.35rem}
.feature-list li strong{
  font-family:'Oswald',sans-serif;font-weight:600;font-size:.96rem;
  text-transform:uppercase;letter-spacing:.02em;color:var(--ink);
}
.feature-list li span{font-size:.86rem;color:var(--text-muted);line-height:1.65}

@media(max-width:991px){
  .spec-band{padding:4rem 0}
  .spec-layout{grid-template-columns:1fr;gap:2.8rem}
}
@media(max-width:560px){
  .spec-table th,.spec-table td{padding:.8rem 1rem;font-size:.8rem}
  .spec-table th{font-size:.66rem}
  .feature-list li{padding:1.05rem;gap:.85rem}
  .feature-list li i{flex:0 0 38px;width:38px;height:38px;font-size:.92rem}
}

/* =====================================================================
   PAGE HEADER (inner pages)
   ===================================================================== */
.page-header{background:var(--ink);color:#fff;padding:3rem 0;border-bottom:4px solid var(--safety)}
.page-header .crumbs{font-family:'IBM Plex Mono',monospace;font-size:.78rem;color:rgba(255,255,255,.5);margin-bottom:.6rem;text-transform:uppercase;letter-spacing:.05em}
.page-header .crumbs a{color:rgba(255,255,255,.5)}
.page-header .crumbs a:hover{color:var(--safety)}
.page-header h1{color:#fff;font-size:clamp(1.7rem,3.6vw,2.4rem)}

/* =====================================================================
   CONTACT PAGE
   ===================================================================== */
   .contact-cards-band{padding:5.5rem 0;background:var(--plate)}
.cc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.cc-card{
  background:#fff;border:1px solid var(--plate-dark);border-top:3px solid var(--safety);
  padding:2.2rem 1.8rem;text-align:center;transition:var(--transition);
}
.cc-card:hover{box-shadow:var(--shadow-md);transform:translateY(-6px);border-top-color:var(--safety-dim)}
.cc-ic{
  width:54px;height:54px;background:var(--ink);color:var(--safety);border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:1.25rem;margin:0 auto 1.2rem;
}
.cc-card h3{font-size:1rem;margin-bottom:.8rem}
.cc-card p{font-size:.9rem;color:var(--text-muted);margin-bottom:.3rem;line-height:1.6}
.cc-card p a{color:var(--ink);font-weight:600;transition:var(--transition)}
.cc-card p a:hover{color:var(--safety-dim)}
 
@media(max-width:850px){
  .cc-grid{grid-template-columns:1fr;gap:1.2rem}
  .contact-cards-band{padding:4rem 0}
}
   
   
.contact-band{padding:5.5rem 0}
.contact-layout{display:grid;grid-template-columns:.85fr 1.15fr;gap:3rem}
.contact-info-card{background:var(--ink);color:#fff;padding:2.3rem;border-top:4px solid var(--safety)}
.contact-info-card h3{color:#fff;font-size:1.15rem;margin-bottom:1.4rem}
.cinfo-row{display:flex;gap:.9rem;margin-bottom:1.4rem;align-items:flex-start}
.cinfo-row i{color:var(--safety);font-size:1.05rem;margin-top:.2rem;width:20px}
.cinfo-row span{font-size:.9rem;color:rgba(255,255,255,.78);line-height:1.6}
.social-row{display:flex;gap:.6rem;margin-top:1.8rem}
.social-row a{width:38px;height:38px;background:rgba(255,255,255,.07);display:flex;align-items:center;justify-content:center;color:#fff;border:1px solid rgba(255,255,255,.12);transition:var(--transition)}
.social-row a:hover{background:var(--safety);color:var(--ink)}

.form-card{background:#fff;border:1px solid var(--plate-dark);padding:2.3rem;box-shadow:var(--shadow-sm)}
.form-card h3{font-size:1.2rem;margin-bottom:.4rem}
.form-card>p{color:var(--text-muted);font-size:.9rem;margin-bottom:1.6rem}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.form-grid .full{grid-column:1/-1}
.form-field label{display:block;font-family:'IBM Plex Mono',monospace;font-size:.72rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin-bottom:.5rem;color:var(--steel)}
.form-field input,.form-field select,.form-field textarea{
  width:100%;border:1.5px solid var(--plate-dark);border-radius:0;padding:.75rem .9rem;font-family:inherit;font-size:.92rem;background:var(--plate);transition:var(--transition);
}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{outline:none;border-color:var(--safety);background:#fff}
.form-field textarea{min-height:120px;resize:vertical}
.form-card .btn{width:100%;justify-content:center;margin-top:.4rem}

.map-embed{overflow:hidden;border:1px solid var(--plate-dark);margin-top:2rem}
.map-embed iframe{width:100%;height:320px;border:0;display:block}

.quick-contact-strip{background:var(--plate);padding:1.6rem 0}
.quick-contact-strip .container{display:flex;flex-wrap:wrap;gap:1.6rem;justify-content:space-between;align-items:center}
.quick-contact-strip a{display:flex;align-items:center;gap:.6rem;font-weight:600;font-size:.9rem;color:var(--ink)}
.quick-contact-strip a i{color:var(--safety-dim)}

/* =====================================================================
   FOOTER
   ===================================================================== */
footer{background:#0c0e12;color:#9aa3b0;padding:4.5rem 0 0;font-size:.9rem;border-top:4px solid var(--safety)}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.1fr;gap:2.5rem}
.footer-brand{display:flex;align-items:center;gap:.6rem;font-family:'Oswald',sans-serif;font-weight:700;color:#fff;font-size:1.15rem;margin-bottom:1rem;text-transform:uppercase}
.footer-about{color:#727c89;font-size:.87rem;line-height:1.75;max-width:300px;margin-bottom:1.4rem}
.footer-heading{font-family:'IBM Plex Mono',monospace;font-size:.8rem;font-weight:600;color:#fff;letter-spacing:.08em;text-transform:uppercase;margin-bottom:1.1rem}
.footer-list{list-style:none;display:flex;flex-direction:column;gap:.55rem}
.footer-list a{color:#727c89;font-size:.87rem;transition:var(--transition)}
.footer-list a:hover{color:var(--safety);padding-left:4px}
.footer-bottom{border-top:1px solid rgba(255,255,255,.07);padding:1.4rem 0;margin-top:3rem;text-align:center;font-size:.8rem;color:#5d6573}
.footer-bottom strong{color:#9aa3b0}
@media(max-width:900px){.footer-grid{grid-template-columns:1fr 1fr;row-gap:2.2rem}}
@media(max-width:560px){.footer-grid{grid-template-columns:1fr}}

.wa-float{position:fixed;bottom:24px;right:24px;z-index:999;width:56px;height:56px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.55rem;box-shadow:0 6px 20px rgba(0,0,0,.3);transition:var(--transition)}
.wa-float:hover{transform:scale(1.08)}

@media(max-width:991px){
  .about-grid,.contact-layout{grid-template-columns:1fr}
  .about-graphic{height:260px}
  .form-grid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}