.catalog-header { position: absolute; background:rgba(4,31,40,.16); }
.site-nav .current { color:var(--aqua); opacity:1; }
.catalog-hero { position:relative; min-height:600px; display:flex; align-items:end; overflow:hidden; padding:170px 7vw 92px; color:white; background:linear-gradient(135deg, #082731, #0d5864); }
.catalog-hero::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(3,25,32,.94), rgba(3,25,32,.65) 47%, rgba(3,25,32,.12) 80%), linear-gradient(0deg, rgba(3,25,32,.24), transparent 45%); }
.catalog-hero > div:last-child { position:relative; z-index:2; max-width:780px; }
.catalog-hero p:last-child { max-width:620px; margin:22px 0 0; color:rgba(255,255,255,.75); font-size:18px; }
.catalog-hero .eyebrow { color:#fff; }
.catalog-hero-photo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.catalog-intro { display:grid; grid-template-columns:1fr; gap:18px; padding-top:72px; padding-bottom:72px; border-bottom:1px solid var(--line); }
.catalog-intro h2 { white-space:nowrap; font-size:clamp(38px, 4.15vw, 68px); }
.catalog-intro div:last-child { max-width:860px; color:var(--muted); font-size:17px; }
.sample-note { padding:15px 17px; color:#516564; background:#e5e3d9; border-left:3px solid var(--sea); font-size:14px; }
.catalog { padding-top:80px; }
.catalog-toolbar { display:flex; align-items:end; justify-content:space-between; gap:30px; margin-bottom:35px; }
.catalog-toolbar h2 { font-size:clamp(35px, 4vw, 54px); }
.catalog-filters { display:flex; gap:7px; flex-wrap:wrap; justify-content:flex-end; }
.catalog-filter { padding:11px 14px; border:1px solid var(--line); color:var(--muted); background:transparent; cursor:pointer; font:700 11px var(--display); letter-spacing:1px; text-transform:uppercase; }
.catalog-filter.active { color:white; background:var(--deep); border-color:var(--deep); }
.color-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; }
.color-card { min-width:0; padding:13px 13px 17px; background:#ebe9e0; transition:transform .2s ease, opacity .2s ease; }
.color-card:hover { transform:translateY(-5px); }
.color-card.hidden { display:none; }
.color-card p { margin:14px 0 5px; color:var(--sea); font:700 10px/1 var(--display); letter-spacing:1.4px; text-transform:uppercase; }
.color-card h3 { font-size:18px; letter-spacing:-.025em; }
.mat-sample { position:relative; height:170px; overflow:hidden; border-radius:3px; background:#777; box-shadow:inset 0 0 0 1px rgba(0,0,0,.15); }
.real-sample { display:block; width:100%; height:170px; border-radius:3px; object-fit:cover; background:#d8d5cb; cursor:zoom-in; }
.two-tone { background:var(--bottom); }
.two-tone::before { content:""; position:absolute; inset:15px; border-radius:2px; background:var(--top); box-shadow:inset 0 0 0 5px rgba(0,0,0,.15); }
.two-tone::after { content:""; position:absolute; inset:27px; background:repeating-linear-gradient(90deg, transparent 0 18px, rgba(0,0,0,.24) 19px 22px); }
.diamond { background-color:var(--top); background-image:linear-gradient(45deg, rgba(255,255,255,.14) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.14) 75%), linear-gradient(45deg, rgba(0,0,0,.15) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.15) 75%); background-position:0 0, 12px 12px; background-size:24px 24px; }
.camo { background-color:var(--top); background-image:radial-gradient(ellipse at 15% 20%, var(--c2) 0 12%, transparent 13%), radial-gradient(ellipse at 70% 35%, var(--c3) 0 20%, transparent 21%), radial-gradient(ellipse at 28% 82%, var(--c3) 0 18%, transparent 19%), radial-gradient(ellipse at 84% 78%, var(--c2) 0 14%, transparent 15%); }
.marble { background-color:var(--top); background-image:linear-gradient(135deg, transparent 0 27%, rgba(255,255,255,.16) 28% 33%, transparent 34% 62%, rgba(255,255,255,.1) 63% 68%, transparent 69%), linear-gradient(45deg, transparent 0 46%, rgba(0,0,0,.2) 47% 52%, transparent 53%); background-size:80px 70px, 90px 60px; }
.solid { background:var(--top); }
.taupe-cream { --top:#a78f72; --bottom:#eadbc4; }.taupe-black { --top:#aa9274; --bottom:#1f2424; }
.camel-gray { --top:#bb9a6d; --bottom:#7b8583; }.brown-cream { --top:#765437; --bottom:#ead8b8; }
.brown-black { --top:#765437; --bottom:#202323; }.camel-brown { --top:#bd9968; --bottom:#725137; }
.gray-blue { --top:#858d8b; --bottom:#94c5d1; }.gray-charcoal { --top:#949a98; --bottom:#4e5758; }
.gray-navy { --top:#919996; --bottom:#18394b; }.gray-black { --top:#8b9391; --bottom:#202424; }
.charcoal-black { --top:#525c5d; --bottom:#202424; }.black-blue { --top:#232828; --bottom:#193d5a; }
.md-black { --top:#262c2d; }.md-gray { --top:#87918e; }.md-dark-gray { --top:#535d5e; }.md-brown { --top:#5e4837; }
.swamp { --top:#6c735a; --c2:#3d4c3e; --c3:#a99c75; }.gator { --top:#73815a; --c2:#2e5037; --c3:#b9a36c; }
.blue-camo { --top:#3e6174; --c2:#143c56; --c3:#8cabb5; }.red-camo { --top:#992d32; --c2:#392a2b; --c3:#d68370; }
.lime-camo { --top:#76a93e; --c2:#263823; --c3:#bac565; }.black-marble { --top:#262c2e; }.royal-marble { --top:#225a89; }
.royal-blue { --top:#23669b; }.deep-blue { --top:#163f62; }.light-blue { --top:#8ab9c8; }.orange { --top:#dd7132; }.yellow { --top:#e7bc3f; }
.lime-black { --top:#88b945; --bottom:#202424; }.red-black { --top:#c94345; --bottom:#202424; }.blue-black { --top:#3375a5; --bottom:#202424; }
.order-strip { display:grid; grid-template-columns:1.15fr .85fr; gap:60px; align-items:end; padding:78px 7vw; color:white; background:var(--navy); }
.order-strip p:not(.eyebrow) { margin:0 0 20px; color:rgba(255,255,255,.7); }
.lightbox { position:fixed; z-index:20; inset:0; display:none; align-items:center; justify-content:center; padding:32px 72px; color:white; background:rgba(2,18,24,.94); }
.lightbox.open { display:flex; }
.lightbox-figure { width:min(760px, 76vw); margin:0; }
.lightbox-image { display:block; width:100%; max-height:72vh; object-fit:contain; border-radius:4px; background:#122b33; box-shadow:0 25px 65px rgba(0,0,0,.35); }
.lightbox figcaption { display:grid; grid-template-columns:1fr auto; gap:3px 24px; align-items:end; padding:18px 2px 0; }
.lightbox figcaption p { grid-column:1; margin:0; color:var(--aqua); font:700 11px/1 var(--display); letter-spacing:1.5px; text-transform:uppercase; }
.lightbox figcaption h2 { grid-column:1; font-size:28px; }
.lightbox-count { grid-column:2; grid-row:1 / span 2; align-self:end; color:rgba(255,255,255,.62); font:700 12px var(--display); letter-spacing:1px; }
.lightbox-close, .lightbox-arrow { position:absolute; border:1px solid rgba(255,255,255,.35); color:white; background:rgba(255,255,255,.05); cursor:pointer; transition:background .2s ease; }
.lightbox-close:hover, .lightbox-arrow:hover { background:rgba(255,255,255,.15); }
.lightbox-close { top:24px; right:24px; width:48px; height:48px; font:300 36px/38px Arial, sans-serif; }
.lightbox-arrow { top:50%; width:54px; height:72px; margin-top:-36px; font:300 50px/58px Georgia, serif; }
.lightbox-prev { left:22px; }
.lightbox-next { right:22px; }
body.lightbox-active { overflow:hidden; }
@media (max-width:900px) {
  .catalog-hero { min-height:540px; padding:150px 6vw 70px; }
  .catalog-hero-photo { object-position:58% center; }
  .catalog-intro, .order-strip { grid-template-columns:1fr; gap:28px; }
  .catalog-intro { padding-top:62px; padding-bottom:62px; }
  .catalog-intro h2 { white-space:normal; }
  .catalog-toolbar { align-items:flex-start; flex-direction:column; }
  .catalog-filters { justify-content:flex-start; }
  .color-grid { grid-template-columns:repeat(3, 1fr); }
  .order-strip { padding:65px 6vw; }
  .lightbox { padding:68px 18px 24px; }
  .lightbox-figure { width:min(100%, 680px); }
  .lightbox-image { max-height:69vh; }
  .lightbox-arrow { top:auto; bottom:22px; width:49px; height:49px; margin:0; font-size:40px; line-height:38px; }
  .lightbox-prev { left:18px; }
  .lightbox-next { right:18px; }
  .lightbox figcaption { padding:14px 56px 0; text-align:center; }
  .lightbox figcaption p, .lightbox figcaption h2 { grid-column:1 / span 2; }
  .lightbox-count { grid-column:1 / span 2; grid-row:auto; justify-self:center; margin-top:5px; }
}
@media (max-width:620px) {
  .catalog-hero h1 { font-size:58px; }
  .catalog-intro { padding-top:52px; padding-bottom:52px; }
  .catalog-filters { flex-wrap:nowrap; max-width:100%; overflow:auto; padding-bottom:3px; }
  .catalog-filter { flex:0 0 auto; }
  .color-grid { grid-template-columns:repeat(2, 1fr); gap:10px; }
  .mat-sample { height:125px; }
  .real-sample { height:125px; }
  .color-card h3 { font-size:15px; }
}