/* SACE LADY — Brand Story page (static rebuild)
   Sections 1–3 follow design-ref.png; sections 4–7 faithfully port the original bundle styles. */

@font-face {
  font-family: "Geist Offline";
  src: url("../assets/geist.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --font-geist-sans: "Geist Offline";
  --brand-blue: #339aec;
  --blue: #86a5ce;
  --blue-deep: #1e407c;
  --paper: #f6f6f6;
  --warm-white: #f8f3ed;
  --rose: #aa7575;
  --earth: #875739;
  --ink: #111213;
  --line: #1112132e;
  --serif: "Iowan Old Style", "Bodoni 72", Didot, "Times New Roman", serif;
  --sans: var(--font-geist-sans), Montserrat, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: var(--paper); color: var(--ink); font-family: var(--sans); margin: 0; }
a { color: inherit; text-decoration: none; }
img, canvas { display: block; }

.site { --scroll: 0; --velocity: 0; overflow: clip; }

/* ================= NAV ================= */
.nav {
  z-index: 100; color: #fff; mix-blend-mode: difference;
  justify-content: space-between; align-items: center;
  padding: 22px 30px; display: flex; position: fixed; top: 0; left: 0; right: 0;
  transition: background 0.4s ease, backdrop-filter 0.4s ease, padding 0.4s ease, color 0.4s ease;
}
.nav.scrolled {
  padding: 16px 30px;
}
.nav a { pointer-events: auto; }
/* Logo: sprite crop + difference blend, same as Brand-Story-Offline.html */
.brand { width: 168px; height: 22px; display: block; position: relative; overflow: hidden; }
.brand img { width: 210px; max-width: none; height: auto; position: absolute; top: -49px; left: -21px; }
.navSide { letter-spacing: .11em; text-transform: uppercase; align-items: center; gap: 30px; font-size: 11px; font-weight: 600; display: flex; }
.menuLink { align-items: center; gap: 11px; display: flex; cursor: pointer; }
.menuLink i, .menuLink i:after { content: ""; background: currentColor; width: 22px; height: 1px; display: block; }
.menuLink i:after { transform: translateY(5px); }

/* ================= 1. HERO (new design) ================= */
.hero {
  background: #fff; height: 100svh; min-height: 620px;
  position: sticky; top: 0; z-index: 1; overflow: hidden;
}
.heroImage {
  object-fit: cover; object-position: center 30%;
  width: 106%; height: 106%;
  transform: translateY(calc(min(var(--scroll), 1200) * .045px)) scale(calc(1.025 + abs(var(--velocity)) * .02));
  will-change: transform;
  position: absolute; top: -3%; bottom: -3%; left: -3%; right: -3%;
}
.heroWord {
  font-family: var(--serif); font-weight: 400; color: #fff;
  letter-spacing: .02em; text-align: center; white-space: nowrap;
  font-size: clamp(90px, 12.5vw, 240px); line-height: .8;
  margin: 0; position: absolute; left: 0; right: 0; bottom: 1.1em;
  transform: translateY(calc(min(var(--scroll), 1000) * -.02px));
  will-change: transform; z-index: 5; pointer-events: none;
}

/* ================= 2. STORY (new design) ================= */
.storyPanel {
  z-index: 3; background: #fff; position: relative;
  padding: 7rem 4.17vw 10rem;
}
.roundedCap {
  background: #fff; border-radius: 10rem 10rem 0 0;
  height: 12rem; position: absolute; top: -11.5rem; left: 0; right: 0;
}
.roundedCapBottom {
  background: #fff; border-radius: 0 0 7.5rem 7.5rem;
  height: 9.6875rem; position: absolute; bottom: -9.4rem; left: 0; right: 0; z-index: 3;
}
.sectionKicker, .eyebrow {
  letter-spacing: .14em; text-transform: uppercase; margin: 0;
  font-size: 11px; font-weight: 600; display: block;
}
.storyKicker { color: var(--ink); font-size: 13px; letter-spacing: .02em; text-transform: none; font-weight: 500; }
.storyLead {
  font-family: var(--serif); color: var(--blue-deep);
  letter-spacing: -.02em; text-align: center; font-weight: 700;
  font-size: clamp(56px, 7.2vw, 130px); line-height: 1.02;
  margin: 90px 0 0;
}
.storyLead em { font-weight: 400; font-style: italic; font-size: .62em; }
.storyMonogram { width: 86px; height: auto; margin: 70px auto 0; }
.storyBody {
  letter-spacing: -.01em; text-align: center; color: #2b2b2e;
  max-width: 1080px; margin: 80px auto 0;
  font-size: clamp(17px, 1.45vw, 24px); line-height: 2.1; font-weight: 300;
}
.storyBody strong { font-weight: 700; color: var(--ink); }
.attitudeRail {
  gap: 2.6vw; padding: 120px 0 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.attitudeCard {
  background-size: cover; background-position: center;
  color: #fff; border-radius: 42px;
  aspect-ratio: 760 / 920;
  padding: 34px 30px; display: flex; flex-direction: column; justify-content: flex-end;
  position: relative; overflow: hidden;
}
.attitudeLetter {
  font-family: var(--serif); color: #111; letter-spacing: -.04em;
  font-size: clamp(120px, 10vw, 210px); line-height: .72;
  position: absolute; top: 30px; left: 26px;
}
.attitudeCard h3 { font-family: var(--serif); margin: 0 0 10px; font-size: 34px; font-weight: 400; }
.attitudeCard p { margin: 0; font-size: 13px; line-height: 1.55; font-weight: 300; }

/* ================= 3. COLLAGE (blue, new design) ================= */
.collageSection {
  background: var(--blue); position: relative;
  padding: 12rem 4.17vw 14rem; margin-top: 0;
}
/* Blue layer sits above the sticky hero (z1) but below the WebGL warp canvas (z9) */
.collageSection:before {
  content: ""; background: var(--blue); z-index: 2;
  position: absolute; top: 0; bottom: 0; left: 0; right: 0;
}
.collageKicker, .collageLead { position: relative; z-index: 3; }
.collageKicker { color: #fff; font-size: clamp(14px, 1.3vw, 24px); letter-spacing: .02em; text-transform: uppercase; font-weight: 500; }
.collageLead {
  font-family: var(--serif); color: var(--blue-deep);
  letter-spacing: -.02em; text-align: center; font-weight: 700;
  font-size: clamp(52px, 6.2vw, 116px); line-height: 1.05;
  margin: 130px 0 0;
}
.collageLead em { font-weight: 400; font-style: italic; font-size: .66em; }
.collage {
  position: relative; z-index: 10; max-width: 1640px; margin: clamp(40px, 5vw, 90px) auto 0;
  aspect-ratio: 650 / 660;
  perspective: 1400px;
  perspective-origin: 50% 40%;
  transform-style: preserve-3d;
}
.collage img { position: absolute; will-change: transform; transform-style: preserve-3d; backface-visibility: hidden; }
.collageTwoFace { width: 41.5%; left: 0; top: 2%; z-index: 1; }
.collageThreeFace { width: 54%; left: 43.8%; top: 12.9%; z-index: 2; }
.collagePink { width: 27%; right: 0; top: 0; z-index: 10; }
.collageDark { width: 33%; left: 8%; top: 56%; z-index: 10; }




/* ================= 4. PRINCIPLES (original) ================= */
.principles { z-index: 4; background: var(--warm-white); grid-template-columns: 40% 60%; padding: 130px 2.08vw 150px; display: grid; position: relative; }
.principleIntro { align-self: start; padding-right: 5vw; position: sticky; top: 120px; }
.principleIntro h2, .worldHeader h2, .honorsTitle h2 {
  font-family: var(--serif); letter-spacing: -.055em; margin: 20px 0 0; font-weight: 400;
  font-size: clamp(64px, 7vw, 132px); line-height: .86;
}
.principleIntro h2 { font-size: clamp(62px, 6.5vw, 124px); }
.principles .sectionKicker, .honors .sectionKicker { color: var(--blue-deep); }
.principleList { border-top: 1px solid var(--line); }
.principleList article { border-bottom: 1px solid var(--line); grid-template-columns: 80px 1fr 1fr; align-items: start; gap: 22px; padding: 34px 0 80px; display: grid; }
.principleList article > span { color: var(--blue-deep); font-size: 11px; font-weight: 600; }
.principleList h3 { font-family: var(--serif); margin: 0; font-size: clamp(34px, 3vw, 54px); font-weight: 400; line-height: .95; }
.principleList p { max-width: 370px; margin: 3px 0 0; font-size: 13px; line-height: 1.6; }

/* ================= 5. WORLD MAP (original, verbatim) ================= */
.world { z-index: 4; color: #132947; background: radial-gradient(circle at 72% 48%, #b8d8fc29, #0000 29%), radial-gradient(circle at 28% 62%, #e0eeff3d, #0000 34%), linear-gradient(#fff 0%, #fbfdff 58%, #f6f9fd 100%); min-height: 100svh; padding: 120px 2.08vw 54px; position: relative; overflow: hidden; }
.world:before { content: ""; background: radial-gradient(circle, #b8d7fb33, #e0eeff00 66%); border-radius: 50%; width: 92vw; height: 92vw; position: absolute; top: -32vw; left: 34%; }
.world:after { content: ""; opacity: .52; pointer-events: none; background: radial-gradient(circle at 76% 60%, #75b5f114, #0000 23%), linear-gradient(112deg, #0000 28%, #89bdef0f 49%, #0000 70%); position: absolute; top: 0; bottom: 0; left: 0; right: 0; }
.worldHeader { z-index: 4; grid-template-columns: 24% 52% 24%; align-items: end; display: grid; position: relative; }
.worldHeader .sectionKicker { color: #168ee4; align-self: start; }
.worldHeader h2 { max-width: 880px; margin: 0; }
.worldHeader h2 em { font-weight: 400; }
.worldHeader > p:last-child { color: #58708f; max-width: 330px; margin: 0 0 8px; font-size: 13px; line-height: 1.6; }
.networkStage { --map-parallax-x: 0px; --map-parallax-y: 0px; --route-parallax-x: 0px; --route-parallax-y: 0px; --node-parallax-x: 0px; --node-parallax-y: 0px; --core-parallax-x: 0px; --core-parallax-y: 0px; z-index: 3; aspect-ratio: 1400/650; isolation: isolate; perspective: 1600px; perspective-origin: 50% 18%; width: min(1500px, 100%); margin: 44px auto -12px; position: relative; }
.networkStage:before { content: ""; filter: blur(84px); opacity: .42; background: radial-gradient(at 56% 54%, #69b0f21a 0%, #a7cff70b 48%, #0000 82%); border-radius: 50%; animation: 9s ease-in-out infinite stageBreath; position: absolute; top: 10%; bottom: 7%; left: 8%; right: 8%; }
.networkMeta { z-index: 5; color: #1f4f8085; letter-spacing: .14em; text-transform: uppercase; justify-content: space-between; font-size: 9px; font-weight: 600; display: flex; position: absolute; top: 6.5%; left: 2%; right: 2%; }
.mapPlane { transform-origin: 50% 65%; transform-style: preserve-3d; will-change: transform; position: absolute; top: 0; bottom: 0; left: 0; right: 0; transform: rotateX(22deg) translateY(18px) scaleX(1.03) scaleY(1.1); }
.mapPlane:before { z-index: 0; box-shadow: none; content: ""; filter: blur(26px); opacity: .82; pointer-events: none; background: radial-gradient(at 50% 56%, #77b5f21f 0%, #aad3fa11 45%, #6da6de07 68%, #0000 88%), linear-gradient(#619eda08 0%, #0000 35% 72%, #518fcd0a 100%); border: 0; border-radius: 50%; position: absolute; top: -2%; bottom: -9%; left: -5%; right: -5%; transform: translateZ(-10px) scale(1.035); -webkit-mask-image: radial-gradient(at 50% 56%, #000 0%, #000000e6 52%, #00000061 73%, #0000 94%); mask-image: radial-gradient(at 50% 56%, #000 0%, #000000e6 52%, #00000061 73%, #0000 94%); }
.mapSurfaceShade { z-index: 1; filter: blur(30px); opacity: .68; pointer-events: none; background: radial-gradient(at 50% 55%, #80bef81a 0%, #b2d7fa0b 48%, #0000 82%), linear-gradient(#6faae20b 0%, #0000 28% 76%, #5897d30a 100%); border-radius: 50%; position: absolute; top: -3%; bottom: -7%; left: -4%; right: -4%; transform: translateZ(-4px) scale(1.025); -webkit-mask-image: radial-gradient(at 50% 55%, #000 0%, #000000d1 55%, #00000038 78%, #0000 96%); mask-image: radial-gradient(at 50% 55%, #000 0%, #000000d1 55%, #00000038 78%, #0000 96%); }
.worldMap { z-index: 2; filter: drop-shadow(0 22px 38px #4884c01f) drop-shadow(0 4px 12px #5391ce1a); width: 100%; height: 100%; position: absolute; top: 0; bottom: 0; left: 0; right: 0; overflow: visible; transform: translateZ(8px); }
.mapAura, .mapRevealGroup { translate: var(--map-parallax-x) var(--map-parallax-y); will-change: translate; transition: translate .62s cubic-bezier(.22,.61,.36,1); }
.mapAura { fill: #61a9ed21; filter: blur(58px); opacity: 0; }
.world.isVisible .mapAura { animation: 1.8s .12s forwards mapAuraReveal, 8.5s ease-in-out 2s infinite mapAuraBreath; }
.mapRevealRect { transform-box: fill-box; transform-origin: 0; transform: scaleX(0); }
.world.isVisible .mapRevealRect { animation: 1.85s cubic-bezier(.2,.7,.2,1) .12s forwards mapReveal; }
.mapBloom { fill: #4a90d74d; filter: url(#mapBloom); opacity: 0; }
.world.isVisible .mapBloom { animation: 1.9s .15s forwards mapBloomReveal, 8s ease-in-out 2.1s infinite mapBloomBreath; }
.landMasses { fill: url(#landGlow); stroke: none; opacity: 0; }
.world.isVisible .landMasses { animation: 1.75s .18s forwards landReveal, 8s ease-in-out 2.1s infinite landBreath; }
.countryBorders { fill: none; stroke: #ffffff9e; stroke-width: .7px; opacity: 0; vector-effect: non-scaling-stroke; }
.world.isVisible .countryBorders { animation: 1.5s .72s forwards bordersReveal; }
.networkTexture { fill: url(#networkDots); opacity: 0; }
.world.isVisible .networkTexture { animation: 1.4s .9s forwards networkTextureReveal, 8s ease-in-out 2.2s infinite networkTextureBreath; }
.coastline { fill: none; stroke: url(#coastGlow); stroke-dasharray: 1; stroke-dashoffset: 1px; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.2px; opacity: 0; vector-effect: non-scaling-stroke; }
.world.isVisible .coastline { animation: 1.9s cubic-bezier(.3,.1,.15,1) .18s forwards coastlineDraw, 8s ease-in-out 2.1s infinite coastlineBreath; }
.networkRoutes path { fill: none; stroke: url(#routeGlow); stroke-dasharray: 1; stroke-dashoffset: 1px; stroke-linecap: round; stroke-width: 1.55px; opacity: .94; filter: drop-shadow(0 0 5px #269cf26b); vector-effect: non-scaling-stroke; }
.networkRoutes { translate: var(--route-parallax-x) var(--route-parallax-y); will-change: translate; transition: translate .56s cubic-bezier(.22,.61,.36,1); }
.world.isVisible .networkRoutes path { animation: 1.35s cubic-bezier(.32,0,.17,1) forwards routeDraw; animation-delay: var(--route-delay); }
.coreHalo { fill: #269cf21a; stroke: #269cf247; transform-origin: 50%; }
.coreRing { fill: #269cf21a; stroke: #188fe4; stroke-width: 1.3px; }
.coreDot { fill: #fff; filter: url(#softGlow); }
.world.isVisible .coreHalo { animation: 6.2s ease-in-out .45s infinite coreBreath; }
.coreNode { translate: var(--core-parallax-x) var(--core-parallax-y); will-change: translate; transition: translate .46s cubic-bezier(.22,.61,.36,1); }
.regionNode { opacity: 0; translate: var(--node-parallax-x) var(--node-parallax-y); will-change: translate; transition: translate .5s cubic-bezier(.22,.61,.36,1); }
.world.isVisible .regionNode { animation: .42s forwards nodeReveal; animation-delay: var(--arrival-delay); }
.arrivalRipple { fill: #269cf20f; stroke: #269cf2b8; stroke-width: 1px; opacity: 0; transform-box: fill-box; transform-origin: 50%; }
.world.isVisible .arrivalRipple { animation: 1s cubic-bezier(.15,.55,.2,1) forwards arrivalRipple; animation-delay: var(--arrival-delay); }
.regionBreath { fill: #269cf212; stroke: #269cf240; opacity: 0; transform-box: fill-box; transform-origin: 50%; }
.regionRing { fill: #269cf21a; stroke: #249cf0; stroke-width: 1.15px; }
.regionDot { fill: #fff; filter: url(#softGlow); }
.world.isVisible .regionBreath { animation: 5.8s ease-in-out infinite regionBreath; animation-delay: calc(var(--arrival-delay) + .72s); }
.brandOrigin { z-index: 6; transform: translate3d(calc(var(--core-parallax-x) + 8px), calc(var(--core-parallax-y) + 13px), 48px) rotateX(-22deg); transform-origin: 0; transform-style: preserve-3d; flex-direction: column; gap: 4px; padding-left: 20px; transition: transform .5s cubic-bezier(.22,.61,.36,1); display: flex; position: absolute; }
.brandOrigin span, .brandOrigin strong { letter-spacing: .14em; text-transform: uppercase; font-size: 8px; font-style: normal; font-weight: 600; }
.brandOrigin span { color: #214d778f; }
.brandOrigin strong { color: #107fcf; }
.regionLabels { z-index: 5; pointer-events: none; transform-style: preserve-3d; position: absolute; top: 0; bottom: 0; left: 0; right: 0; }
.regionLabel { color: #1c4268bd; font: inherit; letter-spacing: .12em; opacity: 0; pointer-events: auto; text-transform: uppercase; transform: translate3d(calc(var(--node-parallax-x) + 9px), calc(var(--node-parallax-y) - 50%), 36px) rotateX(-22deg); transform-origin: 0; white-space: nowrap; background: 0 0; border: 0; align-items: center; gap: 8px; padding: 5px 7px; font-size: 8.5px; font-weight: 600; transition: color .24s, transform .5s cubic-bezier(.22,.61,.36,1); display: flex; position: absolute; }
.world.isVisible .regionLabel { animation: .65s forwards labelReveal; animation-delay: calc(var(--node-delay) + 1s); }
.regionLabel:hover, .regionLabel:focus-visible { color: #0d6fb9; transform: translate3d(calc(var(--node-parallax-x) + 13px), calc(var(--node-parallax-y) - 50%), 42px) rotateX(-22deg); outline: none; }
.regionLabel i { background: #249cf0; border-radius: 50%; width: 5px; height: 5px; box-shadow: 0 0 8px #249cf0b8; }
.worldStats { z-index: 4; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 1.5vw, 24px); max-width: 1500px; margin: 18px auto 0; display: grid; position: relative; }
.worldStats article { background: rgba(255,255,255,0.72); border: 1px solid rgba(255,255,255,0.5); border-radius: 24px; justify-content: flex-end; align-items: flex-start; flex-direction: column; min-height: 220px; padding: 40px 36px 36px; display: flex; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 8px 32px rgba(31,79,128,0.08), inset 0 1px 0 rgba(255,255,255,0.6); }
.worldStats strong { color: #339aec; font-family: var(--sans); letter-spacing: -.04em; font-size: clamp(56px, 5.5vw, 96px); font-weight: 300; line-height: 1; margin-bottom: 16px; }
.worldStats span { color: #1a2a3a; letter-spacing: .14em; text-transform: uppercase; max-width: 180px; font-size: 12px; font-weight: 700; line-height: 1.4; }
.worldStats article p { color: #6b7f94; font-size: 13px; font-weight: 400; margin: 4px 0 0; }

@keyframes routeDraw { to { stroke-dashoffset: 0; } }
@keyframes mapReveal { to { transform: scaleX(1); } }
@keyframes mapAuraReveal { 0% { opacity: 0; transform: scale(.94); } to { opacity: .72; transform: scale(1); } }
@keyframes mapAuraBreath { 0%, to { opacity: .56; transform: scale(.985); } 50% { opacity: .78; transform: scale(1.015); } }
@keyframes mapBloomReveal { to { opacity: .38; } }
@keyframes mapBloomBreath { 0%, to { opacity: .2; } 50% { opacity: .42; } }
@keyframes landReveal { 0% { opacity: 0; } to { opacity: 1; } }
@keyframes landBreath { 0%, to { opacity: .84; } 50% { opacity: 1; } }
@keyframes networkTextureReveal { to { opacity: .72; } }
@keyframes networkTextureBreath { 0%, to { opacity: .58; } 50% { opacity: .78; } }
@keyframes bordersReveal { to { opacity: 1; } }
@keyframes coastlineDraw { 0% { opacity: 0; stroke-dashoffset: 1px; } 15% { opacity: 1; } to { opacity: 1; stroke-dashoffset: 0; } }
@keyframes coastlineBreath { 0%, to { opacity: .62; } 50% { opacity: .92; } }
@keyframes stageBreath { 0%, to { opacity: .58; transform: scale(.98); } 50% { opacity: .84; transform: scale(1.025); } }
@keyframes nodeReveal { 0% { opacity: 0; } to { opacity: 1; } }
@keyframes labelReveal { to { opacity: 1; } }
@keyframes coreBreath { 0%, to { opacity: .5; transform: scale(.88); } 50% { opacity: .88; transform: scale(1.13); } }
@keyframes arrivalRipple { 0% { opacity: .82; transform: scale(.4); } 72% { opacity: .38; } to { opacity: 0; transform: scale(3.1); } }
@keyframes regionBreath { 0%, to { opacity: .24; transform: scale(.82); } 50% { opacity: .62; transform: scale(1.18); } }

/* ================= 6. HONORS (original) ================= */
.honors { z-index: 4; background: var(--paper); grid-template-columns: minmax(0, 48%) minmax(0, 1fr); gap: 5vw; padding: 130px 2.08vw 140px; display: grid; position: relative; }
.honorsTitle { align-self: start; position: sticky; top: 110px; }
.honorsTitle em { font-weight: 400; }
.awardList { border-top: 1px solid var(--line); }
.awardGroup { border-bottom: 1px solid var(--line); }
.awardRow { grid-template-columns: 80px 1fr auto; align-items: center; gap: 15px; min-height: 132px; display: grid; }
.awardRow > span { color: var(--blue-deep); font-size: 12px; font-weight: 650; }
.awardRow h3 { font-family: var(--serif); margin: 0; font-size: clamp(28px, 2.4vw, 46px); font-weight: 400; line-height: 1; }
.awardToggle {
  border: 1px solid var(--line); border-radius: 999px; background: none;
  color: inherit; font: inherit; cursor: pointer;
  align-items: center; gap: 8px; padding: 9px 16px; display: flex;
  transition: border-color .3s, color .3s;
}
.awardToggle:hover { border-color: var(--blue-deep); color: var(--blue-deep); }
.awardToggle em { font-size: 12px; font-style: normal; font-weight: 600; }
.awardToggle i {
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  width: 9px; height: 9px; margin-top: -4px; display: block;
  transform: rotate(45deg); transition: transform .45s cubic-bezier(.22,.61,.36,1), margin .45s;
}
.awardGroup.open .awardToggle i { margin-top: 4px; transform: rotate(225deg); }
/* same-year extra awards: slide expand */
.awardExtra { max-height: 0; opacity: 0; overflow: hidden; transition: max-height .6s cubic-bezier(.22,.61,.36,1), opacity .45s ease; }
.awardGroup.open .awardExtra { opacity: 1; }
.awardExtra .awardRow { border-top: 1px solid #11121314; min-height: 104px; }
.awardExtra .awardRow h3 { color: #45454a; font-size: clamp(22px, 1.9vw, 34px); }

/* ================= 7. SHOP CTA ================= */
.shopCta { z-index: 4; background: #fdfdfe; text-align: center; padding: 0; position: relative; overflow: hidden; }
.shopCtaText { position: absolute; top: 8%; left: 0; right: 0; z-index: 2; }
.shopCtaMotto { font-family: var(--sans); color: var(--ink); margin: 0 0 24px; font-size: clamp(20px, 2.2vw, 38px); font-weight: 400; line-height: 1.4; }
.shopBtn { border: 1.5px solid var(--blue-deep); border-radius: 14px; background: transparent; color: var(--blue-deep); text-decoration: none; padding: 10px 50px; font-size: 18px; line-height: 1.2; display: inline-block; transition: background .35s ease, color .35s ease, border-color .35s ease; }
.shopBtn:hover { background: var(--blue); border-color: var(--blue); color: #fff; }
.shopCtaImg { width: 100%; height: auto; display: block; }

/* ================= FOOTER (original) ================= */
footer { z-index: 4; color: #fff; letter-spacing: .1em; text-transform: uppercase; background: var(--blue); grid-template-columns: 1fr 1fr 1fr; align-items: center; padding: 30px; font-size: 10px; font-weight: 600; display: grid; position: relative; }
.footerBrand { width: 145px; }
.footerBrand img { width: 145px; height: auto; }
footer p { text-align: center; margin: 0; }
footer a { justify-self: end; }

/* ================= REVEAL (entrance) ================= */
.reveal .storyLead, .reveal .storyMonogram, .reveal .storyBody, .reveal .attitudeCard,
.reveal .collageKicker, .reveal .collageLead, .reveal .collage img,
.reveal .principleIntro, .reveal .principleList article,
.reveal .honorsTitle, .reveal .awardList article,
.reveal .shopCtaText, .reveal .shopCtaImg {
  opacity: 0; transform: translateY(120px);
  transition: opacity .9s cubic-bezier(.22,.61,.36,1), transform .9s cubic-bezier(.22,.61,.36,1);
}
/* storyPanel slide-up on scroll: starts lower */
.storyPanel { transform: translateY(80px); opacity: 0.3; transition: transform 1.2s cubic-bezier(.22,.61,.36,1), opacity 1.2s cubic-bezier(.22,.61,.36,1); }
.storyPanel.isVisible { transform: translateY(0); opacity: 1; }
.reveal.isVisible .storyLead, .reveal.isVisible .storyMonogram, .reveal.isVisible .storyBody, .reveal.isVisible .attitudeCard,
.reveal.isVisible .collageKicker, .reveal.isVisible .collageLead, .reveal.isVisible .collage img,
.reveal.isVisible .principleIntro, .reveal.isVisible .principleList article,
.reveal.isVisible .honorsTitle, .reveal.isVisible .awardList article,
.reveal.isVisible .shopCtaText, .reveal.isVisible .shopCtaImg {
  opacity: 1; transform: none;
}
.reveal.isVisible .attitudeCard:nth-child(1) { transition-delay: .05s; }
.reveal.isVisible .attitudeCard:nth-child(2) { transition-delay: .14s; }
.reveal.isVisible .attitudeCard:nth-child(3) { transition-delay: .23s; }
.reveal.isVisible .attitudeCard:nth-child(4) { transition-delay: .32s; }
.reveal.isVisible .principleList article:nth-child(2), .reveal.isVisible .awardList article:nth-child(2) { transition-delay: .1s; }
.reveal.isVisible .principleList article:nth-child(3), .reveal.isVisible .awardList article:nth-child(3) { transition-delay: .2s; }
.reveal.isVisible .awardList article:nth-child(4) { transition-delay: .3s; }
.reveal.isVisible .awardList article:nth-child(5) { transition-delay: .4s; }

/* hero entrance */
.heroImage { animation: 1.6s cubic-bezier(.22,.61,.36,1) both heroImageIn; }
.heroWord { animation: 1.4s cubic-bezier(.22,.61,.36,1) .25s both heroWordIn; }
@keyframes heroImageIn { 0% { opacity: 0; scale: 1.06; } to { opacity: 1; scale: 1; } }
@keyframes heroWordIn { 0% { opacity: 0; translate: 0 60px; } to { opacity: 1; translate: 0 0; } }

/* ================= RESPONSIVE ================= */
@media (max-width: 900px) {
  .nav { padding: 18px; }
  .brand { width: 134px; height: 18px; }
  .brand img { width: 168px; top: -39px; left: -17px; }
  .navSide > a:not(.menuLink) { display: none; }
  .hero { min-height: 560px; height: 78svh; }
  .heroImage { object-position: 43% center; }
  .heroWord { font-size: 17vw; bottom: .62em; }
  .storyPanel { padding: 4.2rem 18px 6rem; }
  .roundedCap { border-radius: 2.5rem 2.5rem 0 0; height: 4.1875rem; top: -4.125rem; }
  .roundedCapBottom { border-radius: 0 0 2.5rem 2.5rem; height: 4.1875rem; bottom: -4.125rem; }
  .storyLead { font-size: 12.5vw; margin-top: 50px; }
  .storyMonogram { width: 60px; margin-top: 45px; }
  .storyBody { margin-top: 50px; font-size: 16px; line-height: 1.9; }
  .storyBody br { display: none; }
  .attitudeRail { grid-template-columns: 1fr 1fr; gap: 14px; padding-top: 60px; }
  .attitudeCard { border-radius: 26px; padding: 20px 18px; }
  .attitudeLetter { font-size: 30vw; top: 18px; left: 16px; }
  .attitudeCard h3 { font-size: 24px; }
  .collageSection { padding: 6rem 18px 8rem; }
  .collageLead { font-size: 11.5vw; margin-top: 60px; }
  .collage { height: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 50px; perspective: none; }
  .collage img { position: static; width: 100%; transform: none !important; }
  .collageThreeFace { grid-column: 1 / -1; order: -1; }
  .principles, .honors { padding: 85px 18px 90px; display: block; }
  .principleIntro, .honorsTitle { margin-bottom: 70px; position: static; }
  .principleIntro h2, .worldHeader h2, .honorsTitle h2 { font-size: 15vw; }
  .principleList article { padding: 28px 0 55px; display: block; }
  .principleList h3 { margin: 26px 0 18px; }
  .world { min-height: auto; padding: 85px 18px 38px; }
  .worldHeader { display: block; }
  .worldHeader h2 { margin: 50px 0 32px; }
  .networkStage { aspect-ratio: 1.6; width: 128%; margin: 54px -14% 4px; }
  .networkMeta, .regionLabels { display: none; }
  .worldStats { grid-template-columns: 1fr 1fr; }
  .worldStats article { min-height: 160px; padding: 28px 22px 24px; }
  .worldStats strong { font-size: 14vw; font-weight: 300; }
  .worldStats span { max-width: 130px; }
  .awardRow { grid-template-columns: 58px 1fr auto; min-height: 110px; }
  .awardExtra .awardRow { min-height: 88px; }
  .shopCtaText { top: 4%; }
  .shopCtaMotto { font-size: 16px; margin-bottom: 12px; }
  .shopBtn { padding: 10px 46px; font-size: 17px; }
  footer { grid-template-columns: 1fr auto; padding: 24px 18px; }
  footer p { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .heroWord, .heroImage, .worldMap, .brandOrigin, .regionLabels { transition: none !important; transform: none !important; animation: none !important; }
  .mapAura, .mapBloom, .landMasses, .countryBorders, .coastline, .mapRevealRect, .networkRoutes path, .coreHalo, .regionNode, .arrivalRipple, .regionBreath, .regionLabel, .networkStage:before { animation-duration: .001ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; }
}


/* ================= MENU OVERLAY ================= */
.menu-overlay {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 10000;
  height: 80vh;
  display: flex;
  flex-direction: column;
  background: #061f4e;
  border-radius: 0 0 24px 24px;
  transform: translateY(-100%);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}
.menu-overlay.active { transform: translateY(0); }

.menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}
.menu-backdrop.active {
  opacity: 1;
  visibility: visible;
}

.menu-overlay-header {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 32px 60px;
}
.menu-overlay-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.menu-overlay-logo img {
  height: 32px;
  width: auto;
}
.menu-close {
  width: 48px;
  height: 48px;
  border: none;
  background: transparent;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 2;
}
.menu-close:hover {
  color: var(--brand-blue);
  transform: rotate(90deg);
}

.menu-overlay-content {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 60px;
}
.menu-overlay-nav {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(24px, 4vw, 80px);
  width: 100%;
  max-width: 1400px;
}
.menu-overlay-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
}
.menu-overlay-link {
  font-size: clamp(18px, 2.2vw, 28px);
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  letter-spacing: 0.5px;
  line-height: 1.2;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s ease;
}
.menu-overlay.active .menu-overlay-link {
  opacity: 1;
  transform: translateY(0);
}
.menu-overlay.active .menu-overlay-col:nth-child(1) .menu-overlay-link { transition-delay: 0.1s; }
.menu-overlay.active .menu-overlay-col:nth-child(2) .menu-overlay-link { transition-delay: 0.15s; }
.menu-overlay.active .menu-overlay-col:nth-child(3) .menu-overlay-link { transition-delay: 0.2s; }
.menu-overlay.active .menu-overlay-col:nth-child(4) .menu-overlay-link { transition-delay: 0.25s; }
.menu-overlay.active .menu-overlay-col:nth-child(5) .menu-overlay-link { transition-delay: 0.3s; }
.menu-overlay-link:hover { color: var(--brand-blue); }

.menu-overlay-sublink {
  font-size: clamp(14px, 1.4vw, 18px);
  font-weight: 400;
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  letter-spacing: 0.5px;
  line-height: 1.6;
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s ease;
}
.menu-overlay.active .menu-overlay-sublink {
  opacity: 1;
  transform: translateY(0);
}
.menu-overlay.active .menu-overlay-col:nth-child(3) .menu-overlay-sublink:nth-child(2) { transition-delay: 0.25s; }
.menu-overlay.active .menu-overlay-col:nth-child(3) .menu-overlay-sublink:nth-child(3) { transition-delay: 0.3s; }
.menu-overlay.active .menu-overlay-col:nth-child(3) .menu-overlay-sublink:nth-child(4) { transition-delay: 0.35s; }
.menu-overlay.active .menu-overlay-col:nth-child(3) .menu-overlay-sublink:nth-child(5) { transition-delay: 0.4s; }
.menu-overlay.active .menu-overlay-col:nth-child(3) .menu-overlay-sublink:nth-child(6) { transition-delay: 0.45s; }
.menu-overlay.active .menu-overlay-col:nth-child(3) .menu-overlay-sublink:nth-child(7) { transition-delay: 0.5s; }
.menu-overlay.active .menu-overlay-col:nth-child(3) .menu-overlay-sublink:nth-child(8) { transition-delay: 0.55s; }
.menu-overlay-sublink:hover { color: var(--brand-blue); }

.menu-overlay-footer {
  position: relative;
  z-index: 2;
  padding: 32px 60px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  font-size: 13px;
  color: rgba(255,255,255,0.4);
  letter-spacing: 0.5px;
}
.menu-overlay-socials {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}
.menu-overlay-socials-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--brand-blue);
  margin-bottom: 4px;
}
.menu-overlay-socials a {
  color: rgba(255,255,255,0.7);
  text-decoration: none;
  transition: color 0.3s ease;
  font-size: 14px;
  letter-spacing: 0.3px;
}
.menu-overlay-socials a:hover { color: var(--brand-blue); }

@media (max-width: 768px) {
  .menu-overlay { height: 90vh; }
  .menu-overlay-header { padding: 24px; }
  .menu-overlay-content { padding: 0 24px; }
  .menu-overlay-footer { padding: 24px; flex-direction: column; gap: 16px; align-items: flex-start; }
  .menu-overlay-nav { flex-wrap: wrap; gap: 24px; justify-content: flex-start; }
  .menu-overlay-col { align-items: flex-start; text-align: left; }
  .menu-overlay-link { font-size: 20px; }
  .menu-overlay-sublink { font-size: 14px; }
  .menu-close { width: 40px; height: 40px; }
}