@font-face    {
  font-family:Mega;
  src:url('../assets/fonts/montserrat-latin.woff2') format('woff2');
  font-weight:100 900;
  font-display:swap
}

:root    {
  /* --navy:#000000; */
  --navy:#062b49;
  --blue:#0a385b;
  --mid:#174d6f;
  --gold:#f2b735;
  --gold-light:#ffca49;
  --white:#fff;
  --light:#f5f7f9;
  --muted:#6b7c8c;
  --border:#dce3e9;
  --font:Mega,Montserrat,Arial,sans-serif
}

*    {
  box-sizing:border-box
}

html    {
  scroll-behavior:smooth;
  scroll-padding-top:90px
}

body    {
  margin:0;
  font-family:var(--font);
  color:var(--navy);
  background:var(--light);
  font-size:14px;
  line-height:1.7
}

body.modal-open    {
  overflow:hidden
}

a    {
  color:inherit;
  text-decoration:none
}

button,input    {
  font:inherit
}

button,a    {
  -webkit-tap-highlight-color:transparent
}

button    {
  cursor:pointer
}

button:disabled    {
  cursor:default
}

img    {
  display:block;
  max-width:100%
}

svg    {
  width:24px;
  height:24px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round
}

button    {
  border:0
}

h1,h2,h3,p    {
  margin:0
}

h1,h2,h3    {
  line-height:1.15
}

h2    {
  font-size:36px;
  font-weight:850;
  letter-spacing:-1.4px
}

em    {
  font-style:normal;
  color:var(--gold)
}

:focus-visible    {
  outline:3px solid var(--gold);
  outline-offset:5px
}

button:focus-visible,input:focus-visible    {
  outline-offset:3px
}

.container    {
  width:min(1240px,calc(100% - 96px));
  margin:auto
}

.section    {
  padding:85px 0
}

.eyebrow    {
  font-size:10px;
  letter-spacing:2.3px;
  font-weight:800;
  color:var(--mid);
  margin-bottom:14px
}

.header    {
  position:sticky;
  top:0;
  background:var(--navy);
  color:white;
  z-index:30;
  border-bottom:1px solid #ffffff17
}

.nav-wrap    {
  height:88px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px
}

.brand    {
  display:inline-flex;
  align-items:center;
  gap:10px;
  line-height:1;
  flex-shrink:0
}

.brand strong    {
  font-size:20px;
  font-style:italic;
  letter-spacing:-.8px;
  font-weight:900;
  white-space:nowrap
}

.header nav    {
  display:flex;
  height:100%;
  gap:30px;
  align-items:center;
  margin-left:auto
}

.header nav a    {
  font-size:12px;
  font-weight:650;
  position:relative;
  height:100%;
  display:flex;
  align-items:center;
  transition:color .2s
}

.header nav a::after    {
  content:'';
  position:absolute;
  bottom:19px;
  height:2px;
  background:var(--gold);
  left:0;
  right:100%;
  transition:right .2s
}

.header nav a:hover,.header nav a.active    {
  color:var(--gold)
}

.header nav a.active::after,.header nav a:hover::after    {
  right:0
}

.nav-actions    {
  display:flex;
  align-items:center;
  gap:18px
}

.icon-button    {
  padding:4px;
  background:none;
  color:inherit;
  display:flex;
  position:relative
}

.icon-button:hover    {
  color:var(--gold)
}

.cart-button span    {
  position:absolute;
  right:-9px;
  top:-5px;
  font-size:9px;
  min-width:16px;
  height:16px;
  display:grid;
  place-items:center;
  background:var(--gold);
  color:var(--navy);
  border-radius:50%;
  font-weight:800
}

.mobile-toggle    {
  display:none
}

.hero    {
  height:660px;
  position:relative;
  isolation:isolate;
  background:#082b43;
  color:white;
  overflow:hidden
}

.hero-photo    {
  position:absolute;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 55%;
  z-index:-3
}

.hero-overlay    {
  position:absolute;
  inset:0;
  z-index:-2;
  background:linear-gradient(90deg,rgba(3,24,42,.94) 0%,rgba(3,24,42,.83) 25%,rgba(3,24,42,.3) 55%,rgba(3,24,42,0) 80%),linear-gradient(0deg,rgba(3,24,42,.8),transparent 30%)
}

.hero-inner    {
  height:100%;
  display:flex;
  align-items:center;
  padding-bottom:45px
}

.hero-copy    {
  max-width:580px;
  animation:rise .8s both
}

.hero .eyebrow    {
  color:#e1e8ec;
  font-size:10px;
  letter-spacing:2.1px;
  display:flex;
  align-items:center;
  gap:12px
}

.hero .eyebrow>span    {
  width:28px;
  height:2px;
  background:var(--gold)
}

h1    {
  font-size:clamp(48px,5.3vw,76px);
  line-height:1.06;
  letter-spacing:-3px;
  font-weight:900;
  margin:23px 0
}

.hero-description    {
  max-width:410px;
  font-size:14px;
  line-height:1.85;
  color:#ced9e1
}

.button-row    {
  display:flex;
  gap:14px;
  margin-top:30px
}

.button    {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:35px;
  padding:15px 23px;
  font-weight:750;
  font-size:12px;
  border:1px solid transparent;
  border-radius:3px;
  transition:background .2s,transform .2s;
  line-height:1.5
}

.button span    {
  font-size:19px;
  line-height:1
}

.button:hover    {
  transform:translateY(-2px)
}

.primary    {
  background:var(--gold);
  color:var(--navy)
}

.primary:hover    {
  background:var(--gold-light)
}

.outline    {
  color:white;
  border-color:#ffffff55;
  background:#082b4333
}

.outline:hover    {
  background:#ffffff15
}

.hero-note    {
  margin-top:34px;
  display:flex;
  align-items:center;
  gap:10px;
  font-size:8px;
  letter-spacing:1.3px;
  color:#bacad6
}

.small-shield    {
  border:1px solid #8ba3b5;
  border-radius:3px 3px 8px 8px;
  padding:0 5px;
  color:var(--gold);
  font-size:13px
}

.hero-bottom    {
  position:absolute;
  bottom:24px;
  left:0;
  right:0;
  display:flex;
  justify-content:space-between;
  border-top:1px solid #ffffff21;
  padding-top:18px;
  font-size:8px;
  letter-spacing:1.8px;
  color:#b1c2ce
}

.hero-bottom a    {
  color:white
}

.hero-bottom a span    {
  color:var(--gold);
  margin-left:20px;
  font-size:16px
}

.section-heading    {
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:30px;
  margin-bottom:34px
}

.section-heading>p    {
  color:var(--muted);
  font-size:12px;
  line-height:1.9
}

.category-grid    {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:17px
}

.category-card    {
  background:white;
  border:1px solid #e4e8ed;
  border-radius:5px;
  box-shadow:0 5px 18px #062b4904;
  padding:25px;
  text-align:left;
  position:relative;
  color:var(--navy);
  transition:transform .25s,border-color .25s,box-shadow .25s
}

.category-card:hover    {
  transform:translateY(-5px);
  box-shadow:0 9px 20px #062b4910
}

.category-card[aria-pressed=true]    {
  border-color:var(--gold);
  box-shadow:inset 0 -3px var(--gold)
}

.category-card svg    {
  width:50px;
  height:38px;
  stroke-width:1.3;
  margin-bottom:16px
}

.category-card strong    {
  display:block;
  font-size:14px;
  margin-bottom:3px
}

.category-card small    {
  font-size:10px;
  color:var(--muted)
}

.category-card>span    {
  position:absolute;
  right:22px;
  bottom:24px;
  color:#9babb8
}

.trust    {
  color:white;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:var(--navy)
}

.trust>img    {
  position:absolute;
  inset:0 0 0 auto;
  width:65%;
  height:100%;
  object-fit:cover;
  z-index:-2;
  opacity:.52
}

.trust::after    {
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(90deg,var(--navy) 15%,#062b49de 48%,#062b4955)
}

.trust-inner    {
  padding:75px 0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:90px
}

.trust .eyebrow,.about .eyebrow,.contact .eyebrow    {
  color:var(--gold)
}

.trust h2    {
  line-height:1.2
}

.trust p:not(.eyebrow)    {
  color:#bbccd8;
  font-size:12px;
  max-width:400px;
  margin-top:20px
}

.text-link    {
  display:inline-flex;
  gap:36px;
  align-items:center;
  font-weight:750;
  font-size:12px;
  color:var(--gold);
  padding:0 0 8px;
  border-bottom:1px solid #f2b73566;
  background:none;
  margin-top:25px
}

.text-link span    {
  font-size:20px
}

.benefits    {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:35px 32px;
  align-content:center
}

.benefits>div    {
  border-top:1px solid #ffffff35;
  padding-top:18px;
  display:flex;
  gap:17px;
  align-items:start
}

.benefits span    {
  color:var(--gold);
  font-size:12px;
  font-weight:700
}

.benefits h3    {
  font-size:14px;
  font-weight:600;
  line-height:1.8
}

.catalog-caption    {
  font-size:9px;
  letter-spacing:1.5px;
  color:var(--muted);
  margin-bottom:5px
}

.catalog-toolbar    {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  padding-bottom:17px;
  border-bottom:1px solid var(--border)
}

.filter-tabs    {
  display:flex;
  gap:8px;
  flex-wrap:wrap
}

.filter-tabs button    {
  padding:8px 14px;
  background:transparent;
  color:var(--muted);
  border-radius:3px;
  font-size:11px;
  font-weight:650;
  transition:background .2s
}

.filter-tabs button:hover    {
  background:#e6edf2
}

.filter-tabs button[aria-pressed=true]    {
  background:var(--navy);
  color:white
}

.search-field    {
  display:flex;
  align-items:center;
  gap:9px;
  background:white;
  border:1px solid var(--border);
  padding:7px 12px;
  border-radius:3px
}

.search-field svg    {
  width:17px;
  height:17px;
  color:var(--muted)
}

.search-field input    {
  border:0;
  outline:0;
  background:transparent;
  width:170px;
  font-size:11px;
  color:var(--navy)
}

.search-field:focus-within    {
  outline:2px solid var(--gold);
  outline-offset:2px
}

.result-count    {
  font-size:10px;
  color:var(--muted);
  margin:15px 0
}

.product-grid    {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:22px
}

.product-card    {
  background:white;
  border:1px solid #e1e7ec;
  border-radius:5px;
  overflow:hidden;
  transition:box-shadow .25s,transform .25s
}

.product-card:hover    {
  transform:translateY(-4px);
  box-shadow:0 12px 30px #062b4910
}

.product-image    {
  position:relative;
  background:white;
  padding:18px 12px 5px
}

.product-image img    {
  width:100%;
  aspect-ratio:1.25;
  object-fit:contain
}

.product-tag    {
  position:absolute;
  left:15px;
  top:14px;
  font-size:8px;
  letter-spacing:.7px;
  background:#eff3f5;
  color:var(--mid);
  padding:3px 7px;
  border-radius:2px;
  text-transform:uppercase;
  font-weight:700
}

.product-info    {
  padding:15px 20px 20px
}

.product-info h3    {
  font-size:15px;
  font-weight:800;
  letter-spacing:-.3px
}

.product-info>p    {
  color:var(--muted);
  font-size:10px;
  margin-top:7px;
  min-height:34px
}

.specs    {
  display:flex;
  gap:0;
  margin:16px 0;
  border-top:1px solid #edf0f3;
  border-bottom:1px solid #edf0f3;
  padding:12px 0
}

.specs>div    {
  flex:1;
  border-right:1px solid #e5eaf0;
  text-align:center
}

.specs>div:first-child    {
  text-align:left
}

.specs>div:last-child    {
  border:0
}

.specs dt    {
  font-size:8px;
  color:var(--muted)
}

.specs dd    {
  margin:2px 0 0;
  font-size:11px;
  font-weight:700
}

.price    {
  display:block;
  font-size:23px;
  font-weight:800;
  letter-spacing:-.8px;
  margin:7px 0 15px
}

.add-cart    {
  width:100%;
  padding:11px 8px;
  font-size:10px;
  gap:8px
}

.add-cart svg    {
  width:17px;
  height:17px
}

.catalog-disclaimer    {
  margin-top:24px;
  color:var(--muted);
  font-size:10px
}

.empty-results    {
  grid-column:1/-1;
  padding:50px;
  text-align:center;
  border:1px dashed var(--border);
  border-radius:4px
}

.empty-results h3    {
  margin-bottom:10px
}

.empty-results button    {
  margin-top:15px;
  background:var(--gold);
  padding:10px 20px;
  color:var(--navy);
  border-radius:3px
}

.about    {
  display:grid;
  grid-template-columns:1fr 1fr;
  background:var(--navy);
  color:white
}

.about-photo    {
  position:relative;
  min-height:500px;
  overflow:hidden
}

.about-photo img    {
  width:100%;
  height:100%;
  position:absolute;
  object-fit:cover
}

.about-photo::after    {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(0deg,#031c32aa,transparent 50%)
}

.about-photo>span    {
  position:absolute;
  bottom:35px;
  left:48px;
  font-size:10px;
  font-weight:700;
  letter-spacing:2px;
  z-index:1
}

.about-copy    {
  padding:70px max(48px,calc((100vw - 1240px)/2)) 70px 65px
}

.about h2    {
  font-size:36px;
  line-height:1.2
}

.about p:not(.eyebrow)    {
  font-size:12px;
  color:#c2d0db;
  margin-top:24px
}

.about .eyebrow    {
  font-size:8px;
  letter-spacing:1.6px
}

.warranty-inner    {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:100px;
  align-items:center
}

.warranty h2    {
  font-size:30px
}

.warranty-inner>div>p:not(.eyebrow)    {
  color:var(--muted);
  font-size:12px;
  max-width:420px;
  margin-top:19px
}

.faq details    {
  border-bottom:1px solid var(--border);
  padding:20px 0
}

.faq summary    {
  list-style:none;
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  gap:20px;
  font-size:12px;
  font-weight:750
}

.faq summary::-webkit-details-marker    {
  display:none
}

.faq summary span    {
  color:var(--mid);
  font-size:21px;
  line-height:1
}

.faq details[open] summary span    {
  transform:rotate(45deg)
}

.faq p    {
  font-size:12px;
  color:var(--muted);
  margin-top:15px
}

.contact    {
  background:var(--blue);
  color:white;
  padding:44px 0;
  border-bottom:1px solid #ffffff19
}

.contact-inner    {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px
}

.contact h2    {
  font-size:26px;
  letter-spacing:-.7px
}

.contact p:not(.eyebrow)    {
  color:#b8cbd8;
  font-size:12px;
  margin-top:9px
}

.contact .eyebrow    {
  font-size:8px;
  margin-bottom:10px
}

footer    {
  background:#000000;
  /* background:#031f35; */
  color:#bdcad3;
  padding:57px 0 0
}

.footer-grid    {
  display:grid;
  grid-template-columns:1.4fr 1.3fr .7fr .6fr;
  gap:50px
}

.footer-grid .brand    {
  color:white
}

.footer-grid p    {
  font-size:11px;
  line-height:1.9;
  margin-top:20px
}

.footer-grid h3    {
  color:white;
  font-size:10px;
  letter-spacing:1.2px;
  margin-bottom:20px
}

.footer-grid>div>a:not(.brand),.social-link    {
  display:block;
  font-size:11px;
  margin-bottom:9px
}

.footer-grid>div>a:hover,.social-link:hover    {
  color:var(--gold)
}

.footer-grid small    {
  display:block;
  font-size:9px;
  color:#9db1c1;
  line-height:1.6;
  margin-top:12px
}

.social-link    {
  background:none;
  color:inherit;
  padding:0
}

.footer-bottom    {
  display:flex;
  justify-content:space-between;
  gap:20px;
  font-size:9px;
  border-top:1px solid #ffffff15;
  padding:23px 0;
  margin-top:45px
}

.footer-bottom>span:last-child    {
  color:var(--gold)
}

.cart-drawer    {
  position:fixed;
  inset:0 0 0 auto;
  width:460px;
  max-width:100%;
  height:100dvh;
  max-height:100dvh;
  margin:0;
  border:0;
  padding:0;
  color:var(--navy);
  background:var(--light);
  box-shadow:-15px 0 60px #0002
}

.cart-drawer[open]    {
  display:flex;
  flex-direction:column;
  animation:drawer-in .25s
}

.cart-drawer::backdrop    {
  background:#021a32b3;
  backdrop-filter:blur(3px)
}

.drawer-header    {
  padding:27px 25px;
  background:var(--navy);
  color:white;
  display:flex;
  justify-content:space-between;
  align-items:center
}

.drawer-header .eyebrow    {
  color:var(--gold);
  margin-bottom:5px;
  font-size:8px
}

.drawer-header h2    {
  font-size:25px;
  letter-spacing:-.5px
}

.close-button    {
  background:none;
  color:inherit;
  font-size:32px;
  width:40px;
  height:40px;
  line-height:1
}

.cart-items    {
  padding:15px 25px;
  overflow-y:auto;
  flex:1
}

.cart-item    {
  display:grid;
  grid-template-columns:75px 1fr;
  gap:16px;
  border-bottom:1px solid var(--border);
  padding:20px 0
}

.cart-item img    {
  width:75px;
  height:75px;
  object-fit:contain;
  background:white;
  border-radius:3px
}

.cart-item h3    {
  font-size:12px;
  margin:3px 0 7px
}

.cart-item strong    {
  font-size:13px
}

.cart-item-controls    {
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:12px
}

.quantity-button    {
  height:28px;
  width:28px;
  background:white;
  border:1px solid var(--border);
  border-radius:3px;
  color:var(--navy);
  font-size:17px
}

.quantity-value    {
  font-size:12px;
  min-width:20px;
  text-align:center
}

.remove-item    {
  margin-left:auto;
  background:none;
  font-size:10px;
  color:var(--muted);
  text-decoration:underline
}

.cart-summary    {
  padding:25px;
  background:white;
  border-top:1px solid var(--border)
}

.cart-summary>p    {
  display:flex;
  justify-content:space-between;
  margin-bottom:10px;
  font-size:13px
}

.cart-summary .total    {
  font-size:20px;
  padding-top:10px;
  border-top:1px solid var(--border)
}

.cart-summary small    {
  display:block;
  color:var(--muted);
  font-size:10px;
  line-height:1.7;
  margin:15px 0
}

.cart-summary .button    {
  width:100%
}

.cart-summary .button[aria-disabled=true]    {
  opacity:.45;
  pointer-events:none
}

.cart-empty    {
  text-align:center;
  padding:60px 0
}

.cart-empty h3    {
  font-size:18px;
  margin-bottom:10px
}

.cart-empty p    {
  font-size:12px;
  color:var(--muted)
}

.toast    {
  position:fixed;
  bottom:25px;
  left:50%;
  transform:translate(-50%,25px);
  opacity:0;
  pointer-events:none;
  background:var(--navy);
  color:white;
  padding:14px 24px;
  box-shadow:0 8px 30px #0003;
  border-left:3px solid var(--gold);
  border-radius:3px;
  font-size:12px;
  z-index:100;
  transition:opacity .2s,transform .2s;
  max-width:calc(100% - 32px);
  width:max-content
}

.toast.visible    {
  opacity:1;
  transform:translate(-50%,0)
}

.skip    {
  position:fixed;
  top:-100px;
  left:20px;
  background:var(--gold);
  padding:10px 20px;
  z-index:100
}

.skip:focus    {
  top:10px
}

.noscript    {
  position:fixed;
  bottom:0;
  background:var(--gold);
  padding:12px;
  width:100%;
  z-index:40
}

@keyframes rise    {
  from    {
    opacity:0;
    transform:translateY(15px)
  }
  to    {
    opacity:1;
    transform:none
  }
}

@keyframes drawer-in    {
  from    {
    transform:translateX(100%)
  }
  to    {
    transform:none
  }
}

@media(min-width:1600px)    {
  .hero-photo    {
    object-position:center 58%
  }
  .hero-overlay    {
    background:linear-gradient(90deg,#03182af0, #03182acc 27%,#03182a33 55%,transparent 80%),linear-gradient(0deg,#03182acc,transparent 30%)
  }
}

@media(max-width:1100px)    {
  .container    {
    width:calc(100% - 56px)
  }
  .nav-wrap    {
    gap:25px
  }
  .header nav    {
    gap:19px
  }
  .nav-actions    {
    gap:15px
  }
  .hero    {
    height:640px
  }
  h1    {
    font-size:62px
  }
  .hero-copy    {
    max-width:510px
  }
  .category-card    {
    padding:20px
  }
  .product-grid    {
    grid-template-columns:repeat(3,1fr)
  }
  .trust-inner    {
    gap:40px
  }
  .about-copy    {
    padding:55px 35px
  }
  .about h2    {
    font-size:30px
  }
  .footer-grid    {
    gap:28px
  }
  .warranty-inner    {
    gap:50px
  }
  .catalog-toolbar    {
    align-items:start
  }
  .filter-tabs    {
    gap:2px
  }
  .filter-tabs button    {
    padding:8px 10px
  }
}

@media(max-width:800px)    {
  .nav-wrap    {
    height:74px
  }
  .header nav    {
    position:absolute;
    top:74px;
    left:0;
    right:0;
    background:var(--navy);
    height:auto;
    display:none;
    padding:16px 28px 24px;
    border-top:1px solid #ffffff15;
    margin:0;
    box-shadow:0 20px 25px #001a3333
  }
  .header nav.open    {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:0
  }
  .header nav a    {
    padding:12px 0;
    height:auto
  }
  .header nav a::after    {
    bottom:5px;
    right:100%
  }
  .header nav a.active::after    {
    right:85%
  }
  .mobile-toggle    {
    display:flex
  }
  .nav-actions    {
    margin-left:auto;
    gap:22px
  }
  .hero    {
    height:660px
  }
  .hero-copy    {
    max-width:470px
  }
  .hero-overlay    {
    background:linear-gradient(90deg,#03182aed,#03182a88 60%,#03182a20),linear-gradient(0deg,#03182aee,transparent 50%)
  }
  h1    {
    font-size:59px
  }
  .category-grid    {
    grid-template-columns:repeat(3,1fr)
  }
  .section-heading    {
    align-items:start
  }
  .section-heading>p br    {
    display:none
  }
  .section-heading>p    {
    max-width:230px
  }
  .section    {
    padding:60px 0
  }
  h2    {
    font-size:30px
  }
  .trust-inner    {
    grid-template-columns:1fr;
    padding:55px 0;
    gap:38px
  }
  .trust>img    {
    width:100%
  }
  .trust::after    {
    background:linear-gradient(90deg,#062b49f0,#062b49a0)
  }
  .benefits    {
    gap:23px 40px
  }
  .product-grid    {
    grid-template-columns:repeat(2,1fr)
  }
  .catalog-caption    {
    display:none
  }
  .catalog-toolbar    {
    flex-direction:column;
    gap:15px
  }
  .search-field    {
    width:100%
  }
  .search-field input    {
    width:100%
  }
  .about    {
    grid-template-columns:1fr
  }
  .about-photo    {
    min-height:370px
  }
  .about-copy    {
    padding:45px 28px
  }
  .about-copy p    {
    max-width:590px
  }
  .warranty-inner    {
    grid-template-columns:1fr;
    gap:30px
  }
  .contact-inner    {
    align-items:start;
    flex-direction:column
  }
  .contact h2    {
    font-size:27px
  }
  .footer-grid    {
    grid-template-columns:1fr 1fr;
    gap:35px
  }
  .footer-bottom    {
    flex-direction:column;
    gap:6px
  }
  .hero-note    {
    max-width:400px
  }
  .hero-bottom>span    {
    display:none
  }
  .hero-bottom    {
    justify-content:flex-end
  }
}

@media(max-width:520px)    {
  .container    {
    width:calc(100% - 36px)
  }
  .brand small    {
    font-size:7px;
    letter-spacing:3px
  }
  .brand    {
    gap:7px
  }
  .nav-actions    {
    gap:14px
  }
  .nav-actions svg    {
    width:21px;
    height:21px
  }
  .nav-wrap    {
    gap:15px
  }
  .hero    {
    height:730px
  }
  .hero-photo    {
    object-position:65% bottom;
    height:60%;
    top:auto;
    bottom:0
  }
  .hero-overlay    {
    background:linear-gradient(180deg,#031c32 0%,#031c32 29%,#031c32d0 43%,#031c3200 69%,#031c32a0 100%)
  }
  .hero-inner    {
    align-items:flex-start;
    padding-top:44px;
    padding-bottom:0
  }
  .hero-copy    {
    max-width:100%
  }
  .hero .eyebrow    {
    font-size:7px;
    letter-spacing:1.35px;
    gap:8px
  }
  h1    {
    font-size:46px;
    letter-spacing:-2px;
    margin:18px 0
  }
  .hero-description    {
    font-size:12px;
    max-width:340px
  }
  .button-row    {
    gap:9px;
    margin-top:22px
  }
  .button-row .button    {
    padding:12px 13px;
    font-size:10px;
    gap:15px
  }
  .hero-note    {
    margin-top:20px;
    font-size:6px;
    letter-spacing:.8px
  }
  .hero-bottom    {
    bottom:17px;
    font-size:7px;
    padding-top:12px
  }
  .section    {
    padding:44px 0
  }
  .section-heading    {
    display:block;
    margin-bottom:23px
  }
  .section-heading>p    {
    margin-top:16px;
    max-width:none;
    font-size:11px
  }
  .section-heading h2    {
    font-size:27px;
    letter-spacing:-1px
  }
  .eyebrow    {
    font-size:8px;
    letter-spacing:1.8px;
    margin-bottom:10px
  }
  .category-grid    {
    grid-template-columns:1fr 1fr;
    gap:10px
  }
  .category-card    {
    padding:20px
  }
  .category-card:last-child    {
    grid-column:1/-1;
    display:grid;
    grid-template-columns:60px 1fr;
    align-items:center
  }
  .category-card:last-child svg    {
    grid-row:1/3;
    margin:0
  }
  .category-card:last-child strong    {
    align-self:end
  }
  .category-card:last-child small    {
    align-self:start
  }
  .category-card svg    {
    width:43px;
    height:32px;
    margin-bottom:12px
  }
  .category-card strong    {
    font-size:12px
  }
  .trust-inner    {
    padding:43px 0
  }
  .trust h2    {
    font-size:28px
  }
  .trust p:not(.eyebrow)    {
    font-size:11px
  }
  .benefits    {
    gap:22px 18px
  }
  .benefits>div    {
    gap:12px
  }
  .benefits h3    {
    font-size:11px
  }
  .benefits span    {
    font-size:10px
  }
  .filter-tabs    {
    gap:3px
  }
  .filter-tabs button    {
    font-size:9px;
    padding:8px 9px
  }
  .product-grid    {
    grid-template-columns:1fr;
    gap:20px
  }
  .product-image    {
    padding:20px 38px 0
  }
  .product-image img    {
    aspect-ratio:1.45
  }
  .product-info    {
    padding:18px 23px 23px
  }
  .product-info h3    {
    font-size:18px
  }
  .product-info>p    {
    font-size:11px;
    min-height:0
  }
  .specs dd    {
    font-size:13px
  }
  .specs dt    {
    font-size:9px
  }
  .price    {
    font-size:27px
  }
  .add-cart    {
    font-size:12px;
    padding:13px
  }
  .product-tag    {
    font-size:9px;
    left:22px;
    top:20px
  }
  .about-photo    {
    min-height:300px
  }
  .about-photo>span    {
    left:20px;
    font-size:8px
  }
  .about-copy    {
    padding:40px 20px
  }
  .about h2    {
    font-size:29px
  }
  .warranty h2    {
    font-size:27px
  }
  .contact    {
    padding:34px 0
  }
  .contact h2    {
    font-size:25px
  }
  .footer-grid    {
    grid-template-columns:1fr 1fr;
    gap:35px 24px
  }
  .footer-grid>div:first-child,.footer-grid>div:nth-child(2)    {
    grid-column:1/-1
  }
  footer    {
    padding-top:40px
  }
  .footer-grid p    {
    margin-top:12px
  }
  .footer-grid h3    {
    margin-bottom:16px
  }
  .footer-bottom    {
    margin-top:32px;
    font-size:8px
  }
  .cart-drawer    {
    width:100%
  }
  .cart-items    {
    padding:12px 20px
  }
  .cart-summary    {
    padding:20px
  }
  .toast    {
    font-size:11px;
    padding:12px 16px
  }
}

@media(prefers-reduced-motion:reduce)    {
  html    {
    scroll-behavior:auto
  }
  *,*::before,*::after    {
    animation:none!important;
    transition:none!important
  }
}

.benefits svg    {
  flex-shrink:0;
  width:26px;
  height:26px;
  color:var(--gold);
  stroke-width:1.4;
  margin-top:3px
}

.about-brand    {
  margin-bottom:30px
}

@media(max-width:520px)    {
  .hero-photo    {
    object-position:100% bottom
  }
  .icon-button    {
    min-width:32px;
    min-height:40px;
    align-items:center;
    justify-content:center
  }
  .nav-actions    {
    gap:6px
  }
}

/* One official artwork, scaled proportionally across all brand placements. */
.official-logo    {
  width: 174px;
  height: auto;
  object-fit: contain;
}

.footer-grid .official-logo, .about-brand .official-logo    {
  width: 230px;
}

.drawer-logo    {
  width: 110px;
  height: auto;
  margin-bottom: 14px;
}

@media (max-width: 800px)    {
  .header .official-logo    {
    width: 139px;
  }
}

@media (max-width: 520px)    {
  .header .official-logo    {
    width: 130px;
  }
  .nav-wrap    {
    gap: 12px;
  }
}
/* Institutional and distributor dialogs */
.brand-modal { box-sizing:border-box; border:0; padding:0; width:min(720px,calc(100% - 32px)); max-height:90vh; max-height:90dvh; margin:auto; color:#123047; background:#fff; border-radius:12px; box-shadow:0 30px 100px #00152266; overscroll-behavior:contain; }
.brand-modal::backdrop { background:#031d30c9; backdrop-filter:blur(5px); }
.brand-modal .modal-close { position:sticky; z-index:2; top:14px; float:right; margin:14px 14px -58px 0; background:#f2b735; color:#062b49; border-radius:50%; width:40px; height:40px; }
.modal-content { padding:48px; }
.brand-modal h2 { font-size:clamp(25px,3.5vw,36px); letter-spacing:-1px; line-height:1.2; margin:14px 0 18px; }
.brand-modal h2 em { color:#986900; font-style:normal; }
.brand-modal p { line-height:1.8; }
.brand-modal h3 { font-size:23px; line-height:1.35; margin:0 0 16px; }
.brand-modal .eyebrow { font-size:10px; padding-right:25px; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin:26px 0 16px; }
.form-grid label { display:flex; flex-direction:column; gap:9px; font-size:12px; font-weight:700; min-width:0; }
.form-grid .full-field { grid-column:1/-1; }
.form-grid input,.form-grid textarea { box-sizing:border-box; width:100%; border:1px solid #cbd5dc; background:#f7f9fb; color:#123047; border-radius:5px; padding:13px 14px; font:inherit; font-size:14px; font-weight:400; }
.form-grid textarea { resize:vertical; min-height:115px; }
.form-grid :is(input,textarea):focus { outline:2px solid #b8810d; outline-offset:2px; }
.brand-modal .form-note { font-size:12px; color:#526777; margin:16px 0 22px; }
.distributor-success { padding:24px 0 0; }
.distributor-success[hidden],#distributor-form[hidden] { display:none; }
.success-symbol { display:grid; place-items:center; border-radius:50%; width:52px; height:52px; background:#f2b735; color:#062b49; font-size:27px; margin-bottom:20px; }
.company-modal { width:min(940px,calc(100% - 32px)); }
.company-intro { background:#062b49; color:white; padding:48px; }
.company-intro .eyebrow { color:#f2b735; }
.experience-mark { display:flex; align-items:center; gap:20px; margin-top:28px; padding-top:22px; border-top:1px solid #ffffff30; }
.experience-mark strong { color:#f2b735; font-size:54px; line-height:1; }
.experience-mark span { font-size:10px; letter-spacing:1.3px; line-height:1.9; }
.company-body { font-size:14px; }
.company-lead { font-weight:700; font-size:18px; }
.company-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:30px; }
.company-card { padding:26px; background:#f3f6f8; border-top:3px solid #f2b735; }
.company-card p:last-child { margin-bottom:0; }
.company-section { margin-top:36px; }
.values-list { margin:0; }
.values-list div { padding:16px 0; border-bottom:1px solid #e0e6ea; }
.values-list dt { font-weight:700; margin-bottom:7px; }
.values-list dd { margin:0; line-height:1.8; }
.company-brand { background:#062b49; color:#fff; padding:30px; border-radius:6px; }
.company-brand .eyebrow,.company-brand h3 { color:#f2b735; }
.company-brand ul { padding-left:20px; line-height:2; }
.service-list { padding-left:24px; }
.service-list li { padding:12px 0 12px 10px; border-bottom:1px solid #e0e6ea; }
.service-list li::marker { color:#986900; font-weight:700; }
.service-list h4 { margin:0; font-size:15px; }
.service-list p { margin:8px 0 0; }
.company-location { border-top:1px solid #dce3e8; margin-top:32px; padding-top:25px; }
.contact-inner > div { max-width:720px; }
.contact-inner > .button { flex-shrink:0; }
@media (min-width:801px) and (max-width:1100px) { .header .nav-wrap { gap:16px; } .header nav { gap:14px; } .header nav a { font-size:11px; } .header .official-logo { width:145px; } }
@media (max-width:600px) { .modal-content,.company-intro { padding:38px 24px 28px; } .company-grid,.form-grid { grid-template-columns:1fr; } .company-card { padding:22px; } .brand-modal h2 { padding-right:18px; } .distributor-modal .button { width:100%; } }

.product-image { position:relative; }
.product-image .image-caption { position:absolute; bottom:8px; right:12px; font-size:10px; color:#526777; background:#ffffffed; padding:2px 7px; border-radius:3px; }
.product-image .product-tag { max-width:calc(100% - 24px); font-size:9px; }
.product-info .specs { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; }
.product-info .specs dt { font-size:8px; }
.product-info .specs dd { font-size:12px; }


/* Fail closed before configuration or JavaScript has loaded. */
html:not(.cart-enabled) #cart-toggle,
html:not(.cart-enabled) .add-cart,
html:not(.cart-enabled) #cart-dialog { display:none !important; }
html:not(.prices-enabled) .price,
html:not(.prices-enabled) .cart-summary > p { display:none !important; }

@media(min-width:1101px) { .category-grid { grid-template-columns:repeat(7,minmax(0,1fr)); gap:16px; } .category-card { padding:24px 18px; } }
.application-list { display:block; color:#526777; font-size:10px; line-height:1.7; margin:0 0 14px; }