/* Ride to Thrive website preview.
   Section surfaces have a job: dark = experience and media, light = choose and read, graphite = community energy,
   red = act now, photo = place. Racing red is the action colour; green only marks Better Life. */
@view-transition { navigation: auto; }
:root {
  --k0: #050607; --k1: #0b0c0e; --k2: #131518; --k3: #1c1f23; --k4: #2a2e33;
  --paper: #f3f2ef; --paper2: #e7e5e0; --ink: #0b0c0e; --ink2: #3b4046; --ink3: #6b7178;
  --red: #e3262b; --red-dk: #b81d21; --green: #2f8f5b; --green-ink: #9fd3b4; --white: #ffffff; --silver: #a7adb4;
  --display: 'Saira', 'Kanit', 'Arial Narrow', sans-serif;
  --body: 'Titillium Web', 'Noto Sans Thai', 'Segoe UI', system-ui, sans-serif;
  --gut: clamp(16px, 3.6vw, 56px); --maxw: 1400px; --nav-h: 64px;
  /* surface tokens (dark by default) */
  --bg: var(--k1); --fg: #f5f6f7; --fg2: rgba(245,246,247,.76); --fg3: rgba(245,246,247,.52);
  --line: rgba(255,255,255,.13); --line2: rgba(255,255,255,.3); --card: var(--k2); --card2: var(--k3);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--k1); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--k1); color: var(--fg); font: 16px/1.6 var(--body); overflow-x: clip; letter-spacing: .005em; }
h1, h2, h3, h4, p { margin: 0; }
a { color: inherit; text-decoration: none; }
img, video { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
.w { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gut); }
.disp { font-family: var(--display); font-stretch: 125%; font-weight: 800; text-transform: uppercase; line-height: 1; letter-spacing: -.012em; text-wrap: balance; overflow-wrap: break-word; hyphens: manual; }
.it { font-style: italic; }
.lab { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; line-height: 1.3; }
.muted { color: var(--fg2); }
.lead { font-size: clamp(17px, 1.4vw, 19px); line-height: 1.6; color: var(--fg2); max-width: 62ch; }
p, li { text-wrap: pretty; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Thai: no uppercase transforms or tight tracking; taller line height for vowel marks */
:lang(th) .disp { text-transform: none; letter-spacing: 0; line-height: 1.22; font-stretch: 100%; }
:lang(th) .lab, :lang(th) .pill, :lang(th) .more { letter-spacing: .02em; text-transform: none; }
:lang(th) body { line-height: 1.75; }

/* ---------- surfaces ---------- */
.s-dark { --bg: var(--k1); background: var(--bg); }
.s-light { --bg: var(--paper); --fg: var(--ink); --fg2: var(--ink2); --fg3: var(--ink3); --line: rgba(11,12,14,.13); --line2: rgba(11,12,14,.32); --card: #ffffff; --card2: var(--paper2); background: var(--bg); color: var(--fg); color-scheme: light; }
.s-graphite { --bg: var(--k2); --card: rgba(11,12,14,.72); --card2: var(--k3); background:
  radial-gradient(120% 90% at 100% 0%, rgba(227,38,43,.22), transparent 55%),
  repeating-linear-gradient(-58deg, rgba(255,255,255,.035) 0 26px, transparent 26px 52px),
  linear-gradient(180deg, var(--k2), var(--k1)); }
.s-red { --bg: var(--red); --fg: #fff; --fg2: #ffe3e3; --fg3: #ffc9c9; --line: rgba(255,255,255,.3); --line2: rgba(255,255,255,.6); --card: rgba(0,0,0,.18); background:
  repeating-linear-gradient(-58deg, rgba(0,0,0,.1) 0 22px, transparent 22px 44px), linear-gradient(120deg, #e3262b, #b81d21); color: #fff; }
.s-photo { position: relative; isolation: isolate; background: var(--k0); }
.s-photo > .bgimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.s-photo::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(5,6,7,.92) 0%, rgba(5,6,7,.6) 45%, rgba(5,6,7,.25) 100%), linear-gradient(0deg, rgba(5,6,7,.85), transparent 45%); }
.s-photo.closing::before { background: linear-gradient(90deg, rgba(5,6,7,.96) 0%, rgba(5,6,7,.82) 50%, rgba(5,6,7,.5) 100%); }
.band { padding-block: clamp(56px, 7vw, 96px); }
.band.tight { padding-block: clamp(40px, 5vw, 64px); }
section[class*="s-"] { color: var(--fg); }

/* ---------- loader ---------- */
.loader { position: fixed; inset: 0; z-index: 100; background: var(--k0); display: grid; place-items: center; transition: opacity .45s ease, visibility .45s; }
.loader.done { opacity: 0; visibility: hidden; }
.loader .in { display: grid; gap: 22px; justify-items: center; width: min(280px, 70vw); }
.loader .mk { width: 64px; height: 48px; background: var(--red); clip-path: polygon(22% 0, 100% 0, 78% 100%, 0 100%); display: grid; place-items: center; font: italic 900 22px var(--display); font-stretch: 125%; color: #fff; animation: breathe 1.2s ease-in-out infinite; }
.loader .bar { width: 100%; height: 3px; background: var(--k3); overflow: hidden; }
.loader .bar i { display: block; height: 100%; width: 0; background: var(--red); transition: width .25s ease; }
.loader .tx { font: 700 11px var(--body); letter-spacing: .3em; text-transform: uppercase; color: rgba(245,246,247,.5); }
@keyframes breathe { 50% { transform: skewX(-4deg) scale(.96); } }
html.no-loader .loader { display: none; }

/* ---------- buttons ---------- */
.pill { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 26px; border-radius: 999px; font: 900 13px/1 var(--body); letter-spacing: .1em; text-transform: uppercase; border: 0; cursor: pointer; white-space: nowrap; transition: background .2s, box-shadow .2s, color .2s; }
.pill.white { background: var(--white); color: var(--ink); }
.pill.white:hover { background: #dfe2e5; }
.pill.red { background: var(--red); color: #fff; }
.pill.red:hover { background: var(--red-dk); }
.pill.ink { background: var(--ink); color: #fff; }
.pill.ink:hover { background: #2a2e33; }
.pill.ghost { box-shadow: inset 0 0 0 1.5px var(--line2); color: var(--fg); background: transparent; }
.pill.ghost:hover { box-shadow: inset 0 0 0 1.5px var(--fg); }
.pill.sm { min-height: 40px; padding: 0 18px; font-size: 11.5px; }
.pill svg { width: 16px; height: 16px; }
.more { font-size: 12.5px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; color: var(--fg); }
.more::after { content: ''; width: 20px; height: 2px; background: var(--red); transition: width .2s; }
.more:hover::after, a:hover .more::after { width: 32px; }
.s-red .more::after { background: #fff; }

/* ---------- header ---------- */
.util { background: var(--k0); font-size: 12.5px; }
.util .w { display: flex; justify-content: flex-end; align-items: center; gap: 22px; min-height: 34px; white-space: nowrap; }
.util a { color: rgba(245,246,247,.72); font-weight: 600; }
.util a:hover { color: #fff; }
.util .hot { color: #ff5a5f; font-weight: 700; }
.langs { display: inline-flex; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; overflow: hidden; }
.langs a { padding: 2px 10px; font-weight: 700; font-size: 11.5px; color: rgba(245,246,247,.72); }
.langs a[aria-current="true"] { background: #fff; color: var(--ink); }
.nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 40; background: var(--k1); border-bottom: 1px solid rgba(255,255,255,.12); view-transition-name: nav; color: #f5f6f7; }
.nav .w { display: flex; align-items: center; gap: 16px; min-height: var(--nav-h); }
.iconbtn { width: 44px; height: 44px; display: grid; place-items: center; background: none; border: 0; color: inherit; cursor: pointer; flex: none; border-radius: 50%; }
.iconbtn:hover { background: rgba(255,255,255,.08); }
.iconbtn svg { width: 22px; height: 22px; }
.logo { display: flex; align-items: center; gap: 9px; flex: none; color: #fff; }
.logo .mk { width: 34px; height: 26px; background: var(--red); clip-path: polygon(22% 0, 100% 0, 78% 100%, 0 100%); display: grid; place-items: center; font: italic 900 13px var(--display); font-stretch: 125%; color: #fff; }
.logo .tx { font: italic 900 18px/.92 var(--display); font-stretch: 125%; text-transform: uppercase; letter-spacing: -.015em; }
.links { display: flex; gap: 2px; flex: 1; min-width: 0; }
.links a { padding: 21px 10px; font-size: 14.5px; font-weight: 600; color: rgba(245,246,247,.74); white-space: nowrap; position: relative; }
.links a:hover, .links a[aria-current="page"] { color: #fff; }
.links a[aria-current="page"]::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: 0; height: 3px; background: var(--red); }
.nav .acts { display: flex; align-items: center; gap: 14px; flex: none; margin-left: auto; font-size: 14px; font-weight: 600; }
.nav .acts .join { color: #ff5a5f; font-weight: 700; }
.backbtn { display: none; }
.has-back .backbtn { display: grid; }

/* event bar */
.ev { background: var(--k3); border-bottom: 1px solid rgba(255,255,255,.12); color: #f5f6f7; }
.ev .w { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; min-height: 54px; }
.ev .round { display: flex; align-items: center; gap: 12px; }
.ev .trk { width: 30px; height: 30px; }
.ev .round small { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; color: rgba(245,246,247,.74); }
.ev .round b { font: 900 15px var(--display); font-stretch: 125%; text-transform: uppercase; }
.ev .flag { display: inline-block; width: 16px; height: 11px; background: linear-gradient(#e3262b 50%, #fff 50%); margin-right: 6px; vertical-align: 1px; }
.ev .next { text-align: center; font: 800 14.5px var(--display); font-stretch: 112%; text-transform: uppercase; }
.ev .next span { color: #ff5a5f; }
:lang(th) .ev .next { text-transform: none; font-stretch: 100%; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--red); margin-right: 8px; animation: pulse 1.4s infinite; vertical-align: 1px; }
@keyframes pulse { 50% { opacity: .2; } }

/* menu sheet */
.menu { position: fixed; inset: 0; z-index: 80; background: var(--k0); color: #f5f6f7; display: grid; grid-template-rows: auto 1fr auto; transform: translateX(-100%); transition: transform .35s cubic-bezier(.2,.8,.2,1), visibility .35s; visibility: hidden; }
.menu.open { transform: none; visibility: visible; }
.menu .top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px var(--gut); border-bottom: 1px solid rgba(255,255,255,.12); }
.menu nav { overflow-y: auto; padding: 8px var(--gut) 24px; display: grid; grid-template-columns: 1fr; align-content: start; }
.menu nav a { display: grid; grid-template-columns: 46px 1fr; align-items: center; gap: 6px; padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,.1); }
.menu nav a span { font: 900 14px var(--display); font-stretch: 125%; color: var(--red); }
.menu nav a b { font: 800 22px/1.1 var(--display); font-stretch: 118%; text-transform: uppercase; }
:lang(th) .menu nav a b { text-transform: none; font-stretch: 100%; }
.menu nav a small { display: block; font: 600 13px var(--body); color: rgba(245,246,247,.5); text-transform: none; letter-spacing: 0; margin-top: 2px; }
.menu nav a[aria-current="page"] b { color: #ff5a5f; }
.menu .sub { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 16px 0 0; font-size: 14px; color: rgba(245,246,247,.7); }
.menu .ft { padding: 12px var(--gut) calc(12px + env(safe-area-inset-bottom, 0px)); display: grid; grid-template-columns: 1fr 1fr; gap: 10px; border-top: 1px solid rgba(255,255,255,.12); }
@media (min-width: 900px) { .menu nav { grid-template-columns: 1fr 1fr; column-gap: 40px; } }

/* ---------- hero (home) ---------- */
.hero { position: relative; height: clamp(520px, 84vh, 860px); overflow: hidden; background: #000; color: #fff; }
.slide { position: absolute; inset: 0; opacity: 0; transition: opacity .8s ease; pointer-events: none; }
.slide.on { opacity: 1; pointer-events: auto; }
.slide .media { position: absolute; inset: 0; overflow: hidden; background: #000; }
.slide .media img, .slide .media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.slide .media video { opacity: 0; transition: opacity .5s; }
.slide .media.playing video { opacity: 1; }
.slide.on .media:not(.playing) img { animation: kb 9s ease-out forwards; }
@keyframes kb { from { transform: scale(1.02); } to { transform: scale(1.12) translate(-1.5%, -1%); } }
.slide .shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(5,6,7,.95) 6%, rgba(5,6,7,.45) 42%, rgba(5,6,7,0) 70%), linear-gradient(90deg, rgba(5,6,7,.6), rgba(5,6,7,0) 58%); }
.slide .copy { position: absolute; left: 0; right: 0; bottom: 108px; }
.slide .copy .w { display: grid; gap: 0; justify-items: start; }
.tag { display: flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 18px; }
:lang(th) .tag { letter-spacing: .02em; text-transform: none; }
.tag i { width: 26px; height: 3px; background: var(--c, var(--red)); }
.slide h1 { font-size: clamp(38px, 6.2vw, 96px); max-width: 15ch; margin-bottom: 26px; }
.slide p { max-width: 540px; font-size: clamp(16px, 1.3vw, 18px); color: #dfe2e5; margin-bottom: 26px; }
.mw { display: inline-block; overflow: hidden; vertical-align: bottom; padding: .04em .02em .08em 0; margin-bottom: -.08em; }
.mw > span { display: inline-block; transform: translateY(108%); }
.slide.on .mw > span { animation: up .7s cubic-bezier(.2,.8,.2,1) forwards; animation-delay: calc(var(--i) * 85ms + 120ms); }
@keyframes up { to { transform: translateY(0); } }
.hl { position: relative; display: inline-block; }
.hl::after { content: ''; position: absolute; left: .02em; right: 0; bottom: .06em; height: .07em; transform-origin: left; transform: scaleX(0); background: var(--c, var(--red)); }
.slide.on .hl::after { animation: sweep .6s .85s ease-out forwards; }
@keyframes sweep { to { transform: scaleX(1); } }
.slide.on .fade { animation: fin .6s .65s both; }
@keyframes fin { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
:lang(th) .mw { padding-top: .3em; }
.ind { position: absolute; left: 0; right: 0; bottom: 40px; z-index: 3; }
.ind .w { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.ind button { background: none; border: 0; padding: 6px 0; cursor: pointer; text-align: left; color: rgba(255,255,255,.55); display: grid; gap: 9px; font: 700 12px var(--body); letter-spacing: .1em; text-transform: uppercase; }
:lang(th) .ind button { text-transform: none; letter-spacing: 0; }
.ind .t { height: 3px; background: rgba(255,255,255,.22); position: relative; overflow: hidden; }
.ind .t i { position: absolute; inset: 0; transform: scaleX(0); transform-origin: left; background: var(--c, #fff); }
.ind button.on { color: #fff; }
.ind button.on .t i { transform: scaleX(1); transition: transform var(--dur, 7s) linear; }
.ind button.done .t i { transform: scaleX(1); }

/* ---------- page head ---------- */
.phead { position: relative; min-height: clamp(360px, 52vh, 520px); display: flex; align-items: flex-end; overflow: hidden; background: #000; color: #fff; }
.phead > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.phead::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(5,6,7,.96) 4%, rgba(5,6,7,.5) 48%, rgba(5,6,7,.15)), linear-gradient(90deg, rgba(5,6,7,.55), transparent 60%); }
.phead .w { position: relative; z-index: 2; padding-block: 44px 48px; display: grid; gap: 16px; justify-items: start; width: 100%; }
.crumb { display: flex; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.75); flex-wrap: wrap; }
:lang(th) .crumb { text-transform: none; letter-spacing: 0; }
.crumb a:hover { color: #fff; }
.crumb i { color: var(--red); font-style: normal; }
.phead h1 { font-size: clamp(34px, 5.4vw, 78px); max-width: 17ch; }
.phead p { max-width: 640px; font-size: clamp(16px, 1.3vw, 18px); color: #dfe2e5; }
.phead.plain { min-height: 0; background: var(--k2); }
.phead.plain::after { background: radial-gradient(100% 120% at 100% 0%, rgba(227,38,43,.25), transparent 60%), repeating-linear-gradient(-58deg, rgba(255,255,255,.035) 0 26px, transparent 26px 52px); }
.phead.plain .w { padding-block: 56px; }

/* ---------- section head ---------- */
.sh { display: grid; grid-template-columns: auto 1fr auto; gap: 22px; align-items: end; margin-bottom: 30px; }
.sh .no { font: italic 900 64px/.8 var(--display); font-stretch: 125%; color: transparent; -webkit-text-stroke: 1.5px var(--red); }
.sh .lab { color: var(--red); display: block; margin-bottom: 10px; }
.s-red .sh .lab { color: #fff; }
.s-red .sh .no { -webkit-text-stroke-color: #fff; }
.sh h2 { font-size: clamp(25px, 3.5vw, 52px); }
.sh > div { min-width: 0; }
@media (max-width: 420px) { .disp { overflow-wrap: anywhere; } .sh h2 { font-size: clamp(23px, 6.6vw, 30px); } }
.sh p { color: var(--fg2); max-width: 64ch; margin-top: 12px; }
.sh.plain { grid-template-columns: 1fr auto; }

/* ---------- grids ---------- */
.g2, .g3, .g4 { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g5 { display: grid; gap: 16px; grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1199px) { .g5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 904px) { .g5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.split { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(24px, 3vw, 44px); align-items: stretch; }
.split.rev { grid-template-columns: 1fr 1.1fr; }
.stack { display: grid; gap: 14px; align-content: start; }

/* image cards */
.ic { position: relative; overflow: hidden; min-height: 440px; display: flex; align-items: flex-end; background: var(--k3); isolation: isolate; color: #fff; }
.ic > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; z-index: -2; }
.ic:hover > img { transform: scale(1.05); }
.ic::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(5,6,7,.96) 22%, rgba(5,6,7,.2) 72%); z-index: -1; }
.ic .num { position: absolute; right: 18px; top: 6px; font: italic 900 116px/1 var(--display); font-stretch: 125%; color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.55); }
.ic .c { padding: 26px; display: grid; gap: 10px; justify-items: start; }
.ic .ix { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
:lang(th) .ic .ix { text-transform: none; letter-spacing: .02em; }
.ic .ix i { width: 26px; height: 3px; background: var(--c, var(--red)); }
.ic h3 { font-size: clamp(24px, 2.2vw, 34px); }
.ic p { color: #d8dbde; font-size: 15px; max-width: 46ch; }
.ic.sm { min-height: 320px; }
.ic.sm h3 { font-size: clamp(20px, 1.7vw, 26px); }
.ic.xs { min-height: 240px; }
.ic.xs .c { padding: 18px; }
.ic.xs h3 { font-size: 19px; }

/* framed media: a photo shown as a picture, never under text */
.media-frame { display: block; position: relative; overflow: hidden; aspect-ratio: 16 / 10; background: var(--k3); box-shadow: 0 30px 60px -36px rgba(0,0,0,.8); }
.media-frame img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
a.media-frame:hover img { transform: scale(1.04); }
.media-frame::after { content: ''; position: absolute; left: 0; bottom: 0; width: 72px; height: 4px; background: var(--red); }

/* textured panels */
.panel { background: var(--card); padding: 28px; display: grid; gap: 12px; align-content: start; position: relative; overflow: hidden; isolation: isolate; color: var(--fg); }
.s-light .panel { box-shadow: 0 1px 0 rgba(11,12,14,.06), 0 18px 40px -28px rgba(11,12,14,.35); }
.panel h3 { font: 800 24px/1.08 var(--display); font-stretch: 118%; text-transform: uppercase; }
:lang(th) .panel h3 { text-transform: none; font-stretch: 100%; line-height: 1.3; }
.panel p { color: var(--fg2); font-size: 15.5px; }
.panel .lab { color: var(--red); }
.panel.g .lab { color: var(--green); }
.s-dark .panel.g .lab, .s-graphite .panel.g .lab { color: var(--green-ink); }
.panel::before { content: ''; position: absolute; left: 0; top: 0; height: 4px; width: 64px; background: var(--c, var(--red)); }
.panel.g { --c: var(--green); }
.panel.w0 { --c: #ffffff; }
.s-light .panel.w0 { --c: var(--ink); }
.panel.tex::after { content: ''; position: absolute; inset: 0; z-index: -1; background:
  radial-gradient(90% 120% at 100% 100%, color-mix(in srgb, var(--c, var(--red)) 26%, transparent), transparent 62%),
  repeating-linear-gradient(-58deg, rgba(255,255,255,.04) 0 18px, transparent 18px 36px); }
.s-light .panel.tex::after { background:
  radial-gradient(90% 120% at 100% 100%, color-mix(in srgb, var(--c, var(--red)) 16%, transparent), transparent 62%),
  repeating-linear-gradient(-58deg, rgba(11,12,14,.035) 0 18px, transparent 18px 36px); }
.panel.photo { color: #fff; min-height: 300px; align-content: end; }
.panel.photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.panel.photo::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(5,6,7,.95) 25%, rgba(5,6,7,.35)); }
.panel.photo p { color: #d8dbde; }
a.panel { transition: transform .25s ease; }
a.panel:hover { transform: translateY(-3px); }

/* numbered rows */
.nlist { display: grid; }
.nrow { display: grid; grid-template-columns: 56px 1fr auto; gap: 16px; align-items: center; padding: 17px 0; border-bottom: 1px solid var(--line); }
.nrow:first-child { border-top: 1px solid var(--line); }
.nrow .n { font: italic 900 24px var(--display); font-stretch: 125%; color: var(--red); }
.nrow b { font-size: 17px; display: block; line-height: 1.3; }
.nrow small { font-size: 14.5px; color: var(--fg2); }
.nrow .bar { width: 96px; height: 3px; background: var(--line); position: relative; }
.nrow .bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--green); }
.nrow.g .n { color: var(--green); }
.s-dark .nrow.g .n, .s-graphite .nrow.g .n { color: var(--green-ink); }
a.nrow:hover b { color: var(--red); }

/* steps */
.track { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.track > div { padding: 22px 22px 0 0; display: grid; gap: 8px; align-content: start; position: relative; }
.track > div::before { content: ''; position: absolute; left: 0; top: -2px; width: 34px; height: 3px; background: var(--c, var(--red)); }
.track b { font: 900 13px var(--display); font-stretch: 125%; color: var(--c, var(--red)); }
.track h4 { font: 800 19px/1.15 var(--display); font-stretch: 118%; text-transform: uppercase; }
:lang(th) .track h4 { text-transform: none; font-stretch: 100%; line-height: 1.35; }
.track p { color: var(--fg2); font-size: 15px; }
.s-light .track.g { --c: var(--green); }
.track.g { --c: var(--green-ink); }

/* facts */
.facts { display: flex; gap: clamp(20px, 3vw, 40px); flex-wrap: wrap; }
.facts > div { display: grid; gap: 2px; }
.facts b { font: italic 900 clamp(30px, 3vw, 42px)/1 var(--display); font-stretch: 125%; }
.facts small { font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--fg2); }
:lang(th) .facts small { text-transform: none; letter-spacing: 0; }
.kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.kv > div { background: var(--card); padding: 16px 18px; display: grid; gap: 4px; }
.kv small { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--fg3); }
:lang(th) .kv small { text-transform: none; letter-spacing: 0; }
.kv b { font-size: 16px; line-height: 1.35; }

/* schedule */
.sched { display: grid; }
.it2 { display: grid; grid-template-columns: 76px 1fr auto; gap: 18px; align-items: center; padding: 17px 0; border-bottom: 1px solid var(--line); }
.it2:first-child { border-top: 1px solid var(--line); }
.it2 .d b { display: block; font: 900 26px/1 var(--display); font-stretch: 125%; }
.it2 .d small { font-size: 11px; font-weight: 700; letter-spacing: .1em; color: var(--fg3); text-transform: uppercase; }
.it2 .t b { font-size: 16.5px; display: block; line-height: 1.3; }
.it2 .t small { font-size: 14px; color: var(--fg2); }
a.it2:hover .t b { color: var(--red); }
.k { font-size: 10.5px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; padding: 4px 9px; border: 1px solid var(--line2); color: var(--fg2); white-space: nowrap; }
:lang(th) .k { text-transform: none; letter-spacing: 0; }
.k.live { border-color: var(--red); color: #fff; background: var(--red); }
.k.g { border-color: var(--green); color: var(--green); }
.s-dark .k.g, .s-graphite .k.g { color: var(--green-ink); }

/* rails */
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 1fr); gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: thin; }
.rail > * { scroll-snap-align: start; }
.reel { aspect-ratio: 9 / 16; position: relative; overflow: hidden; background: var(--k3); color: #fff; }
.reel img { width: 100%; height: 100%; object-fit: cover; }
.reel::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.85) 8%, transparent 55%); }
.reel .b { position: absolute; left: 10px; top: 10px; z-index: 2; font-size: 10px; font-weight: 900; letter-spacing: .1em; padding: 3px 7px; background: var(--red); color: #fff; text-transform: uppercase; }
.reel .b.n { background: var(--white); color: var(--ink); }
.reel p { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 2; font-size: 14px; font-weight: 700; line-height: 1.3; }
.reels { grid-auto-columns: 184px; }

/* people */
.person { background: var(--card); display: grid; grid-template-rows: auto 1fr; color: var(--fg); overflow: hidden; }
.person .m { aspect-ratio: 4 / 5; overflow: hidden; background: var(--k3); position: relative; }
.person .m img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transition: transform .5s; }
.person:hover .m img { transform: scale(1.04); }
.person .m .rl { position: absolute; left: 12px; top: 12px; font-size: 10.5px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; padding: 4px 9px; background: var(--c, var(--red)); color: #fff; }
.person .b { padding: 16px 18px 18px; display: grid; gap: 4px; border-top: 3px solid var(--c, var(--red)); }
.person b { font: 900 18px/1.15 var(--display); font-stretch: 118%; text-transform: uppercase; }
:lang(th) .person b { text-transform: none; font-stretch: 100%; line-height: 1.35; }
.person small { font-size: 14px; color: var(--fg2); }

/* standings */
.stand-wrap { overflow-x: auto; border: 1px solid var(--line); background: var(--card); }
.stand { width: 100%; border-collapse: collapse; font-size: 15px; }
.stand th { text-align: left; font-size: 11px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--fg3); padding: 13px 16px; border-bottom: 1px solid var(--line); white-space: nowrap; }
:lang(th) .stand th { text-transform: none; letter-spacing: 0; }
.stand th.r, .stand td.num { text-align: right; }
.stand td { padding: 14px 16px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.stand tr:last-child td { border-bottom: 0; }
.stand .pos { font: 900 24px var(--display); font-stretch: 125%; width: 60px; }
.stand tbody tr:first-child .pos { color: var(--red); }
.stand .nm b { display: block; font-size: 15.5px; }
.stand .nm small { color: var(--fg3); font-size: 12.5px; }
.stand td.num { font: 800 18px var(--display); font-stretch: 118%; font-variant-numeric: tabular-nums; }

/* products */
.prod { background: var(--card); display: grid; grid-template-rows: auto 1fr; color: var(--fg); overflow: hidden; }
.prod .m { aspect-ratio: 1; background: #101215; position: relative; overflow: hidden; }
.prod .m img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.prod:hover .m img { transform: scale(1.05); }
.prod .m .ct { position: absolute; left: 12px; top: 12px; font-size: 10.5px; font-weight: 900; letter-spacing: .1em; padding: 4px 9px; background: var(--ink); color: #fff; border-left: 3px solid var(--red); text-transform: uppercase; }
.prod .b { padding: 16px 18px 18px; display: grid; gap: 5px; align-content: start; }
.prod .fit { font-size: 11px; font-weight: 900; letter-spacing: .1em; color: var(--fg3); text-transform: uppercase; }
:lang(th) .prod .fit { text-transform: none; letter-spacing: 0; }
.prod b { font-size: 16px; line-height: 1.35; }
.prod .p { font: 900 21px var(--display); font-stretch: 118%; margin-top: 4px; }

/* forms */
.ff { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; background: #fff; color: var(--ink); box-shadow: 0 24px 50px -30px rgba(0,0,0,.6); }
.ff .f { padding: 12px 18px; border-right: 1px solid #e3e3df; display: grid; gap: 3px; min-width: 0; }
.ff label, .form label { font-size: 10.5px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: #6b7178; }
:lang(th) .ff label, :lang(th) .form label { text-transform: none; letter-spacing: 0; font-size: 12px; }
.ff select { border: 0; background: transparent; color: var(--ink); width: 100%; padding: 3px 0; font-weight: 700; font-size: 16px; }
.ff .go { padding: 10px; display: grid; }
.form { display: grid; gap: 16px; background: var(--card); padding: clamp(20px, 3vw, 32px); color: var(--fg); }
.form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form .fld { display: grid; gap: 6px; }
.form input, .form select, .form textarea { width: 100%; min-height: 50px; padding: 12px 14px; font-size: 16px; color: var(--ink); background: #fff; border: 1px solid #cfd2d6; border-radius: 0; }
.form textarea { min-height: 110px; resize: vertical; }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--red); box-shadow: inset 3px 0 0 var(--red); }
.form .check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--fg2); }
.form .check input { width: 20px; min-height: 20px; margin-top: 2px; accent-color: var(--red); }
.form .ok { display: none; padding: 14px 16px; background: #e8f5ee; color: #14532d; font-weight: 700; }
.form.sent .ok { display: block; }

/* chips */
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; }
.chip { font: 700 13px var(--body); letter-spacing: .06em; text-transform: uppercase; padding: 9px 16px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line2); color: var(--fg2); background: none; border: 0; cursor: pointer; }
:lang(th) .chip { text-transform: none; letter-spacing: 0; }
.chip.on { background: var(--fg); color: var(--bg); box-shadow: none; }

/* prose (legal, stories) */
.prose { max-width: 72ch; font-size: 17px; line-height: 1.75; color: var(--fg); }
.prose h2 { font: 800 26px/1.15 var(--display); font-stretch: 118%; text-transform: uppercase; margin: 40px 0 12px; }
:lang(th) .prose h2 { text-transform: none; font-stretch: 100%; line-height: 1.35; }
.prose h3 { font-size: 18px; margin: 26px 0 8px; }
.prose p, .prose ul, .prose ol { margin: 0 0 16px; color: var(--fg2); }
.prose li { margin-bottom: 8px; }
.prose a { color: var(--red); text-decoration: underline; text-underline-offset: 3px; }
.prose blockquote { margin: 28px 0; padding: 4px 0 4px 22px; border-left: 4px solid var(--red); font: italic 700 22px/1.4 var(--body); color: var(--fg); }
.toc { position: sticky; top: calc(var(--nav-h) + 20px); display: grid; gap: 8px; align-content: start; font-size: 14px; }
.toc a { color: var(--fg2); padding: 6px 0 6px 14px; border-left: 2px solid var(--line); }
.toc a:hover { color: var(--fg); border-left-color: var(--red); }
.docgrid { display: grid; grid-template-columns: 240px 1fr; gap: 48px; }

/* faq */
details.q { border-bottom: 1px solid var(--line); }
details.q summary { list-style: none; cursor: pointer; padding: 18px 40px 18px 0; font-weight: 700; font-size: 17px; position: relative; }
details.q summary::-webkit-details-marker { display: none; }
details.q summary::after { content: '+'; position: absolute; right: 6px; top: 12px; font: 400 28px var(--body); color: var(--red); }
details.q[open] summary::after { content: '−'; }
details.q p { padding: 0 0 18px; color: var(--fg2); max-width: 70ch; }

/* closing / promo */
.closing .w { display: grid; gap: 18px; justify-items: start; }
.closing h2 { font-size: clamp(32px, 4.6vw, 66px); max-width: 18ch; }
.closing p { color: var(--fg2); max-width: 56ch; }
.ctas { display: flex; gap: 10px; flex-wrap: wrap; }
.promo .w { display: grid; grid-template-columns: auto 1fr auto; gap: 28px; align-items: center; }
.promo .big { font: italic 900 clamp(56px, 7vw, 104px)/.85 var(--display); font-stretch: 125%; }
.promo h3 { font: 800 clamp(20px, 2vw, 28px)/1.15 var(--display); font-stretch: 118%; text-transform: uppercase; }
:lang(th) .promo h3 { text-transform: none; font-stretch: 100%; line-height: 1.35; }

/* garage dashboard */
.bike { display: grid; grid-template-columns: 1.1fr 1fr; gap: 0; background: var(--card); overflow: hidden; }
.bike .m { min-height: 300px; position: relative; }
.bike .m img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bike .b { padding: 28px; display: grid; gap: 16px; align-content: start; }
.meter { height: 6px; background: var(--line); }
.meter i { display: block; height: 100%; background: var(--red); }

/* pager + footer */
.pager { border-top: 1px solid rgba(255,255,255,.12); background: var(--k1); color: #f5f6f7; }
.pager .w { display: grid; grid-template-columns: 1fr 1fr; }
.pager a { padding: 26px 0; display: grid; gap: 6px; align-content: start; }
.pager a + a, .pager span + a { text-align: right; justify-items: end; border-left: 1px solid rgba(255,255,255,.12); padding-left: 20px; }
.pager small { font-size: 11px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: #ff5a5f; }
:lang(th) .pager small { text-transform: none; letter-spacing: 0; }
.pager b { font: 800 22px/1.1 var(--display); font-stretch: 118%; text-transform: uppercase; }
:lang(th) .pager b { text-transform: none; font-stretch: 100%; line-height: 1.3; }
.swipehint { display: none; }
footer { background: var(--k0); border-top: 1px solid rgba(255,255,255,.12); color: #f5f6f7; }
footer .w { padding-block: 48px 40px; display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 28px; }
footer h6 { margin: 0 0 12px; font-size: 11px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: rgba(245,246,247,.5); }
:lang(th) footer h6 { text-transform: none; letter-spacing: 0; font-size: 12.5px; }
footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: 14px; color: rgba(245,246,247,.74); }
footer a:hover { color: #fff; }
footer .legal { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 13px; color: rgba(245,246,247,.5); border-top: 1px solid rgba(255,255,255,.1); padding-top: 18px; }
.partners { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.partners span { border: 1px solid rgba(255,255,255,.28); padding: 5px 12px; font: 800 12px var(--display); font-stretch: 118%; text-transform: uppercase; }
.tabbar { display: none; }

/* ---------- responsive ---------- */
@media (min-width: 1800px) { :root { --maxw: 1560px; } .hero { height: min(80vh, 980px); } }
@media (max-width: 1199px) {
  .links { display: none; }
  .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  footer .w { grid-template-columns: 1fr 1fr 1fr; }
  .docgrid { grid-template-columns: 1fr; }
  .toc { position: static; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
}
@media (max-width: 904px) {
  .ev .w { grid-template-columns: 1fr auto; }
  .ev .next { display: none; }
  .g3 { grid-template-columns: 1fr 1fr; }
  .g3 > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .split, .split.rev, .bike { grid-template-columns: 1fr; }
  .track { grid-template-columns: 1fr 1fr; row-gap: 22px; }
  .ff { grid-template-columns: 1fr 1fr; }
  .ff .go { grid-column: 1 / -1; }
  .sh .no { font-size: 48px; }
  .nav .acts .txt { display: none; }
  .promo .w { grid-template-columns: 1fr; gap: 16px; }
  .ic { min-height: 380px; }
}
@media (max-width: 600px) {
  body { font-size: 15.5px; padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px)); }
  .util { display: none; }
  :root { --nav-h: 56px; }
  .nav .w { gap: 6px; }
  .logo .tx { font-size: 16px; }
  .hero { height: max(500px, calc(100svh - 56px - 54px - 66px)); }
  .slide .copy { bottom: 66px; }
  .slide h1 { margin-bottom: 18px; }
  .slide p { margin-bottom: 20px; }
  .ind { bottom: 24px; }
  .ind .w { gap: 6px; }
  .ind button { font-size: 0; gap: 0; }
  .g2, .g3, .g4, .ff, .form .row2 { grid-template-columns: 1fr; }
  .g3 > :last-child:nth-child(odd) { grid-column: auto; }
  .g4.keep2 { grid-template-columns: 1fr 1fr; }
  .ic { min-height: 340px; }
  .ic .num { font-size: 84px; }
  .sh, .sh.plain { grid-template-columns: 1fr; gap: 12px; margin-bottom: 24px; }
  .sh .no { font-size: 34px; line-height: 1; margin-bottom: -4px; }
  .sh > .more { justify-self: start; }
  .sh > span:empty { display: none; }
  .facts { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 12px 22px; }
  .facts b { font-size: 27px; }
  .facts small { font-size: 10.5px; }
  .track { grid-template-columns: 1fr 1fr; gap: 0 14px; border-top: 0; }
  .track > div { padding: 14px 0 16px; border-top: 1px solid var(--line); gap: 4px; }
  .track > div::before { width: 28px; }
  .track h4 { font-size: 16px; }
  .track p { font-size: 14px; line-height: 1.45; }
  .it2 { grid-template-columns: 60px 1fr; }
  .it2 .k { grid-column: 2; justify-self: start; }
  .nrow { grid-template-columns: 44px 1fr; }
  .nrow .bar { display: none; }
  .panel { padding: 22px; }
  .pager b { font-size: 17px; }
  .swipehint { display: block; text-align: center; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(245,246,247,.45); padding: 0 0 14px; }
  footer .w { grid-template-columns: 1fr 1fr; }
  footer .w > div:first-child { grid-column: 1 / -1; }
  .tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: rgba(5,6,7,.98); border-top: 1px solid rgba(255,255,255,.12); padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px)); view-transition-name: tabbar; color: #f5f6f7; }
  .tabbar a { display: grid; justify-items: center; gap: 3px; font-size: 10.5px; font-weight: 700; color: rgba(245,246,247,.55); padding: 4px 0; position: relative; }
  .tabbar a svg { width: 22px; height: 22px; }
  .tabbar a[aria-current="page"] { color: #fff; }
  .tabbar a[aria-current="page"]::before { content: ''; position: absolute; top: -7px; left: 26%; right: 26%; height: 3px; background: var(--red); }
}
@media (max-width: 600px) {
  .swipe-m { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84%; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut); scroll-padding-inline: var(--gut); padding-bottom: 6px; scrollbar-width: none; }
  .swipe-m::-webkit-scrollbar { display: none; }
  .swipe-m > * { scroll-snap-align: start; min-width: 0; }
  .swipe-m > :last-child:nth-child(odd) { grid-column: auto; }
  .swipe-m.sq { grid-auto-columns: 70%; }
}
@media (max-width: 380px) { .pill { padding: 0 18px; } .menu .ft { grid-template-columns: 1fr; } }
@media (max-height: 520px) and (orientation: landscape) {
  .util, .ev { display: none; }
  .hero { height: 100svh; min-height: 300px; }
  .slide .copy { bottom: 40px; }
  .slide h1 { font-size: clamp(26px, 4.6vw, 46px); max-width: 22ch; margin-bottom: 14px; }
  .slide p { display: none; }
  .tag { margin-bottom: 10px; }
  .ind { bottom: 12px; }
  .ind button { font-size: 0; gap: 0; }
  .phead { min-height: 260px; }
  .tabbar { display: none; }
  body { padding-bottom: 0; }
  .ic { min-height: 300px; }
}
@media (min-aspect-ratio: 21/9) and (min-width: 1200px) { .hero { height: 76vh; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .mw > span { transform: none; }
  .hl::after { transform: scaleX(1); }
  @view-transition { navigation: none; }
}