/* ============================================================
   FLUID RESPONSIVE LAYER — tellequipment-responsive-20260909.css
   Any screen: 320px iPhone SE → Galaxy S8 Ultra → 4K desktop
   Any browser: Safari (webkit prefixes), Chrome, Firefox, Edge
   ============================================================ */

/* ── Fluid typography: everything scales smoothly, no jumps ── */
html{font-size:clamp(15px,.4vw + 13.8px,17.5px);-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{width:100%;max-width:100vw;overflow-x:clip}

/* Root containers become fluid */
.wrap,.header-wrap,.hero-wrap,.quote-wrap{max-width:min(1280px,92vw)}
.hero-wrap{padding:clamp(56px,7vw,96px) clamp(16px,4vw,32px) clamp(48px,6vw,80px)}

/* Section header (numbered) — fluid at every width */
.sec{grid-template-columns:clamp(56px,6.5vw,96px) 1fr;gap:clamp(18px,3vw,40px)}
.sec-no{font-size:clamp(34px,5vw,68px)}
.sec h2{font-size:clamp(26px,4.4vw,46px)}

/* ── Section-by-section fluidity ─────────────────────────── */

/* Hero: 3-col → 1-col fluid */
.hero-wrap{grid-template-columns:1fr;gap:clamp(32px,5vw,64px);align-items:start}
@media(min-width:1021px){.hero-wrap{grid-template-columns:1.2fr .8fr}}
.hero-facts{grid-template-columns:repeat(3,auto);gap:clamp(20px,3.4vw,44px)}
.hero-bg{grid-template-columns:1fr}
@media(min-width:641px){.hero-bg{grid-template-columns:repeat(2,1fr)}}

/* Split sections (text+media) */
.split{grid-template-columns:1fr;gap:clamp(28px,4vw,48px)}
@media(min-width:1021px){.split{grid-template-columns:1fr 1fr;gap:clamp(40px,5vw,64px)}}
.split img,.split video{max-width:100%;height:auto;-o-object-fit:cover;object-fit:cover}

/* Process rows */
.proc-row{grid-template-columns:clamp(56px,7vw,84px) 1fr;gap:clamp(14px,2.4vw,24px)}
.proc-row p{grid-column:2}
.proc-row .pn{font-size:clamp(34px,4.6vw,56px)}
.proc-row h3{font-size:clamp(19px,2.4vw,26px)}
@media(min-width:1021px){.proc-row{grid-template-columns:clamp(90px,8vw,120px) 1fr 2fr}.proc-row p{grid-column:auto}}

/* Spec + media grids already auto-fit — just tighten min for tiny screens */
.spec-grid,.media-band{grid-template-columns:1fr}
@media(min-width:560px){.spec-grid,.media-band{grid-template-columns:repeat(auto-fit,minmax(min(300px,90vw),1fr))}}

/* Stats */
.stats-grid{grid-template-columns:1fr 1fr;gap:1px}
@media(min-width:900px){.stats-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}}

/* Quote form */
.quote-wrap{grid-template-columns:1fr;gap:clamp(32px,4vw,56px)}
@media(min-width:1021px){.quote-wrap{grid-template-columns:1fr 1fr;gap:clamp(40px,5vw,64px)}}
.f-row{grid-template-columns:1fr}
@media(min-width:640px){.f-row{grid-template-columns:1fr 1fr}}
.quote input,.quote textarea,.quote select{width:100%;max-width:100%;box-sizing:border-box;-webkit-box-sizing:border-box;font-size:16px !important /* stops iOS auto-zoom */}

/* Footer */
.foot-grid{grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,48px)}
@media(min-width:900px){.foot-grid{grid-template-columns:1.6fr 1fr 1fr 1fr}}
footer{padding-inline:clamp(16px,4vw,32px)}

/* ── SAMSUNG GALAXY TAB S8 ULTRA (1848×2960 logical 1280/1440 landscape, 1140 portrait) ──
   S8 Ultra in landscape = 2800px physical / ~1440 logical. In portrait ~1140 logical. */
@media(min-width:1021px) and (max-width:1600px){
  .hero-wrap{padding-top:clamp(64px,6vw,88px)}
  .hero-facts{gap:clamp(26px,2.6vw,40px)}
  .sec-no{font-size:clamp(48px,4.4vw,60px)}
}
/* Ultra-wide (S8 Ultra landscape 1440+, desktop 1920+, 4K) */
@media(min-width:1601px){
  .wrap,.header-wrap,.hero-wrap,.quote-wrap{max-width:1440px}
  .sec h2{font-size:48px}
  .hero-wrap{padding:104px 48px 88px}
}

/* ── iPhone SE / small phones (≤400px) ── */
@media(max-width:400px){
  section{padding:44px 0}
  .hero-facts{grid-template-columns:1fr 1fr;gap:16px}
  .btn,.btn-quote,.mm-quote{padding:13px 16px;font-size:13px;width:auto;max-width:100%}
  .hero-bg{padding:10px}
  .hbg-panel{padding:10px 12px;gap:10px}
  .hbg-icon{font-size:20px}
  .hbg-title{font-size:12px}
  .hbg-sub{font-size:9.5px}
  .proc-row{padding:24px 0}
}

/* ── Cross-browser: Safari momentum + 100vh fix + smooth scroll ── */
html{-webkit-overflow-scrolling:touch;scroll-behavior:smooth}
@supports (-webkit-touch-callout:none){ /* Safari only */
  .hero{min-height:-webkit-fill-available}
  .mobile-menu{height:-webkit-fill-available}
  video{-webkit-transform:translateZ(0)} /* forces Safari video compositing */
}
/* Firefox video smoothing */
@-moz-document url-prefix(){video{-moz-transform:translateZ(0)}}
/* Universal media elements */
img,video{max-width:100%;height:auto}
/* Table overflow safety on small screens */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
/* Header wrap fits everything on any width */
.header-wrap{padding:10px clamp(12px,3vw,24px);gap:clamp(10px,2vw,18px)}
/* Logo scales fluidly on all screens (bigger on desktop, safe on mobile) */
.logo-img{height:clamp(38px,4.2vw,64px) !important;max-width:min(40vw,320px)}
@media(max-width:1020px){.logo-img{height:clamp(42px,7vw,56px) !important;max-width:64vw}}
/* Sticky header safe-area (iPhone notch) */
header{padding-top:env(safe-area-inset-top)}
body{padding-bottom:env(safe-area-inset-bottom)}

/* ── Hero panel layering fix for tablet portrait (Galaxy S8 Ultra portrait ~1140px) ── */
@media(min-width:901px) and (max-width:1600px){
  .hero-bg{opacity:.34}
  .hero-bg img{opacity:.20}
  .hero-bg video{opacity:.30}
  .hero-bg::after{background:linear-gradient(100deg,rgba(9,20,32,.97) 34%,rgba(9,20,32,.72) 72%,rgba(9,20,32,.88))}
}
@media(max-width:900px){
  .hero-bg{opacity:.55}
  .hero-wrap{position:relative}
}

/* ── Tablet portrait refinement (S8 Ultra / iPad Pro portrait ~901-1200px) ── */
@media(min-width:901px) and (max-width:1200px){
  /* hamburger takes over on portrait tablets too */
  header nav{display:none}
  .nav-burger{display:flex}
  /* drop the 4 hero equipment panels — video+gradient carry the hero here */
  .hero-bg .hbg-panel{display:none}
  .hero-bg{opacity:.5}
  .hero-bg::after{background:linear-gradient(100deg,rgba(9,20,32,.97) 30%,rgba(9,20,32,.78) 70%,rgba(9,20,32,.9))}
  /* partner panel + hero content get clean separation */
  .hero-wrap{gap:36px}
}

/* ── HEADER LOGO 3X (2026-09-09, Nisso) ── */
.logo-img{height:clamp(56px,6vw,96px) !important;max-width:min(44vw,540px)}
@media(min-width:1021px){.logo-img{height:clamp(96px,9.5vw,150px) !important;max-width:540px}}
@media(max-width:1020px){.logo-img{height:clamp(48px,7.5vw,72px) !important;max-width:70vw}}
@media(max-width:640px){.logo-img{height:clamp(42px,9vw,60px) !important;max-width:74vw}}
/* header grows gracefully to hold the bigger logo */
.header-wrap{min-height:0}
@media(min-width:1021px){.header-wrap{padding-top:16px;padding-bottom:16px}}

/* ═══ SECTION-BY-SECTION FIX (2026-09-09): overlap removal + CCTV lens identity ═══ */

/* 1. HERO: kill ghosting equipment panels entirely — they layer under text on all screens.
      Video + image + gradient carry the hero. No more elements on top of each other. */
.hero-bg .hbg-panel{display:none !important}
.hero-bg{opacity:.6}
.hero-bg img{opacity:.22}
.hero-bg video{opacity:.34}
.hero-bg::after{background:linear-gradient(100deg,rgba(9,20,32,.97) 30%,rgba(9,20,32,.72) 70%,rgba(9,20,32,.9))}

/* 2. CCTV LENS MOTIF — aperture-style ring decoration for section headers */
.sec-head-rule{position:relative}
.sec-head-rule::after{content:"";position:absolute;right:0;top:50%;transform:translateY(-50%);
  width:34px;height:34px;border-radius:50%;
  border:2px solid var(--red);
  background:
    radial-gradient(circle at center, var(--red) 0 4px, transparent 4px),
    conic-gradient(var(--red) 0 12deg, transparent 12deg 90deg, var(--red) 90deg 102deg, transparent 102deg 180deg, var(--red) 180deg 192deg, transparent 192deg 270deg, var(--red) 270deg 282deg, transparent 282deg);
  opacity:.85;
  -webkit-mask:radial-gradient(circle, transparent 0 5px, #000 5px);
  mask:radial-gradient(circle, transparent 0 5px, #000 5px);
}

/* 3. Big CCTV lens divider between major sections (like the logo divider but camera-lens) */
.cctv-divider{position:relative;display:flex;align-items:center;justify-content:center;padding:44px 0;overflow:hidden}
.cctv-divider .lens{position:relative;width:clamp(90px,10vw,150px);height:clamp(90px,10vw,150px);border-radius:50%;
  border:3px solid var(--red);display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 8px rgba(175,19,20,.08),0 0 40px rgba(175,19,20,.15)}
.cctv-divider .lens::before{content:"";position:absolute;inset:12px;border-radius:50%;
  background:radial-gradient(circle at 38% 32%, #16305e 0%, #071638 55%, #030b1c 100%);
  border:2px solid rgba(255,255,255,.12)}
.cctv-divider .lens::after{content:"";position:absolute;width:22%;height:22%;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, rgba(120,180,255,.9), rgba(30,80,160,.4) 60%, transparent 70%);
  filter:blur(1px)}
.cctv-divider .lens span{position:relative;z-index:2;width:12%;height:12%;border-radius:50%;background:#fff;opacity:.9;box-shadow:0 0 12px 2px rgba(255,255,255,.6)}
.cctv-divider .lbl{margin-left:clamp(14px,2vw,22px);font-family:var(--t-mono);font-size:clamp(9px,1vw,11px);letter-spacing:.32em;text-transform:uppercase;color:var(--steel)}
@media(max-width:640px){.cctv-divider .lbl{display:none}}

/* ── Partner panel: brand-name + description spacing fix (TENAX collision) ── */
.partners ul li,.mp-list li{display:flex;gap:12px;align-items:baseline}
.partners .bn,.mp-list .bn{flex-shrink:0;min-width:9.5ch}
.partners .bt,.mp-list .bt{flex:1;min-width:0}
@media(max-width:640px){.partners .bn,.mp-list .bn{min-width:8ch}}

/* ── Partner panel brand-list flex spacing (TENAX collision fix) ── */
.brand-list li{display:-webkit-flex;display:flex;gap:12px;-webkit-align-items:baseline;align-items:baseline}
.brand-list .bn{-webkit-flex-shrink:0;flex-shrink:0;min-width:9.5ch}
.brand-list .bt{-webkit-flex:1;flex:1;min-width:0}
@media(max-width:640px){.brand-list .bn{min-width:8ch}}

/* ═══════════════════════════════════════════════════════════
   COLOR DIVIDE SYSTEM (2026-09-09 — MANDATORY BUSINESS RULE)
   SALES division (Zach)  = BLUE  #0f3fa8 / tint #eaf0fc
   REPAIRS division (Brady) = RED #af1314 / tint #fdeaea
   Every box/card/CTA speaking about a division carries its color.
   ═══════════════════════════════════════════════════════════ */
:root{
  --sales:#0f3fa8; --sales-dark:#0a2b73; --sales-tint:#eaf0fc;
  --repair:#af1314; --repair-dark:#7d0d0e; --repair-tint:#fdeaea;
}

/* ── Division cards (Two Divisions section) ── */
.div-sales{border-top:4px solid var(--sales)!important;background:linear-gradient(180deg,var(--sales-tint),transparent 60%)!important}
.div-repair{border-top:4px solid var(--repair)!important;background:linear-gradient(180deg,var(--repair-tint),transparent 60%)!important}
.div-sales h3,.div-sales .dc-title{color:var(--sales)!important}
.div-repair h3,.div-repair .dc-title{color:var(--repair)!important}
.div-sales .btn,.div-sales a.btn{background:var(--sales)!important;color:#fff!important}
.div-repair .btn,.div-repair a.btn{background:var(--repair)!important;color:#fff!important}

/* ── Hero CTAs: Shop New Equipment = BLUE, Repair & Parts Center = RED ── */
.hero .btn-red{background:var(--sales)!important;background:linear-gradient(135deg,#0f3fa8,#0a2b73)!important}
.hero .btn-line{color:#cfe0ff!important;border-color:rgba(120,160,255,.5)!important}
.hero .btn-line:hover{border-color:#7ea6ff!important;background:rgba(20,60,150,.25)!important}

/* ── Phone cards in hero + nav: label chip colored per division ── */
.hp-label,.np-label{position:relative}
.hpc-sales .np-num,.hpc-sales .hp-num{color:var(--sales)!important}
.hpc-repair .np-num,.hpc-repair .hp-num{color:var(--repair)!important}
.hpc-sales{border-left:3px solid var(--sales)!important;padding-left:8px}
.hpc-repair{border-left:3px solid var(--repair)!important;padding-left:8px}

/* ── Any generic division badge/chip ── */
.chip-sales{background:var(--sales)!important;color:#fff!important}
.chip-repair{background:var(--repair)!important;color:#fff!important}

/* ── Section number accents: sales-related sections blue stroke, repair sections red ── */
.sec-no.div-sales-no{-webkit-text-stroke-color:var(--sales)}
.sec-no.div-repair-no{-webkit-text-stroke-color:var(--repair)}

/* ── Division tag chips (Division 01/02 labels) ── */
.tag-sales{background:var(--sales)!important;color:#fff!important}
.tag-repair{background:var(--repair)!important;color:#fff!important}
.spec-cell.div-sales{border:1px solid rgba(15,63,168,.35)!important;border-top:4px solid var(--sales)!important}
.spec-cell.div-repair{border:1px solid rgba(175,19,20,.35)!important;border-top:4px solid var(--repair)!important}
.spec-cell.div-sales h3{color:var(--sales)!important}
.spec-cell.div-repair h3{color:var(--repair)!important}
.spec-cell.div-sales > a{color:var(--sales)!important;border-bottom:2px solid var(--sales)}
.spec-cell.div-repair > a{color:var(--repair)!important;border-bottom:2px solid var(--repair)}

/* ── Nav phone chips: sales=blue, repair=red outline ── */
nav .nav-phone.nav-sales{border:1px solid rgba(15,63,168,.4)}
nav .nav-phone.nav-sales .np-num{color:var(--sales)}
nav .nav-phone.nav-repair{border:1px solid rgba(175,19,20,.4)}
nav .nav-phone.nav-repair .np-num{color:var(--repair)}

/* ── Hero phone cards outlines ── */
.hp-item.hpc-sales{outline:2px solid rgba(15,63,168,.35);outline-offset:-2px}
.hp-item.hpc-repair{outline:2px solid rgba(175,19,20,.35);outline-offset:-2px}

/* ── Deep detail: any li/span mentioning division inherits its accent via utility classes ── */
.cd-sales{color:var(--sales)}
.cd-repair{color:var(--repair)}
.cd-sales-border{border-color:var(--sales)!important}
.cd-repair-border{border-color:var(--repair)!important}


/* ── Meet-the-team profile links (Zach=blue, Brady=red) ─────── */
.spec-cell a.team-link{display:inline-block;margin-top:14px;font-family:var(--t-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;padding:8px 14px;border-radius:3px;color:#fff!important;border:none}
.div-sales a.team-link{background:var(--sales)}
.div-sales a.team-link:hover{background:#0a2f7d}
.div-repair a.team-link{background:var(--repair)}
.div-repair a.team-link:hover{background:#8f0e10}