:root {
  --sw-sans: 'Poppins', system-ui, sans-serif;
  --sw-serif: 'EB Garamond', Georgia, serif;
  --sw-accent: #04724D;
  --sw-nav-bg: rgba(4,32,61,0.5);
  --sw-hero-bg: #062A52;
  --sw-veil: 0.25;
  --sw-prod-bg: #083D77;
  --sw-cta-bg: #04724D;
  --sw-mark: min(38vh,340px);
  --sw-prod-aspect: 4/5;
  --sw-prod-fit: cover;
  --sw-frame-h: 70vh;
  --sw-car-h: min(30vh,340px);
  --sw-car-aspect: 1/1;
  --sw-svc-bg: #d4795b;
  --sw-foot-bg: #04724D;
  --sw-pad-x: 44px;
  --sw-prod-pt: 90px;
  --sw-prod-pb: 26px;
  --sw-svc-py: 136px;
  --sw-wsb2-fs: 15px;
  --sw-foot-pt: 70px;
  --sw-foot-pb: 2px;
  --sw-nav-ff: var(--sw-sans); --sw-nav-fs: 14px; --sw-nav-fc: #cccccc;
  --sw-breathe-ff: var(--sw-sans); --sw-breathe-fs: 12px; --sw-breathe-fc: #f4efe6;
  --sw-quote-ff: var(--sw-serif); --sw-quote-fs: 44px; --sw-quote-fc: #f4efe6;
  --sw-hint-ff: var(--sw-serif); --sw-hint-fs: 20px; --sw-hint-fc: rgba(255,255,255,0.9);
  --sw-skip-ff: var(--sw-sans); --sw-skip-fs: 10px; --sw-skip-fc: rgba(255,255,255,0.5);
  --sw-phase-ff: var(--sw-serif); --sw-phase-fs: 50px;
  --sw-eyebrow-ff: var(--sw-serif); --sw-eyebrow-fs: 15px;
  --sw-ptitle-ff: var(--sw-serif); --sw-ptitle-fs: 52px; --sw-ptitle-fc: #f4efe6;
  --sw-pbody-ff: var(--sw-sans); --sw-pbody-fs: 16px; --sw-pbody-fc: #f4efe6;
  --sw-price-ff: var(--sw-sans); --sw-price-fs: 23px; --sw-price-fc: #f4efe6;
  --sw-specs-ff: var(--sw-sans); --sw-specs-fs: 12px; --sw-specs-fc: #7d8a96;
  --sw-cta-ff: var(--sw-sans); --sw-cta-fs: 12px; --sw-cta-fc: #FFFFFF;
  --sw-badge-ff: var(--sw-sans); --sw-badge-fs: 11px; --sw-badge-fc: #7d8a96;
  --sw-helper-ff: var(--sw-sans); --sw-helper-fs: 10px; --sw-helper-fc: #7e8a96;
  --sw-stitle-ff: var(--sw-sans); --sw-stitle-fs: 30px; --sw-stitle-fc: #ffffff;
  --sw-sbody-ff: var(--sw-sans); --sw-sbody-fs: 16px; --sw-sbody-fc: rgba(255,255,255,0.58);
  --sw-fhead-ff: var(--sw-serif); --sw-fhead-fs: 46px; --sw-fhead-fc: #F4FAF7;
  --sw-fbody-ff: var(--sw-sans); --sw-fbody-fs: 17px; --sw-fbody-fc: rgba(255,255,255,0.68);
  --sw-fsmall-ff: var(--sw-sans); --sw-fsmall-fs: 14px; --sw-fsmall-fc: rgba(255,255,255,0.8);
  --sw-join-ff: var(--sw-sans); --sw-join-fs: 10px; --sw-join-fc: #f4efe6;
}

* { box-sizing: border-box; }
/* Matches the hero's own background so an overscroll bounce above the top
   (or a flash before the video paints) shows continuous color instead of a
   mismatched navy. Swapped to the footer's color once scroll nears the
   bottom (see .sw-near-footer, toggled in main.js) for the same reason
   at the other end of the page. */
html, body { margin: 0; background: var(--sw-hero-bg); }
body.sw-near-footer { background: var(--sw-foot-bg); }
body { font-family: var(--sw-sans); color: #EAF1EE; font-weight: 300; overflow-x: hidden; }
a { color: rgba(255,255,255,0.72); text-decoration: none; }
a:hover { color: #ffffff; }
button { font: inherit; }
input::placeholder { color: rgba(255,255,255,0.32); }
img { max-width: none; }

[hidden] { display: none !important; }
/* Off-screen but present for crawlers/screen readers — the page has no
   visible text heading of its own (the hero is a logo mark + video), so
   this gives it the one real <h1> search engines and assistive tech expect. */
.sw-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---------- keyframes ---------- */
@keyframes swDrift { 0%,100% { transform: translateY(0); opacity: 0.72; } 50% { transform: translateY(9px); opacity: 1; } }
@keyframes swTrail { 0% { transform: scaleY(0.2); transform-origin: top; opacity: 0; } 45% { transform: scaleY(1); opacity: 0.85; } 100% { transform: scaleY(1); transform-origin: bottom; opacity: 0; } }
@keyframes swSpin { to { rotate: 360deg; } }
@keyframes swBlobA { 0%,100% { transform: translate3d(-6%,-4%,0) scale(1); } 50% { transform: translate3d(10%,8%,0) scale(1.22); } }
@keyframes swBlobB { 0%,100% { transform: translate3d(8%,6%,0) scale(1.14); } 50% { transform: translate3d(-8%,-6%,0) scale(0.94); } }
@keyframes swBlobC { 0%,100% { transform: translate3d(4%,-8%,0) scale(1.06); } 50% { transform: translate3d(-6%,9%,0) scale(1.26); } }
@keyframes swWsIn { from { opacity: 0; transform: translateY(34px) scale(0.965); } to { opacity: 1; transform: none; } }

/* ================= NAV ================= */
.sw-scrim {
  position: fixed; inset: 0; z-index: 45;
  background: rgba(4,26,48,0.45);
  backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
  transition: opacity 420ms cubic-bezier(0.22,1,0.36,1);
  opacity: 0; pointer-events: none;
}
.sw-scrim.is-on { opacity: 1; pointer-events: auto; }

.sw-nav {
  position: fixed; top: 16px; left: 0; right: 0; z-index: 50;
  display: flex; justify-content: center; padding: 0 16px; pointer-events: none;
}
.sw-nav-wordmark { display: block; flex: 0 0 auto; }
.sw-nav-wordmark img { width: clamp(100px,10.4vw,130px); height: auto; display: block; opacity: 0.95; }

.sw-nav-mobile { display: none; width: 100%; }
.sw-nav-mobile-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 9px 9px 9px 18px; }
.sw-nav-mobile .sw-nav-wordmark img { width: 108px; }
.sw-nav-panel { overflow: hidden; transition: max-height 460ms cubic-bezier(0.22,1,0.36,1), opacity 300ms ease; max-height: 0; opacity: 0; }
.sw-nav-panel.is-open { max-height: 300px; opacity: 1; }
.sw-nav-panel-inner { display: flex; flex-direction: column; gap: 2px; padding: 6px 18px 18px; }
.sw-nav-panel-rule { height: 1px; background: rgba(255,255,255,0.12); margin: 0 0 12px; }
.sw-nav-panel-link {
  padding: 10px 0; font-family: var(--sw-sans); font-size: 17px; font-weight: 200;
  letter-spacing: -0.005em; color: #F4EFE6;
  opacity: 0; transform: translateY(-8px);
  transition: opacity 380ms ease, transform 420ms cubic-bezier(0.22,1,0.36,1);
}
.sw-nav-panel.is-open .sw-nav-panel-link { opacity: 1; transform: translateY(0); }
.sw-nav-panel.is-open .sw-nav-panel-link:nth-child(2) { transition-delay: 80ms; }
.sw-nav-panel.is-open .sw-nav-panel-link:nth-child(3) { transition-delay: 150ms; }

.sw-breathe-wrap {
  position: relative; flex: 0 0 auto; padding: 1.6px; border-radius: 999px;
  isolation: isolate; overflow: hidden;
  /* A fixed hairline independent of the ring's current hue, so the pill's
     edge stays legible even in the moment a rotating color is close to the
     button/page color behind it. */
  box-shadow: 0 0 0 1px rgba(255,255,255,0.22);
}
.sw-breathe-wrap-mobile { margin-top: 12px; }
.sw-cosmos-ring {
  position: absolute; left: 50%; top: 50%; width: 260%; aspect-ratio: 1;
  /* `translate` as its own property (not folded into `transform`) so the
     swSpin keyframe can animate `rotate` independently. Animating
     `transform: rotate()` here used to fight this element's own centering
     transform — the browser interpolated translate(-50%,-50%) toward
     rotate(360deg) as a single property, which slides the gradient
     sideways instead of spinning it, and reads as one flat color drifting
     across the ring rather than a rainbow turning. */
  translate: -50% -50%;
  /* Neighbouring stops kept close in hue (bridge tones between each brand
     color) so the ring reads as one continuous shimmer as it turns, rather
     than snapping between a few widely-spaced solid colors. The cream stop
     is toned down from the brand's near-white (~93% lightness) to a muted
     tan (~70%) — at full brightness it was the only stop far lighter than
     its neighbors (the rest sit in a 23-60% range), so it read as a washed-
     out "flash" sweeping past rather than a color, worst on the compact
     desktop chip where that flash covers more of the ring at once. */
  background: conic-gradient(from 0deg,
    #04724D,#066B8A,#083D77,#4A4F97,#7E6BB8,#B26F86,
    #D4795B,#E3A374,#CDBB98,#9CBBA5,#A8C9B8,#5A9A7C,#04724D);
  animation: swSpin 18s linear infinite;
  filter: blur(1.5px);
}
.sw-breathe-btn {
  position: relative; display: flex; align-items: center; gap: 8px;
  font-family: var(--sw-breathe-ff); font-size: var(--sw-breathe-fs); font-weight: 400;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--sw-breathe-fc);
  background: #04203D; border: none; border-radius: 999px;
  padding: 9px 18px 9px 13px; cursor: pointer; white-space: nowrap;
}
.sw-breathe-btn:hover { background: #0A2C4E; }
.sw-breathe-btn img { width: 13px; height: 13px; display: block; }
.sw-nav-panel .sw-breathe-btn { width: 100%; justify-content: center; padding: 15px 24px; gap: 10px; }
.sw-nav-panel .sw-breathe-btn img { width: 15px; height: 15px; }

.sw-nav-chip {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  width: max-content; min-width: min(var(--nav-width, 620px), 100%); max-width: 100%;
  padding: 10px 14px 10px 24px; border-radius: 999px;
  background: var(--sw-nav-bg); border: 1px solid rgba(255,255,255,0.13);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  pointer-events: auto;
}
.sw-nav-right { display: flex; align-items: center; gap: 28px; flex: 0 0 auto; min-width: 0; }
.sw-nav-links {
  display: flex; align-items: center; gap: 28px; min-width: 0; overflow: hidden;
  font-family: var(--sw-nav-ff); font-size: var(--sw-nav-fs); letter-spacing: 0.02em;
}
.sw-nav-links a { color: var(--sw-nav-fc); }
.sw-nav-links a:hover { color: #fff; }
#breatheChip {
  opacity: 0; transform: translate3d(120px,0,0) scale(0.94);
  max-width: 0; margin-left: -28px; overflow: hidden; pointer-events: none;
}

.sw-menu-btn { position: relative; width: 44px; height: 44px; flex: 0 0 auto; border: none; background: none; cursor: pointer; padding: 0; }
.sw-ham { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px;
  transition: opacity 260ms ease, transform 380ms cubic-bezier(0.22,1,0.36,1); opacity: 1; transform: rotate(0deg); }
.sw-ham span { display: block; height: 2px; width: 17px; background: #F2F7F4; border-radius: 2px; }
.sw-x { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--sw-sans); font-size: 24px; font-weight: 400; line-height: 1; color: #F2F7F4;
  transition: opacity 260ms ease, transform 380ms cubic-bezier(0.22,1,0.36,1); opacity: 0; transform: rotate(90deg); }
.sw-menu-btn.is-open .sw-ham { opacity: 0; transform: rotate(-90deg); }
.sw-menu-btn.is-open .sw-x { opacity: 1; transform: rotate(0deg); }

/* ================= HERO ================= */
.sw-hero { position: relative; z-index: 10; height: 660vh; }
.sw-hero-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; background: var(--sw-hero-bg); }
.sw-hero-media { position: absolute; inset: 0; z-index: 0; }
.sw-hero-media video, .sw-hero-media-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  object-position: var(--sw-focal, 50% 39%);
}
.sw-hero-veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(4,20,38,var(--sw-veil)) 0%, rgba(4,20,38,calc(var(--sw-veil) * 0.55)) 45%, rgba(4,20,38,calc(var(--sw-veil) * 1.3)) 100%);
}
.sw-hero-navy {
  position: absolute; inset: 0; opacity: 0;
  background: radial-gradient(125% 95% at 50% 42%, #0F4E93 0%, #083D77 52%, #04203D 100%);
}
.sw-hero-stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.sw-hero-mark-wrap { position: relative; width: var(--sw-mark); height: var(--sw-mark); display: flex; align-items: center; justify-content: center; }
.sw-hero-glow {
  position: absolute; inset: -40px; border-radius: 50%;
  background: radial-gradient(circle, rgba(20,150,96,0.45) 0%, rgba(20,150,96,0) 70%);
  filter: blur(10px); opacity: 0.3;
}
.sw-hero-mark { position: absolute; inset: 0; width: 100%; height: 100%; display: block; transform: scale(0.672); will-change: transform; backface-visibility: hidden; }

.sw-hero-quote-layer { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 0 26px; pointer-events: none; }
.sw-hero-quote {
  text-align: center; font-family: var(--sw-quote-ff); font-style: italic; font-weight: 500;
  font-size: min(var(--sw-quote-fs), 8.4vw); line-height: 1.38; color: var(--sw-quote-fc);
  text-shadow: 0 2px 34px rgba(4,12,20,0.7); text-wrap: pretty;
}

.sw-hero-cosmos { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.sw-hero-galaxy { position: absolute; inset: 0; opacity: 0; pointer-events: none; overflow: hidden; }
.sw-blob { position: absolute; border-radius: 50%; }
.sw-blob-a { left: -40%; top: -55%; width: 170vmax; height: 170vmax;
  background: radial-gradient(circle, rgba(96,178,132,0.92) 0%, rgba(110,186,144,0.42) 34%, rgba(118,186,146,0) 66%);
  animation: swBlobA 34s ease-in-out infinite; }
.sw-blob-b { right: -45%; bottom: -60%; width: 185vmax; height: 185vmax;
  background: radial-gradient(circle, rgba(84,116,186,0.88) 0%, rgba(110,138,198,0.4) 34%, rgba(122,146,198,0) 66%);
  animation: swBlobB 42s ease-in-out infinite; }
.sw-blob-c { left: 8%; bottom: -50%; width: 150vmax; height: 150vmax;
  background: radial-gradient(circle, rgba(214,132,96,0.8) 0%, rgba(220,152,120,0.34) 32%, rgba(216,150,118,0) 64%);
  animation: swBlobC 48s ease-in-out infinite; }
.sw-blob-rev { right: 2%; top: -40%; left: auto; bottom: auto; width: 120vmax; height: 120vmax;
  background: radial-gradient(circle, rgba(238,236,231,0.9) 0%, rgba(238,236,231,0.3) 38%, rgba(238,236,231,0) 66%);
  animation: swBlobA 58s ease-in-out infinite reverse; }

.sw-hero-cap { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; opacity: 0; }
.sw-phase-block { position: absolute; display: flex; flex-direction: column; align-items: center; opacity: 0; will-change: opacity, transform; }
.sw-phase-word { font-family: var(--sw-phase-ff); font-size: min(var(--sw-phase-fs), 9vw); font-style: italic; font-weight: 400; color: inherit; white-space: nowrap; }
.sw-phase-dots { display: flex; gap: 22px; justify-content: center; margin-top: 26px; }
.sw-phase-dot-col { display: flex; flex-direction: column; align-items: center; gap: 11px; }
.sw-phase-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,0.2); transition: background 320ms ease, box-shadow 320ms ease; }
.sw-phase-num { font-family: var(--sw-serif); font-size: 15px; color: rgba(255,255,255,0.28); transition: color 320ms ease; }

.sw-hero-hint { position: absolute; bottom: 34px; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; pointer-events: none; }
.sw-hero-hint-inner { display: flex; flex-direction: column; align-items: center; gap: 12px; animation: swDrift 3.4s ease-in-out infinite; }
.sw-hero-hint-text { font-family: var(--sw-hint-ff); font-size: min(var(--sw-hint-fs), 5vw); font-style: italic; color: var(--sw-hint-fc); text-shadow: 0 2px 22px rgba(4,12,20,0.6); }
.sw-hero-hint-trail { width: 1px; height: 30px; background: linear-gradient(180deg, var(--sw-hint-fc), transparent); animation: swTrail 3.4s ease-in-out infinite; }

.sw-hero-skip { position: absolute; right: clamp(18px,4vw,44px); bottom: 38px; display: flex; align-items: center; gap: 9px; }
.sw-skip-btn {
  display: flex; align-items: center; gap: 9px; font-family: var(--sw-skip-ff); font-size: var(--sw-skip-fs);
  font-weight: 300; letter-spacing: 0.24em; text-transform: uppercase; color: var(--sw-skip-fc);
  background: none; border: none; padding: 6px 0; cursor: pointer; opacity: 0.62;
}
.sw-skip-btn:hover { opacity: 1; }
.sw-skip-line { display: block; width: 26px; height: 1px; background: currentColor; }

/* ================= PRODUCT ================= */
.sw-product {
  position: relative; z-index: 11; background: var(--sw-prod-bg); min-height: 100vh;
  display: flex; flex-direction: column; justify-content: center; overflow: hidden;
  padding: var(--sw-prod-pt) 0 var(--sw-prod-pb); border-top: 1px solid rgba(255,255,255,0.07);
}
.sw-section-bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; pointer-events: none; }
.sw-product-grid {
  position: relative; flex: 0 1 auto; min-height: 0; max-width: 1340px; margin: 0 auto; width: 100%;
  padding: 0 var(--sw-pad-x); display: grid; grid-template-columns: 1fr; gap: clamp(30px,4.4vw,64px); align-items: center;
}
@media (min-width: 860px) {
  .sw-product-grid.has-sel { grid-template-columns: 1.12fr 0.88fr; }
}
.sw-product-stage-wrap {
  position: relative; height: min(var(--sw-frame-h), 78vw); aspect-ratio: var(--sw-prod-aspect); max-width: 100%;
  justify-self: center; overflow: hidden; border-radius: 18px; touch-action: pan-y;
}
.sw-product-stage-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: var(--sw-prod-fit); display: block; will-change: transform, opacity; }
.sw-round-btn {
  position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.3); background: rgba(4,32,61,0.42); backdrop-filter: blur(8px);
  color: #F2F7F4; font-size: 16px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.sw-round-btn:hover { background: rgba(4,32,61,0.8); border-color: rgba(255,255,255,0.7); }
.sw-round-btn-left { left: 10px; }
.sw-round-btn-right { right: 10px; }

.sw-product-details { display: grid; gap: 22px; align-content: center; max-width: 620px; justify-self: center; }
.sw-product-grid.has-sel .sw-product-details { max-width: 100%; justify-self: stretch; }
.sw-product-eyebrow-row { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; }
.sw-eyebrow { font-family: var(--sw-eyebrow-ff); font-size: var(--sw-eyebrow-fs); letter-spacing: 0.32em; text-transform: uppercase; color: var(--sw-accent); }
.sw-eyebrow-dim { color: rgba(255,255,255,0.45); letter-spacing: 0.26em; font-size: var(--sw-eyebrow-fs); }
.sw-helper-btn { background: none; border: none; padding: 0; cursor: pointer; font-family: var(--sw-helper-ff); font-size: var(--sw-helper-fs); font-weight: 300; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sw-helper-fc); }
.sw-helper-btn:hover { color: #fff; }
.sw-product-title { font-family: var(--sw-ptitle-ff); font-size: min(var(--sw-ptitle-fs), 9vw); font-weight: 200; letter-spacing: -0.01em; line-height: 1.1; margin: 0; color: var(--sw-ptitle-fc); }
.sw-product-body { margin: 0; font-family: var(--sw-pbody-ff); font-size: var(--sw-pbody-fs); line-height: 1.8; color: var(--sw-pbody-fc); max-width: 46ch; text-wrap: pretty; }
.sw-product-price-row { display: flex; align-items: baseline; gap: 14px; }
.sw-product-price { font-family: var(--sw-price-ff); font-size: var(--sw-price-fs); font-weight: 300; color: var(--sw-price-fc); }
.sw-product-specs { font-family: var(--sw-specs-ff); font-size: var(--sw-specs-fs); letter-spacing: 0.14em; color: var(--sw-specs-fc); }

.sw-buy-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: stretch; }
.sw-buy-row.is-disabled { opacity: 0.42; }
.sw-qty { display: flex; align-items: center; border: 1px solid rgba(255,255,255,0.2); border-radius: 999px; overflow: hidden; }
.sw-qty button { width: 46px; height: 52px; background: none; border: none; color: #EAF1EE; font-size: 19px; cursor: pointer; font-family: var(--sw-sans); }
.sw-qty button:hover { background: rgba(255,255,255,0.08); }
.sw-qty div { min-width: 34px; text-align: center; font-size: 15px; color: #F2F7F4; }
.sw-cta-btn {
  flex: 1 1 200px; min-height: 52px; padding: 0 34px; border-radius: 999px; border: none;
  background: var(--sw-cta-bg); color: var(--sw-cta-fc); font-family: var(--sw-cta-ff); font-size: var(--sw-cta-fs);
  font-weight: 400; letter-spacing: 0.22em; text-transform: uppercase; cursor: pointer;
}
.sw-cta-btn:hover { filter: brightness(1.22); }
.sw-buy-row.is-disabled .sw-cta-btn, .sw-buy-row.is-disabled .sw-qty button { cursor: not-allowed; }

.sw-order-form { display: grid; gap: 14px; padding: 22px; border: 1px solid rgba(255,255,255,0.2); border-radius: 14px; background: rgba(4,32,61,0.35); }
.sw-order-form input, .sw-order-form select {
  background: none; border: none; border-bottom: 1px solid rgba(255,255,255,0.28); outline: none;
  color: #F4EFE6; font-family: var(--sw-pbody-ff); font-size: 15px; font-weight: 300; padding: 10px 0;
}
.sw-order-form select { appearance: none; background: rgba(4,32,61,0.6); cursor: pointer; }
.sw-order-form select option { color: #0b2b4d; }
.sw-order-addr { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sw-helper-text { font-family: var(--sw-helper-ff); font-size: var(--sw-helper-fs); letter-spacing: 0.18em; text-transform: uppercase; color: var(--sw-helper-fc); }
.sw-order-submit-row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; padding-top: 2px; }
.sw-order-submit-row .sw-cta-btn { flex: 0 0 auto; min-height: 46px; }

.sw-order-done { display: grid; gap: 12px; padding: 22px; border: 1px solid rgba(63,169,123,0.5); border-radius: 14px; background: rgba(4,114,77,0.16); }
.sw-order-number { font-family: var(--sw-ptitle-ff); font-size: 22px; font-weight: 300; color: var(--sw-ptitle-fc); }
.sw-order-done-body { font-family: var(--sw-pbody-ff); font-size: 14px; line-height: 1.7; color: var(--sw-pbody-fc); }

.sw-badges { display: flex; gap: 26px; flex-wrap: wrap; font-family: var(--sw-badge-ff); font-size: var(--sw-badge-fs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--sw-badge-fc); }

.sw-carousel-wrap {
  position: relative; margin-top: clamp(2px,0.4vw,8px); flex: 1 1 auto; min-height: 0;
  height: calc(var(--sw-car-h) + 88px); max-height: calc(var(--sw-car-h) + 88px); flex-shrink: 0;
  transition: height 620ms cubic-bezier(.16,.84,.3,1), max-height 620ms cubic-bezier(.16,.84,.3,1);
}
.sw-carousel-wrap.is-compact { height: calc(min(15vh,168px) + 88px); max-height: calc(min(15vh,168px) + 88px); }
.sw-carousel-track {
  display: flex; align-items: center; height: 100%; padding: 44px 4px; box-sizing: border-box;
  overflow-x: auto; overflow-y: hidden; cursor: grab; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; -ms-overflow-style: none;
}
.sw-carousel-track::-webkit-scrollbar { display: none; }
.sw-carousel-card {
  flex: 0 0 auto; height: 100%; aspect-ratio: var(--sw-car-aspect); margin-right: clamp(12px,1.5vw,22px);
  padding: 0; border: none; border-radius: 14px; background: #062E5C; cursor: pointer;
  transition: transform 380ms cubic-bezier(.2,.8,.3,1), box-shadow 380ms cubic-bezier(.2,.8,.3,1); will-change: transform;
  position: relative;
}
.sw-carousel-card:hover {
  transform: scale(1.1); z-index: 5;
  box-shadow: 0 10px 26px rgba(2,14,28,0.42), 0 3px 9px rgba(2,14,28,0.28);
}
.sw-carousel-card img { width: 100%; height: 100%; object-fit: cover; display: block; background: #062E5C; border-radius: 14px; pointer-events: none; }
.sw-carousel-hint { flex: 0 0 auto; text-align: center; margin-top: 14px; font-family: var(--sw-helper-ff); font-size: var(--sw-helper-fs); letter-spacing: 0.28em; text-transform: uppercase; color: var(--sw-helper-fc); }

/* ================= SERVICES / WORKSHOPS ================= */
.sw-services {
  position: relative; z-index: 12; background: var(--sw-svc-bg); display: flex; align-items: center; overflow: hidden;
  padding: var(--sw-svc-py) var(--sw-pad-x); border-top: 1px solid rgba(255,255,255,0.07);
}
.sw-services-inner { position: relative; max-width: 1280px; margin: 0 auto; width: 100%; display: grid; gap: clamp(14px,1.6vw,22px); }
.sw-services .sw-eyebrow { color: #083D77; }
.sw-workshops-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,300px),1fr)); gap: clamp(14px,1.8vw,26px); width: 100%; }
.sw-ws-card {
  position: relative; min-height: clamp(400px,58vh,560px); border-radius: 26px; overflow: hidden;
  background: rgba(255,255,255,0.06); animation: swWsIn 780ms cubic-bezier(0.34,1.42,0.5,1) both;
}
.sw-ws-card img.sw-ws-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1); transition: transform 760ms cubic-bezier(0.34,1.32,0.52,1); }
.sw-ws-card.is-open img.sw-ws-photo { transform: scale(1.05); }
.sw-ws-veil { position: absolute; inset: 0; background: rgba(6,28,48,0.5); backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); opacity: 0; transition: opacity 520ms cubic-bezier(0.4,0.9,0.3,1); pointer-events: none; }
.sw-ws-card.is-open .sw-ws-veil { opacity: 1; }
.sw-ws-gradient { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(6,28,48,0.58), rgba(6,28,48,0) 42%, rgba(6,28,48,0.34)); pointer-events: none; }
.sw-ws-content { position: relative; min-height: 100%; display: flex; flex-direction: column; padding: clamp(22px,2.4vw,34px); gap: 14px; }
.sw-ws-title { margin: 0; font-family: var(--sw-stitle-ff); font-size: min(var(--sw-stitle-fs),7vw); font-weight: 300; line-height: 1.25; color: var(--sw-stitle-fc); text-wrap: balance; flex: 0 0 auto; }
.sw-ws-desc { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; padding-bottom: 6px;
  opacity: 0; transform: translateY(-18px); transition: opacity 420ms ease, transform 620ms cubic-bezier(0.34,1.42,0.5,1); }
.sw-ws-card.is-open .sw-ws-desc { opacity: 1; transform: translateY(0); }
.sw-ws-desc p { margin: 0; font-family: var(--sw-sbody-ff); text-wrap: pretty; }
.sw-ws-desc p.sw-ws-body { font-size: var(--sw-sbody-fs); line-height: 1.7; color: #EAF1F6; }
.sw-ws-desc p.sw-ws-body2 { font-size: var(--sw-wsb2-fs); line-height: 1.6; color: rgba(234,241,246,0.82); }
.sw-ws-cta { flex: 0 0 auto; opacity: 0; transform: translateY(26px); transition: opacity 420ms ease 60ms, transform 660ms cubic-bezier(0.34,1.46,0.5,1) 60ms; }
.sw-ws-card.is-open .sw-ws-cta { opacity: 1; transform: translateY(0); }
.sw-ws-plaque { display: inline-flex; align-items: center; gap: 12px; padding: 12px 20px; border-radius: 18px; background: rgba(255,255,255,0.94); box-shadow: 0 10px 30px rgba(4,26,46,0.24); }
.sw-ws-plaque img { width: auto; object-fit: contain; display: block; }


/* ================= FOOTER ================= */
.sw-footer {
  position: static; left: 0; right: 0; bottom: 0; z-index: 0; background: var(--sw-foot-bg);
  min-height: 100vh; display: flex; flex-direction: column; justify-content: center; overflow: hidden;
  padding: var(--sw-foot-pt) var(--sw-pad-x) var(--sw-foot-pb);
}
@media (min-width: 640px) {
  .sw-footer { position: fixed; }
}
.sw-footer-inner { position: relative; max-width: 1180px; margin: 0 auto; width: 100%; display: grid; gap: clamp(30px,3.6vw,52px); }
/* the shared eyebrow color equals the footer's own green background — override so it's actually visible here */
.sw-footer .sw-eyebrow:not(.sw-eyebrow-dim) { color: rgba(255,255,255,0.7); }
.sw-footer-top { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(32px,5vw,80px); align-items: end; }
.sw-footer-lead { display: grid; gap: 22px; }
.sw-footer-headline { font-family: var(--sw-fhead-ff); font-size: min(var(--sw-fhead-fs),8.4vw); line-height: 1.18; font-weight: 200; letter-spacing: -0.01em; margin: 0; color: var(--sw-fhead-fc); text-wrap: pretty; }
.sw-footer-body { margin: 0; font-family: var(--sw-fbody-ff); font-size: var(--sw-fbody-fs); line-height: 1.8; color: var(--sw-fbody-fc); max-width: 40ch; }
.sw-footer-thanks { padding: 22px 0; font-family: var(--sw-fbody-ff); font-size: var(--sw-fbody-fs); color: var(--sw-fbody-fc); border-bottom: 1px solid rgba(255,255,255,0.4); }
.sw-join-form { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; border-bottom: 1px solid rgba(255,255,255,0.4); padding-bottom: 12px; }
.sw-join-form input { flex: 1 1 200px; min-width: 0; background: none; border: none; outline: none; color: #F4FAF7; font-family: var(--sw-sans); font-size: 16px; font-weight: 300; padding: 12px 0; }
.sw-join-btn {
  padding: 13px 30px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.55); background: none;
  color: var(--sw-join-fc); font-family: var(--sw-join-ff); font-size: var(--sw-join-fs); letter-spacing: 0.22em;
  text-transform: uppercase; cursor: pointer;
}
.sw-join-btn:hover { background: #F4FAF7; color: var(--sw-foot-bg); }

.sw-footer-cols { display: grid; grid-template-columns: 1.4fr 0.8fr 0.8fr 1fr; gap: clamp(28px,4vw,64px); padding-top: 34px; border-top: 1px solid rgba(255,255,255,0.22); }
.sw-footer-col { display: grid; gap: 12px; align-content: start; font-family: var(--sw-fsmall-ff); font-size: var(--sw-fsmall-fs); letter-spacing: 0.06em; }
.sw-footer-col a { color: var(--sw-fsmall-fc); }
.sw-footer-col-brand { gap: 16px; }
.sw-footer-col-brand img { width: 132px; height: auto; display: block; opacity: 0.9; }
.sw-footer-small { font-family: var(--sw-fsmall-ff); font-size: var(--sw-fsmall-fs); line-height: 1.9; color: var(--sw-fsmall-fc); }
.sw-footer-mail {
  justify-self: start; text-align: left; font-family: var(--sw-fsmall-ff); font-size: var(--sw-fsmall-fs); font-weight: 300;
  letter-spacing: 0.06em; color: var(--sw-fsmall-fc); background: none; border: none; border-bottom: 1px dashed rgba(255,255,255,0.4);
  padding: 0 0 3px; cursor: pointer;
}
.sw-footer-mail:hover { color: #fff; border-color: #fff; }
.sw-copy-note { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.6); min-height: 1.4em; }
.sw-footer-copyright { text-align: right; font-family: var(--sw-fsmall-ff); font-size: var(--sw-fsmall-fs); letter-spacing: 0.1em; color: rgba(255,255,255,0.5); }
.sw-footer-spacer { position: relative; z-index: 0; height: 0; pointer-events: none; }
@media (min-width: 640px) {
  .sw-footer-spacer { height: 100vh; }
}

/* ================= GHOST + OVERLAY ================= */
.sw-ghost {
  position: fixed; left: 0; top: 0; z-index: 44; width: var(--sw-mark); height: var(--sw-mark);
  opacity: 0; pointer-events: none; transform-origin: 50% 50%; will-change: transform, opacity;
}
.sw-ghost img { width: 100%; height: 100%; display: block; }

.sw-overlay { position: fixed; inset: 0; z-index: 70; overflow: hidden; background: radial-gradient(125% 95% at 50% 42%, #0F4E93 0%, #083D77 52%, #04203D 100%); }
.sw-overlay-stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.sw-overlay-world { position: absolute; inset: 0; opacity: 0; pointer-events: none; overflow: hidden; }
.sw-overlay-silver { position: absolute; inset: 0; }
.sw-overlay-cap { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; text-align: center; color: #ffffff; }
.sw-overlay-word { font-family: var(--sw-phase-ff); font-size: min(var(--sw-phase-fs),9vw); font-style: italic; color: inherit; }
.sw-overlay-dots { display: flex; gap: 22px; justify-content: center; margin-top: 28px; }
.sw-overlay-close {
  position: absolute; top: 22px; right: clamp(18px,4vw,40px); font-family: var(--sw-sans); font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.8); background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.28); border-radius: 999px; padding: 9px 20px; cursor: pointer; z-index: 2;
}
.sw-overlay-close:hover { background: rgba(255,255,255,0.22); color: #fff; }

/* ================= RESPONSIVE ================= */
/* Nav: the frosted mobile pill (hamburger) only replaces the desktop chip
   below 640px. Between 640-860px the desktop chip stays, just without the
   Tools/Workshops links (see #navLinks below) so it never crowds. */
@media (max-width: 639px) {
  .sw-nav-chip { display: none; }
  .sw-nav-mobile {
    display: block; box-sizing: border-box; border-radius: 999px; background: var(--sw-nav-bg);
    border: 1px solid rgba(255,255,255,0.15); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
    box-shadow: 0 14px 40px rgba(2,12,26,0.34); overflow: hidden; pointer-events: auto;
    transition: border-radius 420ms cubic-bezier(0.22,1,0.36,1);
  }
  .sw-nav-mobile.is-open { border-radius: 28px; }
}
@media (min-width: 640px) {
  .sw-nav-mobile { display: none; }
}
@media (max-width: 859px) {
  #navLinks { display: none; }
}
@media (max-width: 639px) {
  :root {
    --sw-pad-x: 20px;
    --sw-prod-pt: 92px;
    --sw-foot-pt: 48px;
    --sw-frame-h: 39vh;
    --sw-car-h: min(22vh,200px);
    --sw-mark: min(30vh,190px);
  }
  /* Font sizes for these are already scaled for mobile via the JS `shrink`
     map (applyTheme() writes the shrunk value straight into --sw-*-fs), so
     no separate factor is applied here — doing it in both places compounded
     into fonts far smaller than intended (e.g. the product title rendered
     at ~38% of desktop instead of the intended 62%). */

  .sw-product-grid, .sw-footer-top { grid-template-columns: 1fr !important; }
  .sw-footer-cols { grid-template-columns: 1fr 1fr; }
  .sw-footer-col-brand { grid-column: 1 / -1; }
  .sw-footer-col-contact { grid-column: 1 / -1; }
  .sw-footer-cols { border-top: none; }
  .sw-footer-copyright { text-align: center; }
  .sw-order-addr { grid-template-columns: 1fr; }

  /* Join form: email + button on one line — trim the button so it never wraps. */
  .sw-join-form input { font-size: 14px; }
  .sw-join-btn { padding: 12px 18px; font-size: 9px; }

  /* Buy row: qty stepper + CTA on one line — shrink the stepper a touch. */
  .sw-qty button { width: 38px; height: 46px; font-size: 16px; }
  .sw-qty div { min-width: 24px; font-size: 13px; }
  .sw-buy-row { gap: 10px; }
  .sw-cta-btn { flex-basis: 150px; padding: 0 20px; min-height: 46px; }

  /* Breathe pill in the mobile nav reads a little small next to the wordmark. */
  .sw-breathe-btn { font-size: calc(var(--sw-breathe-fs) + 3px); }

  /* Skip sits level with the "scroll to breathe" hint text, one size down. */
  .sw-hero-hint { bottom: 30px; }
  .sw-hero-skip { bottom: 70px; }
  .sw-skip-btn { font-size: calc(var(--sw-skip-fs) - 1px); }

  /* Post-submit "thank you" note reads smaller than the body copy above it. */
  .sw-footer-thanks { font-size: 13px; }
}