/* ============================================
   Whitecotton Vision — Main Stylesheet
   ============================================ */

/* === SKIP LINK === */
.skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  background: var(--accent);
  color: var(--navy);
  padding: 12px 24px;
  border-radius: 0 0 10px 10px;
  font-size: 14px;
  font-weight: 600;
  z-index: 10000;
  text-decoration: none;
  transition: top .2s;
}
.skip-link:focus {
  top: 0;
}

/* === CSS VARIABLES === */
:root {
  --navy: #0B2154;
  --accent: #C69A4E;
  /* Brand gold is 2.6:1 on white — fine for rules, borders and large
     graphics, below WCAG AA for body text. --accent-ink is the same
     hue darkened to 6.1:1 for small text on light backgrounds. The
     brand palette itself is unchanged. */
  --accent-ink: #6E5420;
  /* --accent-ink is for gold-toned text on LIGHT backgrounds only. On
     navy it inverts and fails badly (2.54:1 on the products index).
     Use --accent-on-navy there. */
  --accent-on-navy: #E8C689;
  --accent-light: #E2BB70;
  --accent-glow: rgba(198, 154, 78, .12);
  --warm-white: #F8F6F3;
  --cream: #F0EDE8;
  --g1: #F5F5F5;
  --g2: #E8E8E8;
  --g4: #5C6270;
  /* --g4 was #9CA3AF, which passed on navy and failed badly on every
     light background. Small text on light now uses the darker value;
     anything sitting on navy uses --on-navy below. */
  --g5: #575D6B;
  --on-navy: #B0B7C3;
  /* --g5 and --g7 complete a scale that already ran g1 g2 g4 g6 g8 and
     skipped these two. Until 5.5 they were used but never defined, so
     every `color: var(--g7)` was invalid and silently inherited --td.
     On light backgrounds that was merely wrong; the same fault on
     --gold put near-black text on the navy hero. See --accent-on-navy. */
  --g6: #4E5462;
  --g7: #474D5C;
  --g8: #374151;
  --td: #1A1A2E;
  --forest: #0B2154;
  --wcv-gold: #C69A4E;
  --pine: #0B2154;
}

/* === RESET === */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'DM Sans', sans-serif;
  color: var(--td);
  background: var(--warm-white);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* === NAVIGATION === */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(11, 29, 58, .06);
  transition: all .3s;
}
nav.scrolled { box-shadow: 0 4px 20px rgba(11, 29, 58, .1); }
/* v33 — REGRESSION GUARD. v31 added intrinsic width/height attributes to 215
   img tags to stop layout shift. For an image sized by CSS on only one axis
   (the nav and footer logos are `height:42px`), the `width` attribute then
   wins and the image renders 800x42 instead of 189x42 — which destroyed the
   header on all 67 pages in v31 and v32. Releasing the other axis here means
   the intrinsic attributes still prevent CLS but can never distort.
   If you add an image sized by CSS height alone, it needs width:auto. */
#nav img, .mn img, footer img { width: auto; }

.ni {
  max-width: 1280px; margin: 0 auto; padding: 0 32px;
  height: 72px; display: flex; align-items: center; justify-content: space-between;
}
.nl { display: flex; align-items: center; gap: 4px; list-style: none; }
.nl a {
  text-decoration: none; color: var(--g6); font-size: 14px; font-weight: 500;
  padding: 8px 14px; border-radius: 8px; transition: all .2s;
}
.nl a:hover { color: var(--navy); background: var(--accent-glow); }
.nl a.active { color: var(--navy); background: var(--accent-glow); font-weight: 600; }
.nc {
  background: var(--accent) !important; color: var(--navy) !important;
  padding: 10px 20px !important; border-radius: 10px !important;
  font-weight: 600 !important; box-shadow: 0 2px 8px rgba(198, 154, 78, .12);
}
.np { color: var(--navy) !important; font-weight: 600 !important; font-size: 13.5px !important; }

/* Nav dropdown */
.nav-dropdown { position: relative; }
.nav-dropdown > a::after {
  content: '';
  display: inline-block;
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid var(--g6);
  margin-left: 6px;
  vertical-align: middle;
  transition: transform .2s;
}
.nav-dropdown:hover > a::after,
.nav-dropdown:focus-within > a::after { transform: rotate(180deg); }
.nav-dropdown-menu {
  position: absolute; top: 100%; left: 0;
  background: white; border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .12);
  padding: 12px 0; min-width: 240px;
  opacity: 0; visibility: hidden;
  transform: translateY(8px);
  /* Scoped from `all` in 5.7. Retested: this was never a real keyboard
     defect (synthetic 0ms tabbing only). Kept because `all` is imprecise. */
  transition: opacity .25s, transform .25s;
  z-index: 1001;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.nav-dropdown-menu a {
  display: block !important; padding: 10px 20px !important;
  font-size: 13.5px !important; color: var(--g6) !important;
  border-radius: 0 !important;
}
.nav-dropdown-menu a:hover {
  background: var(--accent-glow) !important; color: var(--navy) !important;
}

/* === BUTTONS === */
.bp {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--accent); color: var(--navy);
  padding: 15px 30px; border-radius: 12px;
  font-size: 15px; font-weight: 600; text-decoration: none;
  transition: all .25s;
  box-shadow: 0 4px 20px rgba(198, 154, 78, .12);
  border: none; cursor: pointer;
}
.bp:hover { opacity: .9; transform: translateY(-2px); }
.bs {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; color: var(--navy);
  padding: 15px 30px; border-radius: 12px;
  font-size: 15px; font-weight: 500; text-decoration: none;
  transition: all .25s; border: 1.5px solid var(--g2); cursor: pointer;
}
.bs:hover { background: var(--accent-glow); border-color: var(--accent); }

/* === SECTION TYPOGRAPHY === */
.se {
  font-size: 12.5px; text-transform: uppercase; letter-spacing: 2px;
  color: var(--accent-ink); font-weight: 600; margin-bottom: 14px;
}
.st {
  font-family: 'Playfair Display', serif;
  font-size: clamp(26px, 3vw, 38px); font-weight: 600;
  color: var(--navy); line-height: 1.2; margin-bottom: 20px; letter-spacing: -.3px;
}
.sd {
  font-size: 16px; color: var(--g6); line-height: 1.75; margin-bottom: 28px;
}

/* === PRODUCT CARDS === */
.pc {
  background: var(--warm-white); border-radius: 20px; overflow: hidden;
  transition: all .35s; cursor: pointer; border: 1px solid transparent;
}
.pc:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 40px rgba(11, 29, 58, .12);
  border-color: rgba(198, 154, 78, .12);
}
.pc a { text-decoration: none; color: inherit; display: block; }
.pv {
  height: 180px; display: flex; align-items: center; justify-content: center;
}
.pb { padding: 18px 22px 22px; }
.pbr {
  font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px;
  color: var(--accent-ink); font-weight: 600; margin-bottom: 5px;
}
.pb h3 {
  font-family: 'Playfair Display', serif; font-size: 16px; font-weight: 600;
  color: var(--navy); margin-bottom: 7px; line-height: 1.3;
}
.pb p {
  font-size: 12.5px; color: var(--g6); line-height: 1.6; margin-bottom: 12px;
}
.pt { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 12px; }
.ptg {
  font-size: 10px; font-weight: 500; color: var(--accent-ink);
  background: var(--accent-glow); padding: 3px 8px; border-radius: 50px;
}
.pl {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--accent-ink); font-weight: 600; font-size: 13px;
  text-decoration: none; transition: gap .2s;
}
.pl:hover { gap: 10px; }

/* Gold ink inverts on navy: --accent-ink is tuned for light surfaces and
   measures 2.54:1 on the navy Surgenex card. .pb h3 is worse — it is
   var(--navy) on var(--navy), a flat 1.00:1, because a direct rule beats
   the inherited white from .pc-dark .pb. Both are scoped here so the 20
   light product cards are untouched. */
.pc-dark .pb h3 { color: #FFFFFF; }
.pc-dark .pbr, .pc-dark .pl { color: var(--accent-on-navy); }

/* === CATEGORY CAROUSELS === */
.category-showcase-group {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.category-showcase {
  padding-top: 28px;
  border-top: 1px solid var(--g2);
}
.category-showcase:first-child {
  padding-top: 0;
  border-top: none;
}
.category-showcase-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 24px;
  margin-bottom: 24px;
}
.category-showcase-copy {
  max-width: 620px;
}
.category-showcase-kicker {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  color: var(--accent-ink);
  font-weight: 700;
  margin-bottom: 10px;
}
.category-showcase-head h3 {
  font-family: 'Playfair Display', serif;
  font-size: 28px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 10px;
}
.category-showcase-head p {
  font-size: 14.5px;
  color: var(--g6);
  line-height: 1.75;
}
.category-carousel-shell {
  position: relative;
}
.category-carousel {
  overflow: hidden;
}
.category-carousel-track {
  display: flex;
  gap: 20px;
  transition: transform .35s ease;
  will-change: transform;
}
.category-carousel-track .pc {
  flex: 0 0 calc((100% - 40px) / 3);
  min-width: 0;
}
.category-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1px solid rgba(198, 154, 78, .18);
  background: rgba(255, 255, 255, .95);
  color: var(--navy);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 32px rgba(11, 29, 58, .14);
  cursor: pointer;
  z-index: 2;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.category-nav.prev { left: -18px; }
.category-nav.next { right: -18px; }
.category-nav:hover {
  transform: translateY(-50%) scale(1.04);
  border-color: rgba(198, 154, 78, .32);
  box-shadow: 0 16px 36px rgba(11, 29, 58, .18);
}
.category-nav[hidden] {
  display: none;
}

/* === FOOTER === */
.fc a {
  display: block; font-size: 13.5px; color: var(--g6);
  text-decoration: none; padding: 3px 0; transition: color .2s; line-height: 1.5;
}
.fc a:hover { color: var(--accent-ink); }
/* The navy footer needs light text; the warm-white one needs dark. */
.footer-navy .fc a { color: var(--on-navy); }
.footer-navy .fc a:hover { color: var(--accent); }
/* Static territory line. Was an <a> with no href on 42 pages: styled
   like a link, announced as a link, and not focusable. Same look,
   correct semantics — and it must track the two .fc a colour rules
   above, which is why it sits beside them. */
.fc .fc-note {
  display: block; font-size: 13.5px; color: var(--g6);
  padding: 3px 0; line-height: 1.5;
}
.footer-navy .fc .fc-note { color: var(--on-navy); }

/* Form fields (contact page) */
.fg { margin-bottom: 14px; }
.fg label {
  display: block; font-size: 13px; font-weight: 600;
  color: var(--g8); margin-bottom: 4px;
}
.fg input, .fg select, .fg textarea {
  width: 100%; padding: 10px 13px; border: 1.5px solid var(--g2);
  border-radius: 10px; font-size: 14px; font-family: 'DM Sans', sans-serif;
  color: var(--td); outline: none; background: white; transition: border-color .2s;
}
.fg input:focus, .fg select:focus, .fg textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.fg textarea { resize: vertical; min-height: 60px; }
.fr { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* === ANIMATIONS === */
@keyframes fu {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes pu {
  0%, 100% { opacity: 1; }
  50% { opacity: .4; }
}
.rv {
  opacity: 0; transform: translateY(20px);
  transition: all .6s ease-out;
}
.rv.visible { opacity: 1; transform: translateY(0); }

/* === HERO SECTION === */
.hero-scenic {
  min-height: 100vh; position: relative; overflow: hidden; display: flex; align-items: center;
}
.hero-scenic-bg {
  position: absolute; inset: 0;
  background: url('../images/hero-bg.webp') center/cover no-repeat;
}
.hero-scenic-bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to right,
    rgba(11, 33, 84, .88) 0%,
    rgba(11, 33, 84, .82) 30%,
    rgba(11, 33, 84, .7) 55%,
    rgba(11, 33, 84, .6) 100%);
}
.hero-content {
  max-width: 1280px; margin: 0 auto; width: 100%;
  padding: 120px 32px 80px; position: relative; z-index: 2;
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center;
}
.hero-text { animation: fu .8s ease-out; }
.hero-photo-wrapper {
  animation: fu .8s ease-out .15s both;
  display: flex; flex-direction: column; align-items: center;
}
.hero-photo {
  width: 420px; height: 520px; border-radius: 24px;
  object-fit: cover; object-position: center top;
  box-shadow: 0 32px 64px rgba(0, 0, 0, .3), 0 0 0 4px rgba(198, 154, 78, .25);
  position: relative;
}
.hero-photo-frame { position: relative; display: inline-block; }
.hero-photo-frame::before {
  content: ''; position: absolute;
  top: -8px; left: -8px; right: -8px; bottom: -8px;
  border: 2px solid rgba(198, 154, 78, .2); border-radius: 28px; z-index: -1;
}
.hero-photo-frame::after {
  content: ''; position: absolute; bottom: -16px; right: -16px;
  width: 120px; height: 120px;
  background: var(--accent); opacity: .1; border-radius: 20px; z-index: -1;
}

/* === ABOUT SCENIC SECTION === */
.about-scenic { position: relative; overflow: hidden; }
.about-scenic-bg {
  position: absolute; inset: 0;
  background: url('../images/about-bg.webp') center/cover no-repeat;
}
.about-scenic-bg::after {
  content: ''; position: absolute; inset: 0;
  background: rgba(11, 33, 84, .88);
}

/* === TERRITORY SCENIC === */
.terr-scenic { position: relative; overflow: hidden; }
.terr-scenic-bg {
  position: absolute; inset: 0;
  background: url('../images/territory-bg.webp') center/cover no-repeat;
}
.terr-scenic-bg::after {
  content: ''; position: absolute; inset: 0;
  background: rgba(11, 33, 84, .84);
}

/* === LOCAL BADGE === */
.local-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(11, 33, 84, .68);
  border: 1px solid rgba(198, 154, 78, .38);
  border-radius: 50px; padding: 8px 20px;
  font-size: 12px; font-weight: 600; color: #E2BB70;
  letter-spacing: .8px; text-transform: uppercase; margin-bottom: 24px;
}
.local-badge .dot {
  width: 7px; height: 7px; background: #E2BB70;
  border-radius: 50%; animation: pu 2s infinite;
}

/* === TRUST CARDS === */
.trust-card {
  background: rgba(255, 255, 255, .06); backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, .1); border-radius: 16px;
  padding: 20px 24px; display: flex; align-items: center; gap: 14px; margin-top: 12px;
}
.trust-card .trust-icon {
  width: 44px; height: 44px; background: rgba(198, 154, 78, .15);
  border-radius: 12px; display: flex; align-items: center; justify-content: center;
  font-size: 20px; flex-shrink: 0;
}
.trust-card h3, .trust-card h4 {
  font-size: 14px; font-weight: 600; color: white; margin-bottom: 2px;
  font-family: 'DM Sans', sans-serif;
}
.trust-card p { font-size: 12.5px; color: rgba(255, 255, 255, .82); line-height: 1.4; }

/* === MOBILE NAV / HAMBURGER === */
.hb {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: none; cursor: pointer;
  padding: 8px; z-index: 1001; -webkit-tap-highlight-color: transparent;
}
.hb span {
  display: block; width: 22px; height: 2px; background: var(--navy);
  border-radius: 2px; transition: all .3s;
}
.mn {
  position: fixed; top: 64px; left: 0; right: 0;
  background: white; padding: 0 24px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, .1);
  z-index: 999; border-bottom: 1px solid var(--g2);
  max-height: 0; overflow: hidden; transition: max-height .3s ease, padding .3s ease;
}
.mn.active { max-height: 400px; padding: 20px 24px; }
.mn a {
  display: block; text-decoration: none; color: var(--g8);
  font-size: 16px; font-weight: 500; padding: 12px 0;
  border-bottom: 1px solid var(--g1); transition: color .2s;
}
.mn a:last-child { border-bottom: none; }
.mn a:hover { color: var(--accent-ink); }
.mn .mc-cta {
  display: block; background: var(--accent); color: var(--navy);
  text-align: center; padding: 14px; border-radius: 10px;
  font-weight: 600; margin-top: 12px; border-bottom: none;
}
@media (max-width: 768px) { .hb { display: flex; } }

/* === BREADCRUMBS === */
.breadcrumbs {
  padding: 88px 32px 0;
  max-width: 1280px; margin: 0 auto;
}
.breadcrumbs a {
  color: var(--g6); text-decoration: none; font-size: 13px; font-weight: 500;
  transition: color .2s;
}
.breadcrumbs a:hover { color: var(--accent-ink); }
.breadcrumbs span { color: var(--g4); font-size: 13px; margin: 0 8px; }
.breadcrumbs .current { color: var(--navy); font-weight: 600; font-size: 13px; }

/* === PRODUCT PAGE LAYOUT === */
.product-hero {
  padding: 32px; max-width: 1280px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center;
}
.product-hero-image {
  background: #f8f9fa; border-radius: 20px; padding: 32px;
  display: flex; align-items: center; justify-content: center; min-height: 360px;
}
.product-hero-image img {
  max-width: 100%; max-height: 340px; object-fit: contain;
}
.product-hero-info h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(28px, 3vw, 40px); font-weight: 600;
  color: var(--navy); line-height: 1.2; margin-bottom: 16px;
}
.product-hero-info .brand-badge {
  display: inline-block; font-size: 11px; text-transform: uppercase;
  letter-spacing: 1.5px; color: var(--accent-ink); font-weight: 600; margin-bottom: 12px;
}
.product-hero-info .brand-badge-logo {
  margin-bottom: 14px;
  line-height: 0;
}
.product-hero-info .brand-badge-logo img {
  height: 26px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
}

/* Product-page FAQ accordions */
.faq-accordion {
  border: 1px solid var(--g2);
  border-radius: 14px;
  background: white;
  overflow: hidden;
  margin-bottom: 10px;
}
.faq-accordion > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--navy);
}
.faq-accordion > summary::-webkit-details-marker { display: none; }
.faq-accordion > summary:hover { background: var(--cream); }
.faq-accordion > summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.faq-accordion-icon {
  flex: 0 0 auto;
  width: 10px; height: 10px;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(45deg);
  transition: transform .2s;
}
.faq-accordion[open] .faq-accordion-icon { transform: rotate(-135deg); }
.faq-accordion-body {
  padding: 0 22px 20px;
  border-top: 1px solid var(--g2);
}
.faq-accordion-body p {
  margin-top: 16px;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--g8);
}

.product-hero-info .description {
  font-size: 16px; color: var(--g6); line-height: 1.75; margin-bottom: 24px;
}

/* Features list */
.features-list { list-style: none; margin-bottom: 28px; }
.features-list li {
  padding: 10px 0; border-bottom: 1px solid var(--g2);
  font-size: 14.5px; color: var(--g8); display: flex; align-items: center; gap: 10px;
}
.features-list li::before {
  content: ''; display: block; width: 6px; height: 6px;
  background: var(--accent); border-radius: 50%; flex-shrink: 0;
}

/* === CONTACT FORM PAGE === */
.contact-grid {
  max-width: 1280px; margin: 0 auto; padding: 32px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start;
}
.contact-info h2 {
  font-family: 'Playfair Display', serif;
  font-size: 32px; font-weight: 600; color: var(--navy);
  margin-bottom: 16px;
}
.contact-info p {
  font-size: 16px; color: var(--g6); line-height: 1.75; margin-bottom: 28px;
}
.contact-detail {
  display: flex; align-items: center; gap: 14px; padding: 14px 0;
  border-bottom: 1px solid var(--g2);
}
.contact-detail svg { flex-shrink: 0; }
.contact-detail a {
  color: var(--navy); text-decoration: none; font-weight: 500; font-size: 15px;
}
.contact-detail a:hover { color: var(--accent-ink); }
.contact-detail .cd-note {
  color: var(--navy); font-weight: 500; font-size: 15px;
}
.contact-form-card {
  background: white; border-radius: 20px; padding: 40px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, .06); border: 1px solid var(--g2);
}
.contact-form-card h3, .contact-form-card h2 {
  font-family: 'Playfair Display', serif; font-size: 22px;
  color: var(--navy); margin-bottom: 6px;
}
.contact-form-card > p {
  color: var(--g6); font-size: 14px; margin-bottom: 24px;
}

/* === RELATED PRODUCTS === */
.related-products {
  padding: 80px 32px; background: var(--g1);
}
.related-products h2 {
  font-family: 'Playfair Display', serif;
  font-size: 28px; font-weight: 600; color: var(--navy);
  text-align: center; margin-bottom: 40px;
}
.related-grid {
  max-width: 1280px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}

/* === PRODUCT INSIGHTS === */
.practice-fit-section {
  padding: 80px 32px;
  background: var(--warm-white);
}
.practice-fit-wrap {
  max-width: 1120px;
  margin: 0 auto;
}
.practice-fit-intro {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 40px;
}
.practice-fit-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.practice-fit-card {
  background: white;
  border: 1px solid var(--g2);
  border-radius: 18px;
  padding: 28px 24px;
  box-shadow: 0 8px 24px rgba(11, 29, 58, .05);
}
.practice-fit-card-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.8px;
  color: var(--accent-ink);
  font-weight: 700;
  margin-bottom: 14px;
}
.practice-fit-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: 21px;
  line-height: 1.25;
  color: var(--navy);
  margin-bottom: 12px;
}
.practice-fit-card p {
  color: var(--g6);
  font-size: 14.5px;
  line-height: 1.75;
}
/* === ADVANTAGE SECTION (product pages) === */
.advantage-section {
  padding: 80px 32px; background: linear-gradient(135deg, #0B2154, #132C6B);
  color: white;
}
.advantage-grid {
  max-width: 1280px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
  text-align: center;
}
.advantage-card {
  padding: 32px;
}
.advantage-card h4 {
  font-family: 'Playfair Display', serif; font-size: 17px;
  color: white; margin: 16px 0 8px;
}
.advantage-card p {
  font-size: 13px; color: rgba(255, 255, 255, .78); line-height: 1.6;
}

/* === SPECS ACCORDION === */
.specs-accordion-section {
  padding: 0 32px 80px;
  background: white;
}
.specs-accordion-wrap {
  max-width: 960px;
  margin: 0 auto;
}
.specs-accordion {
  border: 1px solid var(--g2);
  border-radius: 18px;
  background: var(--warm-white);
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(11, 29, 58, .04);
}
.specs-accordion summary {
  list-style: none;
  cursor: pointer;
  padding: 26px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.specs-accordion summary::-webkit-details-marker {
  display: none;
}
.specs-accordion-summary-copy {
  flex: 1;
}
.specs-accordion-summary-copy .se {
  margin-bottom: 8px;
}
.specs-accordion-summary-copy h2 {
  margin-bottom: 0;
}
.specs-accordion-icon {
  position: relative;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(198, 154, 78, .22);
  background: white;
  flex-shrink: 0;
}
.specs-accordion-icon::before,
.specs-accordion-icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 2px;
  background: var(--accent);
  border-radius: 999px;
  transform: translate(-50%, -50%);
  transition: transform .2s ease, opacity .2s ease;
}
.specs-accordion-icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}
.specs-accordion[open] .specs-accordion-icon::after {
  opacity: 0;
}
.specs-accordion-body {
  padding: 0 28px 28px;
}
.specs-accordion-body .specs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--g2);
  border-radius: 12px;
  overflow: hidden;
  background: white;
}
.specs-accordion-body .specs-grid > div {
  padding: 16px 20px;
  font-size: 14px;
}
.specs-accordion-body .specs-grid > div:nth-child(odd) {
  background: var(--cream);
  font-weight: 600;
  color: var(--navy);
}
.specs-accordion-body .specs-grid > div:nth-child(even) {
  color: var(--g8);
}
.specs-accordion-body .specs-grid > div:not(:nth-last-child(-n+2)) {
  border-bottom: 1px solid var(--g2);
}

/* === TESTIMONIAL === */
.testimonial-quote {
  font-family: 'Playfair Display', serif;
  font-size: clamp(20px, 2.5vw, 28px);
  color: var(--navy); line-height: 1.5;
  font-weight: 400; font-style: italic; margin-bottom: 24px;
}

/* ============================================
   RESPONSIVE — TABLET (max-width: 1024px)
   ============================================ */
@media (max-width: 1024px) {
  .hero-content {
    grid-template-columns: 1fr !important; gap: 32px !important;
    text-align: center; padding: 120px 24px 60px !important;
  }
  .hero-text { order: 2; }
  .hero-photo-wrapper { order: 1; align-items: center !important; }
  .hero-photo { width: 300px; height: 380px; }
  .hero-photo-frame::after { display: none; }
  .hero-text .local-badge { justify-content: center; }
  .hero-text h1 { margin-left: auto; margin-right: auto; }
  .hero-text p { margin-left: auto; margin-right: auto; }
  .hero-text > div:last-child { justify-content: center; }
  .hero-text > div[style*="display:flex;gap:14px"] { justify-content: center; }
  .ai { grid-template-columns: 1fr !important; gap: 40px !important; }
  .pg { grid-template-columns: repeat(2, 1fr) !important; }
  .pf { grid-column: span 2 !important; grid-template-columns: 1fr !important; }
  .si { grid-template-columns: repeat(2, 1fr) !important; }
  .fgr { grid-template-columns: repeat(2, 1fr) !important; }
  .lt-grid { grid-template-columns: 1fr 1fr 1fr !important; }
  .cat-divider { grid-column: span 2 !important; }
  .category-carousel-track .pc { flex-basis: calc((100% - 20px) / 2); }
  .product-hero { grid-template-columns: 1fr !important; gap: 32px !important; }
  .contact-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
  .related-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .advantage-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
  .practice-fit-grid { grid-template-columns: 1fr !important; }
  .specs-accordion-body .specs-grid { grid-template-columns: 1fr !important; }
  .specs-accordion-body .specs-grid > div:not(:last-child) { border-bottom: 1px solid var(--g2); }
  .specs-accordion-body .specs-grid > div:nth-child(odd) { border-bottom: none; }
}

/* ============================================
   RESPONSIVE — MOBILE (max-width: 768px)
   ============================================ */
@media (max-width: 768px) {
  /* Nav */
  .nl { display: none; }
  .ni { padding: 0 16px; height: 64px; }

  /* Hero */
  .hero-scenic { min-height: auto !important; }
  .hero-content { padding: 100px 20px 48px !important; gap: 24px !important; }
  .hero-photo { width: 220px; height: 280px; }
  .hero-photo-frame::before { top: -5px; left: -5px; right: -5px; bottom: -5px; }
  .hero-text h1 { font-size: 28px !important; }
  .hero-text p { font-size: 15px !important; }

  /* Local trust cards */
  .lt-grid { grid-template-columns: 1fr !important; gap: 16px !important; }

  /* Products */
  .pg { grid-template-columns: 1fr !important; }
  .pf { grid-column: span 1 !important; grid-template-columns: 1fr !important; }
  .cat-divider { grid-column: span 1 !important; }
  .category-showcase-head { margin-bottom: 18px; }
  .category-showcase-head h3 { font-size: 24px; }
  .category-carousel-shell { padding-bottom: 64px; }
  .category-carousel-track .pc { flex-basis: 100%; }
  .category-nav {
    top: auto;
    bottom: 0;
    transform: none;
  }
  .category-nav.prev { left: calc(50% - 54px); }
  .category-nav.next { right: calc(50% - 54px); }
  .category-nav:hover { transform: scale(1.04); }

  /* Stats bar */
  .si { grid-template-columns: 1fr 1fr !important; gap: 20px !important; }

  /* About section */
  .ai { gap: 32px !important; }

  /* Territory */
  .terr-map { max-width: 320px !important; }

  /* Testimonial */
  .testimonial-quote { font-size: 20px !important; }

  /* Footer */
  .fgr { grid-template-columns: 1fr !important; gap: 28px !important; }
  .fb { flex-direction: column; gap: 6px; text-align: center; }
/* WCAG 2.2 target size: the bottom-bar links rendered 16px tall. */
.fb a { display: inline-block; padding: 4px 2px; min-height: 24px; }

  .fr { grid-template-columns: 1fr; }

  /* Product page */
  .product-hero { grid-template-columns: 1fr !important; padding: 20px !important; }
  .breadcrumbs { padding: 80px 20px 0; }
  .related-grid { grid-template-columns: 1fr !important; }
  .contact-grid { padding: 20px !important; }
  .practice-fit-section,
  .specs-accordion-section,
  .related-products { padding-left: 20px; padding-right: 20px; }
  .specs-accordion summary,
  .specs-accordion-body { padding-left: 20px; padding-right: 20px; }

  /* General spacing reduction */
  section { padding-left: 20px !important; padding-right: 20px !important; }
}

/* ============================================
   RESPONSIVE — SMALL MOBILE (max-width: 480px)
   ============================================ */
@media (max-width: 480px) {
  .hero-content { padding: 90px 16px 40px !important; }
  .hero-photo { width: 180px; height: 230px; }
  .hero-text h1 { font-size: 24px !important; }
  .si { grid-template-columns: 1fr !important; }
  .terr-map { max-width: 260px !important; }
}

/* Touch-friendly tap targets */
@media (max-width: 768px) {
  .bp, .bs, .nc, .pl { min-height: 44px; }
  .mn a { min-height: 48px; display: flex; align-items: center; }
  .pc { margin-bottom: 4px; }
}

/* === CATALOG FILTER === */
.catalog-filter {
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px 32px 0;
}
.catalog-filter-inner {
  background: white;
  border: 1px solid var(--g2);
  border-radius: 16px;
  padding: 20px 24px;
  box-shadow: 0 4px 16px rgba(11, 29, 58, .04);
}
.catalog-search-wrap {
  position: relative;
  margin-bottom: 16px;
}
.catalog-search {
  width: 100%;
  padding: 12px 40px 12px 42px;
  border: 1.5px solid var(--g2);
  border-radius: 10px;
  font-size: 15px;
  font-family: 'DM Sans', sans-serif;
  color: var(--td);
  outline: none;
  background: var(--warm-white);
  transition: border-color .2s;
  box-sizing: border-box;
}
.catalog-search:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.catalog-search-clear {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--g2);
  border: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 14px;
  color: var(--g6);
  display: flex;
  align-items: center;
  justify-content: center;
}
.catalog-search-clear:hover {
  background: var(--g4);
  color: white;
}
.catalog-filters {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}
.catalog-filter-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.catalog-filter-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--g6);
  white-space: nowrap;
}
.catalog-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.catalog-pill {
  padding: 6px 14px;
  border-radius: 50px;
  border: 1.5px solid var(--g2);
  background: white;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--g6);
  cursor: pointer;
  transition: all .2s;
  font-family: 'DM Sans', sans-serif;
}
.catalog-pill:hover {
  border-color: var(--accent-ink);
  color: var(--accent);
}
.catalog-pill.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--navy);
  font-weight: 600;
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.catalog-pill:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
}
.catalog-results-count {
  font-size: 13px;
  color: var(--g4);
  margin-top: 12px;
}
.catalog-results-count:empty {
  display: none;
}

/* Grid mode when filtering is active */
.pg.filter-active .cat-divider {
  display: none;
}
.pg.filter-active .pc[style*="display: none"],
.pg.filter-active .pf[style*="display: none"] {
  display: none !important;
}

/* No results message */
.catalog-no-results {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 20px;
  color: var(--g6);
  font-size: 16px;
}
.catalog-no-results p {
  max-width: 460px;
  margin: 0 auto 20px;
  line-height: 1.6;
}
.catalog-no-results a { color: var(--accent-ink); }
.catalog-clear-filters,
.catalog-reset {
  padding: 8px 18px;
  border-radius: 50px;
  border: 1.5px solid var(--accent);
  background: white;
  color: var(--accent-ink);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  transition: all .2s;
}
.catalog-clear-filters:hover,
.catalog-reset:hover {
  background: var(--accent);
  color: var(--navy);
}
.catalog-reset[hidden] { display: none; }
.catalog-results-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.catalog-results-row .catalog-results-count { margin-top: 0; }

@media (max-width: 768px) {
  .catalog-filter { padding: 16px 20px 0; }
  .catalog-filter-inner { padding: 16px; }
  .catalog-filters { flex-direction: column; gap: 12px; }
  .catalog-filter-group { flex-direction: column; align-items: flex-start; }
  .catalog-pill { padding: 8px 15px; font-size: 13px; }
}

/* Visually hidden but available to screen readers */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* === PARTNER LOGO STRIP ===
   Every logo gets an identical box and is fitted inside it, so wide/shallow
   wordmarks (Visionix, Surgenex) read at the same visual weight as square marks
   (iCare) without any of them being distorted or hand-sized. */
.partner-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px 32px;
  flex-wrap: wrap;
}
.partner-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 140px;
  height: 44px;
}
.partner-logos img {
  max-width: 100%;
  max-height: 32px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: .62;
  transition: filter .3s, opacity .3s;
}
.partner-logos img:hover,
.partner-logos img:focus {
  filter: grayscale(0%);
  opacity: 1;
}
@media (max-width: 600px) {
  .partner-logos { gap: 16px 20px; }
  .partner-logo { width: 108px; height: 38px; }
  .partner-logos img { max-height: 26px; }
}

/* === SURGENEX DARK CARD === */
.pc-dark {
  background: #0B2154;
  color: white;
}
.pc-dark .pb { color: white; }
.pc-dark p { color: rgba(255,255,255,.75); }
.pc-dark .ptg { background: rgba(255,255,255,.12); color: rgba(255,255,255,.85); }

/* === STICKY PRICING BAR (Product Pages) === */
.sticky-pricing-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--navy);
  padding: 14px 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  z-index: 900;
  transform: translateY(100%);
  transition: transform .3s ease;
  box-shadow: 0 -4px 20px rgba(0,0,0,.15);
}
.sticky-pricing-bar.visible {
  transform: translateY(0);
}
.sticky-pricing-bar .spb-label {
  font-size: 15px;
  font-weight: 600;
  color: white;
}
.sticky-pricing-bar .bp {
  padding: 10px 24px;
  font-size: 14px;
}

/* === BEST FOR BADGE (Resource Pages) === */
.best-for-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--accent-glow);
  color: var(--accent-ink);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 8px;
}
.best-for-badge svg {
  width: 14px;
  height: 14px;
}

/* ============================================
   REDUCED MOTION
   The site has 28 transition/animation rules plus scroll-reveal and a sliding
   carousel. Honour the OS setting rather than animating regardless.
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .rv { opacity: 1 !important; transform: none !important; }
  .category-carousel-track { transition: none !important; }
}

/* Partner strip — typographic wordmarks rather than vendor logo files.
   Replace with official artwork once each manufacturer supplies a media kit. */
.partner-wordmark {
  font-family: 'Playfair Display', serif; font-size: 17px; font-weight: 600;
  color: var(--navy); opacity: .72; letter-spacing: .3px; white-space: nowrap;
}
.partner-wordmark:hover { opacity: 1; }


/* === GLOBAL FOCUS VISIBILITY (Phase 5) === */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}
/* Gold reads clearly on navy and on the light backgrounds; the white ring
   keeps it visible where the control is itself gold. */
.btn:focus-visible, .footer-navy a:focus-visible {
  outline-color: #FFFFFF;
  box-shadow: 0 0 0 6px rgba(198, 154, 78, .55);
}

/* === PHASE 5.4 ADDITIONS === */

/* Fit grid now carries a fourth card ("Consider Instead"). auto-fit keeps
   three-card pages on one row and wraps four cards to a 2x2. */
.practice-fit-grid {
  grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
}
.practice-fit-card-alt {
  background: var(--cream);
  border-color: var(--accent);
}
.practice-fit-card-alt .practice-fit-card-label { color: var(--navy); }
.practice-fit-card-alt a { color: var(--accent-ink); font-weight: 600; }

/* Spec-table review date */
.spec-reviewed {
  font-size: 13px;
  line-height: 1.7;
  color: var(--g6);
  margin-top: 14px;
}

/* Public evidence / sources module */
.evidence { padding: 64px 32px; background: var(--cream); }
.evidence-wrap { max-width: 860px; margin: 0 auto; }
.evidence-h {
  font-family: 'Playfair Display', serif;
  font-size: 24px; color: var(--navy); margin-bottom: 12px;
}
.evidence-date, .evidence-note {
  font-size: 14px; line-height: 1.8; color: var(--g6);
}
.evidence-note { margin-top: 18px; }
.evidence-list { margin: 18px 0 0; padding-left: 20px; }
.evidence-list li { font-size: 14.5px; line-height: 1.9; color: var(--g7); }
.evidence-list a { color: var(--accent-ink); font-weight: 600; }
.evidence-pub { color: var(--g6); font-size: 13px; }

/* Resources hub */
.hub-hero { padding: 96px 32px 72px; background: linear-gradient(135deg,#0B2154,#132C6B); }
.hub-hero-wrap { max-width: 860px; margin: 0 auto; }
.hub-h1 {
  font-family: 'Playfair Display', serif; font-weight: 600;
  font-size: clamp(28px, 4vw, 44px); line-height: 1.15;
  color: white; margin: 14px 0 18px;
}
.hub-sub { font-size: 16.5px; line-height: 1.8; color: rgba(255,255,255,.78); }
.hub-body { max-width: 1120px; margin: 0 auto; padding: 72px 32px 24px; }
.hub-group { margin-bottom: 64px; }
.hub-group-h {
  font-family: 'Playfair Display', serif; font-size: 26px;
  color: var(--navy); margin-bottom: 8px;
}
.hub-group-blurb { font-size: 15px; color: var(--g6); line-height: 1.75; margin-bottom: 26px; }
.hub-grid {
  list-style: none; padding: 0; margin: 0; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px;
}
.hub-card-link {
  display: block; height: 100%; background: white; border: 1px solid var(--g2);
  border-radius: 16px; padding: 26px 24px; text-decoration: none;
  box-shadow: 0 8px 24px rgba(11,29,58,.05);
  transition: border-color .18s ease, transform .18s ease;
}
.hub-card-link:hover, .hub-card-link:focus-visible {
  border-color: var(--accent); transform: translateY(-2px);
}
.hub-card-title {
  display: block; font-family: 'Playfair Display', serif; font-size: 19px;
  color: var(--navy); margin-bottom: 10px; line-height: 1.25;
}
.hub-card-desc { display: block; font-size: 14.5px; line-height: 1.75; color: var(--g6); }
.hub-cta {
  background: var(--warm-white); border: 1px solid var(--g2); border-radius: 20px;
  padding: 44px 32px; text-align: center; margin-bottom: 72px;
}
.hub-cta-h { font-family: 'Playfair Display', serif; font-size: 26px; color: var(--navy); }
.hub-cta-p {
  font-size: 15.5px; line-height: 1.8; color: var(--g6);
  max-width: 620px; margin: 14px auto 26px;
}
.hub-cta-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* Mobile sticky contact bar. Forms are live (D1 closed 5.5); this stays
   because a phone call is a better path than a form for much of this audience.
   Desktop hides it. The product-page pricing bar is hidden at the SAME
   breakpoint: both are fixed to bottom:0 at z-index 900, and Phase 5.7 found
   them painted over each other on four pages at 390px. They must never
   coexist — if the breakpoint below changes, change both. */
.sticky-cta { display: none; }
@media (max-width: 860px) {
  .sticky-pricing-bar { display: none; }
  .sticky-cta {
    display: flex; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0;
    z-index: 900; padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255,255,255,.97);
    border-top: 1px solid var(--g2);
    box-shadow: 0 -6px 20px rgba(11,29,58,.10);
  }
  .sticky-cta-btn {
    flex: 1; text-align: center; padding: 13px 10px; border-radius: 10px;
    font-size: 14.5px; font-weight: 600; text-decoration: none;
  }
  .sticky-cta-call { background: var(--navy); color: white; }
  .sticky-cta-mail {
    background: white; color: var(--navy); border: 1.5px solid var(--navy);
  }
  body { padding-bottom: 72px; }
}