/* ============================================================
   BREEDO WAY — To Peace on Earth
   Design System & Global Stylesheet
   Palette derived from the brand crest: deep navy + burnished gold
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700;800&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&family=Inter:wght@300;400;500;600;700&display=swap');

/* ---------- 1. TOKENS ---------- */
:root{
  /* Navy scale */
  --navy-950:#03081A;
  --navy-900:#060F26;
  --navy-850:#081330;
  --navy-800:#0A1734;
  --navy-700:#0E2049;
  --navy-600:#143063;
  --navy-500:#1C4083;

  /* Gold scale */
  --gold-050:#FBF4DD;
  --gold-100:#F7E7B4;
  --gold-200:#EFD68F;
  --gold-300:#E3C26A;
  --gold-400:#D4AF37;
  --gold-500:#C9A227;
  --gold-600:#A8801A;
  --gold-700:#7A5C12;

  /* Neutrals */
  --cream:#F6F1E6;
  --cream-dim:#DED7C6;
  --mist:rgba(246,241,230,.66);
  --mist-soft:rgba(246,241,230,.42);
  --line:rgba(212,175,55,.22);
  --line-soft:rgba(246,241,230,.10);
  --glass:rgba(255,255,255,.045);
  --glass-2:rgba(255,255,255,.028);

  /* Gradients */
  --grad-gold:linear-gradient(100deg,#7A5C12 0%,#C9A227 18%,#F7E7B4 42%,#D4AF37 62%,#8A6A18 100%);
  --grad-gold-soft:linear-gradient(120deg,#E3C26A,#F7E7B4 45%,#C9A227);
  --grad-navy:linear-gradient(180deg,var(--navy-950),var(--navy-800));
  --grad-sky:radial-gradient(120% 90% at 50% 0%,#1C4083 0%,#0A1734 45%,#03081A 100%);

  /* Type */
  --f-crest:'Cinzel',Georgia,serif;
  --f-display:'Cormorant Garamond',Georgia,serif;
  --f-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;

  /* Metrics */
  --maxw:1320px;
  --gut:clamp(20px,4.4vw,64px);
  --r-sm:8px; --r-md:14px; --r-lg:22px; --r-xl:32px;
  --nav-h:84px;

  /* Motion */
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,.05,.36,1);
  --dur:.7s;

  /* Shadows */
  --sh-1:0 2px 8px rgba(0,0,0,.28);
  --sh-2:0 18px 48px -18px rgba(0,0,0,.72);
  --sh-3:0 40px 90px -32px rgba(0,0,0,.85);
  --sh-gold:0 0 0 1px rgba(212,175,55,.28), 0 22px 60px -26px rgba(212,175,55,.45);
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:auto;
}
body{
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.7;
  color:var(--mist);
  background:var(--navy-950);
  /* `clip` (not `hidden`) so position:sticky keeps working — `hidden` would
     turn the body into a scroll container and break every sticky card stack. */
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
@supports not (overflow-x:clip){body{overflow-x:hidden}}
body.is-locked{overflow:hidden}
img,svg,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit;background:none;border:none;outline:none}
button{cursor:pointer}
ul,ol{list-style:none}
::selection{background:var(--gold-500);color:var(--navy-950)}

/* Scrollbar */
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:var(--navy-950)}
::-webkit-scrollbar-thumb{background:linear-gradient(var(--gold-700),var(--gold-500));border-radius:20px;border:3px solid var(--navy-950)}
::-webkit-scrollbar-thumb:hover{background:var(--gold-400)}

/* ---------- 3. TYPOGRAPHY ---------- */
h1,h2,h3,h4,h5{color:var(--cream);font-weight:400;line-height:1.06;letter-spacing:-.015em}
.crest{font-family:var(--f-crest);letter-spacing:.06em;text-transform:uppercase}
.display{font-family:var(--f-display);font-weight:300;line-height:1.02;letter-spacing:-.02em}

.h-xxl{font-family:var(--f-display);font-weight:300;font-size:clamp(3rem,8.6vw,7.4rem);line-height:.98;letter-spacing:-.03em}
.h-xl {font-family:var(--f-display);font-weight:300;font-size:clamp(2.4rem,5.6vw,4.8rem);line-height:1.02;letter-spacing:-.025em}
.h-lg {font-family:var(--f-display);font-weight:300;font-size:clamp(1.9rem,3.6vw,3.1rem);line-height:1.08}
.h-md {font-family:var(--f-crest);font-weight:600;font-size:clamp(1.05rem,1.6vw,1.4rem);letter-spacing:.04em;text-transform:uppercase}
.h-sm {font-family:var(--f-crest);font-weight:600;font-size:.82rem;letter-spacing:.18em;text-transform:uppercase}

.lead{font-size:clamp(1.02rem,1.35vw,1.25rem);line-height:1.75;color:var(--mist);font-weight:300}
.muted{color:var(--mist-soft)}
.small{font-size:.86rem;line-height:1.6}

em,.italic{font-family:var(--f-display);font-style:italic;font-weight:300}

.gold{
  background:var(--grad-gold);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
/* When a gold heading is split for the word reveal, the words become transformed
   inline-blocks and the parent's clipped background no longer paints through
   them — so each word carries its own gradient. */
.gold .word > span{
  background:var(--grad-gold-soft);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.gold-solid{color:var(--gold-300)}

/* Eyebrow with rule */
.eyebrow{
  display:inline-flex;align-items:center;gap:14px;
  font-family:var(--f-crest);font-size:.7rem;font-weight:600;
  letter-spacing:.34em;text-transform:uppercase;color:var(--gold-300);
  margin-bottom:26px;
}
.eyebrow::before{
  content:'';width:44px;height:1px;background:linear-gradient(90deg,transparent,var(--gold-500));
}
.eyebrow.center::after{
  content:'';width:44px;height:1px;background:linear-gradient(90deg,var(--gold-500),transparent);
}

/* ---------- 4. LAYOUT ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.wrap-wide{width:100%;max-width:1620px;margin-inline:auto;padding-inline:var(--gut)}
section{position:relative}
.sec{padding-block:clamp(84px,11vw,168px)}
.sec-sm{padding-block:clamp(56px,7vw,104px)}
.center{text-align:center}
.grid{display:grid;gap:clamp(24px,3.4vw,56px)}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
.stack-gap{display:flex;flex-direction:column;gap:22px}

.rule{height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent);border:0}
.rule-gold{height:1px;background:var(--grad-gold);opacity:.5;border:0}

/* ---------- 5. GRAIN + AMBIENT ---------- */
.grain{
  position:fixed;inset:-120%;z-index:9998;pointer-events:none;
  opacity:.038;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainShift 8s steps(10) infinite;
}
@keyframes grainShift{
  0%,100%{transform:translate(0,0)}10%{transform:translate(-5%,-10%)}20%{transform:translate(-15%,5%)}
  30%{transform:translate(7%,-25%)}40%{transform:translate(-5%,25%)}50%{transform:translate(-15%,10%)}
  60%{transform:translate(15%,0)}70%{transform:translate(0,15%)}80%{transform:translate(3%,35%)}90%{transform:translate(-10%,10%)}
}
.vignette{
  position:fixed;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(120% 100% at 50% 40%,transparent 40%,rgba(3,8,26,.55) 100%);
}
.aura{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none;z-index:0}
.aura-gold{background:radial-gradient(circle,rgba(212,175,55,.20),transparent 68%)}
.aura-blue{background:radial-gradient(circle,rgba(28,64,131,.42),transparent 70%)}

/* ---------- 6. CUSTOM CURSOR ---------- */
.cursor,.cursor-dot{position:fixed;top:0;left:0;z-index:10000;pointer-events:none;border-radius:50%;will-change:transform}
/* Both start hidden and are revealed on the first real pointer move, so they
   never flash in the top-left corner on load. */
.cursor,.cursor-dot{opacity:0}
.cursor.live,.cursor-dot.live{opacity:1}
.cursor{
  width:42px;height:42px;margin:-21px 0 0 -21px;
  border:1px solid rgba(212,175,55,.6);
  transition:width .35s var(--ease),height .35s var(--ease),margin .35s var(--ease),background .35s var(--ease),border-color .35s var(--ease),opacity .3s;
  mix-blend-mode:difference;
}
.cursor-dot{width:5px;height:5px;margin:-2.5px 0 0 -2.5px;background:var(--gold-300)}
.cursor.grow{width:82px;height:82px;margin:-41px 0 0 -41px;background:rgba(212,175,55,.14);border-color:transparent}
.cursor.hide,.cursor-dot.hide{opacity:0}
@media (hover:none),(max-width:900px){.cursor,.cursor-dot{display:none!important}}

/* ---------- 7. PRELOADER ---------- */
#loader{
  position:fixed;inset:0;z-index:10001;display:grid;place-items:center;
  background:var(--navy-950);
}
#loader .ld-inner{display:flex;flex-direction:column;align-items:center;gap:30px;width:min(420px,80vw)}
#loader .ld-mark{width:112px;opacity:0;transform:scale(.86);filter:drop-shadow(0 12px 40px rgba(212,175,55,.35))}
#loader .ld-word{
  font-family:var(--f-crest);font-size:clamp(1.1rem,2.4vw,1.65rem);font-weight:700;
  letter-spacing:.42em;text-indent:.42em;color:var(--gold-200);display:flex;overflow:hidden;
}
#loader .ld-word span{display:inline-block;transform:translateY(110%)}
#loader .ld-sub{font-size:.66rem;letter-spacing:.4em;text-transform:uppercase;color:var(--mist-soft);opacity:0}
#loader .ld-bar{position:relative;width:100%;height:1px;background:rgba(246,241,230,.12);overflow:hidden}
#loader .ld-fill{position:absolute;inset:0;transform-origin:left;transform:scaleX(0);background:var(--grad-gold)}
#loader .ld-pct{font-family:var(--f-crest);font-size:.72rem;letter-spacing:.28em;color:var(--gold-300)}
.ld-curtain{position:fixed;inset:0;z-index:10000;background:var(--navy-900);transform:translateY(100%);pointer-events:none}

/* ---------- 8. PAGE TRANSITION — sliding crest panel ---------- */
#pt{position:fixed;inset:0;z-index:9999;pointer-events:none;overflow:hidden}
.pt-panel{
  position:absolute;inset:0;
  background:linear-gradient(180deg,var(--navy-900),var(--navy-950));
  display:grid;place-items:center;
  transform:translateY(100%);will-change:transform;
}
/* Covers the viewport straight away so an arriving page slides in rather than
   flashing its content. Gated on .has-js so a scriptless visit is never blocked. */
.has-js .pt-panel{transform:translateY(0)}
.pt-mark{display:flex;flex-direction:column;align-items:center;gap:20px}
.pt-mark img{width:96px;filter:drop-shadow(0 12px 36px rgba(212,175,55,.42))}
.pt-word{
  font-family:var(--f-crest);font-size:clamp(.95rem,2vw,1.4rem);font-weight:700;
  letter-spacing:.42em;text-indent:.42em;color:var(--gold-200);
}
.pt-sub{font-size:.62rem;letter-spacing:.38em;text-transform:uppercase;color:var(--mist-soft)}
/* Repeat visits in the same session skip the full preloader */
.repeat-visit #loader{display:none!important}

/* ---------- 9. NAVIGATION ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:900;
  height:var(--nav-h);display:flex;align-items:center;
  transition:height .45s var(--ease),background .45s var(--ease),backdrop-filter .45s,border-color .45s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  height:70px;background:rgba(6,15,38,.82);backdrop-filter:blur(22px) saturate(140%);
  -webkit-backdrop-filter:blur(22px) saturate(140%);border-bottom-color:var(--line);
}
.nav.hidden{transform:translateY(-100%)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:24px;width:100%}
.brand{display:flex;align-items:center;gap:14px;flex-shrink:0}
.brand img{width:46px;transition:transform .6s var(--ease),filter .6s}
.brand:hover img{transform:rotate(-6deg) scale(1.08);filter:drop-shadow(0 6px 22px rgba(212,175,55,.5))}
.brand-tx{display:flex;flex-direction:column;line-height:1}
.brand-tx b{font-family:var(--f-crest);font-size:1.02rem;font-weight:700;letter-spacing:.14em;color:var(--cream)}
.brand-tx small{font-size:.53rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-400);margin-top:5px}

.nav-links{display:flex;align-items:center;gap:6px}
.nav-links a{
  position:relative;padding:10px 18px;font-size:.76rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--mist);transition:color .35s;
}
.nav-links a::after{
  content:'';position:absolute;left:18px;right:18px;bottom:4px;height:1px;
  background:var(--grad-gold);transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease);
}
.nav-links a:hover{color:var(--gold-200)}
.nav-links a:hover::after{transform:scaleX(1);transform-origin:left}
.nav-links a.active{color:var(--gold-300)}
.nav-links a.active::after{transform:scaleX(1)}

.nav-act{display:flex;align-items:center;gap:12px}
.cart-btn{
  position:relative;display:flex;align-items:center;gap:9px;padding:11px 20px;
  border:1px solid var(--line);border-radius:100px;font-size:.7rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--cream);transition:border-color .4s,background .4s,color .4s;
}
.cart-btn:hover{border-color:var(--gold-400);background:rgba(212,175,55,.1);color:var(--gold-100)}
.cart-btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.5}
.cart-count{
  min-width:19px;height:19px;padding:0 5px;display:grid;place-items:center;border-radius:20px;
  background:var(--grad-gold);color:var(--navy-950);font-size:.62rem;font-weight:700;letter-spacing:0;
  transform:scale(0);transition:transform .4s var(--ease);
}
.cart-count.on{transform:scale(1)}

.burger{width:44px;height:44px;display:none;place-items:center;border:1px solid var(--line);border-radius:50%}
.burger span{display:block;width:17px;height:1px;background:var(--cream);transition:transform .45s var(--ease),opacity .3s}
.burger span+span{margin-top:5px}
.burger.on span:nth-child(1){transform:translateY(3px) rotate(45deg)}
.burger.on span:nth-child(2){opacity:0}
.burger.on span:nth-child(3){transform:translateY(-3px) rotate(-45deg)}

/* Mobile drawer */
.mnav{
  position:fixed;inset:0;z-index:880;background:var(--navy-950);
  display:flex;flex-direction:column;justify-content:center;gap:6px;padding:0 var(--gut);
  clip-path:circle(0% at 100% 0);transition:clip-path .85s var(--ease);
}
.mnav.on{clip-path:circle(150% at 100% 0)}
.mnav a{
  font-family:var(--f-display);font-size:clamp(2.4rem,11vw,4rem);font-weight:300;color:var(--cream);
  padding:10px 0;border-bottom:1px solid var(--line-soft);opacity:0;transform:translateY(28px);
  display:flex;align-items:baseline;gap:16px;
}
.mnav a i{font-family:var(--f-crest);font-size:.6rem;font-style:normal;letter-spacing:.2em;color:var(--gold-500)}
.mnav.on a{opacity:1;transform:none;transition:opacity .6s var(--ease) var(--d),transform .7s var(--ease) var(--d)}

/* ---------- 10. BUTTONS ---------- */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;
  padding:17px 36px;border-radius:100px;font-family:var(--f-body);font-size:.74rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;overflow:hidden;isolation:isolate;
  transition:color .45s var(--ease),border-color .45s,transform .45s var(--ease);
  white-space:nowrap;
}
.btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.6;transition:transform .5s var(--ease)}
.btn:hover svg{transform:translateX(5px)}
.btn::before{
  content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;
  transform:scaleX(0);transform-origin:right;transition:transform .6s var(--ease);
}
.btn:hover::before{transform:scaleX(1);transform-origin:left}

.btn-gold{background:var(--grad-gold);color:var(--navy-950);box-shadow:var(--sh-gold)}
.btn-gold::before{background:var(--cream)}
.btn-gold:hover{color:var(--navy-950)}

.btn-ghost{border:1px solid var(--line);color:var(--cream)}
.btn-ghost::before{background:var(--grad-gold)}
.btn-ghost:hover{color:var(--navy-950);border-color:transparent}

.btn-solid{background:var(--cream);color:var(--navy-950)}
.btn-solid::before{background:var(--grad-gold)}

.btn-sm{padding:12px 24px;font-size:.66rem}
.btn-block{width:100%}

/* Text link with drawn underline */
.tlink{
  position:relative;display:inline-flex;align-items:center;gap:10px;
  font-size:.74rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-200);
}
.tlink::after{content:'';position:absolute;left:0;bottom:-6px;width:100%;height:1px;background:var(--gold-500);transform:scaleX(.25);transform-origin:left;transition:transform .55s var(--ease)}
.tlink:hover::after{transform:scaleX(1)}
.tlink svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.6;transition:transform .5s var(--ease)}
.tlink:hover svg{transform:translateX(5px)}

/* ---------- 11. REVEAL PRIMITIVES ---------- */
.r-up{opacity:0;transform:translateY(38px)}
.r-fade{opacity:0}
.r-scale{opacity:0;transform:scale(.94)}
.r-clip{clip-path:inset(0 0 100% 0)}
.line-mask{display:block;overflow:hidden}
.line-mask>span{display:block;transform:translateY(105%)}
.char{display:inline-block;will-change:transform,opacity}
.word{display:inline-block;overflow:hidden;vertical-align:top}
.word>span{display:inline-block;transform:translateY(102%)}

/* Image reveal frame */
.imgfx{position:relative;overflow:hidden;border-radius:var(--r-lg);background:var(--navy-800)}
.imgfx img{width:100%;height:100%;object-fit:cover;transform:scale(1.16);will-change:transform}
.imgfx::after{
  content:'';position:absolute;inset:0;background:var(--navy-900);transform-origin:bottom;z-index:2;
  transform:scaleY(1);transition:transform 1.25s var(--ease-io);
}
.imgfx.revealed::after{transform:scaleY(0)}
.imgfx .shine{
  position:absolute;top:0;left:-60%;width:45%;height:100%;z-index:3;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(247,231,180,.16),transparent);
  transform:skewX(-16deg);
}

/* Gold frame accent */
.framed{position:relative}
.framed::before{
  content:'';position:absolute;inset:14px;border:1px solid rgba(212,175,55,.28);
  border-radius:calc(var(--r-lg) - 6px);pointer-events:none;z-index:4;
}

/* ---------- 12. HERO ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;background:var(--navy-950)}
.hero-bg{position:absolute;inset:-8% 0;z-index:0;will-change:transform}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 40%}
.hero-scrim{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(180deg,rgba(3,8,26,.86) 0%,rgba(4,10,28,.55) 38%,rgba(3,8,26,.92) 100%),
    linear-gradient(90deg,rgba(3,8,26,.9) 0%,rgba(3,8,26,.28) 55%,rgba(3,8,26,.72) 100%);
}
.hero-rays{
  position:absolute;inset:0;z-index:1;opacity:.5;mix-blend-mode:screen;
  background:radial-gradient(60% 44% at 62% 30%,rgba(247,231,180,.32),transparent 70%);
}
/* Desaturated + hard-masked so only the bird survives the screen blend —
   without this the photo's background reads as a rectangle over the hero. */
.hero-dove{
  position:absolute;z-index:2;right:5%;top:11%;width:min(460px,40vw);opacity:.92;
  filter:grayscale(1) contrast(1.6) brightness(1.05);
  -webkit-mask-image:radial-gradient(58% 58% at 50% 46%,#000 40%,transparent 76%);
  mask-image:radial-gradient(58% 58% at 50% 46%,#000 40%,transparent 76%);
  mix-blend-mode:screen;pointer-events:none;
}
.hero-in{position:relative;z-index:3;width:100%;padding-block:calc(var(--nav-h) + 40px) 90px}
.hero-crest{width:96px;margin-bottom:32px;filter:drop-shadow(0 14px 44px rgba(212,175,55,.42))}
.hero h1{max-width:16ch}
.hero h1 .ln2{padding-left:clamp(0px,7vw,150px)}
.hero-sub{max-width:52ch;margin-top:34px}
.hero-cta{display:flex;flex-wrap:wrap;gap:16px;margin-top:44px}

.hero-meta{
  position:absolute;left:var(--gut);right:var(--gut);bottom:34px;z-index:4;
  display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
}
.scroll-cue{display:flex;align-items:center;gap:14px;font-size:.6rem;letter-spacing:.32em;text-transform:uppercase;color:var(--mist-soft)}
.scroll-cue .track{position:relative;width:58px;height:1px;background:rgba(246,241,230,.18);overflow:hidden}
.scroll-cue .track::after{content:'';position:absolute;inset:0;background:var(--gold-400);animation:cueSlide 2.2s var(--ease) infinite}
@keyframes cueSlide{0%{transform:translateX(-100%)}55%,100%{transform:translateX(100%)}}
.hero-stats{display:flex;gap:clamp(20px,3vw,48px)}
.hero-stats div{text-align:right}
.hero-stats b{display:block;font-family:var(--f-display);font-size:clamp(1.5rem,2.6vw,2.3rem);color:var(--gold-200);line-height:1}
.hero-stats span{font-size:.58rem;letter-spacing:.24em;text-transform:uppercase;color:var(--mist-soft)}

/* Page hero (inner pages) */
.phero{position:relative;min-height:clamp(520px,72vh,760px);display:flex;align-items:flex-end;overflow:hidden}
.phero-bg{position:absolute;inset:-10% 0;z-index:0}
.phero-bg img{width:100%;height:100%;object-fit:cover}
.phero-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(3,8,26,.9),rgba(3,8,26,.45) 45%,rgba(3,8,26,.96))}
.phero-in{position:relative;z-index:2;width:100%;padding-block:0 clamp(52px,7vw,92px)}
.crumbs{display:flex;align-items:center;gap:10px;font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--mist-soft);margin-bottom:26px}
.crumbs a:hover{color:var(--gold-300)}
.crumbs i{font-style:normal;color:var(--gold-600)}

/* ---------- 13. MARQUEE ---------- */
.marquee{
  position:relative;overflow:hidden;padding-block:26px;
  border-block:1px solid var(--line);background:rgba(10,23,52,.55);
}
.mq-track{display:flex;width:max-content;will-change:transform}
.mq-track>div{display:flex;align-items:center;gap:clamp(28px,4vw,64px);padding-right:clamp(28px,4vw,64px)}
.mq-item{
  display:flex;align-items:center;gap:16px;
  font-family:var(--f-crest);font-size:clamp(.86rem,1.4vw,1.16rem);font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:rgba(246,241,230,.55);white-space:nowrap;
}
.mq-item .dot{width:5px;height:5px;border-radius:50%;background:var(--gold-500);flex:none}
.marquee::before,.marquee::after{
  content:'';position:absolute;top:0;bottom:0;width:16%;z-index:2;pointer-events:none;
}
.marquee::before{left:0;background:linear-gradient(90deg,var(--navy-950),transparent)}
.marquee::after{right:0;background:linear-gradient(270deg,var(--navy-950),transparent)}

/* Big scrolling display marquee */
.mq-huge .mq-item{
  font-family:var(--f-display);font-size:clamp(3rem,9vw,8rem);font-weight:300;
  letter-spacing:-.02em;text-transform:none;color:transparent;
  -webkit-text-stroke:1px rgba(212,175,55,.34);
}
.mq-huge .mq-item.fill{-webkit-text-stroke:0;background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* ---------- 14. SECTION HEAD ---------- */
.shead{max-width:760px}
.shead.center{margin-inline:auto}
.shead p{margin-top:24px}
.shead-split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,80px);align-items:end}

/* ---------- 15. STATS ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.stat{padding:clamp(28px,3.4vw,44px);background:var(--navy-900);position:relative;overflow:hidden;transition:background .5s}
.stat:hover{background:var(--navy-800)}
.stat::after{content:'';position:absolute;left:0;top:0;width:100%;height:2px;background:var(--grad-gold);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease)}
.stat:hover::after{transform:scaleX(1)}
.stat b{display:block;font-family:var(--f-display);font-size:clamp(2.6rem,4.6vw,4rem);font-weight:300;line-height:1;color:var(--cream)}
.stat b .suf{font-size:.5em;color:var(--gold-400);vertical-align:super;margin-left:2px}
/* Direct child only — a plain descendant selector would also catch the
   counter <span> inside <b> and shrink the number to label size. */
.stat > span{display:block;margin-top:14px;font-size:.64rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-300)}
.stat small{display:block;margin-top:10px;font-size:.82rem;color:var(--mist-soft);line-height:1.55}

/* ---------- 16. STICKY CARD STACK ---------- */
.stackwrap{position:relative}
.stack-head{position:relative;z-index:3}
.stack-cards{position:relative;margin-top:clamp(40px,6vw,80px)}
.scard{
  position:sticky;top:calc(var(--nav-h) + 26px);
  border-radius:var(--r-xl);overflow:hidden;
  border:1px solid var(--line);
  background:linear-gradient(150deg,var(--navy-800),var(--navy-950) 62%);
  box-shadow:var(--sh-3);
  margin-bottom:clamp(26px,3vw,44px);
  will-change:transform;
}
/* Each card parks a little lower than the one before, so the stack fans out */
.stack-cards .scard:nth-child(1){top:calc(var(--nav-h) + 22px)}
.stack-cards .scard:nth-child(2){top:calc(var(--nav-h) + 42px)}
.stack-cards .scard:nth-child(3){top:calc(var(--nav-h) + 62px)}
.stack-cards .scard:nth-child(4){top:calc(var(--nav-h) + 82px)}
.stack-cards .scard:nth-child(5){top:calc(var(--nav-h) + 102px)}
/* Breathing room after the last card so it can rest before the next section */
.stack-cards{padding-bottom:clamp(30px,6vw,90px)}
.scard-in{display:grid;grid-template-columns:1.02fr .98fr;min-height:clamp(430px,58vh,560px)}
.scard-tx{padding:clamp(34px,4.4vw,68px);display:flex;flex-direction:column;justify-content:center;gap:22px;position:relative;z-index:2}
.scard-num{
  font-family:var(--f-display);font-size:clamp(3.6rem,7vw,6.4rem);font-weight:300;line-height:.8;
  color:transparent;-webkit-text-stroke:1px rgba(212,175,55,.45);
}
.scard-tx h3{font-family:var(--f-display);font-size:clamp(1.8rem,3.2vw,2.8rem);font-weight:300}
.scard-tx p{max-width:46ch}
.scard-tags{display:flex;flex-wrap:wrap;gap:9px;margin-top:6px}
.tag{
  padding:7px 15px;border:1px solid var(--line);border-radius:100px;
  font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-200);
  background:rgba(212,175,55,.06);
}
.scard-img{position:relative;overflow:hidden}
.scard-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.scard:hover .scard-img img{transform:scale(1.06)}
.scard-img::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,var(--navy-900),transparent 42%),linear-gradient(0deg,rgba(3,8,26,.5),transparent 55%)}
.scard-glow{position:absolute;right:-14%;top:-24%;width:52%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(212,175,55,.16),transparent 65%);filter:blur(46px);z-index:1}

/* ---------- 17. HORIZONTAL PIN ---------- */
.hpin{overflow:hidden}
.hpin-track{display:flex;align-items:center;gap:clamp(20px,2.6vw,40px);width:max-content;padding-inline:var(--gut);will-change:transform}
.hcard{
  position:relative;width:clamp(280px,32vw,440px);flex:none;
  border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);
  background:var(--navy-850);
}
.hcard .ph{position:relative;aspect-ratio:4/5;overflow:hidden}
.hcard .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease),filter .8s}
.hcard:hover .ph img{transform:scale(1.07);filter:saturate(1.15)}
.hcard .ph::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(3,8,26,.92) 8%,rgba(3,8,26,.15) 55%,transparent)}
.hcard .bd{position:absolute;left:0;right:0;bottom:0;padding:clamp(22px,2.4vw,34px);z-index:2}
.hcard .yr{font-family:var(--f-crest);font-size:.66rem;letter-spacing:.28em;color:var(--gold-300);display:block;margin-bottom:12px}
.hcard h4{font-family:var(--f-display);font-size:clamp(1.35rem,2.1vw,1.85rem);font-weight:300;margin-bottom:10px}
.hcard p{font-size:.86rem;color:var(--mist-soft);line-height:1.6}
.hpin-intro{width:clamp(280px,30vw,420px);flex:none;padding-right:20px}

/* ---------- 18. SPLIT / STICKY MEDIA ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,5.4vw,88px);align-items:center}
.split.rev .split-media{order:2}
.split-media{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/5}
.split-media img{width:100%;height:100%;object-fit:cover}
.split-badge{
  position:absolute;right:-10px;bottom:34px;z-index:3;
  padding:20px 28px;border-radius:var(--r-md);
  background:rgba(6,15,38,.86);backdrop-filter:blur(16px);border:1px solid var(--line);
  box-shadow:var(--sh-2);
}
.split-badge b{display:block;font-family:var(--f-display);font-size:2rem;color:var(--gold-200);line-height:1}
/* Direct child only, so the counter <span> inside <b> keeps the big type */
.split-badge > span{font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--mist-soft)}

.stickymedia{position:sticky;top:calc(var(--nav-h) + 40px);height:fit-content}

/* ---------- 19. 3D BOOK ---------- */
.bookstage{
  position:relative;display:grid;place-items:center;
  perspective:2200px;padding:clamp(20px,4vw,60px);
}
.book3d{
  position:relative;width:clamp(230px,26vw,330px);aspect-ratio:2/2.95;
  transform-style:preserve-3d;transform:rotateY(-26deg) rotateX(6deg);
  transition:transform 1s var(--ease);will-change:transform;
}
.bookstage:hover .book3d{transform:rotateY(-14deg) rotateX(3deg)}
.book3d .face{position:absolute;inset:0;border-radius:4px 8px 8px 4px;backface-visibility:hidden;overflow:hidden}
.book3d .front{
  background:linear-gradient(150deg,#0B1B40,#050D24 55%,#0A1734);
  box-shadow:inset 0 0 0 1px rgba(212,175,55,.32),inset 6px 0 14px -6px rgba(0,0,0,.9);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  padding:clamp(16px,2vw,26px);transform:translateZ(19px);text-align:center;
}
.book3d .front::before{
  content:'';position:absolute;inset:9px;border:1px solid rgba(212,175,55,.3);border-radius:3px;pointer-events:none;
}
.book3d .front::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 30%,rgba(247,231,180,.13) 46%,transparent 60%);
}
/* height/object-fit are stated explicitly: the book sits inside .split-media,
   whose `img{height:100%;object-fit:cover}` would otherwise crop the crest. */
.book3d .front img{width:72%;height:auto;object-fit:contain;filter:drop-shadow(0 8px 22px rgba(0,0,0,.6))}
.book3d .front .bt{font-family:var(--f-crest);font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-200)}
.book3d .front .bs{font-family:var(--f-display);font-style:italic;font-size:.78rem;color:var(--mist-soft)}
/* Spine and fore-edge are hinged on their own edge (transform-origin), which
   keeps them attached to the covers at any book rotation. */
.book3d .spine{
  width:38px;left:0;right:auto;
  transform-origin:left center;
  transform:translateZ(-19px) rotateY(-90deg);
  background:linear-gradient(90deg,#040A1C,#0C1D46 45%,#050E28);
  box-shadow:inset 0 0 0 1px rgba(212,175,55,.24);
  display:grid;place-items:center;
}
.book3d .spine span{
  writing-mode:vertical-rl;transform:rotate(180deg);
  font-family:var(--f-crest);font-size:.56rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-300);
}
.book3d .pages{
  position:absolute;top:5px;bottom:5px;right:0;width:36px;
  transform-origin:right center;
  transform:translateZ(-18px) rotateY(90deg);
  background:repeating-linear-gradient(90deg,#F6F1E6,#F6F1E6 1px,#CFC7B2 2px,#F6F1E6 3px);
  border-radius:2px;
}
.book3d .back{
  transform:translateZ(-19px) rotateY(180deg);
  background:linear-gradient(150deg,#081334,#04091C);
  box-shadow:inset 0 0 0 1px rgba(212,175,55,.18);
}
.book-shadow{
  position:absolute;bottom:6%;left:50%;transform:translateX(-50%);
  width:62%;height:34px;border-radius:50%;filter:blur(26px);
  background:radial-gradient(ellipse,rgba(0,0,0,.85),transparent 70%);
}
.book-halo{
  position:absolute;width:min(560px,80%);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(212,175,55,.16),transparent 62%);filter:blur(50px);z-index:-1;
}

/* Format selector */
.formats{display:grid;gap:11px;margin-top:8px}
.fmt{
  display:flex;align-items:center;gap:16px;padding:16px 20px;
  border:1px solid var(--line-soft);border-radius:var(--r-md);cursor:pointer;
  transition:border-color .4s,background .4s,transform .4s var(--ease);
}
.fmt:hover{border-color:var(--line);background:var(--glass);transform:translateX(4px)}
.fmt.on{border-color:var(--gold-500);background:rgba(212,175,55,.09)}
.fmt .rad{width:16px;height:16px;border-radius:50%;border:1px solid var(--gold-600);flex:none;display:grid;place-items:center}
.fmt .rad::after{content:'';width:8px;height:8px;border-radius:50%;background:var(--grad-gold);transform:scale(0);transition:transform .35s var(--ease)}
.fmt.on .rad::after{transform:scale(1)}
.fmt .fi{flex:1}
.fmt .fi b{display:block;font-family:var(--f-crest);font-size:.78rem;letter-spacing:.1em;color:var(--cream);text-transform:uppercase}
.fmt .fi small{font-size:.76rem;color:var(--mist-soft)}
.fmt .fp{font-family:var(--f-display);font-size:1.4rem;color:var(--gold-200)}

/* Chapters accordion */
.acc{border-top:1px solid var(--line-soft)}
.acc-i{border-bottom:1px solid var(--line-soft)}
.acc-h{display:flex;align-items:center;gap:20px;padding:22px 4px;width:100%;text-align:left;transition:padding .4s var(--ease)}
.acc-h:hover{padding-left:12px}
.acc-h .n{font-family:var(--f-crest);font-size:.68rem;letter-spacing:.2em;color:var(--gold-500);flex:none;width:34px}
.acc-h .t{flex:1;font-family:var(--f-display);font-size:clamp(1.1rem,1.9vw,1.5rem);font-weight:300;color:var(--cream)}
.acc-h .ic{position:relative;width:16px;height:16px;flex:none}
.acc-h .ic::before,.acc-h .ic::after{content:'';position:absolute;background:var(--gold-400);transition:transform .5s var(--ease),opacity .3s}
.acc-h .ic::before{left:0;top:7.5px;width:16px;height:1px}
.acc-h .ic::after{left:7.5px;top:0;width:1px;height:16px}
.acc-i.on .acc-h .ic::after{transform:scaleY(0);opacity:0}
.acc-b{height:0;overflow:hidden;transition:height .6s var(--ease)}
.acc-b p{padding:0 0 24px 54px;max-width:64ch;color:var(--mist-soft)}

/* ---------- 20. PRODUCT GRID ---------- */
.filters{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.chip{
  padding:11px 22px;border:1px solid var(--line-soft);border-radius:100px;
  font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mist);
  transition:all .4s var(--ease);
}
.chip:hover{border-color:var(--gold-600);color:var(--gold-100)}
.chip.on{background:var(--grad-gold);color:var(--navy-950);border-color:transparent;font-weight:600}

.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,34px)}
.pcard{
  position:relative;border:1px solid var(--line-soft);border-radius:var(--r-lg);overflow:hidden;
  background:linear-gradient(160deg,var(--navy-850),var(--navy-950));
  transition:border-color .5s,transform .6s var(--ease),box-shadow .6s;
}
.pcard:hover{border-color:var(--line);transform:translateY(-8px);box-shadow:var(--sh-3)}
.pcard.hide{display:none}
.pc-media{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--navy-800)}
.pc-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .7s var(--ease),transform 1.1s var(--ease)}
.pc-media img.alt{opacity:0}
.pcard:hover .pc-media img.main{opacity:0;transform:scale(1.05)}
.pcard:hover .pc-media img.alt{opacity:1;transform:scale(1.05)}
.pc-media::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(3,8,26,.6),transparent 45%);pointer-events:none}
.pc-badge{
  position:absolute;top:16px;left:16px;z-index:3;padding:7px 14px;border-radius:100px;
  font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;
  background:var(--grad-gold);color:var(--navy-950);
}
.pc-badge.soft{background:rgba(6,15,38,.85);color:var(--gold-200);border:1px solid var(--line);font-weight:500}
.pc-quick{
  position:absolute;left:16px;right:16px;bottom:16px;z-index:3;
  display:flex;gap:9px;opacity:0;transform:translateY(14px);
  transition:opacity .5s var(--ease),transform .5s var(--ease);
}
.pcard:hover .pc-quick{opacity:1;transform:none}
.pc-quick button{
  flex:1;padding:13px;border-radius:100px;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;
  background:rgba(246,241,230,.95);color:var(--navy-950);transition:background .35s,color .35s;
}
.pc-quick button.ghost{flex:0 0 46px;background:rgba(6,15,38,.8);color:var(--gold-200);border:1px solid var(--line);display:grid;place-items:center;padding:0}
.pc-quick button.ghost svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.5}
.pc-quick button:hover{background:var(--gold-300);color:var(--navy-950)}
.pc-body{padding:22px 24px 26px}
.pc-cat{font-size:.58rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-500)}
.pc-body h4{font-family:var(--f-display);font-size:1.32rem;font-weight:400;margin:9px 0 12px;color:var(--cream)}
.pc-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line-soft)}
.pc-price{font-family:var(--f-display);font-size:1.3rem;color:var(--gold-200)}
.pc-price s{font-size:.72em;color:var(--mist-soft);margin-right:8px}
.pc-stars{display:flex;gap:2px;align-items:center;font-size:.72rem;color:var(--mist-soft)}
.pc-stars svg{width:12px;height:12px;fill:var(--gold-400)}

/* ---------- 21. CART DRAWER ---------- */
.cart-ov{position:fixed;inset:0;z-index:940;background:rgba(3,8,26,.72);backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity .5s}
.cart-ov.on{opacity:1;pointer-events:auto}
.cart{
  position:fixed;top:0;right:0;bottom:0;z-index:950;width:min(460px,100%);
  background:var(--navy-900);border-left:1px solid var(--line);
  display:flex;flex-direction:column;transform:translateX(102%);
  transition:transform .7s var(--ease);box-shadow:-30px 0 90px rgba(0,0,0,.6);
}
.cart.on{transform:none}
.cart-h{display:flex;align-items:center;justify-content:space-between;padding:26px 28px;border-bottom:1px solid var(--line)}
.cart-h h3{font-family:var(--f-crest);font-size:.86rem;letter-spacing:.24em;text-transform:uppercase}
.cart-x{width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--line-soft);border-radius:50%;transition:transform .5s var(--ease),border-color .4s}
.cart-x:hover{transform:rotate(90deg);border-color:var(--gold-500)}
.cart-x svg{width:15px;height:15px;stroke:var(--cream);stroke-width:1.6}
.cart-body{flex:1;overflow-y:auto;padding:22px 28px}
.cart-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:18px;text-align:center;color:var(--mist-soft)}
.cart-empty img{width:74px;opacity:.4}
.ci{display:flex;gap:16px;padding:18px 0;border-bottom:1px solid var(--line-soft)}
.ci-img{width:78px;height:96px;border-radius:var(--r-sm);overflow:hidden;flex:none;background:var(--navy-800)}
.ci-img img{width:100%;height:100%;object-fit:cover}
.ci-in{flex:1;min-width:0}
.ci-in h5{font-family:var(--f-display);font-size:1.06rem;font-weight:400;color:var(--cream);margin-bottom:4px}
.ci-in .v{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-500)}
.ci-row{display:flex;align-items:center;justify-content:space-between;margin-top:12px;gap:10px}
.qty{display:flex;align-items:center;border:1px solid var(--line-soft);border-radius:100px;overflow:hidden}
.qty button{width:30px;height:30px;color:var(--mist);transition:background .3s,color .3s}
.qty button:hover{background:rgba(212,175,55,.14);color:var(--gold-200)}
.qty span{min-width:26px;text-align:center;font-size:.82rem;color:var(--cream)}
.ci-price{font-family:var(--f-display);font-size:1.1rem;color:var(--gold-200)}
.ci-rm{font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mist-soft);transition:color .3s}
.ci-rm:hover{color:#E2725B}
.cart-f{padding:22px 28px 28px;border-top:1px solid var(--line);background:var(--navy-850)}
.cart-line{display:flex;justify-content:space-between;font-size:.82rem;margin-bottom:10px;color:var(--mist-soft)}
.cart-total{display:flex;justify-content:space-between;align-items:baseline;padding-top:14px;margin-bottom:18px;border-top:1px solid var(--line-soft)}
.cart-total span{font-family:var(--f-crest);font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--cream)}
.cart-total b{font-family:var(--f-display);font-size:1.9rem;font-weight:400;color:var(--gold-200)}
.cart-note{margin-top:14px;font-size:.68rem;text-align:center;color:var(--mist-soft);line-height:1.6}

/* ---------- 22. MODAL (quick view / checkout) ---------- */
.modal-ov{position:fixed;inset:0;z-index:960;display:grid;place-items:center;padding:var(--gut);
  background:rgba(3,8,26,.8);backdrop-filter:blur(10px);opacity:0;pointer-events:none;transition:opacity .5s}
.modal-ov.on{opacity:1;pointer-events:auto}
.modal{
  width:min(940px,100%);max-height:88vh;overflow-y:auto;border-radius:var(--r-xl);
  border:1px solid var(--line);background:var(--navy-900);box-shadow:var(--sh-3);
  transform:translateY(30px) scale(.97);opacity:0;transition:transform .7s var(--ease),opacity .5s;
}
.modal-ov.on .modal{transform:none;opacity:1}
.modal-grid{display:grid;grid-template-columns:1fr 1fr}
.modal-media{position:relative;background:var(--navy-800);min-height:420px}
.modal-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.modal-tx{padding:clamp(28px,3.6vw,48px);display:flex;flex-direction:column;gap:18px}
.modal-x{position:absolute;top:18px;right:18px;z-index:5;width:40px;height:40px;display:grid;place-items:center;
  border-radius:50%;background:rgba(3,8,26,.7);border:1px solid var(--line);transition:transform .5s var(--ease)}
.modal-x:hover{transform:rotate(90deg)}
.modal-x svg{width:15px;height:15px;stroke:var(--cream);stroke-width:1.6}
.swatches{display:flex;gap:9px;flex-wrap:wrap}
.sw{padding:10px 18px;border:1px solid var(--line-soft);border-radius:100px;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;transition:all .35s}
.sw.on{border-color:var(--gold-500);background:rgba(212,175,55,.12);color:var(--gold-100)}

/* ---------- 23. TESTIMONIALS ---------- */
.quotes{position:relative;min-height:clamp(320px,38vw,400px)}
.qt{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;text-align:center;opacity:0;pointer-events:none;transition:opacity .8s var(--ease)}
.qt.on{opacity:1;pointer-events:auto}
.qt blockquote{font-family:var(--f-display);font-weight:300;font-style:italic;font-size:clamp(1.4rem,3vw,2.5rem);line-height:1.34;color:var(--cream);max-width:22ch}
.qt .who{display:flex;align-items:center;gap:16px}
.qt .who img{width:52px;height:52px;border-radius:50%;object-fit:cover;border:1px solid var(--line)}
.qt .who div{text-align:left}
.qt .who b{display:block;font-family:var(--f-crest);font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--cream)}
.qt .who span{font-size:.72rem;color:var(--gold-400)}
.qmark{font-family:var(--f-display);font-size:clamp(6rem,14vw,11rem);line-height:.6;color:rgba(212,175,55,.14);user-select:none}
.qdots{display:flex;gap:9px;justify-content:center;margin-top:34px}
.qdot{width:32px;height:2px;background:rgba(246,241,230,.16);position:relative;overflow:hidden}
.qdot::after{content:'';position:absolute;inset:0;background:var(--grad-gold);transform:scaleX(0);transform-origin:left;transition:transform .4s}
.qdot.on::after{transform:scaleX(1);transition:transform 6.4s linear}

/* ---------- 24. TIMELINE ---------- */
.tl{position:relative;padding-left:clamp(30px,5vw,72px)}
.tl::before{content:'';position:absolute;left:6px;top:8px;bottom:8px;width:1px;background:var(--line-soft)}
.tl-fill{position:absolute;left:6px;top:8px;width:1px;background:var(--grad-gold);transform-origin:top;transform:scaleY(0);height:calc(100% - 16px)}
.tl-i{position:relative;padding-bottom:clamp(38px,5vw,64px)}
.tl-i::before{
  content:'';position:absolute;left:calc(-1 * clamp(30px,5vw,72px) + 1px);top:8px;width:11px;height:11px;border-radius:50%;
  background:var(--navy-950);border:1px solid var(--gold-600);transition:background .5s,box-shadow .5s;
}
.tl-i.on::before{background:var(--grad-gold);box-shadow:0 0 0 5px rgba(212,175,55,.14)}
.tl-i .yr{font-family:var(--f-crest);font-size:.7rem;letter-spacing:.26em;color:var(--gold-300);display:block;margin-bottom:12px}
.tl-i h4{font-family:var(--f-display);font-size:clamp(1.35rem,2.3vw,1.95rem);font-weight:300;margin-bottom:12px}
.tl-i p{max-width:58ch;color:var(--mist-soft)}

/* ---------- 25. TEAM / VALUE CARDS ---------- */
.vcard{
  position:relative;padding:clamp(26px,3vw,40px);border:1px solid var(--line-soft);border-radius:var(--r-lg);
  background:linear-gradient(160deg,var(--glass),transparent);overflow:hidden;
  transition:border-color .5s,transform .6s var(--ease);
}
.vcard:hover{border-color:var(--line);transform:translateY(-6px)}
.vcard .ic{width:46px;height:46px;margin-bottom:24px;display:grid;place-items:center;border-radius:12px;border:1px solid var(--line);background:rgba(212,175,55,.07)}
.vcard .ic svg{width:21px;height:21px;stroke:var(--gold-300);fill:none;stroke-width:1.4}
.vcard h4{font-family:var(--f-display);font-size:1.5rem;font-weight:400;margin-bottom:12px}
.vcard::after{content:'';position:absolute;inset:auto auto -40% -20%;width:60%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(212,175,55,.16),transparent 65%);filter:blur(38px);opacity:0;transition:opacity .6s}
.vcard:hover::after{opacity:1}

.tcard{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--navy-850)}
.tcard .ph{position:relative;aspect-ratio:3/4;overflow:hidden}
.tcard .ph img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05);transition:filter .8s var(--ease),transform 1.2s var(--ease)}
.tcard:hover .ph img{filter:none;transform:scale(1.05)}
.tcard .ph::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(3,8,26,.9),transparent 50%)}
.tcard .bd{position:absolute;left:0;right:0;bottom:0;padding:26px;z-index:2}
.tcard h4{font-family:var(--f-display);font-size:1.4rem;font-weight:400;margin-bottom:5px}
.tcard span{font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-400)}

/* ---------- 26. CTA BAND ---------- */
.cta{position:relative;overflow:hidden;background:var(--grad-sky)}
.cta-bg{position:absolute;inset:0;z-index:0;opacity:.26}
.cta-bg img{width:100%;height:100%;object-fit:cover}
.cta-in{position:relative;z-index:2}
.pledge{
  display:flex;gap:12px;max-width:520px;margin-top:34px;
  border:1px solid var(--line);border-radius:100px;padding:7px 7px 7px 26px;background:rgba(3,8,26,.5);
  transition:border-color .4s,box-shadow .4s;
}
.pledge:focus-within{border-color:var(--gold-500);box-shadow:0 0 0 4px rgba(212,175,55,.1)}
.pledge input{flex:1;font-size:.9rem;color:var(--cream);min-width:0}
.pledge input::placeholder{color:var(--mist-soft)}
.pledge button{flex:none}
.form-msg{margin-top:14px;font-size:.78rem;color:var(--gold-300);min-height:20px}

/* ---------- 27. FOOTER ---------- */
.foot{position:relative;background:var(--navy-950);border-top:1px solid var(--line);overflow:hidden}
.foot-big{
  font-family:var(--f-display);font-weight:300;font-size:clamp(2.6rem,10vw,9rem);line-height:.92;
  letter-spacing:-.03em;text-align:center;padding-block:clamp(50px,7vw,86px) 0;
}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.3fr;gap:clamp(28px,4vw,64px);padding-block:clamp(46px,6vw,80px)}
.foot h5{font-family:var(--f-crest);font-size:.68rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-300);margin-bottom:24px}
.foot ul{display:flex;flex-direction:column;gap:13px}
.foot ul a{font-size:.88rem;color:var(--mist-soft);transition:color .35s,padding-left .4s var(--ease)}
.foot ul a:hover{color:var(--gold-100);padding-left:7px}
.foot-brand img{width:64px;margin-bottom:22px}
.foot-brand p{max-width:34ch;font-size:.88rem}
.socials{display:flex;gap:10px;margin-top:26px}
.socials a{width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--line-soft);border-radius:50%;transition:all .45s var(--ease)}
.socials a:hover{border-color:var(--gold-500);background:rgba(212,175,55,.1);transform:translateY(-4px)}
.socials svg{width:15px;height:15px;stroke:var(--mist);fill:none;stroke-width:1.5}
.socials a:hover svg{stroke:var(--gold-200)}
.foot-bot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;
  padding-block:26px;border-top:1px solid var(--line-soft);font-size:.74rem;color:var(--mist-soft)}
.foot-bot ul{flex-direction:row;gap:22px}
.foot-bot a{font-size:.74rem}

/* ---------- 28. MISC ---------- */
.progress{position:fixed;top:0;left:0;height:2px;width:100%;z-index:920;transform-origin:left;transform:scaleX(0);background:var(--grad-gold)}
.toast{
  position:fixed;left:50%;bottom:34px;z-index:970;transform:translate(-50%,140%);
  display:flex;align-items:center;gap:13px;padding:15px 26px;border-radius:100px;
  background:var(--navy-800);border:1px solid var(--gold-600);box-shadow:var(--sh-2);
  font-size:.8rem;color:var(--cream);transition:transform .6s var(--ease);white-space:nowrap;
}
.toast.on{transform:translate(-50%,0)}
.toast svg{width:17px;height:17px;stroke:var(--gold-300);fill:none;stroke-width:1.8}

.badge-row{display:flex;flex-wrap:wrap;gap:26px;align-items:center}
.badge-row .b{display:flex;align-items:center;gap:11px;font-size:.72rem;letter-spacing:.1em;color:var(--mist-soft)}
.badge-row .b svg{width:17px;height:17px;stroke:var(--gold-400);fill:none;stroke-width:1.4}

.globe{position:relative;width:min(420px,80%);aspect-ratio:1;margin-inline:auto}
.globe .ring{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(212,175,55,.2)}
.globe .ring:nth-child(2){inset:9%;border-color:rgba(212,175,55,.14);animation:spin 26s linear infinite}
.globe .ring:nth-child(3){inset:19%;border-color:rgba(212,175,55,.1);animation:spin 34s linear infinite reverse}
.globe .core{position:absolute;inset:26%;border-radius:50%;background:radial-gradient(circle at 35% 30%,#1C4083,#060F26 70%);box-shadow:inset -14px -14px 40px rgba(0,0,0,.7),0 0 60px rgba(28,64,131,.5)}
@keyframes spin{to{transform:rotate(360deg)}}
.pindot{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--gold-300);box-shadow:0 0 0 0 rgba(212,175,55,.6);animation:pulse 2.6s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 14px rgba(212,175,55,0)}100%{box-shadow:0 0 0 0 rgba(212,175,55,0)}}

/* ---------- 29. RESPONSIVE ---------- */
@media (max-width:1080px){
  .g-4{grid-template-columns:repeat(2,1fr)}
  .pgrid{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
  .hero-dove{width:min(320px,44vw);top:10%;right:2%;opacity:.7}
}
@media (max-width:900px){
  :root{--nav-h:72px}
  .nav-links{display:none}
  .burger{display:grid}
  .cart-btn span.lbl{display:none}
  .cart-btn{padding:11px 15px}
  .g-2,.g-3,.split,.shead-split,.scard-in,.modal-grid{grid-template-columns:1fr}
  .split.rev .split-media{order:0}
  .scard{position:relative;top:auto}
  .scard-img{min-height:280px;order:-1}
  .stickymedia{position:relative;top:auto}
  .modal-media{min-height:300px}
  .hero-meta{flex-direction:column;align-items:flex-start;gap:18px}
  .hero-stats{width:100%;justify-content:space-between}
  .hero-stats div{text-align:left}
  .hero h1 .ln2{padding-left:0}
}
@media (max-width:620px){
  .pgrid{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .foot-bot{flex-direction:column;align-items:flex-start}
  .hero-dove{display:none}
  .split-badge{right:14px;bottom:14px;padding:15px 20px}
  .btn{padding:15px 26px}
}

/* ---------- 30. MOTION SAFETY ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .r-up,.r-fade,.r-scale{opacity:1!important;transform:none!important}
  .r-clip{clip-path:none!important}
  .line-mask>span,.word>span{transform:none!important}
  .imgfx img{transform:none!important}
  .imgfx::after{display:none}
  .grain{display:none}
}

/* No-JS fallback */
.no-js #loader{display:none}
.no-js .r-up,.no-js .r-fade,.no-js .r-scale{opacity:1;transform:none}
.no-js .r-clip{clip-path:none}
.no-js .line-mask>span,.no-js .word>span{transform:none}
.no-js .imgfx img{transform:none}
.no-js .imgfx::after{display:none}