/* Vision Loss Empathy Kit — standalone project, in the annygator portfolio style.
   Colours/type are the portfolio's: #050309 / #000 backgrounds, #f9f4ff text, #b76cff accent,
   #e01ffd → #1c19d7 gradient, cyan hairline, Chakra Petch / Inter / Share Tech Mono (same as the portfolio). */
:root {
  color-scheme: dark;
  --bg:#050309; --bg2:#000; --text:#f9f4ff; --muted:rgba(245,241,249,.72); --subtle:rgba(245,241,249,.62);
  --accent:#b76cff; --accent-hi:#c98cff; --accent-soft:#cda8ff; --eyebrow:#dbb8ff; --focus:#d0a7ff;
  --pink:#e01ffd; --blue:#1c19d7; --hair:rgba(255,255,255,.14); --cyan:rgba(0,229,255,.15);
  --grad:linear-gradient(90deg,#e01ffd 0%,#1c19d7 100%);
  font-family:'Inter',sans-serif; font-synthesis:none; background:var(--bg); color:var(--text);
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-height:100vh; background:var(--bg); overflow-x:hidden; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
button { font:inherit; color:inherit; }
a, button { -webkit-tap-highlight-color:transparent; }
:focus-visible { outline:2px solid var(--focus); outline-offset:3px; border-radius:6px; }
main { outline:none; position:relative; z-index:1; }
.ek-glow { position:fixed; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(circle at 88% 14%,rgba(42,63,198,.18),transparent 34%),radial-gradient(circle at 14% 78%,rgba(190,40,207,.13),transparent 36%); }

/* bar */
 .ek-link:hover::after, .ek-link.is-on::after { transform:scaleX(1); }
/* shared type */
.ek-kicker { font-size:12px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); }
.ek-eyebrow { font-size:12px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--eyebrow); }
h1, h2, h3 { margin:0; font-weight:700; letter-spacing:-.045em; line-height:1; }
.ek-grad { background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.ek-wrap { width:min(1180px,92%); margin:0 auto; }
.ek-page { animation:ek-in .55s cubic-bezier(.2,.8,.2,1) both; }
@keyframes ek-in { from { opacity:0; transform:translateY(14px); } }

/* landing */
.ek-hero { min-height:100svh; display:grid; align-content:center; justify-items:start; padding:130px 4% 90px; position:relative; }
.ek-hero__in { width:min(1180px,100%); margin:0 auto; }
.ek-hero h1 { font-size:clamp(54px,9.4vw,150px); line-height:.92; margin:20px 0 28px; text-transform:uppercase; }
.ek-hero h1 .ek-focus { display:inline-block; animation:ek-focus 7s ease-in-out infinite; }
@keyframes ek-focus { 0%,38% { filter:blur(0); } 56%,78% { filter:blur(9px); opacity:.55; } 100% { filter:blur(0); } }
.ek-hero p { max-width:560px; margin:0 0 14px; font-size:clamp(16px,1.5vw,20px); line-height:1.6; color:var(--muted); }
.ek-hero .ek-sub { color:var(--eyebrow); font-weight:500; letter-spacing:.02em; }
.ek-cta { display:flex; flex-wrap:wrap; gap:16px; margin-top:34px; }
.ek-scroll { position:absolute; left:4%; bottom:34px; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--subtle); }

/* hub */
.ek-hub { padding:150px 0 40px; }
.ek-hub h1 { font-size:clamp(48px,6.2vw,88px); line-height:.96; margin:14px 0 22px; }
.ek-lede { max-width:620px; font-size:18px; line-height:1.65; color:var(--muted); margin:0; }
.ek-note { margin-top:18px; max-width:620px; font-size:14px; line-height:1.6; color:var(--subtle); border-left:2px solid var(--accent); padding-left:14px; }
.ek-list { list-style:none; margin:64px 0 0; padding:0; border-top:1px solid var(--hair); }
.ek-row { position:relative; display:grid; grid-template-columns:90px 1.1fr 1.4fr auto; gap:24px; align-items:center; padding:34px 6px; border-bottom:1px solid var(--hair); transition:padding .35s cubic-bezier(.2,.8,.2,1),background .3s; }
.ek-row::before { content:''; position:absolute; inset:0; background:linear-gradient(90deg,rgba(224,31,253,.10),rgba(28,25,215,.10)); opacity:0; transition:opacity .3s; z-index:-1; }
.ek-row:hover, .ek-row:focus-visible { padding-left:24px; } .ek-row:hover::before, .ek-row:focus-visible::before { opacity:1; }
.ek-row__n { font-size:15px; font-weight:600; letter-spacing:.14em; color:var(--accent); }
.ek-row h3 { font-size:clamp(28px,3vw,42px); }
.ek-row h3 small { display:block; margin-top:8px; font-size:12px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--eyebrow); }
.ek-row p { margin:0; font-size:16px; line-height:1.55; color:var(--subtle); }
.ek-chip { font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; padding:8px 14px; border:1px solid rgba(183,108,255,.45); border-radius:99px; color:var(--accent-soft); white-space:nowrap; }
.ek-row__go { display:inline-block; margin-left:12px; transition:transform .3s; } .ek-row:hover .ek-row__go { transform:translateX(6px); }

/* how it works */
.ek-how { padding:110px 0 60px; }
.ek-how h2 { font-size:clamp(40px,5vw,72px); margin:12px 0 40px; }
.ek-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.ek-step { padding:28px; border-radius:22px; background:linear-gradient(145deg,rgba(255,255,255,.05),rgba(255,255,255,.015)); border:1px solid var(--hair); }
.ek-step b { display:block; font-size:13px; letter-spacing:.16em; color:var(--accent); margin-bottom:16px; }
.ek-step h3 { font-size:28px; margin-bottom:12px; } .ek-step p { margin:0; line-height:1.6; color:var(--subtle); font-size:16px; }
.ek-quiet { margin-top:34px; padding:32px; border-radius:22px; border:1px solid rgba(183,108,255,.35); background:radial-gradient(circle at 10% 0,rgba(224,31,253,.14),transparent 55%),rgba(255,255,255,.02); }
.ek-quiet h3 { font-size:32px; margin-bottom:12px; } .ek-quiet p { margin:0; max-width:760px; line-height:1.65; color:var(--muted); font-size:17px; }

/* condition page */
.ek-cond { padding:112px 0 40px; }
.ek-crumb { display:flex; justify-content:space-between; align-items:center; margin-bottom:30px; font-size:13px; letter-spacing:.14em; text-transform:uppercase; }
.ek-crumb a { color:var(--accent-soft); } .ek-crumb a:hover { color:#fff; }
.ek-head { display:grid; grid-template-columns:1.2fr 1fr; gap:48px; align-items:end; margin-bottom:28px; }
.ek-head h1 { font-size:clamp(46px,6.2vw,96px); line-height:.94; margin:12px 0 0; }
.ek-head p { margin:0; font-size:clamp(17px,1.6vw,21px); line-height:1.55; color:var(--muted); }

.ek-sim { position:relative; border-radius:26px; padding:1px; background:linear-gradient(120deg,rgba(224,31,253,.6),rgba(28,25,215,.55)); box-shadow:0 30px 80px rgba(90,40,200,.18); }
.ek-sim__stage { position:relative; overflow:hidden; border-radius:25px; background:#000; aspect-ratio:16/9; max-height:62vh; min-height:300px; width:100%; touch-action:pan-y; cursor:crosshair; isolation:isolate; user-select:none; -webkit-user-select:none; }
.ek-layer { position:absolute; inset:0; will-change:filter,transform; }
.ek-layer svg { width:100%; height:100%; display:block; }
.ek-fx, .ek-fx2 { position:absolute; inset:0; pointer-events:none; }
.ek-fx2 { opacity:0; }
.ek-sim__tag { position:absolute; left:16px; top:14px; z-index:5; font-size:11px; letter-spacing:.16em; text-transform:uppercase; padding:7px 12px; border-radius:99px; background:rgba(5,3,9,.6); border:1px solid rgba(255,255,255,.18); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.ek-sim__hint { position:absolute; right:16px; top:14px; z-index:5; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.75); padding:7px 12px; border-radius:99px; background:rgba(5,3,9,.6); border:1px solid rgba(255,255,255,.18); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); transition:opacity .5s; }
.ek-sim__hint.is-gone { opacity:0; }

.ek-ctl { margin-top:26px; padding:24px 28px 20px; border-radius:22px; background:rgba(255,255,255,.035); border:1px solid var(--hair); }
.ek-ctl__top { display:flex; justify-content:space-between; align-items:baseline; gap:20px; margin-bottom:16px; flex-wrap:wrap; }
.ek-ctl__top b { font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--eyebrow); font-weight:600; }
.ek-ctl__val { font-size:clamp(28px,3vw,40px); font-weight:700; letter-spacing:-.04em; }
.ek-range { width:100%; -webkit-appearance:none; appearance:none; height:34px; background:transparent; cursor:pointer; margin:0; }
.ek-range::-webkit-slider-runnable-track { height:4px; border-radius:4px; background:linear-gradient(90deg,var(--pink),var(--blue)); }
.ek-range::-moz-range-track { height:4px; border-radius:4px; background:linear-gradient(90deg,var(--pink),var(--blue)); }
.ek-range::-webkit-slider-thumb { -webkit-appearance:none; width:26px; height:26px; margin-top:-11px; border-radius:50%; background:#fff; border:3px solid var(--accent); box-shadow:0 0 0 6px rgba(183,108,255,.18),0 0 18px var(--accent); transition:box-shadow .2s; }
.ek-range::-moz-range-thumb { width:20px; height:20px; border-radius:50%; background:#fff; border:3px solid var(--accent); box-shadow:0 0 0 6px rgba(183,108,255,.18),0 0 18px var(--accent); }
.ek-range:active::-webkit-slider-thumb { box-shadow:0 0 0 10px rgba(183,108,255,.22),0 0 24px var(--accent); }
.ek-ticks { display:flex; justify-content:space-between; margin-top:6px; font-size:12px; letter-spacing:.08em; color:var(--subtle); }
.ek-ticks span { cursor:pointer; padding:4px 2px; } .ek-ticks span.is-on { color:#fff; }

.ek-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:22px; margin-top:44px; }
.ek-card { padding:30px; border-radius:22px; background:linear-gradient(145deg,rgba(255,255,255,.05),rgba(255,255,255,.015)); border:1px solid var(--hair); }
.ek-card h2 { font-size:13px; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); font-weight:600; margin-bottom:18px; }
.ek-card p { margin:0; font-size:17px; line-height:1.65; color:var(--muted); }
.ek-card ul { list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.ek-card li { position:relative; padding-left:22px; font-size:16px; line-height:1.55; color:var(--muted); }
.ek-card li::before { content:''; position:absolute; left:0; top:.6em; width:8px; height:8px; border-radius:50%; background:var(--grad); }
.ek-card--wide { grid-column:1 / -1; }
.ek-voice { position:relative; background:radial-gradient(circle at 0 0,rgba(224,31,253,.16),transparent 55%),rgba(255,255,255,.02); border-color:rgba(183,108,255,.35); }
.ek-voice blockquote { margin:0; font-size:clamp(24px,2.6vw,38px); line-height:1.2; letter-spacing:-.03em; font-weight:600; max-width:880px; }
.ek-voice cite { display:block; margin-top:16px; font-style:normal; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--subtle); }
.ek-kit { display:grid; grid-template-columns:auto 1fr; gap:26px; align-items:center; }
.ek-kit__n { font-size:clamp(54px,6vw,86px); font-weight:700; letter-spacing:-.05em; }
.ek-kit p b { color:var(--text); font-weight:600; }
.ek-small { margin-top:34px; font-size:13px; line-height:1.6; color:var(--subtle); max-width:720px; }
.ek-pn { display:flex; justify-content:space-between; gap:20px; margin-top:54px; padding-top:30px; border-top:1px solid var(--hair); }
.ek-pn a { display:block; font-size:clamp(22px,2.6vw,36px); font-weight:700; letter-spacing:-.04em; transition:color .25s,transform .3s; }
.ek-pn a small { display:block; margin-bottom:8px; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); font-weight:600; }
.ek-pn a:hover { color:#dec7ff; } .ek-pn .nx { text-align:right; } .ek-pn .nx:hover { transform:translateX(6px); } .ek-pn .pv:hover { transform:translateX(-6px); }
.ek-foot { padding:50px 0 60px; text-align:center; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:rgba(245,241,249,.4); }

@media (max-width:900px) {
  .ek-row { grid-template-columns:56px 1fr; gap:12px 16px; } .ek-row p { grid-column:2; } .ek-row .ek-chip { grid-column:2; justify-self:start; }
  .ek-head { grid-template-columns:1fr; gap:20px; } .ek-grid, .ek-steps { grid-template-columns:1fr; }
  .ek-kit { grid-template-columns:1fr; gap:8px; }
}
@media (max-width:700px) {
  .ek-bar { grid-template-columns:1fr auto; padding:16px 4%; gap:8px 16px; } .ek-nav { grid-column:1/-1; grid-row:2; justify-content:center; gap:28px; }
  .ek-link { font-size:13px; min-height:36px; padding:6px 3px; } .ek-word { font-size:23px; }
  .ek-hero { padding-top:150px; } .ek-hub { padding-top:170px; } .ek-cond { padding-top:160px; }
  .ek-ctl { padding:18px 16px 14px; } .ek-sim__hint { display:none; } .ek-sim__stage { aspect-ratio:4/3; }
  .ek-pn { flex-direction:column; } .ek-pn .nx { text-align:left; }
}
@media (prefers-reduced-motion:reduce) {
  .ek-page, .ek-hero h1 .ek-focus,  html { scroll-behavior:auto; }
  .ek-row, }

/* all conditions on one page */
.ek-sec { padding:90px 0 10px; border-top:1px solid var(--hair); margin-top:70px; scroll-margin-top:130px; }
.ek-sec .ek-head h2 { font-size:clamp(46px,6.2vw,96px); line-height:.94; margin:12px 0 14px; }
.ek-card h3 { font-size:13px; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); font-weight:600; margin-bottom:18px; }
.ek-hub { padding-bottom:20px; }
@media (max-width:700px) { .ek-jump { top:112px; } .ek-sec { scroll-margin-top:170px; } }

/* ===== Portfolio typography: Chakra Petch (display) · Inter (body) · Share Tech Mono (labels, buttons) ===== */
:root { --display:'Chakra Petch',sans-serif; --body:'Inter',sans-serif; --mono:'IBM Plex Sans Condensed', sans-serif;}
body, p, li { font-family:var(--body); }
h1, h2, h3, .ek-word, .ek-ctl__val, .ek-voice blockquote { font-family:var(--display); letter-spacing:-.035em; }
.ek-hero h1, .ek-hub h1, .ek-sec .ek-head h2 { font-weight:700; letter-spacing:-.035em; }
.ek-voice blockquote { font-weight:600; letter-spacing:-.02em; }
.ek-kicker, .ek-eyebrow { font-size:14px; letter-spacing:.12em; }
.ek-card h3, .ek-ctl__top b, .ek-voice cite { font-size:13px; letter-spacing:.14em; }
.ek-ticks { font-size:13px; }
.ek-note, .ek-small { font-family:var(--body); }

/* CTA: the portfolio's chamfered neon-outline button (dot + label, dot slides across on hover, ripple on click) */
.ek-btn { position:relative; display:inline-grid; place-items:center; min-width:208px; height:50px; padding:0 26px; border:0; background:transparent; color:#faf7ff; cursor:pointer; text-decoration:none; white-space:nowrap;
  font-family:var(--mono); font-size:16px;  letter-spacing:.055em; text-transform:uppercase; transition:transform .15s ease-out; -webkit-tap-highlight-color:transparent; font-weight: 400;}
.ek-btn:active { transform:scale(.97); }
.ek-btn__o { position:absolute; z-index:0; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
.ek-btn__o path { fill:none; stroke:#b76cff; stroke-width:1.5; vector-effect:non-scaling-stroke; stroke-linejoin:round;
  filter:drop-shadow(0 0 3px rgba(183,108,255,.85)) drop-shadow(0 0 8px rgba(139,66,255,.35)); transition:stroke .25s ease,filter .25s ease,fill .25s ease; }
.ek-btn:hover .ek-btn__o path, .ek-btn:focus-visible .ek-btn__o path { stroke:#c98cff; filter:drop-shadow(0 0 4px rgba(201,140,255,.95)) drop-shadow(0 0 11px rgba(139,66,255,.48)); }
.ek-btn__c { position:relative; z-index:2; display:inline-flex; align-items:center; justify-content:center; }
.ek-btn__l { margin-left:16px; transition:transform .46s cubic-bezier(.22,1,.36,1); }
.ek-btn__dot { position:absolute; left:0; top:50%; width:9px; height:9px; margin-top:-4.5px; border-radius:50%; background:#bd77ff;
  box-shadow:0 0 5px #d7a5ff,0 0 13px rgba(179,102,255,.9); animation:ek-blink 1.5s ease-in-out infinite; transition:left .46s cubic-bezier(.22,1,.36,1); }
.ek-btn:hover .ek-btn__dot, .ek-btn:focus-visible .ek-btn__dot { left:calc(100% - 9px); }
.ek-btn:hover .ek-btn__l, .ek-btn:focus-visible .ek-btn__l { transform:translateX(-16px); }
.ek-btn__r { position:absolute; z-index:3; left:var(--ripple-x,50%); top:var(--ripple-y,50%); width:20px; height:20px; margin:-10px; border:1px solid #d7a5ff; border-radius:50%; opacity:0; pointer-events:none; }
.ek-btn.is-clicked .ek-btn__r { animation:ek-ripple .6s ease-out; }
@keyframes ek-blink { 0%,100% { opacity:1; } 50% { opacity:.15; } }
@keyframes ek-ripple { 0% { transform:scale(.2); opacity:.8; } 100% { transform:scale(18); opacity:0; } }
.ek-btn--lg { min-width:260px; height:58px; font-size:18px; }
.ek-btn--sm { min-width:0; height:44px; padding:0 22px; font-size:14px; }
.ek-btn--sm .ek-btn__l { margin-left:0; } .ek-btn--sm .ek-btn__dot { display:none; }
.ek-btn--sm:hover .ek-btn__l { transform:none; }
.ek-btn--sm b { font-weight:400; color:var(--accent); margin-right:10px; }
.ek-btn.is-on .ek-btn__o path { stroke:#e0c3ff; fill:rgba(183,108,255,.16); }
.ek-sound { justify-self:end; min-width:168px; height:44px; font-size:14px; }
.ek-sound[aria-pressed="false"] .ek-btn__dot { opacity:.4; animation:none; }
.ek-cta { display:flex; margin-top:34px; }
@media (max-width:700px) { .ek-btn { height:46px; min-width:170px; font-size:14px; } .ek-btn--lg { min-width:220px; height:52px; font-size:16px; } .ek-sound { min-width:130px; height:40px; } }
@media (prefers-reduced-motion:reduce) { .ek-btn__dot { animation:none; } .ek-btn__l, .ek-btn__dot { transition:none; } }

/* ===== v7: portfolio masthead, portfolio type scale, carousel, how-it-works + gallery on one page ===== */
.masthead { position:fixed; z-index:90; top:14px; left:2.5%; right:2.5%; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:32px; padding:10px 2%; min-height:72px;
  background:rgba(0,0,0,.18); border:1px solid rgba(0,229,255,.15); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); transition:background .3s ease,box-shadow .3s ease,border-color .3s ease; }
.masthead.is-floating { background:rgba(5,3,9,.72); border-color:rgba(0,229,255,.22); box-shadow:0 12px 32px rgba(0,0,0,.45),0 0 0 1px rgba(183,108,255,.06); }
.wordmark { justify-self:start; color:#fff; font-family:var(--display); font-size:30px; font-weight:700; line-height:1; letter-spacing:-.035em; transition:letter-spacing .25s,color .25s,transform .2s; }
.wordmark:hover { color:#e0c9ff; } .wordmark:active { transform:scale(.96); }
.main-nav { display:flex; align-items:center; gap:48px; }
.nav-link { position:relative; border:0; background:transparent; padding:16px 0 12px; min-height:64px; font-family:var(--mono); font-size:20px;  font-synthesis:weight; line-height:1; letter-spacing:.08em; text-transform:uppercase; color:#faf7ff; cursor:pointer; transition:color .25s,transform .2s; font-weight: 400;}
.nav-link span { display:inline-block; transition:transform .3s cubic-bezier(.2,.8,.2,1); }
.nav-link::after { content:''; position:absolute; bottom:5px; height:1px; left:3px; right:3px; background:#cda8ff; transform:scaleX(0); transition:transform .3s; }
.nav-link:hover { color:#dec7ff; } .nav-link:hover span { transform:translateY(-3px); } .nav-link:hover::after { transform:scaleX(1); transform-origin:center; }
.ek-sound { justify-self:end; }

/* portfolio type scale */
body, p, li { font-size:18px; line-height:1.6; }
.ek-hero h1, .ek-hub h1 { font-size:clamp(64px,5vw,72px); line-height:1.02; letter-spacing:-.035em; text-transform:none; margin:18px 0 22px; }
.ek-sec .ek-head h2, .ek-how h2, .ek-gal h2 { font-size:clamp(48px,6.2vw,88px); line-height:.96; letter-spacing:-.035em; margin:14px 0 14px; }
.ek-step h3, .ek-quiet h3, .ek-ctl__val, .ek-voice blockquote { font-size:clamp(28px,3vw,42px); line-height:1; letter-spacing:-.035em; font-weight:700; }
.ek-voice blockquote { line-height:1.12; }
.ek-eyebrow { font-size:18px; letter-spacing:.06em; line-height:1.5; }
.ek-kicker, .ek-card h3, .ek-ctl__top b, .ek-voice cite, .ek-ticks, .ek-sim__tag, .ek-sim__hint, .ek-step b { font-size:14px; letter-spacing:.06em; line-height:1.5; }
.ek-hero .ek-sub { font-family:var(--mono); font-size:18px; letter-spacing:.06em; text-transform:uppercase;  line-height:1.5; font-weight: 400;}
.ek-hero p, .ek-lede, .ek-head p, .ek-card p, .ek-card li, .ek-step p, .ek-quiet p { font-size:18px; line-height:1.6; letter-spacing:normal; }
.ek-btn { font-size:18px; min-width:228px; letter-spacing:.055em; }
.ek-btn--lg { font-size:18px; min-width:228px; height:50px; }
.ek-btn--sm { font-size:14px; min-width:0; height:44px; }
.ek-btn--ico { min-width:48px; padding:0 14px; } .ek-btn--ico svg { display:block; }
.ek-sound { height:50px; min-width:228px; font-size:18px; }
@media (max-width:1100px) { .ek-btn, .ek-btn--lg, .ek-sound { font-size:16px; min-width:208px; } .main-nav { gap:30px; } }
@media (max-width:700px) {
  .masthead { top:10px; grid-template-columns:1fr auto; gap:16px; padding:10px 4%; } .wordmark { font-size:25px; }
  .main-nav { grid-column:1 / -1; grid-row:2; justify-content:center; gap:30px; } .nav-link { font-size:16px; letter-spacing:.065em; min-height:44px; padding:8px 0; }
  .ek-btn, .ek-btn--lg, .ek-sound { font-size:13px; letter-spacing:.035em; min-width:178px; height:48px; } .ek-btn--sm { font-size:13px; min-width:0; height:44px; } .ek-btn--ico { min-width:48px; }
  .ek-hero h1, .ek-hub h1 { font-size:clamp(52px,13vw,64px); } .ek-sec .ek-head h2, .ek-how h2, .ek-gal h2 { font-size:clamp(46px,14vw,68px); }
  p, li, .ek-hero p, .ek-lede, .ek-head p, .ek-card p, .ek-card li, .ek-step p, .ek-quiet p { font-size:16px; } .ek-kicker, .ek-card h3 { font-size:13px; }
  .ek-hero { padding-top:190px; } .ek-hub { padding-top:190px; }
}

/* filter pills + carousel arrows: no background patch */
.ek-jump { display:flex; justify-content:space-between; align-items:center; gap:18px; flex-wrap:wrap; margin:40px 0 0; padding:0; background:none; }
.ek-jump__pills { display:flex; gap:12px; flex-wrap:wrap; }
.ek-jump__arrows { display:flex; align-items:center; gap:14px; }
.ek-count { font-family:var(--mono); font-size:14px; letter-spacing:.06em; color:var(--subtle); min-width:64px; text-align:center; font-weight: 400;}
.ek-car { margin-top:20px; }
.ek-car .ek-sec { display:none; border-top:0; margin-top:0; padding:60px 0 10px; }
.ek-car .ek-sec.is-active { display:block; animation:ek-slide-r .55s cubic-bezier(.22,1,.36,1) both; }
.ek-car.dir-l .ek-sec.is-active { animation-name:ek-slide-l; }
@keyframes ek-slide-r { from { opacity:0; transform:translateX(60px); } }
@keyframes ek-slide-l { from { opacity:0; transform:translateX(-60px); } }
.ek-carfoot { display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:44px; padding-top:30px; border-top:1px solid var(--hair); }

/* how it works + gallery */
.ek-how { padding:110px 0 0; margin-top:90px; border-top:1px solid var(--hair); }
.ek-how .ek-quiet { margin-bottom:0; }
.ek-gal { padding:110px 0 120px; margin-top:90px; border-top:1px solid var(--hair); }
.ek-gal__grid { column-count:3; column-gap:18px; margin-top:48px; }
.ek-shot { position:relative; display:block; width:100%; margin:0 0 18px; padding:0; break-inside:avoid; overflow:hidden; border:1px solid var(--hair); background:rgba(255,255,255,.03); cursor:zoom-in; }
.ek-shot:nth-child(4n+1) { aspect-ratio:4/5; } .ek-shot:nth-child(4n+2) { aspect-ratio:1; } .ek-shot:nth-child(4n+3) { aspect-ratio:4/3; } .ek-shot:nth-child(4n) { aspect-ratio:3/4; }
.ek-shot img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s cubic-bezier(.22,1,.36,1); }
.ek-shot:hover img { transform:scale(1.04); }
.ek-shot figcaption { position:absolute; left:0; right:0; bottom:0; padding:28px 16px 14px; font-family:var(--mono); font-size:14px; letter-spacing:.06em; text-transform:uppercase; color:#fff; background:linear-gradient(transparent,rgba(5,3,9,.85)); opacity:0; transition:opacity .3s; font-weight: 400;}
.ek-shot:hover figcaption, .ek-shot:focus-visible figcaption { opacity:1; }
.ek-shot.is-empty { cursor:default; display:grid; place-items:center; text-align:center; color:var(--subtle); border-style:dashed; border-color:rgba(183,108,255,.4); }
.ek-shot.is-empty img, .ek-shot.is-empty figcaption { display:none; }
.ek-shot__ph { display:none; font-family:var(--mono); font-size:14px; letter-spacing:.06em; text-transform:uppercase; line-height:1.6; padding:16px; font-weight: 400;}
.ek-shot__ph b { display:block; color:var(--accent); font-weight:400; margin-bottom:6px; }
.ek-shot.is-empty .ek-shot__ph { display:block; }
.ek-lb { position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:5vh 5vw; background:rgba(5,3,9,.92); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); cursor:zoom-out; animation:ek-in .3s both; }
.ek-lb img { max-width:100%; max-height:84vh; object-fit:contain; border:1px solid var(--hair); }
.ek-lb p { margin:14px 0 0; text-align:center; font-family:var(--mono); font-size:14px; letter-spacing:.06em; text-transform:uppercase; color:var(--subtle); font-weight: 400;}
@media (max-width:900px) { .ek-gal__grid { column-count:2; } }
@media (max-width:560px) { .ek-gal__grid { column-count:1; } }
@media (prefers-reduced-motion:reduce) { .ek-car .ek-sec.is-active { animation:none; } }

/* v11: pills stay pinned while scrolling through the conditions, release at the end of the block */
.ek-conds { position:relative; }
.ek-jump { position:sticky; top:96px; z-index:40; padding:10px 0; margin-top:30px; }
@media (max-width:700px) { .ek-jump { top:92px; } }

/* v13: pills back in normal flow; side arrows stick mid-screen until the end of the conditions block */
.ek-jump { position:static; padding:0; margin-top:40px; }
.ek-side { position:sticky; top:50vh; height:0; z-index:40; pointer-events:none; }
.ek-side__in { position:absolute; left:50%; top:0; width:100vw; margin-left:-50vw; height:0; }
.ek-side .ek-btn { position:absolute; top:0; transform:translateY(-50%); pointer-events:auto; }
.ek-side__l { left:10px; } .ek-side__r { right:10px; }
@media (max-width:700px) { .ek-side__l { left:2px; } .ek-side__r { right:2px; } }

/* v14: gallery as a continuous right-to-left single-line marquee */
.ek-gal__grid { display:none; }
.ek-marq { margin-top:48px; overflow:hidden; width:100vw; margin-left:calc(50% - 50vw); -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); }
.ek-marq__track { display:flex; width:max-content; animation:ek-marq 70s linear infinite; }
.ek-marq:hover .ek-marq__track, .ek-marq:focus-within .ek-marq__track { animation-play-state:paused; }
.ek-marq__grp { display:flex; gap:18px; padding-right:18px; }
.ek-marq .ek-shot { flex:none; width:clamp(220px,24vw,330px); aspect-ratio:3/4 !important; height:auto; margin:0; border-radius:18px; }
@keyframes ek-marq { from { transform:translateX(0); } to { transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce) { .ek-marq { overflow-x:auto; } .ek-marq__track { animation:none; } }

.ek-side__l { transition:opacity .3s, visibility .3s; }
.ek-side__l.is-hidden { opacity:0; visibility:hidden; pointer-events:none !important; }

.ek-mentor { margin:22px 0 0; font-size:14px; letter-spacing:.06em; color:var(--muted, rgba(235,225,255,.72)); }

/* Hero: text left, team photo right, same height as the text block */
.ek-hero__in { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(32px,4vw,72px); align-items:stretch; }
.ek-hero__txt { align-self:center; }
.ek-hero__photo { margin:0; position:relative; border-radius:18px; overflow:hidden; border:1px solid var(--hair); box-shadow:0 0 60px rgba(183,108,255,.18); min-height:420px; }
.ek-hero__photo img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 28%; display:block; }
@media (max-width:900px) { .ek-hero__in { grid-template-columns:1fr; } .ek-hero__photo { min-height:0; aspect-ratio:1/1; } }

/* Hero rhythm: equal gap between the sub line, the CTA and the mentor line */
.ek-hero__txt { --gap:40px; }
.ek-hero .ek-sub { margin-bottom:0; }
.ek-hero .ek-cta { margin-top:var(--gap); }
.ek-hero .ek-mentor { margin:var(--gap) 0 0; }

/* Hero eye photo: shown whole (no crop), edges fade into the black page */
.ek-hero__photo { border:0; border-radius:0; box-shadow:none; overflow:visible; min-height:0; display:flex; justify-content:center; align-items:center; background:none; }
.ek-hero__photo img { position:static; inset:auto; width:auto; max-width:100%; height:100%; max-height:min(86svh,760px); object-fit:contain; object-position:center;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22%,#000 78%,transparent 100%),linear-gradient(180deg,transparent 0,#000 16%,#000 84%,transparent 100%);
  -webkit-mask-composite:source-in; mask-image:linear-gradient(90deg,transparent 0,#000 22%,#000 78%,transparent 100%),linear-gradient(180deg,transparent 0,#000 16%,#000 84%,transparent 100%); mask-composite:intersect; }
@media (max-width:900px) { .ek-hero__photo { aspect-ratio:auto; } .ek-hero__photo img { height:auto; max-height:70svh; } }

/* Eye photo: zoomed in on the eye, softer radial fade into the black */
.ek-hero__photo img { transform:scale(1.22); transform-origin:50% 52%;
  -webkit-mask-image:radial-gradient(ellipse 54% 50% at 50% 52%,#000 28%,rgba(0,0,0,.6) 52%,transparent 100%); -webkit-mask-composite:source-over;
  mask-image:radial-gradient(ellipse 54% 50% at 50% 52%,#000 28%,rgba(0,0,0,.6) 52%,transparent 100%); mask-composite:add; }

/* Eye photo: stronger fade toward the bottom edge */
.ek-hero__photo img {
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 48%,rgba(0,0,0,.55) 68%,transparent 88%),radial-gradient(ellipse 54% 50% at 50% 52%,#000 28%,rgba(0,0,0,.6) 52%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(180deg,#000 0,#000 48%,rgba(0,0,0,.55) 68%,transparent 88%),radial-gradient(ellipse 54% 50% at 50% 52%,#000 28%,rgba(0,0,0,.6) 52%,transparent 100%);
  mask-composite:intersect; }

/* Hero centring: equal top/bottom padding so the content block sits on the page's vertical centre;
   text block and eye share that centre line (eye pupil sits at 52% of the photo, so nudge it up 2%) */
.ek-hero { padding-block:clamp(100px,12svh,140px); align-content:center; }
.ek-hero__in { align-items:center; }
.ek-hero__txt { align-self:center; }
.ek-hero__photo { align-self:center; }
.ek-hero__photo img { transform:translateY(-2%) scale(1.22); transform-origin:50% 52%; }
.ek-hero__photo img { transform:translateY(4%) scale(1.22); }

/* Headline: the gradient word is painted only inside its own box, which cut the descender of the "g".
   Give it room below (offset by a negative margin so the layout does not move) and open the line spacing a little. */
.ek-hero h1 { line-height:1.14; }
.ek-hero h1 .ek-focus { padding:.06em .04em .26em; margin:-.06em -.04em -.26em; }
.ek-hero__photo img { transform:translateY(9%) scale(1.22); }

/* 5 Oct: nav items are links back to the landing page now (were inert buttons) */
a.nav-link { display:inline-flex; align-items:center; text-decoration:none; }

/* smooth arrival from the landing page */
@keyframes pj-in{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:no-preference){body{animation:pj-in .45s ease-out backwards}}
@media (prefers-reduced-motion:no-preference){body{animation-duration:.3s}}