/* ==========================================================================
   Dorien — Global styles
   Fonts: Young Serif (headings), Khula (body)
   Design tokens mirror the Figma "SEGA Design System" variables.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Khula:wght@400;600;700&family=Young+Serif&display=swap');

:root {
  --surface-white: #ffffff;
  --surface-black: #000000;
  --surface-action: #003399;
  --surface-light-blue: #f8fbff;
  --surface-footer: #252525;

  --text-body: #000000;
  --text-headings: #003399;
  --text-action: #003399;
  --text-placeholder: #737373;
  --text-on-action: #ffffff;

  --border-default: #e5e5e5;

  --radius-sm: 8px;
  --radius-md: 12px;

  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.06);

  --font-body: 'Khula', system-ui, sans-serif;
  --font-heading: 'Young Serif', Georgia, serif;
}

/* ---------- Base -------------------------------------------------------- */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text-body);
  background: var(--surface-white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 400; margin: 0; }

.font-heading { font-family: var(--font-heading); }
.font-body { font-family: var(--font-body); }

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

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

/* ---------- Layout helpers --------------------------------------------- */
.container-page { width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: 32px; }

/* ---------- Buttons ----------------------------------------------------- */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  background: var(--surface-action);
  border: 1px solid var(--surface-action);
  color: var(--text-on-action);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  line-height: 18px;
  box-shadow: var(--shadow-xs);
  transition: background-color .2s ease, border-color .2s ease;
}
.btn-primary:hover { background: #002081; border-color: #002081; }
.btn-primary img { width: 20px; height: 20px; filter: brightness(0) invert(1); }
.btn-primary__label { padding-top: 4px; }

/* ---------- Product Detail: Values row ---------------------------------- */
.pdp-values { display: flex; align-items: center; gap: 8px; width: 100%; max-width: 464px; }
.pdp-values__item { display: flex; flex: 1 0 0; min-width: 0; flex-direction: column; align-items: center; gap: 8px; }
.pdp-values__icon { width: 40px; height: 40px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.pdp-values__icon img { display: block; max-width: 100%; max-height: 100%; }
.pdp-values__item span { font-family: var(--font-body); font-weight: 600; font-size: 12px; line-height: 16px; color: var(--text-body); text-align: center; }

/* Ghost / text link with animated underline loader */
.link-cta {
  display: inline-flex;
  flex-direction: column;
  gap: 8px;
  width: max-content;
  min-width: 100px;
  white-space: nowrap;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  color: var(--text-body);
  cursor: pointer;
}
.link-cta .link-cta__row { display: flex; align-items: center; justify-content: space-between; gap: 24px; white-space: nowrap; }
.link-cta .link-cta__icon { position: relative; width: 20px; height: 20px; overflow: hidden; flex-shrink: 0; }
.link-cta .link-cta__icon img {
  position: absolute; top: 0; left: 0; width: 20px; height: 20px;
  transition: transform .3s ease-out;
}
.link-cta .link-cta__icon img:first-child { transform: translateY(0); }
.link-cta .link-cta__icon img:last-child { transform: translateY(20px); }
.link-cta:hover .link-cta__icon img:first-child { transform: translateY(-20px); }
.link-cta:hover .link-cta__icon img:last-child { transform: translateY(0); }
.link-cta .link-cta__line { position: relative; height: 1px; width: 100%; background: var(--border-default); overflow: hidden; }
.link-cta .link-cta__line::after {
  content: "";
  position: absolute; inset: 0 100% 0 0;
  background: var(--surface-action);
  transition: inset .3s ease-out;
}
.link-cta:hover .link-cta__line::after { inset: 0 0 0 0; }

/* ---------- Header ------------------------------------------------------ */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  justify-content: center;
  padding: 14px 24px;
  transition: background-color .3s ease, box-shadow .3s ease, backdrop-filter .3s ease;
}
.site-header__inner {
  width: 100%;
  max-width: 1280px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  transition: background-color .3s ease, box-shadow .3s ease;
}
/* Scrolled state — pill turns opaque */
.site-header.is-scrolled .site-header__inner,
.site-header.header-solid .site-header__inner {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-xs);
}
/* Expanded mobile menu — header flattens to a plain bar (no pill/shadow/blur) */
@media (max-width: 1024px) {
  .site-header.mobile-menu-open { padding: 0 16px; height: 72px; align-items: center; background: var(--surface-white, #fff); }
  .site-header.mobile-menu-open .site-header__inner,
  .site-header.mobile-menu-open.is-scrolled .site-header__inner,
  .site-header.mobile-menu-open.header-solid .site-header__inner {
    background: none;
    backdrop-filter: none;
    box-shadow: none;
    border-radius: 0;
    padding: 8px 12px;
  }
  .site-header.mobile-menu-open .header-logo-mark { width: 24px; height: 24px; filter: none; }
}
/* Inner pages: reserve space under the fixed header */
.page-offset { padding-top: 80px; }
.nav-link {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding-top: 4px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  color: var(--text-body);
  position: relative;
  transition: color .2s ease;
}
/* No underline rule/animation. The active page keeps the default text
   colour — only hover tints. */
.nav-link:hover { color: var(--surface-action); }

.header-divider { border-left: 1px solid var(--border-default); height: 24px; }

.header-logo-mark { transition: filter .2s ease; }

/* On hero (top, not scrolled) the nav text is white for contrast against the photo. */
.site-header.on-hero:not(.is-scrolled) .nav-link,
.site-header.on-hero:not(.is-scrolled) .header-svc { color: #ffffff; }
.site-header.on-hero:not(.is-scrolled) .header-logo-mark { filter: brightness(0) invert(1); }
.site-header.on-hero:not(.is-scrolled) .header-divider { border-color: rgba(255,255,255,.4); }
.site-header.on-hero:not(.is-scrolled) .nav-toggle { color: #fff; }

/* Low-contrast override: some hero banners (e.g. the light-background product
   grid) don't have enough contrast for white text, so switch back to the
   default dark/blue treatment while that banner is active. */
.site-header.on-hero.is-low-contrast:not(.is-scrolled) .nav-link,
.site-header.on-hero.is-low-contrast:not(.is-scrolled) .header-svc { color: var(--text-body); }
.site-header.on-hero.is-low-contrast:not(.is-scrolled) .header-logo-mark { filter: none; }
.site-header.on-hero.is-low-contrast:not(.is-scrolled) .header-divider { border-color: var(--border-default); }
.site-header.on-hero.is-low-contrast:not(.is-scrolled) .nav-toggle { color: var(--text-body); }

/* ---------- Product cards ----------------------------------------------
   Two Figma variants — Right (odd cards: 1st, 3rd, 5th...) tilts clockwise
   on hover, Left (even cards) tilts counter-clockwise. Default state is
   identical for both; only the hover interaction differs by variant.     */
.product-card-slot {
  width: 296px;
  height: 340px;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 276px;
  padding: 40px 8px 20px;
  background: var(--surface-white);
  border: 1px solid rgba(229, 229, 229, 0.6);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: transform .35s ease;
  overflow: hidden;
}
.product-card--right:hover, .product-card--right:focus-visible { transform: rotate(3deg); }
.product-card--left:hover, .product-card--left:focus-visible { transform: rotate(-3deg); }

.product-card__img { width: 220px; height: 220px; display: flex; align-items: center; justify-content: center; }
.product-card__img img { max-width: 100%; max-height: 100%; object-fit: contain; transition: opacity .3s ease; }
.product-card:hover .product-card__img img,
.product-card:focus-visible .product-card__img img { opacity: .2; }

.product-card__name { font-family: var(--font-heading); font-size: 18px; line-height: 24px; color: var(--text-body); }
.product-card__no { position: absolute; left: 11px; top: 11px; color: var(--surface-action); font-family: var(--font-body); font-weight: 600; }
.product-card__no .sm { font-size: 12px; }
.product-card__no .lg { font-size: 20px; }
.product-card__cat {
  position: absolute; right: 12px; top: 24px;
  writing-mode: vertical-rl;
  font-family: var(--font-body); font-weight: 600; font-size: 15px;
  color: var(--text-placeholder); opacity: .8;
}

/* Hover CTA: a large circular button centered over the product image.
   It's counter-rotated opposite the card's tilt so it renders upright,
   matching Figma's rendered hover state exactly. */
.product-card__go {
  position: absolute; left: 50%; top: 150px;
  width: 50px; height: 50px; border-radius: 100px;
  background: var(--surface-action);
  border: 1px solid var(--surface-action);
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  box-shadow: var(--shadow-xs);
  transition: opacity .3s ease;
  pointer-events: none;
}
.product-card--right .product-card__go { transform: translate(-50%, -50%) rotate(-3deg); }
.product-card--left .product-card__go { transform: translate(-50%, -50%) rotate(3deg); }
.product-card:hover .product-card__go,
.product-card:focus-visible .product-card__go { opacity: 1; }
.product-card__go img { width: 20px; height: 20px; filter: brightness(0) invert(1); }

/* ---------- Product detail: recently viewed ----------------------------- */
.recently-viewed { display: none; background: var(--surface-white); }
.recently-viewed.has-items { display: block; }
.recently-viewed__inner { display: flex; flex-direction: column; align-items: center; gap: 48px; padding: 64px 24px; }
.recently-viewed__title { font-family: var(--font-heading); font-size: 36px; line-height: 36px; letter-spacing: -0.72px; color: var(--text-body); }
.recently-viewed__grid { display: flex; flex-wrap: wrap; gap: 2px; align-items: flex-start; justify-content: center; max-width: 1200px; width: 100%; }

/* ---------- Lifestyle banner -------------------------------------------
   Desktop frame + crop. Both the frame ratio and the image's offsets scale
   together, so the photo keeps its native 1.668 ratio at any width. The
   mobile override lives in the responsive block further down. */
.lifestyle-banner { aspect-ratio: 1440 / 428; }
.lifestyle-banner img {
  left: -0.8%; top: -72.8%; width: 107.5%; height: 216.76%;
  object-fit: cover;
}

/* ---------- Section watermark ------------------------------------------ */
.watermark {
  position: absolute;
  font-family: var(--font-heading);
  font-size: 180px;
  line-height: 72px;
  letter-spacing: -3.6px;
  color: var(--surface-action);
  opacity: .03;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

/* ---------- Support cards ---------------------------------------------- */
.support-card {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 24px;
  text-align: center;
}
.support-card__top { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; }
.support-icon { width: 100px; height: 100px; display: flex; align-items: center; justify-content: center; }
.support-icon img { width: 56px; height: 56px; object-fit: contain; }
.support-card h3 { font-size: 24px; line-height: 24px; }
.support-card p { font-size: 18px; line-height: 24px; opacity: .8; margin: 12px 0 0; }
.support-divider { width: 2px; height: 200px; background: var(--border-default); }

/* Button grows (less inset) on hover/focus — matches Figma's Default -> Hover
   padding change exactly, instead of lifting the whole card. */
.support-card__btn {
  position: relative; width: 32px; height: 32px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.support-card__btn::before {
  content: "";
  position: absolute; inset: 4px;
  border-radius: 100px;
  background: var(--surface-action);
  box-shadow: var(--shadow-xs);
  transition: inset .25s ease;
}
.support-card__btn img {
  position: relative; z-index: 1;
  width: 20px; height: 20px;
  filter: brightness(0) invert(1);
}
.support-card:hover .support-card__btn::before,
.support-card:focus-visible .support-card__btn::before { inset: 1px; }

/* ---------- Footer ------------------------------------------------------ */
.site-footer { background: var(--surface-white); box-shadow: 0 -2px 2.5px rgba(0,0,0,.03); }
.footer-logo { width: 123.738px; flex: 1 0 0; aspect-ratio: 123.74 / 28.00; }
.footer-col-title {
  display: flex; align-items: center; height: 40px;
  border-bottom: 1px solid var(--border-default);
  font-family: var(--font-body); font-weight: 600; font-size: 16px; color: var(--text-body);
}
.footer-link {
  display: flex; align-items: center; height: 40px;
  font-family: var(--font-body); font-weight: 600; font-size: 16px;
  color: var(--text-placeholder);
  transition: color .2s ease;
}
.footer-link:hover { color: var(--surface-action); }
.footer-contact { display: flex; align-items: center; gap: 8px; height: 28px; font-weight: 600; font-size: 16px; }
.footer-contact img { width: 18px; height: 18px; }
.back-to-top {
  width: 48px; height: 48px; border-radius: 100px;
  background: var(--surface-action);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-xs);
  transition: transform .2s ease, background-color .2s ease;
}
.back-to-top:hover { transform: translateY(-2px); background: #04246b; }
.back-to-top img { filter: brightness(0) invert(1); }
.footer-social {
  width: 28px; height: 28px;
  object-fit: contain;
  transition: transform .2s ease, opacity .2s ease;
  opacity: .85;
}
.footer-social:hover { transform: translateY(-2px); opacity: 1; }
.footer-bottom { background: var(--surface-footer); }

/* ---------- Mobile menu ------------------------------------------------- */
.nav-toggle { color: var(--text-body); position: relative; width: 40px; height: 40px; }
.nav-toggle__hamburger, .nav-toggle__close { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.nav-toggle__close { display: none; }
.nav-toggle__close img { width: 14px; height: 14px; }
.nav-toggle.is-open .nav-toggle__hamburger { display: none; }
.nav-toggle.is-open .nav-toggle__close { display: flex; }
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 45;
  background: var(--surface-white, #fff);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
  overflow-y: auto;
}
.mobile-menu.is-open { opacity: 1; pointer-events: auto; }
.mobile-menu__panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  padding: 96px 0 32px;
}
.mobile-menu__links { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.mobile-menu__panel a {
  font-family: var(--font-body); font-weight: 600; font-size: 16px;
  color: var(--text-body);
  padding: 12px 16px;
  text-align: center;
}
.mobile-menu__social { display: flex; align-items: center; gap: 24px; padding: 4px 0; }
.mobile-menu__social img { width: 28px; height: 28px; object-fit: contain; }
.mobile-menu__copyright { font-family: var(--font-body); font-size: 14px; color: var(--text-placeholder); text-align: center; }

/* ---------- Hero -------------------------------------------------------- */
.hero {
  position: relative;
  aspect-ratio: 1440 / 800;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #efe6da;
}
.hero__bg { position: absolute; inset: 0; overflow: hidden; }

/* Individual carousel slides, cross-fade between .is-active states. */
.hero__banner {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 1s ease;
}
.hero__banner.is-active { opacity: 1; z-index: 1; }
.hero__banner-img { width: 100%; height: 100%; object-fit: cover; }
.hero__banner-tint { position: absolute; inset: 0; background: rgba(128, 87, 42, 0.25); }
.hero__banner-glow {
  position: absolute; left: 50%; top: 56%; width: 809px; height: 346px;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(152, 87, 39, 0.1), rgba(152, 87, 39, 0) 70%);
  filter: blur(20px);
  pointer-events: none;
}
.hero__content {
  position: relative; z-index: 2; text-align: center; padding: 0 24px;
  opacity: 1; transition: opacity .6s ease;
}
/* Only banner 1 carries the main wordmark + tagline (per Figma); hide it
   while any other banner is active so it doesn't clash with banner 2's
   own embedded wordmark or sit oddly over banners 3-5's plain photos. */
.hero__content.is-hidden { opacity: 0; pointer-events: none; }
.hero__logo { width: 300px; height: 66.82px; max-width: 70vw; margin: 0 auto 18px; }
.hero__tagline {
  font-family: var(--font-body); font-weight: 700; font-size: 20px; line-height: 24px;
  color: #fff;
}
/* Decorative "shelf" — purely visual, not clickable; only the Scroll Down
   button sitting on it is interactive. Laid out as the Figma row:
   fillet | flexing bar | FIXED 260px notch | flexing bar | fillet.
   Pinning the notch and letting only the flat bars flex is what stops the
   curve from stretching — a single full-width wave image distorts it. */
.scroll-shelf {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 24px;
  z-index: 2;
  pointer-events: none;
  display: flex;
  align-items: flex-end;
  overflow: visible; /* the notch bulge rises above the shelf */
}
.scroll-shelf__bar { flex: 1 1 0; min-width: 0; height: 24px; background: #fff; }
.scroll-shelf__notch {
  position: relative;
  flex: 0 0 260px;
  height: 49.787px;
  background: url('../images/scroll-notch.svg') no-repeat 0 0 / 260px 49.787px;
  /* Source is drawn bar-on-top/bulge-below; Figma rotates it so the bulge
     rises and the flat bar lands flush with the neighbouring bars. */
  transform: rotate(180deg);
}
/* The notch shape has 12px-radius ends, which would leave a small bite of
   hero showing where it meets each bar. Figma backs it with a continuous
   rectangle; this does the same. Post-rotation this sits at the bottom. */
.scroll-shelf__notch::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 24px;
  background: #fff;
}
.scroll-shelf__fillet {
  flex: 0 0 24px;
  height: 24px;
  background: #fff;
  border-bottom-left-radius: 63px;
}
.scroll-shelf__fillet--left { transform: rotate(90deg); }
.scroll-shelf__fillet--right { transform: rotate(180deg); }

.scroll-down {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(calc(-50% + 8px));
  z-index: 3;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body); font-weight: 600; font-size: 16px; color: var(--text-body);
  cursor: pointer;
  background: none; border: none; padding: 0;
}
.scroll-down__chevs { position: relative; width: 20px; height: 20px; overflow: hidden; display: inline-block; }
.scroll-down__chevs .chev { position: absolute; left: 0; width: 20px; height: 20px; animation: chev-flow 1.4s linear infinite; }
.scroll-down__chevs .chev:nth-child(1) { top: -20px; }
.scroll-down__chevs .chev:nth-child(2) { top: 0; }
@keyframes chev-flow { to { transform: translateY(20px); } }

/* ---------- Hero entrance animation (from Figma motion, ~2.13s, once) --- */
/* 1) Background/mask: image reveals from a centered circle that expands to
      fill the frame (border-radius 1000px -> 0) over the first ~38%.        */
.hero__bg {
  will-change: clip-path;
  animation: hero-mask 2.134s cubic-bezier(0, -0.002, 0.149, 0.998) both;
}
@keyframes hero-mask {
  0%       { clip-path: inset(31.48% 38.89% 31.48% 38.89% round 200px); }
  38.216%  { clip-path: inset(0% 0% 0% 0% round 0px); }
  100%     { clip-path: inset(0% 0% 0% 0% round 0px); }
}

/* 2) Logo: fades in (46.5% -> 69.4%) and slides down from -50px (-> 84%). */
.hero__logo {
  will-change: opacity, translate;
  animation:
    hero-logo-opacity 2.134s linear both,
    hero-logo-translate 2.134s linear both;
}
@keyframes hero-logo-opacity {
  0%      { opacity: 0; }
  46.495% { opacity: 0; animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); }
  69.362% { opacity: 1; }
  100%    { opacity: 1; }
}
@keyframes hero-logo-translate {
  0%      { translate: 0 -50px; }
  46.495% { translate: 0 -50px; animation-timing-function: ease-out; }
  83.982% { translate: 0 0; }
  100%    { translate: 0 0; }
}

/* 3) Tagline: fades in last (79.3% -> 100%). */
.hero__tagline {
  will-change: opacity;
  animation: hero-tagline 2.134s linear both;
}
@keyframes hero-tagline {
  0%      { opacity: 0; }
  79.343% { opacity: 0; animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); }
  100%    { opacity: 1; }
}

/* Respect users who prefer reduced motion: skip the entrance, show final state,
   and freeze the banner carousel on its first slide (JS also skips autoplay). */
@media (prefers-reduced-motion: reduce) {
  .hero__bg, .hero__logo, .hero__tagline { animation: none; }
  .hero__banner { transition: none; }
}

/* Mobile hero: each banner swaps to a ready-made portrait image (exact
   390:656 crop, exported per-banner from Figma) that already bakes in its
   own logo/tagline/tint treatment — so the shared desktop overlays
   (wordmark+tagline, warm tint, ambient glow) are hidden at this breakpoint
   to avoid doubling up, and the hero's height is driven by the image's
   locked aspect ratio instead of the desktop min-height. */
@media (max-width: 640px) {
  .hero { aspect-ratio: 390 / 656; min-height: 0; }
  .hero__content,
  .hero__banner-tint,
  .hero__banner-glow { display: none; }
}

/* ---------- Breadcrumb -------------------------------------------------- */
.breadcrumb { display: flex; align-items: center; gap: 8px; font-family: var(--font-body); font-weight: 600; font-size: 16px; color: var(--text-placeholder); flex-wrap: wrap; }
.breadcrumb a { color: var(--text-placeholder); transition: color .2s ease; }
.breadcrumb a:hover { color: var(--surface-action); }
.breadcrumb .sep { color: var(--text-placeholder); }
.breadcrumb .current { color: var(--text-body); }

/* ---------- Product gallery -------------------------------------------- */
.gallery { display: flex; flex-direction: column; }
.gallery__main {
  position: relative;
  width: 100%; max-width: 640px; aspect-ratio: 1;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #000;
}
.gallery__main img { width: 100%; height: 100%; object-fit: cover; transition: opacity .3s ease; }
.gallery__nav {
  position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
  width: 48px; height: 48px; border-radius: 100px;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-xs);
  transition: background-color .2s ease, transform .2s ease;
}
.gallery__nav:hover { transform: translateY(calc(-50% - 2px)); }
.gallery__nav img { width: 20px; height: 20px; }
.gallery__nav.prev { right: auto; left: 8px; }
.gallery__thumbs { display: flex; gap: 12px; justify-content: center; padding: 16px 0; }
.gallery__thumb {
  width: 70px; height: 70px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-default);
  overflow: hidden; background: #000; cursor: pointer;
  transition: border-color .2s ease, transform .2s ease;
}
.gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery__thumb:hover { transform: translateY(-2px); }
.gallery__thumb.is-active { border-color: var(--surface-action); border-width: 2px; }

/* ---------- Accordions -------------------------------------------------- */
.acc-item { width: 100%; padding: 32px 0 0; }
.acc-item.is-open { padding-bottom: 32px; }
.acc-head {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 0 13px;
  border-bottom: 1px solid var(--border-default);
  background: none; border-left: 0; border-right: 0; border-top: 0;
  cursor: pointer;
  font-family: var(--font-body); font-weight: 600; font-size: 18px; line-height: 24px; color: var(--text-body);
  text-align: left;
}
.acc-head .acc-icon { width: 20px; height: 20px; flex-shrink: 0; }
.acc-head .acc-icon.minus { display: none; }
.acc-item.is-open .acc-head .acc-icon.minus { display: block; }
.acc-item.is-open .acc-head .acc-icon.plus { display: none; }
.acc-panel {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .35s ease;
}
.acc-item.is-open .acc-panel { grid-template-rows: 1fr; }
.acc-panel > div { overflow: hidden; }
.acc-panel .acc-inner { padding-top: 24px; font-size: 16px; line-height: 24px; color: var(--text-body); }
.acc-panel p { margin: 0 0 4px; }

/* Measurements rows */
.measure-row { padding: 0 0 4px; }
.measure-row .label { font-family: var(--font-body); font-weight: 400; opacity: .8; }
.measure-row .value { font-family: var(--font-body); font-weight: 600; }
.download-link { display: inline-flex; align-items: center; gap: 8px; color: var(--surface-action); font-weight: 600; font-size: 16px; height: 40px; transition: opacity .2s ease; }
.download-link:hover { opacity: .75; }
.download-link img { width: 20px; height: 20px; }
.download-link span { padding-top: 4px; }

/* Size selector (product variants) */
.size-select { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.size-select__label { font-family: var(--font-body); font-weight: 600; font-size: 16px; color: var(--text-body); }
.size-select__options { display: flex; gap: 8px; flex-wrap: wrap; }
.size-pill {
  width: 64px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-default); border-radius: 8px;
  background: transparent;
  font-family: var(--font-body); font-weight: 400; font-size: 16px; color: var(--text-body);
  cursor: pointer; transition: border-color .15s ease, color .15s ease;
  padding-top: 2px;
}
.size-pill:hover { border-color: var(--surface-action); }
.size-pill.is-active { border-color: var(--surface-action); color: var(--text-action); font-weight: 600; }

/* Key features grid */
.feature-grid { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.feature-item { width: 125px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.feature-item .feat-ic { width: 40px; height: 40px; object-fit: contain; }
.feature-item span { font-family: var(--font-body); font-weight: 600; font-size: 14px; line-height: 16px; color: var(--text-body); }

/* ---------- Perfect For scenarios -------------------------------------- */
.scenario-card { display: flex; flex-direction: column; gap: 12px; align-items: center; flex: 1 0 0; min-width: 0; }
.scenario-card__img { position: relative; width: 100%; aspect-ratio: 288 / 327; border-radius: var(--radius-md); overflow: hidden; }
.scenario-card__img--single img { position: absolute; inset: 0; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.scenario-card p { font-family: var(--font-body); font-weight: 600; font-size: 16px; color: var(--text-body); text-align: center; }
.section-heading {
  display: flex; align-items: center;
  border-bottom: 1px solid var(--border-default);
  padding: 8px 0 13px; width: 100%;
}
.section-heading h2 { font-family: var(--font-heading); font-size: 24px; line-height: 24px; color: var(--text-body); }

/* ---------- About: intro ----------------------------------------------- */
.about-intro { position: relative; overflow: hidden; background: var(--surface-light-blue); margin-top: -80px; padding: 176px 24px 64px; text-align: center; }
.about-intro__watermark {
  position: absolute; left: 50%; bottom: -195px; transform: translateX(-50%);
  width: 1439px; max-width: none; aspect-ratio: 123.738 / 28;
  opacity: .04; pointer-events: none; user-select: none;
}
.about-intro__mark { display: flex; align-items: center; justify-content: center; gap: 22px; margin-bottom: 16px; }
.about-intro__dots { display: flex; align-items: center; gap: 12px; }
.about-intro__dots span { width: 4px; height: 4px; border-radius: 50%; background: var(--surface-action); opacity: .6; }
.about-intro__mark img { height: 24px; aspect-ratio: 123.738 / 28; }

/* ---------- About: vision / mission ------------------------------------ */
.vm-panel { background: var(--surface-light-blue); border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.vm-panel.gray { background: #f9f9f9; }
.vm-title { font-family: var(--font-heading); font-size: 48px; line-height: 48px; letter-spacing: -0.96px; color: var(--text-body); }
.vm-text { font-family: var(--font-body); font-size: 16px; line-height: 26px; color: var(--text-body); opacity: .85; }
.vm-img { border-radius: var(--radius-md); overflow: hidden; }
.vm-img img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- About: values carousel ------------------------------------- */
.values-section { background: var(--surface-light-blue); border-top-right-radius: 32px; }
.values-track {
  display: flex; gap: 24px; align-items: flex-start;
  overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x mandatory;
  padding: 32px 0; scrollbar-width: none;
}
/* Mobile/tablet: the track is a plain block child of .values-section, so
   pulling it out by the section's own inline padding (Tailwind px-6, then
   sm:px-12) and re-adding that as scroll padding lets cards scroll flush
   into that space — the padding stops being a hard mask that clips them and
   becomes the strip's natural at-rest inset instead. */
@media (max-width: 1023.98px) {
  .values-track {
    margin-inline: -24px;
    padding-inline: 24px;
    scroll-padding-inline: 24px;
  }
}
@media (min-width: 640px) and (max-width: 1023.98px) {
  .values-track {
    margin-inline: -48px;
    padding-inline: 48px;
    scroll-padding-inline: 48px;
  }
}
.values-track::-webkit-scrollbar { display: none; }
.value-card {
  position: relative; flex: 0 0 384px; width: 384px; min-height: 190px;
  background: var(--surface-white);
  border: 1px solid rgba(229,229,229,0.2);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 24px 48px 48px 24px;
  scroll-snap-align: start;
  overflow: hidden;
  transition: border-color .2s ease;
}
.value-card:hover { border-color: var(--surface-action); }
.value-card:nth-child(even) { margin-top: 40px; }
.value-card h3 { font-family: var(--font-heading); font-size: 24px; line-height: 24px; color: var(--text-body); margin-bottom: 16px; }
.value-card p { font-family: var(--font-body); font-size: 16px; line-height: 26px; color: var(--text-placeholder); margin: 0; }
.value-card .letter {
  position: absolute; right: 13px; bottom: 9px;
  font-family: var(--font-heading); font-size: 64px; line-height: 1;
  color: var(--surface-action); opacity: .1; pointer-events: none;
  transition: opacity .2s ease;
}
.value-card:hover .letter { opacity: 1; }
.carousel-btn {
  width: 48px; height: 48px; border-radius: 100px;
  background: #fff; box-shadow: var(--shadow-xs);
  display: flex; align-items: center; justify-content: center;
  transition: background-color .2s ease, transform .2s ease;
}
.carousel-btn:hover { transform: translateY(-2px); }
.carousel-btn:disabled { opacity: .25; cursor: default; transform: none; }
.carousel-btn img { width: 20px; height: 20px; }

/* ---------- Service centers: map + location accordion ------------------ */
.svc-section { background: var(--surface-light-blue); border-top-right-radius: 32px; }
.svc-layout { display: flex; flex-direction: column; gap: 40px; align-items: center; width: 100%; }

.svc-map-stage { position: relative; width: 100%; }
@media (min-width: 900px) {
  /* Grid overlay: map + locations share one cell, so the row height always
     grows to fit the taller one (e.g. an expanded card), and each child can
     stay independently centered within that height. */
  .svc-map-stage { display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr; }
  .svc-map-stage > * { grid-column: 1; grid-row: 1; }
}
.svc-map-canvas { position: relative; width: 100%; border-radius: var(--radius-md); align-self: center; }
.svc-map-wrap { width: 100%; max-width: none; }
.svc-map { width: 100%; height: auto; display: block; }
.svc-map__state { fill: #e9f2ff; stroke: #fff; stroke-width: 0.5; stroke-linecap: round; stroke-linejoin: round; transition: fill .2s ease; }
.svc-map__state.is-active { fill: #bab9ff; cursor: pointer; }
.svc-map__state.is-active:hover { fill: #9b99f7; }
.svc-map__state.is-active:focus,
.svc-map__state.is-active:focus-visible { outline: none; }
.svc-map__state.is-selected { fill: var(--surface-action) !important; }

.svc-locations {
  display: flex; flex-direction: column; gap: 8px;
  width: 100%; max-width: 368px; flex-shrink: 0;
  margin: 0 auto;
}
@media (min-width: 900px) {
  .svc-locations {
    justify-self: end; align-self: center; margin-right: 4%;
    max-width: 368px; z-index: 1;
  }
}
.svc-loc { background: var(--surface-white); border: 1px solid var(--border-default); border-radius: var(--radius-sm); overflow: hidden; }
.svc-loc__head {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 16px; background: none; border: 0; cursor: pointer;
  font-family: var(--font-heading); font-size: 24px; line-height: 24px; color: var(--text-body);
  text-align: left;
}
.svc-loc__chevron { width: 24px; height: 24px; flex-shrink: 0; transform: rotate(90deg); transition: transform .25s ease; }
.svc-loc.is-open .svc-loc__chevron { transform: rotate(-90deg); }
.svc-loc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.svc-loc.is-open .svc-loc__panel { grid-template-rows: 1fr; }
.svc-loc__panel > div { overflow: hidden; }
.svc-loc__inner { padding: 0 16px 16px; display: flex; flex-direction: column; gap: 16px; }
.svc-loc__inner--multi { padding: 0; gap: 0; }
.svc-loc__outlet { padding: 0 16px 16px; display: flex; flex-direction: column; gap: 16px; }
.svc-loc__outlet-sep { height: 8px; background: var(--surface-light-blue); }
.svc-loc__outlet-no { font-family: var(--font-heading); font-size: 24px; line-height: 24px; color: var(--surface-action); margin: 0; }
.svc-loc__addr { font-family: var(--font-body); font-size: 16px; line-height: 22px; color: var(--text-body); opacity: .6; margin: 0; }
.svc-loc__meta-list { display: flex; flex-direction: column; gap: 8px; }
.svc-loc__meta { display: flex; align-items: center; gap: 8px; font-family: var(--font-body); font-size: 16px; line-height: 18px; color: var(--text-body); min-height: 28px; }
.svc-loc__meta img { width: 18px; height: 18px; flex-shrink: 0; }
.svc-loc__meta a { color: inherit; text-decoration: none; }
.svc-loc__meta-text { padding-top: 2px; }
.svc-loc__divider { height: 1px; background: var(--border-default); width: 100%; }
.svc-loc__directions { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.svc-loc__dir-label { display: flex; align-items: center; gap: 8px; font-family: var(--font-body); font-weight: 600; font-size: 16px; color: var(--text-body); }
.svc-loc__dir-label img { width: 18px; height: 18px; }
.svc-loc__dir-btns { display: flex; gap: 12px; flex-shrink: 0; }
.svc-loc__dir-btns img { width: 44px; height: 44px; border-radius: var(--radius-sm); display: block; }

/* ---------- Product support cards -------------------------------------- */
.ps-section { position: relative; overflow: hidden; background: var(--surface-light-blue); }
#product-support { scroll-margin-top: 220px; }
.ps-watermark { position: absolute; left: 50%; top: calc(50% + 167px); transform: translate(-50%,-50%); width: 1439px; max-width: 150%; aspect-ratio: 103.70455169677734 / 23.466655731201172; opacity: .04; pointer-events: none; }
.ps-card {
  flex: 1 1 0; min-width: 0;
  background: #fff; border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  padding: 40px 24px; display: flex; gap: 24px; align-items: center;
}
.ps-card h3 { font-family: var(--font-heading); font-size: 24px; line-height: 24px; color: var(--text-body); margin: 0 0 12px; }
.ps-card p { font-family: var(--font-body); font-size: 16px; line-height: 24px; color: var(--text-body); opacity: .6; margin: 0; }
.ps-btn {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 100px;
  background: var(--surface-action); display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-xs); transition: transform .2s ease, background-color .2s ease;
}
.ps-btn:hover { transform: translateY(-2px); background: #04246b; }
.ps-btn img { width: 18px; height: 18px; filter: brightness(0) invert(1); }

/* ---------- Product Manuals grid ---------------------------------------- */
.pm-grid { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.pm-card {
  width: 326px;
  background: #fff; border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  padding: 12px; display: flex; flex-direction: column; gap: 12px;
  text-decoration: none;
}
.pm-card.is-disabled { pointer-events: none; }
.pm-card__code { font-family: var(--font-body); font-weight: 600; font-size: 14px; color: var(--surface-action); margin: 0 0 4px; }
.pm-card__name { font-family: var(--font-heading); font-size: 24px; line-height: 24px; color: var(--text-body); margin: 0; width: 200px; height: 48px; }
.pm-card__row { display: flex; align-items: flex-end; justify-content: space-between; }
.pm-card__img { width: 88px; height: 88px; flex-shrink: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.pm-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pm-card__dl {
  width: 40px; height: 40px; border-radius: 100px; flex-shrink: 0;
  background: var(--surface-action); display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-xs); transition: transform .2s ease, background-color .2s ease;
}
.pm-card:hover .pm-card__dl { transform: translateY(-2px); background: #04246b; }
.pm-card.is-disabled .pm-card__dl { background: var(--icons-disabled, #737373); }
.pm-card__dl img { width: 20px; height: 20px; filter: brightness(0) invert(1); }

/* ---------- Contact form ----------------------------------------------- */
.form-field { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.form-field label { font-family: var(--font-body); font-weight: 600; font-size: 14px; line-height: 16px; color: var(--text-body); }
.form-control {
  display: flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid var(--border-default); border-radius: var(--radius-sm);
  padding: 10px 14px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.form-control:focus-within { border-color: var(--surface-action); box-shadow: 0 0 0 3px rgba(0,51,153,.08); }
.form-control img { width: 20px; height: 20px; flex-shrink: 0; }
.form-control input,
.form-control textarea {
  flex: 1; min-width: 0; border: none; outline: none; background: transparent;
  font-family: var(--font-body); font-size: 16px; line-height: 18px; color: var(--text-body);
  resize: none;
}
.form-control input::placeholder,
.form-control textarea::placeholder { color: var(--text-placeholder); font-weight: 300; }
.form-control.textarea { align-items: flex-start; min-height: 130px; }
.contact-hero-img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-md); }

/* ---------- Contact info cards ----------------------------------------- */
.contact-info-card { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; align-items: center; padding: 24px; text-align: center; }
.contact-info-icon { width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; }
.contact-info-icon img { width: 56px; height: 56px; }
.contact-info-card .big { font-family: var(--font-body); font-weight: 600; font-size: 22px; line-height: 28px; letter-spacing: .22px; color: var(--text-body); }
.contact-divider { width: 2px; height: 180px; background: var(--border-default); flex-shrink: 0; }
.form-note { font-family: var(--font-body); font-size: 14px; margin-top: 4px; }
.form-note.ok { color: #157347; }
.form-note.err { color: #b02a37; }

/* ---------- Reveal on scroll ------------------------------------------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

/* ---------- Responsive -------------------------------------------------- */
@media (max-width: 1024px) {
  .nav-desktop { display: none !important; }
  .container-page { padding-inline: 20px; }
}
@media (min-width: 1025px) {
  .nav-toggle { display: none !important; }
  .mobile-menu { display: none !important; }
}
@media (max-width: 768px) {
  .support-row { flex-direction: column; }
  .support-divider { width: 200px; height: 2px; }
  .watermark { font-size: 96px; }
  /* Quicklinks + Service & Support stay side by side; Contact drops to its own full-width row */
  .footer-cols { flex-wrap: wrap; row-gap: 32px; column-gap: 16px; gap: 32px 16px !important; }
  .footer-cols > div:nth-child(1),
  .footer-cols > div:nth-child(2) { flex: 1 1 0; min-width: 0; }
  .footer-cols > div:nth-child(3) { flex: 1 1 100%; height: auto !important; }
  .footer-contact-col { gap: 20px; }
}
@media (min-width: 641px) and (max-width: 768px) {
  .hero { min-height: 560px; }
}
@media (max-width: 360px) {
  /* Only stack Quicklinks/Service & Support once the screen is too small for two columns */
  .footer-cols > div:nth-child(1),
  .footer-cols > div:nth-child(2) { flex: 1 1 100%; }
}

/* ---------- Homepage mobile sections (Figma mobile spec) --------------- */
@media (max-width: 640px) {
  /* Featured Products: horizontal scroll-snap strip instead of a wrapped grid.
     Spec: section 32/16, stack gap 24, card row full-bleed with its own 16px
     inset and 12px between 276px cards. (#featured outranks the Tailwind
     utilities; .featured-grid ties with them, hence !important there.) */
  #featured { padding: 32px 16px; }
  #featured > div { gap: 24px; }
  #featured .link-cta { width: 160px; }

  .featured-grid {
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 16px;
    -webkit-overflow-scrolling: touch;
    /* Break out of the section gutters so the strip scrolls edge to edge,
       then re-apply 16px as inset padding. align-self:stretch is required —
       the parent centres its children, which would otherwise just re-centre
       the negative-margin box and cancel the bleed. */
    align-self: stretch;
    width: auto !important;
    max-width: none !important;
    margin-inline: -16px;
    padding-inline: 16px;
  }
  /* Collapse the slot's hover-room padding so gaps are the spec's 12px */
  .featured-grid .product-card-slot {
    flex: 0 0 auto;
    width: auto;
    padding: 0;
    scroll-snap-align: start;
  }

  /* Recently Viewed (product detail pages): same horizontal scroll-snap
     treatment as the homepage Featured Products strip, since it reuses the
     identical .product-card-slot/.product-card markup. !important ties with
     the base rules' own specificity (both are plain classes). */
  .recently-viewed__inner { padding: 32px 16px !important; gap: 24px !important; }
  .recently-viewed__grid {
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 16px;
    -webkit-overflow-scrolling: touch;
    /* Same align-self:stretch requirement as .featured-grid — .recently-
       viewed__inner is also a centred flex column. */
    align-self: stretch;
    width: auto !important;
    max-width: none !important;
    margin-inline: -16px;
    padding-inline: 16px;
  }
  .recently-viewed__grid .product-card-slot {
    flex: 0 0 auto;
    width: auto;
    padding: 0;
    scroll-snap-align: start;
  }

  /* Lifestyle banner: the spec's crop (390x180 frame, image at 116.15%/150.83%)
     only resolves to the photo's true 1.668 ratio at exactly 390px wide. Lock
     the frame to 390/180 rather than pinning height:180px, so the crop keeps
     its proportions — and the photo stays undistorted — at any width. */
  .lifestyle-banner { aspect-ratio: 390 / 180; height: auto; }
  .lifestyle-banner img {
    left: -3.85%; top: -32.56%; width: 116.15%; height: 150.83%;
    object-fit: cover; /* belt-and-braces against sub-pixel ratio drift */
  }

  /* Made for Moments: tighter mobile padding (32 / 16 / 60 per spec) */
  .made-for-moments { padding: 32px 16px 60px !important; }

  /* Support: three stacked cards at a 12px gap with no separators — the round
     arrow button on each card is its only trailing element. Section padding
     tightens to 48px inline / 24px block. (!important beats the Tailwind CDN
     utilities, which the runtime injects after this stylesheet.) */
  .support-divider { display: none; }
  .support-row { gap: 12px !important; }
  .support-section { padding-block: 24px !important; }
  /* Button rests at the full 32px circle (spec: 32px base, 2px inner inset) */
  .support-card__btn::before,
  .support-card:hover .support-card__btn::before,
  .support-card:focus-visible .support-card__btn::before { inset: 0; }
}

/* Mobile-only panels; they live outside their `lg:hidden` wrappers so they can
   anchor to the section's top edge, hence the explicit desktop hide. */
.shop-mobile__panel,
.about-safety__panel { display: none; }

/* ---------- About Us, mobile/tablet (Figma mobile spec) -----------------
   Scoped to the markup's own `lg:hidden` (Tailwind lg = 1024px), not the
   640px phone breakpoint, so the layout holds across its whole visible range. */
@media (max-width: 1023.98px) {
  /* --- Thoughtfully Designed (node 1045:17536) --- */
  .about-thoughtful {
    /* !important: ties with Tailwind's bg-white, which the CDN injects after
       this stylesheet and would otherwise win on source order. */
    background: var(--surface-light-blue) !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  /* Frame ratio is locked (not a fixed 180px height) so the crop keeps the
     photo's native 1.334 proportions at any width. */
  .about-band {
    position: relative; width: 100%;
    aspect-ratio: 390 / 180;
    background: #f6f7f9;
    overflow: hidden;
  }
  .about-band img {
    position: absolute; left: 0; top: -31.1%;
    width: 100%; height: 162.38%;
    max-width: none; object-fit: cover;
  }
  .about-stack__body {
    display: flex; flex-direction: column; gap: 16px;
    padding: 32px 16px 60px;
  }

  /* --- Your Safety, Our Priority (node 1045:17488) --- */
  .about-safety {
    padding: 32px 16px 60px !important;
    margin: 0 !important;
  }
  /* Same treatment as the homepage Shop Online panel: bleeds the full
     viewport width, flush to the section's top edge, right corners rounded. */
  .about-safety__panel {
    display: block;
    position: absolute; top: 1px; left: 50%; transform: translateX(-50%);
    width: 100vw; height: 350px;
    background: #f9f9f9;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
  }
  .about-safety-mobile__body {
    position: relative;
    display: flex; flex-direction: column; gap: 16px;
  }
  /* position/z-index are load-bearing: the panel is absolutely positioned and
     precedes this in the DOM, so a static wrapper would be painted over. */
  .about-safety-mobile__images {
    position: relative; z-index: 1;
    display: grid; width: 100%; margin-top: 24px;
  }
  .about-safety-mobile__img {
    grid-area: 1 / 1; align-self: start; justify-self: start;
    border-radius: var(--radius-md); overflow: hidden;
  }
  .about-safety-mobile__img--large { width: 59.88%; margin-left: 40.12%; aspect-ratio: 614 / 460; }
  .about-safety-mobile__img--small { width: 35.37%; margin-top: 30.73%; aspect-ratio: 265 / 194; }
  .about-safety-mobile__img img { width: 100%; height: 100%; object-fit: cover; }

  /* Shared mobile type scale for both sections (spec: H4 36px, body 16/26) */
  .about-stack__body .vm-title,
  .about-safety-mobile__body .vm-title { font-size: 36px; line-height: 36px; letter-spacing: -0.72px; }
  .about-stack__body .vm-text,
  .about-safety-mobile__body .vm-text { font-size: 16px; line-height: 26px; opacity: .8; }

  /* Intro background wordmark: 40% smaller than desktop (scale 0.6), and
     pulled down so exactly half its height (~195.37px) sits below the
     section's overflow:hidden edge — bottom = -height/2. */
  .about-intro__watermark { width: 863.4px; bottom: -97.69px; }
}

/* ---------- Shop Online, mobile/tablet (Figma mobile spec) --------------
   Scoped to match the markup's own `lg:hidden` (Tailwind lg = 1024px) rather
   than the 640px phone breakpoint — otherwise the panel loses its background
   and the images lose their offsets across the 641–1023px range. */
@media (max-width: 1023.98px) {
  .shop-section { padding: 32px 16px 60px !important; }
  .shop-mobile { padding: 0; }

  /* Panel bleeds the full viewport width and is flush to the section's top
     edge (it's a direct child of the section, so `top` clears the section's
     padding). The section clips overflow, so 100vw can't cause h-scroll. */
  .shop-mobile__panel {
    display: block;
    position: absolute; top: 1px; left: 50%; transform: translateX(-50%);
    width: 100vw; height: 397px;
    background: var(--surface-light-blue);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
  }

  .shop-mobile__body {
    position: relative;
    display: flex; flex-direction: column; align-items: center;
    gap: 16px; text-align: center; padding: 0;
  }
  .shop-mobile__ctas { justify-content: center; margin-top: 8px; }

  /* Both images share one grid cell; percentage offsets resolve against the
     container width, so the overlap holds its proportions at any width. */
  /* position/z-index are load-bearing: the panel is absolutely positioned and
     precedes this in the DOM, so a static wrapper would be painted over by it. */
  .shop-mobile__images {
    position: relative; z-index: 1;
    display: grid; width: 100%; margin-top: 48px; aspect-ratio: auto;
  }
  .shop-mobile__img {
    position: static; grid-area: 1 / 1;
    align-self: start; justify-self: start;
    border-radius: var(--radius-md); overflow: hidden;
  }
  .shop-mobile__img--large { width: 64.21%; margin-left: 35.79%; aspect-ratio: 614 / 460; }
  .shop-mobile__img--small { width: 32.16%; margin-top: 35.82%; aspect-ratio: 265 / 194; }
  .shop-mobile__img img { width: 100%; height: 100%; }
}

/* ---------- Footer mobile (Figma mobile spec) -------------------------- */
@media (max-width: 640px) {
  /* Back-to-top drops out of the logo row and sits bottom-right, level with
     the Contact column. Taken out of flow so the logo/tagline block keeps the
     full width; the Contact column's right half is empty, so nothing collides. */
  .site-footer .container-page { position: relative; }
  .site-footer .back-to-top { position: absolute; right: 12px; bottom: 48px; }
  /* Keep the phone/email hit areas to their text so they don't run under it */
  .site-footer .footer-contact { width: fit-content; }

  /* Wider gutter between the two link columns, per spec */
  .footer-cols { column-gap: 24px !important; }

  /* Bottom bar: legal links sit above the copyright line, both centred */
  .footer-bottom .container-page { flex-direction: column-reverse; gap: 16px; }
}

/* ---------- Where to Buy ------------------------------------------------ */
.wtb-partners { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 40px 84px; }
.wtb-partner {
  display: flex; flex-direction: column; align-items: center; gap: 24px;
  width: 187px; background: none; border: none; padding: 0; cursor: pointer;
}
.wtb-partner__circle {
  width: 124px; height: 124px; border-radius: 100px; flex-shrink: 0;
  background: #fff; border: 1px solid var(--border-default);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  transition: box-shadow .2s ease, transform .2s ease;
}
.wtb-partner:hover .wtb-partner__circle,
.wtb-partner:focus-visible .wtb-partner__circle { box-shadow: var(--shadow-xs); transform: translateY(-2px); }
.wtb-partner__circle img { width: 80px; height: 80px; object-fit: cover; }
.wtb-partner__circle--crop { position: relative; }
.wtb-partner__circle--crop img {
  position: absolute; left: -15.54%; top: -15%; width: 131.09%; height: 131.09%;
  max-width: none; object-fit: cover;
}
.wtb-partner__label-row { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.wtb-partner__label { font-family: var(--font-body); font-weight: 700; font-size: 16px; line-height: 18px; color: var(--text-body); text-align: center; white-space: nowrap; }
.wtb-partner__arrow { position: relative; width: 20px; height: 20px; overflow: hidden; flex-shrink: 0; }
.wtb-partner__arrow img {
  position: absolute; top: 0; left: 0; width: 20px; height: 20px;
  transition: transform .3s ease-out;
}
.wtb-partner__arrow img:first-child { transform: translateY(0); }
.wtb-partner__arrow img:last-child { transform: translateY(20px); }
.wtb-partner:hover .wtb-partner__arrow img:first-child,
.wtb-partner:focus-visible .wtb-partner__arrow img:first-child { transform: translateY(-20px); }
.wtb-partner:hover .wtb-partner__arrow img:last-child,
.wtb-partner:focus-visible .wtb-partner__arrow img:last-child { transform: translateY(0); }

/* Modal */
.wtb-modal-overlay {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(0, 0, 0, .45);
  display: flex; align-items: center; justify-content: center; padding: 16px;
  opacity: 0; pointer-events: none;
  transition: opacity .2s ease;
}
.wtb-modal-overlay.is-open { opacity: 1; pointer-events: auto; }
.wtb-modal {
  width: 480px; max-width: 100%; background: #fff; border-radius: 8px; padding: 16px;
  display: flex; flex-direction: column; gap: 24px;
  transform: translateY(12px) scale(.98); opacity: 0;
  transition: transform .25s ease, opacity .25s ease;
}
.wtb-modal-overlay.is-open .wtb-modal { transform: translateY(0) scale(1); opacity: 1; }
.wtb-modal__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wtb-modal__brand { display: flex; align-items: center; gap: 8px; }
.wtb-modal__logo { width: 40px; height: 40px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 50%; }
.wtb-modal__logo img { width: 32px; height: 32px; object-fit: cover; }
.wtb-modal__logo--crop { position: relative; width: 40px; height: 40px; }
.wtb-modal__logo--crop img {
  position: absolute; left: -13.25%; top: -10.94%; width: 126.5%; height: 126.5%;
  max-width: none; object-fit: cover;
}
.wtb-modal__title { font-family: var(--font-body); font-weight: 700; font-size: 20px; line-height: 24px; color: #000; padding-top: 6px; }
.wtb-modal__close {
  width: 40px; height: 40px; border-radius: 8px; flex-shrink: 0;
  background: none; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background-color .2s ease;
}
.wtb-modal__close:hover { background: var(--surface-light-blue, #f8fbff); }
.wtb-modal__close img { width: 11.67px; height: 11.67px; }
.wtb-modal__body { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.wtb-modal__label { font-family: var(--font-body); font-weight: 600; font-size: 16px; color: var(--text-body); }
.wtb-store {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 12px;
  border: 1px solid var(--border-default); border-radius: 8px;
  text-decoration: none;
  transition: border-color .2s ease, background-color .2s ease;
}
.wtb-store:hover { border-color: var(--surface-action); background: var(--surface-light-blue, #f8fbff); }
.wtb-store__icon { position: relative; width: 40px; height: 40px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.wtb-store__icon img { width: 24px; height: 24px; object-fit: contain; }
.wtb-store__badge {
  position: absolute; left: 25px; top: 23px; width: 8px; height: 8px; border-radius: 10px;
  background: var(--surface-action); display: flex; align-items: center; justify-content: center;
}
.wtb-store__badge img { width: 4px; height: 3.5px; }
.wtb-store__label { flex: 1 0 0; min-width: 0; font-family: var(--font-body); font-weight: 600; font-size: 16px; color: #171717; padding-top: 4px; }
.wtb-store__link-btn { width: 40px; height: 40px; border-radius: 8px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.wtb-store__link-btn img { width: 20px; height: 20px; }
@media (max-width: 480px) {
  .wtb-partners { gap: 32px 40px; }
}