/* ============================================================
   RYDE — Chapter styles
   ============================================================ */

/* ====================================================
   CH1 — HERO / OPENING
   ==================================================== */
.hero{
  min-height:100svh;
  background:var(--cream);
  display:flex;flex-direction:column;justify-content:center;
  padding-top:120px;padding-bottom:64px;
  position:relative;overflow:hidden;
}
.hero .orbits{
  position:absolute;inset:0;pointer-events:none;z-index:0;
  display:grid;place-items:center;
}
.hero .orbits svg{
  position:absolute;
  width:min(135vh,128vw);height:min(135vh,128vw);
  opacity:.5;
}
.hero .orbit-a{animation:spin var(--mo-orbit-a) linear infinite}
.hero .orbit-b{animation:spin var(--mo-orbit-b) linear infinite reverse;width:min(96vh,92vw)!important;height:min(96vh,92vw)!important;opacity:.32!important}
@keyframes spin{to{transform:rotate(360deg)}}

.hero .shell{position:relative;z-index:2}
.hero .kicker{color:var(--orange-deep);margin-bottom:clamp(20px,3vw,34px);display:flex;align-items:center;gap:14px}
.hero .kicker .tick{width:34px;height:1.5px;background:var(--orange);display:inline-block}
.hero h1{
  font-size:clamp(56px,12.5vw,210px);
  letter-spacing:-.05em;
}
.hero h1 .ln{display:block}
.hero .herofoot{
  margin-top:clamp(28px,4vw,48px);
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:28px;
}
.hero .herofoot p{
  font-size:clamp(17px,1.9vw,23px);max-width:30ch;color:var(--ink-soft);
}
.hero .scrollcue{
  display:flex;align-items:center;gap:12px;font-size:12px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--g500);white-space:nowrap;
}
.hero .scrollcue .bar{position:relative;width:46px;height:2px;background:rgba(23,23,23,.16);overflow:hidden;border-radius:2px}
.hero .scrollcue .bar::after{content:"";position:absolute;left:0;top:0;height:100%;width:40%;background:var(--orange);animation:cue 2.2s ease-in-out infinite}
@keyframes cue{0%{transform:translateX(-110%)}60%,100%{transform:translateX(280%)}}

/* word marquee under hero */
.marquee{
  position:relative;overflow:hidden;
  border-top:1px solid rgba(23,23,23,.1);border-bottom:1px solid rgba(23,23,23,.1);
  background:var(--cream);
}
.marquee .track{display:flex;gap:0;width:max-content;animation:slide var(--mo-marquee) linear infinite}
.marquee:hover .track{animation-play-state:paused}
.marquee .item{
  display:flex;align-items:center;gap:30px;padding:18px 0;
}
.marquee .item span{font-size:clamp(20px,3vw,38px);font-weight:800;letter-spacing:-.03em;white-space:nowrap;padding:0 30px;color:var(--ink)}
.marquee .item span.dim{color:transparent;-webkit-text-stroke:1.4px rgba(23,23,23,.28)}
.marquee .item .dot{width:9px;height:9px;border-radius:50%;background:var(--orange);flex:none}
@keyframes slide{to{transform:translateX(-50%)}}

/* ====================================================
   CH2 — MOVE
   ==================================================== */
.move{background:var(--white);padding:clamp(96px,13vw,180px) 0;position:relative}
.sec-head{display:flex;align-items:baseline;gap:18px;margin-bottom:clamp(34px,5vw,60px)}
.sec-head .idx{font-size:14px;font-weight:700;color:var(--orange);letter-spacing:.08em;font-variant-numeric:tabular-nums}
.sec-head .lbl{font-size:13px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:var(--g500)}
.move h2{
  font-size:clamp(40px,7.6vw,116px);letter-spacing:-.045em;line-height:.96;
  max-width:16ch;
}
.move .sub{margin-top:clamp(22px,3vw,34px);font-size:clamp(17px,1.9vw,22px);max-width:44ch;color:var(--ink-soft);font-weight:500}

.move .gallery{
  margin-top:clamp(54px,8vw,104px);
  display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(14px,2vw,26px);
  align-items:end;
  touch-action:pan-y;
}
.move .gframe{position:relative;border-radius:18px;overflow:hidden;background:var(--cream-deep);touch-action:pan-y}
.move .gframe img{
  width:100%;height:100%;display:block;
  object-fit:cover;
  pointer-events:none;
  touch-action:pan-y;
  -webkit-user-drag:none;
  user-select:none;
  -webkit-touch-callout:none;
}
.move .g1{grid-column:1/5;aspect-ratio:3/4}
.move .g2{grid-column:5/9;aspect-ratio:4/5;transform:translateY(-34px)}
.move .g3{grid-column:9/13;aspect-ratio:3/4}
.move .gcap{
  grid-column:1/13;display:flex;flex-wrap:wrap;justify-content:space-between;gap:18px;
  margin-top:18px;font-size:14px;color:var(--g500);font-weight:500;
}
.move .gcap b{color:var(--ink);font-weight:700}
.move .tagline{
  margin-top:clamp(64px,9vw,128px);
  font-size:clamp(26px,4.4vw,64px);font-weight:800;letter-spacing:-.04em;line-height:1.04;
  max-width:20ch;
}
@media(max-width:760px){
  .move .g1,.move .g2,.move .g3{grid-column:1/13;transform:none}
  .move .g2{margin:0}
}

/* ====================================================
   CH3 — MOMENTS  (emotional peak — full orange)
   ==================================================== */
.moments{
  background:var(--orange);color:#fff;position:relative;overflow:hidden;
  padding:clamp(110px,16vw,210px) 0;
}
.moments .ghost{
  position:absolute;right:-8vw;top:-6vw;width:62vw;max-width:880px;opacity:.13;pointer-events:none;
  color:#fff;
}
.moments .sec-head .idx{color:#fff}
.moments .sec-head .lbl{color:rgba(255,255,255,.7)}
.moments .eyebrow{font-size:clamp(15px,1.7vw,20px);font-weight:600;color:rgba(255,255,255,.82);max-width:34ch;margin-bottom:clamp(22px,3vw,32px)}
.moments h2{
  font-size:clamp(48px,11vw,176px);letter-spacing:-.05em;line-height:.9;color:#fff;
}
.moments h2 .stroke{color:transparent;-webkit-text-stroke:clamp(1.5px,.28vw,3px) rgba(255,255,255,.85)}
.moments .big-claim{
  margin-top:clamp(40px,6vw,82px);
  display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,5vw,72px);align-items:end;
}
.moments .big-claim p{font-size:clamp(19px,2.3vw,30px);font-weight:500;line-height:1.26;letter-spacing:-.015em;color:#fff}
.moments .big-claim p .soft{color:rgba(255,255,255,.66)}
.moments .give{display:flex;flex-direction:column;gap:14px}
.moments .give .row{
  display:flex;align-items:center;gap:16px;padding:18px 4px;border-top:1px solid rgba(255,255,255,.26);
  font-size:clamp(17px,1.9vw,22px);font-weight:600;letter-spacing:-.01em;
}
.moments .give .row:last-child{border-bottom:1px solid rgba(255,255,255,.26)}
.moments .give .row .n{font-size:13px;font-weight:700;opacity:.7;font-variant-numeric:tabular-nums;min-width:26px}
.moments .give .row .arr{margin-left:auto;transition:transform .35s cubic-bezier(.34,1.4,.5,1)}
.moments .give .row:hover .arr{transform:translateX(6px)}
@media(max-width:760px){.moments .big-claim{grid-template-columns:1fr}}

/* ====================================================
   CH4 — CARE
   ==================================================== */
.care{background:var(--cream);padding:clamp(110px,15vw,200px) 0;position:relative;overflow:hidden}
.care .wrap-c{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,7vw,110px);align-items:center}
.care h2{font-size:clamp(44px,8.4vw,128px);letter-spacing:-.05em;line-height:.92}
.care h2 .o{color:var(--orange)}
.care .lead{margin-top:clamp(22px,3vw,30px);font-size:clamp(18px,2vw,24px);color:var(--ink-soft);max-width:34ch;font-weight:500;line-height:1.34}
.care .moments-list{display:flex;flex-direction:column;gap:clamp(12px,1.6vw,18px)}
.care .cm{
  background:#fff;border-radius:20px;padding:clamp(22px,2.6vw,30px);
  border:1px solid rgba(23,23,23,.06);box-shadow:0 1px 2px rgba(16,24,40,.04);
  display:flex;align-items:center;gap:22px;
  transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s ease;
}
.care .cm:hover{transform:translateX(8px);box-shadow:0 18px 40px -22px rgba(23,23,23,.3)}
.care .cm .ci{
  width:54px;height:54px;flex:none;border-radius:50%;background:var(--beige);
  display:grid;place-items:center;color:var(--orange-deep);
}
.care .cm .ci svg{width:26px;height:26px}
.care .cm .ct{font-size:clamp(17px,1.9vw,21px);font-weight:700;letter-spacing:-.01em}
.care .cm .cd{font-size:14px;color:var(--g500);font-weight:500;margin-top:3px}
@media(max-width:860px){.care .wrap-c{grid-template-columns:1fr;gap:48px}}

/* ====================================================
   CH5 — PRIME  (deep warm charcoal, understated)
   ==================================================== */
.prime{background:var(--char);color:#fff;padding:clamp(120px,17vw,230px) 0;position:relative;overflow:hidden}
.prime .glow{position:absolute;left:50%;top:38%;width:60vw;height:60vw;max-width:760px;max-height:760px;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(255,148,37,.22),transparent 62%);pointer-events:none;filter:blur(10px)}
.prime .shell{position:relative;z-index:2;text-align:center}
.prime .sec-head{justify-content:center}
.prime .sec-head .lbl{color:rgba(255,255,255,.55)}
.prime h2{font-size:clamp(46px,9.5vw,150px);letter-spacing:-.05em;line-height:.94;margin:0 auto}
.prime h2 .o{color:var(--orange)}
.prime .psub{margin:clamp(26px,3.4vw,40px) auto 0;font-size:clamp(18px,2vw,25px);color:var(--g300);max-width:30ch;font-weight:500;line-height:1.36}
.prime .pillars{
  margin-top:clamp(56px,8vw,104px);display:flex;flex-wrap:wrap;justify-content:center;
  gap:clamp(10px,1.4vw,16px);
}
.prime .pillars span{
  font-size:clamp(14px,1.5vw,17px);font-weight:600;letter-spacing:-.01em;
  padding:12px 24px;border-radius:999px;border:1px solid rgba(255,255,255,.2);color:rgba(255,255,255,.86);
}

/* ====================================================
   CH6 — TRUST  (minimal, elegant, secondary)
   ==================================================== */
.trust{background:var(--char);color:#fff;padding:clamp(70px,9vw,120px) 0;border-top:1px solid rgba(255,255,255,.08)}
.trust .row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:clamp(30px,5vw,60px)}
.trust .tline{font-size:clamp(20px,2.6vw,34px);font-weight:600;letter-spacing:-.025em;max-width:24ch;color:#fff;line-height:1.18}
.trust .tline .o{color:var(--orange)}
.trust .creds{display:flex;flex-wrap:wrap;gap:clamp(26px,4vw,56px)}
.trust .cred{max-width:24ch}
.trust .cred .y{font-size:clamp(30px,3.6vw,52px);font-weight:800;letter-spacing:-.03em;color:#fff}
.trust .cred .y .o{color:var(--orange)}
.trust .cred .c{margin-top:6px;font-size:13.5px;color:var(--g400);font-weight:500;line-height:1.4}

/* ====================================================
   CH7 — ALWAYS RYDE  (download)
   ==================================================== */
.always{background:var(--orange);color:#fff;padding:clamp(120px,17vw,220px) 0;position:relative;overflow:hidden;text-align:center}
.always .ring{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:118vh;height:118vh;opacity:.16;pointer-events:none;animation:spin var(--mo-ring) linear infinite}
.always .shell{position:relative;z-index:2}
.always .kicker{color:rgba(255,255,255,.78);margin-bottom:26px}
.always h2{font-size:clamp(64px,17vw,260px);letter-spacing:-.055em;line-height:.86;color:#fff}
.always .as{margin:clamp(26px,3.4vw,40px) auto clamp(40px,5vw,56px);font-size:clamp(18px,2.1vw,26px);color:rgba(255,255,255,.9);max-width:26ch;font-weight:500}
.always .stores{display:flex;flex-wrap:wrap;gap:16px;justify-content:center}
.store-btn{
  display:inline-flex;align-items:center;gap:13px;background:#14110E;color:#fff;
  padding:15px 26px;border-radius:16px;transition:transform .25s cubic-bezier(.34,1.4,.5,1),box-shadow .25s ease;
  box-shadow:0 14px 34px -16px rgba(0,0,0,.6);
}
.store-btn:hover{transform:translateY(-3px);box-shadow:0 20px 40px -16px rgba(0,0,0,.7)}
.store-btn svg{width:26px;height:26px;flex:none}
.store-btn .st{text-align:left;line-height:1.1}
.store-btn .st small{display:block;font-size:11px;font-weight:500;opacity:.72;letter-spacing:.02em}
.store-btn .st b{display:block;font-size:18px;font-weight:700;letter-spacing:-.01em}

/* ====================================================
   FOOTER
   ==================================================== */
.foot{background:var(--char-2);color:#fff;padding:clamp(70px,9vw,110px) 0 44px}
.foot .top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding-bottom:clamp(48px,6vw,72px);border-bottom:1px solid rgba(255,255,255,.1)}
.foot .brand{display:flex;align-items:center;gap:12px;font-size:30px;font-weight:800;letter-spacing:-.03em;margin-bottom:20px}
.foot .brand .glyph{width:30px}
.foot .pitch{font-size:15px;color:var(--g400);max-width:30ch;font-weight:500;line-height:1.5}
.foot .col h4{font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--g500);margin-bottom:18px}
.foot .col a{display:block;font-size:15px;color:rgba(255,255,255,.78);font-weight:500;margin-bottom:12px;transition:color .2s ease}
.foot .col a:hover{color:var(--orange)}
.foot .bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;padding-top:30px}
.foot .bottom .legal{font-size:13px;color:var(--g500)}
.foot .bottom .min{font-size:12.5px;color:var(--g500);max-width:46ch}
.foot .bottom .min b{color:var(--g400);font-weight:600}
@media(max-width:860px){.foot .top{grid-template-columns:1fr 1fr}.foot .brand-col{grid-column:1/3}}
@media(max-width:520px){.foot .top{grid-template-columns:1fr 1fr}.foot .brand-col{grid-column:1/3}}

/* ====================================================
   V2 — EMOTIONAL PASS
   ==================================================== */

/* sec-head: emotion is the label, product becomes a quiet tag */
.sec-head{align-items:center}
.sec-head .tag{
  margin-left:auto;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--g500);border:1px solid rgba(23,23,23,.16);padding:5px 13px;border-radius:999px;line-height:1;
}
.moments .sec-head .tag,.prime .sec-head .tag{color:rgba(255,255,255,.72);border-color:rgba(255,255,255,.26)}
.prime .sec-head .tag{margin-left:0}
@media(max-width:540px){.sec-head .tag{display:none}}

/* hero manifesto + word cycler */
.hero .manifesto{display:flex;flex-direction:column;gap:14px}
.hero .creates{font-size:clamp(16px,1.85vw,22px);font-weight:600;color:var(--ink);letter-spacing:-.01em}
.cyc{display:inline-block;position:relative;overflow:hidden;vertical-align:bottom;color:var(--orange);min-width:5.5em}
.cyc-w{display:inline-block;will-change:transform,opacity}
.cyc-w.out{transform:translateY(-110%);opacity:0;transition:transform .5s cubic-bezier(.7,0,.3,1),opacity .4s ease}
.cyc-w.in-down{transform:translateY(110%);opacity:0;transition:none}
.cyc-w.in-rest{transform:none;opacity:1;transition:transform .55s cubic-bezier(.16,1,.3,1),opacity .5s ease}

/* ── MOMENTS field ── */
.moments .m-instr{
  margin-top:clamp(26px,3.4vw,40px);display:flex;align-items:center;gap:13px;
  font-size:14px;font-weight:600;letter-spacing:.01em;color:rgba(255,255,255,.8);
}
.moments .dotpulse{width:9px;height:9px;border-radius:50%;background:#fff;flex:none;animation:dotpulse 1.9s ease-out infinite}
@keyframes dotpulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.5)}70%{box-shadow:0 0 0 13px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
.t-touch{display:none}
@media(hover:none){.t-desktop{display:none}.t-touch{display:inline}}

.moments-field{
  position:relative;width:100%;max-width:1500px;margin:clamp(38px,5.5vw,70px) auto 0;
  height:clamp(440px,52vw,660px);z-index:2;
}
.mom{
  position:absolute;transform:translate(-50%,-50%);white-space:nowrap;
  font-weight:800;letter-spacing:-.03em;line-height:1;
  color:transparent;-webkit-text-stroke:1.4px rgba(255,255,255,.46);
  transition:color .5s ease,-webkit-text-stroke .5s ease,transform .6s cubic-bezier(.16,1,.3,1);
  cursor:default;user-select:none;
}
.mom.s{font-size:clamp(15px,1.7vw,23px)}
.mom.m{font-size:clamp(19px,2.4vw,34px)}
.mom.l{font-size:clamp(24px,3.6vw,54px)}
.mom.lit{color:#fff;-webkit-text-stroke:1.4px rgba(255,255,255,0);transform:translate(-50%,-50%) scale(1.05)}
.spotlight{
  position:absolute;left:0;top:0;width:440px;height:440px;border-radius:50%;
  transform:translate(-50%,-50%);pointer-events:none;opacity:0;
  background:radial-gradient(circle,rgba(255,255,255,.34),rgba(255,255,255,.08) 42%,transparent 64%);
  mix-blend-mode:soft-light;transition:opacity .5s ease;
}
.moments-field.active .spotlight{opacity:1}
.moments-field.auto .spotlight{transition:opacity .5s ease,left .85s cubic-bezier(.4,0,.2,1),top .85s cubic-bezier(.4,0,.2,1)}

.moments .m-close{
  margin-top:clamp(50px,7vw,98px);font-size:clamp(24px,3.4vw,52px);font-weight:800;
  letter-spacing:-.035em;line-height:1.04;color:rgba(255,255,255,.5);max-width:20ch;position:relative;z-index:2;
}
.moments .m-close .ink{color:#fff}

@media(max-width:760px){
  .moments-field{position:static;height:auto;display:flex;flex-wrap:wrap;justify-content:center;
    gap:14px 24px;padding:0 var(--pad);margin-top:34px;text-align:center}
  .mom{position:static;transform:none}
  .mom.lit{transform:scale(1.04)}
  .mom.s,.mom.m,.mom.l{font-size:clamp(17px,5.4vw,26px)}
  .spotlight{display:none}
}

/* ── CARE restructured: emotion first, services after ── */
.care{min-height:100svh;display:flex;align-items:center}
.care .shell{width:100%}
.care-hero{max-width:none}
.care-hero .lead{max-width:42ch;margin-top:clamp(22px,3vw,30px)}
.care-services{margin-top:clamp(56px,8vw,104px)}
.care-services .cs-label{font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--g500);margin-bottom:clamp(20px,3vw,30px)}
.care-services .moments-list{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.4vw,18px)}
.care .cm{flex-direction:column;align-items:flex-start;gap:18px}
.care .cm:hover{transform:translateY(-6px)}
@media(max-width:860px){.care-services .moments-list{grid-template-columns:1fr 1fr}}
@media(max-width:520px){
  .care-services .moments-list{grid-template-columns:1fr}
  .care .cm{flex-direction:row;align-items:center}
  .care .cm:hover{transform:translateX(8px)}
}

/* ── PRIME owns the viewport ── */
.prime{min-height:100svh;display:flex;align-items:center}
.prime .shell{width:100%}

/* Care headline: clean two-line statement */
.care h2{font-size:clamp(38px,6.6vw,98px)}

/* ====================================================
   V3 — PERSONALITY PASS
   ==================================================== */

/* Hero: ownable belief creed */
.hero .herofoot .creed{max-width:40ch}
.hero .creed{font-size:clamp(18px,2vw,24px);font-weight:500;color:var(--ink-soft);line-height:1.24;letter-spacing:-.012em}
.hero .creed-big{margin-top:clamp(8px,1vw,12px);font-size:clamp(23px,2.9vw,40px);font-weight:800;color:var(--ink);letter-spacing:-.028em;line-height:1.02}

/* Move: 'Movement creates …' momentum stack */
.move .creates-stack{margin:0 0 clamp(24px,3.2vw,38px)}
.move .cl{font-size:clamp(27px,5.1vw,76px);line-height:1.0;letter-spacing:-.04em;color:var(--ink-soft);font-weight:700;max-width:none}
.move .cl + .cl{margin-top:clamp(3px,.5vw,9px)}
.move .cl .o{color:var(--orange);font-weight:800}
.move .sub{margin-top:0;max-width:46ch}

/* Moments: tangible-value grounding line */
.moments .m-ground{margin-top:clamp(20px,2.6vw,30px);font-size:clamp(15px,1.6vw,19px);font-weight:500;color:rgba(255,255,255,.8);max-width:46ch;line-height:1.42;position:relative;z-index:2}

/* Care: warm human punch */
.care .lead .lead-warm{color:var(--orange);font-weight:700}
.care-services .moments-list{grid-template-columns:repeat(3,1fr)}
@media(max-width:860px){.care-services .moments-list{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.care-services .moments-list{grid-template-columns:1fr}}

/* ====================================================
   V4 — ALIVE PASS (organic scroll momentum + attitude)
   The page leans, breathes and reacts as you move through it.
   --vel is a signed scroll-velocity value set each frame by ryde.js
   ==================================================== */
.marquee{transform:skewX(calc(var(--vel,0) * 0.55deg));transition:transform .2s ease-out}
.marquee .track{will-change:transform}
.move .creates-stack{transform-origin:left center;transform:skewY(calc(var(--vel,0) * -0.16deg));transition:transform .24s ease-out}
.moments .ghost{transform:translateY(calc(var(--vel,0) * -3px)) rotate(calc(var(--vel,0) * 0.12deg));transition:transform .3s ease-out}
.hero .herofoot .creed-big{transform:translateY(calc(var(--vel,0) * -1.2px));transition:transform .25s ease-out}
.always h2{transform:skewY(calc(var(--vel,0) * -0.12deg));transition:transform .24s ease-out}

/* looser, springier microinteractions — less perfect, more alive */
.nav .cta:hover{transform:translateY(-2px) rotate(-1.2deg)}
.store-btn:hover{transform:translateY(-3px) rotate(-1.4deg)}
.care .cm:hover .ci{transform:rotate(-6deg) scale(1.06)}
.care .cm .ci{transition:transform .35s cubic-bezier(.34,1.5,.4,1)}
.prime .pillars span{transition:transform .3s cubic-bezier(.34,1.5,.4,1),border-color .3s ease,color .3s ease}
.prime .pillars span:hover{transform:translateY(-3px) rotate(-1.5deg);border-color:var(--orange);color:#fff}

@media(prefers-reduced-motion:reduce){
  .marquee,.move .creates-stack,.moments .ghost,.hero .herofoot .creed-big,.always h2{transform:none!important}
}