/* ============================================================
   LP TUBE - shared stylesheet
   Edit colors / fonts here once; applies to every page.
   ============================================================ */
:root{
  --blue:#0a3d91;
  --blue-deep:#072c69;
  --blue-2:#1453c4;
  --steel:#2b8fe6;
  --steel-light:#e8f1fc;
  --ink:#0e1726;
  --slate:#475067;
  --grey:#f3f5f9;
  --grey-2:#e7ebf2;
  --line:#dde3ec;
  --white:#ffffff;
  --shadow:0 18px 45px -22px rgba(10,61,145,.45);
  --shadow-sm:0 8px 24px -14px rgba(10,61,145,.4);
  --r:16px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Spline Sans',sans-serif;color:var(--ink);background:var(--white);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4,h5,.display{font-family:'Archivo',sans-serif;line-height:1.08;letter-spacing:-.02em}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-family:'Spline Sans';border:none;cursor:pointer;border-radius:10px;transition:.22s;font-size:15px}
.btn-primary{background:var(--blue);color:#fff;padding:12px 22px;box-shadow:var(--shadow-sm)}
.btn-primary:hover{background:var(--blue-2);transform:translateY(-2px);box-shadow:var(--shadow)}
.btn-steel{background:var(--steel);color:#fff;padding:12px 22px}
.btn-steel:hover{background:#1c7fd6;transform:translateY(-2px)}
.btn-ghost{background:#fff;color:var(--blue);padding:12px 22px;border:1.6px solid var(--line)}
.btn-ghost:hover{border-color:var(--steel);color:var(--steel)}
.btn-lg{padding:15px 30px;font-size:16px}

/* ---------- top contact bar ---------- */
.topbar{background:var(--blue-deep);color:#cfe0fb;font-size:13.5px}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:42px;flex-wrap:wrap;padding:6px 24px}
.topbar a{color:#fff;font-weight:600;transition:color .2s}
.topbar a:hover{color:var(--steel)}
.topbar .tb-left{display:flex;gap:22px;flex-wrap:wrap;align-items:center}
.topbar .tb-tag{color:#8fb6f0}
.topbar .tb-right{display:flex;gap:18px;align-items:center}
.tb-ico{display:inline-flex;align-items:center;gap:7px}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;min-height:108px;gap:20px}
.brand{display:flex;align-items:center;gap:14px}
.logo-mark{width:50px;height:50px;border-radius:13px;background:linear-gradient(140deg,var(--blue),var(--steel));display:grid;place-items:center;box-shadow:var(--shadow-sm);position:relative;overflow:hidden;flex:none}
.logo-mark::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(115deg,rgba(255,255,255,.16) 0 3px,transparent 3px 8px)}
.logo-mark span{font-family:'Archivo';font-weight:900;color:#fff;font-size:22px;z-index:1}
.brand-logo{height:58px;width:auto;border-radius:10px;display:block;flex:none}
/* Nav brand: logo image only (no wordmark text). To resize the logo, change
   the height on .brand-logo-only .brand-logo and the .nav .wrap min-height
   below it by roughly the same amount. */
.brand-logo-only .brand-logo{height:88px;border-radius:6px}
.brand-logo-only{gap:0}
.brand-txt b{font-family:'Archivo';font-weight:800;font-size:22px;letter-spacing:-.02em;display:block;line-height:1}
.brand-txt small{font-size:12.5px;color:var(--slate);letter-spacing:.04em;text-transform:uppercase;font-weight:600}
.navlinks{display:flex;gap:6px;align-items:center}
.navlinks a{padding:9px 15px;border-radius:9px;font-weight:600;font-size:15px;color:var(--slate);transition:.2s}
.navlinks a:hover{color:var(--blue);background:var(--steel-light)}
.navlinks a.on{color:var(--blue)}
/* .navlinks a sets a slate colour that outranks .btn-primary, which turned the
   Get a Quote button grey on dark blue. Restore white for the button states. */
.navlinks a.btn-primary,
.navlinks a.btn-primary:hover,
.navlinks a.btn-primary.on{color:#fff}
.navlinks a.btn-primary:hover{background:var(--blue-2)}
.menu-toggle{display:none;background:none;border:none;cursor:pointer;flex-direction:column;gap:5px}
.menu-toggle span{width:24px;height:2.5px;background:var(--ink);border-radius:2px;transition:.2s}

/* ---------- hero ---------- */
.hero{position:relative;background:radial-gradient(900px 500px at 88% -8%,rgba(43,143,230,.16),transparent 60%),radial-gradient(700px 600px at -5% 110%,rgba(10,61,145,.10),transparent 55%),var(--white);padding:78px 0 70px;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:46px 46px;opacity:.35;-webkit-mask-image:radial-gradient(circle at 70% 30%,#000,transparent 70%);mask-image:radial-gradient(circle at 70% 30%,#000,transparent 70%)}
.hero-grid{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}
.eyebrow{display:inline-flex;align-items:center;gap:9px;background:var(--steel-light);color:var(--blue);font-weight:700;font-size:13px;letter-spacing:.05em;text-transform:uppercase;padding:8px 15px;border-radius:100px;border:1px solid #cfe0fb}
.dot{width:8px;height:8px;border-radius:50%;background:var(--steel);box-shadow:0 0 0 4px rgba(43,143,230,.2)}
.hero h1{font-size:clamp(36px,5.2vw,60px);font-weight:900;margin:22px 0 18px;color:var(--ink)}
.hero h1 .accent{color:var(--blue);position:relative;white-space:nowrap}
.hero h1 .accent::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:11px;background:rgba(43,143,230,.22);z-index:-1;border-radius:3px}
.hero p.lead{font-size:18.5px;color:var(--slate);max-width:560px;margin-bottom:30px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:26px}
.trust{display:flex;gap:24px;flex-wrap:wrap;color:var(--slate);font-size:14px;font-weight:600}
.trust span{display:inline-flex;align-items:center;gap:8px}
.check{color:var(--steel)}

/* ============ VIDEO HERO (ambient background) ============ */
.hero-video{position:relative;min-height:640px;display:flex;align-items:center;overflow:hidden;background:var(--blue-deep);padding:96px 0 88px}
.hero-video .hero-media{position:absolute;inset:0;z-index:0;overflow:hidden;background:#0a1a30}
/* the video / poster fill the whole hero, cropped to cover */
.hero-video .hero-media video,
.hero-video .hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block}
/* dark + brand-blue gradient so white text stays readable over motion */
.hero-video .hero-scrim{position:absolute;inset:0;z-index:1;background:
  linear-gradient(90deg,rgba(7,44,105,.82) 0%,rgba(7,44,105,.55) 45%,rgba(7,44,105,.25) 100%),
  linear-gradient(180deg,rgba(7,20,45,.35) 0%,transparent 30%,rgba(7,20,45,.55) 100%)}
/* subtle grid texture on top, very faint */
.hero-video .hero-inner{position:relative;z-index:2;width:100%;max-width:1200px;margin:0 auto;padding:0 24px}
.hero-video .hero-copy{max-width:680px}
.hero-video .eyebrow{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.25);backdrop-filter:blur(4px)}
.hero-video .dot{background:var(--steel);box-shadow:0 0 0 4px rgba(43,143,230,.35)}
.hero-video h1{color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.35)}
.hero-video h1 .accent{color:#8fc2f5}
.hero-video h1 .accent::after{background:rgba(143,194,245,.28)}
.hero-video p.lead{color:#dbe7f7;max-width:600px;text-shadow:0 1px 12px rgba(0,0,0,.3)}
/* Hero copy breathing room. Scoped to .hero-video only, so no other
   section or page spacing is affected.
   Values are the midpoint between the original spacing and the wider
   version, e.g. h1 top margin 22px original -> 32px wide -> 27px here. */
.hero-video .eyebrow{margin-bottom:3px}
.hero-video h1{margin:27px 0 22px;line-height:1.10}
.hero-video p.lead{line-height:1.66;margin-bottom:35px}
.hero-video .hero-cta{margin-bottom:32px}
.hero-video .trust{gap:26px;row-gap:18px}
.hero-video .trust{color:#cddcf2}
.hero-video .trust .check{color:#8fc2f5}
.hero-video .btn-ghost{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.4);backdrop-filter:blur(4px)}
.hero-video .btn-ghost:hover{background:rgba(255,255,255,.16);border-color:#fff;color:#fff}
/* NOTE: the hero video is a silent, non-flashing 7s ambient loop, so it is
   intentionally NOT hidden under prefers-reduced-motion. */
@media(max-width:680px){
  .hero-video{min-height:520px;padding:64px 0 60px}
  /* Video plays on phones too. The MP4 is 3.8MB (down from 28MB), which is a
     reasonable mobile payload. The poster still shows first while it buffers,
     and browsers with Data Saver on will fall back to the poster on their own. */
}

/* "Why buyers choose" as its own band under the video hero */
.whyband{background:var(--grey);border-bottom:1px solid var(--line)}
.whyband .wrap{padding:56px 24px}
.whyband .why-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:28px}
.whyband h2{font-size:clamp(22px,2.6vw,30px);font-weight:800}
.whyband .why-head p{color:var(--slate);font-size:15px;max-width:420px}
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.why-item{background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px 22px;transition:.25s}
.why-item:hover{transform:translateY(-4px);box-shadow:var(--shadow-sm);border-color:#c7d6ee}
.why-item .spec-ic{margin-bottom:14px}
.why-item b{display:block;font-family:'Archivo';font-size:16px;margin-bottom:5px}
.why-item small{color:var(--slate);font-size:13.5px;line-height:1.5;display:block}
@media(max-width:900px){.why-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.why-grid{grid-template-columns:1fr}}
.spec-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px;box-shadow:var(--shadow);position:relative}
.spec-card::before{content:"";position:absolute;top:0;left:26px;right:26px;height:4px;background:linear-gradient(90deg,var(--blue),var(--steel));border-radius:0 0 4px 4px}
.spec-card h3{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--blue);margin-bottom:18px;font-family:'Spline Sans';font-weight:700}
.spec-row{display:flex;align-items:flex-start;gap:13px;padding:13px 0;border-bottom:1px dashed var(--grey-2)}
.spec-row:last-child{border-bottom:none}
.spec-ic{flex:none;width:38px;height:38px;border-radius:10px;background:var(--steel-light);display:grid;place-items:center;color:var(--blue)}
.spec-row b{display:block;font-family:'Archivo';font-size:15.5px}
.spec-row small{color:var(--slate);font-size:13.5px}

/* ---------- entrance anim ---------- */
.anim{opacity:0;transform:translateY(22px);animation:rise .7s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes rise{to{opacity:1;transform:none}}
.d1{animation-delay:.05s}.d2{animation-delay:.16s}.d3{animation-delay:.27s}.d4{animation-delay:.38s}.d5{animation-delay:.5s}.d6{animation-delay:.6s}

/* ---------- marquee ---------- */
.marquee{background:var(--blue);color:#fff;overflow:hidden;border-top:1px solid rgba(255,255,255,.1)}
.marquee-track{display:flex;white-space:nowrap;animation:scroll 26s linear infinite;padding:16px 0}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track span{font-family:'Archivo';font-weight:700;font-size:17px;letter-spacing:.03em;padding:0 34px;display:inline-flex;align-items:center;gap:34px;text-transform:uppercase}
.marquee-track span::before{content:"";width:7px;height:7px;background:var(--steel);transform:rotate(45deg);display:inline-block}
@keyframes scroll{to{transform:translateX(-50%)}}

/* ---------- sections ---------- */
.section{padding:84px 0}
.section.grey{background:var(--grey)}
.sec-head{max-width:680px;margin-bottom:46px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.kicker{color:var(--steel);font-weight:700;font-size:13.5px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:12px}
.sec-head h2{font-size:clamp(28px,3.6vw,42px);font-weight:800;margin-bottom:14px}
.sec-head p{color:var(--slate);font-size:17px}
.reveal{opacity:1;transform:none}
.js-anim .reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.js-anim .reveal.show{opacity:1;transform:none}

/* ---------- product cards ---------- */
.prod-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
/* additional-services grid: 3 across on desktop, stacks on mobile */
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:start}
/* market segments grid */
.seg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.seg-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:28px 26px;transition:.25s}
.seg-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#c7d6ee}
.seg-ic{width:50px;height:50px;border-radius:12px;background:var(--steel-light);display:grid;place-items:center;color:var(--blue);margin-bottom:16px}
.seg-card h3{font-size:19px;font-weight:800;margin-bottom:14px}
.seg-card ul{list-style:none;margin:0}
.seg-card li{color:var(--slate);font-size:14.5px;padding:6px 0 6px 20px;position:relative;border-bottom:1px dashed var(--grey-2)}
.seg-card li:last-child{border-bottom:none}
.seg-card li::before{content:"";position:absolute;left:0;top:13px;width:7px;height:7px;background:var(--steel);transform:rotate(45deg)}
.pcard{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:.28s;display:flex;flex-direction:column}
.pcard:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:#c7d6ee}
.pcard-top{height:128px;background:linear-gradient(135deg,var(--blue),var(--blue-2));position:relative;overflow:hidden;display:grid;place-items:center}
.pcard:nth-child(2) .pcard-top{background:linear-gradient(135deg,var(--blue-2),var(--steel))}
.pcard:nth-child(3) .pcard-top{background:linear-gradient(135deg,#0a3d91,#3a6fc4)}
.pcard:nth-child(4) .pcard-top{background:linear-gradient(135deg,#114a9e,#2b8fe6)}
.pcard-top::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(125deg,rgba(255,255,255,.10) 0 2px,transparent 2px 14px)}
.pcard-num{font-family:'Archivo';font-weight:900;font-size:54px;color:rgba(255,255,255,.22);position:absolute;right:14px;bottom:-6px;line-height:1;z-index:2}
.pcard-top img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:.85}
.pcard-top.has-photo::after{background:linear-gradient(180deg,rgba(7,44,105,.15),rgba(7,44,105,.55))}
.pcard-ic{width:50px;height:50px;color:#fff;z-index:1;opacity:.95}
.pcard-body{padding:22px 22px 24px;flex:1;display:flex;flex-direction:column}
.pcard-body h3{font-size:19px;font-weight:800;margin-bottom:8px}
.pcard-body p{color:var(--slate);font-size:14.5px;flex:1;margin-bottom:16px}
.pcard-link{color:var(--blue);font-weight:700;font-size:14.5px;display:inline-flex;align-items:center;gap:6px;transition:gap .2s}
.pcard:hover .pcard-link{gap:11px}

/* ---------- industries grid ---------- */
.ind-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.icard{background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px 20px;transition:.25s;display:block}
.icard:hover{background:var(--blue);border-color:var(--blue);transform:translateY(-4px);box-shadow:var(--shadow)}
.icard:hover h4,.icard:hover p,.icard:hover .icard-ic{color:#fff}
.icard:hover .icard-ic{background:rgba(255,255,255,.16)}
.icard-ic{width:46px;height:46px;border-radius:11px;background:var(--steel-light);display:grid;place-items:center;color:var(--blue);margin-bottom:16px;transition:.25s}
.icard h4{font-size:16.5px;font-weight:700;transition:.25s;margin-bottom:6px}
.icard p{font-size:13.5px;color:var(--slate);transition:.25s}

/* ---------- stats ---------- */
.stats{background:linear-gradient(135deg,var(--blue-deep),var(--blue));color:#fff;position:relative;overflow:hidden}
.stats::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:50px 50px}
.stats .wrap{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:30px;padding:60px 24px}
.stat{text-align:center}
.stat b{font-family:'Archivo';font-weight:900;font-size:clamp(34px,4.4vw,52px);display:block;line-height:1;background:linear-gradient(120deg,#fff,#9fc6f5);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.stat span{color:#bcd4f7;font-weight:600;font-size:15px;margin-top:8px;display:block}

/* ---------- cta band ---------- */
.cta-band{background:var(--steel-light);position:relative;overflow:hidden}
.cta-band .wrap{padding:66px 24px;display:flex;align-items:center;justify-content:space-between;gap:34px;flex-wrap:wrap;position:relative;z-index:1}
.cta-band::before{content:"";position:absolute;top:-40%;right:-6%;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(43,143,230,.16),transparent 70%)}
.cta-band h2{font-size:clamp(26px,3.4vw,38px);font-weight:800;max-width:640px;color:var(--ink)}
.cta-band p{color:var(--slate);font-size:16.5px;margin-top:10px}
.cta-actions{display:flex;gap:14px;flex-wrap:wrap}

/* ---------- footer ---------- */
footer{background:var(--ink);color:#aab4c6;padding-top:64px}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.4fr;gap:40px;padding-bottom:48px}
.foot-brand .logo-mark,.foot-brand .brand-logo{margin-bottom:18px}
/* Footer sits on dark navy and the logo artwork has a white background,
   so it is presented as a padded white chip rather than a hard-edged block. */
.foot-brand .brand-logo{height:64px;background:#fff;padding:9px 12px;border-radius:10px;box-sizing:content-box}
.foot-brand .brand-logo{height:54px}
.foot-brand p{font-size:14.5px;max-width:300px;color:#8b96a9}
.foot-linkedin{display:inline-flex;align-items:center;gap:10px;margin-top:18px;color:#aab4c6;font-weight:600;font-size:14px;transition:.2s}
.foot-linkedin:hover{color:var(--steel)}
.foot-linkedin svg{color:#fff;transition:.2s}
.foot-linkedin:hover svg{color:var(--steel)}
.foot-col h5{color:#fff;font-family:'Archivo';font-weight:700;font-size:15px;letter-spacing:.04em;margin-bottom:18px;text-transform:uppercase}
.foot-col a{display:block;color:#aab4c6;font-size:14.5px;padding:6px 0;transition:.2s}
.foot-col a:hover{color:var(--steel)}
.foot-contact div{display:flex;gap:12px;align-items:flex-start;padding:9px 0;font-size:14.5px}
.foot-contact .fc-ic{flex:none;color:var(--steel);margin-top:2px}
.foot-contact a{color:#fff;font-weight:600}
.foot-contact a:hover{color:var(--steel)}
.foot-bottom{border-top:1px solid rgba(255,255,255,.1);padding:22px 0;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:#7a8598}
.concept-note{background:rgba(43,143,230,.15);border:1px solid rgba(43,143,230,.35);color:#9fc6f5;padding:5px 13px;border-radius:100px;font-weight:700;font-size:11.5px;letter-spacing:.08em}

/* ---------- interior page header ---------- */
.breadcrumb{background:var(--grey);border-bottom:1px solid var(--line)}
.breadcrumb .wrap{padding:16px 24px;font-size:14px;color:var(--slate);display:flex;gap:9px;align-items:center}
.breadcrumb a{color:var(--blue);font-weight:600}
.breadcrumb a:hover{color:var(--steel)}
.breadcrumb .sep{color:#aeb8c9}
.page-title{padding:60px 0 50px;background:radial-gradient(700px 360px at 85% -20%,rgba(43,143,230,.13),transparent 60%),var(--white)}
.page-title h1{font-size:clamp(34px,4.6vw,54px);font-weight:900;margin:14px 0}
.page-title p{color:var(--slate);font-size:18px;max-width:660px}

/* ---------- alternating product rows ---------- */
.prow{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center;padding:64px 0;border-bottom:1px solid var(--line)}
.prow:nth-child(even) .prow-text{order:2}
.prow-text .pnum{font-family:'Archivo';font-weight:900;font-size:15px;color:var(--steel);letter-spacing:.1em}
.prow-text h2{font-size:clamp(26px,3vw,36px);font-weight:800;margin:10px 0 16px}
.prow-text p{color:var(--slate);font-size:16px;margin-bottom:18px}
.tags{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:26px}
.tag{background:var(--steel-light);color:var(--blue);font-weight:600;font-size:13px;padding:7px 14px;border-radius:100px;border:1px solid #cfe0fb}
.pvisual{aspect-ratio:4/3;border-radius:var(--r);background:linear-gradient(135deg,var(--blue),var(--blue-2));position:relative;overflow:hidden;display:grid;place-items:center;box-shadow:var(--shadow)}
.prow:nth-child(2) .pvisual{background:linear-gradient(135deg,var(--blue-2),var(--steel))}
.prow:nth-child(3) .pvisual{background:linear-gradient(135deg,#0a3d91,#3a6fc4)}
.prow:nth-child(4) .pvisual{background:linear-gradient(135deg,#114a9e,#2b8fe6)}
.pvisual::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(125deg,rgba(255,255,255,.09) 0 2px,transparent 2px 16px)}
.pvisual-inner{text-align:center;color:#fff;z-index:1;padding:24px}
.pvisual-inner svg{opacity:.9;margin:0 auto 14px}
.ph-badge{position:absolute;top:16px;left:16px;background:rgba(0,0,0,.32);color:#fff;font-size:11px;font-weight:700;letter-spacing:.06em;padding:6px 12px;border-radius:100px;z-index:2;backdrop-filter:blur(4px)}
/* real-photo product visual: image fills the 4:3 box */
.pvisual.has-photo{background:#0e1726}
.pvisual.has-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.pvisual.has-photo::after{content:none}

/* ---------- spec table ---------- */
.spec-table{width:100%;border-collapse:collapse;margin:8px 0 28px;font-size:14.5px}
.spec-table th,.spec-table td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--line)}
.spec-table th{background:var(--grey);font-family:'Archivo';font-weight:700;color:var(--ink);font-size:13px;letter-spacing:.03em;text-transform:uppercase}
.spec-table tr:hover td{background:var(--steel-light)}

/* ---------- content prose ---------- */
.prose{max-width:780px}
.prose p{color:var(--slate);font-size:17px;margin-bottom:20px}
.prose h2{font-size:clamp(24px,3vw,34px);font-weight:800;margin:38px 0 16px}
.prose ul{margin:0 0 22px 20px;color:var(--slate);font-size:16.5px}
.prose li{margin-bottom:8px}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.field{margin-bottom:18px}
.field label{display:block;font-weight:600;font-size:14px;margin-bottom:7px;color:var(--ink)}
.field input,.field textarea,.field select{width:100%;padding:13px 15px;border:1.5px solid var(--line);border-radius:10px;font-family:'Spline Sans';font-size:15px;transition:.2s;background:#fff}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--steel);box-shadow:0 0 0 4px rgba(43,143,230,.12)}
.field textarea{resize:vertical;min-height:120px}
.contact-info-card{background:var(--grey);border:1px solid var(--line);border-radius:var(--r);padding:32px}
.cinfo{display:flex;gap:14px;align-items:flex-start;padding:14px 0;border-bottom:1px dashed var(--grey-2)}
.cinfo:last-child{border-bottom:none}
.cinfo .ci-ic{flex:none;width:42px;height:42px;border-radius:11px;background:var(--steel-light);display:grid;place-items:center;color:var(--blue)}
.cinfo b{display:block;font-family:'Archivo';font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--slate);margin-bottom:3px}
.cinfo a,.cinfo span{font-size:16px;color:var(--ink);font-weight:600}
.cinfo a:hover{color:var(--steel)}
.contact-map-btn{display:inline-flex;align-items:center;gap:8px;margin-top:10px;color:var(--blue);font-weight:700;font-size:14px;transition:.2s}
.contact-map-btn:hover{color:var(--steel);gap:11px}
/* team directory */
.team-dept{margin-bottom:14px}
.team-dept-head{display:flex;align-items:center;gap:12px;margin:0 0 18px}
.team-dept-head h3{font-size:20px;font-weight:800}
.team-dept-head .dept-line{flex:1;height:1px;background:var(--line)}
.team-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-bottom:38px}
.person{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px 22px;transition:.25s;display:flex;gap:16px;align-items:flex-start}
.person:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm);border-color:#c7d6ee}
.person-avatar{flex:none;width:52px;height:52px;border-radius:50%;background:linear-gradient(140deg,var(--blue),var(--steel));display:grid;place-items:center;color:#fff;font-family:'Archivo';font-weight:800;font-size:18px;letter-spacing:.02em}
.person-name{font-family:'Archivo';font-weight:800;font-size:17px;line-height:1.2}
.person-role{color:var(--steel);font-weight:600;font-size:13.5px;margin:3px 0 9px}
.person-contact a{display:flex;align-items:center;gap:7px;color:var(--slate);font-size:14px;font-weight:500;padding:2px 0;transition:.2s}
.person-contact a:hover{color:var(--blue)}
.person-contact svg{flex:none;color:var(--steel)}

/* ---------- responsive ---------- */
@media(max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:36px}
  .prod-grid{grid-template-columns:repeat(2,1fr)}
  .services-grid{grid-template-columns:repeat(2,1fr)}
  .seg-grid{grid-template-columns:repeat(2,1fr)}
  .ind-grid{grid-template-columns:repeat(2,1fr)}
  .stats .wrap{grid-template-columns:repeat(2,1fr);gap:36px}
  .foot-grid{grid-template-columns:1fr 1fr;gap:32px}
  .prow,.prow:nth-child(even) .prow-text{grid-template-columns:1fr;order:0;gap:30px}
  .prow:nth-child(even) .prow-visual{order:-1}
  .contact-grid{grid-template-columns:1fr;gap:32px}
  .team-grid{grid-template-columns:1fr}
}
/* nav collapses to hamburger earlier (6 items need more room) */
@media(max-width:900px){
  .navlinks{position:fixed;inset:116px 0 auto 0;background:#fff;flex-direction:column;align-items:stretch;padding:14px;border-bottom:1px solid var(--line);box-shadow:var(--shadow);display:none}
  .navlinks.open{display:flex}
  .navlinks a{padding:13px 15px}
  .navlinks .btn-primary{display:inline-flex;justify-content:center;margin-top:6px}
  .menu-toggle{display:flex}
}
@media(max-width:680px){
  .topbar .tb-right{display:none}
  .prod-grid{grid-template-columns:1fr}
  .services-grid{grid-template-columns:1fr}
  .seg-grid{grid-template-columns:1fr}
  .cta-band .wrap{flex-direction:column;align-items:flex-start}
  .foot-grid{grid-template-columns:1fr}
  .section{padding:60px 0}
}

/* ---------- coating comparison (products.html #why-pregalvanized) ---------- */
.cmp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
.cmp-col{position:relative;background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:28px 26px 30px;display:flex;flex-direction:column}
.cmp-col.best{background:linear-gradient(160deg,var(--blue),var(--blue-2));border-color:var(--blue);box-shadow:var(--shadow);color:#fff}
.cmp-badge{position:absolute;top:-13px;left:26px;background:var(--steel);color:#fff;font-family:'Archivo';font-weight:800;font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;padding:7px 14px;border-radius:100px;box-shadow:var(--shadow-sm)}
.cmp-head{padding-bottom:16px;margin-bottom:18px;border-bottom:1px solid var(--line)}
.cmp-col.best .cmp-head{border-bottom-color:rgba(255,255,255,.28)}
.cmp-head h3{font-size:21px;font-weight:800;margin-bottom:7px}
.cmp-sub{display:block;color:var(--slate);font-size:13.5px;line-height:1.45}
.cmp-col.best .cmp-sub{color:#cfe0fb}
.cmp-list{list-style:none;counter-reset:cmp;margin:0;padding:0}
.cmp-list li{counter-increment:cmp;position:relative;padding-left:34px;color:var(--slate);font-size:15px;line-height:1.55;margin-bottom:14px}
.cmp-list li:last-child{margin-bottom:0}
.cmp-list li::before{content:counter(cmp);position:absolute;left:0;top:1px;width:23px;height:23px;border-radius:50%;background:var(--steel-light);color:var(--blue);font-family:'Archivo';font-weight:800;font-size:12px;display:grid;place-items:center}
.cmp-col.best .cmp-list li{color:#e6effb}
.cmp-col.best .cmp-list li::before{background:rgba(255,255,255,.18);color:#fff}
@media(max-width:900px){
  .cmp-grid{grid-template-columns:1fr;gap:26px}
  .cmp-col.best{order:-1}
  .cmp-badge{left:22px}
}


/* ============================================================
   SIZE CHART — styles for content typed in the WordPress editor.
   Everything is targeted by element inside .chart-body, so the
   client can add a heading or a table in WordPress and it picks
   up the site styling automatically with no class to remember.
   ============================================================ */
.chart-body h2{font-size:clamp(22px,2.6vw,30px);font-weight:800;margin:0 0 6px}
.chart-body p.sub{color:var(--steel);font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase;margin:46px 0 4px}
.chart-body > *:first-child{margin-top:0}

/* Gauge / group label — a Heading 3 in the editor */
.chart-body h3{font-family:'Archivo';font-weight:800;font-size:14px;color:var(--blue);background:var(--steel-light);border:1px solid #cfe0fb;padding:7px 14px;border-radius:8px;display:inline-block;margin:22px 0 10px}

/* Tables — any table added in the editor gets this automatically */
.chart-body table{width:100%;border-collapse:collapse;font-size:14.5px;margin-bottom:8px}
.chart-body figure.wp-block-table{margin:0 0 8px;overflow-x:auto}
.chart-body th,.chart-body td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line)}
.chart-body th{background:var(--grey);font-family:'Archivo';font-weight:700;font-size:12px;letter-spacing:.03em;text-transform:uppercase;color:var(--ink)}
.chart-body td{font-variant-numeric:tabular-nums}
.chart-body tr:hover td{background:var(--steel-light)}

.chart-body p.chart-note{color:var(--slate);font-size:13.5px;font-style:italic;margin-top:6px}
.chart-body p.astm-pill{background:var(--blue);color:#fff;font-weight:700;font-size:12.5px;letter-spacing:.03em;padding:8px 16px;border-radius:100px;display:inline-block;margin-top:10px}
.chart-body p.chart-callout{background:var(--grey);border:1px solid var(--line);border-radius:var(--r);padding:26px 28px;margin-top:34px;color:var(--slate);font-size:15.5px}
.chart-body p.chart-callout a{color:var(--blue);font-weight:700}

/* Table of contents pills on the size chart page header */
.chart-toc{display:flex;gap:10px;flex-wrap:wrap;margin:8px 0 4px}
.chart-toc a{background:#fff;border:1.5px solid var(--line);color:var(--blue);font-weight:600;font-size:14px;padding:9px 16px;border-radius:100px;transition:.2s}
.chart-toc a:hover{border-color:var(--steel);color:var(--steel)}

@media(max-width:680px){
  .chart-body table{font-size:13px}
  .chart-body th,.chart-body td{padding:9px 9px}
}

/* ============================================================
   CONTACT FORM (Contact Form 7) — styles the plain CF7 markup
   to match the site. CF7's own HTML uses .row/.col-md-6/.form-group
   (Bootstrap-style classes carried over from the old form), which
   this theme doesn't otherwise load Bootstrap for — so they're
   styled here instead.
   ============================================================ */
.contact-form-wrap{max-width:640px;margin:0 auto;text-align:left}
.contact-form-wrap .row{display:flex;flex-wrap:wrap;gap:0 18px}
.contact-form-wrap .col-md-6{flex:1 1 calc(50% - 9px);min-width:220px}
.contact-form-wrap .col-md-12{flex:1 1 100%}
.contact-form-wrap .form-group{margin-bottom:18px}
.contact-form-wrap label{display:block;font-weight:600;font-size:13.5px;color:var(--ink);margin-bottom:6px}
.contact-form-wrap input[type="text"],
.contact-form-wrap input[type="email"],
.contact-form-wrap input[type="tel"],
.contact-form-wrap input[type="url"],
.contact-form-wrap textarea{
  width:100%;font-family:'Spline Sans',sans-serif;font-size:15px;color:var(--ink);
  padding:13px 14px;border:1.6px solid var(--line);border-radius:10px;background:#fff;
  transition:.2s;
}
.contact-form-wrap input:focus,
.contact-form-wrap textarea:focus{outline:none;border-color:var(--steel);box-shadow:0 0 0 3px var(--steel-light)}
.contact-form-wrap textarea{min-height:130px;resize:vertical}
.contact-form-wrap .text-right{text-align:center}
.contact-form-wrap input[type="submit"],
.contact-form-wrap button[type="submit"],
.contact-form-wrap .wpcf7-submit{
  display:inline-flex;align-items:center;gap:9px;font-weight:700;font-family:'Spline Sans';
  border:none;cursor:pointer;border-radius:10px;transition:.22s;font-size:16px;
  background:var(--blue);color:#fff;padding:14px 34px;box-shadow:var(--shadow-sm);
}
.contact-form-wrap input[type="submit"]:hover,
.contact-form-wrap .wpcf7-submit:hover{background:var(--blue-2);transform:translateY(-2px);box-shadow:var(--shadow)}
.contact-form-wrap .wpcf7-not-valid-tip{color:#c0392b;font-size:12.5px;margin-top:4px;display:block}
.contact-form-wrap .wpcf7-response-output{
  margin-top:18px;padding:13px 16px;border-radius:10px;font-size:14px;font-weight:600;text-align:center;
}
.contact-form-wrap form.sent .wpcf7-response-output{background:#e9f9ee;color:#1e7e34;border:1px solid #b7ebc6}
.contact-form-wrap form.failed .wpcf7-response-output,
.contact-form-wrap form.aborted .wpcf7-response-output{background:#fdecea;color:#c0392b;border:1px solid #f5c2be}
@media(max-width:640px){
  .contact-form-wrap .col-md-6{flex:1 1 100%}
}

/* ============================================================
   CONTACT FORM (Contact Form 7) — matches the row/col-md-6 grid
   markup the form was originally built with.
   ============================================================ */
.contact-form-wrap{text-align:left}
.contact-form-wrap .row{display:flex;flex-wrap:wrap;margin:0 -10px}
.contact-form-wrap .col-md-6{flex:0 0 50%;max-width:50%;padding:0 10px;box-sizing:border-box}
.contact-form-wrap .col-md-12{flex:0 0 100%;max-width:100%;padding:0 10px;box-sizing:border-box}
.contact-form-wrap .form-group{margin-bottom:18px}
.contact-form-wrap .form-group input[type=text],
.contact-form-wrap .form-group input[type=email],
.contact-form-wrap .form-group input[type=tel],
.contact-form-wrap .form-group textarea{
  width:100%;padding:13px 14px;border:1.5px solid var(--line);border-radius:8px;
  font-family:'Spline Sans',sans-serif;font-size:15px;color:var(--ink);background:#fff;
  transition:.2s;
}
.contact-form-wrap .form-group input:focus,
.contact-form-wrap .form-group textarea:focus{outline:none;border-color:var(--steel);box-shadow:0 0 0 3px var(--steel-light)}
.contact-form-wrap .form-group textarea{min-height:140px;resize:vertical}
.contact-form-wrap .text-right{text-align:right}
.contact-form-wrap input[type=submit]{
  background:var(--blue);color:#fff;border:none;padding:13px 28px;border-radius:10px;
  font-weight:700;font-family:'Spline Sans',sans-serif;font-size:15px;cursor:pointer;transition:.2s;
}
.contact-form-wrap input[type=submit]:hover{background:var(--blue-2);transform:translateY(-2px)}
.contact-form-wrap .wpcf7-not-valid-tip{color:#c0392b;font-size:13px;margin-top:4px;display:block}
.contact-form-wrap .wpcf7-response-output{border-radius:8px;padding:12px 16px;margin-top:18px;font-size:14px}
@media(max-width:680px){
  .contact-form-wrap .col-md-6{flex:0 0 100%;max-width:100%}
  .contact-form-wrap .text-right{text-align:center}
}

/* Prose sections that come from the WordPress editor (About page body).
   Targets elements rather than classes so anything the client adds in the
   editor picks up the right styling with no class to remember. */
.prose > *:first-child{margin-top:0}
.prose h2.wp-block-heading{font-size:clamp(22px,2.6vw,30px);font-weight:800;margin:38px 0 14px}
.prose h3.wp-block-heading{font-size:19px;font-weight:700;margin:28px 0 10px}
.prose ul,.prose ol{color:var(--slate);font-size:17px;line-height:1.75;padding-left:22px;margin:0 0 18px}
.prose li{margin-bottom:7px}