/* Lynx Vision — home hero. Tokens live in site.css. */
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.stage *{position:absolute;margin:0}
.stage a{color:inherit;text-decoration:none}
.grp{inset:0}

/* every animated piece: rest state → `--from` state. Vars are reset per element so nested pieces never inherit a parent's move. */
.a{--from:none;--rest:none;--from-op:1;transform:var(--rest);transition:transform var(--dur) var(--spring) var(--d,0s),opacity var(--dur) var(--spring) var(--d,0s),clip-path var(--dur) var(--spring) var(--d,0s),height var(--dur) var(--spring) var(--d,0s)}
.grp[data-state="pre"] .a,.grp[data-state="out"] .a{transform:var(--from);opacity:var(--from-op)}
.grp[data-state="pre"] .a{transition:none}
.grp[data-state="out"] .a{transition-delay:var(--dx,0s)}
@media (prefers-reduced-motion:reduce){.a,.bgl{transition:none!important}}

/* background: ONE continuous video. Source file is un-mirrored; the design flips it (Figma relativeTransform -1). Stills underneath are only a fallback if the video can't load */
.bgl{inset:0;opacity:0;transition:opacity 1.1s ease}
.bgl.on{opacity:1}
.bgl img{inset:0;width:100%;height:100%;object-fit:cover}
.flip{transform:scaleX(-1)}
.bgv{inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .3s}
.bgv.ready{opacity:1}
.glow{left:-253.16px;top:-134.56px;width:627.16px;height:703.56px;filter:blur(100px);opacity:.4;background:linear-gradient(174.8deg,var(--brand-glow-a) 40.1%,var(--brand-glow-b) 84.5%)}


/* nav */
.stage a.logo{display:block;left:24px;top:22.5px;width:112px;height:24px;color:#fff}
.logo svg{inset:0;width:100%;height:100%;fill:currentColor;overflow:visible}
.logo svg *{position:static}
.links{left:50%;top:29px;translate:-50% 0;height:11px;display:flex;gap:60px;align-items:center;font-size:12px;line-height:.9;white-space:nowrap}
.links a{position:relative;font-weight:300}
.links a[aria-current]{font-weight:500}
.stage a.cta-sm{right:26.2px;top:13px;display:flex;gap:10px;align-items:center;padding:16px 24px;border-radius:12px;font:500 12px/.9 var(--font-body);white-space:nowrap;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);background:linear-gradient(72.5deg,rgba(255,255,255,.3) 4.6%,rgba(255,255,255,.054) 64.3%)}
.cta-sm>*,.cta>*{position:static}
.rim::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,0),rgba(255,255,255,.6) 50%,rgba(255,255,255,0));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.dots{display:block;width:5.8px;height:9.2px;fill:currentColor}

/* shared pieces */
.mask{overflow:hidden}
.card{width:168px;height:152px;border-radius:40px;overflow:hidden}
.grow{height:281px}
.grp[data-state="pre"] .grow,.grp[data-state="out"] .grow{height:128px}
/* Figma "Glass" effect (frost 31) — frosted backdrop + light rim */
.glass{background:var(--brand-glass);backdrop-filter:blur(15px) saturate(1.15);-webkit-backdrop-filter:blur(15px) saturate(1.15);box-shadow:inset 0 0 24px rgba(255,255,255,.14),0 10px 30px rgba(30,45,70,.08)}
.glass::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.25px;pointer-events:none;z-index:3;
  background:linear-gradient(140deg,rgba(255,255,255,.95),rgba(255,255,255,.12) 34%,rgba(255,255,255,.1) 64%,rgba(255,255,255,.7));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.dark{background:var(--brand-card)}
/* text that Figma sets to blend "Difference": lives in its own layer ABOVE the glass card so it blends with the video, exactly like the file */
.ink{width:168px;height:152px;mix-blend-mode:difference;color:#fff;pointer-events:none}
/* Lynx: scene 1 sits on a dark sky/water video, where Difference lands on mid-grey and the numbers vanish. Plain white there; scene 2 keeps Difference (dark on the white floor). */
#s1 .ink{mix-blend-mode:normal}
.num{font:400 40px/.9 var(--font-display);letter-spacing:-.4px;text-transform:uppercase;white-space:nowrap;font-feature-settings:"zero"}
.lbl{font:400 14px/1.3 var(--font-body);opacity:.6;white-space:nowrap}
.lbl.a{--from-op:.6}
.soft-ink{color:var(--brand-ink-soft)}
.wrap{display:flex;align-items:center;justify-content:center}
.wrap>.im{position:static;flex:none}
.im img{position:static;display:block;width:100%;height:100%;object-fit:cover}
.media{background:#fff}
.media img,.media video{inset:0;width:100%;height:100%;object-fit:cover}

/* scene 1 */
.headline{left:24px;top:144px;width:403.5px;font:400 80px/72px var(--font-display);letter-spacing:-.8px;text-transform:uppercase;font-feature-settings:"ss01","ss02","ss05"}
.headline .mask{position:relative;display:block;height:72px;margin-bottom:7.25px;white-space:nowrap}
.headline .mask.r{text-align:right}
.headline .mask span,.h2 .mask span{position:relative;display:block}
.sub{width:292.5px;font:400 20px/1.3 var(--font-body)}
.stage a.cta{left:81.5px;top:516.1px;display:flex;gap:13.7px;align-items:center;padding:21.95px 32.93px;border-radius:17px;background:#fff;color:var(--brand-cta-ink);font:500 18px/.9 var(--font-body);white-space:nowrap}
.cta .dots{width:7.97px;height:12.63px}
.vid{left:24px;top:618px;width:196px;height:169px;background:#fff;overflow:hidden;clip-path:inset(0 0 0 0 round 40px)}
.grp[data-state="pre"] .vid,.grp[data-state="out"] .vid{clip-path:inset(0 74px 0 74px round 40px)}
.tag{font:500 12px/11px var(--font-display);letter-spacing:1.8px;text-transform:uppercase;white-space:nowrap}
.title{font:500 32px/1.25 var(--font-display);text-transform:uppercase}
.dots3{left:136.19px;top:18.54px;width:11.12px;height:17.64px;fill:#fff;overflow:visible}

/* scene 2 */
.h2{left:24px;top:161px;width:273.5px;font:400 60px/54px var(--font-display);letter-spacing:-.6px;text-transform:uppercase;font-feature-settings:"ss01","ss02","ss05"}
.h2 .mask{position:relative;display:block;height:54px;white-space:nowrap}
.body20{font:400 20px/1.3 var(--font-body)}

/* scene 3 */
.tcard{width:225px;min-height:199px;padding:24px;border-radius:32px;display:flex;flex-direction:column;gap:20px}
.tcard>h3,.tcard>p{position:relative}
.tcard h3{font:500 24px/1.25 var(--font-display);text-transform:uppercase}
.tcard p{font:400 16px/1.3 var(--font-body)}
@supports (text-box:trim-both cap alphabetic){.tcard h3{text-box:trim-both cap alphabetic}}
@supports not (text-box:trim-both cap alphabetic){.tcard h3{margin:-6px 0 -7px}}
.vcard{width:225px;height:199px;border-radius:32px;overflow:hidden;background:var(--brand-glass)}

/* HEADLINE FONT — Instrument Serif (chosen by the client side). Sizes tuned so every text fits the theme's masks. */
.stage[data-font]:not([data-font="tektur"]) .num,.stage[data-font]:not([data-font="tektur"]) .headline,.stage[data-font]:not([data-font="tektur"]) .h2{font-feature-settings:normal}
.stage[data-font="instrument"]{--font-display:"Instrument Serif","Times New Roman",serif}
.stage[data-font="instrument"] .headline{font-size:92px;letter-spacing:0}
.stage[data-font="instrument"] .h2{font-size:66px;letter-spacing:0}
.stage[data-font="instrument"] .title{font-size:38px;line-height:1.02;letter-spacing:.5px}
.stage[data-font="instrument"] .tcard h3{font-size:29px;line-height:1.02}
.stage[data-font="instrument"] .num{font-size:42px}
.stage[data-font="instrument"] .tag{font-size:15px}

/* HEADLINE ALIGNMENT — theme default is staggered (right / left / right), built for long words. */
.stage[data-align="col"] .headline{left:81.5px}
.stage[data-align="col"] .headline .mask.r,.stage[data-align="edge"] .headline .mask.r{text-align:left}


/* SIZE: the stage widens on short, wide windows so the bottom cards are never cut off */
.hero{position:relative;width:100%;height:min(56.25vw,100svh);min-height:520px;overflow:hidden;background:var(--brand-bg)}
.stage{position:absolute;left:0;top:0;width:var(--sw,1440px);height:var(--sh,810px);--x:0px;transform-origin:0 0;transform:scale(var(--s,1));color:var(--brand-ink);direction:ltr;text-align:left;font-family:var(--font-body)}

/* CLICKS: each scene group fills the stage and sits over the nav, so only links on a showing group take the pointer */
.grp{pointer-events:none}
.grp a{pointer-events:auto}
.grp[data-state="pre"] a,.grp[data-state="out"] a{pointer-events:none}
.links a:hover{font-weight:500}
.links a::after{content:"";position:absolute;inset:-14px -16px}

/* PORTRAIT: same scenes and timing, repositioned. The site header replaces the stage nav. */
@media (max-width:900px){.hero{height:100svh;min-height:600px}}
.stage[data-mode="p"] #nav{display:none}
.stage[data-mode="p"] .glow{left:-300px}

.stage[data-mode="p"] .headline{left:20px!important;top:92px}
.stage[data-mode="p"] .s1-sub{left:20px!important;top:342px!important;width:320px!important;height:76px!important}
.stage[data-mode="p"] .sub{width:310px;font-size:18px}
.stage[data-mode="p"] a.cta{left:20px;top:430px;padding:20px 28px;font-size:17px}
.stage[data-mode="p"] .s1-tag,.stage[data-mode="p"] .s1-title,.stage[data-mode="p"] .vid{display:none}
.stage[data-mode="p"] .s1-cards{left:calc((var(--sw) - 496.5px)/2)!important;top:auto!important;bottom:16px;transform:scale(.74);transform-origin:50% 100%}
.stage[data-mode="p"] .lbl{font-size:16px}

.stage[data-mode="p"] .h2{left:20px;top:92px}
.stage[data-mode="p"] .s2-title{left:calc(var(--sw) - 176px)!important;top:100px!important;width:160px!important;height:68px!important}
.stage[data-mode="p"] .s2-title .title{width:160px!important;font-size:29px!important}
.stage[data-mode="p"] .s2-body{left:calc(var(--sw) - 176px)!important;top:178px!important;width:160px!important;height:110px!important}
.stage[data-mode="p"] .body20{width:160px!important;font-size:16px}
.stage[data-mode="p"] .s2-cards{left:calc((var(--sw) - 390px)/2)!important;top:auto!important;bottom:28px;width:390px!important;height:215px!important}
.stage[data-mode="p"] .s2-mid{display:none}
.stage[data-mode="p"] .s2-c1{left:6px!important}
.stage[data-mode="p"] .s2-c3{left:216px!important}

.stage[data-mode="p"] .s3-cards{left:calc((var(--sw) - 358px)/2)!important;top:84px!important;width:358px!important;height:520px!important}
.stage[data-mode="p"] .tcard{width:173px;min-height:176px;padding:16px;gap:10px;border-radius:26px}
.stage[data-font="instrument"][data-mode="p"] .tcard h3{font-size:24px}
.stage[data-mode="p"] .tcard p{font-size:14px}
.stage[data-mode="p"] .vcard{width:173px;height:176px;border-radius:26px}
.stage[data-mode="p"] .tc1{left:0!important;top:0!important}
.stage[data-mode="p"] .vc1{left:185px!important;top:0!important}
.stage[data-mode="p"] .vc2{left:0!important;top:188px!important}
.stage[data-mode="p"] .tc2{left:185px!important;top:188px!important}
.stage[data-mode="p"] .tc3{left:0!important;top:376px!important;width:358px;min-height:112px}
.stage[data-mode="p"] .vc1 .media{left:-54px!important;width:281px!important;height:176px!important}
.stage[data-mode="p"] .vc2 .media{left:-4px!important;top:-3px!important;width:182px!important;height:182px!important}

/* short phones */
.stage[data-short="1"] .headline{top:80px;line-height:60px;font-size:76px!important}
.stage[data-short="1"] .headline .mask{height:60px;margin-bottom:5px}
.stage[data-short="1"] .s1-sub{top:282px!important}
.stage[data-short="1"] a.cta{top:366px}
.stage[data-short="1"] .h2{top:80px}
.stage[data-short="1"] .s3-cards{top:70px!important}