/* Reset and Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: var(--size-font);
  /* No overflow on html or body — Safari clips both axes with overflow-x:clip,
     and overflow-x:hidden creates a scroll container that blocks viewport-fit=cover.
     Apple.com uses no overflow on html/body. */
}

body {
  font-family: 'Instrument Sans', Arial, sans-serif;
  overflow-wrap: break-word;
  word-break: break-word;
  /* White fallback — iOS 26 Liquid Glass looks clean on white, but shows grey
     tint on colored backgrounds like #E4F4F8. Each page's inline style sets
     the actual initial bg (dark pages use their hero color, light pages use
     white). The --color-bg variable is still used by section backgrounds. */
  background-color: #FFFFFF;
}

/* Global image overflow protection */
img {
  max-width: 100%;
  height: auto;
}

/* Global table overflow protection */
table {
  max-width: 100%;
}

/* ==================== PAGE TRANSITIONS ==================== */
.page-transition {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* iOS 26 Safari Liquid Glass fix: background-color MUST be transparent in the
     default (hidden) state. Safari 26 samples position:fixed elements at initial
     render for toolbar tinting. Even with visibility:hidden, Safari intermittently
     races the sampling before visibility is applied — if it reads an opaque bg
     (#E4F4F8), the Liquid Glass produces a grey tint on the status bar/toolbar.
     Setting transparent here ensures Safari skips this element even in a race.
     The actual bg color is only applied in the .is--active state. */
  background-color: transparent;
  z-index: var(--z-header);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1),
              visibility 0s linear 0.5s,
              background-color 0s linear 0.5s;
}

.page-transition.is--active {
  background-color: var(--color-bg);
  visibility: visible;
  opacity: 1;
  /* Override the visibility/bg delay — show immediately when activating */
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1),
              visibility 0s linear 0s,
              background-color 0s linear 0s;
}

/* ==================== SKIP TO CONTENT LINK ==================== */
.skip-to-content {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.skip-to-content:focus {
  position: fixed;
  left: 0;
  top: 0;
  width: auto;
  height: auto;
  padding: 1em 1.5em;
  background-color: var(--color-text);
  color: var(--color-white);
  font-size: 1em;
  font-weight: 500;
  z-index: var(--z-top);
  text-decoration: none;
  border: 2px solid var(--color-white);
  overflow: visible;
}

/* ==================== NAVIGATION STYLES ==================== */
:root{
  --size-unit: 16;
  --size-container-ideal: 1440;
  --size-container-min: 1025px;
  --size-container-max: 1920px;
  --size-container: clamp(var(--size-container-min), 100vw, var(--size-container-max));
  --size-font: calc(var(--size-container) / (var(--size-container-ideal) / var(--size-unit)));
  --duration-fast: 0.2s;
  --duration-normal: 0.450s;
  --color-dark: #2F4156;
  /* Revert to black: change #2F4156 back to #000000 (--color-text)
     and #2F4156 back to #2b1d15 (--color-dark) */
  --color-text: #2F4156;
  --color-bg: #E4F4F8;
  --color-white: #FFFFFF;
  --color-border: #d4d4d4;
  --color-shadow: rgba(0, 0, 0, 0.2);
  --color-shadow-light: rgba(0, 0, 0, 0.15);
  --color-about-dark: #0C3846;
  --gutter-left: 7em;
  --gutter-right: 7.5em;
  --text-body: 0.9375em;
  --text-small: 0.875em;
  --text-xs: 0.75em;
  --transform-reset: scaleX(0) rotate(0.001deg);
  --transition-underline: transform 0.735s cubic-bezier(0.625, 0.05, 0, 1);
  --radius-card: 1em;
  --border-thin: 0.0625em;

  /* Z-index stacking order — global layers */
  --z-base: 0;
  --z-local-1: 1;
  --z-local-2: 2;
  --z-local-3: 3;
  --z-above-content: 10;
  --z-above-content-high: 20;
  --z-header: 98;
  --z-nav-overlay: 99;
  --z-cart-overlay: 998;
  --z-cart-panel: 999;
  --z-top: 10000;
}

@media screen and (max-width: 1024px) {
  :root {
    --size-container-ideal: 1200;
    --size-container-min: 768px;
    --size-container-max: 1024px;
  }
}

@media screen and (max-width: 767px) {
  :root {
    --size-container-ideal: 700;
    --size-container-min: 375px;
    --size-container-max: 767px;
    --gutter-left: 5em;
    --gutter-right: 5.06em;
  }
}

@media screen and (max-width: 480px) {
  :root {
    --size-container-ideal: 600;
    --size-container-min: 320px;
    --size-container-max: 480px;
    --gutter-left: 4.5em;
    --gutter-right: 4.56em;
  }
}

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

/* Keyboard focus indicator — visible on Tab navigation, hidden on click */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid var(--color-dark, #2F4156);
  outline-offset: 2px;
}

/* Suppress default focus ring for mouse/touch/programmatic focus —
   :focus-visible above covers keyboard users */
:focus:not(:focus-visible) {
  outline: none;
}

/* Dark background sections — white outline for contrast
   Theme naming: "light" = light/white text = dark background */
[data-theme-section="light"] a:focus-visible,
[data-theme-section="light"] button:focus-visible,
[data-theme-section="light"] input:focus-visible,
[data-theme-section="light"] select:focus-visible,
[data-theme-section="light"] textarea:focus-visible,
[data-theme-section="light"] [tabindex]:focus-visible,
[data-theme-section="light"] [role="button"]:focus-visible,
/* Nav bar elements — theme switches dynamically on scroll */
[data-theme-nav="light"]:focus-visible,
[data-theme-nav="light"] a:focus-visible,
[data-theme-nav="light"] button:focus-visible {
  outline-color: var(--color-white, #F1F0EE);
}

/* Nav open — overlay is light background, reset to black outline.
   Hamburger keeps data-theme-nav="light" when menu opens but the
   overlay behind it is #E4F4F8 so the outline must be dark. */
[data-navigation-status="active"] [data-theme-nav]:focus-visible,
[data-navigation-status="active"] [data-theme-nav] a:focus-visible,
[data-navigation-status="active"] [data-theme-nav] button:focus-visible {
  outline-color: var(--color-dark, #2F4156);
}


/* ==================== HERO SECTION STYLES ==================== */

/* display: contents removes header/main from the layout tree so their
   children participate directly in the page-level stacking context,
   enabling CSS Grid/scroll-driven layouts without extra wrappers. */
header {
  display: contents;
}

main {
  display: contents;
}

.hero-wrap {
  /* Match the WebGL canvas dominant color so Safari 26 uses this
     for toolbar tinting instead of the light body background. */
  background-color: #05275E;
}

.hero-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  height: 100dvh;
  /* Extend hero INTO the safe area so the WebGL canvas paints behind the
     iOS status bar on initial load. Without this, 100dvh equals the visible
     viewport (excluding the status bar inset), so the canvas stops at the
     status bar boundary. After scroll, dvh updates to include the safe area
     and the canvas extends — this calc ensures it works from first paint. */
  height: calc(100dvh + env(safe-area-inset-top, 0px));
  padding-left: 5.36em;
  padding-right: 5.74em;
  /* Push the hero up behind the status bar by the safe-area-inset-top amount.
     This keeps the hero visually in the same position while the extra height
     extends behind the status bar. */
  margin-top: calc(-1 * env(safe-area-inset-top, 0px));
  /* Pad the top so the centered content doesn't shift behind the status bar */
  padding-top: env(safe-area-inset-top, 0px);
  position: relative;
  overflow: clip;
  background-color: #05275E;
}

.hero-bg {
  position: absolute;
  inset: 0;
  background-color: #05275E;
}

.hero-img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.hero-heading {
  z-index: var(--z-local-1);
  text-align: center;
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 5em;
  font-weight: 400;
  line-height: 1.2;
  color: var(--color-white);
}

.hero-tagline {
  font-family: 'Instrument Sans', Arial, sans-serif;
  font-size: max(0.25em, 15px);
  font-weight: 400;
  display: block;
  margin-top: 1.5em;
  margin-bottom: 1.5em;
}

.hero-badges {
  position: relative;
  z-index: var(--z-local-2);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 1em;
}

/* Tablet hero overrides (R3 + R5 fixes) */
@media screen and (max-width: 1024px) {
  .hero-section {
    padding-left: var(--gutter-left);
    padding-right: var(--gutter-right);
  }

  .hero-heading {
    font-size: 3.5em;
  }
}

@media screen and (max-width: 767px) {
  .hero-section {
    padding-left: 1.5em;
    padding-right: 1.5em;
  }

  .hero-heading {
    font-size: 3.5em;
    width: 100%;
  }

  .hero-tagline {
    white-space: nowrap;
  }

  .hero-badges {
    flex-direction: row;
    gap: 0.75em;
  }
}

@media screen and (max-width: 480px) {
  .hero-heading {
    font-size: 3em;
  }
}

/* ==================== BOLD FULL SCREEN NAVIGATION ==================== */
.bold-nav-full {
  z-index: var(--z-nav-overlay);
  pointer-events: none;
  position: fixed;
  inset: 0;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  background-color: transparent;
}

/* iOS 26 Safari toolbar tinting: Safari 26 ignores <meta name="theme-color">
   and instead derives toolbar tint from the <body> background-color (which has
   a live observer) or from position:fixed elements near viewport edges (sampled
   ONCE at render — JS changes are never re-read). We therefore control tinting
   by changing document.body.style.backgroundColor via JS on scroll, and avoid
   placing any fixed element with an opaque background near the viewport edges
   so Safari falls through to the body background. */


.bold-nav-full__bar {
  z-index: var(--z-local-1);
  width: 100%;
  height: calc(1.5em + 2.5em + 1.5em);
  position: absolute;
  top: env(safe-area-inset-top, 0px);
  left: 0;
  right: 0;
  overflow: hidden;
}

/* Background dim overlay for menu open state.
   iOS 26 Safari Liquid Glass fix: opacity:0 does NOT prevent Safari from sampling
   an element's background-color for toolbar tinting. Safari reads rgba(0,0,0,0.5)
   even at opacity:0, producing intermittent grey dimming on the status bar. Use
   visibility:hidden + background-color:transparent in the inactive state so Safari
   skips this element entirely. Restore both on nav open. */
.bold-nav-full__dim-overlay {
  position: absolute;
  inset: 0;
  background-color: transparent;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  z-index: var(--z-local-1);
  transition: opacity 0.3s cubic-bezier(0.65, 0, 0.35, 1),
              visibility 0s linear 0.3s,
              background-color 0s linear 0.3s;
}

/* Dim overlay active when navigation is open */
[data-navigation-status="active"] .bold-nav-full__dim-overlay {
  background-color: rgba(0, 0, 0, 0.5);
  visibility: visible;
  opacity: 1;
  transition: opacity 0.3s cubic-bezier(0.65, 0, 0.35, 1),
              visibility 0s linear 0s,
              background-color 0s linear 0s;
}

/* Logo wrapper for animation */
.bold-nav-full__logo-wrap {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 1.5em;
  height: 2.5em;
}

.bold-nav-full__logo {
  pointer-events: auto;
  color: var(--color-white);
  justify-content: center;
  align-items: center;
  height: 100%;
  display: flex;
  transform: translateY(0);
  transition: opacity 0.3s ease, transform 0.6s cubic-bezier(0.65, 0, 0.35, 1), color 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}

@media (hover: hover) and (pointer: fine) {
  .bold-nav-full__logo:hover {
    opacity: 0.6;
  }
}

.bold-nav-full__logo-img {
  height: 100%;
  width: auto;
  max-width: 16em;
}

/* Contact button wrapper for animation */
.bold-nav-full__contact-wrap {
  position: absolute;
  right: 5em;
  top: 1.5em;
  height: 2.5em;
  display: flex;
  align-items: center;
}

.bold-nav-full__contact-button {
  pointer-events: auto;
  color: var(--color-white);
  font-size: 1.25em;
  text-decoration: none;
  display: block;
  transform: translateY(0);
  transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1), color 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}

/* Shopping cart button wrapper for animation */
.bold-nav-full__cart-wrap {
  pointer-events: auto;
  position: absolute;
  right: 2.5em;
  top: 1.5em;
  height: 2.5em;
  display: flex;
  align-items: center;
  overflow: visible;
}

.bold-nav-full__cart-button {
  position: relative;
  pointer-events: auto;
  background: none;
  border: none;
  font-size: inherit;
  padding: 0;
  cursor: pointer;
  color: inherit;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(0);
  transition: opacity 0.3s ease, transform 0.6s cubic-bezier(0.65, 0, 0.35, 1), color 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}

@media (hover: hover) and (pointer: fine) {
  .bold-nav-full__cart-button:hover {
    opacity: 0.6;
  }
}

.bold-nav-full__cart-svg {
  width: 1.25em;
  height: 1.25em;
  pointer-events: none;
}

.bold-nav-full__cart-svg path {
  transition: fill 0.3s ease;
}

.bold-nav-full__cart-svg--filled path {
  fill: currentColor;
}

/* Mini Water Droplet Styles */
.bold-nav-full__droplet {
  pointer-events: none;
  position: absolute;
  right: 2.5em;
  top: 1.5em;
  height: 2.5em;
  width: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  transition: opacity 0.3s ease;
}

.bold-nav-full__droplet-svg {
  height: 2em;
  width: auto;
  transform: translateX(200%);
  transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}

@media (hover: hover) and (pointer: fine) {
  .bold-nav-full__droplet:hover {
    opacity: 0.6;
  }
}

/* ==================== THEME NAVIGATION STATES ==================== */

/* Light theme (for dark backgrounds) - white text */
[data-theme-nav="light"] {
  color: var(--color-white);
}

/* Dark theme (for light backgrounds) - black text */
[data-theme-nav="dark"] {
  color: var(--color-text);
}

/* Transition for smooth color changes */
[data-theme-nav] {
  transition: color 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}

/* Droplet needs both color and opacity transitions (data-theme-nav is on the element itself) */
.bold-nav-full__droplet[data-theme-nav] {
  transition: color 0.5s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.3s ease;
}

/* Higher-specificity overrides: data-theme-nav sits on individual elements,
   so attribute+class specificity is needed to beat each element's default color */
[data-theme-nav="light"].bold-nav-full__hamburger {
  color: var(--color-white);
}

[data-theme-nav="light"] .bold-nav-full__logo,
[data-theme-nav="light"].bold-nav-full__droplet {
  color: var(--color-white);
}

[data-theme-nav="light"] .bold-nav-full__contact-button {
  color: var(--color-white);
}

[data-theme-nav="light"] .bold-nav-full__cart-button {
  color: var(--color-white);
}

[data-theme-nav="dark"].bold-nav-full__hamburger {
  color: var(--color-text);
}

[data-theme-nav="dark"] .bold-nav-full__logo,
[data-theme-nav="dark"].bold-nav-full__droplet {
  color: var(--color-text);
}

[data-theme-nav="dark"] .bold-nav-full__contact-button {
  color: var(--color-text);
}

[data-theme-nav="dark"] .bold-nav-full__cart-button {
  color: var(--color-text);
}

/* ==================== NAV COLLAPSED STATE (SCROLL TRANSITION) ==================== */

/* When collapsed: All header elements swipe up identically (rem = same distance for all) */
[data-nav-collapsed="true"] .bold-nav-full__logo,
[data-nav-collapsed="true"] .bold-nav-full__contact-button,
[data-nav-collapsed="true"] .bold-nav-full__cart-button {
  transform: translateY(-4rem);
}

/* When collapsed: Droplet slides in and becomes interactive */
[data-nav-collapsed="true"] .bold-nav-full__droplet {
  pointer-events: auto;
}

[data-nav-collapsed="true"] .bold-nav-full__droplet-svg {
  transform: translateX(0);
}

/* Reset state when not collapsed */
[data-nav-collapsed="false"] .bold-nav-full__logo,
body:not([data-nav-collapsed]) .bold-nav-full__logo {
  transform: translateY(0);
}

[data-nav-collapsed="false"] .bold-nav-full__contact-button,
body:not([data-nav-collapsed]) .bold-nav-full__contact-button {
  transform: translateY(0);
}

[data-nav-collapsed="false"] .bold-nav-full__cart-button,
body:not([data-nav-collapsed]) .bold-nav-full__cart-button {
  transform: translateY(0);
}

[data-nav-collapsed="false"] .bold-nav-full__droplet-svg,
body:not([data-nav-collapsed]) .bold-nav-full__droplet-svg {
  transform: translateX(200%);
}

/* --------------------------------- Hamburger --------------------------------- */

.bold-nav-full__hamburger {
  pointer-events: auto;
  color: var(--color-white);
  cursor: pointer;
  background-color: #0000;
  border: none;
  font-size: inherit;
  justify-content: center;
  align-items: center;
  width: 2.5em;
  height: 2.5em;
  display: flex;
  position: absolute;
  top: calc(2.75rem - 1.25em);
  left: 2.1em;
  z-index: var(--z-local-3);
  overflow: hidden;
  transition: color 0.5s cubic-bezier(.9, 0, .1, 1);
}

.bold-nav-full__hamburger .bold-nav-full__hamburger-bar {
  background-color: currentColor;
  width: 1.65em;
  height: .1em;
  position: absolute;
  transform: translate(0, 0)  rotate(0.001deg);
  transition: transform 0.5s cubic-bezier(.7, 0, .3, 1);
}

.bold-nav-full__hamburger .bold-nav-full__hamburger-bar:nth-child(1) {
  transform: translate(0, -.375em) scale(1, 1) rotate(0.001deg);
}

.bold-nav-full__hamburger .bold-nav-full__hamburger-bar:nth-child(3) {
  transform: translate(0, .375em) scale(1, 1) rotate(0.001deg);
}

/* Hamburger - Hover */
@media (hover: hover) and (pointer: fine) {
  .bold-nav-full__hamburger:hover .bold-nav-full__hamburger-bar:nth-child(1) {
    transform: translate(0, -.375em) scale(.5, 1) rotate(0.001deg);
  }

  .bold-nav-full__hamburger:hover .bold-nav-full__hamburger-bar:nth-child(3) {
     transform: translate(0, .375em) scale(.5, 1) rotate(0.001deg);
  }
}

/* Hamburger (Navigation Open) */
[data-navigation-status="active"] .bold-nav-full__hamburger {
  color: var(--color-text);
}

[data-navigation-status="active"]  .bold-nav-full__hamburger-bar:nth-child(1) {
  transform: translate(0, 0) rotate(45deg) scale(1, 1);
}

[data-navigation-status="active"] .bold-nav-full__hamburger-bar:nth-child(2) {
  transform: translate(-150%, 0) rotate(0.001deg) scale(1, 1);
}

[data-navigation-status="active"]  .bold-nav-full__hamburger-bar:nth-child(3) {
  transform: translate(0, 0) rotate(-45deg) scale(1, 1);
}

/*  Hamburger - Hover (Navigation Open)  */
@media (hover: hover) and (pointer: fine) {
  [data-navigation-status="active"] .bold-nav-full__hamburger:hover .bold-nav-full__hamburger-bar:nth-child(1) {
    transform: translate(0, 0) rotate(45deg) scale(.7, 1);
  }

  [data-navigation-status="active"] .bold-nav-full__hamburger:hover .bold-nav-full__hamburger-bar:nth-child(3) {
    transform: translate(0, 0) rotate(-45deg) scale(.7, 1);
  }
}

/* --------------------------------- Tile --------------------------------- */

.bold-nav-full__tile {
  pointer-events: auto;
  background-color: var(--color-bg);
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  z-index: var(--z-local-2);
  transition: clip-path 1s cubic-bezier(.9, 0, .1, 1);
  clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
}

/* Tile (Navigation Open) */
[data-navigation-status="active"] .bold-nav-full__tile {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}

.bold-nav-full__ul {
  flex-flow: column;
  align-items: center;
  margin: 0;
  padding: 0;
  display: flex;
}

.bold-nav-full__li {
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
  text-decoration: none;
  display: flex;
  position: relative;
  overflow: visible;
}

.bold-nav-full__link {
  color: var(--color-text);
  padding-left: .075em;
  padding-right: .075em;
  padding-bottom: .2em;
  font-size: 4em;
  font-weight: 400;
  text-decoration: none;
  position: relative;
  transform: translateY(100%) rotate(5deg);
  transition: transform 0.75s cubic-bezier(.7, 0, .3, 1);
}


.bold-nav-full__li:nth-child(1) .bold-nav-full__link {transition-delay: 0.35s;}
.bold-nav-full__li:nth-child(2) .bold-nav-full__link {transition-delay: 0.3s;}
.bold-nav-full__li:nth-child(3) .bold-nav-full__link {transition-delay: 0.25s;}
.bold-nav-full__li:nth-child(4) .bold-nav-full__link {transition-delay: 0.2s;}
.bold-nav-full__li:nth-child(5) .bold-nav-full__link {transition-delay: 0.15s;}
.bold-nav-full__li:nth-child(6) .bold-nav-full__link {transition-delay: 0.1s;}
.bold-nav-full__li:nth-child(7) .bold-nav-full__link {transition-delay: 0.05s;}

/* Tile - Links (Navigation Open) */
[data-navigation-status="active"] .bold-nav-full__link {
  transform: translateY(0%) rotate(0.001deg);
  transition-delay: 0.3s;
}

[data-navigation-status="active"] .bold-nav-full__li:nth-child(1) .bold-nav-full__link {transition-delay: 0.3s;}
[data-navigation-status="active"] .bold-nav-full__li:nth-child(2) .bold-nav-full__link {transition-delay: 0.35s;}
[data-navigation-status="active"] .bold-nav-full__li:nth-child(3) .bold-nav-full__link {transition-delay: 0.4s;}
[data-navigation-status="active"] .bold-nav-full__li:nth-child(4) .bold-nav-full__link {transition-delay: 0.45s;}
[data-navigation-status="active"] .bold-nav-full__li:nth-child(5) .bold-nav-full__link {transition-delay: 0.5s;}
[data-navigation-status="active"] .bold-nav-full__li:nth-child(6) .bold-nav-full__link {transition-delay: 0.55s;}
[data-navigation-status="active"] .bold-nav-full__li:nth-child(7) .bold-nav-full__link {transition-delay: 0.6s;}

.bold-nav-full__link-text {
  display: block;
  position: relative;
}

/* Tile - Links (Hover) */
.bold-nav-full__li {
  transition: opacity 0.5s cubic-bezier(.7, 0, .3, 1);
}

@media (hover: hover) and (pointer: fine) {
  .bold-nav-full__ul:has(.bold-nav-full__li:hover) .bold-nav-full__li {
    opacity: 0.15;
  }

  .bold-nav-full__ul:has(.bold-nav-full__li:hover) .bold-nav-full__li:hover {
    opacity: 1;
  }
}

/* Tile - Links (Hover) - Underline effect */
.bold-nav-full__link::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: var(--border-thin);
  background-color: currentColor;
  transition: var(--transition-underline);
  transform-origin: right;
  transform: var(--transform-reset);
}

@media (hover: hover) and (pointer: fine) {
  .bold-nav-full__link:hover::before {
    transform-origin: left;
    transform: scaleX(1) rotate(0.001deg);
  }
}

/* --------------------------------- Underline Link Effect --------------------------------- */

[data-underline-link] {
  text-decoration: none;
  position: relative;
}

[data-underline-link]::before,
[data-underline-link="alt"]::before,
[data-underline-link="alt"]::after {
  content: "";
  position: absolute;
  bottom: -0.0625em;
  left: 0;
  width: 100%;
  height: var(--border-thin);
  background-color: currentColor;
  transition: var(--transition-underline);
  transform-origin: right;
  transform: var(--transform-reset);
}

[data-underline-link="alt"]::before {
  transform-origin: left;
  transform: scaleX(1) rotate(0.001deg);
  transition-delay: 0.3s;
}

[data-underline-link="alt"]::after {
  transform-origin: right;
  transform: var(--transform-reset);
  transition-delay: 0s;
}

@media (hover: hover) and (pointer: fine) {
  [data-hover]:hover [data-underline-link]::before,
  [data-underline-link]:hover::before {
    transform-origin: left;
    transform: scaleX(1) rotate(0.001deg);
  }

  [data-hover]:hover [data-underline-link="alt"]::before,
  [data-underline-link="alt"]:hover::before {
    transform-origin: right;
    transform: var(--transform-reset);
    transition-delay: 0s;
  }

  [data-hover]:hover [data-underline-link="alt"]::after,
  [data-underline-link="alt"]:hover::after {
    transform-origin: left;
    transform: scaleX(1) rotate(0.001deg);
    transition-delay: 0.3s;
  }
}

/* ==================== CHROMATIC LENS BADGE ==================== */
.glass-badge {
  position: relative;
  z-index: var(--z-local-2);
  padding: 0.625em 2.1875em;
  border: none;
  border-radius: 6.25em;
  overflow: hidden;
  background: transparent;
  margin-bottom: 0;
  transition: transform 0.2s ease;
  touch-action: manipulation;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media (hover: hover) and (pointer: fine) {
  .glass-badge:hover {
    transform: scale(1.05);
  }
}

.glass-text {
  position: relative;
  z-index: var(--z-local-2);
  color: var(--color-white);
  font-size: max(1em, 14px);
  font-weight: 400;
  white-space: nowrap;
  pointer-events: none;
  visibility: hidden;
}

.lens-canvas {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: var(--z-local-1);
  pointer-events: none;
}

@keyframes badge-glow {
  0%, 100% { box-shadow: 0 0 12px 2px rgba(255, 255, 255, 0.15); }
  50%      { box-shadow: 0 0 24px 6px rgba(255, 255, 255, 0.35); }
}

.glass-badge--shop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  margin-top: 0;
  margin-bottom: 0;
  animation: badge-glow 3s ease-in-out infinite;
}

@media (hover: hover) and (pointer: fine) {
  .glass-badge--shop:hover {
    animation: none;
  }
}

.glass-badge--shop:active {
  animation: none;
  transform: scale(0.97);
}

/* --- Glass Effect (multi-layer frosted glass) --- */
.glass-effect {
  -webkit-backdrop-filter: saturate(120%) blur(0.75em);
  backdrop-filter: saturate(120%) blur(0.75em);
  pointer-events: none;
  isolation: isolate;
  color: #201d1d;
  border-radius: inherit;
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.glass-effect__fill {
  opacity: 1;
  border-radius: inherit;
  background-color: #d4d4d426;
  position: absolute;
  inset: 0;
}

.glass-effect__fill-burn {
  opacity: 0.05;
  mix-blend-mode: color-burn;
  border-radius: inherit;
  background-color: currentColor;
  position: absolute;
  inset: 0;
}

.glass-effect__highlight-soft {
  mix-blend-mode: overlay;
  border-radius: inherit;
  position: absolute;
  inset: 0;
  box-shadow: inset -0.28125em -0.28125em 0.09375em -0.328125em #ffffff80;
}

.glass-effect__highlight-strong {
  border-radius: inherit;
  position: absolute;
  inset: 0;
  box-shadow: inset 0.28125em 0.28125em 0.09375em -0.328125em #fffc;
}

.glass-effect__edge-light {
  border-radius: inherit;
  mix-blend-mode: plus-lighter;
  position: absolute;
  inset: 0;
  box-shadow: inset 0.1875em 0.28125em 0.09375em -0.1875em #b3b3b380;
}

.glass-effect__edge-dark {
  mix-blend-mode: overlay;
  border-radius: inherit;
  position: absolute;
  inset: 0;
  box-shadow: inset -0.1875em -0.28125em 0.09375em -0.1875em #b3b3b34d;
}

.glass-effect__inner-glow {
  mix-blend-mode: darken;
  border-radius: inherit;
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 1.75em #f2f2f24d;
}

/* Pill badges: glass-effect overlays on top of the lens canvas */
.glass-badge:not(.glass-badge--card) > .glass-effect {
  z-index: var(--z-local-3);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* ==================== CUSTOM CURSOR ==================== */

/* Hide default cursor */
*, *::before, *::after {
  cursor: none !important;
}

/* Custom cursor container */
.custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: var(--z-top);
  mix-blend-mode: difference;
}

/* Hollow circle (default state) */
.cursor-circle {
  width: 1.5625em;
  height: 1.5625em;
  border: 0.09375em solid var(--color-white);
  border-radius: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
  transition:
    width 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
    height 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
    border-width 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
    background-color 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
    opacity 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
  background-color: transparent;
  will-change: transform;
}

/* Filled circle (hover state for clickable elements) */
.custom-cursor.is-hovering .cursor-circle {
  width: 0.9375em;
  height: 0.9375em;
  background-color: var(--color-white);
  border-width: 0;
}

/* Hide cursor when leaving viewport */
.custom-cursor.is-hidden .cursor-circle {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.5);
}

/* Text selection cursor state */
.custom-cursor.is-text .cursor-circle {
  width: 0.25em;
  height: 1.5em;
  border-radius: 0.125em;
  background-color: var(--color-white);
  border-width: 0;
}

/* Disable custom cursor on touch devices */
@media (hover: none) and (pointer: coarse) {
  .custom-cursor {
    display: none !important;
  }

  *, *::before, *::after {
    cursor: auto !important;
  }
}

/* ==================== SVG FILTER HIDDEN ==================== */
.svg-filter-hidden {
  display: none;
}

/* ==================== HERO TEXT FONT OVERRIDES ==================== */
.hero-text-sans {
  font-family: 'Instrument Sans', Arial, sans-serif;
}

/* ==================== ROTATING TEXT WITH GSAP ==================== */
.rotating-text__highlight {
  color: inherit;
}

[data-rotating-words] {
  display: inline-block;
  position: relative;
}

.rotating-text__inner {
  display: inline-block;
}

.rotating-text__word {
  display: block;
  white-space: nowrap;
  position: absolute;
  top: 0;
  left: 0;
  font-style: italic;
  font-family: 'Instrument Serif', Georgia, serif;
}

.rotating-line {
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
  white-space: nowrap;
}

.rotating-line-mask {
  overflow-x: visible !important;
  overflow-y: clip !important;
}

/* ==================== PRODUCTS SECTION WITH HORIZONTAL SCROLL CARDS ==================== */
.products-section {
  /* Card height at each breakpoint — single source of truth for
     vertically centering the heading + cards as a group */
  --card-h: calc(23em * 1.33);   /* desktop: padding-top 133% of 23em flex-basis */
  --title-h: 1.2em;              /* heading single line-height */
  --title-gap: 1.5em;            /* space between heading and cards */
  --center-offset: calc(var(--title-h) + var(--title-gap));

  width: 100%;
  height: 100vh;
  height: 100dvh;
  background-color: var(--color-bg);
  position: relative;
  overflow: clip;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  /* Promote to own GPU layer — isolates backgroundColor repaints
     from the card transforms so they don't compete for paint time */
  transform: translateZ(0);
  /* Keep above the scroll-scrub section (later in DOM) when pinned */
  z-index: var(--z-local-2);
}

.products-section__title {
  font-size: max(1em, 13px);
  font-weight: 500;
  letter-spacing: 0.05em;
  margin: 0;
  padding-top: 0;
  text-align: center;
  transition: color 0.5s cubic-bezier(0.65, 0, 0.35, 1);
  /* Top of the centred heading+cards group — derived from --card-h */
  position: absolute;
  left: 0;
  right: 0;
  top: calc(50% - (var(--card-h) + var(--center-offset)) / 2);
  z-index: var(--z-local-1);
}

[data-theme-section="light"] .products-section__title {
  color: var(--color-white);
}

[data-theme-section="dark"] .products-section__title {
  color: var(--color-text);
}

/* Horizontal Scroll Cards — sweep from right edge to left edge.
   position:absolute removes the track from flex centering — Safari
   flex-centers based on offsetWidth (72px, wrong) instead of the
   real content width (1544px), shifting cards 736px off-screen.
   With left:0 the natural position is deterministic in all browsers. */
.horizontal-scroll__track {
  display: flex;
  gap: 1.5em;
  will-change: transform;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  box-sizing: border-box;
  padding-top: var(--center-offset);
  align-items: center;
}

.horizontal-scroll__card {
  flex: 0 0 23em;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-card);
  text-decoration: none;
  color: var(--color-white);
  display: block;
}

.horizontal-scroll__card-img-wrap {
  position: relative;
  width: 100%;
  padding-top: 133%;
}

.horizontal-scroll__card-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.horizontal-scroll__card-img-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 50%);
  pointer-events: none;
  z-index: var(--z-local-1);
}

.horizontal-scroll__card-details {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1.5em;
  z-index: var(--z-local-2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.horizontal-scroll__card-name {
  font-size: 2em;
  font-weight: 500;
  margin: 0;
  color: var(--color-white);
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20%);
  transition: opacity 0.75s cubic-bezier(0.76, 0, 0.24, 1),
              visibility 0.75s cubic-bezier(0.76, 0, 0.24, 1),
              transform 0.75s cubic-bezier(0.76, 0, 0.24, 1);
}

.horizontal-scroll__card.is-active .horizontal-scroll__card-name {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Responsive: tablet — ~2.5 cards visible, taller for viewport fill */
@media screen and (max-width: 1024px) {
  .products-section { --card-h: 60vh; }

  .horizontal-scroll__card {
    flex: 0 0 39vw;
  }

  .horizontal-scroll__card-img-wrap {
    padding-top: 0;
    height: 60vh;
  }
}

/* Responsive: mobile — cards slightly smaller than full viewport */
@media screen and (max-width: 767px) {
  .products-section { --card-h: 60vh; }

  .horizontal-scroll__card {
    flex: 0 0 70vw;
  }

  .horizontal-scroll__card-img-wrap {
    padding-top: 0;
    height: 60vh;
  }

  .horizontal-scroll__card-name {
    font-size: 2.5em;
  }
}

@media screen and (max-width: 480px) {
  .products-section { --card-h: 65vh; }

  .horizontal-scroll__card {
    flex: 0 0 75vw;
  }

  .horizontal-scroll__card-img-wrap {
    height: 65vh;
  }
}

/* ==================== RESPONSIVE NAV SCROLL EFFECTS ==================== */
@media screen and (max-width: 767px) {
  .bold-nav-full__bar {
    height: calc(1.25em + 2.5em + 1.25em);
  }

  .bold-nav-full__hamburger {
    top: calc(2.5rem - 1.25em);
    left: 1.25em;
  }

  .bold-nav-full__logo-wrap {
    top: 1.25em;
  }

  .bold-nav-full__contact-wrap {
    right: 3.75em;
    top: 1.25em;
  }

  .bold-nav-full__cart-wrap {
    right: 1.25em;
    top: 1.25em;
  }

  .bold-nav-full__droplet {
    right: 1.25em;
    top: 1.25em;
  }

  /* Adjusted scroll animation for smaller top offset (rem = same distance for all) */
  [data-nav-collapsed="true"] .bold-nav-full__logo {
    transform: translateY(-3.75rem);
  }

  [data-nav-collapsed="true"] .bold-nav-full__contact-button {
    transform: translateY(-3.75rem);
  }

  [data-nav-collapsed="true"] .bold-nav-full__cart-button {
    transform: translateY(-3.75rem);
  }
}

@media screen and (max-width: 480px) {
  .bold-nav-full__bar {
    height: calc(1em + 2.5em + 1em);
  }

  .bold-nav-full__hamburger {
    top: calc(2.25rem - 1.25em);
    left: 1em;
  }

  .bold-nav-full__logo-wrap {
    top: 1em;
  }

  .bold-nav-full__contact-wrap {
    right: 3.25em;
    top: 1em;
  }

  .bold-nav-full__cart-wrap {
    right: 1em;
    top: 1em;
  }

  .bold-nav-full__droplet {
    right: 1em;
    top: 1em;
  }

  /* Adjusted scroll animation for smaller top offset (rem = same distance for all) */
  [data-nav-collapsed="true"] .bold-nav-full__logo {
    transform: translateY(-3.5rem);
  }

  [data-nav-collapsed="true"] .bold-nav-full__contact-button {
    transform: translateY(-3.5rem);
  }

  [data-nav-collapsed="true"] .bold-nav-full__cart-button {
    transform: translateY(-3.5rem);
  }

  /* Reduce nav link size on small viewports so all 7 items fit vertically */
  .bold-nav-full__link {
    font-size: 3em;
  }
}

/* ==================== WEBGL2 FALLBACK ==================== */
.webgl-fallback {
  background-image: url('images/webgl-fallback.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  animation: fadeInFallback 0.8s ease-in-out;
}

.webgl-fallback::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.4);
  pointer-events: none;
  z-index: var(--z-local-1);
}

@keyframes fadeInFallback {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ==================== SCROLLBAR HIDDEN UTILITY ==================== */
html.scrollbar-hidden {
  scrollbar-width: none;
}
html.scrollbar-hidden::-webkit-scrollbar {
  display: none;
}

/* ==================== SITE FOOTER ==================== */
.site-footer {
  --nav-height: 5em;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  background-color: var(--color-bg);
  color: var(--color-text);
  display: grid;
  grid-template-rows: var(--nav-height) 4em auto minmax(4em, 1fr) auto minmax(4em, 1fr) auto minmax(2em, 1fr);
  padding: 0 var(--gutter-right) calc(2em + env(safe-area-inset-bottom, 0px)) var(--gutter-left);
  position: relative;
}

/* Spacer matching fixed header height */
.site-footer__header-spacer {
  grid-row: 1;
}

/* Top row (social icons) */
.site-footer__top {
  grid-row: 3;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.site-footer__social {
  display: flex;
  gap: 1.5em;
  align-items: center;
}

.site-footer__social a {
  color: var(--color-text);
  transition: opacity 0.3s ease;
  display: flex;
  align-items: center;
}

@media (hover: hover) and (pointer: fine) {
  .site-footer__social a:hover {
    opacity: 0.5;
  }
}

.site-footer__social-icon {
  width: 1.5em;
  height: 1.5em;
}

/* 4-column layout */
.site-footer__columns {
  grid-row: 5;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1.5fr;
  gap: 3em;
  align-content: start;
}

/* Lower section wrapper — transparent to parent grid */
.site-footer__lower {
  display: contents;
}

.site-footer__col-heading {
  font-size: max(var(--text-xs), 11px);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 1.75em;
  color: var(--color-text);
}

/* Footer accordion toggle — invisible on desktop, active on mobile */
.site-footer__col-toggle {
  all: unset;
  display: inline;
  font: inherit;
  color: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  cursor: inherit;
}

.site-footer__accordion-icon {
  display: none;
}

.site-footer__address {
  font-style: normal;
  font-size: max(var(--text-body), 13px);
  color: var(--color-text);
  display: flex;
  flex-direction: column;
  gap: 0.75em;
}

.site-footer__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75em;
}

.site-footer__link {
  font-size: max(var(--text-body), 13px);
  color: var(--color-text);
  text-decoration: none;
}

.site-footer__address .site-footer__link {
  width: fit-content;
}

.site-footer__contact-icon {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  vertical-align: -0.125em;
  margin-right: 0.5em;
  display: inline-block;
}

/* Newsletter form */
.site-footer__newsletter-text {
  font-size: max(var(--text-body), 13px);
  color: var(--color-text);
  margin-bottom: 1.5em;
}

.site-footer__form {
  display: flex;
  flex-direction: column;
  gap: 0.75em;
}

.site-footer__form-row {
  display: flex;
  gap: 0.75em;
}

.site-footer__input {
  flex: 1;
  padding: 0.875em 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--color-shadow);
  border-radius: 0;
  font-size: max(var(--text-small), 16px);
  color: var(--color-text);
  min-height: 44px;
  transition: border-color 0.3s ease;
}

.site-footer__input::placeholder {
  color: rgba(0, 0, 0, 0.35);
}

.site-footer__input:focus {
  border-bottom-color: var(--color-text);
  outline: none;
}

.site-footer__input.is-invalid {
  border-bottom-color: #DC2626;
}

.site-footer__submit {
  display: inline-flex;
  align-items: center;
  gap: 0.2em;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  font-size: max(var(--text-body), 14px);
  font-weight: 400;
  min-height: 44px;
  color: var(--color-text);
  cursor: pointer;
  align-self: flex-start;
}

.site-footer__submit-text {
  position: relative;
}

.site-footer__submit-arrow {
  width: 1.1em;
  height: 1.1em;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

@media (hover: hover) and (pointer: fine) {
  .site-footer__submit:hover .site-footer__submit-arrow {
    transform: translateX(0.25em);
  }
}

.site-footer__form-success {
  display: none;
  font-family: 'Instrument Sans', sans-serif;
  font-size: max(var(--text-body), 13px);
  color: var(--color-text);
  margin: 0;
  padding: 0;
  opacity: 0.85;
}

/* Large repeating brand text */
.site-footer__brand-band {
  grid-row: 7;
  overflow: visible;
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.site-footer__brand-svg {
  width: 100%;
  height: auto;
  color: var(--color-text);
  display: block;
  flex-shrink: 0;
}

.brand-char {
  transform-box: fill-box;
  transform-origin: center;
}

/* Bottom bar */
.site-footer__bottom {
  grid-row: 8;
  align-self: center;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: 100%;
  font-size: max(var(--text-xs), 11px);
  color: var(--color-text);
}

.site-footer__bottom a {
  color: var(--color-text);
  text-decoration: none;
}

.site-footer__bottom-left {
  display: flex;
  align-items: center;
  gap: 1.5em;
  justify-self: start;
}

.site-footer__bottom-center {
  justify-self: center;
}

.site-footer__bottom-right {
  justify-self: end;
}

.site-footer__credit {
  color: var(--color-text);
}

/* Footer Responsive: 991px (tablet) */
@media screen and (max-width: 1024px) {
  .site-footer {
    --nav-height: 4.25em;
    padding: 0 var(--gutter-right) 2em var(--gutter-left);
  }
  .site-footer__columns {
    grid-template-columns: 1fr 1fr;
    gap: 2.5em;
  }
  .site-footer__brand-band {
    width: 100%;
  }
}

/* Footer Responsive: 767px (mobile) */
@media screen and (max-width: 767px) {
  .site-footer {
    --nav-height: 4.25em;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0 4.75em 2em var(--gutter-left);
  }
  .site-footer__header-spacer {
    height: var(--nav-height);
    flex-shrink: 0;
  }
  /* Flexible spacing — extra viewport space distributed between social↔columns and columns↔brand */
  .site-footer__top {
    margin-top: 3em;
  }
  .site-footer__columns {
    margin-top: auto;
    padding-top: 3em;
  }
  .site-footer__lower {
    display: block;
    margin-top: auto;
    padding-top: 3em;
  }
  .site-footer__columns {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .site-footer__top {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5em;
  }

  /* Social icons: larger, spread across full width */
  .site-footer__social {
    justify-content: space-between;
    width: 100%;
  }
  .site-footer__social-icon {
    width: max(1.5em, 24px);
    height: max(1.5em, 24px);
  }

  /* Newsletter moves above accordion columns */
  .site-footer__col--newsletter {
    order: -1;
    padding-bottom: 2em;
  }

  /* Accordion headings lose bottom margin — padding is on the toggle button instead */
  [data-footer-accordion] .site-footer__col-heading {
    margin-bottom: 0;
  }
  /* Faint lines on accordion items — border on the container so it moves with expanded panel */
  [data-footer-accordion] {
    border-bottom: 1px solid var(--color-shadow-light);
  }
  [data-footer-accordion]:first-of-type {
    border-top: 1px solid var(--color-shadow-light);
  }
  .site-footer__col-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 1.25em 0;
    min-height: 44px;
    cursor: pointer;
  }

  /* +/- icon — visible on mobile */
  .site-footer__accordion-icon {
    display: inline-block;
    position: relative;
    width: max(0.75em, 12px);
    height: max(0.75em, 12px);
    flex-shrink: 0;
  }
  .site-footer__accordion-icon::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 100%;
    height: 1.5px;
    background-color: currentColor;
  }
  .site-footer__accordion-icon::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1.5px;
    height: 100%;
    background-color: currentColor;
    transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1);
  }
  /* Rotate vertical bar to horizontal when expanded */
  .site-footer__col-toggle[aria-expanded="true"] .site-footer__accordion-icon::after {
    transform: translateX(-50%) rotate(90deg);
  }

  /* Panel — collapsed by default on mobile */
  [data-footer-accordion] .site-footer__col-panel {
    overflow: hidden;
    max-height: 0;
    padding-bottom: 0;
    transition: max-height 0.4s cubic-bezier(0.65, 0, 0.35, 1),
                padding-bottom 0.4s cubic-bezier(0.65, 0, 0.35, 1);
  }
  [data-footer-accordion] .site-footer__col-panel.is--open {
    max-height: 300px;
    padding-bottom: 29px; /* matches 30px visual gap from border to heading (toggle padding + 44px min-height centering) minus 1px border */
  }

  .site-footer__brand-band {
    width: 100%;
  }
  .site-footer__bottom {
    grid-template-columns: 1fr;
    gap: 1em;
    text-align: center;
    margin-top: 2em;
    align-self: auto;
  }
  .site-footer__bottom-left {
    justify-self: center;
  }
  .site-footer__bottom-center {
    justify-self: center;
  }
  .site-footer__bottom-right {
    justify-self: center;
  }
  .site-footer__form-row {
    flex-direction: column;
  }
}

/* Footer Responsive: 479px (small mobile) */
@media screen and (max-width: 480px) {
  .site-footer {
    padding: 0 4em 1.5em var(--gutter-left);
  }
  .site-footer__social {
    gap: 1.25em;
  }
  .site-footer__brand-band {
    width: 100%;
  }
}

/* ==================== CONTACT US PAGE ==================== */

/* Contact hero — full viewport, two-column layout */
.contact-hero {
  width: 100%;
  min-height: 100vh;
  background-color: var(--color-bg);
  display: flex;
  align-items: stretch;
}

.contact-hero__inner {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
}

/* Left column: contact info */
.contact-hero__info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 9.5em 4em 4em var(--gutter-left);
}

/* Page heading — matches products page style */
.contact-hero__heading {
  font-size: 5em;
  font-weight: 300;
  color: var(--color-text);
  margin: 0 0 1.5em;
}


.contact-hero__heading-serif {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
}

/* Contact details grid — two columns for info blocks */
.contact-hero__details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5em 3em;
}

/* Individual info block */
.contact-hero__block {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}

/* Bold label (Phone, Email, Location, etc.) */
.contact-hero__label {
  font-size: var(--text-body);
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
}

/* Info text */
.contact-hero__text {
  font-size: var(--text-body);
  font-weight: 400;
  color: var(--color-text);
  margin: 0;
}

/* Address styling */
.contact-hero__address {
  font-style: normal;
}

/* Links within contact info */
.contact-hero__link {
  color: var(--color-text);
  text-decoration: none;
}

/* Directions link with exit icon */
.contact-hero__directions-link {
  color: var(--color-text);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
}

.contact-hero__exit-icon {
  width: 1.1em;
  height: 1.1em;
  flex-shrink: 0;
}

/* Contact info icons (phone, email) */
.contact-hero__contact-icon {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}

.contact-hero__link--icon {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  color: var(--color-text);
  text-decoration: none;
}

/* "Send us a message" anchor link */
.contact-hero__anchor-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin-top: 2.5em;
  font-size: var(--text-body);
  font-weight: 400;
  color: var(--color-text);
  text-decoration: none;
  letter-spacing: 0.02em;
}

.contact-hero__anchor-arrow {
  width: 1.1em;
  height: 1.1em;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

@media (hover: hover) and (pointer: fine) {
  .contact-hero__anchor-link:hover .contact-hero__anchor-arrow {
    transform: translateY(0.2em);
  }
}

/* Right column: Google Map */
.contact-hero__map {
  position: relative;
  min-height: 100vh;
}

#contact-map {
  position: absolute;
  top: 9.5em;
  left: 0;
  width: calc(100% - var(--gutter-right));
  height: calc(100vh - 13.5em);
  border-radius: var(--radius-card);
  overflow: hidden;
}

/* Lift Google Maps bottom attribution and logo away from edge */
#contact-map .gm-style-cc {
  transform: translateY(-10px) !important;
}
#contact-map a[href*="google.com/maps"] {
  transform: translateY(-10px) !important;
  display: inline-block !important;
}

/* Push zoom controls up so gap above attribution matches gap below */
#contact-map .gm-bundled-control {
  transform: translateY(-10px) !important;
}

/* Round Google Maps zoom control buttons */
#contact-map .gmnoprint div > div {
  border-radius: var(--radius-card) !important;
  overflow: hidden !important;
}

/* Underline hover animation on Google Maps attribution links */
#contact-map a,
#contact-map button:not([aria-label="Zoom in"]):not([aria-label="Zoom out"]) {
  position: relative !important;
  text-decoration: none !important;
  overflow: visible !important;
}

#contact-map a *,
#contact-map button:not([aria-label="Zoom in"]):not([aria-label="Zoom out"]) * {
  overflow: visible !important;
}

#contact-map a::after,
#contact-map button:not([aria-label="Zoom in"]):not([aria-label="Zoom out"])::after {
  content: "" !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: var(--border-thin) !important;
  background-color: currentColor !important;
  transition: var(--transition-underline) !important;
  transform-origin: right !important;
  transform: var(--transform-reset) !important;
  pointer-events: none !important;
  z-index: var(--z-local-1) !important;
}

@media (hover: hover) and (pointer: fine) {
  #contact-map a:hover::after,
  #contact-map button:not([aria-label="Zoom in"]):not([aria-label="Zoom out"]):hover::after {
    transform-origin: left !important;
    transform: scaleX(1) rotate(0.001deg) !important;
  }
}

/* Contact page responsive: 991px (tablet) */
@media screen and (max-width: 1024px) {
  .contact-hero__info {
    padding: 9.5em 3em 4em var(--gutter-left);
  }

  .contact-hero__details {
    gap: 2em 2.5em;
  }
}

/* Contact page responsive: 767px (mobile) */
@media screen and (max-width: 767px) {
  .contact-hero__inner {
    grid-template-columns: 1fr;
  }

  .contact-hero__info {
    padding: 8em var(--gutter-right) 3em var(--gutter-left);
    min-height: auto;
  }

  .contact-hero__map {
    min-height: 50vh;
    position: relative;
  }

  #contact-map {
    top: 0;
    left: var(--gutter-left);
    width: calc(100% - var(--gutter-left) - var(--gutter-right));
    height: 100%;
  }

  .contact-hero__heading {
    font-size: 3.5em;
    margin-bottom: 1.25em;
  }

  .contact-hero__details {
    grid-template-columns: 1fr 1fr;
    gap: 1.75em 2em;
  }
}

/* Contact page responsive: 479px (small mobile) */
@media screen and (max-width: 480px) {
  .contact-hero__info {
    padding: 7em var(--gutter-right) 2.5em var(--gutter-left);
  }

  .contact-hero__heading {
    font-size: 3em;
  }

  .contact-hero__details {
    grid-template-columns: 1fr;
    gap: 1.5em;
  }

  .contact-hero__map {
    min-height: 40vh;
  }

  .contact-hero__anchor-link {
    margin-top: 2em;
  }
}

/* ==================== CONTACT FORM SECTION ==================== */

.contact-form-section {
  width: 100%;
  background-color: var(--color-bg);
  padding: 4em var(--gutter-right) 4em var(--gutter-left);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.contact-form-section__title {
  font-size: 1.2em;
  font-weight: 400;
  color: var(--color-text);
  text-align: center;
  margin: 0;
}

.contact-form {
  width: 100%;
  max-width: 36em;
  margin-top: 3em;
  display: flex;
  flex-direction: column;
  gap: 1.5em;
}

.contact-form__group {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}

.contact-form__label {
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--color-text);
}

.contact-form__input,
.contact-form__textarea {
  width: 100%;
  padding: 1em 0;
  background-color: transparent;
  border: none;
  border-bottom: 1px solid var(--color-shadow);
  border-radius: 0;
  font-family: inherit;
  font-size: var(--text-body);
  color: var(--color-text);
  transition: border-color 0.3s ease;
}

.contact-form__input::placeholder,
.contact-form__textarea::placeholder {
  color: rgba(0, 0, 0, 0.35);
}

.contact-form__input:focus,
.contact-form__textarea:focus {
  border-bottom-color: var(--color-text);
  outline: none;
}

.contact-form__input.is-invalid,
.contact-form__textarea.is-invalid {
  border-bottom-color: #DC2626;
}

/* Custom animated dropdown */
.contact-form__dropdown {
  position: relative;
  width: 100%;
}

.contact-form__dropdown-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1em 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--color-shadow);
  font-family: inherit;
  font-size: var(--text-body);
  color: var(--color-text);
  cursor: pointer;
  transition: border-color 0.3s ease;
  text-align: left;
}

.contact-form__dropdown-trigger:focus {
  border-bottom-color: var(--color-text);
  outline: none;
}

.contact-form__dropdown.is-open .contact-form__dropdown-trigger {
  border-bottom-color: transparent;
}

.contact-form__dropdown-value {
  color: rgba(0, 0, 0, 0.35);
  transition: color 0.3s ease;
}

.contact-form__dropdown-value.has-value {
  color: var(--color-text);
}

.contact-form__dropdown-arrow {
  flex-shrink: 0;
  color: var(--color-text);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.contact-form__dropdown.is-open .contact-form__dropdown-arrow {
  transform: rotate(180deg);
}

.contact-form__dropdown-list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  height: 0;
  border-bottom: 1px solid transparent;
}

.contact-form__dropdown.is-open .contact-form__dropdown-list {
  border-bottom-color: var(--color-text);
}


.contact-form__dropdown-item {
  padding: 0.75em 0;
  font-size: var(--text-body);
  color: var(--color-text);
  cursor: pointer;
  position: relative;
  display: block;
  width: fit-content;
  min-height: 44px;
}

.contact-form__dropdown-item::before {
  content: "";
  position: absolute;
  bottom: 0.5em;
  left: 0;
  width: 100%;
  height: var(--border-thin);
  background-color: currentColor;
  transition: var(--transition-underline);
  transform-origin: right;
  transform: var(--transform-reset);
}

@media (hover: hover) and (pointer: fine) {
  .contact-form__dropdown-item:hover::before {
    transform-origin: left;
    transform: scaleX(1) rotate(0.001deg);
  }
}

.contact-form__dropdown-item:last-child {
  padding-bottom: 1.5em;
}

.contact-form__dropdown-item.is-selected {
  color: var(--color-text);
}

.contact-form__textarea {
  resize: vertical;
  min-height: 0;
  overflow: hidden;
}

.contact-form__submit {
  display: inline-flex;
  align-items: center;
  gap: 0.2em;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
  margin-top: 0.5em;
}

.contact-form__submit-text {
  position: relative;
}

.contact-form__submit-arrow {
  width: 1.1em;
  height: 1.1em;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

@media (hover: hover) and (pointer: fine) {
  .contact-form__submit:hover .contact-form__submit-arrow {
    transform: translateX(0.25em);
  }
}

/* Contact form responsive: 991px */
@media screen and (max-width: 1024px) {
  .contact-form-section {
    padding: 4em var(--gutter-right) 4em var(--gutter-left);
  }
}

/* Contact form responsive: 767px */
@media screen and (max-width: 767px) {
  .contact-form-section {
    padding: 3.5em 4.75em 3.5em var(--gutter-left);
    min-height: auto;
  }

  .contact-form {
    max-width: none;
  }
}

/* Contact form responsive: 479px */
@media screen and (max-width: 480px) {
  .contact-form-section {
    padding: 3em 4em 3em var(--gutter-left);
  }
}

/* ==================== FAQ ACCORDION SECTION ==================== */

.faq-section {
  width: 100%;
  background-color: var(--color-bg);
  padding: 4em var(--gutter-right) 4em var(--gutter-left);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.faq-section__title {
  font-size: 1.2em;
  font-weight: 400;
  color: var(--color-text);
  text-align: center;
  margin: 0 0 2.5em 0;
}

.faq-section__list {
  width: 100%;
  max-width: 36em;
  list-style: none;
  margin: 0;
  padding: 0;
}

.faq-section__item {
  border-bottom: 1px solid var(--color-shadow-light);
}

.faq-section__item:first-child {
  border-top: 1px solid var(--color-shadow-light);
}

.faq-section__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 1.25em 0;
  background: none;
  border: none;
  cursor: pointer;
  font-size: var(--text-body);
  font-weight: 600;
  color: var(--color-text);
  text-align: left;
  gap: 1em;
  transition: color 0.3s ease;
}

.faq-section__question {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
}

.faq-section__icon {
  flex-shrink: 0;
  width: 0.75em;
  height: 0.5em;
  transition: transform 0.4s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.faq-section__item[data-accordion-status="active"] .faq-section__icon {
  transform: rotate(180deg);
}

.faq-section__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s ease;
}

.faq-section__item[data-accordion-status="active"] .faq-section__body {
  grid-template-rows: 1fr;
}

.faq-section__content {
  overflow: hidden;
}

.faq-section__answer {
  font-size: var(--text-small);
  font-weight: 400;
  color: var(--color-text);
  margin: 0;
  padding: 0 0 1.25em 0;
}

/* FAQ responsive: 991px */
@media screen and (max-width: 1024px) {
  .faq-section {
    padding: 4em var(--gutter-right) 4em var(--gutter-left);
  }
}

/* FAQ responsive: 767px */
@media screen and (max-width: 767px) {
  .faq-section {
    padding: 3.5em 4.75em 3.5em var(--gutter-left);
    min-height: auto;
  }

  .faq-section__list {
    max-width: none;
  }
}

/* FAQ responsive: 479px */
@media screen and (max-width: 480px) {
  .faq-section {
    padding: 3em 4em 3em var(--gutter-left);
  }

}

/* ==================== PRODUCT DETAIL PAGE ==================== */

.product-detail {
  background-color: var(--color-bg);
  display: flex;
  flex-direction: row;
  min-height: 100vh;
}

.product-detail__image-side {
  width: 50%;
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 8em 0 4em var(--gutter-left);
  overflow: hidden;
}

.product-detail__img {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
}

.product-detail__info-side {
  width: 50%;
  padding: 8em var(--gutter-right) 4em 4em;
  display: flex;
  flex-direction: column;
}

.product-detail__name {
  font-size: 3.5em;
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 0.25em 0;
}

.product-detail__price {
  font-size: 1.75em;
  font-weight: 400;
  color: var(--color-text);
  margin: 0 0 calc(3rem - 0.1875rem) 0;
}

.product-detail__label {
  font-size: 1.2em;
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 1em 0;
}

.product-detail__description {
  font-size: var(--text-body);
  font-weight: 400;
  color: var(--color-text);
  margin: 0 0 0.75em 0;
}

.product-detail__finish {
  margin: calc(3rem - 0.3125rem) 0 3rem 0;
}

.product-detail__description:has(+ .product-detail__finish) {
  margin-bottom: 0;
}

.product-detail__finish .product-detail__label {
  margin: 0 0 1em 0;
}

.product-detail__colour-text {
  font-size: var(--text-body);
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 1em 0;
}

.product-detail__swatches {
  display: flex;
  gap: 0.75em;
  margin: 0;
}

.product-detail__filter-svg {
  position: absolute;
}

.product-detail__swatch {
  position: relative;
  width: 2.25em;
  height: 2.25em;
  min-width: 44px;
  min-height: 44px;
  border-radius: 50%;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-detail__swatch-fill {
  display: block;
  width: 1.75em;
  height: 1.75em;
  min-width: 34px;
  min-height: 34px;
  border-radius: 50%;
  background-color: var(--swatch-fill);
  border: none;
  pointer-events: none;
  filter: url(#swatch-inner-shadow);
}

.product-detail__swatch-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(90deg);
  pointer-events: none;
}

.product-detail__swatch-ring circle {
  fill: none;
  stroke: var(--color-text);
  stroke-width: 1.5;
}

/* Product gallery */
.product-gallery {
  position: relative;
  width: auto;
  height: auto;
  max-width: 100%;
  background-color: #DBEBF1;
  border-radius: var(--radius-card);
  overflow: hidden;
}

/* Hide empty-src gallery images to prevent broken image icons */
.product-gallery__img[src=""] {
  visibility: hidden !important;
  opacity: 0 !important;
}

.product-gallery__img {
  position: absolute;
  top: 0;
  left: 0;
  transform: none;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  border-radius: var(--radius-card);
  visibility: hidden;
  opacity: 0;
}

.product-gallery__img--active {
  position: relative;
  top: auto;
  left: auto;
  width: auto;
  height: auto;
  visibility: visible;
  opacity: 1;
}

.product-gallery__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: #C4D4DC;
  border: none;
  cursor: pointer;
  z-index: var(--z-local-2);
  padding: 0.5em;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-gallery__arrow--prev {
  left: 1.5em;
}

.product-gallery__arrow--next {
  right: 1.5em;
}

.product-gallery__arrow-svg {
  width: 2.5em;
  height: 2.5em;
  color: #47575D;
  transition: transform 0.3s ease;
}

.product-gallery__arrow-svg path {
  stroke-width: 2.5;
}

.product-gallery__arrow--prev .product-gallery__arrow-svg {
  transform: scaleX(-1);
}

@media (hover: hover) and (pointer: fine) {
  .product-gallery__arrow--next:hover .product-gallery__arrow-svg {
    transform: translateX(0.25em);
  }

  .product-gallery__arrow--prev:hover .product-gallery__arrow-svg {
    transform: scaleX(-1) translateX(0.25em);
  }
}

.product-gallery__dots {
  position: absolute;
  bottom: 1.5em;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 1.5em;
}

.product-gallery__dot {
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: #748489;
  opacity: 1;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background 0.3s ease;
  position: relative;
}

/* Invisible 44px tap target for gallery dots */
.product-gallery__dot::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
}

.product-gallery__dot--active {
  background: #16262B;
}

.product-detail__description + .product-detail__buttons {
  margin-top: calc(3rem - 0.75rem);
}

.product-detail__buttons {
  display: flex;
  gap: 1.5em;
  margin: 0 0 3em 0;
  flex-wrap: wrap;
}

.product-detail__button {
  background: none;
  border: none;
  padding: 0;
  font-size: var(--text-body);
  font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
  text-transform: uppercase;
}

/* Disabled state: buttons dimmed until finish is selected */
.product-detail__buttons[data-buttons-disabled] .product-detail__button {
  opacity: 0.35;
  pointer-events: none;
  transition: opacity 0.5s cubic-bezier(0.625, 0.05, 0, 1);
}

/* Once enabled, restore full opacity with smooth transition */
.product-detail__buttons:not([data-buttons-disabled]) .product-detail__button {
  opacity: 1;
  transition: opacity 0.5s cubic-bezier(0.625, 0.05, 0, 1);
}

/* Override underline hover for disabled buttons -- prevent any hover pseudo-element from showing */
.product-detail__buttons[data-buttons-disabled] [data-underline-link]::before {
  transform: var(--transform-reset) !important;
}

.product-detail__accordion {
  width: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
}

.product-detail__specs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-body);
  color: var(--color-text);
}

.product-detail__specs-table tr {
  border: none;
}

.product-detail__specs-table td {
  padding: 0.6em 0;
  vertical-align: top;
}

.product-detail__specs-table td:first-child {
  font-weight: 500;
  width: 45%;
  padding-right: 1.5em;
}

.product-detail__features-content {
  font-size: var(--text-body);
  color: var(--color-text);
}

.product-detail__features-content p {
  margin: 0 0 0.75em 0;
}

.product-detail__features-list {
  padding-left: 1.25em;
  margin: 0 0 0.75em 0;
  list-style-type: disc;
}

.product-detail__features-list li {
  margin-bottom: 0.5em;
}

.product-detail__features-list li strong {
  font-weight: 500;
}

/* Product detail responsive: 991px */
@media screen and (max-width: 1024px) {
  .product-detail {
    flex-direction: column;
  }

  .product-detail__image-side {
    width: 100%;
    height: auto;
    position: static;
    overflow: visible;
    padding: 6em var(--gutter-right) 2em var(--gutter-left);
  }

  .product-detail__info-side {
    width: 100%;
    padding: 3em var(--gutter-right) 4em var(--gutter-left);
  }

  .product-gallery__arrow--prev {
    left: 1em;
  }

  .product-gallery__arrow--next {
    right: 1em;
  }

  .product-gallery__arrow-svg {
    width: 2em;
    height: 2em;
  }

  .product-gallery__arrow {
    padding: 0.55em;
  }

  .product-gallery__dots {
    bottom: 1em;
  }
}

/* Product detail responsive: 767px */
@media screen and (max-width: 767px) {
  .product-detail__info-side {
    padding: 3em var(--gutter-right) 3.5em var(--gutter-left);
  }
}

/* Product detail responsive: 479px */
@media screen and (max-width: 480px) {
  .product-detail__info-side {
    padding: 2.5em var(--gutter-right) 3em var(--gutter-left);
  }

  .product-detail__name {
    font-size: 1.75em;
  }

  .product-detail__specs-table td:first-child {
    width: 40%;
    padding-right: 0.75em;
  }

  .product-detail__specs-table {
    font-size: var(--text-small);
  }

  .product-gallery__arrow--prev {
    left: 0.5em;
  }

  .product-gallery__arrow--next {
    right: 0.5em;
  }

  .product-gallery__arrow-svg {
    width: 1.75em;
    height: 1.75em;
  }

  .product-gallery__arrow {
    padding: 0.45em;
  }
}

/* ==================== PRODUCTS PAGE - GSAP FLIP LAYOUT GRID ==================== */

/* Products toolbar (filter buttons left, layout buttons right) */
.products-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0 var(--gutter-right) 0 var(--gutter-left);
  margin-bottom: 2em;
}

/* Layout buttons container */
.layout-buttons {
  display: flex;
  gap: 1.25em;
}

/* Filter dropdown wrapper — acts as the unified visual container */
.filter-dropdown {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  z-index: var(--z-above-content);
}

/* Filter dropdown toggle button */
.filter-dropdown__toggle {
  font-size: var(--text-body);
  font-weight: 600;
  padding: 0;
  background: none;
  border: none;
  color: var(--color-text);
  border-radius: 0;
  cursor: none !important;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5em;
  white-space: nowrap;
  width: auto;
}

/* Filter dropdown hover removed — uses underline animation instead */

/* Filter icon in toggle */
.filter-dropdown__icon {
  flex-shrink: 0;
  width: 0.85em;
  height: 0.85em;
}

/* Plus/minus indicator */
.filter-dropdown__indicator {
  position: relative;
  display: inline-block;
  width: 0.75em;
  height: 0.75em;
  vertical-align: middle;
  overflow: hidden;
  text-indent: -9999px; /* Hide text content */
}

/* Horizontal line (minus) - always visible */
.filter-dropdown__indicator::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 100%;
  height: 0.125em;
  background-color: currentColor;
}

/* Vertical line (plus) - rotates to horizontal when active */
.filter-dropdown__indicator::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0.125em;
  height: 100%;
  background-color: currentColor;
  transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}

/* Active state - rotate vertical line to horizontal (forming minus) */
.filter-dropdown__indicator.is--active::after {
  transform: translateX(-50%) rotate(90deg);
}

/* Dropdown panel — size controlled by GSAP */
.filter-dropdown__panel {
  height: 0;
  width: 0;
  overflow: hidden;
}

/* Panel stretches when dropdown is open */
.filter-dropdown.is--open .filter-dropdown__panel {
  width: auto;
}

/* Panel inner (provides padding and layout) */
.filter-dropdown__panel-inner {
  padding: 0.5em 0 0.25em;
  display: flex;
  flex-direction: column;
  gap: 0.65em;
  white-space: nowrap;
}

/* Checkbox option row */
.filter-dropdown__option {
  display: flex;
  align-items: center;
  gap: 0.6em;
  cursor: none !important;
}

/* Hide native checkbox */
.filter-dropdown__option input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* Custom checkbox */
.filter-dropdown__checkbox {
  flex-shrink: 0;
  width: 0.8em;
  height: 0.8em;
  border: 0.09375em solid var(--color-text);
  background: transparent;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

/* Checkmark (always present, hidden when unchecked) */
.filter-dropdown__checkbox::after {
  content: '';
  width: 0.22em;
  height: 0.42em;
  border: solid var(--color-bg);
  border-width: 0 0.09375em 0.09375em 0;
  transform: rotate(45deg) scale(0);
  margin-top: -0.08em;
  opacity: 0;
  transition: transform 0.2s cubic-bezier(0.2, 0, 0.2, 1), opacity 0.2s ease;
}

/* Checkbox checked state */
.filter-dropdown__option input[type="checkbox"]:checked + .filter-dropdown__checkbox {
  background-color: var(--color-text);
  border-color: var(--color-text);
}

/* Checkmark visible when checked */
.filter-dropdown__option input[type="checkbox"]:checked + .filter-dropdown__checkbox::after {
  transform: rotate(45deg) scale(1);
  opacity: 1;
}

/* Option label text */
.filter-dropdown__label {
  font-size: var(--text-body);
  font-weight: 400;
  color: var(--color-text);
  transition: font-weight 0.2s ease;
}

/* Heavier label weight when checked */
.filter-dropdown__option input[type="checkbox"]:checked ~ .filter-dropdown__label {
  font-weight: 450;
}

/* Card filter states */
.layout-card[data-filter-status="not-active"] {
  display: none;
}

/* Layout toggle button */
.layout-btn {
  font-size: var(--text-body);
  font-weight: 600;
  padding: 0;
  background: none;
  border: none;
  color: var(--color-text);
  cursor: none !important;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  opacity: 0.45;
  transition: opacity 0.3s ease;
}

.layout-btn.is--active {
  opacity: 1;
}

/* Layout button grid icon */
.layout-btn__icon {
  flex-shrink: 0;
  width: 0.5em;
  height: 0.5em;
}

/* Active layout button — persistent underline */
.layout-btn.is--active [data-underline-link]::before {
  transform-origin: left;
  transform: scaleX(1) rotate(0.001deg);
}

/* Layout grid collection (holds the flex list, animated height) */
.layout-grid__collection {
  position: relative;
}

/* Layout grid list (flexbox wrap) */
.layout-grid {
  column-gap: var(--column-gap, 1.5em);
  row-gap: 2em;
  flex-flow: wrap;
  display: flex;
  width: 100%;
  padding: 0 var(--gutter-right) 0 var(--gutter-left);
  position: relative;
}

/* Layout card item (width set by CSS custom properties) */
.layout-card {
  width: calc((100% - (var(--columns, 3) - 1) * var(--column-gap, 1.5em)) / var(--columns, 3));
  will-change: transform;
  position: relative;
}

/* Layout card inner */
.layout-card__inner {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-card);
  background-color: #DBEBF1;
  aspect-ratio: 3 / 4;
  width: 100%;
}

/* Layout card link */
.layout-card__link {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  text-decoration: none;
  color: inherit;
}

/* Layout card image */
.layout-card__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 1.5em 1em;
  position: absolute;
  top: 0;
  left: 0;
}

/* Layout card image overlay */
.layout-card__link::after {
  content: none;
}

/* Layout card details */
.layout-card__details {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1.25em;
  padding-top: 3em;
  z-index: var(--z-local-2);
  color: var(--color-white);
  background: linear-gradient(to top, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0) 100%);
}

/* Layout card name */
.layout-card__name {
  font-size: 1.25em;
  font-weight: 500;
  margin: 0;
}

/* Layout card tagline */
.layout-card__tagline {
  font-size: 0.8em;
  font-weight: 400;
  opacity: 0.7;
  margin-top: 0.25em;
  color: var(--color-white);
}

/* Layout card size */
.layout-card__size {
  display: block;
  font-size: 0.7em;
  font-weight: 400;
  margin-top: 0.25em;
}

/* Layout card price */
.layout-card__price {
  font-size: 0.9em;
  font-weight: 400;
  opacity: 0.8;
  margin-top: 0.35em;
}

/* Products page header section */
.products-page-header {
  text-align: center;
  padding: 8em var(--gutter-right) 2em var(--gutter-left);
  background-color: var(--color-bg);
}

/* Products page heading */
.products-page-heading {
  font-size: 5em;
  font-weight: 400;
  color: var(--color-text);
  margin: 0;
}


/* Products page heading serif span */
.products-page-heading__serif {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
}

/* Products page subtext */
.products-page-subtext {
  font-size: 1.25em;
  font-weight: 400;
  color: var(--color-text);
  max-width: 48em;
  margin: 1em auto 0;
}

/* Products page content wrapper */
.products-page-content {
  padding: 2em 0 4em;
  background-color: var(--color-bg);
}

/* Layout status: large (default) */
[data-layout-status="large"] {
  --columns: 3;
  --column-gap: 1.5em;
}

/* Layout status: small */
[data-layout-status="small"] {
  --columns: 5;
  --column-gap: 1em;
}

/* Card name transition for size changes */
.layout-card__name {
  transition: font-size 0.65s cubic-bezier(0.65, 0, 0.1, 1);
}

[data-layout-status="small"] .layout-card__price,
[data-layout-status="large"] .layout-card__price {
  transition: opacity 0.3s ease;
}

[data-layout-status="small"] .layout-card__tagline,
[data-layout-status="large"] .layout-card__tagline {
  transition: opacity 0.3s ease, font-size 0.65s cubic-bezier(0.65, 0, 0.1, 1);
}

[data-layout-status="small"] .layout-card__tagline {
  display: none;
}

/* Smaller card names in small view */
[data-layout-status="small"] .layout-card__name {
  font-size: 0.9em;
}

/* Responsive 1024px (tablet) */
@media screen and (max-width: 1024px) {
  [data-layout-status="large"] {
    --columns: 2;
    --column-gap: 1em;
  }
}

/* Responsive 767px */
@media screen and (max-width: 767px) {
  [data-layout-status="large"] {
    --columns: 2;
    --column-gap: 1em;
  }

  [data-layout-status="small"] {
    --columns: 3;
    --column-gap: 0.75em;
  }

  .layout-grid {
    padding: 0 4.75em 0 var(--gutter-left);
  }

  .products-toolbar {
    padding: 0 4.75em 0 var(--gutter-left);
  }

  .layout-card__details {
    padding: 1em;
  }

  .products-page-heading {
    font-size: 3.5em;
  }

  .products-page-subtext {
    font-size: 1.125em;
  }

  .layout-card__tagline {
    font-size: 0.7em;
  }

  .products-page-header {
    padding-top: 6em;
    padding-left: var(--gutter-left);
    padding-right: 4.75em;
  }
}

/* Responsive 479px */
@media screen and (max-width: 480px) {
  [data-layout-status="large"] {
    --columns: 1;
    --column-gap: 0em;
  }

  [data-layout-status="small"] {
    --columns: 2;
    --column-gap: 0.75em;
  }

  .layout-grid {
    padding: 0 4em 0 var(--gutter-left);
  }

  .products-toolbar {
    padding: 0 4em 0 var(--gutter-left);
    flex-wrap: wrap;
    gap: 0.75em;
  }

  .products-page-heading {
    font-size: 2.5em;
  }

  .products-page-subtext {
    font-size: 1em;
  }

  .layout-card__tagline {
    font-size: 0.7em;
  }

  .products-page-header {
    padding-top: 5.5em;
    padding-left: var(--gutter-left);
    padding-right: 4em;
  }
}

/* --------------------------------- Shopping Cart Panel --------------------------------- */

.cart-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-cart-overlay);
  background-color: transparent;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, background-color 0.3s ease;
}

.cart-overlay.active {
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 1;
  pointer-events: auto;
}

.cart-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-cart-panel);
  width: 28em;
  max-width: 100%;
  /* iOS 26 Safari Liquid Glass fix: background-color MUST be transparent when
     hidden. Safari intermittently races its tint sampling before visibility:hidden
     takes effect — if it reads #E4F4F8, the Liquid Glass shows grey on the
     status bar. Transparent bg + visibility:hidden = belt and suspenders. */
  background-color: transparent;
  color: var(--color-text);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1),
              background-color 0s linear 0.4s,
              visibility 0s linear 0.4s;
  box-shadow: -0.25em 0 1.5em rgba(0, 0, 0, 0.1);
  visibility: hidden;
}

.cart-panel[data-cart-status="active"] {
  background-color: var(--color-bg);
  transform: translateX(0);
  visibility: visible;
  transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1),
              background-color 0s linear 0s,
              visibility 0s linear 0s;
}

.cart-panel__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.75em 2em;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.cart-panel__title {
  font-size: 2em;
  font-weight: 400;
  margin: 0;
}


.cart-panel__title-serif {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-weight: 400;
}

.cart-panel__close {
  background: none;
  border: none;
  cursor: pointer;
  width: 2em;
  height: 2em;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  overflow: hidden;
}

.cart-panel__close-bar {
  background-color: var(--color-text);
  width: 2em;
  height: 0.125em;
  position: absolute;
  transition: transform 0.5s cubic-bezier(.7, 0, .3, 1);
}

.cart-panel__close-bar:nth-child(1) {
  transform: rotate(45deg) scale(1, 1);
}

.cart-panel__close-bar:nth-child(2) {
  transform: rotate(-45deg) scale(1, 1);
}

@media (hover: hover) and (pointer: fine) {
  .cart-panel__close:hover .cart-panel__close-bar:nth-child(1) {
    transform: rotate(45deg) scale(0.7, 1);
  }

  .cart-panel__close:hover .cart-panel__close-bar:nth-child(2) {
    transform: rotate(-45deg) scale(0.7, 1);
  }
}

.cart-panel__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 1.5em 2em;
  display: flex;
  flex-direction: column;
}

.cart-panel__body::-webkit-scrollbar {
  width: 0.25em;
}

.cart-panel__body::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 0.125em;
}

.cart-panel__empty {
  text-align: center;
  color: var(--color-text);
  font-weight: 400;
  font-size: 1.25em;
  padding: 0 1em;
  margin: auto 0;
  white-space: nowrap;
}

.cart-panel__item {
  display: flex;
  gap: 1.25em;
  padding: 1.25em 0;
  border-bottom: 1px solid var(--color-border);
}

.cart-panel__item:last-child {
  border-bottom: none;
}

.cart-panel__item-image {
  width: 7em;
  object-fit: contain;
  border-radius: 0.5em;
  flex-shrink: 0;
  background-color: #DBEBF1;
  padding: 0.5em;
}

.cart-panel__item-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.25em;
}

.cart-panel__item-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.cart-panel__item-name {
  font-weight: 600;
  font-size: var(--text-body);
  margin: 0;
}

.cart-panel__item-colour {
  font-size: 0.8125em;
  color: var(--color-text);
  margin: 0;
}

.cart-panel__item-price {
  font-size: var(--text-body);
  margin: 0;
}

.cart-panel__item-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
}

.cart-panel__item-quantity {
  display: flex;
  align-items: center;
  gap: 0.75em;
}

.cart-panel__qty-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text);
  padding: 0.625em;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity var(--duration-fast) ease;
}

.cart-panel__qty-btn svg {
  width: 1.125em;
  height: 1.125em;
}

@media (hover: hover) and (pointer: fine) {
  .cart-panel__qty-btn:hover {
    opacity: 0.5;
  }
}

.cart-panel__qty-value {
  font-size: var(--text-body);
  min-width: 1.25em;
  text-align: center;
}

.cart-panel__remove {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-size: 0.8125em;
  color: var(--color-text);
}

.cart-panel__footer {
  padding: 1.5em 2em;
  border-top: 1px solid var(--color-border);
  flex-shrink: 0;
}

.cart-panel__subtotal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.25em;
}

.cart-panel__subtotal-label {
  font-size: 1em;
  font-weight: 600;
}

.cart-panel__subtotal-amount {
  font-size: 1em;
  font-weight: 600;
}

.cart-panel__tax-note {
  font-size: 0.8em;
  font-weight: 400;
  opacity: 0.6;
  text-align: left;
  margin: 0.25em 0 1.25em;
}

.cart-panel__actions {
  display: flex;
  flex-direction: column;
  gap: 0.75em;
}

.cart-panel__checkout-btn {
  background: var(--color-text);
  color: var(--color-white);
  border: none;
  cursor: pointer;
  padding: 0.875em 1.5em;
  border-radius: 0.5em;
  font-size: var(--text-body);
  font-weight: 500;
  transition: opacity 0.3s ease;
}

@media (hover: hover) and (pointer: fine) {
  .cart-panel__checkout-btn:hover {
    opacity: 0.6;
  }
}

.cart-panel__checkout-btn [data-underline-link]::before {
  display: none;
}

.cart-panel__clear-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  align-self: center;
  font-size: 0.8125em;
  color: var(--color-text);
}


/* --------------------------------- Shopping Cart Responsive --------------------------------- */

@media screen and (max-width: 767px) {
  .cart-panel {
    width: 100%;
    font-size: 16px;
  }
  .cart-panel__header {
    padding: 1.5em 1.25em;
  }
  .cart-panel__body {
    padding: 1.25em;
  }
  .cart-panel__footer {
    padding: 1.25em;
  }
}



/* ==================== ABOUT US PAGE ==================== */

/* --- Hero Section --- */
/* About Us — unified section rhythm */
:root {
  --about-section-pad: clamp(3rem, 6vh, 5rem);
}

.about-hero {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  background-color: var(--color-about-dark);
  text-align: center;
  padding: var(--about-section-pad) var(--gutter-right) var(--about-section-pad) var(--gutter-left);
  padding-top: max(var(--about-section-pad), env(safe-area-inset-top, 0px));
}

.about-hero__content {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.about-hero__heading {
  font-weight: 400;
  color: var(--color-white);
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15em;
}

.about-hero__line1 {
  display: block;
  font-size: clamp(1.25rem, 1vw + 1rem, 1.875rem);
  line-height: 1.2;
}

.about-hero__everpure-svg {
  height: 2.667em;
  width: auto;
  max-width: 100%;
  display: block;
  margin: 0.15em auto 0;
}

/* --- Subtext at bottom of viewport --- */
.about-hero__subtext-wrap {
  width: 100%;
  max-width: 42em;
  padding-bottom: 3em;
}

.about-hero__subtext {
  font-size: clamp(0.9375rem, 0.5vw + 0.8125rem, 1.25rem);
  font-weight: 400;
  color: var(--color-white);
  margin: 0;
  text-align: center;
  line-height: 1.6;
}


/* --- About Us Responsive: 767px --- */
@media screen and (max-width: 767px) {
  .about-hero__everpure-svg {
    width: 100%;
    height: auto;
  }

  .about-hero__subtext-wrap {
    padding-bottom: 2em;
  }

  .about-hero__subtext br {
    display: none;
  }
}

/* --- About Us Responsive: 480px --- */
@media screen and (max-width: 480px) {
  .about-hero__subtext-wrap {
    padding-bottom: 1.5em;
  }
}

/* --- Hero Image Section (full-viewport parallax) --- */
.about-image-hero {
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;
  background-color: var(--color-bg);
}

.about-image-hero__img {
  display: block;
  width: 100%;
  height: 115%;
  object-fit: cover;
  object-position: center center;
  position: absolute;
  top: -1%;
  left: 0;
  will-change: transform;
}

/* --- About Image Hero: disable parallax oversizing on tablet/mobile --- */
@media screen and (max-width: 1024px) {
  .about-image-hero__img {
    position: relative;
    top: 0;
    height: 100%;
    will-change: auto;
  }
}

/* --- About Image Hero Responsive: 767px --- */
@media screen and (max-width: 767px) {
  .about-image-hero__img {
    object-position: 67% center;
  }
}

/* --- Manifesto Section (full-viewport text) --- */
.about-manifesto {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-about-dark);
  padding: var(--about-section-pad) var(--gutter-right) var(--about-section-pad) var(--gutter-left);
}

.about-manifesto__text {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: normal;
  font-weight: 400;
  font-size: clamp(2.25rem, 3vw + 1.25rem, 2.75rem);
  color: var(--color-white);
  text-align: center;
  margin: 0;
  max-width: 90vw;
  line-height: 1.35;
}

.about-manifesto__text em {
  font-style: italic;
}

/* --- Manifesto Responsive: 767px --- */
@media screen and (max-width: 767px) {
  .about-manifesto__text br {
    display: none;
  }
}

/* --- Manifesto Responsive: 480px --- clamp() handles fluid scaling */

/* ==================== HORIZONTAL SCROLL: CLARITY / CRAFT / CONFIDENCE ==================== */

.horizontal-scroll {
  overflow: hidden;
  background-color: var(--color-about-dark);
}

.horizontal__wrap {
  display: flex;
  flex-wrap: nowrap;
  width: 300vw; /* 3 panels x 100vw */
}

.horizontal__panel {
  position: relative;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: var(--about-section-pad) var(--gutter-right) var(--about-section-pad) var(--gutter-left);
  background-color: var(--color-about-dark);
}

.horizontal__panel--clarity,
.horizontal__panel--craft,
.horizontal__panel--confidence {
  background-color: var(--color-about-dark);
}

.horizontal__panel-bg {
  position: absolute;
  top: 0;
  left: -10%;
  width: 120%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  will-change: transform;
  pointer-events: none;
}

/* Clarity + Confidence: taller for vertical parallax travel */
.horizontal__panel--clarity .horizontal__panel-bg,
.horizontal__panel--confidence .horizontal__panel-bg {
  top: -10%;
  height: 120%;
}

.horizontal__panel-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(12, 56, 70, 0.55);
  pointer-events: none;
  z-index: var(--z-local-1);
}

/* --- Origin Story Section --- */
.about-origin {
  height: 100vh;
  background-color: var(--color-about-dark);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--about-section-pad) var(--gutter-right) var(--about-section-pad) var(--gutter-left);
  overflow: hidden;
}

.about-origin__heading {
  text-align: center;
  font-size: clamp(1.75rem, 2vw + 0.75rem, 2.5rem);
  font-weight: 400;
  color: var(--color-white);
  margin: 0 0 0.8em;
  line-height: 1.2;
  flex-shrink: 0;
}

.about-origin__heading-sans {
  font-family: 'Instrument Sans', Arial, sans-serif;
}

.about-origin__heading-serif {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
}

.about-origin__inner {
  display: flex;
  align-items: stretch;
  gap: 3.5em;
  max-width: 72em;
  width: 100%;
  flex: 1;
  min-height: 0;
}

.about-origin__image-wrap {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  border-radius: var(--radius-card);
  position: relative;
}

.about-origin__image {
  display: block;
  width: 100%;
  height: 135%;
  object-fit: cover;
  object-position: center center;
  position: absolute;
  top: -20%;
  left: 0;
  will-change: transform;
}

.about-origin__text {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--color-white);
  font-family: 'Instrument Sans', Arial, sans-serif;
  font-size: var(--text-body);
  font-weight: 400;
  line-height: 1.6;
  opacity: 0.9;
}

.about-origin__text p {
  margin: 0 0 1em;
}

.about-origin__text p:last-child {
  margin-bottom: 0;
}


/* --- Origin Responsive: 1024px --- */
@media screen and (max-width: 1024px) {
  .about-origin__inner {
    gap: 2.5em;
  }

  .about-origin__text {
    font-size: 0.875em;
  }
}

/* --- Origin Responsive: 767px --- */
@media screen and (max-width: 767px) {
  .about-origin {
    height: auto;
    min-height: 100vh;
  }

  .about-origin__inner {
    flex-direction: column;
    gap: 2em;
    flex: none;
  }

  .about-origin__image-wrap {
    flex: none;
    width: 100%;
    height: 40vh;
    order: 2;
  }

  .about-origin__text {
    order: 1;
  }

  .about-origin__heading {
    margin-bottom: 0.6em;
  }

  .about-origin__text {
    font-size: var(--text-body);
  }
}

/* --- Origin Responsive: 480px --- */
@media screen and (max-width: 480px) {
  .about-origin__image-wrap {
    height: 35vh;
  }

  .about-origin__text {
    font-size: var(--text-small);
    line-height: 1.55;
  }
}

/* Post-confidence section: source statement + parallax trigger */
.confidence-parallax-trigger {
  height: 100vh;
  background-color: var(--color-about-dark);
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-source__content {
  text-align: center;
  width: 100%;
  padding: 2em var(--gutter-right) 2em var(--gutter-left);
}

.about-source__heading {
  font-family: 'Instrument Sans', Arial, sans-serif;
  font-style: normal;
  font-weight: 400;
  color: var(--color-white);
  font-size: clamp(2rem, 3vw + 1rem, 4.5rem);
  margin: 0 0 1em 0;
  line-height: 1.3;
}

.about-source__heading em {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
}

.about-source__line {
  display: block;
}

.about-source__body {
  font-weight: 400;
  color: var(--color-white);
  font-size: 1em;
  margin: 0 0 1.25em;
  line-height: 1.6;
}

.horizontal__panel-content {
  position: relative;
  z-index: var(--z-local-2);
  width: 100%;
}

.horizontal__heading {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  color: var(--color-white);
  font-size: clamp(2.75rem, 3vw + 1.5rem, 5.5rem);
  margin-bottom: 0.5em;
  line-height: 1.15;
}

.horizontal__body {
  font-weight: 400;
  color: var(--color-white);
  font-size: clamp(1rem, 0.25vw + 0.9375rem, 1.25rem);
  opacity: 0.85;
  margin-bottom: 1em;
  line-height: 1.6;
}

.horizontal__body:last-child {
  margin-bottom: 0;
}

/* --- Horizontal Scroll Responsive: 767px (keep horizontal scroll, adjust text) --- */
@media screen and (max-width: 767px) {
  .horizontal__heading {
    margin-bottom: 0.5em;
  }
}

/* --- Horizontal Scroll Responsive: 480px --- clamp() handles fluid scaling */

/* --- Horizontal Scroll Responsive: 1024px (stack vertically on mobile/tablet) --- */
@media screen and (max-width: 1024px) {
  .horizontal-scroll {
    overflow: visible;
  }

  .horizontal__wrap {
    flex-direction: column;
    width: 100%;
  }

  .horizontal__panel {
    width: 100%;
    min-height: 100vh;
    min-height: 100svh; /* Mobile Safari address bar handling */
    height: auto;
  }

  .horizontal__panel-bg {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  /* Reset vertical parallax oversizing for stacked layout */
  .horizontal__panel--clarity .horizontal__panel-bg,
  .horizontal__panel--confidence .horizontal__panel-bg {
    top: 0;
    height: 100%;
  }
}

/* --- WaterMark Certification Section --- */

.watermark-cert {
  height: 100vh;
  background: var(--color-about-dark);
  display: flex;
  align-items: center;
  padding: var(--about-section-pad) var(--gutter-right) var(--about-section-pad) var(--gutter-left);
}

.watermark-cert__grid {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 3em;
  align-items: center;
  max-width: 1400px;
  margin: 0 auto;
}

.watermark-cert__heading {
  font-size: clamp(2rem, 2.5vw + 1rem, 3.5rem);
  font-weight: 400;
  color: var(--color-white);
  margin-bottom: 1em;
  line-height: 1.1;
}

.watermark-cert__heading-sans {
  font-family: 'Instrument Sans', system-ui, sans-serif;
  font-style: normal;
}

.watermark-cert__heading-serif {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
}

.watermark-cert__body {
  font-family: 'Instrument Sans', system-ui, sans-serif;
  font-size: var(--text-body);
  color: var(--color-white);
  line-height: 1.7;
  margin-bottom: 1.25em;
}

.watermark-cert__closing {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-size: 1.125em;
  color: var(--color-white);
  margin-top: 2em;
  padding-left: 1.5em;
  border-left: 3px solid var(--color-white);
  line-height: 1.5;
}

/* --- Glass Badge Card Variant --- */
.glass-badge--card {
  border-radius: var(--radius-card);
  padding: 0;
  text-align: center;
  background: transparent;
  border: none;
  min-height: 28em;
}

@media (max-width: 767px) {
  .watermark-cert {
    height: auto;
    min-height: 100vh;
  }

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

  .glass-badge--card {
    margin-top: 2em;
    min-height: 22em;
  }
}

@media (max-width: 480px) {
  .glass-badge--card {
    min-height: 18em;
  }
}

/* ─────────────────────────────────────────────
   Scroll-Scrub "Why We Exist" Section
   ───────────────────────────────────────────── */
.scrub-track {
  height: 300vh;
  position: relative;
  background-color: var(--color-bg);
}

.scrub-sticky {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding-left: var(--gutter-left);
  padding-right: var(--gutter-right);
}

.scrub-text-block {
  font-size: clamp(2rem, 5vw, 4.5rem);
  line-height: 1.15;
  text-align: center;
  max-width: 1200px;
  font-family: 'Instrument Serif', serif;
  color: var(--color-text, #2F4156);
}

.scrub-line {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(40px);
  will-change: opacity, transform;
}

.scrub-italic {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
}

/* Image mask – starts at 0 width, revealed by JS */
.scrub-img-wrap {
  display: inline-flex;
  width: 0;
  height: 0.9em;
  margin: 0;
  overflow: hidden;
  vertical-align: middle;
  border-radius: 4px;
}

.scrub-img-wrap img {
  height: 100%;
  width: 1.6em;
  max-width: none;
  object-fit: cover;
  object-position: center;
}

/* Word-space on desktop, line break on mobile */
.scrub-break {
  flex: 0 0 0.25em;
  height: 0;
  overflow: hidden;
}

/* ── Responsive adjustments ── */
@media (max-width: 768px) {
  .scrub-text-block {
    font-size: clamp(28px, 9vw, 48px);
    max-width: 90vw;
  }

  .scrub-line {
    white-space: normal;
    flex-wrap: wrap;
  }

  .scrub-break {
    flex: 0 0 100%;
    height: 0;
  }

  .scrub-track {
    height: 260vh;
  }
}


/* ═══════════════════════════════════════════════════════════════
   LEGAL PAGES (Privacy Policy, Terms of Use)
   ═══════════════════════════════════════════════════════════════ */

/* ── Header section ── */
.legal-page-header {
  padding: 8em var(--gutter-right) 2em var(--gutter-left);
  background-color: var(--color-bg);
}

.legal-page-heading {
  font-size: 3em;
  font-weight: 400;
  color: var(--color-text);
  margin: 0 0 1.67em;
  font-family: 'Instrument Sans', Arial, sans-serif;
}

.legal-page-subtext {
  font-size: 1.0625em;
  font-weight: 400;
  color: var(--color-text);
  margin: 0;
  line-height: 1.7;
}

/* ── Expand all / Collapse all toggle ── */
.legal-expand-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin-top: 2.5em;
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-text);
  background: none;
  border: 1px solid var(--color-text);
  border-radius: 2em;
  cursor: pointer;
  padding: 0.6em 1.2em;
  font-family: inherit;
  transition: background-color 0.3s ease, color 0.3s ease;
}

@media (hover: hover) and (pointer: fine) {
  .legal-expand-toggle:hover {
    background-color: var(--color-text);
    color: var(--color-bg);
  }
}

/* Plus/minus indicator (mirrors .filter-dropdown__indicator) */
.legal-expand-toggle__indicator {
  position: relative;
  display: inline-block;
  width: 0.75em;
  height: 0.75em;
  vertical-align: middle;
  overflow: hidden;
}

.legal-expand-toggle__indicator::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 100%;
  height: 0.125em;
  background-color: currentColor;
}

.legal-expand-toggle__indicator::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0.125em;
  height: 100%;
  background-color: currentColor;
  transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}

.legal-expand-toggle__indicator.is--active::after {
  transform: translateX(-50%) rotate(90deg);
}

/* ── Content area ── */
.legal-page-content {
  padding: 3em var(--gutter-right) 5em var(--gutter-left);
  background-color: var(--color-bg);
}

/* ── Accordion list ── */
.legal-accordion {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

.legal-accordion .faq-section__trigger {
  font-size: 1.375em;
  padding: 1.5em 0;
}

.legal-accordion .faq-section__item {
  border-bottom: 1px solid var(--color-shadow-light);
}

.legal-accordion .faq-section__item:first-child {
  border-top: 1px solid var(--color-shadow-light);
}

/* ── Body text inside accordion ── */
.legal-accordion__body-text {
  font-size: 1em;
  font-weight: 400;
  color: var(--color-text);
  line-height: 1.75;
  padding-bottom: 2em;
}

.legal-accordion__body-text p {
  margin: 0 0 1em 0;
}

.legal-accordion__body-text ul {
  padding-left: 1.25em;
  margin: 0 0 1em 0;
  list-style-type: disc;
}

.legal-accordion__body-text ul li {
  margin-bottom: 0.75em;
}

.legal-accordion__body-text a {
  text-decoration: none;
  position: relative;
}

.legal-accordion__body-text a::before {
  content: "";
  position: absolute;
  bottom: -0.0625em;
  left: 0;
  width: 100%;
  height: var(--border-thin);
  background-color: currentColor;
  transition: var(--transition-underline);
  transform-origin: right;
  transform: var(--transform-reset);
}

@media (hover: hover) and (pointer: fine) {
  .legal-accordion__body-text a:hover::before {
    transform-origin: left;
    transform: scaleX(1) rotate(0.001deg);
  }
}

.legal-accordion__body-text strong {
  font-weight: 600;
}

/* ── Legal page responsive breakpoints ── */
@media (max-width: 1024px) {
  .legal-page-header {
    padding-top: 6em;
  }
  .legal-page-heading {
    font-size: 2.5em;
    margin-bottom: 1.67em;
  }
  .legal-page-subtext {
    font-size: 1em;
  }
  .legal-accordion .faq-section__trigger {
    font-size: 1.25em;
    padding: 1.25em 0;
  }
}

@media (max-width: 480px) {
  .legal-page-header {
    padding-top: 5.5em;
  }
  .legal-page-heading {
    font-size: 2em;
    margin-bottom: 1.67em;
  }
  .legal-page-subtext {
    font-size: 0.9375em;
  }
  .legal-accordion .faq-section__trigger {
    font-size: 1.125em;
    padding: 1.125em 0;
  }
  .legal-accordion__body-text {
    font-size: 0.9375em;
  }
}

/* Form Feedback Banners */
.form-feedback {
  padding: 0.875rem 1.25rem;
  margin-top: 1rem;
  border-radius: 0.5rem;
  font-family: 'Instrument Sans', sans-serif;
  font-size: 0.875rem;
  line-height: 1.5;
  transition: opacity 0.3s ease;
}

.form-feedback--success {
  background-color: rgba(45, 80, 22, 0.08);
  border: 1px solid rgba(45, 80, 22, 0.2);
  color: #2d5016;
}

.form-feedback--error {
  background-color: rgba(139, 0, 0, 0.06);
  border: 1px solid rgba(139, 0, 0, 0.15);
  color: #8b0000;
}

.form-feedback--hiding {
  opacity: 0;
}

.contact-form__submit.is-submitting {
  opacity: 0.6;
  pointer-events: none;
}

/* Screen-reader only utility */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==================== REDUCED MOTION ==================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}