/* syafeeqzaki.com v4 · Syafeeq Zaki · Nexus (brand mode). Home (index.html) and About (about.html). */

@font-face{font-family:Poppins;font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/poppins-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:Poppins;font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/poppins-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:Poppins;font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/poppins-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:Poppins;font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/poppins-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:Poppins;font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/poppins-latin-800-normal.woff2) format("woff2")}

:root{--ground:#0D0E10;--ground-2:#0A0B0D;--surface:#15161A;--surface-2:#1B1C20;--line:#1C1D21;--line-strong:#222429;--control-line:#2A2C32;--ink:#FFFFFF;--ink-2:#E8E9EC;--muted:#8A8F98;--faint:#5A5E66;--lime:#D1FF02;--on-lime:#000;
--b-ground:#F4F4F1;--b-surface:#FFFFFF;--b-line:#D6D6CF;--b-ink:#0A0A0A;--b-ink-2:#2A2A2A;--b-muted:#6B6B6B;
--ease-out:cubic-bezier(.2,.8,.2,1);--ease-soft:cubic-bezier(.4,0,.2,1);--t-fast:180ms;--t-base:420ms;--t-slow:900ms;
color-scheme:dark;scroll-padding-top:88px}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ground)}
.nx{font-family:Poppins,"Helvetica Neue",Arial,sans-serif;background:var(--ground);color:var(--ink-2);-webkit-font-smoothing:antialiased;overflow-x:clip}
.nx *,.nx *::before,.nx *::after{box-sizing:border-box}
img,video{max-width:100%}
.wrap{position:relative;max-width:1312px;margin:0 auto;padding:0 clamp(16px,4.5vw,64px)}
.skip{position:absolute;left:16px;top:-60px;z-index:50;padding:10px 16px;border-radius:10px;background:var(--lime);color:var(--on-lime);font-weight:600;text-decoration:none}
.skip:focus{top:12px}
.grain{position:relative;isolation:isolate;background-color:var(--ground)}
.grain::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;opacity:.14;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='.33 .33 .33 0 0 .33 .33 .33 0 0 .33 .33 .33 0 0 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.sec{padding:clamp(72px,8vw,120px) 0}
.ruled{border-top:1px solid var(--line)}

/* type */
.eyebrow{margin:0 0 16px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.hero{margin:0;font-size:clamp(44px,5.2vw,72px);line-height:1.08;font-weight:800;letter-spacing:-.025em;color:var(--ink);text-wrap:balance}
.section{margin:0;font-size:clamp(32px,3.3vw,44px);line-height:1.1;font-weight:800;letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
.lead{margin:0;font-size:16px;line-height:1.6;color:var(--muted);max-width:56ch}
.label{font-size:13px;line-height:1.45;font-weight:600;color:var(--muted)}
.meta{font-size:13px;line-height:1.5;color:var(--muted)}
.mw-18{max-width:18ch}
.blk{display:block}
.mark{color:var(--on-lime);background:linear-gradient(var(--lime),var(--lime)) no-repeat 0 58%/100% 74%;padding:0 10px;border-radius:8px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.hero .mark{padding:0 10px .04em}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 24px;border-radius:9999px;font:600 15px/1 Poppins,sans-serif;border:1px solid transparent;text-decoration:none;cursor:pointer;position:relative;overflow:hidden;transition:transform var(--t-fast) var(--ease-out),background-color var(--t-fast),border-color var(--t-fast)}
.btn:active{transform:scale(.98)}
.btn--ink{background:var(--ink);color:var(--ground)}
.btn--lime{background:var(--lime);color:var(--on-lime)}
.btn--ghost{background:transparent;border-color:var(--faint);color:var(--ink-2)}
.btn--ghost:hover{border-color:var(--muted)}
.btn--sm{height:40px;padding:0 18px;font-size:14px}
.btn--ink::after,.btn--lime::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);transform:translateX(-120%)}
.btn--ink:hover::after,.btn--lime:hover::after{transform:translateX(120%);transition:transform 900ms var(--ease-soft)}
.btn .arr{transition:transform var(--t-fast) var(--ease-out)}
.btn:hover .arr{transform:translateX(3px)}
.btn:focus-visible,.card:focus-visible,.li:focus-visible,.nl:focus-visible,.menu-btn:focus-visible,.marq:focus-visible,.drop-menu a:focus-visible,.foot a:focus-visible,.hdr__logo:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* cards */
.card{display:flex;flex-direction:column;gap:12px;min-width:0;padding:22px 24px;background:var(--surface);border:1px solid var(--line-strong);border-radius:22px;color:var(--ink-2);text-decoration:none}
a.card{transition:transform 420ms var(--ease-out),border-color 420ms,box-shadow 420ms,background-color 240ms var(--ease-soft)}
a.card:hover{transform:translateY(-3px);box-shadow:0 0 0 1px rgba(209,255,2,.06),0 24px 60px -20px rgba(209,255,2,.10)}
a.card:hover,a.card:focus-visible,a.card:active{background:var(--lime);border-color:var(--lime);color:var(--on-lime)}
a.card:hover .card__t,a.card:hover .label,a.card:hover .meta,a.card:focus-visible .card__t,a.card:focus-visible .label,a.card:focus-visible .meta,a.card:active .card__t,a.card:active .label,a.card:active .meta{color:var(--on-lime)}
a.card:hover .ico,a.card:focus-visible .ico,a.card:active .ico{background:rgba(0,0,0,.12);color:var(--on-lime)}
.card__t{color:var(--ink);transition:color 240ms}
.num{font-size:40px;line-height:1.1;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--ink)}
.big{font-size:clamp(56px,6vw,88px);line-height:1;font-weight:800;letter-spacing:-.035em;font-variant-numeric:tabular-nums;color:var(--ink)}
#work .big{color:var(--lime)}
.ico{width:28px;height:28px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;flex:none;background:var(--surface-2);color:var(--ink-2);font-size:12px;font-weight:700;font-variant-numeric:tabular-nums}
.tag{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:9999px;font-size:12px;font-weight:600;white-space:nowrap;border:1px solid var(--control-line);color:var(--ink-2)}
.grid-240{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:16px}

/* inset lists */
.list-label{display:flex;justify-content:space-between;gap:16px;padding:0 6px 10px;font-size:13px;font-weight:600;color:var(--muted)}
.list-label__r{font-weight:400}
.list{background:var(--surface);border:1px solid var(--line-strong);border-radius:18px;overflow:hidden}
.li{display:flex;align-items:center;gap:14px;min-height:64px;padding:12px 16px;position:relative;color:var(--ink-2);text-decoration:none;transition:background-color 240ms var(--ease-soft),color 240ms}
.li+.li::before{content:"";position:absolute;left:58px;right:0;top:0;height:1px;background:var(--line-strong);transition:opacity var(--t-fast)}
.li__body{flex:1;min-width:0}
.li__t{font-size:15px;line-height:1.5;font-weight:600;color:var(--ink)}
.li__m{font-size:13px;line-height:1.5;color:var(--muted);margin-top:2px}
.li:hover,.li:focus-visible,.li:active{background:var(--lime);color:var(--on-lime)}
.li:hover .li__t,.li:hover .li__m,.li:focus-visible .li__t,.li:focus-visible .li__m,.li:active .li__t,.li:active .li__m{color:var(--on-lime)}
.li:hover .ico,.li:focus-visible .ico,.li:active .ico{background:rgba(0,0,0,.12);color:var(--on-lime)}
.li:hover .tag,.li:focus-visible .tag,.li:active .tag{border-color:rgba(0,0,0,.35);color:var(--on-lime)}
.li:hover::before,.li:hover+.li::before,.li:focus-visible::before,.li:focus-visible+.li::before{opacity:0}
.li:focus-visible{outline-offset:-2px}

/* header (06 glass after 40px) */
.hdr{position:sticky;top:0;z-index:30;border-bottom:1px solid transparent;transition:background-color 320ms var(--ease-soft),border-color 320ms var(--ease-soft),-webkit-backdrop-filter 320ms,backdrop-filter 320ms}
.hdr.is-glass,html:not(.js) .hdr{background:rgba(13,14,16,.72);-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);border-bottom-color:var(--line)}
.hdr__in{display:flex;align-items:center;gap:24px;height:72px}
.hdr__logo{display:block;margin-right:auto;line-height:0;border-radius:4px}
.hdr__logo img{height:30px;width:auto}
.nav{display:flex;align-items:center;gap:32px}
.nl{color:var(--ink-2);text-decoration:none;font:500 14px/1.4 Poppins,sans-serif;position:relative;padding:6px 0;background:none;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.nl::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform 320ms var(--ease-out)}
.nl:hover::after,.nl.is-active::after{transform:scaleX(1)}
.drop{position:relative}
.drop-btn svg{transition:transform var(--t-fast) var(--ease-out)}
.drop.open .drop-btn svg{transform:rotate(180deg)}
.drop-menu{position:absolute;top:calc(100% + 14px);right:-12px;min-width:260px;margin:0;padding:6px;list-style:none;background:var(--surface);border:1px solid var(--line-strong);border-radius:18px;box-shadow:0 24px 60px -20px rgba(0,0,0,.6);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity var(--t-fast),transform var(--t-fast) var(--ease-out),visibility 0s linear var(--t-fast)}
.drop.open .drop-menu{opacity:1;visibility:visible;transform:none;transition:opacity var(--t-fast),transform var(--t-fast) var(--ease-out)}
.drop-menu a{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:12px;color:var(--ink);text-decoration:none;font-size:14px;font-weight:600;transition:background-color var(--t-fast)}
.drop-menu a small{font-size:12px;font-weight:400;color:var(--muted)}
.drop-menu a:hover{background:var(--surface-2)}
.menu-btn{display:none;width:40px;height:40px;align-items:center;justify-content:center;border-radius:9999px;border:1px solid var(--control-line);background:transparent;color:var(--ink-2);cursor:pointer}
@media (max-width:820px){
  .hide-m{display:none!important}
  .hdr__in{gap:10px}
  .menu-btn{display:inline-flex}
  .nav{display:none;position:absolute;left:0;right:0;top:72px;flex-direction:column;align-items:stretch;gap:0;padding:8px clamp(16px,4.5vw,64px) 20px;background:var(--ground);border-bottom:1px solid var(--line);box-shadow:0 24px 48px -12px rgba(0,0,0,.7)}
  .nav.open{display:flex}
  /* menu open: header and menu go solid so nothing shows through */
  .hdr:has(.nav.open){background:var(--ground);-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom-color:var(--line)}
  .nav .nl{padding:14px 0;font-size:16px;border-bottom:1px solid var(--line)}
  .nav .nl::after{display:none}
  .drop-btn{width:100%;cursor:default;pointer-events:none}
  .drop-btn svg{display:none}
  .drop-menu{position:static;opacity:1;visibility:visible;transform:none;min-width:0;padding:4px 0 0;background:none;border:0;box-shadow:none}
  .drop-menu a{padding:10px 0}
}

/* hero */
.hero-sec{overflow:hidden}
.aura{position:absolute;width:720px;height:720px;right:-120px;top:-180px;border-radius:50%;background:radial-gradient(circle,rgba(209,255,2,.16),rgba(209,255,2,0) 62%);filter:blur(20px);animation:drift 26s var(--ease-soft) infinite alternate;pointer-events:none;z-index:-1}
.gridfield{--mx:72%;--my:40%;position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M12 8.5v7M8.5 12h7' stroke='%23FFFFFF' stroke-opacity='.10' stroke-width='1.2'/%3E%3C/svg%3E");-webkit-mask-image:radial-gradient(600px 420px at var(--mx) var(--my),#000,transparent 75%);mask-image:radial-gradient(600px 420px at var(--mx) var(--my),#000,transparent 75%);pointer-events:none;z-index:-1;animation:breathe 9s var(--ease-soft) infinite alternate}
.hero-sec.has-cursor .gridfield{animation:none;opacity:1}
.hero-sec.is-off .aura,.hero-sec.is-off .gridfield{animation-play-state:paused}
.hero-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr));gap:48px;align-items:center;padding-top:clamp(56px,7vw,96px);padding-bottom:clamp(48px,6vw,80px)}
.hero-lead{margin-top:24px}
.hero-ctas{display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:12px;margin-top:32px;max-width:100%}
@media (max-width:520px){.hero-ctas{display:grid;grid-auto-flow:row}}
.portrait{margin:0 0 0 auto;max-width:480px;border-radius:22px;overflow:hidden;border:1px solid var(--line-strong);background:#2A2A2A;aspect-ratio:3/4}
.portrait video,.portrait img{display:block;width:100%;height:100%;object-fit:cover}
.hero-still{display:none}
.proof{padding-bottom:clamp(56px,7vw,96px)}

/* clients marquee (09) */
.clients{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:28px 0}
.clients__in{display:flex;align-items:center;gap:32px}
.clients__label{flex:none}
.marq{flex:1;min-width:0;overflow:hidden;border-radius:4px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marq__row{display:flex;align-items:center;gap:56px;width:max-content;animation:marq 48s linear infinite}
.marq__row img{display:block;height:26px;width:auto;max-width:none;opacity:.55;transition:opacity var(--t-fast)}
.marq__row img.sil{filter:brightness(0) invert(1)}
.marq__row img:hover{opacity:1}
.marq:hover .marq__row,.marq:focus-within .marq__row,.marq.is-off .marq__row{animation-play-state:paused}
.marq__row span{font-size:18px;font-weight:700;letter-spacing:-.01em;color:var(--muted);white-space:nowrap}

/* bone section */
.bone{background:var(--b-ground);color:var(--b-ink-2)}
.bone.grain{background-color:var(--b-ground)}
.bone .section,.bone .hero{color:var(--b-ink)}
.bone .eyebrow,.bone .label,.bone .lead,.bone .meta{color:var(--b-muted)}
.duo{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:16px;margin-top:48px}
.bcard{background:var(--b-surface);border:1px solid var(--b-line);border-radius:22px;padding:28px;box-shadow:0 1px 2px rgba(0,0,0,.04),0 10px 30px rgba(0,0,0,.05)}
.bcard__l{margin:0 0 16px}
.bcard__f{margin:16px 0 0}
.strike{margin:0;font-size:22px;line-height:1.6;font-weight:600;color:var(--b-muted);text-decoration:line-through;text-decoration-thickness:2px}
.needs{margin:0;font-size:22px;line-height:1.6;font-weight:700;color:var(--b-ink)}
.bcard__teach{margin:16px 0 0;font-size:15px;font-weight:600;color:var(--b-ink)}
.statement{margin-top:clamp(64px,8vw,112px);max-width:20ch}
.statement--wide{max-width:none;text-wrap:wrap}
.statement--wide .mark{white-space:nowrap}
@media (max-width:860px){.statement--wide .br-d{display:none}.statement--wide{text-wrap:balance}.statement--wide .mark{white-space:normal}}

/* talks */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:56px;align-items:start}
.stick{position:sticky;top:104px}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.lists{display:flex;flex-direction:column;gap:28px}
@media (max-width:960px){.split{grid-template-columns:minmax(0,1fr)}.stick{position:static}}

/* training */
.training{padding-bottom:clamp(72px,8vw,120px)}
.training__fig{margin:0}
.training__cap{margin-top:12px}
.training__stats{margin-top:16px}
.img-slot{position:relative;overflow:hidden;border-radius:22px;border:1px solid var(--line-strong);background:var(--surface)}
.img-slot img{display:block;width:100%;height:100%;object-fit:cover}
.img-slot--training{aspect-ratio:2/1;min-height:260px;min-width:0;width:100%}
.img-slot--training img{object-position:center 40%;filter:saturate(.9) contrast(1.04)}
.img-slot--team{aspect-ratio:4/5;max-height:560px}

/* work */
.work__lead{margin-top:16px}
.work-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:16px;margin-top:48px}
.card--work{padding:28px;gap:16px}
.work__m{font-size:14px}

/* what I run */
.run__left{display:flex;flex-direction:column;gap:24px}
.biz-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:16px;align-self:end}
.card--biz{min-height:200px;justify-content:space-between}
.biz__head{display:flex;align-items:center;gap:12px}
.biz__go{margin-left:auto;display:inline-flex;color:var(--ink-2);transition:transform var(--t-fast) var(--ease-out),color var(--t-fast)}
a.card:hover .biz__go,a.card:focus-visible .biz__go{color:var(--on-lime);transform:translate(2px,-2px)}
a.card:hover .biz__go--in,a.card:focus-visible .biz__go--in{transform:translateX(3px)}
.biz__t{display:block;font-size:22px;line-height:1.35;font-weight:700;letter-spacing:-.012em}
.biz__m{margin:6px 0 0;font-size:14px}

/* about page */
.portrait--sq{aspect-ratio:1/1}
.about-lede{margin:24px 0 0;font-size:clamp(18px,1.6vw,21px);line-height:1.55;font-weight:500;color:var(--ink);max-width:40ch}
.about-body{margin-top:20px;max-width:56ch}
.about-body p{margin:0 0 14px;font-size:16px;line-height:1.65;color:var(--muted)}
.about-body strong{color:var(--ink-2);font-weight:600}
.about-body .meta{font-size:13px}
.tl{margin:0;padding:0;list-style:none}
.tl__row{display:flex;align-items:flex-start;gap:16px;padding:16px 20px;position:relative}
.tl__row+.tl__row::before{content:"";position:absolute;left:92px;right:0;top:0;height:1px;background:var(--line-strong)}
.tl__y{flex:none;width:56px;padding-top:1px;font-size:15px;line-height:1.5;font-weight:700;font-variant-numeric:tabular-nums;color:var(--lime)}
.tl .li__t{margin:0}
.tl .li__m{margin:2px 0 0}
.bcard__p{margin:0;font-size:17px;line-height:1.65;color:var(--b-ink-2)}
.biz-grid--4{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));margin-top:8px}
@media (max-width:520px){.biz-grid--4 .card--biz{min-height:150px}.tl__row{padding:14px 16px;gap:12px}.tl__row+.tl__row::before{left:16px}.tl__y{width:44px}}

/* booking (14) */
.book{padding:clamp(24px,4vw,48px);gap:32px;background:radial-gradient(80% 120% at 100% 0%,rgba(209,255,2,.07),transparent 55%),var(--surface)}
.book__lead{margin-top:12px}
.form{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:16px}
.form label{display:flex;flex-direction:column;gap:8px;min-width:0;font-size:13px;font-weight:600;color:var(--muted)}
/* iPhone Safari gives date boxes their own width; make it fit like the others */
input[type=date]{-webkit-appearance:none;appearance:none;display:block;min-width:0;max-width:100%}
input[type=date]::-webkit-date-and-time-value{text-align:left}
.form .full{grid-column:1/-1}
.form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
input,textarea{width:100%;min-height:48px;padding:12px 14px;border-radius:10px;border:1px solid var(--control-line);background:var(--ground);color:var(--ink);font:400 15px Poppins,sans-serif;transition:border-color var(--t-fast),box-shadow var(--t-fast)}
textarea{resize:vertical}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:1}
/* thank-you pop-up after a successful send */
.sent{width:min(440px,calc(100vw - 32px));padding:40px 36px 32px;border:1px solid var(--line-strong);border-radius:22px;background:var(--surface);color:var(--ink-2);box-shadow:0 30px 80px rgba(0,0,0,.6)}
.sent[open]{animation:sent-in 420ms var(--ease-out)}
.sent::backdrop{background:rgba(5,6,8,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.sent__ico{width:56px;height:56px;margin-bottom:24px;border-radius:9999px;background:var(--lime);color:var(--on-lime);display:grid;place-items:center;animation:pop 520ms var(--ease-out) 120ms both}
.sent__t{margin:0;font-size:32px;line-height:1.1;font-weight:800;letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
.sent__p{margin:12px 0 28px;font-size:16px;line-height:1.6;color:var(--muted)}
@keyframes sent-in{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
input:focus,textarea:focus{outline:none;border-color:var(--ink-2);box-shadow:0 0 0 4px rgba(255,255,255,.06)}
input:focus-visible,textarea:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.form__row{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.status{margin:0;font-size:14px;color:var(--ink-2);min-height:0}
.status:empty{display:none}
.send .spin,.send .tick{display:none}
.spin{width:16px;height:16px;border-radius:50%;border:2px solid rgba(0,0,0,.25);border-top-color:var(--on-lime);animation:spin 700ms linear infinite}
.send.is-sending .arr,.send.is-sent .arr{display:none}
.send.is-sending .spin{display:inline-block}
.send.is-sent .tick{display:inline-block;animation:pop 420ms var(--ease-out)}
.send[disabled]{cursor:progress}

/* footer */
.foot{border-top:1px solid var(--line)}
.foot__in{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:32px;padding-top:56px;padding-bottom:40px}
.foot__in img{width:200px;max-width:100%;height:auto;display:block}
.foot__r{display:flex;flex-direction:column;gap:10px}
.foot__note{margin:0;max-width:46ch}
.foot__links{margin:0;display:flex;flex-wrap:wrap;gap:8px 24px;font-size:14px}
.foot__links a{color:var(--ink-2);text-decoration:none;transition:color var(--t-fast)}
.foot__links a:hover{color:var(--lime)}

/* motion: entrances (01, 02, 03) */
.rise{opacity:0;transform:translateY(18px);filter:blur(8px);animation:rise 900ms var(--ease-out) forwards}
.rise--flat{filter:none}
.d1{animation-delay:.15s}.d2{animation-delay:.23s}.d3{animation-delay:.31s}.d4{animation-delay:.39s}.d5{animation-delay:.47s}.d6{animation-delay:.55s}.d7{animation-delay:.63s}.d8{animation-delay:.71s}.d9{animation-delay:.79s}.d10{animation-delay:.87s}
.sweep{background-size:0% 74%;color:var(--ink);animation:sweep 900ms var(--ease-out) 900ms forwards}
.wipe{clip-path:inset(0 100% 0 0);animation:wipe 1100ms var(--ease-out) 150ms forwards}

/* scroll reveal (07), statement sweep (03), image arrival (13): only when the script runs */
.js .reveal{opacity:0}
.js .reveal.in{animation:reveal 600ms var(--ease-out) var(--delay,0ms) both}
.js .sweep-view{background-size:0% 74%;transition:background-size 900ms var(--ease-out) 300ms}
.js .sweep-view.in{background-size:100% 74%}
.js .img-slot::before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.04) 50%,transparent 65%);background-size:250% 100%;animation:shimmer 1.6s var(--ease-soft) infinite}
.js .img-slot.is-loaded::before{display:none}
.js .img-slot .arrive{opacity:0;filter:blur(8px);transform:scale(1.02);transition:opacity 700ms var(--ease-out),filter 700ms var(--ease-out),transform 700ms var(--ease-out)}
.js .img-slot.is-loaded .arrive{opacity:1;filter:none;transform:none}
.js .img-slot--training.is-loaded .arrive{filter:saturate(.9) contrast(1.04)}

@keyframes rise{to{opacity:1;transform:none;filter:blur(0)}}
@keyframes reveal{from{opacity:0;transform:translateY(18px);filter:blur(8px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes sweep{to{background-size:100% 74%;color:var(--on-lime)}}
@keyframes wipe{to{clip-path:inset(0 0 0 0)}}
@keyframes drift{0%{transform:translate(0,0) scale(1)}100%{transform:translate(-90px,70px) scale(1.12)}}
@keyframes breathe{from{opacity:.55}to{opacity:1}}
@keyframes marq{to{transform:translateX(-50%)}}
@keyframes shimmer{0%{background-position:130% 0}100%{background-position:-30% 0}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}

/* reduced motion: everything shows at once, still image, no loops */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero-vid{display:none!important}
  .hero-still{display:block!important}
  .rise,.sweep,.wipe{animation:none!important;opacity:1;transform:none;filter:none;clip-path:none}
  .sweep{background-size:100% 74%;color:var(--on-lime)}
  .js .reveal{opacity:1}.js .reveal.in{animation:none}
  .js .sweep-view{background-size:100% 74%;transition:none}
  .js .img-slot .arrive{opacity:1;filter:none;transform:none;transition:none}
  .js .img-slot--training .arrive{filter:saturate(.9) contrast(1.04)}
  .js .img-slot::before{display:none}
  .aura,.gridfield,.marq__row{animation:none!important}
  .sent[open],.sent__ico{animation:none!important}
  .gridfield{opacity:.8}
  .marq{-webkit-mask-image:none;mask-image:none}
  .marq__row{width:auto;flex-wrap:wrap;gap:12px 32px}
  .marq__row .dup,.marq__row [aria-hidden="true"]{display:none}
  .hdr{transition:none}
  a.card:hover{transform:none;box-shadow:none}
  .btn--ink::after,.btn--lime::after{display:none}
  .spin{animation:none;border-color:var(--on-lime)}
  .send.is-sent .tick{animation:none}
}