/* Sportsman Steel Safes - modern site stylesheet */
:root{
  --maroon:#2F2F25; --maroon-dark:#191919; --maroon-deep:#191919;
  --gold:#f4b324; --gold-soft:#f4b324; --red:#191919; --blue:#0000FF;
  --paper:#ffffff; --line:#d6d6d8;
  --steel:#5C5A55; --steel-gray:#B9B9BA; --charcoal:#2F2F25; --black:#191919; --brand-gold:#f4b324;
  --font-head:"Anton",Impact,"Arial Narrow",sans-serif;
  /* Header headline face: real Arial Black where installed, Archivo Black elsewhere */
  --font-head-blk:"Arial Black","Archivo Black","Arial Bold",Gadget,Helvetica,Arial,sans-serif;
  --font-sub:"Oswald",Arial,sans-serif;
  --font-body:"Roboto",Arial,Helvetica,sans-serif;
}
*{box-sizing:border-box;}
body{margin:0;padding:0;background:var(--maroon-deep);font-family:var(--font-body);}
::selection{background:var(--maroon);color:#fff;}
img{max-width:100%;height:auto;}
a{color:inherit;}

.ss-container{width:100%;margin:0 auto;background:var(--maroon);}

/* Masthead — logo pinned left, all text centered across the full width (desktop) */
.masthead{background:var(--maroon);position:relative;text-align:center;padding:16px 4% 14px;}
.mast-logo-link{position:absolute;left:4%;top:50%;transform:translateY(-50%);line-height:0;}
/* symmetric side padding reserves room for the left logo so centered text never overlaps it */
.masthead-main{text-align:center;width:100%;padding:0 clamp(172px,11.5%,250px);}
.masthead-title{font-size:clamp(24px,2.4vw,54px);font-weight:900;color:#fff;line-height:1.08;margin:0 0 6px;letter-spacing:.5px;white-space:nowrap;}
.masthead-tagline{font-size:clamp(19px,1.9vw,43px);font-weight:900;color:var(--gold-soft);letter-spacing:.6px;margin:0 0 12px;text-transform:uppercase;white-space:nowrap;line-height:1.12;}
.phone-row{display:flex;align-items:center;justify-content:center;gap:40px;flex-wrap:wrap;}
.mast-logo{height:150px;width:auto;display:block;}
/* Mobile: logo centered on top (bigger), text stacked below */
@media(max-width:1080px){
  .masthead{padding:14px 2.5% 12px;}
  .masthead-main{padding:0;}
  .mast-logo-link{position:static;transform:none;display:block;width:100%;text-align:center;margin:0 auto 8px;}
  .mast-logo{height:clamp(118px,34vw,190px);margin:0 auto;}
  /* SINCE 1978 drops to its own line (dash only makes sense inline) */
  .masthead-title .ms-dash{display:none;}
  .masthead-title .ms-since{display:block;}
  /* each city + number on its own line */
  .header-phone3 .loc-sep{display:block;height:0;font-size:0;line-height:0;overflow:hidden;}
}
.header-phone3{font-size:21px;font-weight:700;color:var(--gold);text-align:center;letter-spacing:1px;line-height:1.3;}
.header-phone3 a{color:var(--gold);text-decoration:none;}
.header-phone3 .loc-title{display:block;font-size:clamp(22px,2.9vw,62px);letter-spacing:2px;white-space:nowrap;color:var(--gold-soft);opacity:.95;margin-bottom:6px;font-weight:bold;}
.header-phone3 .loc-lines{display:block;font-size:clamp(17px,1.68vw,37px);font-weight:900;white-space:nowrap;}
.header-phone3 .loc-sep{color:#c98;}

/* Sticky bar + menu */
.sticky-head{position:relative;z-index:300;}
html{scroll-padding-top:60px;}
.header-phone{background:var(--maroon-dark);display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:6px 3%;border-bottom:1px solid #555;}
.hp-left{display:flex;align-items:center;gap:14px;}
.qq-img{height:52px;vertical-align:middle;border:0;display:block;}
.header-phone a.qq-btn{display:inline-block;background:#fff;color:#000;font:bold 21px/1 Arial,Helvetica,sans-serif;text-transform:uppercase;letter-spacing:.5px;text-decoration:none;padding:14px 24px;border-radius:6px;white-space:nowrap;box-shadow:0 2px 4px rgba(0,0,0,.3);}
.header-phone a.qq-btn:hover{background:#eee;color:#000;}
.qq-nav{display:none;}/* nav-bar quote button shows on mobile only */
@media(max-width:600px){.qq-btn{font-size:15px;padding:10px 14px;}}
.header-phone-new-large{font-size:clamp(22px,2.75vw,52px);font-weight:900;line-height:1.15;white-space:nowrap;color:#fff;letter-spacing:1px;}
.header-phone-new{font-size:21px;font-weight:bold;color:var(--gold-soft);letter-spacing:1px;}
.link-header-large{font-size:22px;font-weight:bold;color:#66CCFF;letter-spacing:1px;text-decoration:none;}
.header-phone a{color:var(--gold-soft);text-decoration:none;}
.hp-right{text-align:right;}

.topnav{background:var(--maroon);position:sticky;top:0;z-index:300;border-top:2px solid #333;border-bottom:2px solid #333;box-shadow:0 3px 10px rgba(0,0,0,.4);}
.topnav ul{list-style:none;margin:0;padding:0;}
/* `.topnav ul` above outranks a bare `.top-level`, so qualify it or the
   centering and side padding are silently dropped. */
.topnav ul.top-level{display:flex;flex-wrap:nowrap;justify-content:space-between;max-width:1800px;margin:0 auto;padding:0 clamp(12px,2.2%,44px);}
.top-level>li{position:relative;}
.top-level>li>a{display:block;color:#fff;font-family:Arial,Helvetica,sans-serif;font-weight:bold;font-size:clamp(13.5px,1.3vw,19px);line-height:58px;text-transform:uppercase;text-decoration:none;padding:0 clamp(6px,.9vw,16px);white-space:nowrap;}
.top-level>li:hover{background:#808080;}
.top-level>li>a:hover{text-decoration:underline;}
.sub-level{display:none;position:absolute;top:100%;left:0;min-width:270px;background:#333;border:1px solid #ccc;z-index:1000;}
.top-level>li:hover>.sub-level{display:block;}
.sub-level li a{display:block;color:#fff;font:bold 13px Arial,Helvetica,sans-serif;text-transform:uppercase;text-decoration:none;padding:12px 14px;border-top:1px solid #555;line-height:1.3;}
.sub-level li a:hover{background:var(--maroon);}
.hamburger{display:none;}

/* Content */
.content{background:#fff;color:#000;font-size:17px;overflow:hidden;}
.content img{max-width:100%;height:auto;}
.pad{padding:0 3%;}
.hero-full img{width:100%;height:auto;display:block;}
.center-block{text-align:center;margin:18px auto;}
.caption-red-2em{font-family:"Franklin Gothic Medium","Arial Narrow",Arial,sans-serif;font-size:2.6em;font-weight:700;color:var(--red);letter-spacing:1px;}
.text-block-cntrd{text-align:center;margin:22px 0;}
.font-body-text-1plus{font-size:1.4em;color:#000;line-height:1.6;}
.font-body-text{font-size:18px;color:#000;line-height:1.55;}
/* Body copy reads left-aligned, never centred: a centred paragraph leaves its
   last line starting in the middle, which looks amateurish. The block itself
   stays centred on the page - only the text inside it goes left. These spans
   wrap a whole paragraph, so making them block-level is safe. */
.font-body-text,.font-body-text-1plus{display:block;text-align:left;}
.caption2-maroon{font-size:1.45em;font-weight:bold;color:var(--maroon);}
.sub-black{font-size:1.55em;font-weight:600;color:#000;}
.sub2-black{font-size:1.5em;font-weight:bold;color:#000;}
.caption-sub-H1{font-family:Arial,sans-serif;font-size:1.5em;font-weight:700;color:var(--red);line-height:1.35;}
.caption-sub-H2-black{font-size:1.35em;font-weight:bold;color:#000;}
.sub-underline1{font-family:Arial,sans-serif;font-size:1.8em;font-weight:600;text-decoration:underline;color:var(--red);}
.sub-it-underline1{font-family:Arial,sans-serif;font-size:1.8em;font-weight:800;font-style:italic;color:var(--red);text-decoration:underline;}
.caption1{font-size:1.35em;font-weight:600;color:#000;}
.caption-1-5em{font-family:Arial,sans-serif;font-size:2.4em;font-weight:700;color:var(--red);letter-spacing:1px;line-height:1.1;}
.text-descriptive-med-large{font-size:20px;font-weight:bold;color:#000;line-height:1.7;}
.blue-link-big{font-size:30px;font-weight:bold;color:var(--blue);text-decoration:none;}
.box-centered{border:2px solid #383838;border-radius:10px;padding:18px;margin:22px 3%;}
.urgent-box{display:flex;align-items:center;gap:26px;text-align:left;}
.urgent-box .urgent-img{width:46%;max-width:520px;margin:0;border:1px solid #000;}
.urgent-text{flex:1;}
/* Professional "Commercial Grade Fire Door" box (replaces the old urgent box) */
.fire-door-box{display:flex;align-items:center;gap:34px;text-align:left;max-width:1080px;margin:26px auto;border:0;border-radius:0;padding:0;background:transparent;}
.fire-door-box .fire-door-img{width:44%;max-width:520px;border:0;border-radius:0;}
.fire-door-text{flex:1;}
.fire-door-title{display:block;font-family:"Franklin Gothic Medium","Arial Narrow",Arial,sans-serif;font-size:2.2em;font-weight:800;color:var(--red);line-height:1.1;margin-bottom:12px;}
.fire-door-text p{margin:0;}
.fire-door-text .font-body-text{font-size:1.25em;line-height:1.6;}
@media(max-width:760px){.fire-door-box{flex-direction:column;text-align:center;padding:0;}.fire-door-box .fire-door-img{width:100%;}}
/* Bigger comparison lists on the home page */
.cmp-list{font-size:22px;line-height:1.9;}
@media(max-width:600px){.cmp-list{font-size:18px;line-height:1.7;}.fire-door-title{font-size:1.6em;}.fire-door-text .font-body-text{font-size:1.05em;}}
.arial-15{font-family:Arial,sans-serif;font-size:17px;color:#333;}

/* Grids */
.prod-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:22px 0;}
/* Kevin: no box round a photo. The grid photos sit on the page at one
   height per row, nothing framed, nothing cropped. */
.prod-cell{text-align:center;}
.prod-cell a{text-decoration:none;display:block;}
.prod-cell img{width:100%;height:320px;object-fit:contain;background:transparent;padding:0;border:0;border-radius:0;display:block;}
.prod-cap{margin-top:10px;display:block;}
.interior-full img{width:100%;height:auto;display:block;border-radius:6px;}
.compare-cols{display:flex;gap:28px;flex-wrap:wrap;justify-content:center;margin-top:14px;}
.compare-cols>div{flex:1 1 320px;}
.three-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:22px 0;}
.three-grid img{width:100%;height:340px;object-fit:contain;background:transparent;padding:0;border:0;border-radius:0;display:block;}
.video-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:16px 0;}
.video-grid img{width:100%;height:auto;object-fit:contain;background:transparent;padding:0;border:0;border-radius:0;cursor:pointer;display:block;}
.video-cap{display:block;text-align:center;margin-top:8px;}
.showroom-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin:16px 0;}
.showroom-grid img{width:100%;height:260px;object-fit:cover;border-radius:6px;display:block;}
.call-big{display:block;text-align:center;font-size:clamp(24px,6.4vw,70px);font-weight:bold;color:#000;text-decoration:none;margin:26px 0;padding:0 3%;line-height:1.15;overflow-wrap:break-word;}
.call-big:hover{color:var(--red);}

/* Footer */
.ss-footer{background:#111;color:#fff;padding:40px 5% 26px;}
.foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:26px 30px;max-width:1200px;margin:0 auto;text-align:left;}
.foot-col{min-width:0;}
.foot-head{font-family:Arial,sans-serif;font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#fff;margin:0 0 12px;padding-bottom:8px;border-bottom:1px solid #2c2c2c;}
.foot-list{list-style:none;margin:0;padding:0;}
.foot-list li{margin:0 0 8px;line-height:1.35;}
.foot-list a{color:#b9c9dc;text-decoration:none;font-size:14px;}
.foot-list a:hover{color:#fff;text-decoration:underline;}
.foot-bottom{max-width:1200px;margin:30px auto 0;padding-top:20px;border-top:1px solid #2c2c2c;text-align:center;}
.foot-social{display:flex;justify-content:center;align-items:center;gap:16px;margin:0 0 14px;}
.foot-social img{height:38px;width:38px;display:block;border-radius:6px;transition:transform .2s ease;}
.foot-social a:hover img{transform:scale(1.12);}
.ss-footer .footer-font{color:#9a9a9a;}
@media (max-width:640px){
  .ss-footer{padding:30px 6% 22px;}
  .foot-grid{grid-template-columns:repeat(2,1fr);gap:22px 18px;}
}
@media (max-width:380px){ .foot-grid{grid-template-columns:1fr;} }
.footer-font{font-family:Arial,sans-serif;font-size:12px;color:#c9c9c9;line-height:1.7;max-width:760px;margin:0 auto;}

/* Footer contact band: logo, both plants, both numbers. Sits between the link
   columns and the copyright line. */
.foot-contact{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:24px 30px;
  max-width:1200px;margin:30px auto 0;padding-top:24px;border-top:1px solid #2c2c2c;text-align:left;}
.foot-contact .fc-brand{min-width:0;}
.foot-contact .fc-logo{width:96px;height:96px;display:block;margin:0 0 10px;}
.foot-contact .fc-since{font-family:Arial,sans-serif;font-size:13px;color:#9a9a9a;margin:0;line-height:1.45;}
.foot-contact .fc-block{min-width:0;}
.foot-contact .fc-head{font-family:Arial,sans-serif;font-size:14px;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;color:#fff;margin:0 0 10px;}
.foot-contact .fc-line{font-family:Arial,sans-serif;font-size:15px;font-weight:700;color:#fff;margin:0 0 6px;line-height:1.4;}
.foot-contact .fc-sub{font-size:14px;font-weight:400;color:#b9c9dc;}
.foot-contact a{color:inherit;text-decoration:none;}
.foot-contact a:hover{color:#fff;text-decoration:underline;}
@media (max-width:640px){ .foot-contact{gap:20px;margin-top:24px;padding-top:20px;} }

/* The 24 hr number is a tel: link now; keep it looking like the text it was. */
.header-phone-new a{color:inherit;text-decoration:none;}
.header-phone-new a:hover{text-decoration:underline;}

/* Home page "why us" band: the numbers strip, the reasons, and the CTA pair. */
.idx-why{max-width:1100px;margin:0 auto;text-align:left;}
.idx-why .idx-why-head{font-family:Oswald,Arial,sans-serif;font-size:clamp(26px,4vw,46px) !important;
  font-weight:600;line-height:1.1;color:#191919;text-align:center;margin:0 0 22px;text-transform:uppercase;letter-spacing:.5px;}
.idx-why .idx-why-stats{list-style:none;margin:0 0 26px;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;text-align:center;}
.idx-why .idx-why-stats li{display:flex;flex-direction:column;gap:5px;padding:14px 8px;
  border-top:3px solid #7a1d1d;background:#f3f3f3;}
.idx-why .idx-why-stats strong{font-family:Oswald,Arial,sans-serif;font-size:clamp(24px,3.4vw,40px);
  font-weight:700;line-height:1;color:#7a1d1d;}
.idx-why .idx-why-stats span{font-family:Arial,sans-serif;font-size:clamp(12px,1.35vw,15px);
  line-height:1.3;color:#444;}
.idx-why .idx-why-list{list-style:none;margin:0 0 22px;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:14px 28px;}
.idx-why .idx-why-list li{font-family:Arial,Helvetica,sans-serif;font-size:16px;line-height:1.55;color:#333;
  padding-left:26px;position:relative;}
.idx-why .idx-why-list li::before{content:"\2713";position:absolute;left:0;top:0;
  color:#7a1d1d;font-weight:700;font-size:17px;}
.idx-why .idx-why-list strong{color:#191919;}
.idx-why .idx-why-cta{text-align:center;margin:0;display:flex;flex-wrap:wrap;
  justify-content:center;align-items:center;gap:10px 18px;}
.idx-why .idx-why-cta .quote-open{display:inline-block;background:#7a1d1d;color:#fff;text-decoration:none;
  font:700 17px/1 Arial,sans-serif;padding:15px 28px;border-radius:4px;letter-spacing:.3px;}
.idx-why .idx-why-cta .quote-open:hover{background:#611616;}
.idx-why .idx-why-call{font:700 17px/1 Arial,sans-serif;color:#383838;text-decoration:none;}
.idx-why .idx-why-call:hover{text-decoration:underline;}
@media (max-width:760px){
  /* three stats stay on one row - the numbers are the point, and stacking
     them pushed the reasons below the fold on a phone. */
  .idx-why .idx-why-stats{gap:8px;}
  .idx-why .idx-why-stats li{padding:12px 5px;}
  .idx-why .idx-why-stats span{font-size:11.5px;}
  .idx-why .idx-why-list{grid-template-columns:1fr;}
}

/* Privacy / Terms line above the copyright. */
.foot-legal{font-family:Arial,sans-serif;font-size:13px;margin:0 0 10px;color:#9a9a9a;}
.foot-legal a{color:#b9c9dc;text-decoration:none;}
.foot-legal a:hover{color:#fff;text-decoration:underline;}
.foot-legal .fl-sep{margin:0 10px;color:#6a6a6a;}

/* Legal pages (privacy, terms). Long-form reading, so a measured column and
   ordinary body type - none of the display faces the product pages use. */
.legal-page .legal-body{max-width:820px;margin:0 auto;text-align:left;
  font-family:Arial,Helvetica,sans-serif;font-size:17px;line-height:1.65;color:#2b2b2b;}
.legal-page .legal-body h2{font-family:Oswald,Arial,sans-serif;font-size:clamp(21px,2.6vw,29px) !important;
  font-weight:600;line-height:1.2;color:#191919;margin:32px 0 10px;}
.legal-page .legal-body p{margin:0 0 14px;}
.legal-page .legal-body ul{margin:0 0 16px;padding-left:22px;}
.legal-page .legal-body li{margin:0 0 8px;}
.legal-page .legal-body a{color:#1a4e8a;}
.legal-page .legal-updated{font-family:Arial,sans-serif;font-size:14px;color:#777;margin:8px 0 0;}
@media (max-width:640px){ .legal-page .legal-body{font-size:16px;} }

/* Breadcrumb trail. Deliberately quiet - its job is to match the
   BreadcrumbList markup, which previously described a hierarchy no visitor
   could see. Rendered on every page except the home page. */
/* Colours are set against the steel-grey .ss-container (#B9B9BA), NOT the
   dark footer - the first pass used footer greys here and the trail was
   almost invisible. Dark text, dark-blue link. */
.crumbs{max-width:1400px;margin:0 auto;padding:9px 5% 7px;font-family:Arial,sans-serif;
  font-size:13px;line-height:1.4;color:#3a3a3a;text-align:center;}
.crumbs a{color:#17365c;text-decoration:none;font-weight:600;}
.crumbs a:hover{color:#000;text-decoration:underline;}
.crumbs .crumb-sep{margin:0 7px;color:#5f5f5f;}
.crumbs .crumb-here{color:#2b2b2b;}
@media (max-width:640px){ .crumbs{font-size:12px;padding:8px 6% 2px;} }

/* Back to top. Mobile only - these are long pages and the nav is at the top.
   Hidden until the visitor is far enough down to want it. */
.to-top{position:fixed;right:14px;bottom:16px;z-index:1501;display:none;
  width:46px;height:46px;border:0;border-radius:50%;cursor:pointer;
  background:rgba(25,25,25,.86);color:#fff;font-size:21px;line-height:46px;
  padding:0;text-align:center;box-shadow:0 2px 10px rgba(0,0,0,.45);
  opacity:0;pointer-events:none;transition:opacity .25s ease;
  -webkit-appearance:none;appearance:none;}
.to-top.show{opacity:1;pointer-events:auto;}
@media (max-width:1080px){ .to-top{display:block;} }
/* 47 of the 66 pages carry .quote-fab, which on phones is a full-width bar
   pinned to the bottom. js/site.js adds .has-fab where one exists so this
   button clears it instead of sitting on top of the quote CTA. */
@media (max-width:1080px){ .to-top.has-fab{bottom:80px;} }

/* Scroll reveal */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease, transform .7s ease;}
.reveal.in{opacity:1;transform:none;}

/* Contact form */
.form-wrap{max-width:760px;margin:10px auto 30px;}
.ss-form label{display:block;font-weight:700;color:#333;margin:14px 0 0;font-size:15px;}
.ss-form input[type=text],.ss-form input[type=email],.ss-form input[type=tel],.ss-form select,.ss-form textarea{width:100%;padding:12px;margin-top:6px;border:1px solid #ccc;border-radius:8px;font-size:16px;font-family:inherit;}
.ss-form textarea{resize:vertical;}
.ss-form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.ss-form .captcha-label{background:#faf6ee;border:1px solid var(--line);border-radius:8px;padding:12px 14px;margin-top:18px;}
.ss-form .captcha-label input{max-width:140px;}
.ss-form button{margin-top:18px;background:var(--maroon);color:#fff;border:0;border-radius:8px;padding:14px 30px;font-size:17px;font-weight:700;cursor:pointer;}
.ss-form button:hover{background:var(--maroon-dark);}
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.form-success{max-width:760px;margin:20px auto;background:#e7f6ec;border:1px solid #b6e2c4;border-radius:10px;padding:22px 26px;color:#155f2b;}
.form-success h2{margin-top:0;color:#155f2b;}
.form-errors{max-width:760px;margin:16px auto;background:#fdeaea;border:1px solid #f2b8b8;border-radius:10px;padding:14px 20px;color:#a11;}
.form-errors ul{margin:0;padding-left:20px;}
.contact-locations{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:760px;margin:20px auto 30px;}
.contact-locations h3{color:var(--maroon);margin-bottom:6px;}
@media(max-width:560px){.ss-form-row{grid-template-columns:1fr;}.contact-locations{grid-template-columns:1fr;}}

/* Vault Doors page */
.caption-hero-h1{font-family:"Franklin Gothic Medium","Arial Narrow",Arial,sans-serif;font-weight:700;color:var(--red);letter-spacing:1px;margin:0;line-height:1.02;text-transform:uppercase;}
.caption-section{font-family:"Franklin Gothic Medium","Arial Narrow",Arial,sans-serif;font-weight:700;color:var(--red);letter-spacing:1px;margin:0;line-height:1.05;}
.vd-hero{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:start;}
.vd-hero-img{background:var(--paper);border:1px solid var(--line);border-radius:8px;display:flex;align-items:center;justify-content:center;padding:28px;}
.vd-hero-img img{width:auto;max-height:520px;max-width:100%;object-fit:contain;display:block;}
.vd-hero-features{margin-top:6px;}
.vd-hero-features .spec-grid{margin:0;max-width:none;}
.spec-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:8px 22px;}
@media (max-width:640px){ .spec-grid-2{grid-template-columns:1fr;} }
.vd-stats{display:flex;gap:34px;flex-wrap:wrap;margin-bottom:18px;}
.vd-stat-num{font-family:"Franklin Gothic Medium",Arial,sans-serif;font-size:30px;font-weight:700;color:var(--red);}
.feature-band{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:14px 0 8px;}
.fb-card{border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#fff;}
.fb-card .fb-img{background:var(--paper);display:flex;align-items:center;justify-content:center;height:300px;padding:14px;}
.fb-card .fb-img img{max-height:100%;width:auto;max-width:100%;object-fit:contain;display:block;}
.fb-card .fb-cap{padding:14px 16px;text-align:center;}
.fb-fire{border:2px solid var(--red);border-radius:8px;background:var(--maroon);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:26px 22px;}
.fb-fire .tag{background:var(--red);color:#fff;font:bold 15px/1 Arial;letter-spacing:2px;padding:8px 16px;border-radius:3px;margin-bottom:16px;}
.fb-fire .deg{font-family:"Franklin Gothic Medium","Arial Narrow",Arial,sans-serif;font-size:52px;font-weight:700;color:#FFD54A;line-height:1;}
.fb-fire .lbl{font-size:22px;font-weight:700;color:#fff;margin:8px 0 14px;letter-spacing:1px;}
.fb-fire .sub{font-size:20px;font-weight:700;color:#fff;}
.armory-box{border:2px solid var(--maroon);border-radius:12px;overflow:hidden;margin:8px 3% 30px;display:grid;grid-template-columns:0.8fr 1.2fr;align-items:center;}
.armory-img{background:var(--paper);display:flex;align-items:center;justify-content:center;padding:20px;position:relative;align-self:stretch;}
.armory-img img{width:auto;max-height:100%;max-width:100%;object-fit:contain;max-height:560px;}
.armory-detail{padding:30px 34px;}
.chip-row{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 18px;}
.chip{font:bold 15px Arial;padding:9px 16px;border-radius:20px;background:var(--paper);border:1px solid #d8cfc0;color:#5a3a3a;}
.chip-dark{background:var(--maroon);border-color:var(--maroon);color:#fff;}
.price-row-label{text-align:center;font-family:"Franklin Gothic Medium",Arial,sans-serif;font-weight:800;color:var(--maroon);font-size:1.2em;margin:6px 0 4px;}
.price-row{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin:8px 0 24px;}
.price-tile{flex:1 1 200px;max-width:340px;border:1px solid #d8cfc0;border-radius:10px;padding:16px;text-align:center;}
.price-tile.feat{border:2px solid var(--maroon);background:#f1f1f1;}
.price-dim{font:13px Arial;color:#777;margin-bottom:4px;line-height:1.25;}
.price-amt{font-family:"Franklin Gothic Medium",Arial,sans-serif;font-size:36px;font-weight:800;color:#000;line-height:1.05;}
.price-tile.feat .price-amt{color:var(--red);}
.spec-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 26px;margin:0 0 24px;}
.spec-item{display:flex;gap:10px;align-items:baseline;font-size:19px;font-weight:700;line-height:1.45;color:#111;}
.spec-item .chk{color:var(--red);font-weight:bold;font-size:20px;flex-shrink:0;}
.btn-red{display:inline-block;background:var(--red);color:#fff;font:bold 16px Arial;padding:14px 26px;border-radius:5px;text-decoration:none;}
.btn-red:hover{background:#222222;color:#fff;}
.btn-out{display:inline-block;border:1px solid #999;color:#111;font:bold 16px Arial;padding:14px 26px;border-radius:5px;text-decoration:none;}
.addon-row{display:flex;flex-wrap:wrap;gap:26px;margin-top:22px;padding-top:20px;border-top:1px solid #eadfd0;}
.finish-box{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;margin:22px 3% 8px;border:2px solid var(--maroon);border-radius:12px;overflow:hidden;}
.finish-img{background:var(--paper);display:flex;align-items:center;justify-content:center;padding:30px;}
.finish-img img{max-height:420px;width:auto;object-fit:contain;}
.finish-text{padding:36px 34px;display:flex;flex-direction:column;justify-content:center;gap:12px;}

/* Vault model centered heading */
.vd-model-head{text-align:center;margin:16px 0 8px;}
.vd-model-head h2{font-family:"Franklin Gothic Medium","Arial Narrow",Arial,sans-serif;font-weight:700;color:var(--red);letter-spacing:1px;margin:0;line-height:1.03;text-transform:uppercase;}
.vd-model-head h3{font-family:"Trebuchet MS",Arial,sans-serif;font-weight:700;color:var(--maroon);margin:8px 0 0;}
.gallery-h3,h3.center-block{font-size:1.2em;}

/* Comparison tables */
.cmp-wrap{overflow-x:auto;margin:14px 0;}
.cmp-table{width:100%;border-collapse:collapse;min-width:560px;background:#fff;border:1px solid var(--line);}
.cmp-table th,.cmp-table td{padding:11px 12px;border:1px solid var(--line);text-align:center;font-size:15px;}
.cmp-table thead th{background:var(--maroon);color:#fff;text-transform:uppercase;font-size:13px;letter-spacing:.5px;}
.cmp-table td.price{font-weight:800;color:var(--red);font-family:"Franklin Gothic Medium",Arial,sans-serif;font-size:17px;}
.cmp-table tbody tr:nth-child(even){background:var(--paper);}

/* Lock options / upgrades grid */
.opt-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:20px;margin:16px auto;max-width:1120px;}
.opt-card{border:1px solid var(--line);border-radius:10px;padding:18px 20px;background:#fff;text-align:center;width:250px;display:flex;flex-direction:column;}
.opt-card img{width:100%;height:160px;object-fit:contain;background:var(--paper);border-radius:8px;margin-bottom:12px;display:block;}
.opt-card .opt-price{font-family:"Franklin Gothic Medium",Arial,sans-serif;font-size:26px;font-weight:800;color:var(--red);margin-top:auto;padding-top:8px;}
.opt-card .caption2-maroon{font-size:1.2em;}
@media(max-width:560px){.opt-card{width:100%;}}

/* Bigger CTA button */
.btn-red-lg{display:inline-block;background:var(--red);color:#fff;font:bold 22px Arial;padding:18px 40px;border-radius:6px;text-decoration:none;letter-spacing:.5px;}
.btn-red-lg:hover{background:#222222;color:#fff;}
.cta-center{text-align:center;margin:22px 0;}

/* Centered chip row */
.chip-row.center{justify-content:center;}

/* Section with header OVER a centered photo */
.over-photo{margin:26px 3%;text-align:center;}
.over-photo h2{font-family:"Franklin Gothic Medium","Arial Narrow",Arial,sans-serif;font-size:2.6em;font-weight:700;color:var(--red);letter-spacing:1px;margin:0 0 10px;text-transform:uppercase;}
.over-photo .op-img{max-width:560px;margin:0 auto;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--paper);}
.over-photo .op-img img{width:100%;height:auto;display:block;}
.over-photo .op-price{font-family:"Franklin Gothic Medium",Arial,sans-serif;font-size:2em;font-weight:800;color:var(--red);margin:12px 0 0;}

/* FEATURES label */
.feat-label{text-align:center;font:bold 1.2em Arial;color:var(--maroon);letter-spacing:1px;margin:6px 0 4px;text-transform:uppercase;}

/* Popular options list */
.popular-options{max-width:720px;margin:14px auto;background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:20px 26px;}
.popular-options li{font-size:1.15em;font-weight:700;color:#222;padding:9px 0;border-bottom:1px solid var(--line);list-style:none;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.popular-options li:last-child{border-bottom:0;}
.popular-options li .po-price{color:var(--red);white-space:nowrap;}

/* Designer (Kevin Hand) compact box */
.designer-box{display:flex;align-items:center;gap:22px;max-width:820px;margin:18px auto;border:2px solid var(--maroon);border-radius:10px;padding:16px 22px;}
.designer-box img{width:180px;height:180px;object-fit:cover;border-radius:8px;flex-shrink:0;border:1px solid #000;}
.designer-box .designer-txt{flex:1;}
@media(max-width:560px){.designer-box{flex-direction:column;text-align:center;}.designer-box img{width:150px;height:150px;}}

/* Wood-grain feature section */
.wg-hero{max-width:640px;margin:10px auto 6px;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--paper);}
.wg-hero img{width:100%;height:auto;display:block;}
.wg-price{text-align:center;margin:14px auto;}
.wg-price .big{font-family:"Franklin Gothic Medium","Arial Narrow",Arial,sans-serif;font-size:1.6em;font-weight:700;color:var(--red);letter-spacing:.5px;}
.wg-price .sub{font-weight:700;color:#111;font-size:1.15em;}

/* Video feature (vault room of the week) */
.video-feature{position:relative;display:block;max-width:760px;margin:14px auto;border-radius:10px;overflow:hidden;border:1px solid var(--line);}
.video-feature img{width:100%;height:auto;display:block;}
.play-badge{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:118px;height:118px;border-radius:50%;background:rgba(204,0,0,.9);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px rgba(0,0,0,.4);transition:transform .15s;}
.video-feature:hover .play-badge{transform:translate(-50%,-50%) scale(1.08);}
.play-badge::after{content:"";border-style:solid;border-width:23px 0 23px 37px;border-color:transparent transparent transparent #fff;margin-left:6px;}
.video-cta{text-align:center;font-weight:700;color:var(--maroon);margin:6px 0 0;}

/* Model mini-gallery */
.mini-gallery{display:flex;flex-wrap:nowrap;justify-content:center;gap:12px;margin:8px auto 22px;}
.mini-cell{text-decoration:none;color:#555;text-align:center;flex:1 1 0;min-width:0;max-width:230px;}
.mini-cell img{width:100%;height:230px;object-fit:contain;background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:8px;display:block;transition:box-shadow .15s,transform .15s;}
@media(max-width:820px){.mini-gallery{flex-wrap:wrap;}.mini-cell{flex:0 0 44%;}}
.mini-cell:hover img{box-shadow:0 4px 14px rgba(0,0,0,.15);transform:translateY(-2px);}
.mini-cell span{display:block;margin-top:6px;font-size:13px;font-weight:700;}

/* Vault paint / plating color grid */
.color-grid{display:flex;flex-wrap:nowrap;justify-content:center;gap:10px;margin:16px auto;}
.color-cell{text-align:center;flex:1 1 0;min-width:0;max-width:190px;}
.color-cell img{width:100%;aspect-ratio:1/1;object-fit:contain;background:var(--paper);border:1px solid var(--line);border-radius:8px;display:block;}
.color-cell span{display:block;margin-top:6px;font-size:13px;font-weight:700;color:#444;}
@media(max-width:820px){.color-grid{flex-wrap:wrap;}.color-cell{flex:0 0 130px;}}

/* FAQ */
.faq-list{max-width:1100px;margin:14px auto 24px;}
.faq-item{border:1px solid var(--line);border-radius:8px;margin-bottom:12px;background:#fff;overflow:hidden;}
.faq-item summary{cursor:pointer;list-style:none;padding:22px 28px;font-size:1.6em;font-weight:700;color:var(--maroon);position:relative;line-height:1.25;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:"+";position:absolute;right:26px;top:18px;font-size:1.5em;color:var(--red);}
.faq-item[open] summary::after{content:"\2013";}
.faq-item[open] summary{border-bottom:1px solid var(--line);}
.faq-answer{padding:18px 28px;font-size:21px;line-height:1.65;color:#222;}
.faq-answer p{margin:0;}

/* Testimonials */
.testi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;margin:14px 0;}
.testi-card{margin:0;background:var(--paper);border:1px solid var(--line);border-left:4px solid var(--maroon);border-radius:8px;padding:20px 22px;}
.testi-quote{font-size:17px;line-height:1.6;color:#222;margin:0 0 12px;}
.testi-author{font-weight:700;color:var(--maroon);font-size:15px;}

/* Dealer grid */
/* Bottom link menus (and the dealer/location lists that share this grid) run
   three across on desktop and stack one per row on phones. */
.dealer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:16px 0;}
@media(max-width:760px){ .dealer-grid{grid-template-columns:1fr;} }
.dealer-card{position:relative;display:flex;align-items:center;justify-content:center;text-align:center;min-height:88px;padding:18px;background:var(--paper);border:1px solid var(--line);border-radius:8px;text-decoration:none;color:var(--maroon);font-weight:700;font-size:1.1em;transition:box-shadow .15s,transform .15s;}
.dealer-card:hover{box-shadow:0 4px 16px rgba(0,0,0,.12);transform:translateY(-2px);color:var(--red);}
.dealer-tag{position:absolute;top:8px;right:8px;background:var(--red);color:#fff;font:bold 10px/1 Arial;letter-spacing:1px;padding:4px 8px;border-radius:3px;}

/* Blog */
.blog-wrap{background:#fff;color:#111;padding:28px 5%;font-size:18px;line-height:1.7;}
.blog-wrap h1{color:var(--maroon);font-family:Cambria,Georgia,serif;}
.blog-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px;margin-top:20px;}
.blog-card{border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#fff;transition:box-shadow .2s ease;}
.blog-card:hover{box-shadow:0 4px 16px rgba(0,0,0,.12);}
.blog-card a{text-decoration:none;color:inherit;display:block;padding:18px 20px;}
.blog-card h2{margin:0 0 8px;font-size:1.3em;color:var(--maroon);}
.blog-card .meta{color:#777;font-size:.85em;margin-bottom:8px;}
.blog-article{max-width:820px;margin:0 auto;}
.blog-article .meta{color:#777;margin-bottom:20px;}
.blog-back{display:inline-block;margin-bottom:18px;color:var(--maroon);font-weight:bold;text-decoration:none;}

@media (max-width:1080px){
  /* nav bar row: MENU on the left, Get Quote & Brochure on the right */
  .topnav{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;padding:6px 3%;}
  .hamburger{display:flex;align-items:center;gap:10px;width:100%;flex:1 1 100%;padding:15px 8px;background:transparent;border:0;color:#fff;font:bold 19px Arial;text-transform:uppercase;cursor:pointer;justify-content:center;}
  .hamburger span{display:inline-block;width:26px;height:3px;background:#fff;box-shadow:0 8px 0 #fff, 0 -8px 0 #fff;}
  .hamburger{gap:0;}
  /* vertical rule between the bars and the word, as in the reference */
  .hamburger span{position:relative;margin-right:32px;}
  .hamburger span::after{content:"";position:absolute;left:calc(100% + 15px);top:50%;transform:translateY(-50%);width:2px;height:30px;background:rgba(255,255,255,.8);}
  .topnav a.qq-nav{display:none;}/* moved back into the centered header block */
  .topnav ul.top-level{display:none;flex-basis:100%;flex-direction:column;flex-wrap:nowrap;max-width:none;padding:0;}
  .topnav.open ul.top-level{display:flex;max-height:calc(100vh - 92px);overflow-y:auto;-webkit-overflow-scrolling:touch;}
  .top-level>li{width:100%;border-top:1px solid #555;}
  .top-level>li>a{line-height:1.2;padding:15px 18px;}
  /* collapsed sub-menus with a tap-to-open caret beside the parent */
  .top-level>li.has-sub>a{position:relative;padding-right:52px;}
  .top-level>li.has-sub>a::after{content:"\25BE";position:absolute;right:20px;top:50%;transform:translateY(-50%);font-size:15px;transition:transform .2s;}
  .top-level>li.open-sub>a::after{transform:translateY(-50%) rotate(180deg);}
  .sub-level{display:none;position:static;min-width:0;background:#2b2b2b;border:0;}
  .top-level>li.open-sub>.sub-level{display:block;}
  .sub-level li a{padding-left:34px;border-top:1px solid #4a4a4a;}
  .prod-grid{grid-template-columns:repeat(2,1fr);}
  .video-grid{grid-template-columns:repeat(2,1fr);}
  .three-grid{grid-template-columns:repeat(2,1fr);}
  .showroom-grid{grid-template-columns:repeat(2,1fr);}
  /* center the sticky quote bar on mobile/tablet; old inline quote button is now in the nav */
  .header-phone{justify-content:center;text-align:center;gap:10px 16px;padding:8px 3% 12px;}
  .header-phone .header-phone-new-large{order:1;display:block;width:100%;min-width:0;text-align:center;}
  .header-phone .hp-left{order:2;display:flex;width:100%;justify-content:center;}
  .header-phone .hp-right{order:3;width:100%;text-align:center;}
  .caption-red-2em{font-size:2em;}
  .vd-hero{grid-template-columns:1fr;}
  .feature-band{grid-template-columns:1fr;}
  .armory-box{grid-template-columns:1fr;}
  .finish-box{grid-template-columns:1fr;}
  .spec-grid{grid-template-columns:1fr;}
}
/* ===== Vault-door catalog (shop-style listing) ===== */
.cat-intro{max-width:900px;margin:6px auto 4px;text-align:center;}
.cat-family{margin:34px 0 8px;}
.cat-fam-head{text-align:center;margin-bottom:6px;}
.cat-fam-head h2{font-size:2em;color:var(--maroon);margin:0;}
.cat-fam-head .cat-fam-sub{display:block;color:#333;font-size:1.05em;margin-top:6px;font-weight:600;}
.cat-badge{display:inline-block;background:var(--maroon);color:#fff;font:bold 12px Arial;letter-spacing:.6px;padding:5px 12px;border-radius:20px;text-transform:uppercase;margin-bottom:10px;}
.cat-badge.inswing{background:#555;}
.cat-variant-head{text-align:center;margin:22px 0 4px;}
.cat-variant-head h3{font-size:1.35em;color:#333;margin:0;}
.cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:1080px;margin:16px auto;}
.cat-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,.06);transition:box-shadow .15s,transform .15s;}
.cat-card:hover{box-shadow:0 8px 24px rgba(0,0,0,.12);transform:translateY(-3px);}
.cat-card .cat-img{aspect-ratio:1/1;background:var(--paper);display:flex;align-items:center;justify-content:center;overflow:hidden;padding:12px;}
.cat-card .cat-img img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;}
.cat-card .cat-body{padding:16px 18px 20px;display:flex;flex-direction:column;flex:1;}
.cat-card .cat-title{font-size:1.12em;font-weight:800;color:#111;margin:0 0 4px;}
.cat-card .cat-spec{font-size:.92em;color:#555;line-height:1.45;margin:0 0 12px;flex:1;}
.cat-card .cat-price{font-size:1.5em;font-weight:800;color:var(--red);margin:0 0 12px;}
.cat-card .cat-price .cat-from{font-size:.55em;color:#777;font-weight:700;text-transform:uppercase;letter-spacing:.5px;display:block;}
.cat-card .cat-cta{display:block;text-align:center;background:var(--red);color:#fff;font:bold 15px Arial;padding:12px 10px;border-radius:6px;text-decoration:none;margin-top:auto;}
.cat-card .cat-cta:hover{background:#222222;}
.cat-card.is-placeholder{border:2px dashed #c9c2b4;background:var(--paper);box-shadow:none;}
.cat-card.is-placeholder:hover{transform:none;box-shadow:none;}
.cat-card.is-placeholder .cat-img{background:repeating-linear-gradient(45deg,#efeadf,#efeadf 12px,#e7e1d3 12px,#e7e1d3 24px);color:#a89f8c;font:bold 13px Arial;letter-spacing:1px;text-transform:uppercase;}
.cat-card.is-placeholder .cat-price{color:#8a8272;font-size:1.15em;}
.cat-ph-note{font-size:.85em;color:#8a8272;font-style:italic;margin:0 0 12px;}
.cat-anchor-links{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:920px;margin:14px auto 0;}
.cat-anchor-links a{background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:8px 16px;text-decoration:none;color:var(--maroon);font-weight:700;font-size:.95em;}
.cat-anchor-links a:hover{background:var(--maroon);color:#fff;}
/* Features box under each category */
.cat-featbox{max-width:900px;margin:14px auto 0;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:18px 24px;}
.cat-featbox-head{font-weight:800;color:var(--maroon);font-size:1.1em;text-align:center;margin-bottom:12px;}
.cat-featgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px 24px;}
.cat-feat{display:flex;align-items:flex-start;gap:8px;font-size:.98em;color:#333;}
.cat-feat .chk{color:#1a7a1a;font-weight:800;}
.cat-featnote{text-align:center;margin-top:12px;padding-top:12px;border-top:1px solid var(--line);color:#555;font-size:.95em;}
/* Inward-swing per-model sub-groups */
.inward-model{margin:8px auto 0;}
.inward-model-head{max-width:1080px;margin:16px auto 0;font-weight:800;color:#444;font-size:1.15em;text-align:center;border-top:1px dashed var(--line);padding-top:14px;}
/* Finishes & color swatches */
.swatch-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;max-width:900px;margin:16px auto 0;}
.swatch{display:flex;flex-direction:column;align-items:center;gap:8px;}
.swatch-chip{width:64px;height:64px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--line),0 3px 8px rgba(0,0,0,.15);}
.swatch-wood{background:repeating-linear-gradient(90deg,#7a4a24,#8a5a2c 6px,#6b3f1e 12px);}
.swatch-steel{background:linear-gradient(135deg,#e8ebee,#b9c0c7 40%,#eef1f4 60%,#aab1b8);}
.swatch-label{font-size:.92em;font-weight:700;color:#333;text-align:center;}
/* Master price list */
.pricelist-wrap{display:grid;grid-template-columns:repeat(2,1fr);gap:18px 28px;max-width:1000px;margin:16px auto 0;}
.pricelist-block{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:14px 20px;}
.pricelist-model{font-weight:800;color:var(--maroon);font-size:1.08em;margin-bottom:8px;border-bottom:2px solid var(--line);padding-bottom:6px;}
.pricelist-rows li{display:flex;justify-content:space-between;gap:16px;padding:6px 0;border-bottom:1px solid var(--line);list-style:none;font-weight:700;color:#222;}
.pricelist-rows li:last-child{border-bottom:0;}
.pricelist-rows .po-price{color:var(--red);white-space:nowrap;}
/* Comparison banner (new-vs-existing) */
.compare-banner{max-width:1000px;margin:0 auto;background:linear-gradient(180deg,#fff,var(--paper));border:2px solid var(--maroon);border-radius:14px;padding:24px 28px;text-align:center;}
.compare-tag{display:inline-block;background:var(--red);color:#fff;font:bold 12px Arial;letter-spacing:.7px;text-transform:uppercase;padding:6px 14px;border-radius:20px;}
.compare-tag.alt{background:#555;}
.compare-banner h2{font-size:1.7em;color:var(--maroon);margin:12px 0 8px;}
.compare-banner h2 span{color:#999;font-style:italic;}
.compare-banner p{max-width:760px;margin:0 auto;color:#333;font-size:1.02em;line-height:1.5;}
.compare-jump{display:inline-block;margin-top:14px;color:var(--red);font-weight:800;text-decoration:none;}
.compare-jump:hover{text-decoration:underline;}
/* Embedded existing Defender page */
.existing-divider{max-width:1000px;margin:48px auto 0;text-align:center;border-top:3px dashed var(--maroon);padding-top:26px;}
.existing-divider h2{font-size:2em;color:#555;margin:12px 0 8px;}
.existing-divider p{max-width:760px;margin:0 auto;color:#444;line-height:1.5;}
.existing-frame-wrap{max-width:1200px;margin:18px auto 0;border:6px solid #ddd;border-radius:10px;overflow:hidden;background:#fff;}
.existing-frame{display:block;width:100%;border:0;min-height:600px;}
@media (max-width:900px){.cat-grid{grid-template-columns:repeat(2,1fr);}.swatch-grid{grid-template-columns:repeat(4,1fr);}.pricelist-wrap{grid-template-columns:1fr;}}
@media (max-width:560px){
  .cat-grid{grid-template-columns:repeat(2,1fr);}
  .cat-featgrid{grid-template-columns:repeat(2,1fr);}
  .swatch-grid{grid-template-columns:repeat(3,1fr);}
  .swatch-chip{width:52px;height:52px;}
  .compare-banner h2{font-size:1.35em;}
  .prod-grid{grid-template-columns:repeat(2,1fr);}
  .video-grid{grid-template-columns:repeat(2,1fr);}
  .urgent-box{flex-direction:column;text-align:center;}
  .urgent-box .urgent-img{width:100%;}
  .hp-right{display:none;}
  .price-row{grid-template-columns:1fr;}
  .addon-row{flex-direction:column;gap:14px;}
  .vd-stats{gap:20px;justify-content:center;text-align:center;}
  .vd-stats>div{text-align:center;}
  .showroom-grid,.three-grid,.feature-band,.prod-grid{justify-items:stretch;}
  .showroom-grid .prod-cell,.three-grid .prod-cell,.prod-grid .prod-cell{text-align:center;margin:0 auto;}
  .dealer-grid{justify-content:center;}
}

/* Phone: keep every item heading to ~2 lines by scaling down type.
   !important overrides the inline font-size on section headings. */
@media (max-width:600px){
  .caption-hero-h1{letter-spacing:0;line-height:1.05;}
  .caption-section{letter-spacing:0;line-height:1.1;}
  .vd-model-head{margin:20px 0 6px;}
  .vd-model-head h2{letter-spacing:0;line-height:1.12;}
  .cat-fam-head h2{font-size:1.5em;}
  .compare-banner h2{font-size:1.25em;}
  .designer-name{font-size:1.1em;}
  .designer-quote{font-size:1.02em;}
  .arm-cell .arm-title{font-size:.92em;line-height:1.2;}
  .arm-cell .arm-sub{font-size:.82em;}
  .arm-cell .arm-price{font-size:1.02em;}
  .price-amt{font-size:20px;}
  .price-dim{font-size:12px;}
  .qm-box h2{font-size:1.4em;}
  .reasons .reason-lead{font-size:.96em;}
  h1,h2,h3{overflow-wrap:break-word;}
}

/* ============ 2025 vault-door additions (hero, armory media, popups) ============ */
/* Inline Kevin designer card inside the hero right column */
.designer-inline{display:block;margin:24px 0 0;border:2px solid var(--maroon);border-radius:10px;padding:16px 18px;background:#fff;text-align:left;}
/* Kevin: the photo fills the left, the quote, the name and the client list
   fill the right, and neither side is left with dead space. */
.designer-top{display:flex;flex-direction:row;align-items:stretch;gap:20px;text-align:left;}
.designer-inline img{width:38%;max-width:300px;height:auto;align-self:stretch;object-fit:cover;border-radius:6px;flex-shrink:0;border:0;}
.designer-inline .designer-txt{flex:1;width:100%;}
.designer-inline .designer-clients{margin-top:12px;}
.designer-name{display:block;font-weight:800;color:var(--maroon);font-size:1.5em;}
.designer-quote{margin:10px 0;font-style:italic;font-weight:700;color:#222;font-size:1.35em;line-height:1.45;}
.designer-clients{display:block;font-family:Arial,sans-serif;font-size:17.5px;font-weight:700;color:#222;line-height:1.55;}
@media(max-width:820px){
  .designer-inline{text-align:center;padding:20px 18px;}
  .designer-top{flex-direction:column;align-items:center;gap:16px;}
  .designer-inline img{width:240px;height:240px;}
  .designer-inline .designer-txt{width:100%;}
  .designer-quote{font-size:1.3em;}
  .designer-name{font-size:1.15em;}
}

/* Model photo rows (2-up / 3-up) — uniform, aligned tiles; wrap centers the odd one (2:1) */
.arm-media{display:flex;flex-wrap:wrap;justify-content:center;gap:18px;max-width:1150px;margin:6px auto 14px;padding:0 2%;}
/* 3 x (33.333% - 12px) + 2 x 18px gap lands on exactly 100% of the content box,
   so a sub-pixel rounding error wraps the third photo onto its own line. The
   extra 2px of slack keeps a trio on one row. */
.arm-media.trio>.arm-cell{flex:0 1 calc(33.333% - 14px);}
.arm-media.duo>.arm-cell{flex:0 1 calc(50% - 9px);}
.arm-cell{display:block;text-decoration:none;color:#333;text-align:center;cursor:zoom-in;}
/* Caption sitting over its photo rather than under it. */
.arm-cell .arm-title-top{display:block;margin:0 0 8px;}
/* No box round a photo anywhere on the site - the photo sits on the page. */
.arm-cell .arm-frame{display:flex;align-items:center;justify-content:center;background:transparent;border:0;border-radius:0;overflow:hidden;height:440px;padding:0;box-sizing:border-box;}
.arm-cell img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block;}
@media(max-width:900px){.arm-cell .arm-frame{height:320px;}}
@media(max-width:560px){.arm-cell .arm-frame{height:240px;}}
/* Multi-photo galleries (4/5-across) stay compact so they don't tower */
.arm-media.quad .arm-frame,.arm-media.quint .arm-frame{height:390px;}
@media(max-width:900px){.arm-media.quad .arm-frame,.arm-media.quint .arm-frame{height:300px;}}
@media(max-width:560px){.arm-media.quad .arm-frame,.arm-media.quint .arm-frame{height:240px;}}
/* 4-up row (wood-grain colors) */
.arm-media.quad>.arm-cell{flex:0 1 calc(25% - 14px);}
@media(max-width:640px){.arm-media.quad>.arm-cell{flex-basis:calc(50% - 9px);}}
.arm-media.quint>.arm-cell{flex:0 1 calc(20% - 15px);}
@media(max-width:900px){.arm-media.quint>.arm-cell{flex-basis:calc(33.333% - 12px);}}
@media(max-width:560px){.arm-media.quint>.arm-cell{flex-basis:calc(50% - 9px);}}
.arm-cell .arm-title{display:block;margin-top:8px;font-weight:700;color:var(--maroon);font-size:1.05em;line-height:1.25;}
.arm-cell .arm-sub{display:block;font-size:.92em;color:#333;font-weight:400;line-height:1.3;}
.arm-cell .arm-price{display:block;margin-top:2px;font-weight:800;color:#000;font-size:1.15em;}
@media(max-width:640px){.arm-media.trio>.arm-cell,.arm-media.duo>.arm-cell{flex-basis:calc(50% - 9px);}}
/* landscape photo rows (e.g. double-door) and single-photo rows (e.g. gibraltar) */
.arm-media.solo{max-width:520px;}
/* one photo on its own, centred and large */
.arm-media.solo-wide{max-width:820px;margin:10px auto 16px;justify-content:center;}
.arm-media.solo-wide>.arm-cell{flex:0 0 100%;text-align:center;}
.arm-media.solo-wide .arm-frame{height:auto;padding:0;background:transparent;border:0;}
.arm-media.solo-wide img{width:100%;height:auto;max-height:620px;object-fit:contain;display:block;margin:0 auto;}
.arm-media.solo>.arm-cell{flex-basis:100%;}
.arm-media.solo .arm-frame{height:auto;padding:0;}
/* Iron American Super Size: one wide photo, shown as large as the page allows */
.arm-media.solo.super-size{max-width:1150px;}
.arm-media.solo.super-size .arm-frame{background:transparent;border:0;border-radius:0;}
.arm-media.solo.super-size img{width:100%;height:auto;display:block;border-radius:8px;}
.arm-media.solo img{max-height:none;width:100%;}
/* Bigger photo frames for the vault-door model galleries */
.arm-media.vbig .arm-frame{height:470px;}
@media(max-width:900px){.arm-media.vbig .arm-frame{height:340px;}}
@media(max-width:560px){.arm-media.vbig .arm-frame{height:250px;}}

/* Stacked model panel (features + prices, full width, no side image) */
.model-panel{max-width:1000px;margin:2px auto 30px;border:2px solid var(--maroon);border-radius:12px;padding:26px 30px;background:var(--paper);}
.model-panel .price-row{margin:0 0 6px;}
.model-panel .feat-label{margin-top:12px;}
/* Single clean box (no nested inner box); bigger price + dimension text */
.model-panel .price-tile{border:none;background:transparent;border-radius:0;padding:6px 22px;max-width:none;}
.model-panel .price-tile.feat{border:none;background:transparent;}
.model-panel .price-tile+.price-tile{border-left:1px solid #e3dccd;}
.model-panel .price-dim{font-size:19px;color:#555;font-weight:600;margin-bottom:8px;line-height:1.2;}
.model-panel .price-amt{font-size:52px;line-height:1.02;}
.model-panel .price-tile.feat .price-amt{color:var(--red);}
@media(max-width:560px){
  .model-panel{padding:18px 16px;}
  .model-panel .price-tile{padding:6px 10px;}
  .model-panel .price-tile+.price-tile{border-left:none;}
  .model-panel .price-dim{font-size:15px;}
  .model-panel .price-amt{font-size:34px;}
}

/* Tactical interior gallery — uniform tiles, 2 mobile / 3 tablet / 4 desktop, fills width */
.tac-gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;max-width:1150px;margin:10px auto 8px;padding:0 2%;}
.tac-gallery a{display:block;overflow:hidden;border-radius:8px;border:1px solid var(--line);cursor:zoom-in;line-height:0;}
.tac-gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;transition:transform .18s;}
.tac-gallery a:hover img{transform:scale(1.05);}
@media(max-width:900px){.tac-gallery{grid-template-columns:repeat(3,1fr);}}
@media(max-width:560px){.tac-gallery{grid-template-columns:repeat(2,1fr);}}

/* Lightbox */
.lightbox{position:fixed;inset:0;z-index:2000;background:rgba(0,0,0,.88);display:none;align-items:center;justify-content:center;padding:30px;}
.lightbox.open{display:flex;}
.lightbox .lb-fig{margin:0;max-width:94vw;max-height:94vh;display:flex;flex-direction:column;align-items:center;background:#eef0f2;padding:34px 40px;border-radius:12px;box-shadow:0 14px 50px rgba(0,0,0,.55);}
.lightbox img{max-width:80vw;max-height:74vh;width:auto;height:auto;object-fit:contain;border:0;border-radius:0;box-shadow:none;background:transparent;}
.lightbox figcaption{color:#333;font:bold 16px Arial;margin-top:16px;text-align:center;}
@media(max-width:640px){.lightbox .lb-fig{padding:20px 22px;}.lightbox img{max-width:84vw;}}
.lightbox .lb-close{position:absolute;top:18px;right:26px;background:none;border:0;color:#fff;font-size:44px;line-height:1;cursor:pointer;font-weight:700;}
.lightbox .lb-close:hover{color:#cccccc;}
.mini-gallery a,.photo-gallery a,a.pop{cursor:zoom-in;}
.color-grid img,.opt-card img{cursor:zoom-in;}

/* Mobile "Get Free Quote" floating button + popup form */
.quote-fab{display:none;}
@media(max-width:820px){
  .quote-fab{display:block;position:fixed;left:12px;right:12px;bottom:12px;z-index:1500;}
  .quote-fab button{width:100%;border:0;border-radius:10px;background:var(--red,#383838);color:#fff;font:800 18px 'Trebuchet MS',Arial,sans-serif;padding:15px 10px;box-shadow:0 6px 20px rgba(0,0,0,.35);cursor:pointer;letter-spacing:.3px;}
  .content{padding-bottom:80px;}
}
.quote-modal{position:fixed;inset:0;z-index:2100;background:rgba(0,0,0,.7);display:none;align-items:flex-start;justify-content:center;padding:24px 14px;overflow:auto;}
.quote-modal.open{display:flex;}
.quote-modal .qm-box{background:#fff;border-radius:12px;max-width:520px;width:100%;padding:20px 22px 26px;position:relative;box-shadow:0 20px 60px rgba(0,0,0,.5);}
.quote-modal .qm-box h2{color:var(--maroon);text-align:center;margin:2px 0 4px;font-size:1.5em;}
.quote-modal .qm-box p.qm-sub{text-align:center;margin:0 0 12px;font-size:.95em;color:#333;}
.quote-modal .qm-close{position:absolute;top:8px;right:14px;background:none;border:0;font-size:34px;line-height:1;color:#777;cursor:pointer;font-weight:700;}
.quote-modal .qm-close:hover{color:var(--maroon);}

/* ============ bottom-of-page sections (finishes, hidden door, hatch, release/jigsaw, recent projects) ============ */
/* Hidden Door — image + vertical YouTube Short side by side */
.hidden-media{display:flex;gap:24px;justify-content:center;align-items:stretch;flex-wrap:wrap;max-width:900px;margin:0 auto;}
.hidden-media-img{flex:1 1 380px;max-width:540px;}
.hidden-media-img img{width:100%;height:100%;object-fit:cover;border-radius:10px;border:1px solid var(--line);}
.hidden-media-vid{flex:0 0 300px;width:300px;aspect-ratio:9/16;}
.hidden-media-vid iframe{width:100%;height:100%;border:0;border-radius:10px;}
@media(max-width:560px){.hidden-media-vid{flex-basis:auto;width:100%;max-width:300px;}}

/* Two-up feature blocks (Internal Release + Jig-Saw) */
.feat-duo{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;max-width:1050px;margin:6px auto 10px;padding:0 2%;}
.feat-duo .feat-col{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:18px 20px;text-align:center;}
.feat-duo .feat-col img{width:100%;max-width:360px;height:auto;border-radius:8px;border:1px solid var(--line);margin:0 auto 12px;display:block;cursor:zoom-in;}
.feat-duo .feat-col h3{color:var(--maroon);font-size:1.5em;margin:0 0 8px;text-transform:uppercase;letter-spacing:.5px;}
.feat-duo .feat-col .op-price{display:inline-block;margin:16px auto 0;background:#f1f1f1;border:2px solid var(--maroon);border-radius:10px;padding:8px 26px;font-family:"Franklin Gothic Medium",Arial,sans-serif;font-size:1.7em;font-weight:800;color:var(--red);}
.feat-duo .feat-col p{text-align:left;}
@media(max-width:760px){.feat-duo{grid-template-columns:1fr;}}

/* Recent Projects gallery — 4 desktop / 3 tablet / 3 mobile, uniform tiles, click to enlarge */
.photo-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:1200px;margin:16px auto;padding:0 2%;}
.photo-gallery a{text-decoration:none;color:#444;text-align:center;cursor:zoom-in;}
.photo-gallery img{width:100%;height:360px;object-fit:contain;border:1px solid var(--line);border-radius:8px;background:#fff;padding:8px;box-sizing:border-box;transition:box-shadow .15s,transform .15s;}
.photo-gallery a:hover img{box-shadow:0 6px 18px rgba(0,0,0,.15);transform:translateY(-2px);}
.photo-gallery span{display:block;margin-top:6px;font-size:12.5px;font-weight:700;line-height:1.3;}
@media(max-width:900px){.photo-gallery{grid-template-columns:repeat(3,1fr);}.photo-gallery img{height:260px;}}
@media(max-width:560px){.photo-gallery{grid-template-columns:repeat(2,1fr);gap:10px;}.photo-gallery img{height:200px;}.photo-gallery span{font-size:11px;}}

/* Gun-safe "N reasons" two-column list */
.reasons{display:grid;grid-template-columns:1fr 1fr;gap:14px 30px;max-width:1100px;margin:16px auto;padding:0 2%;}
.reasons .reason{line-height:1.5;}
.reasons .reason-lead{font-weight:800;color:var(--maroon);}
@media(max-width:760px){.reasons{grid-template-columns:1fr;}}
/* image + text feature block (reuses over-photo look) */
.safe-feature{max-width:1000px;margin:8px auto 26px;padding:0 2%;text-align:center;}
.safe-feature img{max-width:520px;width:100%;height:auto;border-radius:10px;border:1px solid var(--line);cursor:zoom-in;}

/* ===== Gun Safes on Sale page: bigger, box-free images; larger headings; less deadspace ===== */
/* Every product photo renders in an identical fixed tile (same width AND height),
   box-free, filled edge-to-edge so open (wider) and closed (taller) shots match. */
/* Model safe photos: 2 per row (opens row / closeds row), uniform tiles with a
   soft backdrop so wide & tall shots read the same size, uncut. */
.gss-page .sale-photos, .model-page .sale-photos{display:flex;flex-wrap:wrap;justify-content:center;gap:20px 18px;max-width:1040px;margin:6px auto 16px;padding:0 2%;}
.gss-page .sale-photos>.arm-cell, .model-page .sale-photos>.arm-cell{flex:0 0 auto;width:calc(50% - 9px);}
.gss-page .sale-photos .arm-frame, .model-page .sale-photos .arm-frame{height:520px;background:transparent;border:0;border-radius:0;display:flex;align-items:flex-end;justify-content:center;padding:0;overflow:visible;}
.gss-page .sale-photos img, .model-page .sale-photos img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block;}
/* Two-row size block: 2 closed-door photos on row 1, one bigger open-door photo on row 2.
   Photos FILL their column width (no fixed height) so both closed shots are the same
   size with no side dead space; the open shot fills the full row width below. */
.gss-page .sale-photos.two-row, .model-page .sale-photos.two-row{display:block;max-width:1000px;}
.gss-page .sale-photos.two-row .sp-closed, .model-page .sale-photos.two-row .sp-closed{display:flex;justify-content:center;align-items:flex-end;gap:26px;}
.gss-page .sale-photos.two-row .sp-closed>.arm-cell, .model-page .sale-photos.two-row .sp-closed>.arm-cell{flex:0 0 auto;}
.gss-page .sale-photos.two-row .sp-closed img, .model-page .sale-photos.two-row .sp-closed img{height:490px;width:auto;max-width:100%;object-fit:contain;display:block;}
.gss-page .sale-photos.two-row .sp-open, .model-page .sale-photos.two-row .sp-open{margin:18px auto 0;text-align:center;}
.gss-page .sale-photos.two-row .sp-open>.arm-cell, .model-page .sale-photos.two-row .sp-open>.arm-cell{display:inline-block;width:auto;max-width:100%;}
.gss-page .sale-photos.two-row .arm-frame, .model-page .sale-photos.two-row .arm-frame{height:auto;background:transparent;border:0;border-radius:0;display:block;padding:0;overflow:visible;}
/* The open-door shot is capped by HEIGHT, not just width, so a tall or square
   source (Tactical 35/50, Iron 35/55) lands at the same height as the wide
   ones (Tactical 48/65, Iron 48/65) instead of towering over them. */
.gss-page .sale-photos.two-row .sp-open img, .model-page .sale-photos.two-row .sp-open img{width:auto;height:auto;max-width:960px;max-height:780px;object-fit:contain;display:block;margin:0 auto;}
/* Stacked, as the owner prefers: both closed doors on one row, the open door
   below. Two lessons are baked in here. Deriving the height from the viewport
   alone starved the photos on wide-but-short screens (164px wide on 1920x800).
   And a fixed 1000px container left a wide empty frame around these safes,
   whose photos are tall and narrow - which reads as "too small" even when the
   photo is not. The container now hugs its contents, and the rows are sized
   generously with a floor. */
.gss-page .sale-photos.two-row, .model-page .sale-photos.two-row{width:-moz-fit-content;width:fit-content;max-width:min(1240px, 94vw);}
.gss-page .sale-photos.two-row .sp-closed img, .model-page .sale-photos.two-row .sp-closed img{height:480px;}
.gss-page .sale-photos.two-row .sp-open img, .model-page .sale-photos.two-row .sp-open img{max-height:520px;}
@supports (height: clamp(1px,2px,3px)) {
  .gss-page .sale-photos.two-row .sp-closed img, .model-page .sale-photos.two-row .sp-closed img{height:clamp(380px, 52vh, 520px);}
  .gss-page .sale-photos.two-row .sp-open img, .model-page .sale-photos.two-row .sp-open img{max-height:clamp(420px, 58vh, 580px);}
}
/* Row-matched grid for Bravo/Crown: closed row and open row each at one height */
.gss-page .sale-grid, .model-page .sale-grid{max-width:1000px;margin:6px auto 16px;padding:0 2%;}
.gss-page .sale-grid .sg-row, .model-page .sale-grid .sg-row{display:flex;justify-content:center;align-items:flex-end;gap:26px;margin:0 0 20px;}
.gss-page .sale-grid .sg-row:last-child, .model-page .sale-grid .sg-row:last-child{margin-bottom:0;}
.gss-page .sale-grid .arm-cell, .model-page .sale-grid .arm-cell{flex:0 0 auto;}
.gss-page .sale-grid .arm-frame, .model-page .sale-grid .arm-frame{background:transparent;border:0;border-radius:0;padding:0;display:block;overflow:visible;height:auto;}
.gss-page .sale-grid img, .model-page .sale-grid img{max-height:none;}
.gss-page .sale-grid .sg-closed img, .model-page .sale-grid .sg-closed img{height:520px;width:auto;max-width:100%;object-fit:contain;display:block;}
.gss-page .sale-grid .sg-open img, .model-page .sale-grid .sg-open img{height:440px;width:auto;max-width:100%;object-fit:contain;display:block;}
/* Series feature thumbnails: 3 per row, shorter, soft backdrop, no dead whitespace */
.gss-page .series-thumbs{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;max-width:1000px;margin:6px auto 14px;padding:0 2%;}
.gss-page .series-thumbs>.arm-cell{flex:0 0 auto;width:calc(33.333% - 10px);}
.gss-page .series-thumbs .arm-frame{height:300px;background:transparent;border:0;border-radius:0;display:flex;align-items:center;justify-content:center;padding:0;overflow:visible;}
.gss-page .series-thumbs img{max-width:100%;max-height:100%;object-fit:contain;}
/* bigger titles; sublines wrap to 2 lines max */
.gss-page .vd-model-head{margin:16px 0 6px;}
/* model dimension line: large, matching the heading weight, price sits below it */
.gss-page .vd-model-head h3{font-weight:800;line-height:1.15;margin:8px auto 0;max-width:1150px;color:var(--maroon);}
/* SERIES headings: name really wide & big, sublines smaller */
.gss-page .series-head h2{letter-spacing:1px;line-height:1.03;}
/* no nowrap: at the model-heading size the longer series names need to wrap */

.gss-page .series-head h3{font-weight:800;line-height:1.18;margin:14px auto 0;max-width:1300px;color:var(--maroon);}
/* Merged Iron Twin Door: two size/price tiles with enlarged dimension line */
.gss-page .twin-prices{max-width:820px;}
.gss-page .twin-prices .price-tile{padding:20px 28px;max-width:380px;}
.gss-page .twin-prices .price-dim.big{font-size:1.5em;color:#555;font-weight:700;margin-bottom:8px;line-height:1.2;}
.gss-page .twin-prices .price-amt{font-size:44px;}
@media(max-width:640px){ .gss-page .twin-prices .price-dim.big{font-size:1.15em;} .gss-page .twin-prices .price-amt{font-size:30px;} }
/* Keep the series feature bullets in 2 columns (avoid the 1-col collapse below 1080px that left dead space) */
.gss-page .series-specs{grid-template-columns:1fr 1fr;}
@media(max-width:560px){ .gss-page .series-specs{grid-template-columns:1fr;} }
.gss-page .model-panel{width:fit-content;max-width:100%;margin:8px auto 14px;padding:14px 34px;}
.gss-page .price-row{margin:0;}
.gss-page .price-tile{flex:0 0 auto;}
/* mobile: center the Owner Special box + keep photos big, headings big */
@media(max-width:760px){
  .gss-page .armory-detail{padding:22px 18px;text-align:center;}
  .gss-page .armory-detail .spec-grid{max-width:340px;margin-left:auto;margin-right:auto;}
  .gss-page .armory-detail .model-panel{margin-left:auto;margin-right:auto;}
}
@media(max-width:640px){
  /* mobile: strict 2-column grid; each tile is the same size, photo shown WHOLE
     (contain = zoomed to fit, never cut) on a soft backdrop that fills the gap. */
  .gss-page .sale-photos, .model-page .sale-photos{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0 3%;}
  .gss-page .sale-photos>.arm-cell, .model-page .sale-photos>.arm-cell{width:auto;}
  .gss-page .sale-photos .arm-frame, .model-page .sale-photos .arm-frame{height:300px;padding:0;border-radius:0;background:transparent;display:block;}
  .gss-page .sale-photos img, .model-page .sale-photos img{width:100%;height:100%;object-fit:contain;display:block;}
  /* Phones: keep the height-match — both cutouts in a row share one height,
     capped to half the row so 2 always fit (matches desktop behavior). */
  .gss-page .sale-photos.two-row .sp-closed, .model-page .sale-photos.two-row .sp-closed{display:flex;justify-content:center;align-items:flex-end;gap:2%;}
  .gss-page .sale-photos.two-row .sp-closed>.arm-cell, .model-page .sale-photos.two-row .sp-closed>.arm-cell{flex:0 0 auto;max-width:49%;}
  .gss-page .sale-photos.two-row .arm-frame, .model-page .sale-photos.two-row .arm-frame{height:auto;}
  .gss-page .sale-photos.two-row .sp-closed img, .model-page .sale-photos.two-row .sp-closed img{height:220px;width:auto;max-width:100%;object-fit:contain;}
  .gss-page .sale-photos.two-row .sp-open, .model-page .sale-photos.two-row .sp-open{margin-top:10px;}
  .gss-page .sale-photos.two-row .sp-open>.arm-cell, .model-page .sale-photos.two-row .sp-open>.arm-cell{max-width:100%;}
  /* Same height cap as desktop, scaled for phones: the open-door shot is
     bounded by height rather than stretched to full width, so a tall or
     square source no longer towers over the wide ones. */
  /* Same idea as desktop: heading, price and the closed pair cost about
     500px on a phone, so the open shot takes what is left, never more
     than 300px - keeps each model on one screen without going huge. */
  .gss-page .sale-photos.two-row .sp-open img, .model-page .sale-photos.two-row .sp-open img{width:auto;max-width:100%;height:auto;max-height:300px;margin:0 auto;}
  @supports (height: min(1px,2px)) {
    .gss-page .sale-photos.two-row .sp-open img, .model-page .sale-photos.two-row .sp-open img{max-height:min(300px, calc(100vh - 500px));}
  }
  .gss-page .sale-grid, .model-page .sale-grid{padding:0 3%;}
  .gss-page .sale-grid .sg-row, .model-page .sale-grid .sg-row{display:flex;justify-content:center;align-items:flex-end;gap:2%;margin-bottom:14px;}
  .gss-page .sale-grid .sg-row>.arm-cell, .model-page .sale-grid .sg-row>.arm-cell{flex:0 0 auto;max-width:49%;}
  .gss-page .sale-grid .sg-closed img, .model-page .sale-grid .sg-closed img{height:240px;width:auto;max-width:100%;object-fit:contain;}
  /* Open row: size each cell in proportion to its cut-out's aspect ratio (--ar,
     emitted per image) so both safes render at the SAME height. Sizing them to
     equal WIDTH made the narrower cut-out look taller than its partner. */
  .gss-page .sale-grid .sg-open>.arm-cell, .model-page .sale-grid .sg-open>.arm-cell{flex:var(--ar,1) 1 0;max-width:none;min-width:0;}
  .gss-page .sale-grid .sg-open img, .model-page .sale-grid .sg-open img{width:100%;height:auto;max-height:240px;object-fit:contain;}
  .gss-page .series-thumbs{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0 3%;}
  .gss-page .series-thumbs>.arm-cell{width:auto;}
  .gss-page .series-thumbs .arm-frame{height:190px;padding:0;border-radius:0;background:transparent;display:block;}
  .gss-page .series-thumbs img{width:100%;height:100%;object-fit:contain;display:block;}
  .gss-page .series-head h2{white-space:normal;}
}

/* ===== Sargent page: box-free galleries (no borders on color chart / photo rows) ===== */
.model-page .arm-cell .arm-frame{border:0;background:transparent;}
.model-page .armory-box .armory-img{background:transparent;}
.model-page .options-big{max-width:1120px;margin-left:auto;margin-right:auto;}
.model-page .options-big .caption-section{line-height:1.02;}
.model-page .options-big .sub-black{font-size:2.6em !important;display:inline-block;margin-top:6px;line-height:1.15;}
  .model-page .options-big .sub-black{font-size:1.5em !important;}
.model-page .options-big .reasons{font-size:1.12em;}
.model-page .yt-embed{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;border-radius:10px;}
.model-page .yt-embed iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0;}
.model-page .vid-img-row{display:grid;grid-template-columns:1.5fr 1fr;gap:22px;align-items:center;max-width:1000px;margin:0 auto;}
@media(max-width:760px){ .model-page .vid-img-row{grid-template-columns:repeat(2,1fr);} }

/* ===== Round: GSS backdrops off + larger owner pic; Sargent tweaks ===== */
/* GSS hero: big H1 kept on ONE line (scales with viewport, never wraps) + two equivalent sub-lines */
.gss-page .caption-hero-h1{white-space:nowrap;letter-spacing:1px;}
.gss-page .text-block-cntrd:has(.caption-hero-h1) .sub-black{display:block;font-weight:700;line-height:1.32;color:var(--maroon);margin-top:4px;}
@media(max-width:900px){
}
/* GSS: remove backdrop behind main hero + owner-special photos; enlarge owner pic */
.gss-page .vd-hero-img{background:transparent;border:0;padding:0;}
.gss-page .armory-img{background:transparent;}
.gss-page .armory-box{grid-template-columns:1fr 1.02fr;}
.gss-page .armory-img img{max-height:640px;}
/* Owner Special: centered single column — heading & title above the photo, then specs + price. No dead space. */
.gss-page .owner-special-c{border:2px solid var(--maroon);border-radius:12px;padding:24px 28px 26px;}
.gss-page .owner-special-c .os-photo{margin:0 auto;text-align:center;}
.gss-page .owner-special-c .os-photo img{width:100%;max-width:720px;height:auto;display:block;margin:0 auto;}
.gss-page .owner-special-c .os-specs{display:grid;grid-template-columns:1fr 1fr;gap:12px 34px;max-width:680px;margin:18px auto 0;text-align:left;}
@media(max-width:640px){ .gss-page .owner-special-c .os-specs{grid-template-columns:1fr;max-width:340px;} }
@media(max-width:640px){ .gss-page .owner-special-c{padding:18px 16px 20px;} .gss-page .owner-special-c .os-specs{max-width:340px;} }
/* Sargent: uniform section-heading size across the page */
/* narrower top box with bigger Standard-Features text */
.model-page .top-armory{max-width:1040px;margin-left:auto;margin-right:auto;}
.model-page .top-armory .spec-item{font-size:1.22em;}
/* bigger 4-photo row */
.model-page .arm-media.quad .arm-frame{height:480px;}
@media(max-width:900px){.model-page .arm-media.quad .arm-frame{height:340px;}}
/* video (right) is wider than the black safe (left) */
.model-page .vid-img-row{grid-template-columns:1fr 1.5fr;}

/* Sargent: black standard-color safe + 4 photos beside it (large, gss-style) */
.model-page .model-showcase{display:grid;grid-template-columns:1fr 1.4fr;gap:24px;align-items:center;max-width:1140px;margin:0 auto 10px;}
/* Detail photos now sit on their own below the standard finishes */
.model-page .ss-photos{max-width:1140px;margin:22px auto 0;}
/* Standard features row: two included colours + the 2" step door, all one size */
.std-feat-sec{margin:22px 0 6px;}
.std-feat{display:grid;grid-template-columns:repeat(3,1fr);gap:8px 26px;
  max-width:1040px;margin:0 auto;padding:0 2%;align-items:end;}
.std-head{grid-row:1;font-family:var(--font-sub);text-align:center;color:var(--maroon);
  letter-spacing:2px;font-size:1.5em;margin:0 0 6px;text-transform:uppercase;}
.std-head-colors{grid-column:1 / span 2;}
.std-head-feature{grid-column:3 / span 1;}
.std-cell{grid-row:2;margin:0;display:flex;flex-direction:column;gap:6px;text-align:center;}
.std-cell a{display:block;line-height:0;cursor:zoom-in;}
/* one fixed box for all three so they read as the same size */
.std-cell img{width:100%;height:470px;object-fit:contain;display:block;margin:0 auto;}
.std-cell figcaption{font-family:var(--font-sub);font-size:1.1em;color:var(--black);letter-spacing:1px;}
/* Colours and feature photos as centred rows rather than fixed grid columns.
   Fixed columns padded each photo with dead space because these safes are tall
   and narrow; a centred row at one shared height keeps them together and lets
   them run bigger. Same idea as the closed-door rows on the sale page. */
.std-feat-rows{max-width:1100px;margin:0 auto;padding:0 2%;}
.std-feat-rows .std-head{text-align:center;margin:0 0 14px;}
.std-row{display:flex;justify-content:center;align-items:flex-end;gap:30px;margin-bottom:22px;}
.std-row:last-child{margin-bottom:0;}
.std-row .std-cell{margin:0;display:flex;flex-direction:column;gap:8px;text-align:center;}
.std-row .std-cell a{display:block;line-height:0;cursor:zoom-in;}
.std-row .std-cell img{height:560px;width:auto;max-width:100%;object-fit:contain;display:block;margin:0 auto;}
.std-row-colors .std-cell img{height:735px;}
@supports (height: clamp(1px,2px,3px)) {
  .std-row .std-cell img{height:clamp(340px, 52vh, 600px);}
  .std-row-colors .std-cell img{height:clamp(432px, 69vh, 778px);}
}
@media(max-width:760px){
  .std-row{gap:3%;}
  .std-row .std-cell{max-width:48%;}
  .std-row .std-cell img{height:280px;}
  .std-row-colors .std-cell img{height:368px;}
}

/* Aspect-fitted photo row: one shared height, widths from each photo's own
   shape, centred and close together - no padded frames. */
.arm-media.arm-fit{gap:22px;flex-wrap:nowrap;align-items:flex-end;}
.arm-media.arm-fit>.arm-cell{flex:0 0 auto;max-width:none;}
.arm-media.arm-fit .arm-frame{height:auto;background:transparent;border:0;border-radius:0;padding:0;display:block;overflow:visible;}
.arm-media.arm-fit .arm-frame img{height:560px;width:auto;max-width:100%;object-fit:contain;display:block;}
@supports (height: clamp(1px,2px,3px)) {
  .arm-media.arm-fit .arm-frame img{height:clamp(340px, 52vh, 600px);}
}
.arm-media.arm-fit .arm-title{display:block;margin-top:10px;}
/* Lock line-up: frames hug the photo instead of padding it out to a fixed
   height, which was leaving a gap between each lock and its caption. */
.arm-media.quad.lock-row .arm-frame{height:auto;padding:0;background:transparent;border:0;border-radius:0;display:block;}
.arm-media.quad.lock-row .arm-frame img{width:100%;height:auto;display:block;}
.arm-media.quad.lock-row .arm-title{display:block;margin-top:10px;}
/* Hero pair: the two lead photos side by side with the copy underneath. */
.hero-pair{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:end;max-width:1140px;margin:0 auto 14px;padding:0 2%;}
.hero-pair figure{margin:0;text-align:center;}
.hero-pair a{display:block;line-height:0;cursor:zoom-in;}
.hero-pair img{width:100%;height:auto;object-fit:contain;display:block;}
.hero-pair figcaption{font-family:var(--font-sub);font-size:1.05em;color:var(--black);letter-spacing:1px;margin-top:8px;}
@media(max-width:760px){.hero-pair{grid-template-columns:1fr 1fr;gap:3%;}.hero-pair figcaption{font-size:.85em;}}

/* Feature spread: one large photo beside a grid of supporting shots. */
.big-left{display:grid;grid-template-columns:1.15fr 1fr;gap:24px;align-items:start;max-width:1180px;margin:0 auto 10px;padding:0 2%;}
.big-left>.bl-main a{display:block;line-height:0;cursor:zoom-in;}
.big-left>.bl-main img{width:100%;height:auto;display:block;border-radius:4px;}
.big-left>.bl-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;align-content:start;}
.big-left>.bl-grid a{display:block;line-height:0;cursor:zoom-in;}
.big-left>.bl-grid img{width:100%;height:auto;display:block;border-radius:4px;}
@media(max-width:860px){.big-left{grid-template-columns:1fr;gap:16px;}
  .big-left>.bl-grid{grid-template-columns:repeat(3,1fr);} }

/* Stacked feature photos sit side by side instead. */
.feat-col .stack-pair{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start;}
.feat-col .stack-pair img{width:100%;height:auto;display:block;margin:0;}
/* Model-page section headings match the sale page's scale. */
.model-page .vd-model-head{margin:16px 0 6px;}
.model-page .vd-model-head h2{line-height:1.02;}
.model-page .vd-model-head h3{font-weight:800;line-height:1.15;margin:8px auto 0;max-width:1150px;color:var(--maroon);}
@media(max-width:900px){
}
@media(max-width:560px){
  .model-page .vd-model-head h2{line-height:1.05;}
  .model-page .vd-model-head h3{line-height:1.2;}
}

/* Single lead photo, run large. */
.hero-solo{max-width:1000px;margin:0 auto 10px;padding:0 2%;text-align:center;}
.hero-solo a{display:block;line-height:0;cursor:zoom-in;}
.hero-solo img{width:100%;height:auto;display:block;border-radius:4px;}
.hero-solo-cap{display:block;font-family:var(--font-sub);font-size:1.15em;color:var(--black);letter-spacing:1px;margin-top:10px;}

/* Why-buy copy beside the second lead photo. */
.why-duo{display:grid;grid-template-columns:1.25fr .75fr;gap:28px;align-items:center;max-width:1150px;margin:0 auto;padding:0 2%;}
.why-duo figure{margin:0;text-align:center;}
.why-duo a{display:block;line-height:0;cursor:zoom-in;}
.why-duo img{width:100%;height:auto;display:block;border-radius:4px;}
.why-duo figcaption{font-family:var(--font-sub);font-size:1.05em;color:var(--black);letter-spacing:1px;margin-top:8px;}
@media(max-width:860px){.why-duo{grid-template-columns:1fr;gap:16px;}}


@media(max-width:900px){.arm-media.quad.lock-row .arm-frame{height:auto;}}
@media(max-width:560px){.arm-media.quad.lock-row .arm-frame{height:auto;}}
@media(max-width:760px){
  .arm-media.arm-fit{gap:3%;}
  .arm-media.arm-fit>.arm-cell{max-width:48%;}
  .arm-media.arm-fit .arm-frame img{height:260px;}
}

/* Internal-linking menu: three across. */
.rel-grid{max-width:1000px;margin-left:auto;margin-right:auto;}
@media(max-width:760px){
  /* two per row: the colours share a row, the step door takes the next */
  .std-feat{grid-template-columns:repeat(2,1fr);gap:6px 14px;}
  .std-head-colors{grid-row:1;grid-column:1 / span 2;}
  .std-cell:nth-of-type(1){grid-row:2;grid-column:1;}
  .std-cell:nth-of-type(2){grid-row:2;grid-column:2;}
  .std-head-feature{grid-row:3;grid-column:1 / span 2;margin-top:14px;}
  .std-cell-feature{grid-row:4;grid-column:1 / span 2;max-width:60%;margin:0 auto;}
  .std-cell img{height:300px;}
  .std-head{font-size:1.25em;}
}

/* Custom colour wall: bigger photos, no frame or panel behind them */
.model-page .model-colors{display:grid;grid-template-columns:repeat(4,1fr);gap:18px 20px;max-width:1240px;margin:8px auto 14px;padding:0 2%;}
.model-page .model-colors .sc-cell{display:block;text-align:center;text-decoration:none;}
.model-page .model-colors img{width:100%;height:400px;object-fit:contain;display:block;}
.model-page .model-colors .sc-name{display:block;margin-top:4px;font-family:var(--font-sub);font-size:1.12em;color:var(--black);letter-spacing:.5px;}
@media(max-width:1080px){.model-page .model-colors{grid-template-columns:repeat(3,1fr);}.model-page .model-colors img{height:330px;}}
@media(max-width:760px){.model-page .model-colors{grid-template-columns:repeat(2,1fr);gap:14px 12px;}.model-page .model-colors img{height:250px;}}
@media(max-width:400px){.model-page .model-colors img{height:210px;}}
/* Photo rows hug their images instead of padding them inside a fixed box,
   which was leaving vertical gaps under the shorter shots. */
.model-page .arm-media.duo .arm-frame,
.model-page .arm-media.trio .arm-frame{height:auto;padding:0;background:transparent;border:0;}
/* One shared height per row so every photo in a row is the same size. contain
   means nothing is ever cropped - a taller shot just sits inside the height. */
.model-page .arm-media.duo .arm-frame img{width:100%;height:430px;object-fit:contain;display:block;}
.model-page .arm-media.trio .arm-frame img{width:100%;height:330px;object-fit:contain;display:block;}
@media(max-width:1080px){
  .model-page .arm-media.duo .arm-frame img{height:320px;}
  .model-page .arm-media.trio .arm-frame img{height:250px;}}
@media(max-width:760px){
  .model-page .arm-media.duo .arm-frame img,
  .model-page .arm-media.trio .arm-frame img{height:min(210px,28vw);}}
.model-page .arm-media.duo,
.model-page .arm-media.trio{align-items:flex-end;}

/* Colours & Accents runs wider - five across on a desktop. */
.model-page .model-colors.colors-wide{max-width:1320px;}
@media(min-width:1100px){
  .model-page .model-colors.colors-wide{grid-template-columns:repeat(5,1fr);}
  .model-page .model-colors.colors-wide img{height:330px;}
}

/* ============ Vault door pages: section sub-headings and price tiles ============
   Scoped to .vd-page so the shared .vd-model-head markup on the other pages is
   untouched. Sub-headings run the same width as the description under them. */
.vd-page .vd-model-head h3{font-family:var(--font-sub);font-weight:800;
  line-height:1.15;color:var(--maroon);max-width:1360px;margin:10px auto 0;padding:0 2%;}
.vd-page .feat-label{font:bold 1.85em var(--font-sub);color:var(--maroon);letter-spacing:1px;
  margin:14px 0 8px;text-transform:uppercase;}
/* section lede under a heading: reads as a line of the page, not fine print */
.vd-page .vd-lede{font-family:var(--font-sub);font-size:1.7em;font-weight:700;line-height:1.25;
  color:var(--black);text-align:center;max-width:900px;margin:6px auto 10px;padding:0 2%;}
/* price tiles at the weight of the Sargent option cards */
.vd-page .price-row{gap:16px;margin:12px 0 26px;}
.vd-page .price-tile{flex:1 1 230px;max-width:380px;border:2px solid var(--charcoal);
  border-radius:12px;padding:20px 18px;box-shadow:0 2px 5px rgba(0,0,0,.12);background:#fff;}
.vd-page .price-tile.feat{border-left:9px solid var(--brand-gold);}
.vd-page .price-dim{font-family:var(--font-sub);font-size:17px;font-weight:600;color:#444;
  margin-bottom:6px;line-height:1.3;}
.vd-page .price-amt{font-family:var(--font-head);font-size:48px;font-weight:400;letter-spacing:.5px;}
@media(max-width:760px){
  .vd-page .vd-lede{font-size:1.2em;}
  .vd-page .feat-label{font-size:1.3em;}
  .vd-page .price-amt{font-size:32px;}
  .vd-page .price-dim{font-size:14px;}
}
/* Double Door: hero photo above the pair */
.arm-media.dd-hero{max-width:900px;}
.arm-media.dd-hero img{max-height:560px;}

/* Sargent hero: same scale and rhythm as the model headings on Gun Safes on Sale */
.model-hero-name,.sarge-hero-name{font-family:var(--font-head);font-size:clamp(34px,7vw,92px);line-height:1.02;
  letter-spacing:1px;color:var(--red);margin:0;text-transform:uppercase;}
.model-hero-size,.sarge-hero-size{font-family:var(--font-sub);font-size:clamp(20px,3.4vw,46px);font-weight:800;
  line-height:1.15;color:var(--maroon);margin:8px 0 0;}
.model-hero-price,.sarge-hero-price{color:var(--black);}
.model-hero-tag,.sarge-hero-tag{font-family:var(--font-sub);font-size:clamp(20px,3vw,42px);font-weight:700;
  line-height:1.2;color:var(--black);margin:10px 0 0;}
.model-hero-usa,.sarge-hero-usa{font-family:var(--font-sub);font-size:clamp(18px,2.6vw,36px);font-weight:800;
  line-height:1.2;color:var(--maroon);margin:6px 0 0;letter-spacing:.5px;}

/* Available options: each option reads as its own priced card */
.model-page .opt-price-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 22px;max-width:1060px;margin:18px auto 4px;}
.model-page .opt-price{display:flex;align-items:center;justify-content:space-between;gap:14px;
  background:#fff;border:2px solid var(--charcoal);border-left:9px solid var(--brand-gold);
  border-radius:10px;padding:12px 14px 12px 16px;box-shadow:0 2px 5px rgba(0,0,0,.12);}
.model-page .opt-price .opt-name{font-family:var(--font-head);font-size:1.2em;line-height:1.15;letter-spacing:.5px;color:var(--black);}
.model-page .opt-price .opt-cost{flex:0 0 auto;font-family:var(--font-head);font-size:1.32em;letter-spacing:.5px;
  color:var(--brand-gold);background:var(--charcoal);border-radius:7px;padding:6px 13px;white-space:nowrap;}
@media(max-width:760px){.model-page .opt-price-grid{grid-template-columns:1fr;gap:10px;}
  .model-page .opt-price .opt-name{font-size:1.05em;}.model-page .opt-price .opt-cost{font-size:1.15em;}}
.model-page .ss-black img{width:100%;border-radius:8px;display:block;}
.model-page .ss-photos{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.model-page .ss-photos .ss-photo{margin:0;display:flex;flex-direction:column;gap:6px;text-align:center;}
.model-page .ss-photos figcaption{font-family:var(--font-sub);font-size:1.15em;color:var(--black);letter-spacing:.5px;line-height:1.25;}
.model-page .ss-photos a{display:block;}
.model-page .ss-photos img{width:100%;height:250px;object-fit:contain;display:block;}
@media(max-width:1080px){.model-page .ss-photos{grid-template-columns:1fr 1fr;}}
@media(max-width:760px){.model-page .model-showcase{grid-template-columns:1fr;}.model-page .ss-photos img{height:180px;}}

/* ============ Steel brushed-texture header (owner-supplied background) ============ */
.ss-container{background:var(--steel-gray);}
/* One continuous steel-texture panel behind the whole header (logo + titles + phone + get-quote) */
.header-steel{background:linear-gradient(rgba(25,25,20,.08),rgba(25,25,20,.20)), #b9b9ba url(/images-new/header-steel-bg.png) center/cover no-repeat;}
.masthead{background:transparent;}
.header-phone{background:transparent;border-bottom:0;}
/* Solid BOLD WHITE headings (drop shadow only, no outline) */
.masthead-title{color:#fff;-webkit-text-stroke:1.3px #fff;text-shadow:0 3px 7px rgba(0,0,0,.6),0 1px 2px rgba(0,0,0,.65);}
.masthead-title .ms-since{color:var(--brand-gold);-webkit-text-stroke:1.3px var(--brand-gold);text-shadow:0 3px 7px rgba(0,0,0,.55),0 1px 2px rgba(0,0,0,.65);}
.masthead-tagline{color:#fff;text-shadow:0 3px 7px rgba(0,0,0,.55),0 1px 2px rgba(0,0,0,.65);}
.header-phone3, .header-phone3 a, .header-phone3 .loc-lines{color:#fff;text-shadow:0 2px 5px rgba(0,0,0,.65),0 1px 2px rgba(0,0,0,.7);}
.header-phone3 .loc-title{color:var(--brand-gold);text-shadow:0 2px 5px rgba(0,0,0,.55);}
.header-phone3 .loc-sep{color:#fff;}
/* GET QUOTE + brochure line in black */
.header-phone .header-phone-new-large, .header-phone .header-phone-new-large a{color:#fff;text-shadow:0 2px 5px rgba(0,0,0,.65),0 1px 2px rgba(0,0,0,.7);}
.header-phone .header-phone-new, .header-phone a.link-header-large{color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.6);}

/* ============ Typography system — Anton (headings/CTAs/numbers), Oswald (subheads), Roboto (body) ============ */
h1,h2,.caption-hero-h1,.caption-section,.caption-red-2em,
.vd-model-head h2,.series-head h2,.masthead-title,
.price-amt,.call-big,.btn-red,.btn-red-lg,.cat-card .cat-cta,.header-phone a.qq-btn,
.header-phone-new-large,.po-price,.twin-prices .price-dim.big,.quote-fab button,.quote-open{
  font-family:var(--font-head);font-weight:400;letter-spacing:.5px;
}
h3,.vd-model-head h3,.series-head h3,.masthead-tagline,.sub-black,.caption2-maroon,
.price-dim,.price-row-label,.designer-name,.header-phone3 .loc-title,.arm-title{
  font-family:var(--font-sub);
}
body,.topnav,.top-level,.font-body-text,.font-body-text-1plus,.spec-item,.designer-quote,
.designer-clients,.qm-sub,p,li,.header-phone3 .loc-lines,.header-phone-new{
  font-family:var(--font-body);
}

/* ============ Header headline type — Arial Black with a beveled 3D emboss ============
   Matches the reference header the owner supplied: heavy neo-grotesque caps with a
   raised/extruded edge rather than the flat outline used before. Declared after the
   typography system above so it wins for the header only. */
.masthead-title,.masthead-tagline,
.header-phone3 .loc-title,.header-phone3 .loc-lines,
.header-phone .header-phone-new-large,.header-phone a.qq-btn{
  font-family:var(--font-head-blk);
  font-weight:900;
  letter-spacing:.4px;
}
/* The bevel: hard stacked steps read as an extruded edge, the soft pair below cast it
   off the steel, and the top-left highlight lifts it. Steps are tinted per text colour. */
.masthead-title,.masthead-tagline,
.header-phone3 .loc-lines,.header-phone .header-phone-new-large{
  -webkit-text-stroke:0;
  text-shadow:
    -1px -1px 0 rgba(255,255,255,.45),
     0 1px 0 #9a9a9a, 0 2px 0 #7d7d7d, 0 3px 0 #626262,
     0 4px 2px rgba(0,0,0,.45),
     0 7px 14px rgba(0,0,0,.5);
}
.masthead-title .ms-since,.masthead-title .ms-dash,.header-phone3 .loc-title{
  color:var(--brand-gold);
  -webkit-text-stroke:0;
  text-shadow:
    -1px -1px 0 rgba(255,255,255,.35),
     0 1px 0 #a8791a, 0 2px 0 #8a6215, 0 3px 0 #6b4b10,
     0 4px 2px rgba(0,0,0,.45),
     0 7px 14px rgba(0,0,0,.5);
}
.header-phone3 .loc-lines a,.header-phone .header-phone-new-large a{color:inherit;text-shadow:inherit;}

/* ============ Gun Safes on Sale — larger section headings on phones ============
   The generic phone rules cap every h2 at ~1.55em with !important; this page's
   model names are its main signposts, so they get their own, larger scale. */
@media (max-width:1080px){
  .gss-page .vd-model-head h2{line-height:1.05;}
  .gss-page .vd-model-head h3{line-height:1.2;}
  .gss-page .caption-section{line-height:1.06;}
  .gss-page .series-head h2{line-height:1.05;}
  .gss-page .series-head h3{line-height:1.22;}
  .gss-page .caption-hero-h1{line-height:1.05;}
}

/* Gallery hub: links out to the pages that actually sell the product */
/* Custom vault interiors: four wide interior shots, two per row on phones */
.cvi-grid{grid-template-columns:repeat(4,1fr);max-width:1240px;gap:14px;}
.cvi-grid img{height:330px;object-fit:cover;}
@media(max-width:900px){.cvi-grid{grid-template-columns:repeat(2,1fr);}.cvi-grid img{height:250px;}}
@media(max-width:560px){.cvi-grid img{height:180px;}}

.gal-links{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 12px;max-width:1000px;margin:10px auto 0;padding:0 2%;}
.gal-link{display:inline-block;font-family:var(--font-sub);font-size:1.05em;letter-spacing:.4px;
  color:var(--black);background:#fff;border:2px solid var(--charcoal);border-radius:8px;
  padding:9px 16px;text-decoration:none;transition:background .15s,color .15s;}
.gal-link:hover,.gal-link:focus{background:var(--charcoal);color:#fff;}

/* ============ Photo wall (recovered product photography) ============ */
.photo-wall-sec{margin:18px 0 6px;}
.photo-wall{display:grid;grid-template-columns:repeat(5,1fr);gap:18px 14px;
  max-width:1240px;margin:14px auto 0;padding:0 2%;}
.photo-wall .pw-cell{margin:0;display:flex;flex-direction:column;gap:6px;}
.photo-wall a{display:block;line-height:0;cursor:zoom-in;}
/* No box round the shot - the photo sits on the page, same height in every cell.
   object-fit:contain so nothing is ever cropped. */
.photo-wall img{width:100%;height:185px;object-fit:contain;display:block;background:transparent;
  border:0;border-radius:0;padding:0;box-sizing:border-box;
  transition:box-shadow .15s,transform .15s;}
.photo-wall a:hover img{box-shadow:0 6px 18px rgba(0,0,0,.15);transform:translateY(-2px);}
.photo-wall figcaption{font-family:var(--font-body);font-size:12.5px;line-height:1.35;
  color:#444;text-align:center;}
@media(max-width:1080px){.photo-wall{grid-template-columns:repeat(3,1fr);}
  .photo-wall img{height:200px;}}
@media(max-width:760px){.photo-wall{grid-template-columns:repeat(2,1fr);gap:14px 12px;}
  .photo-wall img{height:165px;}.photo-wall figcaption{font-size:11.5px;}}

/* ============ Phone + tablet header sizing (<=1080) ============
   vw-based so every line fills the screen width at any phone size instead of
   stepping between fixed values. Declared after the base rules above, which are
   later in the file and would otherwise win. Ceilings stop growth at the 1080 end. */
@media (max-width:1080px){
  .masthead-title{font-size:clamp(19px,6.1vw,58px);letter-spacing:0;white-space:normal;}
  .masthead-tagline{font-size:clamp(17px,5.4vw,50px);letter-spacing:.5px;white-space:normal;}
  .header-phone3 .loc-title{font-size:clamp(14px,4.6vw,42px);letter-spacing:1px;white-space:nowrap;}
  .header-phone3 .loc-lines{font-size:clamp(15px,5vw,44px);line-height:1.5;white-space:normal;}
  .header-phone .header-phone-new-large{font-size:clamp(18px,6vw,52px);white-space:nowrap;}
  /* --- match the owner's reference header on phones --- */
  /* tagline in normal capitals, as in the reference */
  .masthead-tagline{text-transform:none;}
  /* gold em-dash leads the SINCE 1978 line */
  .masthead-title .ms-since::before{content:"\2014\00a0";}
  /* Kevin: on a phone the GET QUOTE number went black against the grey steel
     and disappeared. White, lifted off the plate with a dark shadow, the same
     treatment the number gets on desktop. */
  .header-phone .header-phone-new-large,
  .header-phone .header-phone-new-large a{
    color:#fff;
    text-shadow:0 2px 5px rgba(0,0,0,.7),0 1px 2px rgba(0,0,0,.75);
  }
}

/* ============ Sticky header on desktop ============
   The full header sticks; once you scroll past it the masthead condenses to a slim
   bar so it never eats the screen. Phones/tablets keep the nav-only sticky behaviour. */
/* The header is out of flow at every width now, so the spacer always applies. */
.site-head-spacer{display:block;}

/* ============ Sticky header on phones and tablets ============
   Same mechanism as desktop: fixed, with a spacer holding its place so nothing
   jumps. Once you scroll past it the masthead is dropped and only the MENU bar
   stays, which keeps the menu one tap away without eating the screen. */
@media (max-width:1080px){
  /* Phones do NOT pin the masthead. Fixed, it stood 547px tall on a 393px
     phone - two thirds of the screen - and the reserved strip below it meant
     the bar could not shrink until you had scrolled past all 547px, so it sat
     there covering the page and then vanished in one jump. Letting it scroll
     away like any other content and sticking only the MENU bar keeps the menu
     one tap away with none of that. */
  /* display:contents lifts the two bars into the page flow, so the nav's sticky
     containing block is the page rather than a wrapper that scrolls away with
     the masthead - which is what stopped it sticking. */
  .site-head{display:contents;position:static;}
  .site-head .sticky-head{position:sticky;top:0;z-index:400;}
  .site-head-spacer{display:none;}
  html{scroll-padding-top:70px;}
  .site-head.condensed .topnav{border-top:0;}
}

/* ---- Tablet masthead: the vw sizes top out far too high here. At 1024 the
   header stood 870px tall - the whole first screen - because the ceilings were
   written for the 1080 end and nothing capped the logo. ------------------- */
@media (min-width:761px) and (max-width:1080px){
  .mast-logo{height:clamp(96px,13vw,140px);}
  .masthead{padding:12px 3% 10px;}
  .masthead-title{font-size:clamp(26px,3.4vw,40px);line-height:1.1;}
  .masthead-tagline{font-size:clamp(20px,2.7vw,32px);line-height:1.2;}
  .header-phone3 .loc-title{font-size:clamp(16px,2.2vw,26px);}
  .header-phone3 .loc-lines{font-size:clamp(17px,2.4vw,28px);line-height:1.35;}
  .header-phone .header-phone-new-large{font-size:clamp(20px,2.8vw,34px);}
}

/* ---- Phone masthead: same lines, less of the first screen ---------------- */
@media (max-width:760px){
  .mast-logo{height:clamp(84px,22vw,130px);}
  .masthead{padding:10px 2.5% 8px;}
  .mast-logo-link{margin:0 auto 4px;}
  .masthead-title{font-size:clamp(18px,5.6vw,52px);line-height:1.12;}
  .masthead-tagline{font-size:clamp(15px,4.8vw,44px);line-height:1.2;}
  .header-phone3 .loc-title{font-size:clamp(13px,4.2vw,38px);}
  .header-phone3 .loc-lines{font-size:clamp(14px,4.5vw,40px);line-height:1.32;}
  .header-phone{padding:4px 3% 8px;gap:6px 12px;}
  .header-phone .header-phone-new-large{font-size:clamp(16px,5.2vw,46px);}
}
@media (min-width:1081px){
  /* Fixed, not sticky: condensing changes the header's height, and while it was
     in flow that shrank the page and yanked the content up — the flicker. Out of
     flow with a spacer holding its place, nothing below it ever moves. */
  .site-head{position:fixed;top:0;left:0;right:0;z-index:400;}
  html{scroll-padding-top:130px;}
  /* Below 1420 the quote button, phone number and shipping lines cannot share a
     row without the button running under the phone number, so they take a tidy
     centred two-row arrangement instead of wrapping unevenly. */
  .header-phone{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 22px;}
  .header-phone .hp-left{order:1;}
  .header-phone .header-phone-new-large{order:2;}
  .header-phone .hp-right{order:3;flex:0 0 100%;text-align:center;}
  /* Condensed: the whole brand block collapses into one slim row —
     logo + name on the left, phone + quote button on the right, nav underneath. */
  .site-head.condensed .header-steel{display:flex;align-items:center;gap:18px;padding:0 3%;}
  .site-head.condensed .masthead{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:14px;padding:5px 0;min-height:0;}
  .site-head.condensed .mast-logo-link{position:static;transform:none;flex:0 0 auto;}
  .site-head.condensed .mast-logo{height:46px;}
  .site-head.condensed .masthead-main{padding:0;text-align:left;width:auto;min-width:0;}
  /* nowrap + a shrinking flex track means the name can paint over its neighbour,
     so it is clipped rather than allowed to overflow */
  .site-head.condensed .masthead-title{font-size:clamp(16px,1.5vw,26px);margin:0;white-space:nowrap;
    min-width:0;overflow:hidden;text-overflow:ellipsis;}
  .site-head.condensed .masthead-tagline,
  .site-head.condensed .header-phone3,
  .site-head.condensed .hp-right{display:none;}
  /* The wide-desktop three-column grid must not survive into the condensed bar:
     its columns lay out independently of this row and collide with the name. */
  .site-head.condensed .header-phone{display:flex;align-items:center;flex:0 0 auto;
    width:auto;padding:0;gap:16px;border:0;}
  .site-head.condensed .header-phone .hp-left,
  .site-head.condensed .header-phone .header-phone-new-large{flex:0 0 auto;width:auto;order:0;justify-self:auto;}
  .site-head.condensed .header-phone-new-large{font-size:clamp(16px,1.5vw,26px);}
  .site-head.condensed .header-phone a.qq-btn{font-size:15px;padding:8px 14px;}
}

@media (min-width:1420px){
  /* Wide enough for all three blocks side by side: fixed columns so they keep
     their places instead of the right-hand block wrapping onto its own line. */
  .header-phone{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
    align-items:center;gap:6px 18px;}
  .header-phone .hp-left{order:0;justify-self:start;}
  .header-phone .header-phone-new-large{order:0;justify-self:center;text-align:center;}
  .header-phone .hp-right{order:0;flex:0 0 auto;justify-self:end;text-align:right;}
}

/* ===== Fortress (fortress-large-capacity-safe.html) - owner's PDF pass ===== */
/* Hero caption runs large, as asked, and stays under the photo. */
.model-page .hero-solo-cap.big-cap{font-family:var(--font-head);font-size:2.6em;line-height:1.08;
  letter-spacing:1px;color:var(--black);margin-top:14px;}
@media(max-width:760px){ .model-page .hero-solo-cap.big-cap{font-size:1.45em;} }
/* Why Buy a Big Gun Safe: photo on the left, copy on the right. */
.why-duo.img-left{grid-template-columns:.95fr 1.05fr;}
@media(max-width:860px){ .why-duo.img-left{grid-template-columns:1fr;} }
/* Bravo: the size line is the heading now, so it carries the model-name scale. */
.model-page .bravo-size-head h3{color:var(--maroon);}
/* Iron-American feature photos: three to a row, all at one height. */
.model-page .arm-media.trio.iron-row .arm-frame{height:340px;padding:0;background:transparent;border:0;
  display:flex;align-items:flex-end;justify-content:center;}
.model-page .arm-media.trio.iron-row .arm-frame img{width:auto;height:100%;max-height:340px;object-fit:contain;}
@media(max-width:900px){ .model-page .arm-media.trio.iron-row .arm-frame{height:240px;}
  .model-page .arm-media.trio.iron-row .arm-frame img{max-height:240px;} }
@media(max-width:560px){ .model-page .arm-media.trio.iron-row .arm-frame{height:170px;}
  .model-page .arm-media.trio.iron-row .arm-frame img{max-height:170px;} }
/* Tactical interior photos: one tile size, photo filling it edge to edge, so the
   row reads as a clean grid instead of small pictures floating in white boxes. */
.model-page .arm-media.quad.fit-tight{align-items:flex-start;gap:14px;}
.model-page .arm-media.quad.fit-tight .arm-frame{height:360px;padding:0;background:transparent;border:0;
  border-radius:6px;overflow:hidden;display:block;}
.model-page .arm-media.quad.fit-tight .arm-frame img{width:100%;height:100%;object-fit:cover;display:block;}
@media(max-width:900px){ .model-page .arm-media.quad.fit-tight .arm-frame{height:280px;} }
@media(max-width:560px){ .model-page .arm-media.quad.fit-tight .arm-frame{height:200px;} }
/* Price tiles in one panel line their amounts up even when a spec line wraps. */
.model-page .model-panel .price-row{align-items:stretch;}
.model-page .model-panel .price-tile{display:flex;flex-direction:column;justify-content:space-between;}

/* ---- Fortress only: every photo row shares one height so the pictures and
   their captions line up. Scoped to .fortress-page so the other model pages
   (Sargent, Special Forces, Arsenal, Frontier) keep the sizing they shipped. ---- */
.fortress-page .hero-solo-cap.cap-above{margin:0 0 12px;}
.fortress-page .arm-media.duo,
.fortress-page .arm-media.trio{align-items:flex-start;}
.fortress-page .arm-media.duo>.arm-cell,
.fortress-page .arm-media.trio>.arm-cell{display:flex;flex-direction:column;}
.fortress-page .arm-media.duo .arm-frame{height:460px;display:flex;align-items:flex-end;justify-content:center;
  padding:0;background:transparent;border:0;overflow:hidden;}
.fortress-page .arm-media.trio .arm-frame{height:360px;display:flex;align-items:flex-end;justify-content:center;
  padding:0;background:transparent;border:0;overflow:hidden;}
.fortress-page .arm-media.duo .arm-frame img,
.fortress-page .arm-media.trio .arm-frame img{width:auto;height:100%;max-height:100%;max-width:100%;
  object-fit:contain;display:block;margin:0 auto;}
.fortress-page .arm-media.duo .arm-title,
.fortress-page .arm-media.trio .arm-title{margin-top:10px;}
@media(max-width:900px){
  .fortress-page .arm-media.duo .arm-frame{height:340px;}
  .fortress-page .arm-media.trio .arm-frame{height:260px;}
}
@media(max-width:560px){
  .fortress-page .arm-media.duo .arm-frame{height:230px;}
  .fortress-page .arm-media.trio .arm-frame{height:180px;}
}
/* The Iron-American rows keep their own (shorter) three-across height. */
.fortress-page .arm-media.trio.iron-row .arm-frame{height:340px;}
@media(max-width:900px){ .fortress-page .arm-media.trio.iron-row .arm-frame{height:240px;} }
@media(max-width:560px){ .fortress-page .arm-media.trio.iron-row .arm-frame{height:170px;} }
/* sf_cards rows (quad/duo) on this page: one height, captions on one line. */
.fortress-page .arm-media.quad>.arm-cell{display:flex;flex-direction:column;}

/* ---- Fortress round 2: owner's video pass ---- */
/* "Why Buy a Big Gun Safe?" runs a little bigger, with the copy under it. */
.fortress-page .why-head .caption-section{line-height:1.05;}
@media(max-width:760px){ .fortress-page .why-head .caption-section{} }
/* Dimension lines the owner asked to run bigger. */
.fortress-page .vd-model-head h3.big-dim{line-height:1.12;}
@media(max-width:1080px){ .fortress-page .vd-model-head h3.big-dim{} }
@media(max-width:760px){ .fortress-page .vd-model-head h3.big-dim{} }
/* Iron-American: four photos across at one height. */
.fortress-page .arm-media.quad.iron-row .arm-frame{height:380px;display:flex;align-items:flex-end;
  justify-content:center;padding:0;background:transparent;border:0;overflow:hidden;}
.fortress-page .arm-media.quad.iron-row .arm-frame img{width:auto;height:100%;max-width:100%;object-fit:contain;}
@media(max-width:900px){ .fortress-page .arm-media.quad.iron-row .arm-frame{height:260px;} }
@media(max-width:560px){ .fortress-page .arm-media.quad.iron-row .arm-frame{height:190px;} }
/* Price lists folded behind a click - the table still ships in the HTML. */
.pricelist{max-width:1100px;margin:14px auto 22px;border:2px solid var(--maroon);border-radius:12px;
  background:var(--paper);overflow:hidden;}
.pricelist>summary{cursor:pointer;list-style:none;padding:16px 22px;font-family:var(--font-head);
  font-size:1.5em;letter-spacing:.5px;color:var(--maroon);text-align:center;}
.pricelist>summary::-webkit-details-marker{display:none;}
.pricelist>summary::after{content:" \25BC";font-size:.7em;}
.pricelist[open]>summary::after{content:" \25B2";}
.pricelist>summary:hover{background:#efe9dc;}
.pricelist .pl-body{padding:0 14px 10px;}
@media(max-width:760px){ .pricelist>summary{font-size:1.15em;padding:12px 14px;} }

/* The top block reads as one unit: the safe big on the left, the size, the
   standard features and the prices on the right at a size that fits the box. */
.fortress-page .top-armory{grid-template-columns:1fr 1.08fr;}
.fortress-page .top-armory .armory-img{padding:14px;}
.fortress-page .top-armory .armory-img img{max-height:660px;width:100%;object-fit:contain;}
.fortress-page .top-armory .vd-model-head{margin:0 0 10px;}
.fortress-page .top-armory .vd-model-head h2{line-height:1.03;}
.fortress-page .top-armory .vd-model-head h3{margin-top:6px;}
@media(max-width:900px){
}

/* ---- Fortress round 3: owner's second walkthrough ---- */
.fortress-page .hero-gap{margin-top:26px;}
/* The size block carries the price, run large, with USA MADE under it. */
.fortress-page .top-armory .vd-model-head h3.head-price{color:var(--red);margin-top:4px;}
.fortress-page .top-armory .head-usa{font-family:var(--font-head);font-size:1.5em;letter-spacing:1px;
  color:var(--maroon);margin:4px 0 0;text-align:center;}
  .fortress-page .top-armory .head-usa{font-size:1.15em;}
/* Available options a size up. */
.fortress-page .options-big .opt-price .opt-name{font-size:1.35em;}
.fortress-page .options-big .opt-price .opt-cost{font-size:1.5em;}
/* Dimension lines: the x between the numbers stays small, as on the other pages. */
.fortress-page .dim-x{font-size:.62em;font-weight:600;padding:0 .12em;vertical-align:.06em;}
/* Three-across spec lists. */
.spec-grid-3{grid-template-columns:repeat(3,1fr);}
@media(max-width:900px){ .spec-grid-3{grid-template-columns:1fr 1fr;} }
@media(max-width:560px){ .spec-grid-3{grid-template-columns:1fr;} }
/* The photos the owner asked to run big. */
.fortress-page .armory-hero{max-width:1000px;}
.fortress-page .armory-hero img{max-height:760px;}
.fortress-page .wainscot-hero{max-width:1040px;}
.fortress-page .wainscot-hero img{max-height:780px;}
.fortress-page .arm-media.duo.iron-big .arm-frame{height:620px;}
@media(max-width:900px){ .fortress-page .arm-media.duo.iron-big .arm-frame{height:380px;} }
@media(max-width:560px){ .fortress-page .arm-media.duo.iron-big .arm-frame{height:250px;} }
.fortress-page .arm-media.duo.dd-big .arm-frame{height:620px;}
@media(max-width:900px){ .fortress-page .arm-media.duo.dd-big .arm-frame{height:380px;} }
@media(max-width:560px){ .fortress-page .arm-media.duo.dd-big .arm-frame{height:250px;} }
/* John Wick: the vault room bigger, two photos beside it. */
.fortress-page .big-left.jw-big{grid-template-columns:1.7fr 1fr;}
.fortress-page .big-left.jw-big>.bl-grid{grid-template-columns:1fr;}
@media(max-width:860px){ .fortress-page .big-left.jw-big{grid-template-columns:1fr;}
  .fortress-page .big-left.jw-big>.bl-grid{grid-template-columns:repeat(2,1fr);} }

/* One-line notes under a section read as a centred line, not a paragraph:
   the body-copy rule left-aligns inside a centred block, which left a single
   short sentence hanging off to one side. */
.note-line{display:block;text-align:center;font-family:var(--font-body);font-size:1.05em;
  line-height:1.45;color:var(--black);}
.note-line a{color:#1f4e9b;}
@media(max-width:760px){ .note-line{font-size:1em;} }
/* Mobile: the standard-features box and everything beside it line up on one
   centred column instead of half-centred, half-left. */
@media(max-width:900px){
  .fortress-page .top-armory{grid-template-columns:1fr;}
  .fortress-page .armory-detail{padding:20px 16px;text-align:center;}
  .fortress-page .armory-detail .spec-grid{max-width:420px;margin-left:auto;margin-right:auto;
    text-align:left;}
  .fortress-page .armory-box .armory-img{padding:10px;}
  .fortress-page .model-panel{margin-left:auto;margin-right:auto;}
  .fortress-page .spec-grid,
  .fortress-page .spec-grid-3{max-width:460px;margin-left:auto;margin-right:auto;}
}

/* ---- Fortress round 4: everything the owner called too small or too faint ---- */
/* Body copy on this page reads a size up and heavier - it was too faint to read. */
.fortress-page .font-body-text{font-size:1.16em;font-weight:600;line-height:1.55;}
@media(max-width:760px){ .fortress-page .font-body-text{font-size:1.05em;} }
.fortress-page .note-line{font-size:1.25em;font-weight:700;}
/* Price tiles: the spec line above the number was minuscule beside the safes. */
.fortress-page .model-panel .price-dim{font-size:1.5em;font-weight:800;color:var(--maroon);line-height:1.25;}
.fortress-page .model-panel .price-dim.big-price-dim{font-size:2.1em;}
@media(max-width:900px){ .fortress-page .model-panel .price-dim{font-size:1.15em;}
  .fortress-page .model-panel .price-dim.big-price-dim{font-size:1.4em;} }
/* Photo captions, standard-colour captions and section sublines, all a size up. */
.fortress-page .arm-cell .arm-title{font-size:1.5em;line-height:1.2;margin-top:8px;}
.fortress-page .arm-cell .arm-sub{font-size:1.2em;}
.fortress-page .std-cell figcaption{font-size:1.7em;line-height:1.2;margin-top:8px;}
.fortress-page .ss-photos figcaption{font-size:1.42em;line-height:1.22;}
.fortress-page .sc-cell .sc-name{font-size:1.35em;}
@media(max-width:760px){
  .fortress-page .arm-cell .arm-title{font-size:1.1em;}
  .fortress-page .std-cell figcaption{font-size:1.15em;}
  .fortress-page .ss-photos figcaption{font-size:1em;}
  .fortress-page .sc-cell .sc-name{font-size:1em;}
}
/* Lock lineup and the smaller section heads run with the rest of the page. */
.fortress-page .lock-lineup h2,.fortress-page .lock-head{font-size:3.4em;}
/* The Double Door Bravo badge run big, as asked. */
.fortress-page .op-price.dd-bravo{display:inline-block;background:var(--maroon);color:#fff;
  padding:14px 40px;border-radius:10px;font-family:var(--font-head);font-size:3em;font-weight:800;
  letter-spacing:1px;line-height:1.1;}
@media(max-width:760px){ .fortress-page .op-price.dd-bravo{font-size:1.5em;padding:10px 20px;} }
.fortress-page .jw-line{font-size:1.5em;line-height:1.5;}
@media(max-width:760px){ .fortress-page .jw-line{font-size:1.1em;} }
/* The photos the owner wants run as large as they go. */
.fortress-page .iron-hero{max-width:1100px;}
.fortress-page .iron-hero img{max-height:820px;}
.fortress-page .destroyer-hero .arm-frame{height:760px;}
@media(max-width:900px){ .fortress-page .destroyer-hero .arm-frame{height:420px;} }
.fortress-page .pricelist>summary{font-size:2em;}
@media(max-width:760px){ .fortress-page .pricelist>summary{font-size:1.2em;} }
/* Captions sit under their photo, not adrift below it: the picture is pinned to
   the bottom of its box so the label follows straight on. */
.fortress-page .arm-media .arm-frame{display:flex;align-items:flex-end;justify-content:center;}
.fortress-page .photo-wall figcaption{margin-top:6px;font-size:1.15em;line-height:1.3;}
.fortress-page .photo-wall .pw-cell img{height:300px;width:100%;object-fit:contain;display:block;}
@media(max-width:900px){ .fortress-page .photo-wall .pw-cell img{height:210px;} }
@media(max-width:560px){ .fortress-page .photo-wall .pw-cell img{height:170px;} }
/* One big call to action across the bottom, same as the other pages. */
.fortress-page .call-big{font-size:2.6em;}
@media(max-width:760px){ .fortress-page .call-big{font-size:1.4em;} }

/* Three-across safe rows run larger on this page - they sat small next to the
   open-door shot above them. */
.fortress-page .arm-media.trio .arm-frame{height:470px;}
@media(max-width:900px){ .fortress-page .arm-media.trio .arm-frame{height:300px;} }
@media(max-width:560px){ .fortress-page .arm-media.trio .arm-frame{height:200px;} }
.fortress-page .arm-media.trio.iron-row .arm-frame{height:340px;}

/* ---- Fortress round 5 ---- */
/* The x between the numbers is proportionate now - it was set too small. */
.fortress-page .dim-x{font-size:.8em;padding:0 .1em;vertical-align:.02em;}
/* The pair under the lead photo runs bigger and tighter together. */
.fortress-page .hero-pair-row{gap:10px;max-width:1000px;}
.fortress-page .hero-pair-row .arm-frame{height:600px;}
@media(max-width:900px){ .fortress-page .hero-pair-row .arm-frame{height:360px;} }
@media(max-width:560px){ .fortress-page .hero-pair-row .arm-frame{height:250px;} }
/* The phone number closing the intro, on its own line and easy to see. */
.fortress-page .call-line{text-align:center;margin:14px auto 0;font-family:var(--font-head);
  font-size:2.4em;letter-spacing:1px;}
.fortress-page .call-line a{color:var(--maroon);text-decoration:none;}
@media(max-width:760px){ .fortress-page .call-line{font-size:1.5em;} }
/* Colour tiles are cut-outs now: one height, close together, captions tight. */
.fortress-page .model-colors{gap:10px 12px;}
.fortress-page .model-colors img{height:420px;}
@media(max-width:1080px){ .fortress-page .model-colors img{height:330px;} }
@media(max-width:760px){ .fortress-page .model-colors img{height:250px;} }
.fortress-page .model-colors .sc-name{margin-top:2px;}
/* Standard-colour cut-outs share a height so the pair matches. */
.fortress-page .std-row-colors .std-cell img{height:520px;width:auto;object-fit:contain;margin:0 auto;}
@media(max-width:900px){ .fortress-page .std-row-colors .std-cell img{height:320px;} }
.fortress-page .std-cell figcaption{margin-top:4px;}
/* The section heads the owner keeps asking to run larger. */
/* The shipping-area gallery: one tile size so the row reads evenly. */
.fortress-page .arm-media.quad.shipping-shots .arm-frame{height:340px;padding:0;background:transparent;
  border:0;border-radius:6px;overflow:hidden;display:block;}
.fortress-page .arm-media.quad.shipping-shots .arm-frame img{width:100%;height:100%;object-fit:cover;display:block;}
@media(max-width:900px){ .fortress-page .arm-media.quad.shipping-shots .arm-frame{height:250px;} }
@media(max-width:560px){ .fortress-page .arm-media.quad.shipping-shots .arm-frame{height:180px;} }
/* Wainscoted photo row: one size, evenly. */
.fortress-page .arm-media.quad.fit-tight .arm-frame{height:340px;}

/* ---- Fortress round 6 ---- */
/* Both standard-colour cut-outs are trimmed to the safe, so one height matches
   them properly instead of one carrying more empty margin than the other. */
.fortress-page .std-row-colors .std-cell img{height:560px;width:auto;object-fit:contain;margin:0 auto;}
@media(max-width:900px){ .fortress-page .std-row-colors .std-cell img{height:330px;} }
@media(max-width:560px){ .fortress-page .std-row-colors .std-cell img{height:230px;} }
/* USA MADE sits under the feature list now, not under the price. */
.fortress-page .top-armory .head-usa{margin:14px 0 0;}
/* John Wick: the vault room centred on its own, the two interiors under it. */
.fortress-page .jw-stack{max-width:1180px;margin:0 auto 10px;padding:0 2%;}
.fortress-page .jw-stack>.bl-main a{display:block;line-height:0;cursor:zoom-in;}
.fortress-page .jw-stack>.bl-main img{width:100%;max-width:1000px;height:auto;display:block;
  margin:0 auto;border-radius:4px;}
.fortress-page .jw-stack>.bl-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;
  max-width:1000px;margin:18px auto 0;}
.fortress-page .jw-stack>.bl-grid a{display:block;line-height:0;cursor:zoom-in;}
.fortress-page .jw-stack>.bl-grid img{width:100%;height:360px;object-fit:cover;display:block;border-radius:4px;}
@media(max-width:760px){ .fortress-page .jw-stack>.bl-grid img{height:200px;} }
/* Tech package: two panels, then the lit interior below at the same size. */
.fortress-page .arm-media.duo.tech-row .arm-frame{height:420px;}
.fortress-page .arm-media.duo.tech-row>.arm-cell{flex:0 1 calc(50% - 9px);}
@media(max-width:900px){ .fortress-page .arm-media.duo.tech-row .arm-frame{height:260px;} }

/* The Collector line holds the size, weight, capacity and price on one line. */
@media(max-width:1200px){ .fortress-page .vd-model-head h3.one-line-dim{} }
@media(max-width:760px){ .fortress-page .vd-model-head h3.one-line-dim{} }

/* ---- Fortress round 7 ---- */
/* The phone line under the intro matches the heading above it. */
.fortress-page .call-line{font-size:3em;}
@media(max-width:760px){ .fortress-page .call-line{font-size:1.8em;} }
/* Standard Colors heading and its captions a size up. */
.fortress-page .std-head{font-size:2.6em;letter-spacing:1px;}
@media(max-width:760px){ .fortress-page .std-head{font-size:1.6em;} }
.fortress-page .std-cell figcaption{font-size:2em;}
@media(max-width:760px){ .fortress-page .std-cell figcaption{font-size:1.2em;} }
/* Lock lineup and tactical panel doors match AVAILABLE OPTIONS, in caps. */
.fortress-page .lock-lineup .caption-section,.fortress-page .lock-lineup h2,
.fortress-page .caption-section,.fortress-page .std-head,
.fortress-page .lock-lineup h2{text-transform:uppercase;}
/* Iron-American dimension line bigger still. */
.fortress-page .model-panel .price-dim.big-price-dim{font-size:2.6em;}
@media(max-width:900px){ .fortress-page .model-panel .price-dim.big-price-dim{font-size:1.5em;} }
/* Two price tiles centre as a pair rather than drifting apart. */
.fortress-page .model-panel .price-row{justify-content:center;}
/* Air between one section and the next. */
.fortress-page .vd-model-head{margin-top:64px;}
.fortress-page .top-armory .vd-model-head{margin-top:0;}
@media(max-width:760px){ .fortress-page .vd-model-head{margin-top:36px;} }
/* The John Wick option lines read like the size line above them. */
.fortress-page .jw-line{font-family:"Trebuchet MS",Arial,sans-serif;font-size:2.5em;font-weight:800;
  color:var(--maroon);line-height:1.3;}
@media(max-width:1200px){ .fortress-page .jw-line{font-size:2em;} }
@media(max-width:760px){ .fortress-page .jw-line{font-size:1.35em;} }
/* The walk-in vault room link is a button now. */
.vault-room-btn{display:inline-block;background:var(--maroon);color:#fff;text-decoration:none;
  font-family:var(--font-head);font-size:1.8em;letter-spacing:1px;padding:16px 40px;border-radius:10px;
  margin:10px auto 6px;line-height:1.2;}
.vault-room-btn:hover{background:#3c3c30;color:#fff;}
@media(max-width:760px){ .vault-room-btn{font-size:1.1em;padding:12px 20px;} }
/* Room between the video block and the photos under it. */
.fortress-page .video-grid{margin-bottom:36px;}
.fortress-page .yt-embed,.fortress-page iframe{margin-bottom:8px;}

/* =====================================================================
   SITE-WIDE READABILITY PASS
   The same treatment the large gun safe page got, applied to every page:
   body copy you can actually read, captions that sit under their photo,
   dimension lines that do not disappear beside the safes, and air between
   one section and the next. Scoped to .content so only page bodies move,
   never the header or footer.
   ===================================================================== */
.content .font-body-text{font-size:1.14em;font-weight:600;line-height:1.55;}
@media(max-width:760px){ .content .font-body-text{font-size:1.02em;} }
/* Photo captions belong under the photo, not adrift below it. */
.content .arm-media .arm-frame{display:flex;align-items:flex-end;justify-content:center;}
.content .arm-cell .arm-title{font-size:1.35em;line-height:1.2;margin-top:8px;}
.content .arm-cell .arm-sub{font-size:1.12em;}
.content .std-cell figcaption{font-size:1.5em;line-height:1.2;margin-top:6px;}
.content .ss-photos figcaption{font-size:1.3em;line-height:1.22;}
.content .sc-cell .sc-name{font-size:1.2em;margin-top:4px;}
@media(max-width:760px){
  .content .arm-cell .arm-title{font-size:1.05em;}
  .content .std-cell figcaption{font-size:1.1em;}
  .content .ss-photos figcaption{font-size:.98em;}
  .content .sc-cell .sc-name{font-size:.95em;}
}
/* The spec line above a price was too small to read beside a safe. */
.content .model-panel .price-dim{font-size:1.4em;font-weight:800;color:var(--maroon);line-height:1.25;}
@media(max-width:900px){ .content .model-panel .price-dim{font-size:1.1em;} }
/* Air between a section heading and whatever came before it. */
.content .vd-model-head{margin-top:56px;}
.content .top-armory .vd-model-head{margin-top:0;}
@media(max-width:760px){ .content .vd-model-head{margin-top:32px;} }
/* Photo walls read as a grid: one tile size, caption tight underneath. */
.content .photo-wall .pw-cell img{height:300px;width:100%;object-fit:contain;display:block;}
.content .photo-wall figcaption{margin-top:6px;font-size:1.1em;line-height:1.3;}
@media(max-width:900px){ .content .photo-wall .pw-cell img{height:210px;} }
@media(max-width:560px){ .content .photo-wall .pw-cell img{height:170px;} }
/* One big call to action across the bottom of every page. */
.content .call-big{font-size:2.4em;}
@media(max-width:760px){ .content .call-big{font-size:1.35em;} }

/* ---------------------------------------------------------------------------
   BEST GUN SAFE  (.bgs-page)
   Kevin's notes on this page: headings on the Large Gun Safe page's scale,
   photos bigger and matched to each other, and no boxes around any of them -
   a framed photo that does not fill its frame leaves dead space, which is the
   thing he keeps pointing at.
   --------------------------------------------------------------------------- */

/* the header block sits closer to the lead photo than the shared spacing */
.bgs-page .hero-gap{margin-top:22px;}
.bgs-page .hero-solo-cap.big-cap{font-size:2.1em;}
@media(max-width:760px){ .bgs-page .hero-solo-cap.big-cap{font-size:1.3em;} }

/* the 60 x 25 x 22 block: photo one side, bullets the other */
.bgs-page .top-armory{grid-template-columns:1fr 1.08fr;}
.bgs-page .top-armory .armory-img{padding:14px;}
.bgs-page .top-armory .armory-img img{max-height:620px;width:100%;object-fit:contain;}
.bgs-page .top-armory .vd-model-head{margin:0 0 10px;}
.bgs-page .top-armory .vd-model-head h2{line-height:1.03;}

/* every size in the line-up, and each Sportsman option, reads at one weight */
.bgs-page .size-block{margin-bottom:42px;}
.bgs-page .size-block .vd-model-head{margin-top:46px;}
/* the dimension line keeps the model-page scale - it is the line Kevin reads */
.bgs-page .size-block .vd-model-head h3.big-dim{font-weight:800;}
.bgs-page .opts-head{margin:56px auto 4px;}

/* photos across this page: no frame, no border, one shared height per row */
.bgs-page .arm-media.arm-fit .arm-frame img{height:520px;}
@media(max-width:1100px){ .bgs-page .arm-media.arm-fit .arm-frame img{height:clamp(300px,40vw,520px);} }
@media(max-width:640px){ .bgs-page .arm-media.arm-fit .arm-frame img{height:230px;} }
.bgs-page .arm-media.solo.arm-fit{max-width:720px;}
.bgs-page .arm-media.solo.arm-fit .arm-frame img{height:auto;width:100%;max-height:600px;}

/* the callout rows: box gone, and every photo cut to the same height so the
   row reads as a set - a fixed frame with contain does the opposite, it leaves
   a landscape shot floating in white space next to a portrait one */
.bgs-page .arm-media.arm-even{align-items:flex-start;justify-content:center;}
.bgs-page .arm-media.arm-even>.arm-cell{flex:0 0 auto;max-width:360px;}
.bgs-page .arm-media.arm-even .arm-frame{height:auto;background:transparent;border:0;
  border-radius:0;padding:0;display:block;overflow:visible;}
.bgs-page .arm-media.arm-even .arm-frame img{height:340px;width:auto;max-width:100%;
  object-fit:contain;display:block;margin:0 auto;}
.bgs-page .arm-media.arm-even .arm-title{margin-top:12px;font-size:1.2em;}
.bgs-page .arm-media.arm-even .arm-sub{font-size:1.05em;}
.bgs-page .arm-media.arm-even .arm-price{font-size:1.3em;margin-top:6px;}
@media(min-width:761px) and (max-width:900px){ .bgs-page .arm-media.arm-even .arm-frame img{height:250px;} }


/* 12 Reasons: the lead of each one is a subheading now, so give it the room */
.bgs-page .reasons.reason-cards{gap:22px 28px;margin-top:24px;}
.bgs-page .reason-cards .reason{background:var(--paper);border:1px solid var(--line);
  border-left:8px solid var(--brand-gold);border-radius:10px;padding:18px 22px 20px;}
.bgs-page .reason-cards h3.reason-lead{font-family:var(--font-head);font-size:1.75em;
  line-height:1.12;color:var(--maroon);margin:0 0 8px;letter-spacing:.4px;}
@media(max-width:760px){ .bgs-page .reason-cards h3.reason-lead{font-size:1.35em;} }

/* the pricing table: the spec column carries the copy, so let it read */
.bgs-page .cmp-table td{font-size:17px;font-weight:700;}
.bgs-page .cmp-table td.price{font-size:21px;}
.bgs-page .cmp-table thead th{font-size:15px;}

/* gallery: one height for every photo, widths follow the photo. Cells are no
   longer forced to a quarter of the row, so nothing sits small in a big box. */
.bgs-page .arm-media.quad{align-items:flex-start;gap:20px 18px;}
.bgs-page .arm-media.quad>.arm-cell{flex:0 0 auto;max-width:320px;}
.bgs-page .arm-media.quad .arm-frame{height:auto;background:transparent;border:0;
  border-radius:0;padding:0;display:block;overflow:visible;}
.bgs-page .arm-media.quad .arm-frame img{height:300px;width:auto;max-width:100%;
  object-fit:contain;display:block;margin:0 auto;}
@media(min-width:761px) and (max-width:900px){ .bgs-page .arm-media.quad .arm-frame img{height:240px;} }
@media(max-width:760px){ .bgs-page .arm-media.quad{gap:14px 10px;}
  .bgs-page .arm-media.quad>.arm-cell{max-width:48%;}
  .bgs-page .arm-media.quad .arm-frame img{height:min(200px,26vw);} }

/* section headings on this page carry the Large Gun Safe page's weight */

/* the x between the numbers is smaller than the numbers, but only a little -
   at .62em it was disappearing between them */
.bgs-page .dim-x{font-size:.84em;font-weight:700;padding:0 .1em;vertical-align:.02em;}

/* a single option photo still runs large */
.bgs-page .arm-media.solo.arm-fit{max-width:820px;}
.bgs-page .arm-media.solo.arm-fit .arm-frame img{width:100%;height:auto;max-height:620px;}

/* the photo wall loses its box here too, and every shot gets one height */
.bgs-page .photo-wall img{height:260px;background:transparent;border:0;border-radius:0;
  padding:0;}
@media(max-width:1080px){ .bgs-page .photo-wall img{height:220px;} }
@media(max-width:760px){ .bgs-page .photo-wall img{height:170px;} }

/* Sportsman Options heads its group, so it takes the heading face and the same
   size as the option names under it; those then step down a little, which is
   what makes it read as a group rather than four headings in a row */
.bgs-page .opts-head .caption-section{font-family:var(--font-head);
  letter-spacing:1px;line-height:1.02;color:var(--red);}
@media(max-width:760px){ .bgs-page .opts-head .caption-section{} }

/* the call is the last thing on the page and the biggest thing on it */
.content .call-big.call-last{font-size:3.4em;margin:34px 0 10px;}
@media(max-width:760px){ .content .call-big.call-last{font-size:1.7em;} }

/* the relocker panel: photo fills its column instead of floating in a box */
.bgs-page .feat-duo .feat-col{background:transparent;border:0;padding:0;}
.bgs-page .feat-duo .feat-col img{max-width:100%;border:0;border-radius:0;}
.bgs-page .feat-duo{align-items:center;}

/* ---------------------------------------------------------------------------
   PHONE: the top block is photo first, then the box
   The scoped rules that set a two-column top block (.bgs-page, .fortress-page)
   outrank the shared one-column phone rule on specificity alone - a media query
   adds none - so the safe stayed pinned in a narrow column beside a tall
   bullet list. Photo on top, everything else under it.
   --------------------------------------------------------------------------- */
@media (max-width:760px){
  .bgs-page .top-armory,
  .fortress-page .top-armory{grid-template-columns:1fr;}
  .bgs-page .top-armory .armory-img img,
  .fortress-page .top-armory .armory-img img{max-height:420px;}
  .bgs-page .armory-detail,
  .fortress-page .armory-detail{padding:16px 16px 20px;}
  .bgs-page .top-armory .vd-model-head h2,
}

/* ---- Phone photo sizing on the Best Gun Safe page -----------------------
   Two photos share the row, so their common height is capped by how wide the
   pair is: an open-door shot runs to 1.44:1 and a closed door to 0.96:1, so
   at any fixed height above about 38vw the wider one hits its width limit,
   shrinks, and the two stop matching - the thing being fixed. Sizing the
   height off the viewport keeps them equal at every phone width. Cells must
   not carry a width cap of their own for the same reason. */
@media (max-width:760px){
  .bgs-page .arm-media.arm-fit>.arm-cell{max-width:none;}
  .bgs-page .arm-media.arm-fit .arm-frame img{height:min(290px,38vw);}
  /* callout rows keep two across on a phone rather than dropping to one */
  .bgs-page .arm-media.arm-even{gap:14px 10px;}
  .bgs-page .arm-media.arm-even>.arm-cell{max-width:48%;}
  .bgs-page .arm-media.arm-even .arm-frame img{height:min(200px,30vw);}
  .bgs-page .arm-media.arm-even .arm-title{font-size:1em;margin-top:8px;}
  .bgs-page .arm-media.arm-even .arm-sub{font-size:.9em;}
  /* the pricing table fits the screen instead of running off the right edge */
  .bgs-page .cmp-table{min-width:0;}
  .bgs-page .cmp-table th,.bgs-page .cmp-table td{padding:8px 6px;}
  .bgs-page .cmp-table td{font-size:13px;}
  .bgs-page .cmp-table td.price{font-size:15px;}
  .bgs-page .cmp-table thead th{font-size:11px;letter-spacing:0;}
}

/* ---------------------------------------------------------------------------
   STORM SHELTERS / SAFE ROOMS / MODULAR VAULT ROOMS  (.shelter-page)
   The same three faults the gun safe pages had: headings pinned to a hand-set
   2.2em while the rest of the site runs 3em, photos boxed inside frames they
   never fill, and a width set by hand on every photo so a column of them
   stepped between 250px and 760px for no reason a reader can see.
   --------------------------------------------------------------------------- */

/* Headings on the gun safe pages' scale. A section heading here names a
   product - "The Destroyer", "CUSTOM VAULT ROOMS" - so it takes the weight the
   model names carry over there (5.7em, 97px), not the 3em a sub-section gets.
   The H1 matches the model pages' H1 rather than sitting a third smaller. */
/* One scale for every section heading, sized off the viewport so a long one
   fits the width instead of stepping down at a breakpoint and wrapping into
   four lines. At 1440 it lands where the gun safe pages' section headings do. */
.shelter-page .caption-section{line-height:1.06;}

.shelter-page .caption-hero-h1{line-height:1.03;}

/* one size for the line under a heading, on the gun safe pages' sub-head scale */
.shelter-page .text-block-cntrd > p .sub-black,
.shelter-page .text-block-cntrd > p .caption2-maroon{font-size:1.9em;line-height:1.25;}
@media(max-width:1080px){ .shelter-page .text-block-cntrd > p .sub-black,
  .shelter-page .text-block-cntrd > p .caption2-maroon{font-size:1.35em;} }
@media(max-width:760px){ .shelter-page .text-block-cntrd > p .sub-black,
  .shelter-page .text-block-cntrd > p .caption2-maroon{font-size:1.1em;} }

/* tables read like the gun safe pages': the spec column bold, the price bigger */
.shelter-page .cmp-table td{font-size:17px;font-weight:700;}
.shelter-page .cmp-table td.price{font-size:21px;}
.shelter-page .cmp-table thead th{font-size:15px;}


/* the two lines under the H1, and the spec stacks, carry real weight */
.shelter-page .hero-sub-lines .sub-black{font-size:1.9em;line-height:1.25;}
@media(max-width:760px){ .shelter-page .hero-sub-lines .sub-black{font-size:1.2em;} }
.shelter-page .spec-headline{font-size:2.1em;line-height:1.3;}
@media(max-width:760px){ .shelter-page .spec-headline{font-size:1.25em;} }

/* no frame around any photo: it was a box the photo sat inside without filling,
   which is where the dead space and the small-next-to-big came from */
.shelter-page .arm-cell .arm-frame{height:auto;background:transparent;border:0;
  border-radius:0;padding:0;display:block;overflow:visible;}
.shelter-page .arm-media.solo .arm-frame img{width:100%;height:auto;max-width:100%;
  display:block;margin:0 auto;}

/* a row of photos shares one height and lets the width follow the photo */
.shelter-page .arm-media.duo,
.shelter-page .arm-media.trio,
.shelter-page .arm-media.quad,
.shelter-page .arm-media.quint{align-items:flex-start;justify-content:center;gap:20px 18px;}
.shelter-page .arm-media.duo>.arm-cell,
.shelter-page .arm-media.trio>.arm-cell,
.shelter-page .arm-media.quad>.arm-cell,
.shelter-page .arm-media.quint>.arm-cell{flex:0 0 auto;max-width:360px;}
.shelter-page .arm-media.duo .arm-frame img{height:400px;width:auto;max-width:100%;
  object-fit:contain;display:block;margin:0 auto;}
.shelter-page .arm-media.trio .arm-frame img,
.shelter-page .arm-media.quad .arm-frame img,
.shelter-page .arm-media.quint .arm-frame img{height:320px;width:auto;max-width:100%;
  object-fit:contain;display:block;margin:0 auto;}
.shelter-page .arm-cell .arm-title{margin-top:12px;font-size:1.15em;}

@media(min-width:761px) and (max-width:1080px){
  .shelter-page .arm-media.duo .arm-frame img{height:300px;}
  .shelter-page .arm-media.trio .arm-frame img,
  .shelter-page .arm-media.quad .arm-frame img,
  .shelter-page .arm-media.quint .arm-frame img{height:240px;}
}
/* On a phone two photos share the row, so their common height is capped by the
   pair's combined aspect ratio - a fixed pixel height makes the wider one hit
   the screen edge and shrink out of step. Size it off the viewport instead. */
@media(max-width:760px){
  .shelter-page .arm-media.duo,
  .shelter-page .arm-media.trio,
  .shelter-page .arm-media.quad,
  .shelter-page .arm-media.quint{gap:14px 10px;}
  .shelter-page .arm-media.duo>.arm-cell,
  .shelter-page .arm-media.trio>.arm-cell,
  .shelter-page .arm-media.quad>.arm-cell,
  .shelter-page .arm-media.quint>.arm-cell{max-width:48%;}
  .shelter-page .arm-media.duo .arm-frame img{height:min(260px,34vw);}
  .shelter-page .arm-media.trio .arm-frame img,
  .shelter-page .arm-media.quad .arm-frame img,
  .shelter-page .arm-media.quint .arm-frame img{height:min(220px,30vw);}
  .shelter-page .cmp-table{min-width:0;}
  .shelter-page .cmp-table th,.shelter-page .cmp-table td{padding:8px 6px;font-size:13px;}
  .shelter-page .cmp-table thead th{font-size:11px;letter-spacing:0;}
}

/* the card rows on these pages lose their boxes too */
.shelter-page .arm-media .arm-sub{font-size:1em;}

/* the hero photo loses its frame here too, and a tall photo is capped so a
   portrait shot does not run a thousand pixels down the page */
.shelter-page .vd-hero-img{background:transparent;border:0;padding:0;}
.shelter-page .arm-media.solo .arm-frame img{width:auto;height:auto;max-width:100%;
  max-height:640px;display:block;margin:0 auto;}
@media(max-width:760px){ .shelter-page .arm-media.solo .arm-frame img{max-height:420px;} }

/* prose keeps a readable measure and sits in the middle of the page */
.shelter-page p.center-block{max-width:1000px;}

/* Rows with a fixed number across. The cell takes a share of the row rather
   than hugging its photo, because a cell that hugs is as wide as its caption
   when the caption is the longer of the two - which is what pushed the fourth
   photo onto its own line. The photo keeps a set height inside that share, so
   the row still comes out level. */
.shelter-page .arm-media.row3>.arm-cell{flex:0 0 calc(33.333% - 12px);max-width:none;}
.shelter-page .arm-media.row4>.arm-cell{flex:0 0 calc(25% - 14px);max-width:none;}
.shelter-page .arm-media.row3 .arm-frame img{height:260px;}
.shelter-page .arm-media.row4 .arm-frame img{height:340px;}
@media(min-width:761px) and (max-width:1080px){
  .shelter-page .arm-media.row3 .arm-frame img{height:190px;}
  .shelter-page .arm-media.row4 .arm-frame img{height:230px;}
}
@media(max-width:760px){
  .shelter-page .arm-media.row3>.arm-cell,
  .shelter-page .arm-media.row4>.arm-cell{flex:0 0 calc(50% - 5px);max-width:none;}
  .shelter-page .arm-media.row3 .arm-frame img,
  .shelter-page .arm-media.row4 .arm-frame img{height:min(220px,30vw);}
}

/* the two-column feature panels lose their boxes here as well */
.shelter-page .feat-duo .feat-col{background:transparent;border:0;padding:0;}
.shelter-page .feat-duo .feat-col img{max-width:100%;border:0;border-radius:0;}
.shelter-page .feat-duo{align-items:center;}

/* ---- Storm shelter page, owner's walkthrough --------------------------- */

/* the review that opens the page: a label over it, no rule down the side */
.shelter-page .review-block{max-width:960px;margin:6px auto 0;}
.shelter-page .review-lead{text-align:center;margin:0 0 8px;}
.shelter-page .review-lead .sub-black{font-family:var(--font-sub);font-size:1.5em;
  font-weight:800;color:var(--maroon);letter-spacing:.5px;}
.shelter-page .review-text{margin:0 auto;}
.shelter-page .review-text .font-body-text{font-size:1.12em;line-height:1.55;}

/* air between one section and the next */
.shelter-page .sec-gap{margin-top:52px;}
@media(max-width:760px){ .shelter-page .sec-gap{margin-top:30px;} }

/* the spec stacks and the lines he wanted run much larger */
.shelter-page .spec-headline{font-size:2.6em;line-height:1.25;}
@media(max-width:1080px){ .shelter-page .spec-headline{font-size:1.7em;} }
@media(max-width:760px){ .shelter-page .spec-headline{font-size:1.25em;} }

/* the six reasons get room to breathe */
.shelter-page .reasons-roomy{grid-template-columns:1fr;gap:18px;}
.shelter-page .reasons-roomy li{padding:14px 18px;background:var(--paper);
  border:1px solid var(--line);border-left:8px solid var(--maroon);border-radius:10px;}
.shelter-page .reasons-roomy li .font-body-text{font-size:1.12em;}

/* the comparison table reads bold all the way across */
.shelter-page .cmp-table.cmp-bold td{font-weight:700;}
.shelter-page .cmp-table td{padding:12px 12px;}
.shelter-page .cmp-wrap{margin:10px 0 26px;}

/* the photo wall loses its boxes on the shelter pages too */
.shelter-page .photo-wall img{height:240px;background:transparent;border:0;border-radius:0;padding:0;}
@media(max-width:1080px){ .shelter-page .photo-wall img{height:200px;} }
@media(max-width:760px){ .shelter-page .photo-wall img{height:160px;} }

/* the one price stack he wanted larger again than the rest */
.shelter-page .spec-headline.spec-headline-lg{font-size:3.1em;}
@media(max-width:1080px){ .shelter-page .spec-headline.spec-headline-lg{font-size:2em;} }
@media(max-width:760px){ .shelter-page .spec-headline.spec-headline-lg{font-size:1.35em;} }


/* a line break the small screens take, placed where the wording wants it
   rather than wherever the width happens to run out */
.brk-sm{display:none;}
@media(max-width:1080px){ .brk-sm{display:inline;} }

/* the call at the foot of the Best Gun Safe page runs larger still */
.bgs-page .call-big.call-last{font-size:4.4em;}
@media(max-width:900px){ .bgs-page .call-big.call-last{font-size:2.4em;} }
@media(max-width:600px){ .bgs-page .call-big.call-last{font-size:1.7em;} }

/* ---- Round on the shelter pages and the Best Gun Safe comparison row ---- */

/* the lines under the H1, the twin door caption and the Navy Seal line */
.shelter-page .hero-sub-lines.hero-sub-lg .sub-black{font-size:2.3em;}
@media(max-width:760px){ .shelter-page .hero-sub-lines.hero-sub-lg .sub-black{font-size:1.35em;} }
.shelter-page .arm-cell .arm-title.cap-lg{font-size:1.7em;line-height:1.25;}
.shelter-page .arm-cell .arm-title.cap-xl{font-size:2.3em;line-height:1.2;}
.shelter-page .sub-black.cap-lg{font-size:1.6em;}
@media(max-width:760px){ .shelter-page .arm-cell .arm-title.cap-lg{font-size:1.15em;}
  .shelter-page .arm-cell .arm-title.cap-xl{font-size:1.35em;}
  .shelter-page .sub-black.cap-lg{font-size:1.15em;} }

/* a caption sitting over its photo, run large */
.shelter-page .arm-media.caps-lg .arm-title-top{font-size:1.5em;margin-bottom:10px;}
@media(max-width:760px){ .shelter-page .arm-media.caps-lg .arm-title-top{font-size:1.05em;} }

/* two photos across, one height, whatever the caption length */
.shelter-page .arm-media.row2>.arm-cell{flex:0 0 calc(50% - 10px);max-width:none;}
.shelter-page .arm-media.row2 .arm-frame img{height:420px;}
@media(min-width:761px) and (max-width:1080px){ .shelter-page .arm-media.row2 .arm-frame img{height:300px;} }
@media(max-width:760px){ .shelter-page .arm-media.row2 .arm-frame img{height:min(260px,34vw);} }

/* the standard features list without its tick column */
.shelter-page .spec-grid.spec-plain .spec-item{padding-left:0;}
.shelter-page .spec-grid.spec-plain .spec-item::before{content:"\2014";color:var(--brand-gold);
  font-weight:800;margin-right:10px;}

/* six reasons, three a side */
.shelter-page .reasons.reasons-2col{grid-template-columns:1fr 1fr;gap:18px 26px;}
@media(max-width:760px){ .shelter-page .reasons.reasons-2col{grid-template-columns:1fr;} }

/* the fireproofing comparison row: bigger photos, and the paragraph under it
   sits closer than the default block spacing put it */
.bgs-page .arm-media.arm-even.arm-even-lg .arm-frame img{height:420px;}
@media(max-width:1100px){ .bgs-page .arm-media.arm-even.arm-even-lg .arm-frame img{height:300px;} }
@media(max-width:760px){ .bgs-page .arm-media.arm-even.arm-even-lg .arm-frame img{height:min(200px,30vw);} }
.bgs-page .arm-media.tight-below{margin-bottom:2px;}
.bgs-page .arm-media.tight-below+.center-block{margin-top:4px;}

/* the hero photo's caption belongs under the photo, not beside it */
.shelter-page .vd-hero-img{flex-direction:column;}
.shelter-page .vd-hero-img .center-block{width:100%;}

/* spec-headline has to beat the general sub-head rule when it sits in a
   centred text block, which is where most of these lines live */
.shelter-page .text-block-cntrd > p .spec-headline{font-size:2.6em;line-height:1.25;}
.shelter-page .text-block-cntrd > p .spec-headline.spec-headline-lg{font-size:3.1em;}
@media(max-width:1080px){ .shelter-page .text-block-cntrd > p .spec-headline{font-size:1.7em;}
  .shelter-page .text-block-cntrd > p .spec-headline.spec-headline-lg{font-size:2em;} }
@media(max-width:760px){ .shelter-page .text-block-cntrd > p .spec-headline{font-size:1.25em;}
  .shelter-page .text-block-cntrd > p .spec-headline.spec-headline-lg{font-size:1.35em;} }

/* a lone photo run large with its caption over it */
.shelter-page .arm-media.solo.caps-lg{max-width:900px;}
.shelter-page .arm-media.solo.caps-lg .arm-frame img{width:100%;height:auto;max-height:700px;}

/* A pair holding a wide photo cannot reach the standard row height without the
   wide one hitting the cell edge and shrinking out of step, so it takes a
   shorter one that both can reach. */
.shelter-page .arm-media.row2.row2-w .arm-frame img{height:330px;}
@media(min-width:761px) and (max-width:1080px){ .shelter-page .arm-media.row2.row2-w .arm-frame img{height:240px;} }
@media(max-width:760px){ .shelter-page .arm-media.row2.row2-w .arm-frame img{height:min(200px,26vw);} }

/* Hatch door line-up: the doors are tall portraits, so the standard 3-across
   height leaves them looking small. Give this row its own taller frame. */
.shelter-page .arm-media.row3.row3-tall .arm-frame img{height:430px;}
@media(min-width:761px) and (max-width:1080px){ .shelter-page .arm-media.row3.row3-tall .arm-frame img{height:320px;} }
@media(max-width:760px){ .shelter-page .arm-media.row3.row3-tall .arm-frame img{height:min(300px,44vw);} }
/* Same for the two portrait edge shots that close the page. */
.shelter-page .arm-media.row2.row2-tall .arm-frame img{height:460px;}
@media(min-width:761px) and (max-width:1080px){ .shelter-page .arm-media.row2.row2-tall .arm-frame img{height:340px;} }
@media(max-width:760px){ .shelter-page .arm-media.row2.row2-tall .arm-frame img{height:min(300px,44vw);} }

/* Rows he wanted larger. The cell stops taking a share of the row so the photo
   can use its own width, and the shared height goes up to what the files can
   carry without upscaling. */
@media(min-width:761px){
  .shelter-page .arm-media.row-xl{max-width:1360px;}
  /* the cell keeps its share of the row - hugging the photo makes it hug the
     caption instead, which is the longer of the two and wraps the row - it just
     loses the 360px cap that was holding the photo down */
  .shelter-page .arm-media.row-xl>.arm-cell{max-width:none;}
}
.shelter-page .arm-media.duo.row-xl .arm-frame img{height:560px;}
.shelter-page .arm-media.duo.row2.row-xl .arm-frame img{height:560px;}
.shelter-page .arm-media.row4.row-xl .arm-frame img{height:400px;}
@media(min-width:761px) and (max-width:1080px){
  .shelter-page .arm-media.duo.row-xl .arm-frame img,
  .shelter-page .arm-media.duo.row2.row-xl .arm-frame img{height:380px;}
  .shelter-page .arm-media.row4.row-xl .arm-frame img{height:280px;}
}
@media(max-width:760px){
  .shelter-page .arm-media.duo.row-xl .arm-frame img,
  .shelter-page .arm-media.duo.row2.row-xl .arm-frame img{height:min(300px,40vw);}
  .shelter-page .arm-media.row4.row-xl .arm-frame img{height:min(260px,34vw);}
}

/* A solo photo that should fill the width it is given rather than stop at its
   own pixel width. */
.shelter-page .arm-media.solo.solo-fill .arm-frame img{width:100%;height:auto;max-height:none;}

/* the shipping line sits right on top of its photo */
.shelter-page p.center-block.tight-cap{margin:18px auto 4px;}
/* the customer review label reads larger */
.shelter-page .review-lead .sub-black{font-size:2em;}

/* ---- Custom vault doors: one gallery instead of five two-across rows ------
   Every photo sits in the same frame, four across, so a portrait door and a
   landscape interior read at one size. */
.cvd-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px 18px;
  max-width:1340px;margin:20px auto 8px;padding:0 2%;}
.cvd-cell{margin:0;display:flex;flex-direction:column;gap:8px;}
.cvd-cell a{display:block;line-height:0;cursor:zoom-in;}
.cvd-cell img{width:100%;height:360px;object-fit:contain;display:block;background:#fff;
  transition:transform .15s ease, box-shadow .15s ease;}
.cvd-cell a:hover img{box-shadow:0 6px 18px rgba(0,0,0,.15);transform:translateY(-2px);}
.cvd-cell figcaption{font-family:var(--font-sub);font-size:16px;font-weight:800;
  line-height:1.3;text-align:center;color:#111;}
@media(max-width:1080px){
  .cvd-grid{grid-template-columns:repeat(3,1fr);}
  .cvd-cell img{height:290px;}
}
@media(max-width:760px){
  .cvd-grid{grid-template-columns:repeat(2,1fr);gap:16px 12px;}
  .cvd-cell img{height:min(250px,34vw);}
  .cvd-cell figcaption{font-size:13px;}
}

/* the carriage-door sub-line carries the same weight as the model name, and
   its photo runs the width of the block */
.cvd-page .vd-model-head h3.carriage-sub{color:var(--maroon);}
@media(max-width:760px){ .cvd-page .vd-model-head h3.carriage-sub{} }
.cvd-page .arm-media.solo.carriage-solo .arm-frame img{width:100%;height:auto;max-width:100%;display:block;}

/* The rows that stayed two-across on this page get the same shared-height
   treatment the shelter pages use, so a pair never sits at two heights. */
.cvd-page .arm-media.duo,
.cvd-page .arm-media.quad{align-items:flex-start;justify-content:center;gap:20px 18px;}
.cvd-page .arm-media.duo>.arm-cell{flex:0 0 auto;max-width:360px;}
/* four across has to leave room for three gaps, so its cells run narrower */
.cvd-page .arm-media.quad>.arm-cell{flex:0 0 auto;max-width:250px;}
.cvd-page .arm-media.duo .arm-frame img{height:400px;}
.cvd-page .arm-media.quad .arm-frame img{height:320px;}
.cvd-page .arm-media.duo .arm-frame img,
.cvd-page .arm-media.quad .arm-frame img{width:auto;max-width:100%;object-fit:contain;
  display:block;margin:0 auto;}
@media(min-width:761px) and (max-width:1080px){
  .cvd-page .arm-media.duo .arm-frame img{height:300px;}
  .cvd-page .arm-media.quad .arm-frame img{height:240px;}
}
@media(max-width:760px){
  /* 48% each only pairs up if the gap is small enough to fit beside them */
  .cvd-page .arm-media.duo,
  .cvd-page .arm-media.quad{gap:14px 10px;}
  .cvd-page .arm-media.duo>.arm-cell{max-width:48%;}
  /* two a row on a phone, each taking half - hugging the photo let three fit
     and pushed the fourth onto its own line */
  .cvd-page .arm-media.quad>.arm-cell{flex:0 0 calc(50% - 5px);max-width:none;}
  .cvd-page .arm-media.duo .arm-frame img{height:min(260px,34vw);}
  .cvd-page .arm-media.quad .arm-frame img{height:min(220px,30vw);}
}

/* =========================================================================
   .local-page — the state, city, store and service pages
   These were built before the layout settled, so each one sized its own
   headings and let every photo keep its own height. This gives them the same
   framework the main pages run: one heading scale, one shared height per row,
   even row counts, and rows that fall to two across on a phone.
   ========================================================================= */
.local-page .caption-section{line-height:1.06;}
.local-page .caption-hero-h1{line-height:1.03;}
.local-page .center-block{max-width:1000px;}

/* photo rows: one height across the row, the cell takes a share of the row so
   a long caption can never make one cell wider than the rest */
.local-page .arm-media.duo,
.local-page .arm-media.trio,
.local-page .arm-media.quad,
.local-page .arm-media.quint{align-items:flex-start;justify-content:center;gap:20px 18px;}
.local-page .arm-media.duo>.arm-cell{flex:0 0 calc(50% - 9px);max-width:none;}
.local-page .arm-media.trio>.arm-cell{flex:0 0 calc(33.333% - 12px);max-width:none;}
.local-page .arm-media.quad>.arm-cell{flex:0 0 calc(25% - 14px);max-width:none;}
.local-page .arm-media.quint>.arm-cell{flex:0 0 calc(20% - 15px);max-width:none;}
.local-page .arm-media.duo .arm-frame img{height:400px;}
.local-page .arm-media.trio .arm-frame img{height:300px;}
.local-page .arm-media.quad .arm-frame img{height:260px;}
.local-page .arm-media.quint .arm-frame img{height:220px;}
.local-page .arm-media.duo .arm-frame img,
.local-page .arm-media.trio .arm-frame img,
.local-page .arm-media.quad .arm-frame img,
.local-page .arm-media.quint .arm-frame img{width:auto;max-width:100%;object-fit:contain;
  display:block;margin:0 auto;}
.local-page .arm-frame{background:transparent;border:0;padding:0;height:auto;}
.local-page .arm-media.solo .arm-frame img{width:auto;height:auto;max-width:100%;
  max-height:640px;display:block;margin:0 auto;}

@media(min-width:761px) and (max-width:1080px){
  .local-page .arm-media.duo .arm-frame img{height:300px;}
  .local-page .arm-media.trio .arm-frame img{height:230px;}
  .local-page .arm-media.quad .arm-frame img{height:200px;}
  .local-page .arm-media.quint .arm-frame img{height:170px;}
}
/* two a row on a phone, sized off the viewport so a wide photo and a tall one
   still reach the same height */
@media(max-width:760px){
  .local-page .arm-media.duo,
  .local-page .arm-media.trio,
  .local-page .arm-media.quad,
  .local-page .arm-media.quint{gap:14px 10px;}
  .local-page .arm-media.duo>.arm-cell,
  .local-page .arm-media.trio>.arm-cell,
  .local-page .arm-media.quad>.arm-cell,
  .local-page .arm-media.quint>.arm-cell{flex:0 0 calc(50% - 5px);max-width:none;}
  .local-page .arm-media.duo .arm-frame img{height:min(260px,34vw);}
  .local-page .arm-media.trio .arm-frame img,
  .local-page .arm-media.quad .arm-frame img,
  .local-page .arm-media.quint .arm-frame img{height:min(220px,30vw);}
  .local-page .arm-media.solo .arm-frame img{max-height:420px;}
}
/* the utility pages head with .caption-red-2em rather than .caption-hero-h1;
   the H1 still reads at the site's hero size */
.local-page h1.caption-red-2em{font-size:clamp(34px,6.4vw,92px);line-height:1.03;}

/* The four lock photos are cropped slightly differently, so letting each keep
   its own aspect left the row 16px out of level. One height, contained. */
.arm-media.quad.lock-row .arm-frame img{height:280px;width:auto;max-width:100%;
  object-fit:contain;margin:0 auto;}
@media(min-width:761px) and (max-width:1080px){ .arm-media.quad.lock-row .arm-frame img{height:210px;} }
@media(max-width:760px){ .arm-media.quad.lock-row .arm-frame img{height:min(190px,26vw);} }

/* the two pages whose H1 sat a few pixels under the site's hero size */
.vd-page .caption-hero-h1,

/* Gun safes on sale: the galleries mix portrait doors with wide interiors, so
   every cell becomes the same box and the photo is contained inside it. That is
   the only way a row of mixed shapes comes out level. */
.gss-page .arm-media.quad>.arm-cell{flex:0 0 calc(25% - 14px);max-width:none;}
.gss-page .arm-media.quad .arm-frame{background:transparent;border:0;padding:0;}
.gss-page .arm-media.quad .arm-frame img{width:100%;height:300px;object-fit:contain;display:block;}
@media(min-width:761px) and (max-width:1080px){ .gss-page .arm-media.quad .arm-frame img{height:230px;} }
@media(max-width:760px){
  .gss-page .arm-media.quad>.arm-cell{flex:0 0 calc(50% - 5px);}
  .gss-page .arm-media.quad .arm-frame img{height:min(200px,28vw);}
}
.gss-page .series-thumbs img{width:100%;height:100%;object-fit:contain;max-width:none;max-height:none;display:block;}

/* the three big vault doors sat 5px out of level */
.arm-media.vbig .arm-frame img{height:440px;width:auto;max-width:100%;object-fit:contain;
  display:block;margin:0 auto;}
@media(max-width:900px){ .arm-media.vbig .arm-frame img{height:320px;} }
@media(max-width:560px){ .arm-media.vbig .arm-frame img{height:230px;} }
/* the hero photo loses its frame on these pages too */
.local-page .vd-hero-img{background:transparent;border:0;padding:0;}
.local-page .vd-hero-img img{display:block;margin:0 auto;max-width:100%;height:auto;}
/* a sub-line that reads as two lines, on every screen */
.brk-line{display:block;height:0;}
/* the custom vault doors page takes the same hero and section sizes */
.cvd-page .caption-hero-h1{line-height:1.03;}
.cvd-page .caption-section{line-height:1.06;}
/* on these pages the row already sets one height for the photos, so the frame
   follows the photo instead of holding a taller fixed box behind it */
.local-page .arm-media.vbig .arm-frame{height:auto;}
.local-page .arm-media.trio.vbig .arm-frame img{height:420px;}
@media(min-width:761px) and (max-width:1080px){ .local-page .arm-media.trio.vbig .arm-frame img{height:300px;} }
@media(max-width:760px){ .local-page .arm-media.trio.vbig .arm-frame img{height:min(240px,32vw);} }

/* Gallery rows where every photo takes the same footprint: the cell is one box
   and the photo is contained inside it, so a portrait door and a wide interior
   read at the same size. */
.arm-media.eq-row{display:flex;flex-wrap:wrap;justify-content:center;gap:22px 18px;}
.arm-media.eq-row>.arm-cell{flex:0 0 calc(25% - 14px);max-width:none;}
.arm-media.eq-row.eq-3>.arm-cell{flex:0 0 calc(33.333% - 12px);}
.arm-media.eq-row.eq-2>.arm-cell{flex:0 0 calc(50% - 9px);}
.arm-media.eq-row.eq-5>.arm-cell{flex:0 0 calc(20% - 15px);}
.arm-media.eq-row .arm-frame{height:auto;padding:0;background:transparent;border:0;display:block;}
.arm-media.eq-row .arm-frame img{width:100%;height:330px;object-fit:contain;display:block;}
.arm-media.eq-row.eq-2 .arm-frame img{height:430px;}
.arm-media.eq-row.eq-5 .arm-frame img{height:250px;}
@media(min-width:761px) and (max-width:1080px){
  .arm-media.eq-row .arm-frame img{height:250px;}
  .arm-media.eq-row.eq-2 .arm-frame img{height:320px;}
}
@media(max-width:760px){
  .arm-media.eq-row{gap:14px 10px;}
  .arm-media.eq-row>.arm-cell,
  .arm-media.eq-row.eq-3>.arm-cell,
  .arm-media.eq-row.eq-2>.arm-cell,
  .arm-media.eq-row.eq-5>.arm-cell{flex:0 0 calc(50% - 5px);}
  .arm-media.eq-row .arm-frame img,
  .arm-media.eq-row.eq-2 .arm-frame img{height:min(210px,28vw);}
}


/* ============ Home & office safes page (hs-page) ============
   Kevin's walkthrough: the two lines under the H1 come up a notch, the model
   sub-head carries "Our Best Home Safe" big with the 49-year line under it,
   and the feature list is centred and a shade larger. */
.hs-page .hs-line-1{font-size:clamp(19px,2.5vw,30px);}
.hs-page .hs-line-2{font-size:clamp(17px,2.2vw,26px);}
.hs-page .vd-model-head h3{line-height:1.2;}
.hs-page .vd-model-head h3 .hs-sub-2{display:inline-block;margin-top:4px;
  font-size:clamp(17px,2.2vw,27px);}
.hs-page .spec-grid{justify-content:center;}
.hs-page .spec-item{font-size:1.06em;}
@media(min-width:900px){
  /* pulled in off the panel edges so the list reads as a centred block */
  .hs-page .spec-grid{max-width:820px;margin-left:auto;margin-right:auto;column-gap:34px;}
}

/* ============ Jewelry safes page (jw-page) ============
   Kevin's walkthrough: the three narrow photos that sat alone in a 375px
   column left a band of dead space either side, so they pair up two-across
   with the copy under them, the Bel Aire pair runs bigger, and the Rexford
   closet shot sits on its own at full width. */
.jw-page .arm-media.jw-pair{margin-bottom:16px;}
.jw-page .arm-media.jw-pair .arm-frame img{height:360px;}
.jw-page .arm-media.jw-big .arm-frame img{height:480px;}
.jw-page .arm-media.solo.jw-rexford{max-width:760px;margin:0 auto 14px;}
/* sf_model always stamps 'trio' on the row, which would hold this single photo
   to a third of the width; the cell takes the whole row instead. */
.jw-page .arm-media.solo.jw-rexford>.arm-cell{flex:0 0 100%;max-width:100%;}
.jw-page .arm-media.solo.jw-rexford .arm-frame{height:auto;padding:0;background:transparent;border:0;}
.jw-page .arm-media.solo.jw-rexford .arm-frame img{width:auto;height:620px;max-width:100%;
  object-fit:contain;display:block;margin:0 auto;}
@media(max-width:760px){.jw-page .arm-media.solo.jw-rexford .arm-frame img{height:min(460px,110vw);}}
/* "Standard features should be bigger" */
/* the sections ran with a lot of air between them once the photos moved */
.jw-page .vd-model-head{margin-top:18px;}
@media(max-width:1080px){
  .jw-page .arm-media.jw-pair .arm-frame img{height:270px;}
  .jw-page .arm-media.jw-big .arm-frame img{height:340px;}
}
@media(max-width:760px){
  .jw-page .arm-media.jw-pair .arm-frame img,
  .jw-page .arm-media.jw-big .arm-frame img{height:min(210px,28vw);}
}

/* ============ Customer review blocks ============
   These were only centred inside .shelter-page, so the NBC review sat
   left-aligned. The block is the same thing on every page it appears on. */
.review-block{max-width:960px;margin:6px auto 0;}
.review-lead{text-align:center;margin:0 0 8px;}
.review-lead .sub-black{font-family:var(--font-sub);font-size:clamp(20px,2.6vw,34px);
  letter-spacing:.5px;}
/* the safe room label is the one Kevin wanted larger still */
.shelter-page .review-lead .sub-black{font-size:clamp(24px,3.2vw,44px);}

/* ============ The call number at the foot of the page ============
   Kevin: about 49px. The call-last variants are already larger and keep
   their own sizes. */
.content .call-big{font-size:clamp(30px,6.4vw,62px);}
.fortress-page .call-big{font-size:clamp(30px,6.4vw,62px);}
@media(max-width:760px){
  .content .call-big,
  .fortress-page .call-big{font-size:clamp(26px,7vw,36px);}
}

/* ============ Vault door model rows: one box for every photo ============
   vbig sized by width:auto, so a narrow door and a wide door in the same row
   came out different widths. Every cell is the same box now and the photo is
   contained inside it, so nothing is cropped. */
.arm-media.vbig>.arm-cell{flex:0 1 calc(33.333% - 14px);}
.arm-media.vbig .arm-frame{height:auto;padding:0;background:transparent;border:0;}
.arm-media.vbig .arm-frame img{width:100%;height:440px;object-fit:contain;display:block;}
@media(max-width:1080px){ .arm-media.vbig .arm-frame img{height:320px;} }
@media(max-width:760px){
  .arm-media.vbig>.arm-cell{flex:0 1 calc(50% - 5px);}
  .arm-media.vbig .arm-frame img{height:min(230px,30vw);}
}

/* The vbig rows inside a .local-page were still sized by each photo's own
   width, because the .local-page trio rule sets width:auto and outranks the
   plain vbig rule. Same box for every photo here too. */
.local-page .arm-media.vbig .arm-frame img{width:100%;max-width:none;object-fit:contain;}
.local-page .arm-media.trio.vbig .arm-frame img{height:440px;}
@media(min-width:761px) and (max-width:1080px){
  .local-page .arm-media.trio.vbig .arm-frame img{height:320px;}
}
@media(max-width:760px){
  .local-page .arm-media.trio.vbig .arm-frame img{height:min(230px,30vw);}
}

/* Kevin, 11 Sep: the vault door photos want to run a bit bigger. 440 -> 520
   on a desktop, and the step down the sizes with it. */
.arm-media.vbig .arm-frame img{height:520px;}
.local-page .arm-media.trio.vbig .arm-frame img{height:520px;}
@media(max-width:1080px){
  .arm-media.vbig .arm-frame img,
  .local-page .arm-media.trio.vbig .arm-frame img{height:370px;}
}
@media(max-width:760px){
  /* These are PORTRAIT door photos. The old height came from a formula written
     for landscape thumbnails - 34vw is 134px on a 393px phone, so each door
     was contained inside a short wide box and shrank to a stamp with white
     either side. Two across, and a box tall enough for the door to fill the
     cell width: a cell is ~183px and the doors run about 0.62 wide-to-tall,
     so ~300px is the height that fits. */
  /* the row keeps an 18px gap by default: 2 x (50% - 5px) + 18px comes to
     100% + 8px and the second door wrapped onto its own line. Gap pinned at
     10px and 7px off each cell leaves 4px of slack. */
  .arm-media.vbig{gap:14px 10px;}
  .arm-media.vbig>.arm-cell{flex:0 1 calc(50% - 7px);}
  .arm-media.vbig .arm-frame img,
  .local-page .arm-media.trio.vbig .arm-frame img{height:min(300px,78vw);}
}
@media(max-width:560px){
  .arm-media.vbig .arm-frame,
  .arm-media.vbig .arm-frame img,
  .local-page .arm-media.trio.vbig .arm-frame img{height:min(300px,78vw);}
}

/* Kevin, 12 Sep: the wine cellar door photo runs bigger. */
.wine-page .vd-hero-img{padding:0;background:transparent;border:0;}
.wine-page .vd-hero-img img{max-height:760px;}
@media(max-width:900px){ .wine-page .vd-hero-img img{max-height:520px;} }

/* The defender page: the sub-line, the US-made line and the client list all
   come up so the copy fills the band instead of sitting in a thin strip. */
.vd-page .vd-sub-line{font-size:clamp(19px,2.5vw,33px);line-height:1.25;}
.vd-page .vd-usa-line{font-size:clamp(18px,2.3vw,30px);}
.vd-page .vd-clients{font-size:clamp(16px,1.95vw,25px);line-height:1.4;max-width:1180px;}
/* The photo at the top of the defender page. Kevin: no box, and large enough
   to fill the column - so it loses the frame and the padding and runs the full
   width of its half of the band. */
.vd-page .vd-hero-img{background:transparent;border:0;padding:0;align-items:stretch;}
.vd-page .vd-hero-img a{display:block;width:100%;}
/* The door is a portrait shot, so it is sized by HEIGHT and lets its own width
   follow. Stretching it to the full column width made it 662x790 - a slab as
   tall as the whole first screen, and cropped on top of that. */
.vd-page .vd-hero-img img{width:auto;height:clamp(340px,52vw,560px);max-height:none;max-width:100%;object-fit:contain;margin:0 auto;}
@media(max-width:900px){ .vd-page .vd-hero-img img{max-height:520px;object-fit:contain;} }
/* every door heading reads at one size down the page */
.vd-page .vd-model-head h4{font-size:clamp(15px,1.8vw,23px);letter-spacing:.4px;
  font-family:var(--font-sub);color:var(--maroon);margin:6px 0 0;text-transform:uppercase;}
/* Gibraltar sits on its own, so its photo was running large - bring it in */
.vd-page .arm-media.solo.gib-solo .arm-frame img{max-height:460px;width:auto;}

/* Kevin: "Blast-Proof & NBC-Sealed" should read as a header, not a small
   label over the price row. */
.nbc-page .price-row-label{font-family:var(--font-head);font-weight:600;
  font-size:clamp(22px,3vw,40px);text-transform:uppercase;letter-spacing:.6px;
  color:var(--black);margin-bottom:12px;}

/* ============ Hero column with a photo strip under it ============
   The main photo runs a little shorter so the strip below fits, and the two
   together match the height of the copy beside them. */
.vd-hero-col{display:flex;flex-direction:column;gap:14px;}
.vd-hero-col .vd-hero-img{background:transparent;border:0;padding:0;}
.vd-hero-col .vd-hero-img img{width:100%;height:auto;max-height:620px;object-fit:contain;}
.vd-hero-thumbs{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.vd-hero-thumbs a{display:block;text-decoration:none;cursor:zoom-in;}
.vd-hero-thumbs img{width:100%;height:430px;object-fit:contain;display:block;}
.vd-hero-thumbs span{display:block;text-align:center;margin-top:6px;
  font-family:var(--font-sub);font-size:15px;color:var(--black);}
@media(max-width:900px){
  .vd-hero-col .vd-hero-img img{max-height:400px;}
  .vd-hero-thumbs img{height:250px;}
}

/* The finishes row mixes portrait and near-square photos, so sizing each by
   its own width left one 45px shorter than its neighbours. Same box for all
   four, contain so nothing is cropped. */
/* :not(.lock-row) so the lock lineup keeps the size it has on every other
   page - Kevin wants that block identical site-wide. */
.vd-page .arm-media.quad:not(.lock-row) .arm-frame{height:auto;padding:0;background:transparent;border:0;}
.vd-page .arm-media.quad:not(.lock-row) .arm-frame img{width:100%;height:390px;max-width:none;object-fit:contain;display:block;}
@media(max-width:900px){ .vd-page .arm-media.quad:not(.lock-row) .arm-frame img{height:300px;} }
@media(max-width:560px){ .vd-page .arm-media.quad:not(.lock-row) .arm-frame img{height:min(230px,30vw);} }

/* The tray thumbnails were sitting in fixed 390px frames, so a short tray
   left a band of dead space under it. No frame, one height for the row. */
.jw-page .arm-media.quad.jw-trays .arm-frame{height:auto;padding:0;background:transparent;border:0;display:block;}
.jw-page .arm-media.quad.jw-trays .arm-frame img{width:100%;height:250px;max-width:none;object-fit:contain;display:block;}
@media(max-width:900px){ .jw-page .arm-media.quad.jw-trays .arm-frame img{height:200px;} }
@media(max-width:560px){ .jw-page .arm-media.quad.jw-trays .arm-frame img{height:min(170px,24vw);} }

/* The Pyro closet photo stands alone under its heading - no frame, and wide
   enough to read. */
.hs-page .arm-media.solo.hs-closet{max-width:820px;margin:0 auto 14px;}
/* sf_model always stamps 'trio' on the row, which would hold this single
   photo to a third of the width; the cell takes the whole row instead. */
.hs-page .arm-media.solo.hs-closet>.arm-cell{flex:0 0 100%;max-width:100%;}
.hs-page .arm-media.solo.hs-closet .arm-frame{height:auto;padding:0;background:transparent;border:0;}
.hs-page .arm-media.solo.hs-closet .arm-frame img{width:auto;height:620px;max-width:100%;
  object-fit:contain;display:block;margin:0 auto;}
@media(max-width:760px){.hs-page .arm-media.solo.hs-closet .arm-frame img{height:min(460px,110vw);}}


/* ---- NBC page hero: the photos ran past the end of the copy -------------
   At 1920 the photo column was 887px across and 1092 tall, so the two tankhead
   doors finished 290px below the end of the paragraph - a block of dead white
   beside them. nbc_vault_door.jpg is only 500x441, so most of that 887x620
   hero box was empty anyway. The column is capped at 560, the hero box shrinks
   to the photo, and the thumbs come down to 315, which puts the bottom of the
   doors level with the end of the copy. */
.nbc-page .vd-hero-col{max-width:560px;margin:0 auto;}
.nbc-page .vd-hero-col .vd-hero-img img{width:auto;height:auto;max-width:100%;max-height:none;margin:0 auto;}
.nbc-page .vd-hero-thumbs img{height:315px;}
@media(max-width:900px){
  .nbc-page .vd-hero-col .vd-hero-img img{max-height:400px;}
  .nbc-page .vd-hero-thumbs img{height:250px;}
}

/* ---- Defender page, round 3 -------------------------------------------
   The $595 tactical price sat at the foot of the feature column, adrift from
   the heading. It now opens the box, centred over the copy. */
.tac-price-box{display:block;text-align:center;margin:0 0 16px;background:#fbf2f2;
  border:2px solid var(--maroon);border-radius:10px;padding:10px 26px;
  font-family:'Franklin Gothic Medium',Arial,sans-serif;font-size:1.6em;
  font-weight:800;color:var(--red);}

/* The hero photo is a portrait shot in a half-width column, so at 1fr 1fr it
   could only ever be short and narrow with white either side. Giving the copy
   the wider share lets the photo fill its own column properly, and stretching
   the cell makes the photo end level with the bottom of Kevin's bio instead of
   leaving a gap. object-fit:contain, so nothing is cropped. */
.vd-page .vd-hero{grid-template-columns:0.86fr 1.14fr;}
.vd-page .vd-hero-img a{display:block;width:100%;}
.vd-page .vd-hero-img img{width:auto;height:clamp(340px,50vw,720px);max-height:none;
  max-width:100%;object-fit:contain;margin:0 auto;}
/* past 1600 the copy column gets wider, so the copy itself gets shorter - the
   photo has to come down with it or it hangs below the bio box. */
@media(min-width:1600px){ .vd-page .vd-hero-img img{height:630px;} }
/* the paragraph used to start hard against the top of the photo */
.vd-page .vd-hero>div:not(.vd-hero-img){padding-top:16px;}
@media(max-width:900px){
  .vd-page .vd-hero{grid-template-columns:1fr;align-items:start;}
  .vd-page .vd-hero-img img{height:auto;min-height:0;max-height:min(460px,86vw);
    width:auto;max-width:100%;margin:0 auto;}
  .vd-page .vd-hero>div:not(.vd-hero-img){padding-top:8px;}
}

/* Gibraltar was capped at 460px tall in a 520px row - far smaller than every
   other door on the page. It gets the full width of the band now. */
.vd-page .arm-media.solo.gib-solo{max-width:820px;margin:0 auto;}
/* the row also carries .vbig, which holds every cell to a third of the width -
   this is a single photo, so it takes the whole row. */
.vd-page .arm-media.solo.gib-solo>.arm-cell{flex:0 0 100%;max-width:100%;}
.vd-page .arm-media.solo.gib-solo .arm-frame{height:auto;padding:0;background:transparent;border:0;}
.vd-page .arm-media.solo.gib-solo .arm-frame img{width:auto;height:clamp(400px,46vw,660px);
  max-height:none;max-width:100%;object-fit:contain;display:block;margin:0 auto;}
@media(max-width:900px){
  .vd-page .arm-media.solo.gib-solo .arm-frame img{height:min(420px,96vw);}
}
/* the three back-trim-flange shots are square, so one height across the row */
.vd-page .arm-media.trio.flange-row{max-width:900px;margin:14px auto 26px;}
.vd-page .arm-media.trio.flange-row .arm-frame{height:auto;padding:0;background:transparent;border:0;}
.vd-page .arm-media.trio.flange-row .arm-frame img{width:100%;height:270px;object-fit:contain;display:block;}
@media(max-width:760px){ .vd-page .arm-media.trio.flange-row .arm-frame img{height:min(200px,44vw);} }

/* ---- Custom vault doors page ------------------------------------------
   One hero line now carries the size claim and the 49-years claim, so it
   reads as a headline rather than a caption. */
.cvd-page .cvd-hero-line .sub-black{font-size:clamp(21px,2.9vw,38px);line-height:1.25;display:block;}
/* the copy used to run a long way into the Double Door heading */
.cvd-page .cvd-tight-top{margin-top:-4px;}
.cvd-page .cvd-tight-top .vd-model-head{margin-top:10px;}
/* and the pinstriping heading sat a long way above its own photos */
.cvd-page .cvd-tight-head{margin-bottom:0;}
.cvd-page .arm-media.quad.cvd-tight-row{margin-top:4px;}
/* a video thumbnail is a link out to YouTube, not a lightbox photo */
.arm-cell.vid-cell .arm-frame{position:relative;display:block;height:auto;padding:0;
  background:transparent;border:0;}
/* the two stills are 1.82 and 0.94 wide, so one height keeps the row even
   without cropping either of them */
.arm-media.vid-duo{max-width:860px;margin:0 auto;align-items:center;}
.arm-media.vid-duo .arm-cell .arm-frame img{height:260px;width:auto;max-width:100%;
  object-fit:contain;display:block;margin:0 auto;}
@media(max-width:760px){ .arm-media.vid-duo .arm-cell .arm-frame img{height:min(190px,44vw);} }
.arm-cell.vid-cell .play-badge{width:92px;height:92px;}
.arm-cell.vid-cell .play-badge::after{border-width:18px 0 18px 29px;margin-left:6px;}
@media(max-width:760px){
  .play-badge{width:74px;height:74px;}
  .play-badge::after{border-width:14px 0 14px 23px;}
  .arm-cell.vid-cell .play-badge{width:62px;height:62px;}
  .arm-cell.vid-cell .play-badge::after{border-width:12px 0 12px 19px;}
}
.arm-cell.vid-cell:hover .play-badge{transform:translate(-50%,-50%) scale(1.08);}

/* ---- Hatch doors page --------------------------------------------------
   The first model ran a long way below the paragraph above it. */
.shelter-page .hd-first{margin-top:2px;}
.shelter-page .hd-first .vd-model-head{margin-top:0;}
/* "1" Hatch Door" and "NBC Hatch Door" sit above their photos as headings */
.shelter-page .arm-media.hd-heads .arm-title-top{font-family:'Oswald',Arial,sans-serif;
  font-weight:700;font-size:clamp(20px,2.5vw,32px);color:#383838;margin:0 0 8px;
  text-transform:none;line-height:1.2;}

/* ---- Ballistic door page ----------------------------------------------
   Kevin: the Federalist sub-head, the spec line under it and the AR-500
   price label all read too small against the headings around them. */
.bal-page .vd-model-head h3{line-height:1.2;margin:10px 0 0;}
.bal-page .vd-model-head h4{font-size:clamp(18px,2.3vw,32px);line-height:1.25;margin:8px 0 0;}
.bal-page .price-row-label{font-size:clamp(20px,2.6vw,36px);line-height:1.25;margin:10px 0 8px;}
@media(max-width:760px){
  .bal-page .vd-model-head h4{font-size:clamp(15px,4.2vw,21px);}
  .bal-page .price-row-label{font-size:clamp(16px,4.6vw,23px);}
}

/* ---- Video stills, site-wide -------------------------------------------
   A still that opens a video is a link out to YouTube in a new tab, never a
   lightbox photo. These give the badge something to sit on. */
.vid-tile{position:relative;display:inline-block;line-height:0;}
.vid-tile img{display:block;}
.pw-cell.pw-vid .pw-play{position:relative;display:block;}
.arm-cell.vid-cell{cursor:pointer;}

/* ---- NBC hero: photos across, then the copy ----------------------------
   The two tankhead doors used to sit in a column beside the paragraph, which
   left a band of white next to them as soon as the screen narrowed. */
.nbc-page .arm-media.trio.vd-stack-row{max-width:1150px;margin:0 auto 6px;align-items:flex-start;}
.nbc-page .arm-media.trio.vd-stack-row .arm-frame{height:auto;padding:0;background:transparent;border:0;}
.nbc-page .arm-media.trio.vd-stack-row .arm-frame img{width:auto;height:clamp(260px,30vw,430px);
  max-height:none;max-width:100%;object-fit:contain;display:block;margin:0 auto;}
.nbc-page .vd-stack-copy{max-width:1000px;margin:0 auto;}
@media(max-width:760px){
  .nbc-page .arm-media.trio.vd-stack-row{gap:14px 10px;}
  .nbc-page .arm-media.trio.vd-stack-row>.arm-cell{flex:0 1 calc(50% - 7px);}
  .nbc-page .arm-media.trio.vd-stack-row .arm-frame img{height:min(250px,46vw);}
}

/* ---- Survival shelters: the gun-port photo -----------------------------
   gun-port-rifle.jpg is only 400x329, so beside four paragraphs in a half-
   width grid column it could only ever leave a block of white under itself.
   The band becomes one column with the photo floated into the copy, so the
   text closes round it and there is no dead space at any width - and the
   photo is never upscaled past its own size. */
.shelter-page .vd-hero.ss-port-band{display:block;}
.shelter-page .ss-port-band .vd-hero-img{float:left;width:min(400px,42%);margin:4px 26px 10px 0;
  background:transparent;border:0;padding:0;}
.shelter-page .ss-port-band .vd-hero-img img{width:100%;height:auto;max-height:none;display:block;}
.shelter-page .ss-port-band>div:not(.vd-hero-img){overflow:hidden;}
.shelter-page .ss-port-band::after{content:"";display:block;clear:both;}
@media(max-width:760px){
  .shelter-page .ss-port-band .vd-hero-img{float:none;width:min(400px,86vw);margin:0 auto 14px;}
}

/* ---- Safe room ---------------------------------------------------------- */
/* the walk-in-vault price now sits under the photo, and gives the gallery
   below it some air */
.shelter-page .sr-under-photo{margin:14px auto 26px;}
.shelter-page .sr-big-sizes{font-size:clamp(22px,3.1vw,46px);line-height:1.25;display:block;}

/* ---- Custom safe interiors ---------------------------------------------- */
.local-page .ci-hero-sub{font-size:clamp(20px,2.8vw,38px);line-height:1.25;display:block;}
.local-page .ci-tight{padding-top:2px;}
.local-page .arm-media.quint.ci-tight-row{margin-top:4px;}
.local-page .ci-photo-cap{text-align:center;}
.local-page .ci-big-line{text-align:center;}
.local-page .ci-big-line .sub-black{font-size:clamp(18px,2.2vw,30px);line-height:1.35;display:block;font-weight:bold;}

/* ---- Options page: each option beside its own photo --------------------
   Kevin: the live page reads option by option, photo next to the price and
   the description. It used to run all the copy first and dump the photos in
   galleries at the foot. */
.local-page .opt-hero-sub .sub-black{font-size:clamp(20px,2.9vw,40px);line-height:1.25;display:block;}
.local-page .opt-wrap{display:flex;gap:30px;align-items:flex-start;max-width:1150px;
  margin:0 auto;padding-top:18px;padding-bottom:18px;}
.local-page .opt-row+.opt-row .opt-wrap{border-top:1px solid var(--line);}
.local-page .opt-shots{flex:0 0 360px;display:flex;flex-wrap:wrap;gap:12px;justify-content:center;}
.local-page .opt-shots .opt-shot{flex:0 0 100%;text-decoration:none;}
.local-page .opt-shots-multi .opt-shot{flex:0 1 calc(50% - 6px);}
.local-page .opt-shots .arm-frame{display:flex;align-items:center;justify-content:center;
  height:auto;padding:0;background:transparent;border:0;position:relative;}
.local-page .opt-shots .arm-frame img{width:100%;height:250px;max-height:none;
  object-fit:contain;display:block;}
.local-page .opt-shots-multi .arm-frame img{height:190px;}
.local-page .opt-copy{flex:1 1 auto;min-width:0;}
/* Kevin's options sheet: the heading sits centred over its own column, the
   description under it, and the price large and centred below that. */
.local-page .opt-copy h2{text-align:center;margin:0;}
.local-page .opt-copy .opt-desc{text-align:left;margin:10px 0 0;}
.local-page .opt-copy .opt-price{display:block;text-align:center;margin:14px 0 0;
  font-family:var(--font-sub),'Oswald',Arial,sans-serif;font-weight:800;color:#000;
  font-size:clamp(26px,3.2vw,46px);line-height:1.15;}
/* an option with no photo of its own still reads centred, like a section note */
.local-page .opt-row-solo .opt-copy h2,
.local-page .opt-row-solo .opt-copy .opt-desc{text-align:center;}
.local-page .opt-row-solo .opt-wrap{max-width:960px;}
@media(max-width:860px){
  .local-page .opt-wrap{flex-direction:column;align-items:center;gap:14px;}
  .local-page .opt-shots{flex:0 0 auto;width:min(420px,100%);}
  .local-page .opt-shots .arm-frame img{height:min(230px,52vw);}
  .local-page .opt-shots-multi .arm-frame img{height:min(180px,40vw);}
  .local-page .opt-copy h2,
  .local-page .opt-copy .opt-desc{text-align:center;}
}

/* ---- NBC / vault sub-page features heading sits centred ---------------- */
.vd-feat-head{text-align:center;}

/* ---- Safe room review -------------------------------------------------- */
/* the attribution joined the heading, so it needs to stay on one line; the
   quote under it carries the weight instead */
.shelter-page .sr-review-head .sub-black{font-size:clamp(17px,2.05vw,30px);line-height:1.25;
  display:block;white-space:nowrap;}
@media(max-width:720px){
  .shelter-page .sr-review-head .sub-black{white-space:normal;font-size:clamp(15px,4.2vw,21px);}
}
.shelter-page .sr-review-big .font-body-text{font-size:clamp(17px,1.75vw,27px);line-height:1.5;}

/* ---- Custom safe interiors: the gallery sits right under its lead line -- */
.local-page .ci-tight{padding-top:0;padding-bottom:6px;}
.local-page .arm-media.quint.ci-tight-row{margin-top:0;}

/* ---- Jewelry safes ------------------------------------------------------ */
.jw-page .jw-hero-sub{font-size:clamp(20px,2.9vw,40px);line-height:1.25;display:block;}
/* the gallery had a box round every photo, and the boxes left dead space
   above the short ones - one height, no frame */
.jw-page .arm-media.quad.jw-gal .arm-frame{height:auto;padding:0;background:transparent;border:0;}
.jw-page .arm-media.quad.jw-gal .arm-frame img{width:100%;height:280px;max-height:none;
  object-fit:contain;display:block;}
@media(max-width:900px){ .jw-page .arm-media.quad.jw-gal .arm-frame img{height:220px;} }
@media(max-width:560px){ .jw-page .arm-media.quad.jw-gal .arm-frame img{height:min(170px,38vw);} }

/* ---- Home & office: the jewelry drawer thumbs ---------------------------
   each thumb carried a box, and the boxes left a band of dead space under
   the two photos above them */
.hs-page .arm-media.quad.hs-jw-trays .arm-frame{height:auto;padding:0;background:transparent;border:0;}
.hs-page .arm-media.quad.hs-jw-trays .arm-frame img{width:100%;height:230px;max-height:none;
  object-fit:contain;display:block;}
@media(max-width:900px){ .hs-page .arm-media.quad.hs-jw-trays .arm-frame img{height:180px;} }
@media(max-width:560px){ .hs-page .arm-media.quad.hs-jw-trays .arm-frame img{height:min(150px,34vw);} }

/* ---- Safe room: the jig-saw step door band -----------------------------
   safe-door_jigsaw.jpg is 227x289. In a half-width grid column beside two
   paragraphs it could only ever leave a block of white, so the copy closes
   round it instead - the same treatment the gun-port photo gets. */
.shelter-page .vd-hero.sr-float-band{display:block;}
.shelter-page .sr-float-band .vd-hero-img{float:left;width:min(300px,34%);margin:2px 26px 8px 0;
  background:transparent;border:0;padding:0;}
.shelter-page .sr-float-band .vd-hero-img img{width:100%;height:auto;max-height:none;display:block;}
.shelter-page .sr-float-band>div:not(.vd-hero-img){overflow:hidden;}
.shelter-page .sr-float-band::after{content:"";display:block;clear:both;}
@media(max-width:760px){
  .shelter-page .sr-float-band .vd-hero-img{float:none;width:min(300px,74vw);margin:0 auto 14px;}
}

/* ---- Options page: the sections whose photos take the full width -------- */
.local-page .opt-wrap-wide{max-width:1150px;margin:0 auto;padding-top:18px;padding-bottom:18px;}
.local-page .opt-row-wide+.opt-row .opt-wrap,
.local-page .opt-row+.opt-row-wide .opt-wrap-wide,
.local-page .opt-row-wide+.opt-row-wide .opt-wrap-wide{border-top:1px solid var(--line);}
.local-page .opt-wrap-wide h2{text-align:center;margin:0;}
.local-page .opt-shots-wide{display:flex;flex-wrap:wrap;gap:18px;justify-content:center;
  margin:16px auto 0;}
.local-page .opt-shots-wide .opt-shot{flex:1 1 0;min-width:0;max-width:560px;text-decoration:none;}
.local-page .opt-shots-wide .arm-frame{display:flex;align-items:center;justify-content:center;
  height:auto;padding:0;background:transparent;border:0;position:relative;}
.local-page .opt-shots-wide .arm-frame img{width:100%;height:430px;max-height:none;
  object-fit:contain;display:block;}
.local-page .opt-wrap-wide .opt-desc{text-align:left;max-width:960px;margin:18px auto 0;}
.local-page .opt-wrap-wide .opt-price{display:block;text-align:center;margin:14px 0 0;
  font-family:var(--font-sub),'Oswald',Arial,sans-serif;font-weight:800;color:#000;
  font-size:clamp(26px,3.2vw,46px);line-height:1.15;}
@media(max-width:860px){
  .local-page .opt-shots-wide{gap:12px;}
  .local-page .opt-shots-wide .opt-shot{flex:1 1 calc(50% - 6px);}
  .local-page .opt-shots-wide .arm-frame img{height:min(300px,52vw);}
  .local-page .opt-wrap-wide .opt-desc{text-align:center;}
}

/* ---- Custom safe interiors: the boxes were the dead space ---------------
   The quint cells carried a 390px box while the photos inside ran 220px, so
   every cell left 170px of white. The box goes and the row sizes to the
   photos. */
.local-page .arm-media.quint.ci-tight-row .arm-frame{height:auto;padding:0;background:transparent;border:0;}
.local-page .arm-media.quint.ci-tight-row .arm-frame img{height:300px;width:100%;
  max-height:none;object-fit:contain;}
@media(max-width:900px){ .local-page .arm-media.quint.ci-tight-row .arm-frame img{height:230px;} }
@media(max-width:560px){ .local-page .arm-media.quint.ci-tight-row .arm-frame img{height:min(180px,40vw);} }
/* and the lead photo ran a long way above the gallery heading */
.local-page .ci-hero-shot{margin-bottom:0 !important;}
.local-page .ci-hero-shot+*{margin-top:0;}

/* ---- Home page ----------------------------------------------------------
   Kevin: the headings should read like the rest of the site, and the bands
   carried a lot of air between them. */
.local-page .idx-band-head{text-align:center;}
.local-page .idx-band-head .caption-1-5em{font-size:clamp(24px,3.4vw,50px);line-height:1.2;display:block;}
.local-page .idx-usa-head{text-align:center;font-size:clamp(26px,3.6vw,52px);line-height:1.2;
  margin:0 0 14px;}
/* the US-made list runs two columns, three a side, like the feature grids */
.local-page ul.idx-usa-list{max-width:1040px;margin:0 auto;columns:2;column-gap:40px;
  text-align:left;list-style-position:outside;padding-left:22px;}
.local-page ul.idx-usa-list li{break-inside:avoid;margin:0 0 8px;}
@media(max-width:760px){ .local-page ul.idx-usa-list{columns:1;} }

/* ---- "Standard Colors" reads at section-heading size on every model page */
.std-head{font-size:clamp(24px,3vw,46px);letter-spacing:1px;line-height:1.2;margin:0 0 12px;}
@media(max-width:760px){ .std-head{font-size:clamp(20px,5.4vw,28px);} }
/* the category rows carried a 390px box while the photos ran ~250px, so every
   cell left a band of white above and below - the box goes, one height stays */
.local-page .idx-cat{padding-top:10px;padding-bottom:10px;}
.local-page .idx-cat-head{font-size:clamp(28px,3.9vw,58px);line-height:1.15;margin:0;}
.local-page .arm-media.quad.idx-cat-row{margin-top:12px;align-items:flex-start;}
.local-page .arm-media.quad.idx-cat-row .arm-frame{height:auto;padding:0;background:transparent;border:0;}
.local-page .arm-media.quad.idx-cat-row .arm-frame img{width:100%;height:300px;max-height:none;
  object-fit:contain;display:block;}
@media(max-width:900px){ .local-page .arm-media.quad.idx-cat-row .arm-frame img{height:230px;} }
@media(max-width:560px){ .local-page .arm-media.quad.idx-cat-row .arm-frame img{height:min(180px,40vw);} }

/* ---- Home page, round 2 -------------------------------------------------
   Kevin: the H1 was overpowering the bands under it; the category headings
   and their blurbs carry the page instead. */
.local-page h1.idx-h1{font-size:clamp(26px,3.6vw,54px);line-height:1.18;}
.local-page .idx-lede{max-width:1100px;margin:10px auto 0;text-align:center;}
.local-page .idx-lede .font-body-text-1plus{text-align:center;display:block;}
.local-page .idx-cat-blurb .font-body-text{font-size:clamp(17px,1.65vw,25px);line-height:1.5;
  text-align:center;display:block;}
.local-page .idx-cat-more,
.local-page .idx-band-head{text-align:center;margin-left:auto !important;margin-right:auto !important;}
.local-page .idx-cat-more .blue-link-big{font-size:clamp(18px,1.7vw,26px);}
/* the category photos match the size the photo wall lower down runs at */
.local-page .arm-media.quad.idx-cat-row .arm-frame img{height:360px;}
@media(max-width:900px){ .local-page .arm-media.quad.idx-cat-row .arm-frame img{height:260px;} }
@media(max-width:560px){ .local-page .arm-media.quad.idx-cat-row .arm-frame img{height:min(200px,44vw);} }
.local-page .idx-privacy{text-align:center;max-width:1040px;margin-left:auto;margin-right:auto;}

/* ---- The code video under the lock lineup, site-wide -------------------- */
.lock-code{max-width:900px;margin:26px auto 0;text-align:center;}
.lock-code-head{font-family:var(--font-sub),'Oswald',Arial,sans-serif;font-weight:800;
  color:#383838;font-size:clamp(16px,1.72vw,26px);line-height:1.3;margin:0 auto 8px;
  max-width:1100px;}
@media(max-width:880px){ .lock-code-head{font-size:clamp(15px,2.9vw,20px);} }
.lock-code-sub{max-width:760px;margin:0 auto 14px;}
/* the thumbnail is a button, so it must not look like one */
button.vid-pop{display:block;position:relative;margin:0 auto;padding:0;border:0;background:none;
  cursor:pointer;line-height:0;max-width:420px;width:100%;}
button.vid-pop img{width:100%;height:300px;object-fit:contain;display:block;}
button.vid-pop:hover .play-badge{transform:translate(-50%,-50%) scale(1.08);}
@media(max-width:760px){ button.vid-pop img{height:min(230px,52vw);} }

/* the panel the clip plays in */
.vid-modal{position:fixed;inset:0;background:rgba(0,0,0,.82);z-index:9999;
  display:none;align-items:center;justify-content:center;padding:20px;}
.vid-modal.open{display:flex;}
.vm-box{position:relative;width:min(420px,92vw);}
.vm-frame{position:relative;width:100%;aspect-ratio:9/16;max-height:82vh;background:#000;
  border-radius:10px;overflow:hidden;}
.vm-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.vm-close{position:absolute;top:-44px;right:0;width:36px;height:36px;border:0;border-radius:50%;
  background:#fff;color:#000;font-size:26px;line-height:1;cursor:pointer;}

/* ---- Options page, round 3 ---------------------------------------------
   Kevin: every option heading should hold on one line. */
.local-page .opt-copy h2,
.local-page .opt-wrap-wide h2{font-size:clamp(20px,2.3vw,34px);line-height:1.2;}
@media(max-width:860px){
  .local-page .opt-copy h2,
  .local-page .opt-wrap-wide h2{font-size:clamp(18px,4.4vw,26px);}
}
/* Secure-It, in the same boxed shape the defender page uses */
.local-page .armory-box.opt-armory{margin:8px auto 26px;max-width:1150px;}
.local-page .opt-armory .armory-img{background:transparent;padding:18px;}
.local-page .opt-armory .armory-img img{max-height:430px;}
/* Kevin: the name is only in the box now, so it carries the block - big
   enough that the box is not mostly empty. */
.local-page .opt-armory .tac-price-box{font-size:clamp(19px,2.35vw,37px);padding:12px 22px;}
/* a single wide photo takes the whole row - lighting.png is a 4.5:1 strip and
   looked lost at a third of it */
.local-page .opt-shots-wide .opt-shot:only-child{flex:0 0 100%;max-width:100%;}
.local-page .opt-shots-wide .opt-shot:only-child .arm-frame img{height:auto;max-height:340px;
  width:100%;object-fit:contain;}

/* ---- Defender hero: the U.S. made line and the collection intro ---------
   The flag was an emoji; Windows does not draw the regional-indicator pair as
   a flag, so it is a real image now and has to sit on the text baseline. */
.vd-page .vd-usa-flag{height:1.05em;width:auto;vertical-align:-0.16em;margin-right:12px;
  border-radius:2px;display:inline-block;}
/* and this paragraph ran the full width of the band while every other body
   paragraph on the page is capped at 900 and centred */
.vd-page .vd-collection-intro{max-width:1150px;padding:0 2%;margin-left:auto;margin-right:auto;}

/* ---- The 2026 colour photography rows ----------------------------------
   The safes are shot on white with plenty of air round them, so a box would
   only add more; one height keeps the row even. */
.arm-media.quad.colour-row .arm-frame{height:auto;padding:0;background:transparent;border:0;}
.arm-media.quad.colour-row .arm-frame img{width:100%;height:330px;max-height:none;
  object-fit:contain;display:block;}
@media(max-width:900px){ .arm-media.quad.colour-row .arm-frame img{height:250px;} }
@media(max-width:560px){ .arm-media.quad.colour-row .arm-frame img{height:min(190px,42vw);} }

/* Tech package row: the LED and outlet shots are portrait, the lit-interior shot
   is landscape. One frame height across the three so they read as one row. */
.fortress-page .arm-media.trio.tech-row .arm-frame{height:auto;padding:0;background:transparent;border:0;}
.fortress-page .arm-media.trio.tech-row .arm-frame img{width:100%;height:340px;max-height:none;object-fit:contain;display:block;}
@media(max-width:900px){ .fortress-page .arm-media.trio.tech-row .arm-frame img{height:230px;} }
/* The John Wick room photo sat wider than the two shots under it. */
.fortress-page .jw-stack>.bl-main img{max-width:820px;}

/* gun-safe-sales: the two hero shots sat wider than the copy round them. */
.gss-page .arm-media.solo.super-size{max-width:940px;}
/* Kevin: both gallery headings read bigger than the rest of the page. */
.gss-page .gs-paint-head,.gss-page .gs-sale-head{display:inline-block;font-size:1.35em;line-height:1.2;}
/* On-sale gallery: the photo sets its own cell height, so there is no
   dead space under a short photo inside a tall fixed box. */
.gss-page .arm-media.quad .arm-frame{height:auto;padding:0;background:transparent;border:0;}
.gss-page .arm-media.quad .arm-frame img{width:100%;height:300px;max-height:none;object-fit:contain;display:block;}
@media(max-width:900px){ .gss-page .arm-media.quad .arm-frame img{height:230px;} }
@media(max-width:560px){ .gss-page .arm-media.quad .arm-frame img{height:190px;} }

/* Kevin: the size-and-price line under each safe name reads bigger. */
.model-hero-size,.sarge-hero-size{font-size:clamp(24px,4.1vw,56px);}
/* "Must Watch" is a short line - centre it under the privacy heading. */
.lock-code-sub .font-body-text{text-align:center;font-weight:700;}

/* Kevin: every vault-door price box reads the same - no gold bar, no
   three-sided border on the middle one. */
.vd-page .price-tile.feat{border:2px solid var(--charcoal);}
.vd-page .price-tile.feat .price-amt{color:inherit;}

/* Kevin: the Supra and Pyro photos read larger on the home-office page. */
.hs-page .arm-media.duo.hs-big{max-width:1180px;}
.hs-page .arm-media.duo.hs-big .arm-frame{height:auto;padding:0;background:transparent;border:0;}
.hs-page .arm-media.duo.hs-big .arm-frame img{width:auto;max-width:100%;height:520px;max-height:none;object-fit:contain;display:block;margin:0 auto;}
@media(max-width:900px){ .hs-page .arm-media.duo.hs-big .arm-frame img{height:340px;} }
@media(max-width:560px){ .hs-page .arm-media.duo.hs-big .arm-frame img{height:240px;} }

/* Home page category bands: Kevin would rather the photos run at their own
   width than be cropped to match, so they stay contained in the row height. */
.local-page .arm-media.quad.idx-cat-row .arm-frame img{object-fit:contain;border-radius:0;}

/* ---- Accessories page, Kevin's round ------------------------------------
   The price sits under its heading now, and the pair of photos under a lead
   diagram runs side by side at one height. The body copy carries the page,
   so it runs a size up. */
.local-page .opt-wrap-wide > .opt-price,
.local-page .opt-copy .opt-price{margin:6px 0 0;}
.local-page .opt-shots-pair{margin-top:14px;}
.local-page .opt-shots-pair .opt-shot{flex:1 1 0;max-width:520px;}
.local-page .opt-shots-pair .arm-frame img{height:320px;}
@media(max-width:860px){ .local-page .opt-shots-pair .arm-frame img{height:min(240px,44vw);} }
.local-page .opt-desc .font-body-text{font-size:clamp(18px,1.55vw,24px);line-height:1.55;}
/* the tactical panel shots share a row height, uncropped - same rule as the
   home page bands: no photo is ever cut to fit. */
.local-page .arm-media.eq-row.opt-gal .arm-frame img{height:300px;object-fit:contain;border-radius:0;}
@media(max-width:1100px){ .local-page .arm-media.eq-row.opt-gal .arm-frame img{height:230px;} }
@media(max-width:700px){ .local-page .arm-media.eq-row.opt-gal .arm-frame img{height:min(200px,32vw);} }
/* Kevin: the trim-kit line reads centred under its heading */
.vd-page .vd-trim-copy .font-body-text{text-align:center;}

/* ---- Home page, Kevin's round ------------------------------------------
   The band headings and the copy under them carry the page, so they step up,
   and the photos under each band go up with them. */
.local-page .idx-cat-head{font-size:clamp(34px,4.7vw,70px);}
.local-page .idx-cat-blurb .font-body-text{font-size:clamp(19px,1.9vw,29px);line-height:1.5;}
.local-page .idx-cat-more .blue-link-big{font-size:clamp(20px,1.9vw,29px);}
.local-page .arm-media.quad.idx-cat-row .arm-frame img{height:420px;}
@media(max-width:900px){ .local-page .arm-media.quad.idx-cat-row .arm-frame img{height:300px;} }
@media(max-width:560px){ .local-page .arm-media.quad.idx-cat-row .arm-frame img{height:min(230px,50vw);} }

/* ---- Phone fixes, Kevin's round ----------------------------------------
   1. Two photos to a row, not one. A cell at calc(50% - 9px) plus an 18px gap
      comes to exactly 100% of the content box, so a sub-pixel rounding error
      wrapped every photo onto its own line. A smaller gap and a wider margin
      leave room for the rounding.
   2. Nothing touches the screen edge. Headings and copy that sit outside a
      .pad wrapper had no side gutter at all on a phone. */
@media(max-width:640px){
  /* the page-level rules size a phone cell at calc(50% - 5px), so two of them
     plus the gap must stay inside 100% - the gap has to be 10px or less or
     every photo wraps onto its own line */
  .arm-media{gap:8px;padding:0 3%;}
}
@media(max-width:760px){
  .content .vd-model-head,
  .content .text-block-cntrd,
  .content .std-head,
  .content .caption-section{padding-left:4vw;padding-right:4vw;}
  .content > p,
  .content section > p,
  .content .model-panel{padding-left:4vw;padding-right:4vw;box-sizing:border-box;}
}
/* photos under a heading sit centred in their row */
.content .arm-media,
.content .photo-wall,
.content .model-colors{justify-items:center;}
.content .arm-media{align-items:flex-start;}
/* Kevin: a paragraph starts from the left on every line, the way print reads.
   The block stays centred on the page; only the text inside it ranges left. */
.copy-left, .copy-left .font-body-text, .copy-left .font-body-text-1plus,
.copy-left span{text-align:left;}
@media(max-width:760px){ .copy-left, .copy-left span{text-align:left;} }
/* the client list is a sentence, so it ranges left like the rest of the copy;
   the quote and the name above it stay centred in the card */
.designer-inline .designer-clients{text-align:left;}
@media(max-width:560px){ .designer-inline .designer-clients{text-align:left;} }

/* ---- Kevin's launch round ----------------------------------------------- */
/* the designer card: the photo covers the left, the text covers the right,
   the quote is the biggest thing in it and the client list sits under the name */
.designer-inline .designer-txt{display:flex;flex-direction:column;justify-content:center;}
.designer-inline .designer-quote{font-size:clamp(20px,2.1vw,30px);line-height:1.3;margin:0 0 8px;}
.designer-inline .designer-name{font-size:clamp(16px,1.35vw,20px);}
.designer-inline .designer-clients{font-size:clamp(14.5px,1.1vw,17px);line-height:1.45;}
@media(max-width:700px){
  .designer-top{flex-direction:column;align-items:center;gap:14px;}
  .designer-inline img{width:100%;max-width:280px;}
  .designer-inline .designer-txt{text-align:left;}
}

/* Vault Doors Of The Week: narrower photos so the row is not all image */
.vd-page .prod-grid.otw-grid{max-width:960px;margin-left:auto;margin-right:auto;}
.vd-page .prod-grid.otw-grid .prod-cell img{height:250px;}
@media(max-width:900px){ .vd-page .prod-grid.otw-grid .prod-cell img{height:200px;} }

/* TACTICAL WEAPON DOOR leads its block, and the copy beside the photo steps up
   to fill the column instead of leaving dead space under it */
.vd-page .tac-price-box.tac-price-lead{
  margin:0 0 14px;font-size:clamp(22px,2.4vw,34px);line-height:1.2;padding:12px 18px;}
.vd-page .armory-box .armory-detail .font-body-text{font-size:clamp(17px,1.35vw,21px);line-height:1.5;}
.vd-page .armory-box .armory-detail .feat-label{font-size:clamp(16px,1.25vw,20px);}
.vd-page .armory-box .armory-detail .spec-item{font-size:clamp(15.5px,1.15vw,18.5px);}

/* the AR-500 line on the ballistic page reads as a section heading */
.bal-page .bal-hero-h2{font-size:clamp(22px,3.2vw,40px);line-height:1.15;}

/* the video thumbnails on the home page all run at one size */
.local-page .video-grid img{height:230px;object-fit:cover;border-radius:4px;}
@media(max-width:900px){ .local-page .video-grid img{height:180px;} }
@media(max-width:560px){ .local-page .video-grid img{height:min(150px,33vw);} }

/* the band blurbs step back down so they do not run to three lines */
.local-page .idx-cat-blurb .font-body-text{font-size:clamp(17px,1.55vw,24px);line-height:1.45;}

/* ---- The Cognito quote form -------------------------------------------
   Kevin: the form should look built into the page, not dropped on it. The
   embed sits in its own card with a frame and room around it, and runs
   taller so nothing inside is cramped. The form's own styling is served by
   Cognito and cannot be reached from here. */
.form-wrap{max-width:860px;}
.cognito-embed{
  background:#fff;
  border:2px solid var(--maroon);
  border-radius:12px;
  padding:22px 24px 16px;
  box-shadow:0 2px 14px rgba(0,0,0,.07);
}
.cognito-embed iframe{
  display:block;
  width:100%;
  min-height:860px;
  border:0;
  border-radius:6px;
}
.cognito-fallback{
  margin:14px 0 0;padding-top:14px;border-top:1px solid var(--line);
  text-align:center;font-size:16px;color:#444;
}
.cognito-fallback a{color:var(--maroon);font-weight:700;}
@media(max-width:700px){
  .cognito-embed{padding:14px 12px 12px;border-radius:8px;}
  .cognito-embed iframe{min-height:900px;}
}

/* =========================================================================
   ONE TYPE SCALE FOR THE WHOLE SITE
   Kevin: every page uses the same size for a page title, a series heading, a
   model heading, a section heading and a paragraph. Page-by-page rules had
   pulled these apart - section headings ran at 41, 43, 49, 51, 61, 66, 71 and
   97px depending on which page you were on, and the sale page's series blocks
   were bigger than everywhere else.
   These are the settled sizes. The big model and series headings are the ones
   the sale page used, now on all 66 pages. Last in the file, so they win.
   ========================================================================= */

/* the page title */
.content h1,
.content .caption-hero-h1,
.content .caption-red-2em,
.content .model-hero-name,
.content .sarge-hero-name{font-size:clamp(32px,6.4vw,92px) !important;line-height:1.04;}
/* the home page keeps its own, smaller H1 so it does not overpower the bands */
.local-page h1.idx-h1{font-size:clamp(26px,3.6vw,54px) !important;}

/* a series or model name - BRAVO SERIES, IRON AMERICAN 65, ARMORY VAULT DOOR */
.content .vd-model-head h2,
.content .series-head h2{font-size:clamp(30px,6.8vw,97px) !important;line-height:1.02;}

/* the lines under it - ALL BRAVO SAFES MADE IN AMERICA, the size and weight */
.content .vd-model-head h3,
.content .series-head h3,
.content .vd-model-head h3.big-dim,
.content .vd-model-head h3.carriage-sub{font-size:clamp(19px,3.5vw,51px) !important;line-height:1.18;}

/* a section heading - CUSTOM COLORS & ACCENTS, Vault Door Collection */
.content .caption-section,
.content h2.caption-section{font-size:clamp(26px,4.2vw,61px) !important;line-height:1.06;}
/* an h3 is a step down from an h2, and these sit inside narrow columns */
.content h3.caption-section{font-size:clamp(19px,2.3vw,33px) !important;line-height:1.15;}

.content .std-head{font-size:clamp(24px,3vw,43px) !important;line-height:1.1;}

/* body copy: one size everywhere. The two blocks Kevin asked to run larger -
   the home page band blurbs and the accessories page copy - keep their own
   size, set just below. */
.content .font-body-text{font-size:19px !important;line-height:1.55;}
.content .font-body-text-1plus{font-size:23px !important;line-height:1.6;}
@media(max-width:760px){
  .content .font-body-text{font-size:17px !important;}
  .content .font-body-text-1plus{font-size:19px !important;}
}
.local-page .idx-cat-blurb .font-body-text{font-size:clamp(17px,1.55vw,24px) !important;}
.local-page .opt-desc .font-body-text{font-size:clamp(18px,1.55vw,24px) !important;}

/* ---- Kevin: the lines under a model name must not break -----------------
   The sub-heading sat in a 900px column at 51px, so a line like "Heaviest,
   Most Fireproof, Blast-Proof Vault Door in U.S." had nowhere to go. It has
   the full width now and a size that fits the longest of them on one line;
   anything that still has to wrap breaks evenly rather than leaving one word
   stranded. */
.content .vd-model-head h3,
.content .series-head h3,
.content .vd-model-head h3.big-dim,
.content .vd-model-head h3.carriage-sub{font-size:clamp(18px,2.9vw,42px) !important;line-height:1.16;
  text-wrap:balance;max-width:1360px;margin-left:auto;margin-right:auto;}
.content .vd-model-head h2,
.content .series-head h2,
.content h1,
.content .caption-section{text-wrap:balance;}

/* ---- Kevin: sections running too wide ----------------------------------
   Copy was setting at up to 147 characters a line, which is roughly twice a
   comfortable measure - the eye loses its place coming back to the left. A
   paragraph now holds about 80 characters whatever the screen, and the block
   stays centred in its column. */
.content .font-body-text,
.content .font-body-text-1plus{max-width:80ch;margin-left:auto;margin-right:auto;}
/* inside a narrow two-column band the column already sets the measure */
.content .armory-detail .font-body-text,
.content .opt-copy .font-body-text{max-width:none;}
/* a hero band's copy column can run very wide on a big screen, so it keeps
   the measure too and sits at the top of its column */
.content .vd-hero .font-body-text{max-width:80ch;margin-left:0;}

/* a line that is a call to action reads centred, not ranged left */
.content .sh-centred{text-align:center;max-width:none;}
.content .jw-tray-note,
.content .jw-tray-note .font-body-text,
.content .jw-tray-note .sub-black{text-align:center;max-width:none;}

/* this one heading is a sentence, so it sets at the sub-heading size rather
   than the full model-name size */
.content .vd-model-head.jw-splendid h2{font-size:clamp(22px,2.9vw,42px) !important;line-height:1.12;}

/* ---- Kevin: the menu spreads across the screen ------------------------
   The bar was 55px wider than a 1440 screen, so Contact fell off the end.
   The items tighten just enough to fit and then sit evenly across. */
@media(min-width:901px){
  .topnav ul.top-level{justify-content:space-between;width:100%;}
  .top-level>li>a{font-size:clamp(13px,1.15vw,18px);padding:0 clamp(4px,.75vw,14px);}
}
@media(min-width:1600px){
  .top-level>li>a{font-size:clamp(15px,1.15vw,19px);padding:0 clamp(8px,1vw,18px);}
}

/* ---- Kevin: the size-and-weight line reads a little bigger ------------
   e.g. 80" x 65" x 35" - 2960 lbs. in a price tile. Desktop only, and it
   stays on one line. */
@media(min-width:901px){
  .content .model-panel .price-dim{font-size:23px;line-height:1.2;}
  .content .model-panel .price-dim.big{font-size:27px;}
  .content .price-tile .price-dim{white-space:normal;}
}

/* the band blurbs start from the left on every line, like the rest of the copy */
.local-page .idx-cat-blurb.copy-left,
.local-page .idx-cat-blurb.copy-left .font-body-text{text-align:left;}

/* Kevin: the four video graphics run at one size with the box back on, so the
   row is even and there is far less dead space round each photo */
.local-page .video-grid img{height:250px;object-fit:contain;background:#fff;
  border:1px solid var(--line);border-radius:6px;padding:6px;box-sizing:border-box;}
@media(max-width:900px){ .local-page .video-grid img{height:190px;} }
@media(max-width:560px){ .local-page .video-grid img{height:min(160px,36vw);} }

/* the category band photos step up to sit closer to one another in scale */
.local-page .arm-media.quad.idx-cat-row .arm-frame img{height:440px;}
@media(max-width:900px){ .local-page .arm-media.quad.idx-cat-row .arm-frame img{height:310px;} }
@media(max-width:560px){ .local-page .arm-media.quad.idx-cat-row .arm-frame img{height:min(240px,52vw);} }

/* Kevin: the hero sub-line and the client list carry the top of a page, so
   they read as headings rather than small print. */
.content .sub-black{font-size:clamp(20px,2.3vw,34px);line-height:1.2;}
.content .designer-inline .designer-clients{font-size:clamp(16px,1.45vw,23px);line-height:1.45;}
/* BRAVO - 60"x40"x28" - USA MADE sits a step above the other sub-lines */
.gss-page .series-head h3{font-size:clamp(20px,3.1vw,46px) !important;}
/* the walk-in vault rooms line */
.vd-page .vd-room-lede{font-size:clamp(18px,1.8vw,27px);text-align:center;}

/* Kevin: the blast door photo runs much taller than the copy beside it, so the
   heading and the write-up sit against the middle of the door rather than
   leaving a band of white under them. */
.bd-page .vd-hero{align-items:center;}

/* ---- Fortress: the Iron-American block ---------------------------------
   Kevin: the white 65 runs bigger, and the open-interior shot above it does
   not leave a band of white under it. */
/* Kevin: the dead space under this photo is inside the file - 16% of it is
   blank floor at the bottom. Nothing can be cropped, so the row below is
   pulled up by about what that blank band measures. */
.fortress-page .arm-media.solo-wide.iron-hero{margin-bottom:-118px;}
@media(max-width:640px){ .fortress-page .arm-media.solo-wide.iron-hero{margin-bottom:-10vw;} }
.fortress-page .arm-media.solo-wide.iron-hero .arm-frame img{max-height:820px;}
.fortress-page .arm-media.trio.ia-trio .arm-frame img{height:400px;object-fit:contain;}
@media(max-width:900px){ .fortress-page .arm-media.trio.ia-trio .arm-frame img{height:280px;} }

/* Kevin: the gun-port band reads centred rather than pushed to one side */
.shelter-page .vd-hero.ss-port-band{align-items:center;max-width:1240px;margin-left:auto;margin-right:auto;}
.shelter-page .ss-port-band .font-body-text{margin-left:0;}

/* Kevin: the storm door page read upside down - the regional line under the
   H1 was bigger than the H1's own sub-line and dominated the page. It sits
   between the two now. */
.content h2.caption-section.ssd-region{font-size:clamp(20px,2.5vw,37px) !important;line-height:1.14;}
.content h2.caption-section.ssd-region .caption2-maroon{font-size:1em;}

/* ---- Kevin: the size-and-weight lines read bigger on desktop, and none of
   them may fall onto a second line. Two tiles were just too narrow for the
   larger type, so the tile grows rather than the type shrinking. ------- */
@media(min-width:901px){
  .gss-page .twin-prices .price-tile{max-width:460px;}
  .hs-page .model-panel{max-width:1260px;}
  .vd-page .model-panel{max-width:1100px;}
  .content .price-tile .price-dim{text-wrap:balance;}
}

/* ---- Kevin: the home page bands read even -------------------------------
   Every photo in a band was poured into the same 260px-wide box, so a nearly
   square shot (Iron American, Tactical) came out a third the height of a tall
   one and the row looked ragged. Each cell is now as wide as its own photo
   needs, which puts every photo in the band at ONE height - nothing cropped,
   the rule you set for every other row on the site. */
@media(min-width:561px){
  .local-page .arm-media.quad.idx-cat-row{justify-content:center;align-items:flex-start;max-width:1400px;}
  .local-page .arm-media.quad.idx-cat-row>.arm-cell{flex:var(--ar,1) 1 0;max-width:none;min-width:0;}
  .local-page .arm-media.quad.idx-cat-row .arm-frame{display:block;text-align:center;}
  .local-page .arm-media.quad.idx-cat-row .arm-frame img{width:100%;height:auto;
    max-height:440px;object-fit:contain;margin:0 auto;}
}
@media(min-width:561px) and (max-width:900px){
  .local-page .arm-media.quad.idx-cat-row .arm-frame img{max-height:300px;}
}

/* Kevin: the white 72x60x30 sat a touch smaller than the other seven colours
   because the safe fills less of its frame. Nudged up to match - scaled, not
   cropped, and the file itself is untouched. */
.fortress-page .model-colors .sc-cell.sc-white-bb img{transform:scale(1.07);}

/* Kevin: the tactical interiors box ran nearly the full width, which left a
   band of white either side of the door photo. */
.vd-page .armory-box.tac-int-box{max-width:1180px;margin-left:auto;margin-right:auto;}

/* Kevin: the double-door label should fill its box, not float in the middle. */
.content .price-row-label .dd-vault-label{display:block;line-height:1.14;
  font-size:clamp(20px,3.15vw,48px);}

/* A heading that is there for structure and search engines, not for the eye -
   the accessories page carries the name inside its price box instead. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;}

/* Kevin: the two lines under GUN SAFES ON SALE read at heading weight. */
.gss-page .text-block-cntrd .sub-black{font-size:clamp(24px,3.9vw,56px) !important;line-height:1.1;}

/* Kevin: the John Wick spec line was set at the model-name sub size and ran to
   three lines. It sits under the size line at its own size now, one line each. */
.gss-page .jw-spec{text-align:center;margin:4px 0 0;}
.gss-page .jw-spec .sub-black{font-size:clamp(17px,2.05vw,30px) !important;line-height:1.25;}

/* Kevin: the 2" Jig-Saw Step Door block sat against the left edge with the
   right third of the page empty. The photo and its copy are one group,
   centred on the page. */
.shelter-page .vd-hero.sr-float-band{max-width:1060px;margin-left:auto;margin-right:auto;}

/* ============ Kevin, 24 Sep ============================================= */

/* The header number says "Call Us" on phones and tablets. On a phone the
   GET QUOTE & BROCHURE button sits directly under it, so the old label was
   saying the same thing twice. Desktop keeps GET QUOTE, where the button is
   beside the number rather than below it. */
.hp-lab-mob{display:none;}
@media(max-width:1080px){
  .header-phone .hp-lab-desk{display:none;}
  .header-phone .hp-lab-mob{display:inline;}
}

/* Gun safes on sale: the Tactical American 65 and 50 open shots are nearly
   square, so at the shared height they read smaller than the wider ones. */
@media(min-width:901px){
  .gss-page .sale-photos.two-row.model-tactical-american-65 .sp-open img,
  .gss-page .sale-photos.two-row.model-tactical-american-50 .sp-open img{max-height:620px;}
}

/* Best gun safe: SPORTSMAN OPTIONS is the heading over the three options, so
   it takes the big size and the three under it step down to a section head.
   They were the other way round. */
.bgs-page .opts-head h2.caption-section{font-size:clamp(28px,6.1vw,88px) !important;line-height:1.04;}
.bgs-page .opt-block .vd-model-head h2{font-size:clamp(26px,4.2vw,61px) !important;line-height:1.06;}

/* Fortress: the DoubleWide size line and the price under it come down a step
   and match each other. */
.fortress-page .dw-head h2,
.fortress-page .dw-head h3.head-price{font-size:clamp(26px,4.45vw,64px) !important;line-height:1.1;}

/* Defender: the line under the double-door label reads a size up. */
.content .price-row-label .dd-vault-sub{display:block;font-weight:600;color:#555;margin-top:4px;
  font-size:clamp(16px,1.95vw,29px);line-height:1.2;}

/* Safe room: the two walk-in vault prices run bigger. */
.shelter-page .sr-big-sizes{font-size:clamp(26px,4.05vw,58px) !important;line-height:1.22;}

/* Shelter modular: the caption under the vault room photo runs bigger. */
.shelter-page .mod-room-cap{font-size:clamp(22px,3.15vw,46px) !important;line-height:1.2;}

/* Kevin: on the quote and contact pages the photo sat below the form, so you
   scrolled past the whole form to reach it. It sits under the intro now, a
   good bit narrower than the 860px form so the form is still clearly the
   thing on the page. */
.local-page .arm-media.solo.form-lead-photo{max-width:520px;margin:14px auto 6px;}
.local-page .arm-media.solo.form-lead-photo .arm-frame{height:auto;padding:0;background:transparent;border:0;}
.local-page .arm-media.solo.form-lead-photo .arm-frame img{width:100%;height:auto;max-height:none;object-fit:contain;}
.local-page .arm-media.solo.form-lead-photo .arm-title{font-size:clamp(15px,1.3vw,19px);line-height:1.3;}
@media(max-width:640px){ .local-page .arm-media.solo.form-lead-photo{max-width:min(360px,80vw);} }