@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('/assets/fonts/inter-latin-var.woff2') format('woff2');
}
:root{
    --apex:#63C427; --apex-dark:#4FA21D; --apex-text:#357A12;
    --navy:#000066; --ink:#212E42; --slate:#475569;
    --blue:#00B4EC; --amber:#F6B600;
    --mist:#F1F5F9; --line:#E2E8F0; --white:#FFFFFF;
    --ink-90:rgba(33,46,66,.90); --ink-70:rgba(33,46,66,.70);
    --wpad:clamp(20px,5vw,64px);
    --font-display:'Arial Black','Helvetica Neue',Impact,system-ui,sans-serif;
    --font-body:'Inter','Helvetica Neue',Arial,system-ui,-apple-system,'Segoe UI',sans-serif;
    --maxw:1240px;
    --s-1:52px; --s-2:65px;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{margin:0;}
  /* Anchor the whole page to the light brand world regardless of viewer theme */
  .page{
    background:var(--white); color:var(--ink);
    font-family:var(--font-body); font-size:17px; line-height:1.65;
    -webkit-font-smoothing:antialiased; overflow-x:clip;
  }
  .page a{color:var(--apex-text); text-decoration:none;}
  .page a.btn-primary{color:var(--ink);}
  .page a.btn-ghost{color:var(--ink);}
  .page a.btn-ghost.on-dark{color:var(--white);}
  img{max-width:100%; display:block;}
  .wrap{max-width:var(--maxw); margin:0 auto; padding-left:var(--wpad); padding-right:var(--wpad);}

  /* Type */
  h1,h2,h3,h4{font-family:var(--font-display); margin:0; letter-spacing:.5px; text-wrap:balance; line-height:1.06;}
  h2{font-size:clamp(30px,4.4vw,46px); color:var(--ink);}
  h3{font-size:clamp(20px,2.4vw,26px); color:var(--ink); letter-spacing:.3px;}
  p{margin:0 0 16px;}
  .lead{font-size:clamp(18px,2.1vw,21px); color:var(--slate); line-height:1.6; max-width:60ch;}
  .eyebrow{font-family:var(--font-body); font-weight:800; font-size:12.5px; letter-spacing:2.6px; text-transform:uppercase; color:var(--apex-text); margin:0 0 14px; display:flex; align-items:center; gap:12px;}
  .eyebrow::before{content:""; width:26px; height:4px; background:var(--apex); border-radius:0; flex:none;}
  .eyebrow.on-dark{color:#8fe05a;}
  .rule{width:56px; height:5px; background:var(--apex); border-radius:0; margin:20px 0 26px;}

  /* Buttons */
  .btn{display:inline-flex; align-items:center; gap:9px; font-family:var(--font-body); font-weight:800; font-size:15px; letter-spacing:.3px; padding:15px 26px; border-radius:0; cursor:pointer; border:2px solid transparent; transition:transform .15s ease, background .2s ease, box-shadow .2s ease; line-height:1;}
  .btn-primary{background:var(--apex); color:var(--ink); box-shadow:0 1px 2px rgba(33,46,66,.18);}
  .btn-primary:hover{transform:translateY(-1px); background:#6fd52e; box-shadow:0 3px 8px rgba(33,46,66,.22);}
  .btn-ghost{background:transparent; color:var(--ink); border-color:var(--line);}
  .btn-ghost:hover{border-color:var(--apex); color:var(--ink);}
  .btn-ghost.on-dark{color:var(--white); border-color:rgba(255,255,255,.35);}
  .btn-ghost.on-dark:hover{border-color:var(--apex); color:#9fe86a;}
  .btn-white{background:var(--white); color:var(--ink);}
  .btn-white:hover{transform:translateY(-2px); box-shadow:0 10px 26px rgba(0,0,0,.22);}

  /* Header */
  header.nav{position:sticky; top:0; z-index:50; transition:box-shadow .2s ease; background:rgba(255,255,255,.92); backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid var(--line);}
  .nav-inner{display:flex; align-items:center; gap:24px; height:74px;}
  .nav-logo img{height:40px; width:auto;}
  .nav-links{display:flex; gap:26px; margin-left:auto; align-items:center;}
  .nav-links a{color:var(--ink); font-weight:600; font-size:15px; border-bottom:2px solid transparent; padding:4px 0; transition:color .15s, border-color .15s;}
  .nav-links a:hover{color:var(--apex-text); border-color:var(--apex);}
  .nav-cta{display:flex; align-items:center; gap:18px; margin-left:6px;}
  .nav-phone{font-family:var(--font-display); font-size:16px; color:var(--ink); letter-spacing:.4px; white-space:nowrap;}
  .nav-toggle{display:none;}
  @media(max-width:960px){
    .nav-links{display:none;}
    .nav-phone{display:none;}
  }

  /* Hero */
  .hero{background:linear-gradient(180deg,#fff 0%, var(--mist) 100%); border-bottom:1px solid var(--line); position:relative;}
  .hero .wrap{display:grid; grid-template-columns:1.15fr .85fr; gap:52px; align-items:center; padding-top:78px; padding-bottom:84px;}
  .hero h1{font-size:clamp(38px,5.6vw,64px); color:var(--ink); letter-spacing:.5px;}
  .hero h1 .accent{color:var(--apex-text);}
  .hero .sub{margin:22px 0 30px; font-size:clamp(17px,1.9vw,20px); color:var(--slate); line-height:1.6; max-width:38ch;}
  .hero-cta{display:flex; gap:14px; flex-wrap:wrap;}
  .trust{display:flex; gap:22px; flex-wrap:wrap; margin-top:30px; padding-top:22px; border-top:1px solid var(--line);}
  .trust span{font-size:13px; font-weight:700; color:var(--slate); display:flex; align-items:center; gap:7px;}
  .trust b{color:var(--apex-text);}
  /* Hero device slot */
  .device{position:relative; background:var(--white); border:1px solid var(--line); border-radius:0; box-shadow:0 24px 60px rgba(0,0,102,.10); aspect-ratio:4/3.4; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:24px; overflow:hidden;}
  .device::before{content:""; position:absolute; top:0; left:0; width:46%; height:10px; background:var(--apex);}
  .device::after{content:""; position:absolute; top:10px; left:0; width:10px; height:46%; background:var(--apex);}
  .device .ph-label{font-family:var(--font-display); color:var(--ink); font-size:19px; letter-spacing:.4px;}
  .device .ph-note{font-size:12.5px; color:var(--slate); margin-top:8px; font-style:italic; max-width:24ch;}
  .device .ph-icon{width:64px; height:64px; border-radius:0; background:var(--mist); border:2px dashed #cbd5e1; margin-bottom:16px; display:flex; align-items:center; justify-content:center; color:#94a3b8; font-size:26px;}
  @media(max-width:860px){
    .hero .wrap{grid-template-columns:1fr; gap:38px; padding-top:52px; padding-bottom:56px;}
    .hero .sub{max-width:52ch;}
  }

  /* Section base */
  section.block{padding:clamp(46px,6.5vw,84px) 0;}
  .block.mist{background:var(--mist);}
  .center{text-align:center;}
  .center .eyebrow{justify-content:center;}
  .center .lead{margin-left:auto; margin-right:auto;}
  .maxc{max-width:760px;}

  /* Thesis / vendor-advisor */
  .thesis{display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center;}
  .thesis .quote{background:var(--navy); color:#fff; border-radius:0; padding:38px 40px;}
  .thesis .quote .mark{font-family:var(--font-display); color:var(--apex); font-size:56px; line-height:.5; height:26px;}
  .thesis .quote p{font-family:var(--font-display); font-size:clamp(22px,2.6vw,28px); line-height:1.22; letter-spacing:.3px; margin:0 0 18px;}
  .thesis .quote .by{font-family:var(--font-body); font-weight:700; font-size:14px; color:#9fe86a; letter-spacing:.4px;}
  .va{display:grid; grid-template-columns:1fr 1fr; gap:0; margin-top:14px; border:1px solid var(--line); border-radius:0; overflow:hidden;}
  .va .col h4{font-family:var(--font-body); font-weight:800; font-size:12px; letter-spacing:2px; text-transform:uppercase; margin:0; padding:12px 18px; color:#fff;}
  .va .vendor h4{background:var(--slate);} .va .adv h4{background:var(--apex-dark);}
  .va .col ul{list-style:none; margin:0; padding:6px 0;}
  .va .col li{padding:9px 18px; font-size:14px; color:var(--ink); border-top:1px solid var(--line);}
  .va .vendor li{color:var(--slate);}
  @media(max-width:820px){ .thesis{grid-template-columns:1fr; gap:34px;} }

  /* 3-up cards */
  .cards3{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:44px;}
  .card{background:#fff; border:1px solid var(--line); border-radius:0; padding:30px 28px; transition:transform .2s ease, box-shadow .2s ease; position:relative; overflow:hidden;}
  .block.mist .card{background:#fff;}
  .card:hover{transform:translateY(-4px); box-shadow:0 18px 40px rgba(0,0,102,.09);}
  .card .cnum{width:44px; height:44px; border-radius:0; background:var(--apex); display:flex; align-items:center; justify-content:center; margin-bottom:18px;}
  .card .cnum svg{width:24px; height:24px;}
  .card h3{margin-bottom:10px;}
  .card p{font-size:15px; color:var(--slate); margin:0;}
  @media(max-width:820px){ .cards3{grid-template-columns:1fr; gap:16px;} }

  /* Print Navigator */
  .pn{display:grid; grid-template-columns:1fr 1fr; gap:46px; align-items:center;}
  .badge{display:inline-flex; align-items:center; gap:9px; background:rgba(246,182,0,.16); color:#946b00; font-weight:800; font-size:12px; letter-spacing:1.6px; text-transform:uppercase; padding:8px 14px; border-radius:0; margin-bottom:18px;}
  .badge::before{content:""; width:9px; height:9px; border-radius:0; background:var(--amber);}
  .pn-steps{list-style:none; margin:24px 0 0; padding:0; counter-reset:pn; display:grid; gap:14px;}
  .pn-steps li{counter-increment:pn; display:flex; gap:16px; align-items:flex-start; background:#fff; border:1px solid var(--line); border-radius:0; padding:18px 20px;}
  .pn-steps li::before{content:counter(pn); font-family:var(--font-display); font-size:18px; color:var(--ink); background:var(--apex); width:34px; height:34px; border-radius:0; display:flex; align-items:center; justify-content:center; flex:none;}
  .pn-steps b{display:block; font-family:var(--font-body); font-weight:800; color:var(--ink); font-size:15.5px; margin-bottom:2px;}
  .pn-steps span{font-size:14px; color:var(--slate);}
  @media(max-width:820px){ .pn{grid-template-columns:1fr; gap:32px;} }

  /* Victory Reports */
  .vr{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:44px;}
  .vcard{background:#fff; border:1px solid var(--line); border-radius:0; overflow:hidden; display:flex; flex-direction:column; transition:transform .2s, box-shadow .2s;}
  .vcard:hover{transform:translateY(-4px); box-shadow:0 18px 40px rgba(0,0,102,.10);}
  .vcard .stat{background:var(--navy); color:#fff; padding:26px 26px 22px;}
  .vcard .stat .big{font-family:var(--font-display); font-size:40px; color:var(--apex); letter-spacing:.5px; line-height:1;}
  .vcard .stat .who{font-weight:700; font-size:14px; margin-top:10px; color:#fff;}
  .vcard .stat .cat{font-size:12px; color:rgba(255,255,255,.7); text-transform:uppercase; letter-spacing:1.4px; margin-top:3px;}
  .vcard .body{padding:22px 26px 24px; font-size:14.5px; color:var(--slate);}
  .vcard .body .win{font-family:var(--font-display); color:var(--ink); font-size:16px; margin-bottom:8px; letter-spacing:.2px;}
  @media(max-width:820px){ .vr{grid-template-columns:1fr; gap:16px;} }

  /* Who we are (navy) */
  .who{background:var(--navy); color:#fff;}
  .who h2{color:#fff;}
  .who .grid{display:grid; grid-template-columns:1.1fr .9fr; gap:52px; align-items:center;}
  .who p{color:rgba(255,255,255,.85); font-size:17px;}
  .who .sig{font-family:var(--font-display); color:var(--apex); font-size:20px; margin-top:20px; letter-spacing:.4px;}
  .who .sig small{display:block; font-family:var(--font-body); font-weight:600; font-size:13px; color:rgba(255,255,255,.7); letter-spacing:.3px; margin-top:3px;}
  .video{position:relative; border-radius:0; overflow:hidden; aspect-ratio:16/10; background:linear-gradient(135deg,#0a0a4d,#151568); border:1px solid rgba(255,255,255,.14); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:24px;}
  .video .play{width:70px; height:70px; border-radius:0; background:var(--apex); display:flex; align-items:center; justify-content:center; margin-bottom:16px; box-shadow:0 10px 30px rgba(99,196,39,.4);}
  .video .play svg{width:26px; height:26px; margin-left:4px;}
  .video .vlabel{font-family:var(--font-display); color:#fff; font-size:18px;}
  .video .vnote{font-size:12.5px; color:rgba(255,255,255,.65); margin-top:8px; font-style:italic;}
  @media(max-width:820px){ .who .grid{grid-template-columns:1fr; gap:34px;} }

  /* Guarantee */
  .guar .cards3{margin-top:40px;}
  .gcard{text-align:left; border-top:4px solid var(--apex);}
  .gcard .ic{width:46px; height:46px; border-radius:0; background:rgba(99,196,39,.14); display:flex; align-items:center; justify-content:center; margin-bottom:16px;}
  .gcard .ic svg{width:26px;height:26px;}
  .strap{font-family:var(--font-display); font-style:italic; color:var(--apex-text); font-size:clamp(20px,2.6vw,26px); text-align:center; margin-top:40px; letter-spacing:.4px;}

  /* Local */
  .chips{display:flex; flex-wrap:wrap; gap:10px; margin-top:26px;}
  .chip{background:#fff; border:1px solid var(--line); border-radius:0; padding:9px 16px; font-size:14px; font-weight:600; color:var(--ink); transition:border-color .15s, color .15s;}
  .chip:hover{border-color:var(--apex); color:var(--apex-text);}

  /* Final CTA */
  .final{background:linear-gradient(135deg,#141f36,#212e42); color:#fff; text-align:center;}
  .final h2{color:#fff; font-size:clamp(30px,4.6vw,50px);}
  .final p{color:rgba(255,255,255,.82); font-size:19px; max-width:52ch; margin-left:auto; margin-right:auto;}
  .final .hero-cta{justify-content:flex-start; margin-top:8px;}
  .final .phone-lg{margin-top:24px; font-family:var(--font-display); font-size:clamp(24px,3.4vw,34px); color:#8FE05A; letter-spacing:.5px;}
  .final .phone-lg a{color:#8FE05A;}

  /* Footer */
  footer.foot{background:var(--ink); color:rgba(255,255,255,.72); padding:64px 0 34px; font-size:14px;}
  .foot-top{display:grid; grid-template-columns:1.4fr .9fr .9fr .8fr 1.1fr; gap:30px; padding-bottom:40px; border-bottom:1px solid rgba(255,255,255,.12);}
.foot img{display:block; height:52px; width:auto; max-width:100%; object-fit:contain; margin-bottom:16px;}
  .foot .tag{font-family:var(--font-display); color:var(--apex); font-size:16px; letter-spacing:.4px; margin-bottom:12px;}
  .foot h5{font-family:var(--font-body); font-weight:800; color:#fff; font-size:12px; letter-spacing:1.6px; text-transform:uppercase; margin:0 0 14px;}
  .foot a{color:rgba(255,255,255,.72); display:block; margin-bottom:9px;}
  .foot a:hover{color:var(--apex);}
  .foot .contact-line{margin-bottom:9px;}
  .foot .contact-line b{color:#fff; font-weight:700;}
  .foot-bottom{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; padding-top:24px; font-size:12.5px; color:rgba(255,255,255,.5);}
  @media(max-width:820px){ .foot-top{grid-template-columns:1fr; gap:30px;} }

  /* Reveal animation */
  html.js .reveal{opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s ease;}
  html.js .reveal.in{opacity:1; transform:none;}
  @media(prefers-reduced-motion:reduce){ html.js .reveal{opacity:1; transform:none; transition:none;} html{scroll-behavior:auto;} }

  /* prototype ribbon */
  .proto{position:fixed; bottom:14px; right:14px; z-index:80; background:var(--ink); color:#fff; font-size:11.5px; font-weight:700; letter-spacing:.5px; padding:8px 13px; border-radius:0; box-shadow:0 6px 20px rgba(0,0,0,.25); opacity:.9;}
  .proto b{color:var(--apex);}

/* ============ B2B additions (Ricoh-inspired, photo-forward) ============ */
/* Utility bar */
.utility{background:var(--ink); color:rgba(255,255,255,.82); font-size:12.5px;}
.utility .wrap{display:flex; align-items:center; justify-content:space-between; height:40px; gap:16px;}
.utility a{color:rgba(255,255,255,.82); border:0;}
.utility a:hover{color:var(--apex);}
.utility .u-left,.utility .u-right{display:flex; gap:20px; align-items:center;}
.utility b{color:var(--apex); font-weight:700;}
.utility .u-phone{font-weight:700; color:#fff;}
@media(max-width:820px){ .utility .u-hours,.utility .u-email{display:none;} .utility .wrap{justify-content:center;} }

/* Brands strip */
.brands{border-bottom:1px solid var(--line); background:#fff;}
.brands .wrap{display:flex; align-items:center; gap:48px; justify-content:center; flex-wrap:wrap; padding:26px var(--wpad);}
.brands .lab{font-size:12px; letter-spacing:1.6px; text-transform:uppercase; color:var(--slate); font-weight:800;}
.brands img{height:34px; width:auto;}

/* Industries */
.ind-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:44px;}
.ind{background:#fff; border:1px solid var(--line); border-left:4px solid var(--apex); border-radius:0; padding:24px 22px; transition:transform .2s,box-shadow .2s;}
.block.mist .ind{background:#fff;}
.ind:hover{transform:translateY(-3px); box-shadow:0 16px 36px rgba(0,0,102,.08);}
.ind .ic{color:var(--apex-text); margin-bottom:12px;}
.ind .ic svg{width:26px;height:26px;}
.ind h3{font-size:17px; margin-bottom:6px;}
.ind p{font-size:13.5px; color:var(--slate); margin:0;}
@media(max-width:820px){ .ind-grid{grid-template-columns:1fr;} }

/* Photo-overlay case cards (Victory Reports) */
.vr-photo{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:44px;}
.vpc{position:relative; border-radius:0; overflow:hidden; min-height:360px; display:flex; flex-direction:column; justify-content:flex-end; color:#fff; border:1px solid var(--line); transition:transform .2s, box-shadow .2s;}
.vpc:hover{transform:translateY(-4px); box-shadow:0 20px 44px rgba(0,0,102,.18);}
.vpc>img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;}
.vpc .scrim{position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,80,.12) 0%, rgba(0,0,70,.45) 42%, rgba(0,0,55,.94) 100%); z-index:1;}
.vpc .vpc-body{position:relative; z-index:2; padding:26px;}
.vpc .cat{font-size:11px; letter-spacing:1.4px; text-transform:uppercase; color:var(--apex); font-weight:800; margin-bottom:12px;}
.vpc .big{font-family:var(--font-display); font-size:36px; color:var(--apex); letter-spacing:.4px; line-height:1;}
.vpc .win{font-family:var(--font-display); font-size:18px; margin:10px 0 6px; color:#fff; letter-spacing:.2px;}
.vpc .who{font-size:13px; color:rgba(255,255,255,.9);}
@media(max-width:820px){ .vr-photo{grid-template-columns:1fr;} }

/* Media pair (founder / team) */
.media-2{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
.media-2 figure{margin:0; border-radius:0; overflow:hidden; border:1px solid rgba(255,255,255,.16); position:relative;}
.media-2 img{width:100%; height:100%; object-fit:cover; display:block; aspect-ratio:4/3;}
.media-2 figcaption{position:absolute; left:0; right:0; bottom:0; padding:14px 16px 12px; background:linear-gradient(transparent, rgba(0,0,45,.88)); color:#fff; font-size:12px; font-weight:600;}
@media(max-width:640px){ .media-2{grid-template-columns:1fr;} }

/* Products */
.prod-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:44px;}
.prod{background:#fff; border:1px solid var(--line); border-radius:0; padding:22px; text-align:center; transition:transform .2s,box-shadow .2s;}
.block.mist .prod{background:#fff;}
.prod:hover{transform:translateY(-3px); box-shadow:0 16px 36px rgba(0,0,102,.08);}
.prod .imgwrap{height:240px; display:flex; align-items:center; justify-content:center; margin-bottom:16px; background:var(--mist); border-radius:0;}
.prod .imgwrap img{max-height:216px; max-width:94%; width:auto;}
.prod h3{font-size:16px; margin-bottom:4px;}
.prod .meta{font-size:13px; color:var(--slate);}
.prod .badge-nl{display:inline-block; margin-top:10px; font-size:11px; font-weight:800; letter-spacing:.6px; color:var(--apex-text); background:rgba(99,196,39,.12); padding:5px 11px; border-radius:0;}
@media(max-width:820px){ .home-equipment .prod-grid{grid-template-columns:1fr;} }

/* Hero device photo */
.device-photo{background:#fff; border:1px solid var(--line); border-radius:0; box-shadow:0 24px 60px rgba(0,0,102,.10); padding:26px; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; min-height:340px;}
.device-photo::before{content:""; position:absolute; top:0; left:0; width:46%; height:10px; background:var(--apex);}
.device-photo::after{content:""; position:absolute; top:10px; left:0; width:10px; height:46%; background:var(--apex);}
.device-photo img{max-height:320px; width:auto;}

/* Service area map */
.area-grid{display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center;}
.area-grid .map{border-radius:0; overflow:hidden; border:1px solid var(--line); box-shadow:0 16px 40px rgba(0,0,102,.08);}
.area-grid .map img{width:100%; display:block;}
@media(max-width:820px){ .area-grid{grid-template-columns:1fr; gap:28px;} }

.nav-links a.active{color:var(--apex-text); border-color:var(--apex);}

/* ============ Content-page helpers ============ */
.page-hero{background:linear-gradient(180deg,#fff,var(--mist)); border-bottom:1px solid var(--line); padding:clamp(38px,5.5vw,66px) 0;}
.page-hero.dark{background:var(--navy); border-bottom:0;}
.page-hero.dark h1,.page-hero.dark .lead{color:#fff;}
.page-hero.dark .lead{color:rgba(255,255,255,.85);}
.page-hero.dark .eyebrow{color:#8fe05a;}
.page-hero h1{font-size:clamp(32px,5vw,54px); color:var(--ink); max-width:20ch;}
.page-hero .lead{margin-top:18px; max-width:62ch;}
.page-hero .hero-cta{margin-top:26px;}
.crumb{font-size:13px; color:var(--slate); margin-bottom:16px; letter-spacing:.2px;}
.crumb a{color:var(--slate);} .crumb a:hover{color:var(--apex-text);}
.page-hero.dark .crumb,.page-hero.dark .crumb a{color:rgba(255,255,255,.6);}

/* Split: text + media, alternating */
.split{display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center;}
.split.reverse .split-media{order:-1;}
.split-media{border-radius:0; overflow:hidden; border:1px solid var(--line); box-shadow:0 18px 44px rgba(0,0,102,.10);}
.split-media img{width:100%; display:block; aspect-ratio:5/4; object-fit:cover;}
.split-media.contain{background:var(--mist); display:flex; align-items:center; justify-content:center; padding:30px; min-height:440px;}
.split-media.contain img{aspect-ratio:auto; max-height:420px; max-width:94%; width:auto; object-fit:contain;}
@media(max-width:860px){ .split{grid-template-columns:1fr; gap:30px;} .split.reverse .split-media{order:0;} }

/* Product galleries: configuration-first carousel with thumbnails and mobile swipe. */
.product-gallery{min-width:0; padding:14px; background:#fff; border:1px solid var(--line); box-shadow:0 18px 44px rgba(0,0,102,.10); touch-action:pan-y;}
.product-gallery:focus{outline:3px solid rgba(99,196,39,.28); outline-offset:4px;}
.pg-stage{position:relative; aspect-ratio:1.06/1; overflow:hidden; background:var(--mist); border:1px solid var(--hair);}
.pg-slide{position:absolute; inset:0; margin:0; padding:26px; display:flex; align-items:center; justify-content:center;}
.pg-slide[hidden]{display:none;}
.pg-slide.is-active{animation:pgFade .5s ease both;}
.pg-slide img{display:block; max-width:94%; max-height:88%; width:auto; height:auto; object-fit:contain;}
.pg-slide figcaption{position:absolute; left:12px; bottom:12px; padding:7px 10px; background:rgba(33,46,66,.90); color:#fff; font-size:11px; font-weight:800; letter-spacing:.45px; text-transform:uppercase; box-shadow:2px 2px 0 rgba(99,196,39,.75);}
.pg-arrow{position:absolute; z-index:2; top:50%; transform:translateY(-50%); width:44px; height:44px; padding:0; display:grid; place-items:center; border:1px solid rgba(255,255,255,.38); border-radius:50%; background:rgba(33,46,66,.92); color:#fff; font:800 20px/1 var(--font-body); cursor:pointer; box-shadow:0 7px 18px rgba(16,24,39,.20); transition:background .15s, color .15s, transform .15s;}
.pg-arrow:hover,.pg-arrow:focus-visible{background:var(--apex); color:var(--ink); outline:0; transform:translateY(-50%) scale(1.05);}
.pg-prev{left:12px}.pg-next{right:12px}
.pg-thumbs{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(76px,1fr); gap:9px; margin-top:10px; overflow-x:auto; overscroll-behavior-inline:contain; scrollbar-width:thin; padding:2px 2px 7px;}
.pg-thumb{height:82px; min-width:76px; padding:5px; display:flex; align-items:center; justify-content:center; background:var(--mist); border:2px solid transparent; cursor:pointer; transition:border-color .15s, background .15s, transform .15s;}
.pg-thumb img{max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain;}
.pg-thumb:hover{border-color:var(--line); background:#fff;}
.pg-thumb.is-active,.pg-thumb[aria-current="true"]{border-color:var(--apex); background:#fff; box-shadow:2px 2px 0 rgba(99,196,39,.30);}
.pg-thumb:focus-visible{outline:3px solid rgba(99,196,39,.32); outline-offset:2px;}
.pg-help{margin:4px 2px 0; color:var(--slate); font-size:11px; line-height:1.4; text-align:center;}
.pg-status{position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important;}
@keyframes pgFade{from{opacity:.25; transform:translateX(8px)}to{opacity:1; transform:none}}
@media(max-width:560px){
  .product-gallery{padding:10px;}
  .pg-stage{aspect-ratio:1/1.08;}
  .pg-slide{padding:18px 14px 30px;}
  .pg-arrow{width:40px;height:40px;}
  .pg-prev{left:8px}.pg-next{right:8px}
  .pg-thumbs{grid-auto-columns:minmax(78px,1fr); gap:7px;}
  .pg-thumb{height:70px; min-width:78px;}
  .pg-help{font-size:10px;}
}
@media(prefers-reduced-motion:reduce){.pg-slide.is-active{animation:none}.pg-arrow,.pg-thumb{transition:none}}

/* Prose */
.prose{max-width:68ch;}
.prose p{color:var(--ink); margin:0 0 18px;}
.prose p.muted{color:var(--slate);}
.prose h3{margin:34px 0 12px; color:var(--apex-text); font-size:19px; text-transform:uppercase; letter-spacing:.4px;}

/* Feature list (checked) */
ul.checks{list-style:none; padding:0; margin:18px 0 0; display:grid; gap:12px;}
ul.checks li{position:relative; padding-left:32px; color:var(--ink);}
ul.checks li::before{content:"✓"; position:absolute; left:0; top:0; color:#fff; background:var(--apex); width:20px; height:20px; border-radius:0; font-size:12px; font-weight:800; display:flex; align-items:center; justify-content:center;}
ul.checks li b{color:var(--ink);}

/* Big stat row */
.stat-row{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:8px;}
.stat-row .st{text-align:center; padding:8px;}
.stat-row .st .v{font-family:var(--font-display); font-size:clamp(30px,4vw,44px); color:var(--apex-text); line-height:1;}
.stat-row .st .k{font-size:13px; color:var(--slate); margin-top:8px;}
@media(max-width:720px){ .stat-row{grid-template-columns:1fr 1fr; gap:24px;} }

/* Service/feature big rows */
.frow{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; padding:44px 0; border-top:1px solid var(--line);}
.frow:first-of-type{border-top:0;}
.frow.rev .frow-media{order:-1;}
.frow-media{border-radius:0; overflow:hidden; border:1px solid var(--line);}
.frow-media img{width:100%; display:block; aspect-ratio:16/11; object-fit:cover;}
.frow-media.contain{background:var(--mist); display:flex; align-items:center; justify-content:center; padding:26px; aspect-ratio:16/11;}
.frow-media.contain img{aspect-ratio:auto; max-height:340px; max-width:94%; width:auto; object-fit:contain;}
.frow .kicker{font-family:var(--font-body); font-weight:800; font-size:12px; letter-spacing:2px; text-transform:uppercase; color:var(--apex-text); margin-bottom:10px;}
@media(max-width:860px){ .frow{grid-template-columns:1fr; gap:26px; padding:34px 0;} .frow.rev .frow-media{order:0;} }

/* FAQ */
.faq{max-width:820px; margin:36px auto 0;}
.faq details{border:1px solid var(--line); border-radius:0; margin-bottom:12px; background:#fff; overflow:hidden;}
.faq summary{padding:20px 22px; font-family:var(--font-head); font-weight:700; color:var(--ink); font-size:16.5px; cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+"; color:var(--apex-text); font-size:24px; font-weight:400; flex:none; transition:transform .2s;}
.faq details[open] summary::after{transform:rotate(45deg);}
.faq .a{padding:0 22px 20px; color:var(--slate); font-size:15px; line-height:1.6;}

/* Contact / form */
/* minmax(0,…) rather than a bare fr: a column sized `1fr` still refuses to go
   below its content's min-content width, and a form full of inputs reports a
   min-content wider than a 320px phone, which pushed the form's right edge and
   its controls off-screen (the page hides overflow, so nothing scrolled). */
.contact-grid{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:48px; align-items:start;}
@media(max-width:860px){ .contact-grid{grid-template-columns:minmax(0,1fr); gap:36px;} }
.lead-form{min-width:0;}
.lead-form input,.lead-form select,.lead-form textarea{min-width:0; max-width:100%;}
.lead-form{background:#fff; border:1px solid var(--line); border-radius:0; box-shadow:0 18px 44px rgba(0,0,102,.08); padding:30px 28px;}
.lead-form .step{display:none;} .lead-form .step.on{display:block;}
.lead-form .prog{display:flex; gap:8px; margin-bottom:22px;}
.lead-form .prog span{height:5px; flex:1; background:var(--line); border-radius:0;}
.lead-form .prog span.done{background:var(--apex);}
.lead-form h3{font-size:20px; margin-bottom:4px;}
.lead-form .sfield{margin-top:16px;}
.lead-form label{display:block; font-size:13px; font-weight:700; color:var(--ink); margin-bottom:6px;}
.lead-form input,.lead-form select,.lead-form textarea{width:100%; padding:13px 14px; border:1.5px solid var(--line); border-radius:0; font-family:var(--font-body); font-size:15px; color:var(--ink); background:#fff;}
.lead-form input:focus,.lead-form select:focus,.lead-form textarea:focus{outline:none; border-color:var(--apex);}
.opts{display:grid; gap:10px;}
.opt{display:flex; align-items:center; gap:12px; border:1.5px solid var(--line); border-radius:0; padding:14px; cursor:pointer; transition:border-color .15s, background .15s;}
.opt:hover{border-color:var(--apex);}
.opt input{width:auto;}
.opt.sel{border-color:var(--apex); background:rgba(99,196,39,.06);}
.form-nav{display:flex; justify-content:space-between; gap:12px; margin-top:22px;}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}
.form-done{text-align:center; padding:20px 10px;}
.form-done .ic{width:64px;height:64px;border-radius:0;background:rgba(99,196,39,.14);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;}
.info-card{background:var(--ink); color:#fff; border-radius:0; padding:30px 28px;}
.info-card h3{color:#fff; font-size:20px; margin-bottom:16px;}
.info-card .row{display:flex; gap:12px; margin-bottom:16px; align-items:flex-start;}
.info-card .row .k{color:var(--apex); font-weight:800; font-size:12px; letter-spacing:1px; text-transform:uppercase; width:74px; flex:none; padding-top:2px;}
/* The email address is one long token: let it break rather than run past a 320px screen. */
.info-card .row>*:not(.k){min-width:0; overflow-wrap:anywhere;}
.info-card .row a{color:#fff;}

/* Persistent quick actions: independent icons on desktop; a purpose-built tap dock on mobile. */
.cta-icon{display:flex;align-items:center;justify-content:center;flex:none}
.cta-icon svg{display:block;width:23px;height:23px}
.hero-actions{max-width:760px}
.hero-actions .btn{padding:13px 18px}
.hero-actions .cta-icon svg{width:20px;height:20px}
.action-rail{position:fixed;right:18px;top:50%;transform:translateY(-50%);z-index:70;display:flex;flex-direction:column;align-items:flex-end;gap:10px;pointer-events:none}
.action-rail a{pointer-events:auto;position:relative;display:flex;flex-direction:row-reverse;align-items:center;justify-content:flex-start;width:54px;height:54px;padding:0;color:#fff;background:var(--ink);border:1px solid rgba(255,255,255,.18);border-radius:12px;box-shadow:0 8px 20px rgba(16,24,39,.20);overflow:hidden;transition:width .22s ease,transform .22s ease,background .2s ease,box-shadow .2s ease}
.action-rail a[data-action="call"]{background:var(--apex);color:var(--ink)}
.action-rail a:hover,.action-rail a:focus-visible{width:224px;transform:translateX(-4px);color:#fff;background:var(--ink);box-shadow:0 12px 28px rgba(16,24,39,.26);outline:0}
.action-rail a[data-action="call"]:hover,.action-rail a[data-action="call"]:focus-visible{background:var(--apex);color:var(--ink)}
.action-rail .cta-icon{width:52px;height:52px;flex:0 0 52px}
.action-rail .ar-label{min-width:0;width:170px;padding:0 6px 0 15px;line-height:1.08;text-align:left;opacity:0;transform:translateX(10px);transition:opacity .16s ease,transform .22s ease;white-space:nowrap}
.action-rail a:hover .ar-label,.action-rail a:focus-visible .ar-label{opacity:1;transform:none}
.action-rail .ar-label small,.action-rail .ar-label strong{display:block}
.action-rail .ar-label small{margin-bottom:4px;color:rgba(255,255,255,.68);font-size:9px;font-weight:800;letter-spacing:.8px;text-transform:uppercase}
.action-rail .ar-label strong{color:inherit;font-size:14px;font-weight:850}
.action-rail a[data-action="call"] .ar-label small{color:rgba(33,46,66,.66)}
/* Echo the current site's animated call cue without turning the rail into a distraction. */
@media (min-width:861px) and (prefers-reduced-motion:no-preference){
  @keyframes callSignal{
    0%,72%{opacity:0;transform:scale(.78)}
    77%{opacity:.42}
    90%,100%{opacity:0;transform:scale(1.48)}
  }
  @keyframes callRing{
    0%,74%,88%,100%{transform:rotate(0)}
    77%{transform:rotate(-10deg)}
    80%{transform:rotate(9deg)}
    83%{transform:rotate(-7deg)}
    86%{transform:rotate(5deg)}
  }
  .action-rail a[data-action="call"]::before{
    content:"";position:absolute;right:6px;top:6px;width:40px;height:40px;
    border:2px solid rgba(99,196,39,.62);border-radius:10px;pointer-events:none;
    opacity:0;animation:callSignal 4.8s ease-out 1.2s infinite;
  }
  .action-rail a[data-action="call"] .cta-icon svg{transform-origin:50% 50%;animation:callRing 4.8s ease-in-out 1.2s infinite}
  .action-rail:hover a[data-action="call"]::before,
  .action-rail:hover a[data-action="call"] .cta-icon svg,
  .action-rail a[data-action="call"]:focus-visible::before,
  .action-rail a[data-action="call"]:focus-visible .cta-icon svg{animation-play-state:paused}
}
@media(prefers-reduced-motion:reduce){.action-rail a,.action-rail .ar-label{transition:none}}
@media(max-width:860px){
  body{padding-bottom:82px}
  .action-rail{top:auto;left:10px;right:10px;bottom:max(8px,env(safe-area-inset-bottom));transform:none;display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:5px;background:rgba(33,46,66,.96);border:1px solid rgba(255,255,255,.14);border-radius:15px;box-shadow:0 10px 30px rgba(16,24,39,.28);backdrop-filter:blur(12px)}
  .action-rail a,.action-rail a:hover,.action-rail a:focus-visible{width:auto;height:57px;transform:none;flex-direction:column;justify-content:center;gap:2px;padding:4px 2px;background:transparent;border:0;border-radius:10px;box-shadow:none;color:#fff;overflow:visible}
  .action-rail a[data-action="call"],.action-rail a[data-action="call"]:hover,.action-rail a[data-action="call"]:focus-visible{background:var(--apex);color:var(--ink)}
  .action-rail .cta-icon{width:auto;height:25px;flex:0 0 25px}
  .action-rail .cta-icon svg{width:18px;height:18px}
  .action-rail .ar-label{display:block;width:auto;padding:0;opacity:1;transform:none;text-align:center;white-space:normal;line-height:1}
  .action-rail .ar-label small{display:none}
  .action-rail .ar-label strong{font-size:9px;letter-spacing:0}
}
@media print{.action-rail{display:none!important}}

/* Filterable Model Directory */
.model-filters{display:grid;grid-template-columns:repeat(4,minmax(150px,1fr)) auto;gap:12px;align-items:end;margin:34px 0 14px;padding:20px;background:#fff;border:1px solid var(--hair);box-shadow:3px 3px 0 var(--paper-edge)}
.model-filters label{font-size:11px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;color:var(--slate)}
.model-filters select{display:block;width:100%;margin-top:6px;padding:11px 12px;border:1px solid var(--line);background:#fff;color:var(--ink);font:600 14px var(--font-body);border-radius:0}
.model-filters .btn{padding:12px 18px}.model-count{font-size:13px;color:var(--slate);font-weight:800;margin:12px 0}
.model-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.model-card{background:#fff;border:1px solid var(--hair);box-shadow:3px 3px 0 var(--paper-edge);padding:18px;color:var(--ink)!important;transition:transform .18s ease,box-shadow .18s ease}.model-card:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--paper-lift)}.model-card[hidden]{display:none}
.model-img{height:160px;display:flex;align-items:center;justify-content:center;background:var(--mist);margin-bottom:14px}.model-img img{max-height:142px;width:auto}.model-brand{font-size:10px;font-weight:900;letter-spacing:1px;text-transform:uppercase;color:var(--apex-text)}.model-card h3{font-size:16px;margin:5px 0 4px}.model-card p{font-size:12.5px;color:var(--slate);margin:0 0 8px}.model-volume{font-size:12px;color:var(--ink);line-height:1.35}.model-link{display:inline-block;margin-top:12px;font-size:12px;font-weight:900;color:var(--apex-text)}
@media(max-width:1080px){.model-filters{grid-template-columns:repeat(2,1fr)}.model-grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:720px){.model-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:520px){.model-filters,.model-grid{grid-template-columns:1fr}.model-img{height:190px}}

/* Matching and lease-review funnels */
.form-intro{color:var(--slate);font-size:14px;margin:2px 0 4px}.optional{color:var(--slate);font-weight:400}.form-error{color:#9f2d24;font-size:13px;margin-top:14px}.form-privacy{color:var(--slate);font-size:12px;margin-top:14px}.paper-note{margin-top:20px;background:var(--mist);border-left:4px solid var(--apex);padding:22px 24px}.paper-note p{font-size:14px;margin:5px 0 0}.doc-ready{display:flex!important;gap:12px;align-items:flex-start;margin-top:18px;padding:15px;border:1px solid var(--line);cursor:pointer}.doc-ready input{width:auto!important;margin-top:3px}.match-results{display:grid;gap:14px;margin-top:22px}.match-card{display:grid;grid-template-columns:44px 108px 1fr;gap:16px;align-items:center;border:1px solid var(--hair);box-shadow:3px 3px 0 var(--paper-edge);padding:15px;color:var(--ink)!important}.match-card:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--paper-lift)}.match-card img{width:108px;height:92px;object-fit:contain;background:var(--mist)}.match-number{font-family:var(--font-display);font-size:22px;color:var(--apex-text)}.match-card h4{font-size:18px;margin:3px 0 5px}.match-card p{font-size:13px;color:var(--slate);margin:0}
.step-count{margin:0 0 8px;color:var(--ink);font-size:12px;font-weight:850;letter-spacing:1.2px;text-transform:uppercase}
.hero-assessment-link{margin:13px 0 0;font-size:14px}.hero-assessment-link a{color:#fff!important;text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(255,255,255,.45)}.hero-assessment-link a:hover{color:#9fe86a!important;text-decoration-color:currentColor}
.pn-wordmark{width:min(330px,78vw);height:auto;margin:0 0 22px}
.pn-section-wordmark{display:block;width:min(300px,76vw);height:auto;margin:0 0 18px}
@media(max-width:560px){.match-card{grid-template-columns:34px 76px 1fr;gap:10px;padding:12px}.match-card img{width:76px;height:72px}.match-card h4{font-size:15px}}

/* Product category tabs / grid reuse .prod-grid */
.pcat{margin-top:14px;}
.pcat h3{font-size:20px; margin:40px 0 6px;}
.pcat .sub{color:var(--slate); font-size:15px; margin-bottom:8px;}

/* ================= PAPER IDENTITY ================= */
:root{
  --paper-edge: rgba(0,0,102,.07);
  --paper-lift: rgba(0,0,102,.12);
  --hair: #dbe0e6;
}
/* Sheets sit on the surface — short, hard offset shadow instead of soft float */
.card, .prod, .ind, .vcard, .faq details, .lead-form, .info-card,
.split-media, .frow-media, .device, .report-preview, .device-photo,
.pn-steps li, .step, .media-2 figure, .vpc, .thesis .quote, .qc,
.area-grid .map, .va, .rp-summary .box, .step .n{
  box-shadow: 3px 3px 0 var(--paper-edge) !important;
}
/* Lift the sheet on hover (up-left, shadow grows) */
.card:hover, .prod:hover, .ind:hover, .vcard:hover, .vpc:hover{
  transform: translate(-2px,-2px);
  box-shadow: 7px 7px 0 var(--paper-lift) !important;
}
/* Buttons press like a stamp */
.btn-primary:hover{ transform: translate(-1px,-1px); box-shadow: 3px 3px 0 rgba(33,46,66,.30) !important; }
.btn-primary:active{ transform: translate(1px,1px); box-shadow: 1px 1px 0 rgba(33,46,66,.30) !important; }
.btn-white:hover{ transform: translate(-1px,-1px); box-shadow: 3px 3px 0 rgba(0,0,0,.28) !important; }
.btn-ghost{ transition: transform .12s ease, border-color .15s, color .15s; }
.btn-ghost:hover{ transform: translate(-1px,-1px); }

/* Registration / crop marks — the print-proof motif on framed media */
.device, .report-preview, .split-media, .device-photo{ position:relative; }
.device::after, .report-preview::after, .split-media::after, .device-photo::after{
  content:""; position:absolute; inset:7px; pointer-events:none; z-index:2;
  background:
    linear-gradient(var(--ink),var(--ink)) left  10px top    0/1px 12px no-repeat,
    linear-gradient(var(--ink),var(--ink)) left  0    top   10px/12px 1px no-repeat,
    linear-gradient(var(--ink),var(--ink)) right 10px top    0/1px 12px no-repeat,
    linear-gradient(var(--ink),var(--ink)) right 0    top   10px/12px 1px no-repeat,
    linear-gradient(var(--ink),var(--ink)) left  10px bottom 0/1px 12px no-repeat,
    linear-gradient(var(--ink),var(--ink)) left  0    bottom 10px/12px 1px no-repeat,
    linear-gradient(var(--ink),var(--ink)) right 10px bottom 0/1px 12px no-repeat,
    linear-gradient(var(--ink),var(--ink)) right 0    bottom 10px/12px 1px no-repeat;
  opacity:.22;
}
/* keep the hero's green bracket dominant; soften its crop marks */
.device::after{ opacity:.16; }
/* Hairline ledger rule under section eyebrows already sharp; make card borders crisper */
.card, .prod, .ind, .vcard, .faq details, .lead-form, .frow-media, .split-media, .device, .report-preview{ border-color: var(--hair); }

/* ================= UX POLISH ================= */
/* Skip link (a11y) */
.skip{position:absolute; left:-9999px; top:0; z-index:200; background:var(--ink); color:#fff; padding:10px 16px; font-weight:700; font-size:14px;}
.skip:focus{left:8px; top:8px;}
/* Visible focus everywhere */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible{outline:2px solid var(--apex-dark); outline-offset:2px;}
.opt:focus-within{border-color:var(--apex-dark); outline:2px solid var(--apex-dark); outline-offset:1px;}
/* Sticky header gets a hard paper shadow once scrolled */
header.nav{transition:box-shadow .2s ease;}
header.nav.scrolled{box-shadow:0 2px 0 var(--paper-edge), 0 3px 10px rgba(0,0,102,.05);}
/* Mobile nav toggle (hamburger) */
.nav-toggle{display:none; flex-direction:column; justify-content:center; gap:5px; width:46px; height:42px; background:#fff; border:1px solid var(--hair); cursor:pointer; padding:0;}
.nav-toggle span{width:22px; height:2px; background:var(--ink); display:block; margin:0 auto; transition:transform .2s ease, opacity .2s ease;}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.mobile-menu{display:none; border-top:1px solid var(--line); background:#fff; padding:8px var(--wpad) 22px;}
.mobile-menu.open{display:block;}
.mobile-menu a{display:block; padding:14px 2px; font-weight:600; color:var(--ink); border-bottom:1px solid var(--mist); font-size:16px;}
.mobile-menu a.active{color:var(--apex-text);}
.mobile-menu a.btn{border-bottom:0; margin-top:16px; text-align:center; justify-content:center; color:var(--ink);}
.mobile-menu .mm-phone{color:var(--apex-text); font-family:var(--font-display); letter-spacing:.4px; border-bottom:0; padding-top:16px;}
@media(max-width:960px){
  .nav-toggle{display:flex;}
  .nav-cta .btn, .nav-phone{display:none;}
}

/* ================= TRUST ================= */
.creds-band{padding-top:32px; padding-bottom:32px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:#fff;}
.creds{display:grid; grid-template-columns:repeat(6,1fr); gap:16px;}
.cred{display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; font-size:12.5px; font-weight:700; color:var(--ink); line-height:1.3; letter-spacing:.2px;}
.cred svg{width:26px; height:26px; stroke:var(--apex-text);}
.cred b{color:var(--apex-text);}
@media(max-width:860px){ .creds{grid-template-columns:repeat(3,1fr); gap:22px 10px;} }
@media(max-width:460px){ .creds{grid-template-columns:repeat(2,1fr);} }

.trust-grid{display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:center;}
@media(max-width:860px){ .trust-grid{grid-template-columns:1fr; gap:34px;} }
.bbb-badge{display:inline-flex; align-items:center; gap:14px; border:2px solid var(--ink); padding:12px 20px; margin:22px 0 18px;}
.bbb-badge .grade{font-family:var(--font-display); font-size:30px; color:var(--apex-text); line-height:.9;}
.bbb-badge .bt{font-weight:800; color:var(--ink); font-size:13px; line-height:1.3;}
.bbb-badge .bt span{display:block; font-weight:600; color:var(--slate); font-size:11.5px; letter-spacing:.3px;}
.review-links{display:flex; gap:20px; flex-wrap:wrap; margin-bottom:24px; font-size:14px; font-weight:700;}
.review-links a{color:var(--slate); border-bottom:2px solid var(--line); padding-bottom:2px;}
.review-links a:hover{color:var(--apex-text); border-color:var(--apex);}
.trust-cards{display:grid; gap:14px;}
.tcard{background:#fff; border:1px solid var(--hair); box-shadow:3px 3px 0 var(--paper-edge); padding:20px 22px; display:flex; gap:20px; align-items:center;}
.tcard .stat{font-family:var(--font-display); font-size:32px; color:var(--apex-text); line-height:.95; flex:none; min-width:92px; font-variant-numeric:tabular-nums;}
.tcard .stat span{font-size:14px;}
.tcard p{margin:0 0 7px; font-size:15px; color:var(--ink); line-height:1.4;}
.tcard .src{font-size:12px; color:var(--slate); font-weight:700; letter-spacing:.2px;}
.tcard .src span{color:var(--apex-text);}

/* ================= NAV REFINEMENT ================= */
.nav-inner{gap:18px;}
.nav-links{gap:20px; flex-wrap:nowrap;}
.nav-links a{white-space:nowrap; font-size:14.5px;}
.nav-cta{gap:14px; align-items:center;}
.nav-phone{white-space:nowrap; color:var(--ink); border-bottom:0; font-family:var(--font-display); letter-spacing:.3px;}
.nav-phone:hover{color:var(--apex-text);}
@media(max-width:1180px){ .nav-phone{display:none;} }
@media(max-width:1080px){
  .nav-links{display:none;}
  .nav-toggle{display:flex;}
  .nav-cta .btn{display:none;}
}

/* ================= PROCESS FLOW ================= */
.flow{display:grid; grid-template-columns:repeat(4,1fr); gap:26px; margin-top:8px; position:relative;}
.flow::before{content:""; position:absolute; top:27px; left:12.5%; right:12.5%; height:2px; background:var(--hair); z-index:0;}
.fstep{text-align:center; position:relative; z-index:1;}
.fstep .n{width:56px; height:56px; margin:0 auto 20px; background:var(--apex); color:var(--ink); font-family:var(--font-display); font-size:24px; display:flex; align-items:center; justify-content:center; box-shadow:3px 3px 0 var(--paper-edge);}
.fstep .picon{display:flex; justify-content:center; margin-bottom:12px;}
.fstep .picon svg{width:28px; height:28px; stroke:var(--apex-text);}
.fstep h3{font-size:18px; margin-bottom:8px;}
.fstep p{font-size:14px; color:var(--slate); margin:0 auto; max-width:24ch;}
@media(max-width:820px){ .flow{grid-template-columns:1fr; gap:30px;} .flow::before{display:none;} }

/* Product image well: white so white-bg renders blend seamlessly */
.prod .imgwrap{background:#fff; border:1px solid var(--hair);}

/* ============ Audit fixes ============ */
/* Hero device render fills its frame better */
.device-photo{padding:18px;}
.device-photo img{width:min(500px,96%); height:auto;}
/* Preview pill: quieter on mobile so it doesn't cover footer text */
@media(max-width:720px){ .proto{font-size:10px; padding:6px 10px; opacity:.7; bottom:8px; right:8px;} }
/* Insights cards */
.post-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:44px;}
.post{background:#fff; border:1px solid var(--hair); box-shadow:3px 3px 0 var(--paper-edge); display:flex; flex-direction:column; transition:transform .2s, box-shadow .2s; text-decoration:none;}
.post:hover{transform:translate(-2px,-2px); box-shadow:7px 7px 0 var(--paper-lift);}
.post img{width:100%; aspect-ratio:16/9; object-fit:cover; display:block;}
.post .pb{padding:22px 24px 24px;}
.post .cat{font-size:11px; font-weight:800; letter-spacing:1.6px; text-transform:uppercase; color:var(--apex-text); margin-bottom:8px;}
.post h3{font-size:19px; color:var(--ink); margin-bottom:8px; line-height:1.25;}
.post p{font-size:14px; color:var(--slate); margin:0;}
.post .more{margin-top:14px; font-weight:800; font-size:13px; color:var(--apex-text);}
@media(max-width:820px){ .post-grid{grid-template-columns:1fr;} }
/* Article prose */
.article{max-width:720px; margin:0 auto;}
.article p{color:var(--ink); margin:0 0 18px; line-height:1.75;}
.article h2{font-size:clamp(24px,3vw,32px); margin:38px 0 14px;}
.article ul{margin:0 0 18px; padding-left:22px; color:var(--ink);}
.article li{margin-bottom:8px;}
.article .aside{background:var(--mist); border-left:4px solid var(--apex); padding:18px 22px; margin:24px 0; color:var(--ink); font-size:15.5px;}
.article .meta-line{font-size:13px; color:var(--slate); font-weight:700; letter-spacing:.4px; margin-bottom:22px;}

/* ================= PREMIUM MOTION ================= */
@media (prefers-reduced-motion: no-preference){
  /* Hero entrance — staggered rise */
  @keyframes riseIn{from{opacity:0; transform:translateY(26px);} to{opacity:1; transform:none;}}
  @keyframes heroFloat{0%,100%{transform:translateY(0);} 50%{transform:translateY(-9px);}}
  .js .hero .eyebrow{animation:riseIn .55s ease-out .05s backwards;}
  .js .hero h1{animation:riseIn .65s ease-out .15s backwards;}
  .js .hero .sub{animation:riseIn .6s ease-out .3s backwards;}
  .js .hero .hero-cta{animation:riseIn .6s ease-out .42s backwards;}
  .js .hero .trust{animation:riseIn .6s ease-out .54s backwards;}
  .js .device-photo{animation:riseIn .7s ease-out .3s backwards;}
  .js .device-photo img{animation:heroFloat 7s ease-in-out 1.6s infinite;}
  /* FAQ + form step content */
  .faq details[open] .a{animation:riseIn .32s ease-out;}
  .lead-form .step.on{animation:riseIn .35s ease-out;}
  /* Header shrink */
  .nav-inner{transition:height .25s ease;}
  .nav-logo img{transition:height .25s ease;}
  header.nav.scrolled .nav-inner{height:60px;}
  header.nav.scrolled .nav-logo img{height:34px;}
}
/* Scroll progress bar (transform-only) */
.progress{position:fixed; top:0; left:0; height:3px; width:100%; background:var(--apex); transform-origin:0 50%; transform:scaleX(0); z-index:120; pointer-events:none;}
/* Crop marks appear on card hover (paper proof detail) */
.card::after,.prod::after,.vcard::after{
  content:""; position:absolute; inset:6px; pointer-events:none; opacity:0; transition:opacity .25s ease;
  background:
    linear-gradient(var(--ink),var(--ink)) left  8px top    0/1px 10px no-repeat,
    linear-gradient(var(--ink),var(--ink)) left  0   top    8px/10px 1px no-repeat,
    linear-gradient(var(--ink),var(--ink)) right 8px bottom 0/1px 10px no-repeat,
    linear-gradient(var(--ink),var(--ink)) right 0   bottom 8px/10px 1px no-repeat;
}
.card:hover::after,.prod:hover::after,.vcard:hover::after{opacity:.3;}
.card,.prod,.ind{position:relative;}
/* Credentials marquee */
.marq{overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);}
.marq-track{display:flex; align-items:center; gap:64px; width:max-content; padding:4px 0;}
@media (prefers-reduced-motion: no-preference){
  @keyframes marq{from{transform:translateX(0);} to{transform:translateX(-50%);}}
  .marq-track{animation:marq 36s linear infinite;}
  .marq:hover .marq-track{animation-play-state:paused;}
}
.marq .cred{flex-direction:row; gap:12px; white-space:nowrap; font-size:13.5px;}
.marq .cred svg{width:24px; height:24px; flex:none;}

/* ================= ESTIMATOR (interactive) ================= */
.estimator{margin-top:64px; background:#fff; border:1px solid var(--hair); box-shadow:4px 4px 0 var(--paper-edge);}
.est-head{background:var(--navy); color:#fff; padding:22px 30px; display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap;}
.est-head .t{font-family:var(--font-display); font-size:clamp(18px,2.2vw,24px); letter-spacing:.3px;}
.est-head .tag{font-size:11px; letter-spacing:1.6px; text-transform:uppercase; color:var(--apex); font-weight:800;}
.est-body{display:grid; grid-template-columns:1.1fr .9fr; gap:0;}
.est-controls{padding:30px 32px; border-right:1px solid var(--line);}
.est-field{margin-bottom:26px;}
.est-field label{display:flex; justify-content:space-between; font-size:14px; font-weight:800; color:var(--ink); margin-bottom:12px;}
.est-field label output{color:var(--apex-text); font-variant-numeric:tabular-nums;}
input[type=range].est{-webkit-appearance:none; appearance:none; width:100%; height:6px; background:linear-gradient(90deg,var(--apex) var(--fill,50%),var(--line) var(--fill,50%)); outline:none; cursor:pointer;}
input[type=range].est::-webkit-slider-thumb{-webkit-appearance:none; appearance:none; width:22px; height:22px; background:var(--ink); border:3px solid var(--apex); cursor:grab; box-shadow:2px 2px 0 var(--paper-edge);}
input[type=range].est::-moz-range-thumb{width:22px; height:22px; background:var(--ink); border:3px solid var(--apex); cursor:grab; border-radius:0;}
.est-note{font-size:12px; color:var(--slate); font-style:italic; margin-top:6px;}
.est-out{padding:30px 32px; display:flex; flex-direction:column; gap:14px; background:var(--mist);}
.est-row{background:#fff; border:1px solid var(--hair); box-shadow:3px 3px 0 var(--paper-edge); padding:16px 20px; display:flex; justify-content:space-between; align-items:baseline; gap:10px;}
.est-row .k-wrap{display:flex; flex-direction:column; gap:4px; min-width:0;}
.est-row .k{font-size:12px; font-weight:800; letter-spacing:1.2px; text-transform:uppercase; color:var(--slate);}
.est-row .detail{font-size:11.5px; line-height:1.35; color:var(--slate); max-width:30ch;}
.est-row .v{font-family:var(--font-display); font-size:clamp(20px,2.4vw,28px); color:var(--ink); font-variant-numeric:tabular-nums; letter-spacing:.3px;}
.est-row.win{border-top:4px solid var(--apex);}
.est-row.win .v{color:var(--apex-text);}
.est-cta{margin-top:6px;}
@media(max-width:860px){ .est-body{grid-template-columns:1fr;} .est-controls{border-right:0; border-bottom:1px solid var(--line);} }
@media(max-width:520px){ .est-row{align-items:flex-start; flex-direction:column;} .est-row .v{align-self:flex-end;} }
/* Reduced-motion fallback: marquee becomes a centered wrapped row */
@media (prefers-reduced-motion: reduce){
  .marq{-webkit-mask-image:none; mask-image:none;}
  .marq-track{flex-wrap:wrap; justify-content:center; width:auto; gap:28px; padding:0 20px;}
  .marq .cred[aria-hidden="true"]{display:none;}
}

/* ================= MOBILE FIXES ================= */
/* Hamburger (and mobile call button) belong on the RIGHT */
@media(max-width:1080px){
  .nav-cta{margin-left:auto;}
}
/* Tap-to-call button next to the hamburger on mobile */
.nav-call{display:none; width:46px; height:42px; background:var(--apex); border:1px solid var(--apex-dark); align-items:center; justify-content:center; flex:none;}
.nav-call svg{width:20px; height:20px; stroke:var(--ink);}
@media(max-width:1080px){ .nav-call{display:inline-flex;} }
/* iOS: inputs under 16px trigger zoom-on-focus */
@media(max-width:860px){
  .lead-form input, .lead-form select, .lead-form textarea{font-size:16px;}
}

/* ================= ABSTRACT PAPER TEXTURES ================= */
.block, .page-hero{position:relative;}
[data-texture]{
  --texture-line:rgba(33,46,66,.055);
  --texture-image:none;
  --texture-size:auto;
  position:relative; isolation:isolate; overflow:hidden;
  background-image:var(--texture-image);
  background-size:var(--texture-size);
}
[data-texture="diagonal"]{
  --texture-image:repeating-linear-gradient(
    135deg,
    transparent 0 20px,
    var(--texture-line) 20px 22px
  );
}
[data-texture="dot-grid"]{
  --texture-image:radial-gradient(circle, var(--texture-line) 1.2px, transparent 1.5px);
  --texture-size:24px 24px;
}
[data-texture="ledger"]{
  --texture-image:
    linear-gradient(var(--texture-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--texture-line) 1px, transparent 1px);
  --texture-size:32px 32px, 32px 32px;
}
[data-texture="crosshatch"]{
  --texture-image:
    repeating-linear-gradient(45deg, transparent 0 28px, var(--texture-line) 28px 29px),
    repeating-linear-gradient(-45deg, transparent 0 28px, var(--texture-line) 28px 29px);
  --texture-size:auto, auto;
}
.who[data-texture], .page-hero.dark[data-texture]{
  --texture-line:rgba(255,255,255,.055);
}
/* Light page heroes keep their color wash; the selected texture sits above it. */
.page-hero:not(.dark){
  background-image:var(--texture-image, none), linear-gradient(180deg,#fff,var(--mist));
  background-size:var(--texture-size, auto), auto;
}
.hero.pn-hero[data-texture]{
  background-image:var(--texture-image), linear-gradient(180deg,#fff,var(--mist));
  background-size:var(--texture-size), auto;
}
/* Green final CTA: subtle paper-stripe texture */
.final{
  background:
    repeating-linear-gradient(-45deg, rgba(255,255,255,.045) 0 2px, transparent 2px 16px),
    linear-gradient(135deg,#141f36,#212e42);
}
/* Navy who-we-are: faint oversize ring pattern echoes the logo blocks */
.who{background:
  var(--texture-image, none),
  radial-gradient(rgba(255,255,255,.04) 1px, transparent 1.4px) 0 0/28px 28px,
  var(--navy);}

/* Photographic hero variant — Jim's preferred Toshiba shot */
.device-photo.photo{padding:0; overflow:hidden; min-height:0; aspect-ratio:16/10.5;}
.device-photo.photo img{width:100%; height:100%; object-fit:cover; display:block;}
@media (prefers-reduced-motion: no-preference){
  .js .device-photo.photo img{animation:none;} /* photos don't float; renders do */
  .js .device-photo.photo{animation:riseIn .7s ease-out .3s backwards;}
}

/* ================= FULL-BLEED PHOTO HERO (Jim's pick) ================= */
.hero.bleed{position:relative; background:var(--ink); border-bottom:0; overflow:hidden;}
.hero.bleed .hero-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 42%; z-index:0;}
.hero.bleed .scrim{position:absolute; inset:0; z-index:1; background:linear-gradient(90deg, rgba(16,24,39,.84) 0%, rgba(16,24,39,.60) 52%, rgba(16,24,39,.38) 100%);}
.hero.bleed .wrap{position:relative; z-index:2; display:block; padding-top:clamp(72px,9vw,120px); padding-bottom:clamp(76px,9.5vw,128px);}
.hero.bleed h1{color:#fff; max-width:19ch;}
.hero.bleed h1 .accent{color:var(--apex);}
.hero.bleed .eyebrow{color:#9fe86a;}
.hero.bleed .sub{color:rgba(255,255,255,.90); max-width:52ch;}
.hero.bleed .trust{border-top-color:rgba(255,255,255,.28);}
.hero.bleed .trust span{color:rgba(255,255,255,.88);}
.hero.bleed .trust b{color:var(--apex);}
.hero.bleed .btn-ghost{color:#fff; border-color:rgba(255,255,255,.45); background:rgba(16,24,39,.25);}
.hero.bleed .btn-ghost:hover{border-color:var(--apex); color:#9fe86a;}
@media (prefers-reduced-motion: no-preference){
  @keyframes bgDrift{from{transform:scale(1.04) translateX(0);} to{transform:scale(1.04) translateX(-14px);}}
  .js .hero.bleed .hero-bg{animation:bgDrift 22s ease-in-out infinite alternate;} /* slow cinematic drift */
}
@media(max-width:720px){
  .hero.bleed .scrim{background:rgba(16,24,39,.72);}
  .hero-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:100%}
  .hero-actions .btn{justify-content:center;padding:13px 8px;font-size:12px;white-space:nowrap}
  .hero-actions .cta-icon svg{width:18px;height:18px}
}

/* ================= LEFT-ALIGNED (Jim reads left to right) ================= */
/* Hero photo: bias image left so the copier sits right of the copy */
.hero.bleed .hero-bg{object-position:8% 42%;}
/* CTA bands: left-aligned, buttons flush left */
.final{text-align:left;}
.final h2{max-width:22ch;}
.final p{margin-left:0; margin-right:0;}
.final .hero-cta{justify-content:flex-start;}
.final .phone-lg{text-align:left;}
/* Pull quotes: left-aligned editorial quote with rule */
.pullquote{text-align:left; margin:36px 0 0; max-width:760px; border-left:5px solid var(--apex); padding-left:26px;}
/* Guarantee strap reads left */
.strap{text-align:left;}
/* CTA bands align to the site's left rail like every other section */
.final .wrap.maxc{max-width:var(--maxw);}
.final p{max-width:56ch;}

/* ================= DESIGN-DIRECTOR PASS (11-item) ================= */
/* #10 Unified photo grade — all content photography reads as one shoot */
.split-media img, .frow-media:not(.contain) img, .vpc > img, .media-2 img,
.post img, .device-photo.photo img, .hero-bg{
  filter:saturate(.86) contrast(1.05) brightness(1.01);
}
/* subtle cool tint overlay on framed photos (not renders) */
.split-media:not(.contain)::before, .frow-media:not(.contain)::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:rgba(0,0,102,.05); mix-blend-mode:multiply;
}
.split-media, .frow-media{position:relative;}

/* #11 Product renders: one consistent scale so the row reads as a lineup */
.prod .imgwrap{height:210px; padding:14px;}
.prod .imgwrap img{height:180px; width:auto; max-width:100%; object-fit:contain;}

/* #6 Perforation dividers — the paper tear-line motif */
.perf{position:relative;}
.perf::before{
  content:""; position:absolute; top:0; left:var(--wpad); right:var(--wpad); height:0;
  border-top:2px dashed rgba(33,46,66,.22);
}
.perf::after{ /* tiny notch squares at the ends, like die-cut tabs */
  content:""; position:absolute; top:-4px; left:calc(var(--wpad) - 4px); width:8px; height:8px;
  background:var(--apex); box-shadow:calc(100vw - 2*var(--wpad)) 0 0 var(--apex);
}
/* CTA bands = tear-off reply card: perforated top edge in white */
.final::before{
  content:""; position:absolute; top:12px; left:var(--wpad); right:var(--wpad);
  border-top:2px dashed rgba(255,255,255,.3);
}
.final{position:relative;}

/* #3 Transparent header over the homepage hero */
header.nav.over-hero{position:absolute; left:0; right:0; z-index:60;
  background:transparent; border-bottom:1px solid rgba(255,255,255,.14); backdrop-filter:none;}
header.nav.over-hero .nav-links a{color:#fff;}
header.nav.over-hero .nav-links a:hover, header.nav.over-hero .nav-links a.active{color:#9fe86a; border-color:var(--apex);}
header.nav.over-hero .nav-phone{color:#fff;}
header.nav.over-hero .nav-logo .logo-light{display:block;}
header.nav.over-hero .nav-logo .logo-dark{display:none;}
header.nav.over-hero .nav-toggle{background:transparent; border-color:rgba(255,255,255,.4);}
header.nav.over-hero .nav-toggle span{background:#fff;}
/* scrolled: becomes the standard fixed white bar */
header.nav.over-hero.scrolled{position:fixed; top:0; background:rgba(255,255,255,.95);
  border-bottom:1px solid var(--line); backdrop-filter:saturate(1.4) blur(10px);}
header.nav.over-hero.scrolled .nav-links a{color:var(--ink);}
header.nav.over-hero.scrolled .nav-links a:hover{color:var(--apex-text);}
header.nav.over-hero.scrolled .nav-phone{color:var(--ink);}
header.nav.over-hero.scrolled .nav-logo .logo-light{display:none;}
header.nav.over-hero.scrolled .nav-logo .logo-dark{display:block;}
header.nav.over-hero.scrolled .nav-toggle{background:#fff; border-color:var(--hair);}
header.nav.over-hero.scrolled .nav-toggle span{background:var(--ink);}
header.nav.over-hero .mobile-menu{background:#fff;}
.nav-logo .logo-light{display:none;}
/* hero needs room for the overlaid header */
.hero.bleed .wrap{padding-top:clamp(120px,14vw,168px);}

/* #5 Mid-page wow: full-bleed photographic band for Victory Reports */
.band-photo{position:relative; overflow:hidden;}
.band-photo .band-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(.7) brightness(.9);}
.band-photo .band-scrim{position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,16,30,.88), rgba(10,16,30,.82));}
.band-photo > .wrap{position:relative; z-index:2;}
.band-photo h2, .band-photo .lead{color:#fff;}
.band-photo .lead{color:rgba(255,255,255,.85);}
.band-photo .eyebrow{color:#9fe86a;}
/* Left-rail fix (2026-07-20): .wrap.maxc was a narrow centered column, violating the left-aligned rule. Content aligns to the standard rail; inner elements keep their own max-widths. */
.wrap.maxc{max-width:var(--maxw);}

/* Density pass (07-20): consecutive same-tone sections don't double their padding. */
section.block:not(.mist):not(.final):not(.who) + section.block:not(.mist):not(.final):not(.who){padding-top:clamp(10px,2.5vw,32px);}
section.block.mist + section.block.mist{padding-top:clamp(10px,2.5vw,32px);}

/* Audit fixes (07-20): */
/* 1. Hero -> first section boundary was 180-220px of dead air on most pages */
.page-hero + section.block{padding-top:clamp(26px,3.5vw,48px);}
/* 2. Links inside prose are recognizable without relying on color alone */
.prose a:not(.btn), .article a:not(.btn), .checks a, .lead a, p a:not(.btn):not(.chip){text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; text-decoration-color:rgba(45,138,32,.5);}
.prose a:not(.btn):hover, .article a:not(.btn):hover, .checks a:hover, p a:not(.btn):not(.chip):hover{text-decoration-color:currentColor;}

/* Ink CTA band (Jim-approved direction 07-20): green is punctuation, not paint */
.final .btn-white{background:var(--apex); color:#0f2a05;}
.final .btn-white:hover{background:#6fd230;}
.final .btn-ghost.on-dark{color:#fff; border-color:rgba(255,255,255,.45);}
.final .btn-ghost.on-dark:hover{border-color:#fff;}

/* ================= HUMAN-FINISH PASS (research synthesis 08-19) ================= */
/* Stable reading and anchor behavior across the sticky header and mobile action rail. */
html{scroll-padding-top:92px; color-scheme:light;}
@media(max-width:720px){html{scroll-padding-top:78px; scroll-padding-bottom:82px;}}
[id]{scroll-margin-top:92px;}
@media(max-width:720px){[id]{scroll-margin-top:78px;}}
.page{font-optical-sizing:auto; overflow-wrap:break-word;}
@supports(text-wrap:pretty){p,li,.lead,.sub,.article{ text-wrap:pretty; }}

/* A two-color ring remains visible on white, navy, photography, and green controls. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible{
  outline:3px solid #fff;
  outline-offset:2px;
  box-shadow:0 0 0 5px var(--navy);
}
.opt:focus-within{
  border-color:var(--navy);
  outline:3px solid #fff;
  outline-offset:2px;
  box-shadow:0 0 0 5px var(--navy);
}

/* Primary navigation and compact links remain comfortable touch targets. */
.nav-links a{min-height:44px; display:inline-flex; align-items:center;}
.model-link{min-height:36px; display:inline-flex; align-items:center;}
@media(pointer:coarse){
  .chip,.review-links a,.model-link{min-height:44px; display:inline-flex; align-items:center;}
  .model-filters select,.model-filters .btn{min-height:44px;}
}

/* Hover is a desktop enhancement, not a persistent mobile state. */
@media(hover:none){
  .card:hover,.prod:hover,.ind:hover,.vcard:hover,.vpc:hover,.post:hover,.model-card:hover,.match-card:hover{
    transform:none;
    box-shadow:3px 3px 0 var(--paper-edge)!important;
  }
  .card:hover::after,.prod:hover::after,.vcard:hover::after{opacity:0;}
  .btn-primary:hover,.btn-white:hover,.btn-ghost:hover{transform:none;}
  .js .hero.bleed .hero-bg,.js .device-photo img,.marq-track{animation:none!important;}
}
.marq:focus-within .marq-track{animation-play-state:paused;}

/* Reduced motion is comprehensive even when a new animated component is added later. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    scroll-behavior:auto!important;
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}

/* Phone-width containment: prevent long utility and CTA labels from widening the page. */
@media(max-width:520px){
  .utility .u-phone{display:none;}
  .utility .wrap{justify-content:center;}
  .nav-inner{gap:10px;}
  .nav-logo img{height:34px;}
  .nav-cta{gap:8px; min-width:0;}
  .hero.bleed h1{max-width:100%; font-size:clamp(34px,10vw,40px); text-wrap:wrap;}
  .hero.bleed .eyebrow{max-width:100%; font-size:11px; line-height:1.45; letter-spacing:1.7px; align-items:flex-start;}
  .hero-actions{grid-template-columns:repeat(2,minmax(0,1fr));}
  .action-rail{grid-template-columns:repeat(4,minmax(0,1fr));}
  .hero-actions .btn{min-width:0; white-space:normal; min-height:50px; line-height:1.15;}
  .action-rail a{min-width:0;}
  .action-rail .ar-label{min-width:0; max-width:100%;}
  .action-rail .ar-label strong{font-size:9px; overflow-wrap:anywhere;}
}
@media(max-width:360px){
  .nav-call{display:none;}
  .hero-actions .btn{font-size:11.5px;}
}

/* ================= SCROLL STORY PASS (08-19) ================= */
/* The current Next Level site uses opposing entrances, staged groups, floating
   equipment, and a few strong pulses. This pass translates that language into
   the paper-proof system instead of applying one generic animation everywhere. */
@media (min-width:861px) and (prefers-reduced-motion:no-preference){
  html.js .reveal{
    filter:blur(3px);
    transition:
      opacity .72s cubic-bezier(.22,1,.36,1),
      transform .82s cubic-bezier(.22,1,.36,1),
      filter .62s ease;
    will-change:opacity,transform,filter;
  }
  html.js .reveal.in{filter:none;will-change:auto}

  /* Editorial splits enter from opposite sides, like the public site's hero. */
  html.js .split > .reveal:first-child:not(.in),
  html.js .pn > .reveal:first-child:not(.in),
  html.js .area-grid > .reveal:first-child:not(.in),
  html.js .who .grid > .reveal:first-child:not(.in){transform:translate3d(-52px,0,0)}
  html.js .split > .reveal:last-child:not(.in),
  html.js .pn > .reveal:last-child:not(.in),
  html.js .area-grid > .reveal:last-child:not(.in),
  html.js .who .grid > .reveal:last-child:not(.in){transform:translate3d(52px,0,0)}

  /* Repeated choices arrive as a composed set, not a wall of cards. */
  html.js .cards3 > .reveal:not(.in),
  html.js .ind-grid > .reveal:not(.in),
  html.js .vr-photo > .reveal:not(.in),
  html.js .prod-grid > .reveal:not(.in),
  html.js .post-grid > .reveal:not(.in){transform:translate3d(0,38px,0) scale(.975)}

  /* Image reveal: a restrained print-sheet wipe and scale settle. */
  html.js .split-media.reveal img{
    clip-path:inset(0 100% 0 0);
    transform:scale(1.055);
    transition:clip-path .95s cubic-bezier(.22,1,.36,1),transform 1.25s cubic-bezier(.22,1,.36,1);
  }
  html.js .split-media.reveal.in img{clip-path:inset(0);transform:scale(1)}
  html.js .vpc.reveal > img{transform:scale(1.1);transition:transform 1.35s cubic-bezier(.22,1,.36,1)}
  html.js .vpc.reveal.in > img{transform:scale(1)}

  /* Lines draw after their heading lands. */
  html.js .reveal .rule{transform:scaleX(0);transform-origin:left center;transition:transform .7s cubic-bezier(.22,1,.36,1) .18s}
  html.js .reveal.in .rule{transform:scaleX(1)}

  /* Lists and paired photography get their own internal cadence. */
  html.js .pn-steps.reveal li,
  html.js .media-2.reveal figure,
  html.js .trust-cards.reveal > *{
    opacity:0;transform:translate3d(0,24px,0);
    transition:opacity .55s ease,transform .65s cubic-bezier(.22,1,.36,1);
  }
  html.js .pn-steps.reveal.in li,
  html.js .media-2.reveal.in figure,
  html.js .trust-cards.reveal.in > *{opacity:1;transform:none}
  html.js .pn-steps.reveal.in li:nth-child(2),
  html.js .media-2.reveal.in figure:nth-child(2),
  html.js .trust-cards.reveal.in > *:nth-child(2){transition-delay:.12s}
  html.js .pn-steps.reveal.in li:nth-child(3),
  html.js .trust-cards.reveal.in > *:nth-child(3){transition-delay:.24s}

  /* The process connects itself, then each step comes online. */
  .flow::after{
    content:"";position:absolute;top:27px;left:12.5%;right:12.5%;height:2px;
    z-index:0;background:var(--apex);transform:scaleX(0);transform-origin:left center;
    transition:transform 1.05s cubic-bezier(.22,1,.36,1) .18s;
  }
  .flow.in::after{transform:scaleX(1)}
  html.js .flow.reveal .fstep{opacity:0;transform:translate3d(0,26px,0);transition:opacity .5s ease,transform .65s cubic-bezier(.22,1,.36,1)}
  html.js .flow.reveal.in .fstep{opacity:1;transform:none}
  html.js .flow.reveal.in .fstep:nth-child(1){transition-delay:.18s}
  html.js .flow.reveal.in .fstep:nth-child(2){transition-delay:.34s}
  html.js .flow.reveal.in .fstep:nth-child(3){transition-delay:.50s}
  html.js .flow.reveal.in .fstep:nth-child(4){transition-delay:.66s}

  /* The full-series render gets the subtle float Jim likes on the live site. */
  @keyframes equipmentBreathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
  html.js .split-media.contain.reveal.in img{animation:equipmentBreathe 6.8s ease-in-out 1.2s infinite}

  /* Final reply-card CTA assembles in a clear reading order. */
  html.js .final .reveal > *{opacity:0;transform:translateY(18px);transition:opacity .5s ease,transform .6s cubic-bezier(.22,1,.36,1)}
  html.js .final .reveal.in > *{opacity:1;transform:none}
  html.js .final .reveal.in > *:nth-child(2){transition-delay:.10s}
  html.js .final .reveal.in > *:nth-child(3){transition-delay:.20s}
  html.js .final .reveal.in > *:nth-child(4){transition-delay:.30s}
}

/* Progressive scroll-linked details. Unsupported browsers keep the observer
   entrances above; no content or interaction depends on these effects. */
@supports (animation-timeline:view()){
  @media (min-width:861px) and (prefers-reduced-motion:no-preference){
    @keyframes bandParallax{
      from{transform:scale(1.13) translateY(-3.5%)}
      to{transform:scale(1.13) translateY(3.5%)}
    }
    .band-photo .band-bg{
      animation:bandParallax linear both;
      animation-duration:auto;
      animation-timeline:view();
      animation-range:entry 0% exit 100%;
    }
    @keyframes brandEnter{
      from{opacity:.18;transform:translateY(22px) scale(.94)}
      to{opacity:1;transform:none}
    }
    .brands .wrap > *{
      animation:brandEnter linear both;
      animation-duration:auto;
      animation-timeline:view();
      animation-range:entry 0% cover 20%;
    }
    .brands .wrap > *:nth-child(2){animation-range:entry 4% cover 24%}
    .brands .wrap > *:nth-child(3){animation-range:entry 8% cover 28%}
    .brands .wrap > *:nth-child(4){animation-range:entry 12% cover 32%}

  }
}

/* ================= EXPRESSIVE MOTION PASS (08-19) ================= */
/* Motion follows the work: paper feeds, scanners travel, equipment lifts, and
   proof marks draw. It remains progressive enhancement and never carries
   information that is unavailable in the still layout. */
@media (prefers-reduced-motion:no-preference){
  /* Inner-page heroes now arrive with the same intentional cadence as home. */
  @keyframes pageHeroIn{
    from{opacity:0;transform:translate3d(0,22px,0)}
    to{opacity:1;transform:none}
  }
  .js .page-hero .wrap > *{animation:pageHeroIn .64s cubic-bezier(.22,1,.36,1) backwards}
  .js .page-hero .wrap > :nth-child(1){animation-delay:.02s}
  .js .page-hero .wrap > :nth-child(2){animation-delay:.10s}
  .js .page-hero .wrap > :nth-child(3){animation-delay:.18s}
  .js .page-hero .wrap > :nth-child(4){animation-delay:.28s}
  .js .page-hero .wrap > :nth-child(5){animation-delay:.38s}

  /* A faint scanner pass makes the photographic hero feel active without
     competing with its headline or CTA. */
  @keyframes heroScan{
    0%,16%{transform:translate3d(-145%,0,0);opacity:0}
    23%{opacity:.45}
    42%{transform:translate3d(245%,0,0);opacity:0}
    100%{transform:translate3d(245%,0,0);opacity:0}
  }
  .hero.bleed::after{
    content:"";position:absolute;inset:-20% auto -20% -12%;z-index:1;width:18%;
    pointer-events:none;transform:translate3d(-145%,0,0) skewX(-12deg);
    background:linear-gradient(90deg,transparent,rgba(159,232,106,.12),transparent);
    mix-blend-mode:screen;animation:heroScan 10.5s ease-in-out 1.5s infinite;
  }

  /* Proof bars draw after the copy has landed. */
  @keyframes proofBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  .reveal.in .eyebrow::before{
    transform-origin:left center;
    animation:proofBar .5s cubic-bezier(.22,1,.36,1) .12s backwards;
  }

  /* Cross-page navigation behaves like a clean sheet entering the tray. */
  @keyframes sheetOut{to{opacity:0;transform:translateY(-8px)}}
  @keyframes sheetIn{from{opacity:0;transform:translateY(12px)}}
  ::view-transition-old(root){animation:sheetOut .22s ease both}
  ::view-transition-new(root){animation:sheetIn .42s cubic-bezier(.22,1,.36,1) both}
}

@view-transition{navigation:auto}

@media (min-width:721px) and (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  /* Equipment responds like a physical object, while its copy remains stable. */
  .model-card{position:relative;isolation:isolate;overflow:hidden;transition:transform .32s cubic-bezier(.22,1,.36,1),box-shadow .32s ease,border-color .24s ease}
  .model-card:hover{transform:translate(-4px,-6px) rotate(-.18deg);box-shadow:10px 12px 0 var(--paper-lift);border-color:rgba(99,196,39,.68)}
  .model-card:nth-child(even):hover{transform:translate(-4px,-6px) rotate(.18deg)}
  .model-img{position:relative;overflow:hidden;isolation:isolate}
  .model-img img{transition:transform .52s cubic-bezier(.22,1,.36,1),filter .35s ease}
  .model-card:hover .model-img img{transform:translateY(-6px) scale(1.065);filter:drop-shadow(0 13px 12px rgba(33,46,66,.16))}
  .model-img::after{
    content:"";position:absolute;left:8%;right:8%;top:-4px;height:3px;z-index:2;
    background:linear-gradient(90deg,transparent,var(--apex),transparent);
    box-shadow:0 0 14px rgba(99,196,39,.75);opacity:0;transform:translateY(0);
  }
  @keyframes copierScan{
    0%{opacity:0;transform:translateY(0)}
    12%,76%{opacity:.78}
    100%{opacity:0;transform:translateY(158px)}
  }
  .model-card:hover .model-img::after{animation:copierScan .85s cubic-bezier(.22,1,.36,1) both}
  .model-link{transition:transform .28s ease,color .2s ease}
  .model-card:hover .model-link{transform:translateX(6px);color:var(--ink)}

  /* Featured machines and client outcomes gain a deeper photographic response. */
  .prod .imgwrap{overflow:hidden}
  .prod .imgwrap img{transition:transform .5s cubic-bezier(.22,1,.36,1),filter .4s ease}
  .prod:hover .imgwrap img{transform:translateY(-7px) scale(1.045);filter:drop-shadow(0 15px 12px rgba(33,46,66,.16))}
  .vpc .scrim{transition:background .45s ease}
  .vpc .vpc-body{transition:transform .48s cubic-bezier(.22,1,.36,1)}
  html.js .vpc.reveal.in > img{transition:transform .75s cubic-bezier(.22,1,.36,1),filter .45s ease}
  html.js .vpc.reveal.in:hover > img{transform:scale(1.075);filter:saturate(1) contrast(1.08)}
  .vpc:hover .scrim{background:linear-gradient(180deg,rgba(0,0,80,.03) 0%,rgba(0,0,70,.34) 40%,rgba(0,0,55,.96) 100%)}
  .vpc:hover .vpc-body{transform:translateY(-7px)}
  .split-media:not(.contain) img,.frow-media:not(.contain) img,.media-2 figure img{transition:transform .8s cubic-bezier(.22,1,.36,1),filter .45s ease}
  .split-media:not(.contain):hover img,.frow-media:not(.contain):hover img,.media-2 figure:hover img{transform:scale(1.045);filter:saturate(.98) contrast(1.07)}

  /* Primary actions receive a fast green proof-light on deliberate hover. */
  .btn-primary{position:relative;isolation:isolate;overflow:hidden}
  .btn-primary::after{
    content:"";position:absolute;inset:-40% auto -40% -45%;width:24%;pointer-events:none;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.56),transparent);
    transform:skewX(-16deg);transition:transform .55s cubic-bezier(.22,1,.36,1);
  }
  .btn-primary:hover::after{transform:translateX(650%) skewX(-16deg)}
  .brands img{transition:transform .35s cubic-bezier(.22,1,.36,1),filter .3s ease}
  .brands img:hover{transform:translateY(-4px) scale(1.045);filter:saturate(1.1)}
}

@media (prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none!important}
}

/* Keep continuous ambient motion off phones; their short entrance sequence and
   scroll reveals still carry the visual rhythm without spending battery. */
@media (max-width:720px){
  .hero.bleed::after{display:none}
}

/* ================= VISUAL LIFT 2026-08-25 =================
   WordPress nextlevelcopier.com has more people, machines, and first-fold
   life. Keep Apex / paper / sharp / left rail. Do not import WP rounding. */
.hero.bleed .scrim{
  background:linear-gradient(90deg, rgba(16,24,39,.74) 0%, rgba(16,24,39,.42) 48%, rgba(16,24,39,.18) 100%);
}
@media(max-width:720px){
  .hero.bleed .scrim{background:rgba(16,24,39,.64);}
}
/* Keep Jim’s Toshiba-right crop. Livelier first fold comes from the lighter scrim. */
.hero.bleed .hero-bg{object-position:8% 42%;}

.page-hero.dark{
  background-color:var(--navy);
  background-image:
    linear-gradient(90deg, rgba(0,0,102,.86) 0%, rgba(0,0,102,.58) 58%, rgba(0,0,102,.40) 100%),
    url('/assets/photos/office-warm.webp');
  background-size:auto, cover;
  background-position:0 0, center 42%;
  background-repeat:no-repeat;
}
.page-hero:not(.dark){
  background-image:
    var(--texture-image, none),
    linear-gradient(180deg, rgba(255,255,255,.78) 0%, rgba(241,245,249,.88) 100%),
    url('/assets/photos/office-corridor.webp');
  background-size:var(--texture-size, auto), auto, cover;
  background-position:0 0, 0 0, center 46%;
  background-repeat:no-repeat;
}
.hero.pn-hero[data-texture]{
  background-image:
    var(--texture-image),
    linear-gradient(180deg, rgba(255,255,255,.72) 0%, rgba(241,245,249,.86) 100%),
    url('/assets/photos/office-warm.webp');
  background-size:var(--texture-size), auto, cover;
  background-position:0 0, 0 0, 70% 40%;
}

.shop-rail{border-bottom:1px solid var(--hair); background:#fff;}
.shop-rail-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; padding-top:22px; padding-bottom:22px;}
.shop-rail figure{margin:0; position:relative; overflow:hidden; border:1px solid var(--hair); box-shadow:3px 3px 0 var(--paper-edge); background:var(--mist);}
.shop-rail img{
  width:100%; height:168px; object-fit:cover; display:block;
  filter:saturate(.86) contrast(1.05);
}
.shop-rail figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:12px 12px 10px;
  background:linear-gradient(transparent, rgba(16,24,39,.88));
  color:#fff; font-size:12px; font-weight:700; letter-spacing:.2px; z-index:2;
}
@media(max-width:820px){
  .shop-rail-grid{grid-template-columns:1fr 1fr; gap:10px;}
  .shop-rail img{height:140px;}
}

.dealer-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:36px;}
.dealer-card{display:block; background:#fff; border:1px solid var(--hair); box-shadow:3px 3px 0 var(--paper-edge); padding:18px 18px 20px; color:var(--ink)!important; transition:transform .18s ease, box-shadow .18s ease;}
.dealer-card:hover{transform:translate(-2px,-2px); box-shadow:7px 7px 0 var(--paper-lift); color:var(--ink)!important;}
.dealer-card .imgwrap{height:200px; display:flex; align-items:center; justify-content:center; background:var(--mist); border:1px solid var(--hair); margin-bottom:14px;}
.dealer-card .imgwrap img{max-height:176px; max-width:92%; width:auto; object-fit:contain;}
.dealer-card .brand{font-size:11px; font-weight:800; letter-spacing:1.2px; text-transform:uppercase; color:var(--apex-text); margin-bottom:6px;}
.dealer-card h3{font-size:18px; margin-bottom:6px;}
.dealer-card p{font-size:13.5px; color:var(--slate); margin:0;}
@media(max-width:820px){ .dealer-grid{grid-template-columns:1fr;} }

.media-3{display:grid; grid-template-columns:1.15fr .85fr .85fr; gap:14px;}
.media-3 figure{margin:0; position:relative; overflow:hidden; border:1px solid var(--hair); box-shadow:3px 3px 0 var(--paper-edge);}
.media-3 img{width:100%; height:100%; object-fit:cover; display:block; aspect-ratio:4/3; filter:saturate(.86) contrast(1.05);}
.media-3 figcaption{position:absolute; left:0; right:0; bottom:0; padding:12px 14px 10px; background:linear-gradient(transparent, rgba(0,0,45,.88)); color:#fff; font-size:12px; font-weight:600; z-index:2;}
#who .grid{grid-template-columns:1fr; max-width:62ch;}
.media-3 figure::before, .shop-rail figure::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:rgba(0,0,102,.05); mix-blend-mode:multiply;
}
.split .media-3{grid-template-columns:1fr; align-content:start;}
.who .grid + .media-3{margin-top:36px;}
@media(max-width:820px){ .media-3{grid-template-columns:1fr;} }
.who .media-3 figure{border-color:rgba(255,255,255,.16); box-shadow:none;}

.tcard{align-items:stretch;}
.trust-cards{display:grid; gap:14px;}
.card, .prod, .ind, .vcard{box-shadow:3px 3px 0 var(--paper-edge);}
.card:hover, .prod:hover, .ind:hover, .vcard:hover{transform:translate(-2px,-2px); box-shadow:7px 7px 0 var(--paper-lift);}

/* ================= VISUAL LIFT PASS 2 2026-08-26 =================
   First pass still read as the same site. Scale photos, lead PN with
   Jim’s destination copy, keep paper / sharp / left rail. */
.hero.bleed .wrap{padding-top:clamp(88px,11vw,148px); padding-bottom:clamp(88px,11vw,140px);}
.hero.bleed h1{font-size:clamp(42px,6.2vw,72px);}
.brands .wrap{padding-top:16px; padding-bottom:16px; gap:36px;}

.shop-rail-bleed{border-bottom:0;}
.shop-rail-bleed .shop-rail-grid{
  max-width:none; padding:0; gap:3px;
  grid-template-columns:repeat(4,1fr);
}
.shop-rail-bleed figure{border:0; box-shadow:none;}
.shop-rail-bleed img{height:min(28vw, 260px);}
.shop-rail-bleed figcaption{font-size:13px; padding:16px 16px 14px;}
@media(max-width:820px){
  .shop-rail-bleed .shop-rail-grid{grid-template-columns:1fr 1fr; gap:3px;}
  .shop-rail-bleed img{height:42vw;}
}

.home-pn{
  background:
    var(--texture-image, none),
    linear-gradient(180deg, rgba(255,255,255,.70) 0%, rgba(241,245,249,.82) 100%),
    url('/assets/photos/office-warm.webp');
  background-size:var(--texture-size, auto), auto, cover;
  background-position:0 0, 0 0, 70% 40%;
}
.pn-steps-row{margin-top:28px; grid-template-columns:repeat(3,1fr); gap:14px;}
@media(max-width:820px){ .pn-steps-row{grid-template-columns:1fr;} }

.page-hero:not(.dark){
  background-image:
    var(--texture-image, none),
    linear-gradient(180deg, rgba(255,255,255,.62) 0%, rgba(241,245,249,.78) 100%),
    url('/assets/photos/office-corridor.webp');
}
.hero.pn-hero[data-texture]{
  background-image:
    var(--texture-image),
    linear-gradient(180deg, rgba(255,255,255,.58) 0%, rgba(241,245,249,.76) 100%),
    url('/assets/photos/office-warm.webp');
}

.dealer-card .imgwrap{height:240px;}
.dealer-card .imgwrap img{max-height:214px;}
.who .media-3 img{aspect-ratio:5/4;}

/* ================= COMMENT PASS 2026-08-26 =================
   Cody’s toolbar pins: fill open space, let copy run across the
   rail, take washed “watermark” photos off heroes, put a real
   photo on the pages that asked for one, and use the live-site
   service map. Apex / paper / sharp / left rail stay. */
section.block{padding:clamp(28px,3.4vw,48px) 0;}
.cards3{margin-top:28px;}
.page-hero{padding:clamp(32px,4.2vw,52px) 0;}
.page-hero + section.block{padding-top:clamp(22px,3vw,36px);}

.maxc{max-width:none;}
.lead{max-width:none;}
.page-hero h1{max-width:28ch;}
.page-hero .lead{max-width:none;}
.prose p, .block p{max-width:none;}
.final{text-align:left;}
.final h2,.final p{max-width:none; margin-left:0; margin-right:0;}
.final .wrap.maxc,.wrap.maxc{max-width:var(--maxw);}
.final .hero-cta{justify-content:flex-start;}
.guar .strap{text-align:left; margin-top:28px;}

.thesis{grid-template-columns:1.35fr .75fr; gap:28px; align-items:stretch;}
#why .lead, #why p{max-width:none;}

.who-across{display:grid; grid-template-columns:1fr; gap:28px;}
#who .grid{max-width:none; grid-template-columns:1fr;}

/* Remove the washed office overlays that read as watermarks. */
.page-hero:not(.dark){
  background-image:var(--texture-image, none);
  background-size:var(--texture-size, auto);
  background-position:0 0;
  background-repeat:no-repeat;
}
.page-hero.dark{
  background-color:var(--navy);
  background-image:none;
}
.hero.pn-hero[data-texture],
.hero.pn-hero{
  background-image:none;
  background-color:#000066;
}
.home-pn{
  background-image:var(--texture-image, none);
  background-size:var(--texture-size, auto);
  background-position:0 0;
}

.page-hero.has-photo,
.hero.has-photo{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.page-hero.has-photo .page-hero-bg,
.hero.has-photo .page-hero-bg{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:0; filter:saturate(.86) contrast(1.05);
}
.page-hero.has-photo .page-hero-scrim,
.hero.has-photo .page-hero-scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(90deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.78) 46%, rgba(255,255,255,.28) 100%);
}
.page-hero.has-photo.dark .page-hero-scrim{
  background:linear-gradient(90deg, rgba(0,0,102,.92) 0%, rgba(0,0,102,.62) 52%, rgba(0,0,102,.28) 100%);
}
.page-hero.has-photo .wrap,
.hero.has-photo .wrap{position:relative; z-index:2;}
.page-hero.has-photo{min-height:320px;}

.area-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:28px; align-items:stretch;}
.area-grid .map{border:1px solid var(--hair); box-shadow:3px 3px 0 var(--paper-edge);}
.service-map{width:100%; height:min(560px,70vw); min-height:380px; background:var(--mist);}
.mapboxgl-popup-content{
  background:#fff; color:var(--ink); border:1px solid var(--hair);
  box-shadow:3px 3px 0 var(--paper-edge); padding:6px 10px;
  font-size:13px; font-weight:700; border-radius:0;
}
.mapboxgl-popup-tip{border-top-color:#fff;}

/* ================= COMMENT PASS 2026-08-26 B =================
   Four new pins from Cody on the visual-lift preview:
   1) homepage hero: all four CTAs on one row
   2) Print Navigator hero: navy wash on the photo (no copy box)
   3) footer legal line: one line (Privacy/Terms were display:block)
   4) services hero: unique storefront/van photo, not a reused hero */
.hero.bleed .hero-actions{
  display:flex;
  flex-wrap:nowrap;
  max-width:none;
  gap:10px;
}
.hero.bleed .hero-actions .btn{
  flex:0 0 auto;
  white-space:nowrap;
  padding:12px 14px;
}
@media(max-width:860px){
  .hero.bleed .hero-actions{flex-wrap:wrap;}
}
@media(max-width:720px){
  .hero.bleed .hero-actions{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); width:100%;}
  .hero.bleed .hero-actions .btn{white-space:nowrap; justify-content:center;}
}

.hero.pn-hero .wrap{
  grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);
  gap:clamp(28px,4.5vw,64px);
  align-items:center;
  padding-top:clamp(52px,7vw,88px);
  padding-bottom:clamp(52px,7vw,88px);
}
.hero.pn-hero h1{color:#fff; max-width:16ch;}
.hero.pn-hero .sub{color:rgba(255,255,255,.90); max-width:42ch;}
.hero.pn-hero .trust{border-top-color:rgba(255,255,255,.22);}
.hero.pn-hero .trust span{color:rgba(255,255,255,.88);}
.hero.pn-hero .trust b{color:var(--apex);}
.hero.pn-hero .btn-ghost{color:#fff; border-color:rgba(255,255,255,.45); background:rgba(0,0,40,.22);}
.hero.pn-hero .btn-ghost:hover{border-color:var(--apex); color:#9fe86a;}
.pn-hero-evidence{
  background:#fff;
  border:1px solid var(--hair);
  box-shadow:4px 4px 0 rgba(0,0,0,.35);
  color:var(--ink);
}
.pn-ev-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:16px 22px;
  background:var(--navy);
  color:#fff;
}
.pn-ev-head .t{font-family:var(--font-display); font-size:15px; letter-spacing:.4px;}
.pn-ev-head .tag{font-size:11px; letter-spacing:1.4px; text-transform:uppercase; color:var(--apex); font-weight:800;}
.pn-ev-compare{display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:22px 22px 0;}
.pn-ev-col{background:var(--mist); padding:16px 14px;}
.pn-ev-col.win{background:rgba(99,196,39,.13);}
.pn-ev-col .k{font-size:11px; font-weight:800; letter-spacing:1px; text-transform:uppercase; color:var(--slate);}
.pn-ev-col .v{font-family:var(--font-display); font-size:clamp(28px,3.4vw,40px); line-height:1; margin-top:8px; font-variant-numeric:tabular-nums;}
.pn-ev-col .v span{font-family:var(--font-body); font-size:13px; color:var(--slate); margin-left:4px;}
.pn-ev-col.win .v{color:var(--apex-text);}
.pn-ev-save{margin:16px 22px 0; padding:14px 16px; background:rgba(99,196,39,.13); font-weight:800; line-height:1.4;}
.pn-ev-note{margin:14px 22px 20px; color:var(--slate); font-size:12px; line-height:1.55;}
@media(max-width:860px){
  .hero.pn-hero .wrap{grid-template-columns:1fr; gap:28px;}
  .hero.pn-hero h1{max-width:none;}
  .pn-hero-evidence{max-width:560px;}
}
@media(max-width:420px){
  .pn-ev-compare{grid-template-columns:1fr;}
}

.foot-bottom{
  flex-wrap:nowrap;
  align-items:baseline;
  gap:18px;
  white-space:nowrap;
}
.foot-bottom a{
  display:inline;
  margin:0;
  color:inherit;
}
.foot-bottom a:hover{color:var(--apex);}
@media(max-width:720px){
  .foot-bottom{flex-wrap:wrap; white-space:normal;}
  .foot-bottom span{white-space:normal;}
}

/* ================= REFINE PASS 2026-08-26 D =================
   Busy-page hierarchy, Vercel checklist (contact photo + lease
   form box), Victory hook, featured Service band, photo crops,
   and responsive fit. Homepage hero / map / #who stay put. */

/* Victory Reports — first card is the visual hook */
.vpc-feature{
  grid-column:1 / span 2;
  min-height:520px;
}
.vpc-feature .vpc-body{padding:34px 32px;}
.vpc-feature .cat{margin-bottom:16px;}
.vpc-feature .big{font-size:clamp(52px,6.4vw,80px);}
.vpc-feature .win{font-size:clamp(22px,2.6vw,30px); margin:14px 0 8px;}
.vpc-feature .who{font-size:15px; max-width:36ch;}
.vpc-feature .scrim{
  background:linear-gradient(180deg, rgba(0,0,80,.06) 0%, rgba(0,0,70,.38) 38%, rgba(0,0,55,.94) 100%);
}
.vpc-feature > img{object-position:50% 42%;}
@media(max-width:820px){
  .vpc-feature{grid-column:auto; min-height:420px;}
}

/* Service & Maintenance — larger, centered band */
.svc-band{
  padding:clamp(40px,5.4vw,80px) 0;
}
.svc-feature{
  width:100%;
  margin:0 auto;
  padding:clamp(28px,4vw,52px);
  background:#fff;
  border:1px solid var(--hair);
  box-shadow:4px 4px 0 var(--paper-edge);
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(24px,4vw,48px);
  border-top:0;
}
.svc-feature h2{font-size:clamp(28px,3.4vw,42px);}
.svc-feature .frow-media{min-height:360px;}
.svc-feature .frow-media img{
  aspect-ratio:1 / 1;
  height:100%;
  object-fit:cover;
  object-position:58% 22%;
}
@media(max-width:860px){
  .svc-feature{width:100%; padding:24px 20px;}
  .svc-feature .frow-media{min-height:0;}
}

/* Contact — team photo larger and centered on the page */
.contact-team{
  display:flex;
  flex-direction:column;
  align-items:center;
  margin:48px auto 0;
  max-width:none;
}
.contact-team img{
  display:block;
  width:100%;
  aspect-ratio:16 / 9;
  object-fit:cover;
  object-position:50% 32%;
  border:1px solid var(--hair);
  box-shadow:4px 4px 0 var(--paper-edge);
  filter:saturate(.86) contrast(1.05);
}
.contact-team figcaption{
  width:100%;
  margin-top:12px;
  font-size:13.5px;
  color:var(--slate);
  text-align:left;
}
@media(max-width:720px){
  .contact-team{margin-top:32px;}
  .contact-team img{aspect-ratio:4 / 3; object-position:50% 28%;}
}

/* Lease review — one paper box around form + aside */
.lease-form-block{padding-top:clamp(18px,2.6vw,28px);}
.form-sheet{
  background:#fff;
  border:1px solid var(--line);
  box-shadow:4px 4px 0 var(--paper-edge);
  padding:clamp(22px,3.2vw,40px);
  gap:clamp(24px,3vw,40px);
  align-items:stretch;
}
.form-sheet .lead-form{
  box-shadow:none;
  border:0;
  padding:0;
}
.form-sheet .info-card{height:100%;}
@media(max-width:860px){
  .form-sheet{padding:20px 16px;}
}

/* Photo crop consistency + map / rail fit */
.vpc > img{object-fit:cover;}
.media-2 figure img,
.split-media:not(.contain) img{
  object-fit:cover;
}
.service-map{min-height:380px;}
@media(max-width:820px){
  .service-map{height:min(420px,78vw); min-height:280px;}
  .area-grid{grid-template-columns:1fr; gap:20px;}
  .shop-rail-bleed img{height:min(46vw,220px); object-fit:cover;}
}
@media(max-width:560px){
  .service-map{height:280px; min-height:240px;}
  .action-rail{left:8px; right:8px;}
  .vpc,.vpc-feature{min-height:320px;}
}

/* Print Navigator — air between stacked white sections */
.pn-hero + .block{padding-top:clamp(36px,5vw,56px);}
.hero.pn-hero .hero-cta .btn-primary{min-width:min(100%, 280px);}
.shop-rail-square img{
  height:auto;
  aspect-ratio:5 / 4;
  object-fit:cover;
}
@media(max-width:820px){
  .shop-rail-square img{aspect-ratio:1 / 1; height:auto;}
}

/* ================= COMMENT PASS 2026-09-02 =================
   Cost of Loyalty / Victory / Print Navigator / leftover
   whitespace on #why, #areas, #lease-review only. Soft corners
   stay. Do not shrink the homepage hero photo. */
:root{--soft:8px;}
#cost-of-loyalty{scroll-margin-top:92px;}

/* Homepage hero: wide, fixed photo band — do not shrink */
.hero.bleed{
  min-height:520px;
}
.hero.bleed .hero-bg{
  object-fit:cover;
  object-position:8% 42%;
  width:100%;
  height:100%;
  min-height:520px;
}
.hero.bleed .wrap{
  min-height:520px;
  display:flex;
  align-items:center;
  padding-top:clamp(88px,10vw,132px);
  padding-bottom:clamp(72px,9vw,112px);
}
.hero.bleed h1{max-width:18ch;}
.hero.bleed .sub{max-width:36ch; margin-bottom:20px;}
.hero-loyalty-cta{margin:0 0 18px;}
.hero.bleed .hero-actions{
  display:flex;
  flex-wrap:nowrap;
  max-width:none;
  gap:10px;
}
@media(max-width:860px){
  .hero.bleed,
  .hero.bleed .hero-bg,
  .hero.bleed .wrap{min-height:0;}
  .hero.bleed .hero-actions{flex-wrap:wrap;}
}

/* Leftover visual-lift air on #why / #areas / homepage #lease-review.
   #who stays put (already tightened on delta). */
#why.block{padding-top:clamp(22px,3vw,36px); padding-bottom:clamp(22px,3vw,36px);}
#why .thesis{gap:22px;}
#areas.block{padding-top:clamp(22px,3vw,36px); padding-bottom:clamp(22px,3vw,36px);}
#lease-review.final{padding-top:clamp(28px,3.6vw,44px); padding-bottom:clamp(28px,3.6vw,44px);}

/* About hero: keep Jim's van in frame (photo is 3:2, van sits low) */
.about-hero{
  min-height:460px;
}
.about-hero .page-hero-bg{
  object-fit:cover;
  object-position:32% 82%;
}
.page-hero.has-photo.dark.about-hero .page-hero-scrim{
  background:linear-gradient(90deg, rgba(16,24,39,.82) 0%, rgba(16,24,39,.55) 50%, rgba(16,24,39,.32) 100%);
}
.about-hero .wrap{
  min-height:420px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
@media(max-width:720px){
  .about-hero,.about-hero .wrap{min-height:280px;}
  .about-hero .page-hero-bg{object-position:88% 82%;}
}

/* About — Cost of Loyalty */
.loyalty{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);
  gap:clamp(22px,3vw,40px);
  align-items:start;
}
.loyalty-points{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:12px;
}
.loyalty-points li{
  background:#fff;
  border:1px solid var(--hair);
  border-radius:var(--soft);
  box-shadow:3px 3px 0 var(--paper-edge);
  padding:16px 18px;
}
.loyalty-points b{display:block; color:var(--ink); margin-bottom:4px;}
.loyalty-points span{color:var(--slate); font-size:14.5px;}
.loyalty-cta{
  background:var(--navy);
  color:#fff;
  border-radius:var(--soft);
  padding:28px 26px;
}
.loyalty-cta h3{color:#fff; font-size:clamp(22px,2.6vw,28px); margin-bottom:10px;}
.loyalty-cta p{color:rgba(255,255,255,.86);}
.loyalty-cta .hero-cta{margin-top:18px;}
@media(max-width:820px){ .loyalty{grid-template-columns:1fr;} }

/* Victory Reports — label up, story first, CTA on the card */
.vr-photo{align-items:stretch;}
.vpc{
  border-radius:var(--soft);
  min-height:420px;
  justify-content:flex-end;
}
.vpc .cat{
  position:absolute;
  top:18px;
  left:22px;
  z-index:3;
  margin:0;
  padding:6px 10px;
  background:rgba(16,24,39,.72);
  border-radius:var(--soft);
}
.vpc .vpc-body{padding:26px 24px 22px;}
.vpc .vpc-lead{
  font-family:var(--font-display);
  font-size:clamp(22px,2.6vw,30px);
  line-height:1.12;
  color:#fff;
  letter-spacing:.2px;
  margin:0 0 8px;
}
.vpc .vpc-lead b{color:var(--apex);}
.vpc .who{margin-bottom:16px;}
.vpc-cta{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:13.5px;
  font-weight:800;
  color:var(--ink);
  background:var(--apex);
  border-radius:var(--soft);
  padding:10px 14px;
}
.vpc:hover .vpc-cta{transform:translateX(2px);}
.vpc-feature{grid-column:1 / -1; min-height:480px;}
.vpc-feature .vpc-lead{font-size:clamp(28px,3.6vw,40px);}
@media(max-width:820px){
  .vpc,.vpc-feature{min-height:360px; grid-column:auto;}
}

/* Print Navigator — three assessment categories + sample shell */
.pn-cats{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-top:32px;}
.pn-cat{
  background:#fff;
  border:1px solid var(--hair);
  border-radius:var(--soft);
  box-shadow:3px 3px 0 var(--paper-edge);
  padding:24px 22px;
}
.pn-cat .n{
  font-family:var(--font-display);
  width:40px; height:40px;
  display:flex; align-items:center; justify-content:center;
  background:var(--apex); color:var(--ink);
  border-radius:var(--soft);
  margin-bottom:14px;
}
.pn-cat h3{font-size:20px; margin-bottom:8px;}
.pn-cat p{color:var(--slate); font-size:14.5px; margin:0;}
@media(max-width:820px){ .pn-cats{grid-template-columns:1fr;} }

.pn-sample-shell{
  background:#0b1220;
  color:#fff;
  border-radius:var(--soft);
  overflow:hidden;
  box-shadow:4px 4px 0 rgba(0,0,0,.28);
}
.pn-sample-chrome{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 16px;
  background:#111827;
  border-bottom:1px solid rgba(255,255,255,.08);
  font-size:12px; font-weight:800; letter-spacing:.8px; text-transform:uppercase;
}
.pn-sample-chrome .tag{color:var(--apex);}
.pn-sample-page{
  position:relative;
  background:#fff;
  color:var(--ink);
  margin:18px;
  border-radius:var(--soft);
  padding:28px 26px 22px;
}
.pn-sample-page::before{
  content:"SAMPLE · ILLUSTRATIVE";
  position:absolute; inset:auto 18px 18px auto;
  font-size:11px; font-weight:800; letter-spacing:1.4px;
  color:rgba(33,46,66,.35);
}
.pn-sample-banner{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  margin:0 0 22px; padding:12px 14px;
  background:rgba(246,182,0,.16);
  border:1px solid rgba(148,107,0,.28);
  border-radius:var(--soft);
  color:#6b4e00; font-size:13.5px; font-weight:700;
}

/* Contact photo — larger, centered */
.contact-team{
  display:flex;
  flex-direction:column;
  align-items:center;
  margin:40px auto 0;
  max-width:min(1080px,100%);
}
.contact-team img{
  width:100%;
  min-height:420px;
  aspect-ratio:16 / 8;
  object-fit:cover;
  object-position:50% 28%;
  border-radius:var(--soft);
}
@media(max-width:720px){
  .contact-team img{min-height:0; aspect-ratio:4 / 3;}
}

/* Lease review — less open space, form box pulled up */
body:has(.lease-form-block) .page-hero{padding:clamp(22px,3vw,36px) 0 12px;}
.lease-form-block{padding-top:8px; padding-bottom:clamp(28px,4vw,48px);}
.form-sheet{border-radius:var(--soft);}

/* Footer: one clean legal line on desktop */
.foot-bottom{
  display:block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:12px;
}
.foot-bottom span + span::before{content:" · ";}
@media(max-width:820px){
  .foot-bottom{white-space:normal; overflow:visible;}
  .foot-bottom span{display:block;}
  .foot-bottom span + span::before{content:none;}
}

/* ================= MOBILE FIX PASS 2026-09-02 =================
   390×844 audit on PR #15. Later visual-lift rules had put
   thesis back to two columns and capped the home H1 at 18ch.
   Soft corners stay. No new copy. */
@media(max-width:640px){
  html{overflow-x:clip;}
  .page{overflow-x:clip; padding-bottom:calc(96px + env(safe-area-inset-bottom,0px));}
  html{scroll-padding-bottom:calc(96px + env(safe-area-inset-bottom,0px));}

  /* 1) Advisor vs Vendor + Jim quote: one column, nothing clipped */
  .thesis{
    grid-template-columns:minmax(0,1fr);
    gap:20px;
    align-items:stretch;
  }
  .thesis .quote{
    min-width:0;
    max-width:100%;
    padding:22px 18px;
    overflow:visible;
  }
  .thesis .quote p{
    max-width:100%;
    overflow-wrap:anywhere;
    word-break:normal;
    font-size:clamp(20px,5.8vw,24px);
  }

  /* 2) Home hero: H1 + loyalty sub-line stay inside 390px */
  .hero.bleed,
  .hero.bleed .wrap,
  .hero.bleed .hero-bg{min-height:0;}
  .hero.bleed .wrap{
    min-width:0;
    width:100%;
    display:block;
    padding-top:clamp(56px,14vw,80px);
    padding-bottom:clamp(28px,8vw,48px);
  }
  .hero.bleed h1{
    max-width:100%;
    width:100%;
    font-size:clamp(26px,7.6vw,34px);
    text-wrap:pretty;
    overflow-wrap:anywhere;
  }
  .hero.bleed .sub{
    max-width:100%;
    margin-bottom:16px;
    overflow-wrap:anywhere;
  }
  .hero-loyalty-cta .btn{max-width:100%; white-space:normal;}

  /* 8) Four CTAs: 2×2, right column cannot overflow */
  .hero.bleed .hero-actions{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    width:100%;
    max-width:100%;
    gap:8px;
    flex-wrap:unset;
  }
  .hero.bleed .hero-actions .btn{
    min-width:0;
    width:100%;
    flex:unset;
    white-space:normal;
    justify-content:center;
    padding:12px 8px;
    font-size:12.5px;
  }

  /* 3) About van hero: stronger scrim, keep text off the sign */
  .about-hero,
  .about-hero .wrap{min-height:300px;}
  .about-hero .page-hero-bg{object-position:100% 85%;}
  .page-hero.has-photo.dark.about-hero .page-hero-scrim{
    background:rgba(16,24,39,.92);
  }
  .about-hero h1,
  .about-hero .lead{max-width:20ch; text-shadow:0 2px 16px rgba(16,24,39,.55);}

  /* 5) Stronger photo-hero scrims (Victory, Services, Model Directory) */
  .page-hero.has-photo:not(.dark) .page-hero-scrim{
    background:linear-gradient(180deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.92) 62%, rgba(255,255,255,.78) 100%);
  }
  .vpc .scrim,
  .vpc-feature .scrim{
    background:linear-gradient(180deg, rgba(0,0,40,.42) 0%, rgba(0,0,40,.68) 38%, rgba(0,0,30,.96) 100%);
  }

  /* 7) Services: close the empty air after the Print Navigator CTA */
  .pn{
    grid-template-columns:minmax(0,1fr);
    gap:18px;
    align-items:stretch;
  }
  .pn-section-wordmark{width:min(220px,72vw); margin-bottom:10px;}
  .pn .hero-cta{margin-bottom:0;}

  /* 4) Sample fleet table: stacked rows so COST/MO is reachable */
  .pn-sample-shell{overflow:visible;}
  .pn-sample-page{
    margin:12px;
    padding:16px 12px 18px;
    overflow:visible;
  }
  .pn-sample-page .report-preview,
  .pn-sample-shell .report-preview{
    overflow:visible;
  }
  .pn-sample-page table.rp thead{display:none;}
  .pn-sample-page table.rp,
  .pn-sample-page table.rp tbody{
    display:block;
    width:100%;
    min-width:0;
  }
  .pn-sample-page table.rp tr{
    display:block;
    margin:0 0 12px;
    padding:12px 12px 8px;
    border:1px solid var(--line);
    background:var(--mist);
  }
  .pn-sample-page table.rp td{
    display:flex;
    justify-content:space-between;
    gap:12px;
    width:100%;
    min-width:0;
    padding:6px 0;
    text-align:right;
    border-bottom:1px solid var(--line);
  }
  .pn-sample-page table.rp td:last-child{border-bottom:0;}
  .pn-sample-page table.rp td.dev{
    font-size:15px;
    text-align:left;
    justify-content:flex-start;
    padding-bottom:10px;
    margin-bottom:4px;
    border-bottom:2px solid var(--line);
  }
  .pn-sample-page table.rp td.num::before{
    content:attr(data-label);
    font-size:10.5px;
    font-weight:800;
    letter-spacing:.8px;
    text-transform:uppercase;
    color:var(--slate);
    text-align:left;
  }
}

@media(max-width:860px){
  .page{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px));}
}

/* ================= REFINEMENT PASS 2026-09-21 =================
   Hierarchy and rhythm pass on the locked paper world: Apex green stays
   punctuation, corners stay sharp, hard offset shadows stay, one left rail.
   No copy, markup, field, or lead-pipeline changes. */

/* The transparent header sits over the homepage hero, and the section label
   started at y96 while the logo row ran to y115 — the label was inside the
   header band on phones and close to it on tablets. */
@media(max-width:900px){
  .hero.bleed .wrap{padding-top:clamp(112px,13vw,148px);}
}
@media(max-width:640px){
  .hero.bleed .wrap{padding-top:clamp(104px,27vw,132px);}
}

/* Hero headline: 72px inside a 720px column broke the sentence into five
   short lines. A smaller display step reads as three or four whole phrases
   and leaves the sub-line and the primary button room to register. */
.hero.bleed h1{font-size:clamp(34px,4.3vw,56px); letter-spacing:-.004em; max-width:22ch;}
.hero.bleed .sub{font-size:clamp(17px,1.6vw,19px); max-width:44ch; margin-bottom:22px;}
@media(max-width:640px){
  .hero.bleed h1{font-size:clamp(27px,7.6vw,34px);}
}

/* One green stamp leads; the four utility actions read as a quiet row under a
   hairline instead of four boxes competing with it. Same links, same order. */
.hero.bleed .hero-actions{
  margin-top:20px; padding-top:16px; gap:4px 24px;
  border-top:1px solid rgba(255,255,255,.22);
}
.hero.bleed .hero-actions .btn{
  background:transparent; border-color:transparent;
  color:rgba(255,255,255,.9); font-size:13.5px; font-weight:700;
  padding:12px 0; min-height:44px;
}
.hero.bleed .hero-actions .btn:hover{color:#fff; border-color:transparent;}
.hero.bleed .hero-actions .btn > span:last-child{
  text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:5px;
  text-decoration-color:rgba(255,255,255,.4);
}
.hero.bleed .hero-actions .btn:hover > span:last-child{text-decoration-color:var(--apex);}
@media(max-width:720px){
  .hero.bleed .hero-actions{
    gap:0; padding-top:8px; column-gap:18px;
  }
  .hero.bleed .hero-actions .btn{
    justify-content:flex-start; padding:13px 0; font-size:13px; min-height:46px;
    border-bottom:1px solid rgba(255,255,255,.16);
  }
  /* the trust row supplies the closing hairline */
  .hero.bleed .hero-actions .btn:nth-last-child(-n+2){border-bottom:0;}
}

/* Section labels: the heading is the voice of the section. The label keeps its
   green tick as punctuation and sits tight to the heading it introduces. */
.eyebrow{color:var(--slate); font-size:11.5px; letter-spacing:2.1px; gap:10px; margin-bottom:10px;}
.eyebrow::before{width:20px; height:3px;}
.eyebrow.on-dark,
.hero.bleed .eyebrow,
.who .eyebrow,
.page-hero.dark .eyebrow{color:rgba(255,255,255,.78);}
.frow .kicker{color:var(--slate);}
.rule{width:44px; height:4px; margin:14px 0 18px;}

/* Two deliberate heading steps: full-width section headings stay large, and
   headings inside a text column drop a step so they stop breaking mid-phrase. */
.thesis h2, .pn h2, .split h2, .who-across h2, .trust-grid h2, .area-grid h2{
  font-size:clamp(27px,3.1vw,38px); letter-spacing:-.003em;
}
/* The across-the-page navy block ran its paragraphs the full 1240px. */
.who-across p{max-width:70ch;}

/* Page-hero intro copy had no measure, so it ran past 100 characters a line
   and crossed into the lighter end of the photo scrim. */
.page-hero .lead{max-width:66ch;}
@media(min-width:861px){
  .page-hero.has-photo.dark.about-hero .page-hero-scrim{
    background:linear-gradient(90deg, rgba(0,0,102,.94) 0%, rgba(0,0,102,.74) 52%, rgba(0,0,102,.34) 100%);
  }
}

/* Industries were the third identical icon-card wall on the homepage. As a
   grouped index on the section surface they read as a list of who we serve,
   and the services row stays the one card set. */
.ind-grid{gap:2px 36px; margin-top:30px;}
.ind{
  background:transparent; border:0; border-top:1px solid var(--hair);
  box-shadow:none !important; padding:18px 16px 20px 0;
}
.block.mist .ind{background:transparent;}
.ind:hover{transform:none; box-shadow:none !important;}
.ind:hover h3{color:var(--apex-text);}
.ind .ic{color:var(--slate); margin-bottom:10px;}
.ind h3{font-size:18px;}
@media(max-width:820px){
  .ind{padding:16px 0 18px;}
}

/* The guarantee reads as one promise in three parts, not three more cards. */
.guar .cards3{gap:0 36px; margin-top:28px;}
.guar .card.gcard{
  background:transparent; border:0; border-top:2px solid var(--apex);
  box-shadow:none !important; padding:18px 16px 0 0;
}
.guar .card.gcard:hover{transform:none; box-shadow:none !important;}
.guar .card.gcard::after{display:none;}
.gcard .ic{background:transparent; width:auto; height:auto; justify-content:flex-start; margin-bottom:12px;}
@media(max-width:820px){
  .guar .cards3{gap:0;}
  .guar .card.gcard{padding:16px 0 0;}
}

/* Left rail, same as every other row on the page. */
.brands .wrap{justify-content:flex-start; gap:20px 36px;}

/* Consecutive same-tone sections get a hairline so the groups stay legible
   after the density pass tightened their padding. */
.block.mist + .block.mist{border-top:1px solid var(--hair);}

/* The featured render sat in a frame two thirds empty. */
@media(min-width:861px){
  .split-media.contain{min-height:372px; padding:22px;}
  .split-media.contain img{max-height:328px;}
}

/* Browser surfaces ship with the design: selection, caret, control accent and
   scrollbar come from the brand palette rather than the UA default. */
::selection{background:var(--apex); color:var(--ink);}
html{scrollbar-color:#aeb8c6 var(--mist);}
.page{caret-color:var(--apex-text);}
input,select,textarea{accent-color:var(--apex);}

/* ---- Preserved nextlevelbsi.com pages -------------------------------------
   The legacy .php routes keep their own content (gallery, reviews, tutorials,
   older model sheets, brand and area catalogs) inside the current shell. These
   rules only cover the document primitives those pages need — figures, model
   tables, and pull quotes — in the same sharp-cornered, left-aligned system. */
.legacy-doc h2{font-family:var(--font-display); font-size:clamp(24px,3vw,34px); line-height:1.12; letter-spacing:.2px; margin:46px 0 14px;}
.legacy-doc h3{font-size:clamp(17px,1.7vw,20px); font-weight:800; letter-spacing:.2px; margin:34px 0 10px;}
.legacy-doc h4{font-size:16px; font-weight:800; margin:26px 0 8px;}
.legacy-doc > *:first-child{margin-top:0;}
.legacy-doc p{font-size:16.5px; line-height:1.68; color:var(--slate); max-width:74ch; margin:0 0 16px;}
.legacy-doc .checks{margin:0 0 22px;}
.legacy-doc .aside{background:var(--mist); border-left:4px solid var(--apex); padding:18px 22px; margin:28px 0 0; font-size:15.5px;}

.lg-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin:26px 0 30px;}
.lg-fig{margin:0; background:var(--paper); border:1px solid var(--hair);}
.lg-fig img{display:block; width:100%; height:210px; object-fit:cover;}
.lg-fig figcaption{padding:12px 14px; font-size:13px; font-weight:700; line-height:1.4; color:var(--ink);}
.lg-fig:empty{display:none;}
.lg-video{display:block; position:relative;}
.lg-play{position:absolute; inset:auto auto 12px 12px; display:grid; place-items:center; width:40px; height:40px;
  background:var(--apex); color:var(--ink); font-size:14px; padding-left:2px;}
.lg-video:hover .lg-play{background:#fff;}
@media(max-width:820px){ .lg-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media(max-width:560px){ .lg-grid{grid-template-columns:minmax(0,1fr);} .lg-fig img{height:200px;} }

.lg-table-wrap{overflow-x:auto; margin:0 0 30px; border:1px solid var(--hair);}
.lg-table{width:100%; min-width:520px; border-collapse:collapse; font-size:14px;}
.lg-table th{text-align:left; background:var(--mist); font-size:11px; font-weight:900; letter-spacing:1px;
  text-transform:uppercase; color:var(--ink); padding:12px 14px; white-space:nowrap;}
.lg-table td{padding:12px 14px; border-top:1px solid var(--hair); color:var(--slate); vertical-align:top;}
.lg-table tbody tr:nth-child(even){background:#fbfcfd;}
.lg-table td:first-child{font-weight:800; color:var(--ink);}

.lg-cite{font-size:14px; font-weight:800; color:var(--ink); margin:-6px 0 30px;}
.lg-cite .lg-src{font-weight:600; color:var(--slate);}
.lg-pdf a{font-size:13px; font-weight:900; letter-spacing:.3px; color:var(--apex-text);}
.lg-ext{margin:0 0 12px;}
.lg-next{list-style:none; padding:0; margin:22px 0 0; display:flex; flex-wrap:wrap; gap:10px 26px;}
.lg-next a{font-size:14px; font-weight:800; color:var(--apex-text);}

/* Legacy gallery, videos, and reviews. Same paper frame as the rest of the site. */
.legacy-related{margin:18px 0 0; font-size:14.5px; font-weight:700;}
.legacy-related a{color:var(--ink);}
.gallery-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}
.gallery-grid figure{margin:0; background:#fff; border:1px solid var(--hair); box-shadow:3px 3px 0 var(--paper-edge);}
.gallery-grid img{width:100%; height:220px; object-fit:cover; display:block; filter:saturate(.86) contrast(1.05);}
.gallery-grid figcaption{padding:12px 14px 14px; font-size:14px; font-weight:700; color:var(--ink);}
.video-grid{display:grid; grid-template-columns:1fr 1fr; gap:22px;}
.video-card h2{font-size:clamp(20px,2vw,26px); margin:0 0 12px; max-width:28ch;}
.video-frame{position:relative; border:1px solid var(--hair); box-shadow:3px 3px 0 var(--paper-edge); background:var(--ink); aspect-ratio:16/9;}
.video-frame iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}
.video-meta{margin:10px 0 0; font-size:13.5px; color:var(--slate);}
.review-list{display:grid; gap:14px; max-width:78ch;}
.review-card{background:#fff; border:1px solid var(--hair); box-shadow:3px 3px 0 var(--paper-edge); padding:22px 24px;}
.review-card h2{font-size:clamp(20px,2.2vw,26px); margin:0 0 12px;}
.review-card blockquote{margin:0; padding:0; border:0;}
.review-card blockquote p{margin:0 0 12px; color:var(--ink); white-space:pre-line;}
.review-by{margin:4px 0 0; font-size:14px; font-weight:700; color:var(--ink);}
.review-by span{font-weight:500; color:var(--slate);}
.legacy-note{background:#fff; border:1px solid var(--hair); box-shadow:3px 3px 0 var(--paper-edge); padding:18px 22px; max-width:68ch;}
.legacy-note p{margin:0;}
@media(max-width:820px){
  .gallery-grid{grid-template-columns:1fr 1fr;}
  .gallery-grid img{height:160px;}
  .video-grid{grid-template-columns:1fr;}
}
@media(max-width:640px){
  .gallery-grid{grid-template-columns:1fr;}
  .gallery-grid img{height:220px;}
  .review-card{padding:18px 16px;}
}