: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}
}