:root{
  --navy:#071a3a;
  --gold:#d08316;
  --shadow:0 10px 28px rgba(0,0,0,.16);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:#fff}
body{font-family:Arial,Helvetica,sans-serif}
.page{
  position:relative;
  width:min(100%,1100px);
  margin:0 auto;
  line-height:0;
  background:#fff;
}
.page-art{
  display:block;
  width:100%;
  height:auto;
}

/* Invisible hit areas align to the menu already printed in the locked artwork. */
.hotspot{
  position:absolute;
  z-index:10;
  display:block;
  line-height:normal;
  text-decoration:none;
}
.hs-home{left:65.0%;top:1.4%;width:30.5%;height:6.2%}
.hs-solutions{left:39.1%;top:7.2%;width:8.8%;height:3.6%}
.hs-capabilities{left:48.0%;top:7.2%;width:10.5%;height:3.6%}
.hs-projects{left:58.6%;top:7.2%;width:8.6%;height:3.6%}
.hs-resources{left:67.3%;top:7.2%;width:9.8%;height:3.6%}
.hs-about{left:77.1%;top:7.2%;width:7.4%;height:3.6%}
.hs-contact{left:84.5%;top:7.2%;width:10.2%;height:3.6%}

/* Dropdowns appear only when the user intentionally opens a menu.
   They do not alter the locked artwork itself. */
.menu-wrap{
  position:absolute;
  z-index:30;
  top:10.0%;
  line-height:1.25;
}
.menu-wrap.solutions{left:38.5%;width:20%}
.menu-wrap.capabilities{left:47.0%;width:24%}
.menu-wrap.projects{left:58.0%;width:20%}
.menu-wrap.resources{left:66.5%;width:20%}

.menu-panel{
  display:none;
  background:#fff;
  border-top:3px solid var(--gold);
  box-shadow:var(--shadow);
  padding:8px 0;
  min-width:220px;
}
.menu-wrap:hover .menu-panel,
.menu-wrap:focus-within .menu-panel{display:block}
.menu-panel a{
  display:block;
  padding:10px 14px;
  color:var(--navy);
  text-decoration:none;
  font-size:14px;
  font-weight:700;
  background:#fff;
}
.menu-panel a:hover,.menu-panel a:focus{background:#f4f1ea}

.menu-trigger{
  position:absolute;
  top:-3.0vh;
  left:0;
  width:100%;
  height:3.5vh;
  opacity:0;
}

/* Keyboard accessibility */
.hotspot:focus,.menu-trigger:focus{
  outline:2px solid var(--gold);
  outline-offset:2px;
}

/* On touch/mobile, keep all existing artwork intact and provide a compact
   navigation drawer button outside the artwork's printed menu area. */
.mobile-nav{display:none}
@media(max-width:720px){
  .menu-wrap{display:none}
  .mobile-nav{
    display:block;
    position:fixed;
    right:10px;
    bottom:10px;
    z-index:100;
    line-height:1.2;
  }
  .mobile-nav button{
    border:0;
    border-radius:999px;
    background:rgba(7,26,58,.94);
    color:#fff;
    width:48px;height:48px;
    font-size:22px;
    box-shadow:var(--shadow);
  }
  .mobile-nav nav{
    display:none;
    position:absolute;
    right:0;
    bottom:56px;
    width:250px;
    max-height:70vh;
    overflow:auto;
    background:white;
    box-shadow:var(--shadow);
    border-top:3px solid var(--gold);
  }
  .mobile-nav.open nav{display:block}
  .mobile-nav a{
    display:block;
    color:var(--navy);
    text-decoration:none;
    font-weight:700;
    padding:11px 14px;
    border-bottom:1px solid #eee;
  }
  .mobile-nav .group{
    padding:8px 14px 4px;
    font-size:12px;
    letter-spacing:.08em;
    color:#777;
    font-weight:700;
  }
}


/* --- New ABTEC content pages: same visual language, no changes to locked artwork pages --- */
.content-page{max-width:1100px;margin:0 auto;background:#fff;color:#102044;font-family:Arial,Helvetica,sans-serif}
.live-header{background:#fff;border-bottom:2px solid #d08316;padding:24px 42px 12px;position:relative}
.live-brand{display:flex;justify-content:flex-end}
.live-brand img{width:330px;max-width:48%;height:auto;display:block}
.live-nav{display:flex;justify-content:flex-end;gap:38px;margin-top:18px;font-weight:800;font-size:14px}
.live-nav a{color:#102044;text-decoration:none}
.live-nav a:hover{text-decoration:underline;text-decoration-color:#d08316;text-underline-offset:5px}
.live-hero{padding:52px 48px 24px}
.live-hero h1{margin:0;color:#102044;font-size:clamp(46px,7vw,78px);line-height:.96;letter-spacing:-.02em;font-family:"Arial Narrow",Arial,sans-serif;font-stretch:condensed}
.live-hero .sub{margin-top:16px;color:#c9790d;font-weight:800;font-size:22px;letter-spacing:.03em}
.live-grid{display:grid;grid-template-columns:minmax(0,2.25fr) minmax(280px,1fr);gap:38px;padding:0 48px 45px}
.hero-photo{min-height:520px;background:#eee center/cover no-repeat}
.side-copy h2,.content-block h2{font-family:"Arial Narrow",Arial,sans-serif;color:#102044;font-size:34px;line-height:1.05;margin:0 0 12px}
.gold-rule{width:38px;height:3px;background:#d08316;margin:16px 0 26px}
.side-copy p,.content-block p,.content-block li{font-size:17px;line-height:1.62;color:#22345b}
.side-copy strong,.content-block strong{color:#102044}
.badge-line{margin-top:30px;font-weight:800;color:#12633e;font-size:21px}
.three-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;padding:0 48px 48px}
.card-live{border:1px solid #e2ded5;background:#fff}
.card-live .card-img{height:230px;background:#ddd center/cover no-repeat}
.card-live .card-body{padding:22px 20px 26px;text-align:center}
.card-live h3{margin:0;color:#102044;font-family:"Arial Narrow",Arial,sans-serif;font-size:27px}
.card-live p{margin:14px 0 0;color:#34445e;line-height:1.5;font-size:15px}
.legal-wrap,.form-wrap{padding:38px 50px 64px}
.content-block{max-width:900px}
.content-block h2{margin-top:34px;font-size:28px}
.content-block h3{color:#102044;margin:24px 0 8px;font-size:20px}
.content-block ul{padding-left:22px}
.note-box{background:#f6f3ec;border-left:5px solid #d08316;padding:18px 20px;margin:24px 0;color:#34445e;line-height:1.5}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form-field{display:flex;flex-direction:column;gap:7px}
.form-field.full{grid-column:1/-1}
.form-field label{font-weight:800;color:#102044}
.form-field input,.form-field select,.form-field textarea{font:inherit;padding:13px 14px;border:1px solid #b9bfca;border-radius:2px;background:white;color:#102044}
.form-field textarea{min-height:150px;resize:vertical}
.form-actions{margin-top:22px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.abtec-btn{border:0;background:#d08316;color:#fff;font-weight:800;padding:14px 22px;cursor:pointer;text-decoration:none;display:inline-block}
.abtec-btn.secondary{background:#102044}
.form-help{font-size:13px;color:#59677d}
.new-footer{background:#071a28;color:white;padding:30px 48px;display:flex;justify-content:space-between;gap:20px;align-items:center;flex-wrap:wrap}
.new-footer a{color:white;text-decoration:none;margin-left:16px}
.new-footer a:hover{text-decoration:underline}
@media(max-width:760px){
 .live-header{padding:18px 20px 10px}
 .live-brand img{max-width:75%;width:300px}
 .live-nav{gap:14px;flex-wrap:wrap;font-size:12px}
 .live-hero{padding:38px 22px 22px}
 .live-grid,.three-cards{grid-template-columns:1fr;padding-left:22px;padding-right:22px}
 .hero-photo{min-height:360px}
 .legal-wrap,.form-wrap{padding:25px 22px 50px}
 .form-grid{grid-template-columns:1fr}
 .form-field.full{grid-column:auto}
}

/* --- FINAL TIMBERSHIELD PAGE --- */
.ts-final{max-width:1100px;margin:0 auto;background:#fff;color:#102044;font-family:Arial,Helvetica,sans-serif}
.ts-final .ts-header{background:#fff;border-bottom:2px solid #d08316;padding:18px 36px 12px}
.ts-final .ts-brand{display:flex;justify-content:flex-end}
.ts-final .ts-brand img{display:block;width:330px;max-width:46%;height:auto}
.ts-final .ts-nav{display:flex;justify-content:flex-end;gap:34px;margin-top:14px}
.ts-final .ts-nav a{font-size:14px;font-weight:800;color:#102044;text-decoration:none}
.ts-final .ts-nav a:hover{text-decoration:underline;text-decoration-color:#d08316;text-underline-offset:5px}
.ts-final .ts-top{padding:42px 46px 16px}
.ts-final .ts-title{margin:0;color:#102044;font-size:64px;line-height:.96;font-weight:900;letter-spacing:-.015em}
.ts-final .ts-sub{margin-top:10px;color:#c9790d;font-size:22px;font-weight:800;letter-spacing:.035em}
.ts-final .ts-main{display:grid;grid-template-columns:minmax(0,2.15fr) minmax(285px,1fr);gap:34px;padding:0 46px 34px}
.ts-final .ts-hero{height:515px;overflow:hidden;background:#eee}
.ts-final .ts-hero img{width:100%;height:100%;object-fit:cover;display:block}
.ts-final .ts-side h2{margin:0;color:#102044;font-size:31px;line-height:1.05}
.ts-final .ts-rule{width:38px;height:3px;background:#d08316;margin:17px 0 22px}
.ts-final .ts-side p{font-size:16px;line-height:1.52;color:#263758;margin:0 0 16px}
.ts-final .ts-lockup{margin-top:26px;border-top:1px solid #e7e2da;padding-top:20px}
.ts-final .ts-lockup img{display:block;width:100%;height:auto}
.ts-final .ts-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding:0 20px 36px}
.ts-final .ts-card{text-align:center}
.ts-final .ts-card .pic{height:240px;overflow:hidden;background:#eee}
.ts-final .ts-card .pic img{width:100%;height:100%;object-fit:cover;display:block}
.ts-final .ts-card h3{margin:15px 14px 0;color:#102044;font-size:25px;line-height:1.05}
.ts-final .ts-card .mini-rule{width:32px;height:3px;background:#d08316;margin:13px auto 14px}
.ts-final .ts-card p{margin:0 26px;color:#33445f;font-size:15px;line-height:1.5}
.ts-final .ts-footer{background:#071a28;color:#fff;padding:27px 42px;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;align-items:center}
.ts-final .ts-footer a{color:#fff;text-decoration:none;margin-left:14px}
.ts-final .ts-footer a:hover{text-decoration:underline}
@media(max-width:760px){
  .ts-final .ts-header{padding:15px 18px 10px}
  .ts-final .ts-brand img{max-width:76%;width:310px}
  .ts-final .ts-nav{gap:14px;flex-wrap:wrap;font-size:12px}
  .ts-final .ts-top{padding:34px 20px 15px}
  .ts-final .ts-title{font-size:48px}
  .ts-final .ts-sub{font-size:18px}
  .ts-final .ts-main{grid-template-columns:1fr;padding:0 20px 28px}
  .ts-final .ts-hero{height:360px}
  .ts-final .ts-cards{grid-template-columns:1fr;padding:0 20px 28px}
  .ts-final .ts-card .pic{height:280px}
}


/* --- APPROVED 8-ITEM NAVIGATION: ONLY NAVIGATION OVERRIDES --- */
.page{position:relative}
.nav8-overlay{position:absolute;inset:0;z-index:40;pointer-events:none;line-height:normal}
.nav8-zone{position:absolute;display:block;pointer-events:auto}
.nav8-zone.nav8-drop{overflow:visible}
.nav8-zone.nav8-drop>button{position:absolute;inset:0;width:100%;height:100%;border:0;background:transparent;padding:0;cursor:pointer}
.nav8-panel{display:none;position:absolute;top:100%;left:50%;transform:translateX(-50%);min-width:230px;background:#fff;border-top:3px solid #d08316;box-shadow:0 10px 28px rgba(0,0,0,.18);padding:7px 0;z-index:200}
.nav8-panel a{display:block;padding:10px 14px;color:#102044;text-decoration:none;font:700 14px/1.25 Arial,Helvetica,sans-serif;white-space:nowrap}
.nav8-panel a:hover,.nav8-panel a:focus{background:#f4f1ea}
.nav8-drop:hover .nav8-panel,.nav8-drop:focus-within .nav8-panel,.nav8-drop.open .nav8-panel{display:block}
.nav8-live{display:flex;align-items:center;justify-content:flex-start;gap:clamp(12px,2.1vw,34px);flex-wrap:nowrap}
.nav8-live>a,.nav8-live .live-drop>button{font:800 14px/1 Arial,Helvetica,sans-serif;color:#102044;text-decoration:none;background:none;border:0;padding:0;cursor:pointer;white-space:nowrap}
.live-drop{position:relative;display:inline-flex;align-items:center}
.live-drop>button:after{content:'▾';font-size:9px;margin-left:5px;vertical-align:2px}
.live-panel{display:none;position:absolute;top:22px;left:50%;transform:translateX(-50%);min-width:230px;background:white;border-top:3px solid #d08316;box-shadow:0 10px 28px rgba(0,0,0,.18);z-index:300;padding:7px 0}
.live-panel a{display:block!important;padding:10px 14px!important;color:#102044!important;text-decoration:none!important;font:700 14px/1.25 Arial,Helvetica,sans-serif!important;white-space:nowrap}
.live-panel a:hover{background:#f4f1ea}
.live-drop:hover .live-panel,.live-drop:focus-within .live-panel,.live-drop.open .live-panel{display:block}
.ts-final .nav8-live{justify-content:flex-start;margin-top:14px}
.ts-final .nav8-live>a,.ts-final .nav8-live .live-drop>button{font-size:14px}
@media(max-width:900px){.nav8-live{gap:10px}.nav8-live>a,.nav8-live .live-drop>button{font-size:12px}}
@media(max-width:720px){.nav8-overlay{display:none}.nav8-live{display:none!important}}


/* ==========================================================
   ABTEC CLEAN REBUILD — CONSISTENT HEADER / MOBILE / MOTION
   2026-08-17
   These rules deliberately do NOT alter locked page artwork.
   ========================================================== */
html{scroll-behavior:smooth}
body{overflow-x:hidden}

/* One consistent live header for text-based supporting pages */
.content-page .live-header{
  background:#fff;
  border-bottom:2px solid var(--gold);
  padding:18px 36px 12px;
}
.content-page .live-brand{display:flex;justify-content:flex-end;align-items:center}
.content-page .live-brand img{display:block;width:330px;max-width:46%;height:auto}
.content-page .live-nav{
  display:flex;
  justify-content:flex-start;
  align-items:center;
  gap:34px;
  margin-top:14px;
  font-weight:800;
  font-size:14px;
  white-space:nowrap;
}
.content-page .live-nav>a,
.content-page .live-nav .live-drop>button{
  color:#102044;
  text-decoration:none;
  background:none;
  border:0;
  padding:0;
  cursor:pointer;
  font:800 14px/1 Arial,Helvetica,sans-serif;
}
.content-page .live-nav>a:hover,
.content-page .live-nav .live-drop>button:hover{
  color:#102044;
  text-decoration:underline;
  text-decoration-color:var(--gold);
  text-underline-offset:5px;
}

/* Smooth dropdowns without changing their geometry */
.nav8-panel,.live-panel{
  display:block!important;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .18s ease, transform .18s ease, visibility .18s ease;
}
.nav8-panel{transform:translate(-50%,-6px)}
.live-panel{transform:translate(-50%,-6px)}
.nav8-drop:hover .nav8-panel,.nav8-drop:focus-within .nav8-panel,.nav8-drop.open .nav8-panel,
.live-drop:hover .live-panel,.live-drop:focus-within .live-panel,.live-drop.open .live-panel{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translate(-50%,0);
}

/* Refined motion — subtle, premium, and non-disruptive */
.page-art{
  opacity:0;
  transform:translateY(4px);
  transition:opacity .45s ease, transform .45s ease;
}
.page-art.is-visible{opacity:1;transform:none}
.reveal{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .50s ease, transform .50s ease;
}
.reveal.is-visible{opacity:1;transform:none}
.reveal-delay-1{transition-delay:.08s}
.reveal-delay-2{transition-delay:.16s}
.reveal-delay-3{transition-delay:.24s}
.card-live,.abtec-btn{
  transition:transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
@media(hover:hover){
  .card-live:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(7,26,58,.10)}
  .abtec-btn:hover{transform:translateY(-2px);box-shadow:0 7px 18px rgba(7,26,58,.16)}
}

/* Mobile drawer shared by every page */
.mobile-nav nav{
  display:block!important;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(10px) scale(.985);
  transform-origin:bottom right;
  transition:opacity .18s ease, transform .18s ease, visibility .18s ease;
}
.mobile-nav.open nav{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:none;
}
.mobile-nav button{transition:transform .18s ease, background .18s ease}
.mobile-nav.open button{transform:rotate(2deg)}

/* Mobile content pages: header remains legible, desktop nav becomes drawer */
@media(max-width:720px){
  .content-page{width:100%;max-width:none}
  .content-page .live-header{padding:14px 16px 10px}
  .content-page .live-brand{justify-content:center}
  .content-page .live-brand img{width:min(330px,88vw);max-width:88vw}
  .content-page .live-nav{display:none!important}
  .content-page .live-hero{padding:34px 20px 18px}
  .content-page .live-hero h1{font-size:clamp(40px,13vw,62px)}
  .content-page .live-hero .sub{font-size:17px;line-height:1.25}
  .content-page .legal-wrap,.content-page .form-wrap{padding:24px 20px 46px}
  .content-page .content-block p,.content-page .content-block li{font-size:16px;line-height:1.58}
  .content-page .content-block h2{font-size:25px;line-height:1.08}
  .new-footer{padding:24px 20px;display:block;line-height:1.5}
  .new-footer>div+div{margin-top:12px}
  .new-footer a{display:inline-block;margin:5px 12px 5px 0}
  .mobile-nav{display:block}
  .mobile-nav nav{width:min(310px,calc(100vw - 24px));max-height:76vh}
}

/* Respect accessibility preferences */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .page-art,.reveal{opacity:1!important;transform:none!important}
}

/* FINAL SHARED MASTER HEADER — single source of truth for supporting pages */
.shared-master-header{position:relative;width:100%;background:#fff;line-height:0}
.shared-master-header>img{display:block;width:100%;height:auto}
.shared-master-header .nav8-overlay{line-height:normal}
@media(max-width:720px){.shared-master-header{display:none}}


/* headerfix2: crop embedded legacy headers on artwork pages */
.art-crop{overflow:hidden;width:100%;line-height:0}
.art-crop>.page-art{display:block;width:100%;height:auto;margin-top:-162px}
@media(max-width:720px){
  .art-crop>.page-art{margin-top:-162px}
}

/* --- MOBILE NAVIGATION FIX 2026-08-17 ---
   One consistent, touch-friendly navigation system for every page. */
@media (max-width:720px){
  html,body{width:100%;max-width:100%;overflow-x:hidden}
  body{padding-top:58px}

  /* Hide desktop-only navigation/header layers on phones. */
  .shared-master-header,
  .nav8-overlay,
  .live-nav,
  .ts-final .ts-nav{display:none!important}

  /* Keep all page content inside the viewport. */
  .page,.content-page,.ts-final{width:100%;max-width:100%;margin:0 auto}
  .page-art{width:100%;max-width:100%;height:auto}
  .art-crop{width:100%;max-width:100%;overflow:hidden}

  /* Persistent mobile header. */
  .mobile-nav{
    display:block!important;
    position:fixed;
    top:0;left:0;right:0;bottom:auto;
    height:58px;
    z-index:1000;
    background:#fff;
    border-bottom:2px solid var(--gold);
    box-shadow:0 4px 14px rgba(0,0,0,.10);
    line-height:normal;
  }
  .mobile-nav::before{
    content:'ABTEC';
    position:absolute;
    left:18px;top:50%;
    transform:translateY(-50%);
    color:var(--navy);
    font:900 23px/1 Arial,Helvetica,sans-serif;
    letter-spacing:.03em;
  }
  .mobile-nav button{
    position:absolute;
    top:7px;right:10px;
    width:44px;height:44px;
    border:0;border-radius:6px;
    background:var(--navy);
    color:#fff;
    font-size:24px;
    line-height:44px;
    padding:0;
    box-shadow:none;
    cursor:pointer;
  }
  .mobile-nav button:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

  /* Full-width, scrollable drawer directly under mobile header. */
  .mobile-nav nav{
    display:none;
    position:fixed;
    top:58px;left:0;right:0;bottom:auto;
    width:100%;
    max-height:calc(100dvh - 58px);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    background:#fff;
    border-top:0;
    box-shadow:0 10px 28px rgba(0,0,0,.18);
    padding:6px 0 18px;
  }
  .mobile-nav.open nav{display:block}
  .mobile-nav a{
    min-height:46px;
    display:flex;
    align-items:center;
    padding:11px 20px;
    color:var(--navy);
    text-decoration:none;
    font-size:16px;
    line-height:1.25;
    font-weight:700;
    border-bottom:1px solid #ececec;
    background:#fff;
  }
  .mobile-nav a:active{background:#f4f1ea}
  .mobile-nav .group{
    padding:13px 20px 6px;
    font-size:11px;
    line-height:1.2;
    letter-spacing:.12em;
    color:#777;
    font-weight:800;
    background:#f8f8f8;
  }
  body.mobile-menu-open{overflow:hidden}

  /* Responsive live/text pages. */
  .live-hero{padding:30px 20px 18px}
  .live-hero h1{font-size:clamp(38px,13vw,58px);line-height:.98}
  .live-hero .sub{font-size:17px;line-height:1.25}
  .legal-wrap,.form-wrap{padding:22px 20px 42px}
  .content-block{max-width:100%}
  .content-block h2{font-size:24px;line-height:1.1}
  .content-block p,.content-block li{font-size:16px;line-height:1.55}
  .form-grid{grid-template-columns:1fr;gap:15px}
  .form-field.full{grid-column:auto}
  .form-field input,.form-field select,.form-field textarea{font-size:16px;min-height:46px}
  .form-actions{align-items:stretch}
  .abtec-btn{width:100%;text-align:center;min-height:46px}
  .new-footer{padding:24px 20px;display:block;font-size:14px;line-height:1.5}
  .new-footer>div:last-child{margin-top:12px}
  .new-footer a{display:inline-block;margin:4px 12px 4px 0}

  /* TimberShield live page. */
  .ts-final .ts-header{display:none!important}
  .ts-final .ts-top{padding:28px 20px 14px}
  .ts-final .ts-title{font-size:42px}
  .ts-final .ts-sub{font-size:17px;line-height:1.25}
  .ts-final .ts-main{grid-template-columns:1fr;padding:0 20px 26px}
  .ts-final .ts-hero{height:auto;aspect-ratio:4/3}
  .ts-final .ts-cards{grid-template-columns:1fr;padding:0 20px 28px}
  .ts-final .ts-card .pic{height:auto;aspect-ratio:4/3}
  .ts-final .ts-footer{padding:24px 20px}
}

/* ABTEC logo home links — desktop and mobile. */
.logo-home-zone{
  position:absolute;
  left:80.5%;
  top:.4%;
  width:18.5%;
  height:7.2%;
  z-index:55;
  pointer-events:auto;
  display:block;
}
.shared-master-header .logo-home-zone{
  left:79.5%;
  top:0;
  width:20.5%;
  height:50.8%;
}
.mobile-home-logo{display:none}
@media(max-width:720px){
  .mobile-nav::before{content:none!important}
  .mobile-home-logo{
    display:flex;
    position:absolute;
    left:18px;
    top:0;
    height:58px;
    align-items:center;
    color:var(--navy);
    font:900 23px/1 Arial,Helvetica,sans-serif;
    letter-spacing:.03em;
    text-decoration:none;
    z-index:2;
  }
  .mobile-home-logo:focus-visible{
    outline:3px solid var(--gold);
    outline-offset:2px;
  }
}
.art-crop-products{overflow:hidden;width:100%;line-height:0}
.art-crop-products>.page-art{display:block;width:100%;height:auto;margin-top:-202px}
@media(max-width:720px){.art-crop-products>.page-art{margin-top:-202px}}

/* ==========================================================
   ABTEC MOBILE — EXACT SEA SCOUTS NAVIGATION MODEL
   Derived from the working Louisiana Sea Scouts site:
   visible header artwork + transparent proportional hit zones.
   NO separate mobile button or bottom menu.
   ========================================================== */
@media (max-width:720px){
  html,body{
    margin:0!important;
    padding:0!important;
    width:100%!important;
    max-width:100%!important;
    overflow-x:hidden!important;
    background:#fff!important;
  }

  /* Remove the separate ABTEC mobile control entirely. */
  .mobile-nav{
    display:none!important;
    position:static!important;
  }

  /* The SAME header / menu visible on desktop stays visible on phone. */
  .shared-master-header{
    display:block!important;
    position:relative!important;
    width:100%!important;
    line-height:0!important;
    background:#fff!important;
  }
  .shared-master-header>img{
    display:block!important;
    width:100%!important;
    height:auto!important;
  }

  /* Keep the invisible proportional hit zones active on the actual printed menu,
     exactly like the Sea Scouts hot-nav overlay. */
  .nav8-overlay{
    display:block!important;
    position:absolute!important;
    inset:0!important;
    z-index:80!important;
    pointer-events:none!important;
    line-height:normal!important;
  }
  .nav8-zone{
    display:block!important;
    position:absolute!important;
    pointer-events:auto!important;
  }
  .nav8-zone.nav8-drop{overflow:visible!important}
  .nav8-zone.nav8-drop>button{
    display:block!important;
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    border:0!important;
    padding:0!important;
    background:transparent!important;
    cursor:pointer!important;
  }

  /* Mobile dropdowns open directly below the tapped printed menu item.
     Width is constrained to the viewport; JS horizontally clamps them. */
  .nav8-panel{
    min-width:220px!important;
    max-width:calc(100vw - 16px)!important;
    z-index:9999!important;
  }
  .nav8-panel a{
    font-size:13px!important;
    line-height:1.2!important;
    padding:10px 12px!important;
  }

  /* Artwork pages remain the same page, simply scaled down like Sea Scouts. */
  .page{
    width:100%!important;
    max-width:1100px!important;
    margin:0 auto!important;
  }
  .page-art{
    display:block!important;
    width:100%!important;
    height:auto!important;
  }

  /* These three pages use an external shared master header.
     Crop the old embedded header by the same PROPORTION, not desktop pixels. */
  .art-crop>.page-art{
    margin-top:calc(-14.7273vw)!important; /* 162 / 1100 */
  }
  .art-crop-products>.page-art{
    margin-top:calc(-18.3636vw)!important; /* 202 / 1100 */
  }

  /* Supporting text/form pages use the same master header on phone too. */
  .content-page{
    width:100%!important;
    max-width:1100px!important;
    margin:0 auto!important;
  }

  /* Keep supporting content readable while retaining the same site header. */
  .content-page .live-hero{padding:30px 20px 18px!important}
  .content-page .live-hero h1{font-size:clamp(40px,12vw,60px)!important}
  .content-page .live-hero .sub{font-size:17px!important;line-height:1.25!important}
  .content-page .legal-wrap,.content-page .form-wrap{padding:22px 20px 42px!important}
  .content-page .form-grid{grid-template-columns:1fr!important}
  .content-page .form-field.full{grid-column:auto!important}
  .content-page input,.content-page select,.content-page textarea{font-size:16px!important}
  .new-footer{padding:22px 20px!important;display:block!important;line-height:1.5!important}
  .new-footer>div+div{margin-top:12px!important}
  .new-footer a{display:inline-block!important;margin:5px 12px 5px 0!important}

  /* Any legacy live header/nav on a support page is not duplicated. */
  .content-page .live-header,
  .content-page .live-nav,
  .ts-final .ts-header,
  .ts-final .ts-nav{
    display:none!important;
  }
}