/* Header and hero direction: MadFish One's navy, product-family typography. */
:root {
  --display: 'Inter', system-ui, -apple-system, sans-serif;
  --sans: 'Inter', system-ui, -apple-system, sans-serif;
  --orange: #ff7a1a;
  --orange-2: #ff9b53;
}
.site-header { background: #051f33; border-bottom: 1px solid #ffffff1a; }
.site-header.scrolled { background: #051f33f5; }
.header-inner { height: 88px; }
.brand { gap: 13px; font-family: var(--sans); font-weight: 800; font-size: 24px; letter-spacing: -.045em; }
.brand img { width: 44px; filter: none; }
.brand em { color: #cad7e2; font-size: 14px; font-weight: 500; letter-spacing: .01em; display: block; line-height: 1.1; }
.site-nav { gap: 8px; }
.site-nav>a:not(.btn), .nav-item>a { font-size: 14px; color: #d7e2ec; border-radius: 6px; }
.site-nav .nav-cta { min-height: 44px; height: 44px; border-radius: 6px; font-size: 14px; padding: 0 21px; margin-left: 12px; }
.nav-item .menu { background: #071c2d; border-radius: 8px; }
.nav-open .site-header { background: #051f33; }
.brand-hero { position: relative; isolation: isolate; background: #051f33; padding-top: 88px; overflow: hidden; }
.brand-hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 64%; z-index: -2; }
.brand-hero-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #051f33f5 0%, #051f33dd 31%, #051f3361 68%, #051f331c 100%), linear-gradient(0deg, #051f33da, transparent 40%, #051f3340); }
.brand-hero-content { padding-top: clamp(74px, 8vw, 112px); padding-bottom: clamp(75px, 8vw, 110px); }
.brand-hero-category { color: #d2e9fb; font-size: 15px; font-weight: 500; margin: 0 0 24px; }
.brand-hero h1 { max-width: 860px; color: #fff; font-family: var(--sans); font-size: clamp(42px, 5.8vw, 78px); font-weight: 800; line-height: 1.06; letter-spacing: -.055em; margin: 0 0 28px; text-wrap: balance; }
.brand-hero-description { color: #e0e8f0; max-width: 555px; font-size: 18px; line-height: 1.7; margin: 0; }
.brand-hero-actions { display: flex; flex-wrap: wrap; gap: 28px; align-items: center; margin-top: 34px; }
.brand-hero-actions .btn { background: #ff7a1a; color: #fff; min-height: 54px; padding: 0 25px; font-size: 15px; border-radius: 6px; font-weight: 700; box-shadow: none; }
.brand-hero-actions .btn:hover { background: #f06a0c; color: #fff; }
.brand-secondary { display: inline-flex; align-items: center; gap: 12px; color: #fff; font-size: 15px; font-weight: 600; padding: 12px 0; }
.brand-secondary:hover { text-decoration: underline; text-underline-offset: 6px; }
.brand-hero-price { color: #bdcfdf; font-size: 12px; margin: 23px 0 0; }
.brand-product-band { background: #071c2d; border-top: 1px solid #ffffff20; border-bottom: 1px solid #ffffff16; }
.brand-product-links { display: grid; grid-template-columns: 1fr 1fr 1.15fr; padding-top: 29px; padding-bottom: 29px; }
.brand-product-links a { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 5px 30px; border-left: 1px solid #ffffff26; }
.brand-product-links a:first-child { padding-left: 0; border: 0; }
.brand-product-links a:last-child { padding-right: 0; }
.brand-product-links strong { display: block; font-weight: 700; font-size: 20px; color: #fff; letter-spacing: -.025em; }
.brand-product-links span { display: block; font-size: 12px; line-height: 1.5; margin-top: 5px; color: #b9cbdc; }
.brand-product-links svg { flex-shrink: 0; color: #ff9b53; width: 18px; height: 18px; }
.brand-product-links a:hover strong { color: #ff9b53; }
@media (min-width: 1500px) { .brand-hero-content { padding-top: 130px; padding-bottom: 130px; } }
@media (max-width: 900px) {
  .header-inner { height: 78px; }
  .site-nav { background: #051f33; }
  .site-nav .nav-cta { margin-left: 0; }
  .site-nav>a:not(.btn), .nav-item>a { font-size: 23px; }
  .brand-hero { padding-top: 78px; }
  .brand-hero-shade { background: linear-gradient(90deg, #051f33f0, #051f33a8 70%, #051f3377), linear-gradient(0deg, #051f33b0, transparent); }
  .brand-product-links { grid-template-columns: 1fr; padding-top: 8px; padding-bottom: 8px; }
  .brand-product-links a, .brand-product-links a:first-child, .brand-product-links a:last-child { border-left: 0; padding: 19px 0; }
  .brand-product-links a+a { border-top: 1px solid #ffffff20; }
  .brand-product-links strong { font-size: 18px; }
}
@media (max-width: 520px) {
  .brand { font-size: 22px; }
  .brand img { width: 38px; }
  .brand em { font-size: 12px; }
  .brand-hero-content { padding-top: 65px; padding-bottom: 62px; }
  .brand-hero h1 { font-size: clamp(36px, 9.5vw, 48px); letter-spacing: -.045em; }
  .brand-hero h1 br { display: none; }
  .brand-hero-category { font-size: 12px; margin-bottom: 22px; }
  .brand-hero-description { font-size: 16px; line-height: 1.65; }
  .brand-hero-actions { flex-direction: column; align-items: stretch; gap: 10px; margin-top: 27px; }
  .brand-hero-actions .btn, .brand-secondary { justify-content: center; }
  .brand-hero-price { font-size: 11px; line-height: 1.6; margin-top: 18px; text-align: center; }
  .brand-hero-photo { object-position: 60% center; }
}

/* Original MadFish identity, preserved as supplied. */
.site-header, .site-header.scrolled, .nav-open .site-header {
  background: #fff;
  border-bottom-color: #dce4ea;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.brand img.brand-original { width: 246px; height: auto; filter: none; }
.site-nav>a:not(.btn), .nav-item>a { color: #183247; }
.site-nav>a:not(.btn):hover, .nav-item>a:hover, .site-nav a[aria-current="page"] { color: #006fac; background: #edf5fa; }
.nav-toggle span { background: #075887; }
.site-nav .menu { color: #f5f7fa; }
.footer-brand .brand { background: #fff; padding: 15px 18px; border-radius: 4px; }
.footer-brand .brand img.brand-original { width: 258px; }
@media(max-width:900px) {
  .site-nav { background: #fff; }
  .site-nav .menu { color: #183247; background: transparent; }
  .site-nav .menu-link small { color: #526679; }
  .site-nav .menu-link:hover, .site-nav .menu-link.is-current { background: #edf5fa; }
  .site-nav .menu-link.is-current { color: #006fac; }
  .brand img.brand-original { width: 218px; }
}
@media(max-width:520px) {
  .brand img.brand-original { width: 205px; }
  .footer-brand .brand img.brand-original { width: min(240px, 65vw); }
}

/* Responsive underwater photography; keep natural light visible on the right. */
.brand-hero-media { position: absolute; inset: 0; z-index: -2; }
.brand-hero-media .brand-hero-photo { z-index: auto; object-position: center; }
.brand-hero-shade { background: linear-gradient(90deg, #051f339c 0%, #051f3373 38%, #051f3310 75%), linear-gradient(0deg, #051f338c, transparent 50%); }
@media(max-width:600px) {
  .brand-hero-shade { background: linear-gradient(90deg, #051f339e, #051f3340), linear-gradient(0deg, #051f3380, #051f3330); }
}

/* Every page finishes in the same white as the approved logo header. */
body { background: #fff; }
.site-footer { background: #fff; color: #183247; border-color: #d9e3eb; }
.footer-brand .brand { padding: 0; }
.footer-brand p { color: #486174; font-size: 15px; }
.footer-top { border-color: #d9e3eb; }
.footer-cols h4 { font: 650 13px var(--sans); text-transform: none; letter-spacing: 0; color: #183247; }
.footer-cols a { color: #486174; font-size: 14px; }
.footer-cols a:hover { color: #076ba6; }
.footer-cols a svg { color: #076ba6; }
.footer-bottom { color: #52697b; font-size: 12px; }

/* Products menu: each product keeps its own accent; Armory's tools sit beneath it. */
.menu-link .dot[data-accent=blue] { background: #4ea3e0; box-shadow: 0 0 10px #4ea3e0; }
.menu-link .dot[data-accent=orange] { background: #ffad72; box-shadow: 0 0 10px #ffad72; }
.menu-link .dot[data-accent=green] { background: #c0e88a; box-shadow: 0 0 10px #c0e88a; }
.menu-link .dot[data-accent=teal] { background: #91d9ec; box-shadow: 0 0 10px #91d9ec; }
.menu-link .dot[data-accent=violet] { background: #b79cff; box-shadow: 0 0 10px #b79cff; }
.menu-link.menu-child { margin-left: 16px; padding-top: 8px; padding-bottom: 8px; border-left: 1px solid #ffffff1f; border-radius: 0 12px 12px 0; }
.menu-link.menu-child .dot { width: 7px; height: 7px; }
.menu-link.menu-child b { font-size: .88rem; }
@media(max-width:900px) {
  .menu-link.menu-child { border-left-color: #d9e3eb; padding-left: 14px; }
}
.footer-legal { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.footer-legal a { color: #52697b; text-decoration: underline; text-decoration-color: #52697b55; text-underline-offset: 3px; }
.footer-legal a:hover { color: #102f46; }

/* Mobile menu: when closed it must be fully out of the way. The product sub-menu sets
   pointer-events:auto for desktop, which re-enabled taps on the invisible panel and sent
   taps on page content to product pages. Hide it outright, after the fade finishes. */
@media (max-width: 900px) {
  .site-nav { visibility: hidden; transition: opacity .2s, transform .25s var(--ease), visibility 0s linear .25s; }
  .site-nav.is-open { visibility: visible; transition: opacity .2s, transform .25s var(--ease), visibility 0s; }
  .site-nav .nav-item .menu { pointer-events: inherit; }
}