
@font-face{font-family:'Archivo Black';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/HTxqL289NzCGg4MzN6KJ7eW6CYyF_g.woff2) format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format('woff2')}
@font-face{font-family:'Yeseva One';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/OpNJno4ck8vc-xYpwWWxli1VWw.woff2) format('woff2')}
:root{--maroon:#800000;--ink:#161616;--band-dark:#1e1e1e;--band-gray:#333333;--paper:#fff;--text:#5E5E5E;--display:'Archivo Black',arial,sans-serif;--serif:'Yeseva One',Georgia,serif;--body:'Montserrat',arial,sans-serif}
*{box-sizing:border-box}
body{margin:0;font:16px/1.7 var(--body);color:var(--text);background:var(--paper)}
img{max-width:100%;height:auto}
a{color:var(--maroon)}
h1,h2,h3{line-height:1.25}

/* header: one dark row on every page (source pattern) — left nav,
   centered serif logotype, right nav with the MORE dropdown (CSS-only) */
header.site{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:64px;padding:0 48px;background:var(--band-gray);position:sticky;top:0;z-index:90}
header.site nav.nl{display:flex;gap:42px;justify-content:flex-start}
header.site nav.nr{display:flex;gap:42px;justify-content:flex-end;align-items:center}
header.site nav a,header.site .more-l{font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:#c5c5c5;text-decoration:none;white-space:nowrap}
header.site nav a:hover,header.site .more-l:hover{color:#fff}
header.site .cur::before{content:'\2013\00a0'}
header.site a.brand{font-family:var(--serif);font-size:25px;letter-spacing:.05em;text-transform:uppercase;color:#d6d6d6;text-decoration:none;text-align:center;padding:0 28px;white-space:nowrap}
.more{position:relative;display:inline-block}
button.more-l{background:none;border:0;padding:0;cursor:pointer;font-family:inherit;line-height:inherit}
.more-l::after{content:'';display:inline-block;width:6px;height:6px;border-right:1px solid #c5c5c5;border-bottom:1px solid #c5c5c5;transform:rotate(45deg) translateY(-2px);margin-left:8px}
.more .menu{position:absolute;right:0;top:calc(100% + 14px);min-width:178px;background:#fff;box-shadow:0 8px 26px rgba(0,0,0,.3);padding:8px 0;opacity:0;visibility:hidden;transition:opacity .15s;z-index:99}
.more .menu a{display:block;padding:10px 22px;color:#3a3a3a;font-size:12px;letter-spacing:.14em}
.more .menu a:hover{background:#f3f3f3;color:var(--maroon)}
.more:hover .menu,.more:focus-within .menu{opacity:1;visibility:visible}
.mtoggle{display:none}
@media(max-width:860px){
header.site{grid-template-columns:48px 1fr 48px;height:auto;padding:20px 14px}
header.site nav.nl,header.site nav.nr{display:none}
header.site a.brand{white-space:normal;font-size:30px;line-height:1.2;padding:0 4px}
.mtoggle{display:block;position:static}
.mtoggle summary{list-style:none;cursor:pointer;display:flex;flex-direction:column;gap:6px;width:26px;padding:6px 0}
.mtoggle summary::-webkit-details-marker{display:none}
.mtoggle summary i{display:block;height:2px;background:#c5c5c5}
.mtoggle nav{position:absolute;left:0;right:0;top:100%;background:#262626;display:flex;flex-direction:column;padding:8px 0;z-index:99}
.mtoggle nav a{padding:13px 26px;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:#d6d6d6;text-decoration:none;border-bottom:1px solid #333}
}

/* inner (light) pages */
main.page{max-width:1040px;margin:0 auto;padding:40px 24px}
main.page h1{font-family:var(--display);font-size:2.2rem;letter-spacing:.06em;text-transform:uppercase;color:var(--maroon);text-align:center;margin:0 0 1.6rem}
main.page h2,main.page h3{font-family:var(--serif);color:var(--maroon);text-align:center;font-weight:400}
main.page h2{font-size:1.6rem;margin:2.2rem 0 .8rem}
main.page h3{font-size:1.25rem}
main.page p,main.page li{font-size:1.02rem}
.kicker{text-transform:uppercase;letter-spacing:.16em;font-size:.8rem;color:#767676;text-align:center;margin:0 0 .4rem}
.hero-img{width:100%;max-height:440px;object-fit:cover;object-position:50% 18%;display:block;margin:0 0 1.6rem}

/* record detail: image beside details, features as serif-headed sections */
.detail{display:grid;grid-template-columns:minmax(280px,56%) 1fr;gap:48px;align-items:start;margin-bottom:1.4rem}
.detail .lead-img img{width:100%;height:auto;display:block}
.detail .lead-img img[src*='.png']{aspect-ratio:4/5;object-fit:contain}
.lead-solo{display:block;max-width:480px;margin:0 auto 1.6rem}
.story-flow{max-width:820px;margin:0 auto}
.story-flow h2,.story-flow h3{margin-top:2rem}
@media(max-width:760px){.detail{grid-template-columns:1fr}}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin:1.4rem 0}
.gallery img{width:100%;height:140px;object-fit:cover;display:block}
@media(max-width:760px){.gallery{grid-template-columns:repeat(4,1fr);gap:6px}.gallery img{height:88px}}
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:10px 40px;margin:1.6rem 0;text-align:center}
.features ul{text-align:left;margin:.3rem 0;padding-left:1.3em}
.features li{font-size:.92rem;margin:.15rem 0}
@media(max-width:760px){.features{grid-template-columns:1fr}}
.features h3{font-family:var(--serif);color:var(--maroon);font-weight:400;font-size:1.25rem;margin:.6rem 0 .35rem}
.features p{font-size:.95rem;text-align:left;margin:.3rem 0}
.inquire{display:inline-block;background:var(--maroon);color:#fff;padding:13px 26px;text-decoration:none;font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:.8rem;margin:1rem 0}
.price{font-family:var(--serif);font-size:1.4rem;color:var(--maroon)}

/* record story composition (P1b-3 flag-resolution round): the source's
   repeating shapes — model card grids, 3-col text feature grids, image-beside-
   text rows, dark/red closing bands — measured against the original captures */
.mcards{display:grid;gap:44px 40px;margin:2.4rem 0;text-align:center}
.mcards.c2{grid-template-columns:repeat(2,1fr)}
.mcards.c3{grid-template-columns:repeat(3,1fr)}
@media(max-width:760px){.mcards.c2,.mcards.c3{grid-template-columns:1fr}}
.mcard h2,.mcard h3{font-size:1.45rem;margin:.2rem 0 .9rem}
.mcard img{width:100%;max-width:420px;height:auto;display:block;margin:0 auto 18px}
.mcards.c2 .mcard img{max-width:none}
.mcards.sm .mcard img{max-width:200px}
.mcards.sm{gap:30px 40px}
.mcards.sm .mcard h2,.mcards.sm .mcard h3{font-size:1.2rem}
@media(min-width:761px){.mcards.big{gap:72px 56px}.mcards.big .mcard .lm{margin-top:22px}}
.mcards.big .mcard h2,.mcards.big .mcard h3{font-size:1.65rem}
.mcards.big .mcard img{aspect-ratio:3/4;object-fit:contain}
@media(max-width:760px){.mcards.sm .mcard img{max-width:none}.mcards.msm .mcard img{max-width:260px}.mcards.big .mcard img{aspect-ratio:4/5}}
.mcard p{font-size:.95rem;margin:.35rem 0}
.mcard h4{font-family:var(--body);font-weight:700;color:#3a3a3a;font-size:.98rem;margin:1rem 0 .2rem}
.mcard ul{text-align:left;display:inline-block;margin:.4rem 0;padding-left:1.2em}
.mcard .lm{display:inline-block;border:1px solid var(--maroon);color:var(--maroon);padding:11px 22px;font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;margin-top:14px}
.mcard .lm::before{content:'\2014\00a0\00a0'}
.mcard .lm::after{content:'\00a0\00a0\2014'}
.mcard details{margin:.4rem 0}
.mcard summary{color:var(--maroon);cursor:pointer;list-style:none;font-size:.9rem;font-weight:700}
.mcard summary::-webkit-details-marker{display:none}
.irow{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;margin:2.6rem 0;text-align:left}
.irow img{width:100%;height:auto;display:block;max-height:540px;object-fit:contain}
@media(max-width:760px){.irow img{max-height:none}}
.irow h2,.irow h3{text-align:left;margin-top:0}
.irow p{margin:.5rem 0}
.irow ul{padding-left:1.2em}
@media(max-width:760px){.irow{grid-template-columns:1fr;gap:18px}.features li,.features p,.mcard p{font-size:1rem}}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin:2.2rem 0}
.trio.g2{grid-template-columns:1fr 1fr;gap:34px}
.trio img{width:100%;height:auto;display:block}
.features.g2{grid-template-columns:repeat(2,1fr)}
.features.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:760px){.trio,.trio.g2{grid-template-columns:1fr}.trio.mrow{grid-template-columns:repeat(3,1fr);gap:10px}.features.g2,.features.g4{grid-template-columns:1fr}}
.rband{padding:84px 24px}
.rband h2{font-family:var(--body);font-weight:400;text-transform:uppercase;letter-spacing:.3em;color:#ececec;font-size:1.35rem;margin:0 0 2.4rem}
.rband .rimgs{display:flex;flex-wrap:wrap;justify-content:center;gap:60px;margin:0 auto}
.rband .rimgs>div{width:min(320px,100%)}
.rband img.wide-photo{max-width:540px}
.rband .rimgs img{width:min(480px,90%);height:auto;display:block}
.band > img.wide-photo{max-width:780px;margin:30px auto 0;display:block}
.rband p{color:#cfc7c7;font-size:.9rem;margin:1.6rem auto 0;max-width:640px}
.hband{width:100%;max-height:240px;object-fit:cover;display:block;margin-bottom:1.2rem}
/* visn circles: the source's round feature photos */
.fcirc img{width:230px;height:230px;object-fit:cover;border-radius:50%;display:block;margin:0 auto 18px}
@media(max-width:760px){.fcirc img{width:270px;height:270px}}
.visnband{padding:40px 24px}
.visnband img{width:min(420px,90%);display:block;margin:0 auto 8px}
/* tight/airy page tones: per-route vertical rhythm matched to the source */
@media(min-width:761px){
main.tight h2{font-size:1.3rem;margin:1.1rem 0 .4rem}
main.tight .features{margin:.9rem 0;gap:6px 32px}
main.tight .features h3{font-size:1.1rem;margin:.4rem 0 .25rem}
main.tight .irow{margin:1.4rem 0}
main.tight .trio{margin:1.4rem 0}
main.tight .lead-solo{max-width:380px}
/* dense: text-heavy flow pages where the source packs paragraphs close */
main.dense p{margin:.55rem 0}
main.dense ul{margin:.5rem 0}
/* vdense: the Vaultek marketing pages — the source sets its spec/marketing
   copy a step smaller and tighter than our base body scale */
main.vdense p,main.vdense li{font-size:.95rem;line-height:1.55}
main.vdense p{margin:.5rem 0}
main.vdense h2{margin:1.4rem 0 .5rem}
main.vdense .features p{font-size:.88rem}
main.dense .story-flow h2,main.dense .story-flow h3{margin-top:1.2rem}
/* dsm: the source runs this page's media smaller on desktop */
main.dsm .fcirc img{width:160px;height:160px}
main.dsm .visnband{padding:24px 24px}
main.dsm .visnband img{width:min(320px,90%)}
main.dsm .lead-solo{max-width:300px}
main.dsm .irow{margin:1rem 0}
}
main.airy .features{gap:16px 44px;margin:2.2rem 0}
main.airy .features li{margin:.3rem 0}
main.airy .irow{margin:3.2rem 0}
/* events: the source's compact list rows — date | event | venue */
.evrow{display:grid;grid-template-columns:200px 1fr 300px;gap:30px;border-top:1px solid #e4e4e4;padding:28px 0;text-align:left}
.evrow:last-of-type{border-bottom:1px solid #e4e4e4}
.evrow h2{font-family:var(--body);font-weight:700;color:#3a3a3a;font-size:1.05rem;text-align:left;margin:0}
.evrow h3{font-family:var(--body);font-weight:700;color:var(--ink);font-size:1rem;text-align:left;margin:0 0 .4rem}
.evrow p{font-size:.92rem;margin:.2rem 0}
.evrow .evd{color:var(--maroon);font-weight:700;font-size:.85rem;letter-spacing:.06em;text-transform:uppercase}
@media(max-width:760px){.evrow{grid-template-columns:1fr;gap:6px;padding:18px 0}.evrow .evdesc{display:none}.evrow h2{font-size:1.5rem}}
.ev-empty{color:var(--text);font-style:italic;text-align:center;padding:2.2rem 0;max-width:540px;margin:0 auto}
/* contact page: full-bleed hero, dark info band, map, connect band */
.cpage-hero{width:100%;height:auto;display:block}
.map-full img{width:100%;height:640px;object-fit:cover;display:block}
@media(max-width:860px){.map-full img{height:430px}}
.contact-band .social-row{justify-content:flex-start}
.contact-band .social-row a{border-color:#fff;color:#fff}
.contact-info h1{font-family:var(--body);font-weight:400;text-transform:uppercase;letter-spacing:.3em;color:#ececec;text-align:left;font-size:26px;margin:0 0 1.6rem}
/* about reviews: quotes in source's 3-up columns */
.quotes-wrap{max-width:920px;margin:0 auto}
.qgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;text-align:center;margin-top:1.6rem}
@media(max-width:760px){.qgrid{grid-template-columns:1fr}}
/* /safes/ page tiles: source runs them three across */
.tiles.ptiles{gap:28px}
.ptiles .tile{width:295px;height:412px}
@media(max-width:760px){.ptiles .tile{width:100%;height:140px}}
.cta-band img.wide-photo{max-width:560px;margin:30px auto 0;display:block}
.spec-cols ul{columns:2;column-gap:56px;text-align:left;max-width:880px;margin:0 auto;padding-left:1.3em}
.spec-cols li{font-size:.95rem;margin:.2rem 0}

/* FD-2: mobile size/variant table scroll — width:100% prevents the table from exceeding its
   container even with white-space:nowrap cells; max-content lets it be as wide as it needs
   and the overflow-x:auto wrapper does the rest */
@media(max-width:760px){
table.sizes thead{display:none}
table.sizes tbody tr{display:block;border:1px solid #ddd;margin-bottom:.75rem}
table.sizes td{display:block;border:none;border-bottom:1px solid #eee;padding:6px 10px;white-space:normal}
table.sizes td::before{content:attr(data-label);display:block;font-weight:700;font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;color:var(--maroon);margin-bottom:2px}
}

/* FD-3: contact form — dark-band context (band-gray #333) */
.cf{margin-top:1.4rem;max-width:460px}
.cf p{margin:.65rem 0}
.cf label{display:block;font-size:.85rem;color:#bdbdbd;margin-bottom:3px}
.cf input,.cf textarea{width:100%;background:#1a1a1a;border:1px solid #888;color:#e0e0e0;padding:9px 12px;font-family:var(--body);font-size:.95rem;display:block;border-radius:2px;box-sizing:border-box}
.cf input:focus,.cf textarea:focus{outline:3px solid #c0584f;outline-offset:2px;border-color:#c0584f}
.cf textarea{resize:vertical;min-height:96px}
.cf-status{font-size:.85rem;margin-top:.5rem;min-height:1.2em}
.cf-status.cf-ok{color:#7ecb8f}
.cf-status.cf-err{color:#e07070}

/* catalog cards */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:26px;padding:0;list-style:none;margin-bottom:2.5rem}
.card a{text-decoration:none;display:block;color:inherit}
/* FD-2: portrait safes were corner-cropped by object-fit:cover + fixed height.
   contain on a 3/4 frame shows the whole safe, consistent size across the row.
   (blur is asset-side — MPS re-pulls full-res per model.) */
.card img{width:100%;aspect-ratio:3/4;object-fit:contain;display:block}
/* card--tile: square cover for category parents with landscape/mixed-content child images
   (precious-metals → coins, self-defense → byrna, home-office). Targeted via TILE_PARENTS. */
.card--tile img{aspect-ratio:1/1;object-fit:cover;object-position:center;display:block}
.card h2,.card h3{font-family:var(--display);font-size:.92rem;letter-spacing:.08em;text-transform:uppercase;color:var(--maroon);text-align:left;margin:.7rem 0 .3rem}
/* FD-3: model second line was margin:0, no leading — wrapped lines crowded. */
.card p{font-size:.9rem;margin:.15rem 0 0;color:var(--text);line-height:1.5}
/* FD-1: per-model Available Sizes table (renders only when a record carries sizes:) */
.sizes-wrap{overflow-x:auto;margin:1rem 0 1.6rem}
table.sizes{border-collapse:collapse;width:100%;font-size:.9rem}
table.sizes caption{text-align:left;font-family:var(--display);color:var(--maroon);letter-spacing:.06em;text-transform:uppercase;font-size:.9rem;margin-bottom:.5rem}
table.sizes th,table.sizes td{border:1px solid #ddd;padding:8px 12px;text-align:left;white-space:nowrap}
table.sizes thead th{background:var(--maroon);color:#fff;font-family:var(--body);font-weight:700}
table.sizes tbody tr:nth-child(even){background:#f6f4f2}

/* home: the dark cinematic composition */
body.home{background:var(--band-gray);color:#d9d9d9}
.hero-banner{width:100%;display:block;height:596px;object-fit:cover;object-position:50% 52%}
@media(max-width:760px){.hero-banner{height:auto;object-fit:contain;object-position:center}}
.band{padding:56px 24px;text-align:center}
.band .inner{max-width:1100px;margin:0 auto}
.band h2{font-family:var(--body);font-weight:400;text-transform:uppercase;letter-spacing:.3em;color:#ececec;font-size:1.7rem;margin:0 0 .8rem}
.band h2.disp{font-family:var(--display);letter-spacing:.04em;color:#fff;font-size:2rem}
.band p{color:#e6dede;max-width:840px;margin:.4rem auto}
.band a{color:#fff}
.band-red{background:var(--maroon)}
.band-dark{background:var(--band-dark)}
.band-gray{background:var(--band-gray)}
.moves-strip{background:var(--maroon);padding:16px 24px;text-align:center;border-top:1px solid rgba(255,255,255,.18);border-bottom:1px solid rgba(255,255,255,.18)}
.moves-strip a{display:block;color:#fff;text-decoration:none}
.moves-strip .ms-title{font-family:var(--display);font-size:1.15rem;letter-spacing:.08em;text-transform:uppercase}
.moves-strip .ms-sub{display:block;font-family:var(--body);font-size:.88rem;letter-spacing:.04em;color:#f3d5d5;margin-top:6px;text-transform:none}
@media(max-width:760px){.moves-strip{padding:14px 16px}.moves-strip .ms-title{font-size:1rem}}
/* lead band under the hero: design-layer display line, truth H1 as the sub-line */
.lead{padding:50px 24px 46px}
.lead h1{font-family:var(--body);font-weight:400;font-size:19px;line-height:1.5;color:#fff;letter-spacing:.01em;max-width:860px;margin:0 auto .5rem;text-transform:none}
.lead p{font-size:15px;color:#ecd3d3;max-width:760px}
.lead p.lead-big{font-family:var(--display);font-size:42px;line-height:1.2;text-transform:uppercase;letter-spacing:.015em;color:#fff;max-width:780px;margin:0 auto 22px}
/* bordered chip button (CONTACT US TODAY / PRODUCTS — source pattern) */
.chip{display:inline-block;border:1px solid rgba(255,255,255,.85);color:#fff;padding:13px 26px;font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;text-decoration:none}
.chip::before{content:'\2014\00a0\00a0'}
.chip::after{content:'\00a0\00a0\2014'}
.chip:hover{background:rgba(255,255,255,.12)}
.band-photo{background-size:cover;background-position:center;position:relative}
.band-photo .inner{position:relative}
.band-photo::before{content:'';position:absolute;inset:0;background:rgba(10,8,8,.55)}
.trusted{min-height:544px;display:flex;align-items:center;justify-content:center}
.trusted h2.disp{font-size:40px;line-height:1.25;max-width:800px;margin:0 auto 34px}
/* jagged mountain divider (source: red band -> dark band) */
.mdiv{display:block;height:170px;background:var(--maroon)}
.mdiv svg{display:block;width:100%;height:100%}
.mdiv-sm{height:110px}
.tiles{display:flex;flex-wrap:wrap;justify-content:center;gap:70px;margin-top:30px}
.tiles-band{padding:86px 24px 64px}
.tiles-band .tiles{margin-top:0}
.tile{width:320px;height:448px;text-decoration:none;background-size:cover;background-position:center;position:relative;display:flex;align-items:center;justify-content:center}
.tile span{display:block;width:100%;color:#fff;font-family:var(--display);font-size:32px;line-height:1.2;letter-spacing:.02em;text-transform:uppercase;padding:0 10px;text-shadow:0 2px 12px rgba(0,0,0,.95),0 0 4px rgba(0,0,0,1),0 0 18px rgba(0,0,0,.75)}
.tile em{display:block;font-style:normal;font-family:var(--body);font-size:12px;line-height:1.4;letter-spacing:.08em;color:#eee;margin-top:8px;text-transform:none;text-shadow:0 1px 6px rgba(0,0,0,.9)}
.cols3{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:34px;margin-top:44px;text-align:center}
.cols3 img{width:230px;height:230px;object-fit:cover;border-radius:50%;display:block;margin:0 auto 24px}
.cols3 h3{font-family:var(--body);color:#fff;font-weight:700;font-size:15px;margin:.2rem 0 .6rem}
.cols3 p{font-size:14px;color:#cfc7c7;max-width:340px;margin-left:auto;margin-right:auto}
/* champion video slot: poster band until the Phase 2 re-host (named delta) */
.video-band{display:block;background:var(--band-gray);padding:6px 24px 100px;text-align:center}
.video-band iframe{width:min(1100px,100%);aspect-ratio:16/9;border:0;display:block;margin:0 auto}
@media(max-width:760px){.video-band{padding-bottom:48px}}
/* contact: info column left, map right (source pattern); map is a
   capture-derived static linked to Google Maps (named delta) */
.contact-band{background:var(--band-gray);padding:56px 0 0;text-align:left}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;align-items:start}
.contact-info{padding:0 48px 56px;max-width:560px}
.contact-info h2{font-family:var(--body);font-weight:400;text-transform:uppercase;letter-spacing:.3em;color:#ececec;text-align:left;font-size:22px;margin:0 0 1.6rem}
.contact-info h3{font-family:var(--body);font-weight:700;color:#fff;font-size:15px;text-align:left;margin:1.5rem 0 .4rem}
.contact-info p{font-size:16px;color:#cfcfcf;text-align:left;margin:.3rem 0;max-width:440px}
.contact-info a{color:#e08070}
.map-wrap{display:block;line-height:0}
.map-wrap img{width:100%;height:820px;object-fit:cover;display:block}
@media(max-width:860px){.contact-grid{grid-template-columns:1fr}.map-wrap img{height:430px}}
/* step inside: small letterspaced heading, wide storefront photo, caption */
.step-band{background:var(--band-gray);text-align:center;padding:44px 0 0}
.step-band h2{font-size:14px;letter-spacing:.24em;margin-bottom:34px}
.step-band .wide-photo{width:87%;margin:0 auto}
.step-band .caption{font-size:13px;color:#bdbdbd;padding:16px 24px 8px;margin:0 auto}
.split{display:grid;grid-template-columns:minmax(260px,1fr) 1fr;gap:40px;align-items:center;text-align:left;margin-top:10px}
@media(max-width:760px){.split{grid-template-columns:1fr}}
.split img{width:100%;display:block}
.split h2{text-align:left}
.split p{margin:.4rem 0;max-width:none}
.split .split-c{text-align:center}
.split .split-c h2{text-align:center}
.premier{padding:84px 24px}
.premier h2.disp{font-size:30px;max-width:430px;margin-left:auto;margin-right:auto}
.wide-photo{width:100%;display:block}
.ptiles{margin:1.6rem 0}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin:2.4rem 0}
@media(max-width:700px){.duo{grid-template-columns:1fr}}
.duo img{width:100%;height:250px;object-fit:cover;display:block;margin-bottom:14px}
.duo img[src*="IMG_5395"]{object-position:50% 15%}
.duo h2{margin-top:0}
.rating{font-family:var(--serif);font-size:2.4rem;color:#fff;margin:.4rem 0}
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:26px;margin-top:26px;text-align:left}
.quotes p{font-size:.92rem}
.social-row{display:flex;justify-content:center;gap:16px;margin:1.4rem 0}
.social-row a{display:inline-block;padding:10px 20px;border:1px solid var(--maroon);text-decoration:none;font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.brands{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:38px;margin-top:26px}
.brands img{height:54px;width:auto;background:#fff;padding:6px 10px}
.cta-band{padding-bottom:0}
.cta-band img{margin-top:34px}

/* mobile: the source runs LARGER body type on phones, full-width category
   strips (~200px), big installation circles (~300px) — measured against the
   original mobile capture (P1b-3 mobile pass) */
@media(max-width:760px){
body{font-size:17px}
.lead{padding:60px 24px 56px}
.lead p.lead-big{font-size:32px}
.lead h1{font-size:16px}
.band h2{font-size:1.2rem;letter-spacing:.2em}
.band h2.disp{font-size:1.5rem}
.trusted h2.disp{font-size:26px}
.trusted{min-height:480px}
.premier h2.disp{font-size:24px}
.tiles{gap:24px}
.tiles-band{padding:40px 16px 36px}
.tile{width:100%;height:200px}
.tile span{font-size:24px}
.tile em{font-size:11px;margin-top:4px}
.cols3 img{width:300px;height:300px}
.contact-info h2{font-size:18px}
.step-band{padding-top:64px}
.step-band .wide-photo{width:100%}
.band{padding:48px 20px}
.rband{padding:64px 20px}
.duo img{height:180px}
.duo{gap:24px}
.rating{font-size:1.8rem}
.brands{gap:18px}
.brands img{height:40px}
.qgrid{gap:20px}
.rband .rimgs>div{width:min(220px,100%)}
main.mtight .mcards .mcard img{max-width:205px}
main.mtight .rimgs>div{width:min(180px,100%)}
main.mtight .gallery img{height:64px}
main.mtight .detail .lead-img img[src*='.png']{aspect-ratio:auto}
main.mloose .features li{font-size:1.05rem;margin:.3rem 0}
main.mloose p,main.mloose .features p{font-size:1.05rem}
main.mloose .features h3{font-size:1.4rem}
main.mloose .irow{margin:2.4rem 0}
main.mloose h3{font-size:1.35rem}
/* mfull: the source bleeds this page's product imagery edge-to-edge on phones
   (P1b-3 settled-instrument round: mobile SHORT flags were source imagery scale) */
main.mfull .trio,main.mfull .lead-solo{margin-left:-24px;margin-right:-24px;max-width:none}
main.mfull .irow img{width:calc(100% + 48px);max-width:none;margin-left:-24px;margin-right:-24px}
/* mwide: card imagery between the msm cap and full width (source scale) */
main.mwide .mcards .mcard img{max-width:310px}
/* mxtight: extra-tight mobile rhythm (vault-doors source packs its specs) */
main.mxtight .mcards{gap:24px}
main.mxtight .rband{padding:44px 20px}
main.mxtight .rband h2{margin-bottom:1.2rem}
main.mxtight>h2{margin:1.6rem 0 .6rem}
main.mxtight .detail{gap:20px}
main.mxtight .spec-cols li{margin:0}
main.mxtight p{margin:.5rem 0}
/* mroomy: looser mobile section rhythm (source spreads its short sections) */
main.mroomy h2,main.mroomy h3{margin-top:2.4rem}
/* mhead: the source's oversized mobile headlines */
main.mhead h2{font-size:2rem}
main.mhead h3{font-size:1.5rem}
}

/* footer: black, centered (source pattern) */
footer{background:var(--band-gray);color:#bbb;margin-top:0;padding:64px 24px;text-align:center;font-size:.9rem}
footer .brand{font-family:var(--display);letter-spacing:.16em;text-transform:uppercase;color:#fff;font-size:.95rem;display:block;margin-bottom:12px}
footer a{color:#fff}
footer p{max-width:720px;margin:.35rem auto}
body:not(.home) footer{margin-top:56px}

/* two-tier catalog: breadcrumbs, why layer, CTA block, PM cross-sell (FD 2026-07-01, per MPS spec) */
.breadcrumb{font-size:.82rem;color:#5a5a5a;margin-bottom:1rem}
.breadcrumb a{color:#5a5a5a}
.breadcrumb a:hover{color:var(--maroon)}
.why-block{margin:2.4rem 0}
.cat-hero{margin:0 auto 1.4rem;max-width:640px}
.cat-hero img{width:100%;height:auto;display:block}
.cta-block{text-align:center;margin:2.4rem 0;padding:2rem;background:#f9f6f3}
.cta-btn{display:inline-block;background:var(--maroon);color:#fff;padding:.75rem 2rem;font-family:var(--display);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;font-size:1rem}
.cta-btn:hover{background:#600}
.cta-meta{margin:.6rem 0 0;font-size:.88rem;color:#666}
.pm-crosssell{border-left:3px solid var(--maroon);padding:1rem 1.4rem;margin:2rem 0;background:#faf8f5}
.pm-crosssell h3{font-family:var(--serif);color:var(--maroon);margin:0 0 .5rem;font-size:1.1rem;text-align:left}
.pm-crosssell p{margin:0 0 .5rem;font-size:.95rem}

/* catalog root (Type A): image-forward category gallery — image is the hero of
   each tile, name + blurb overlaid (MPS tile-overlay language: display font,
   white text, deep shadow over a dark scrim). Structure adapted from the PAP
   image-forward catalog tiles; colors are MPS tokens. */
.catgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;margin:1.8rem 0}
.cat-tile{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;text-decoration:none;background:var(--band-dark)}
.cat-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.cat-tile:hover img{transform:scale(1.05)}
.cat-tile__cap{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:20px;background:linear-gradient(to top,rgba(0,0,0,.82),rgba(0,0,0,.32) 46%,rgba(0,0,0,0) 76%)}
.cat-tile__name{font-family:var(--display);color:#fff;font-size:1.3rem;letter-spacing:.04em;text-transform:uppercase;text-shadow:0 2px 12px rgba(0,0,0,.92),0 0 4px rgba(0,0,0,.9)}
.cat-tile__blurb{font-family:var(--body);color:#ececec;font-size:.85rem;line-height:1.45;margin-top:.45rem;text-shadow:0 1px 6px rgba(0,0,0,.9)}
@media(max-width:760px){.catgrid{grid-template-columns:1fr 1fr;gap:12px}.cat-tile{aspect-ratio:3/4}.cat-tile__name{font-size:1.05rem}.cat-tile__blurb{display:none}}
.skip-link{position:absolute;left:-9999px;top:1rem;padding:10px 18px;background:var(--maroon);color:#fff;font-weight:700;font-size:.9rem;text-decoration:none;z-index:9999}
.skip-link:focus{left:1rem}
:focus-visible{outline:3px solid var(--maroon);outline-offset:3px}
.band :focus-visible,.band-dark :focus-visible,.band-red :focus-visible{outline-color:#fff}
main.page .rband-full{margin-left:calc(-50vw + 50%);margin-right:calc(-50vw + 50%);width:100vw;box-sizing:border-box}
@media(prefers-reduced-motion:reduce){.cat-tile img{transition:none}.cat-tile:hover img{transform:none}}
