/* Kylro v2 · shared styles for every page */
:root{
  --ink:#120c08;
  --ink-2:#1a120c;
  --ink-3:#241910;
  --cream:#f4e8d7;
  --cream-2:#d2bda3;
  --mute:#9a8470;
  --faint:#5d4a3b;
  --line:rgba(244,232,215,.13);
  --line-2:rgba(244,232,215,.3);
  --amber:#e59a4c;
  --amber-2:#f3cfa0;
  --hero-ink:#22150c;
  --plate:#c9b9a6;
  --wide:"Zalando Sans Expanded","Arial Black",system-ui,sans-serif;
  --dot:"Zalando Sans Expanded","Arial Black",system-ui,sans-serif;
  --body:"Hanken Grotesk",system-ui,sans-serif;
  --mono:"Martian Mono",ui-monospace,monospace;
  --g:clamp(16px,2.6vw,40px);
  --ease:cubic-bezier(.22,.61,.36,1);
  --out:cubic-bezier(.16,1,.3,1);
  --io:cubic-bezier(.65,0,.35,1);
  --vh:1vh;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;color-scheme:dark;scrollbar-width:none;overflow-x:hidden;overflow-x:clip}
html::-webkit-scrollbar,body::-webkit-scrollbar{display:none;width:0;height:0}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
body{margin:0;background:var(--ink);color:var(--cream);font:400 1rem/1.6 var(--body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;overflow-x:clip;text-rendering:optimizeLegibility}
img,video,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
ul,ol{list-style:none;margin:0;padding:0}
p,h1,h2,h3,figure,dl,dd{margin:0}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:2px}
::selection{background:var(--amber);color:var(--ink)}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:fixed;left:12px;top:12px;z-index:500;padding:10px 14px;background:var(--cream);color:var(--ink);font:500 .9rem/1 var(--body);border-radius:4px;transform:translateY(-200%);transition:transform .3s var(--out)}
.skip:focus{transform:none}

/* ---------- type ---------- */
.wide{font-family:var(--wide);font-weight:800;text-transform:uppercase;letter-spacing:-.015em;line-height:.9}
.lbl{font:400 .7rem/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--cream-2)}
.mono{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase}
.dots{font-family:var(--dot);font-weight:800;text-transform:uppercase;line-height:.86;letter-spacing:-.03em}
.ln{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.ln>span{display:block;transform:translate3d(0,108%,0);transition:transform 1.15s var(--out)}
.in .ln>span,.ln.in>span{transform:none}
.in .ln:nth-child(2)>span{transition-delay:.08s}
.in .ln:nth-child(3)>span{transition-delay:.16s}
.in .ln:nth-child(4)>span{transition-delay:.24s}
[data-r]{opacity:0;transform:translate3d(0,28px,0);transition:opacity 1s var(--ease),transform 1.1s var(--out);transition-delay:calc(var(--d,0)*90ms)}
[data-r].in{opacity:1;transform:none}
html:not(.js) [data-r],html:not(.js) .ln>span{opacity:1;transform:none}

/* ---------- atmosphere: warm spotlight, slow drift, grain ---------- */
.atmo{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;background:var(--ink)}
.atmo::before{content:"";position:absolute;inset:-20%;background:
  radial-gradient(ellipse 46% 40% at 30% 26%,rgba(140,88,52,.34),rgba(140,88,52,0) 70%),
  radial-gradient(ellipse 40% 36% at 74% 70%,rgba(110,64,36,.2),rgba(110,64,36,0) 72%),
  radial-gradient(ellipse 80% 70% at 50% 50%,rgba(36,24,16,.6),rgba(18,12,8,0) 80%);
  animation:drift 38s var(--io) infinite alternate}
.atmo::after{content:"";position:absolute;inset:-50%;opacity:.09;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .96 0 0 0 0 .86 0 0 0 0 .72 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain 9s steps(9) infinite}
@keyframes drift{to{transform:translate3d(9%,7%,0) scale(1.08)}}
@keyframes grain{to{transform:translate3d(6%,-5%,0)}}

/* ---------- top bar: envelope · logo · menu ---------- */
.bar{position:fixed;top:14px;left:50%;z-index:95;width:min(500px,calc(100% - 32px));height:56px;display:grid;grid-template-columns:56px 1fr 56px;align-items:center;background:rgba(20,13,9,.8);-webkit-backdrop-filter:blur(14px) saturate(1.15);backdrop-filter:blur(14px) saturate(1.15);border:1px solid var(--line);border-radius:6px;transform:translate3d(-50%,0,0);transition:transform .8s var(--out),opacity .5s var(--ease),visibility 0s}
.bar a,.bar button{display:grid;place-items:center;height:100%;min-width:44px}
.bar .b-mail svg{width:22px;height:22px}
.bar .b-logo{justify-self:center;padding:0 12px}
.bar .b-logo svg{height:22px;width:auto;aspect-ratio:234.5/100;color:var(--cream);--dot:var(--amber)}
.bar .b-menu{justify-self:end;width:56px}
.burger{position:relative;width:20px;height:10px}
.burger i{position:absolute;left:0;right:0;height:1.5px;background:currentColor;border-radius:2px;transition:transform .5s var(--out),top .5s var(--out)}
.burger i:first-child{top:0}.burger i:last-child{top:8.5px}
.menu-open .burger i:first-child{top:4.25px;transform:rotate(45deg)}
.menu-open .burger i:last-child{top:4.25px;transform:rotate(-45deg)}
.home .bar.hide{transform:translate3d(-50%,-150%,0);opacity:0;visibility:hidden;transition:transform .7s var(--out),opacity .4s var(--ease),visibility 0s .7s}
.menu-open .bar{transform:translate3d(-50%,0,0)!important;opacity:1!important;visibility:visible!important;transition:transform .7s var(--out),opacity .3s}

/* ---------- menu ---------- */
.menu{position:fixed;inset:0;z-index:92;background:rgba(14,9,6,.96);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;flex-direction:column;padding:96px var(--g) 28px;clip-path:inset(0 0 100% 0);visibility:hidden;transition:clip-path .8s var(--io),visibility 0s .8s;overflow-y:auto;overscroll-behavior:contain}
.menu-open .menu{clip-path:inset(0 0 0 0);visibility:visible;transition:clip-path .8s var(--io),visibility 0s}
.menu ol{display:flex;flex-direction:column;border-top:1px solid var(--line);margin-top:auto}
.menu li{border-bottom:1px solid var(--line);overflow:hidden}
.menu li a{display:flex;align-items:baseline;gap:clamp(14px,3vw,48px);padding:clamp(10px,1.6vh,18px) 0;transform:translate3d(0,100%,0);transition:transform .9s var(--out),color .3s}
.menu-open .menu li a{transform:none;transition-delay:calc(.12s + var(--i)*.05s)}
.menu .mn{font:400 .72rem/1 var(--mono);letter-spacing:.08em;color:var(--mute);min-width:6.5ch}
.menu .mt{font-family:var(--wide);font-weight:800;text-transform:uppercase;font-size:clamp(30px,5.6vw,84px);line-height:1;letter-spacing:-.015em;transition:transform .5s var(--out),color .3s}
.menu .ms{margin-left:auto;font:400 .72rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.menu li a:hover .mt,.menu li a:focus-visible .mt{color:var(--amber);transform:translate3d(12px,0,0)}
.menu li a[aria-current="page"] .mt{color:var(--amber-2)}
.menu-img{position:fixed;right:var(--g);top:96px;width:min(30vw,420px);aspect-ratio:16/10;border-radius:4px;overflow:hidden;opacity:0;transform:scale(.94);transition:opacity .5s var(--ease),transform .7s var(--out);pointer-events:none;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.menu-img.on{opacity:1;transform:none}
.menu-img img{width:100%;height:100%;object-fit:cover}
.menu-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;padding-top:22px;font:400 .72rem/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--cream-2)}
.menu-foot a{color:var(--cream)}
@media (max-width:900px){.menu-img{display:none}}

/* ---------- custom cursor (fine pointers only) ---------- */
.cur{position:fixed;left:0;top:0;z-index:600;pointer-events:none;display:none}
html.has-cur .cur{display:block}
html.has-cur,html.has-cur a,html.has-cur button,html.has-cur summary,html.has-cur label{cursor:none}
html.has-cur input,html.has-cur textarea{cursor:text}
.cur-dot{position:fixed;left:-3px;top:-3px;width:6px;height:6px;border-radius:50%;background:var(--amber);transition:opacity .2s,transform .25s var(--out)}
.cur-ring{position:fixed;left:-19px;top:-19px;width:38px;height:38px;border-radius:50%;border:1px solid rgba(244,232,215,.55);display:grid;place-items:center;transition:width .4s var(--out),height .4s var(--out),left .4s var(--out),top .4s var(--out),background .3s,border-color .3s,opacity .3s}
.cur-ring b{font:500 .62rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink);opacity:0;transition:opacity .2s}
.cur.hover .cur-ring{width:58px;height:58px;left:-29px;top:-29px;border-color:var(--amber)}
.cur.view .cur-ring{width:92px;height:92px;left:-46px;top:-46px;background:var(--amber);border-color:var(--amber)}
.cur.view .cur-ring b{opacity:1}
.cur.view .cur-dot,.cur.text .cur-dot{opacity:0}
.cur.text .cur-ring,.cur.out .cur-ring,.cur.out .cur-dot{opacity:0}
.cur.light .cur-ring{border-color:rgba(34,21,12,.6)}

/* ---------- page transitions: every page has its own effect (data-fx) ---------- */
.pt{position:fixed;inset:0;z-index:400;color:var(--cream);visibility:hidden;pointer-events:none}
.pt.active{visibility:visible;pointer-events:auto}
html.pt-in .pt{visibility:visible;background:var(--ink);animation:ptSafety .01s linear 3.5s forwards}
@keyframes ptSafety{to{visibility:hidden;background:transparent}}
.pt-fx{position:absolute;inset:0;overflow:hidden}
.pt .pc{position:absolute;background:var(--ink);will-change:transform,opacity}
.pt-ui{position:absolute;inset:0;z-index:2;display:grid;grid-template-rows:auto 1fr auto;padding:24px var(--g);opacity:0;transition:opacity .3s var(--ease)}
.pt.on .pt-ui,html.pt-in .pt-ui{opacity:1;transition-delay:.3s}
.pt.post .pt-ui{opacity:0;transition-delay:0s}
.pt.instant,.pt.instant *{transition:none!important}
.pt-top,.pt-bot{display:flex;justify-content:space-between;align-items:flex-end;font:400 .72rem/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--cream-2)}
.pt-num{font:800 clamp(46px,7vw,96px)/.8 var(--wide);letter-spacing:-.03em;color:var(--cream)}
.pt-mid{align-self:center;justify-self:center;display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center}
.pt-mid svg{height:clamp(44px,7vw,84px);width:auto;aspect-ratio:234.5/100;--dot:var(--amber)}
.pt-sub{font:800 clamp(18px,2.4vw,30px)/1 var(--wide);text-transform:uppercase;letter-spacing:.01em}
.pt-bar{width:min(240px,50vw);height:1px;background:var(--line-2);overflow:hidden}
.pt-bar i{display:block;height:100%;background:var(--amber);transform:scaleX(0);transform-origin:left;transition:transform .8s var(--io)}
.pt.on .pt-bar i,html.pt-in .pt-bar i{transform:scaleX(1)}
/* box and iris: a hole in the dark that closes to cover and opens to reveal */
.pt .pc.hole{left:50%;top:50%;width:300vmax;height:300vmax;transform:translate(-50%,-50%);background:transparent;box-shadow:0 0 0 150vmax var(--ink);transition:width .85s var(--io),height .85s var(--io)}
.pt[data-fx="iris"] .pc.hole{border-radius:50%}
.pt.on .pc.hole{width:0;height:0}
.pt[data-fx="box"].post .pc.hole{transition-timing-function:cubic-bezier(.76,0,.24,1)}
/* blinds: ten slats */
.pt[data-fx="blinds"] .pc{top:0;bottom:0;left:calc(var(--i)*10%);width:calc(10% + 1px);transform:scaleX(0);transform-origin:left;transition:transform .55s var(--io) calc(var(--i)*40ms)}
.pt[data-fx="blinds"].on .pc{transform:scaleX(1)}
.pt[data-fx="blinds"].post .pc{transform:scaleX(0);transform-origin:right}
/* dissolve: a grid of tiles that blink in and out in random order */
.pt[data-fx="dissolve"] .pc{opacity:0;transition:opacity .2s linear var(--d)}
.pt[data-fx="dissolve"].on .pc{opacity:1}
/* split: top and bottom halves meet in the middle, then part */
.pt[data-fx="split"] .pc{left:0;right:0;height:50.5%;transition:transform .75s var(--io)}
.pt[data-fx="split"] .pc.t{top:0;transform:translate3d(0,-100%,0)}
.pt[data-fx="split"] .pc.b{bottom:0;transform:translate3d(0,100%,0)}
.pt[data-fx="split"].on .pc{transform:none}
/* wipe: a slanted panel sweeps across from the left and leaves to the right */
.pt[data-fx="wipe"] .pc{top:-10%;bottom:-10%;left:-25%;width:150%;transform:translate3d(-110%,0,0) skewX(-14deg);transition:transform .8s var(--io)}
.pt[data-fx="wipe"].on .pc{transform:translate3d(0,0,0) skewX(-14deg)}
.pt[data-fx="wipe"].post .pc{transform:translate3d(110%,0,0) skewX(-14deg)}

/* ---------- buttons, links ---------- */
.btn{display:inline-flex;align-items:center;gap:14px;min-height:52px;padding:0 26px;border:1px solid var(--line-2);border-radius:999px;font:500 .95rem/1 var(--body);letter-spacing:.01em;color:var(--cream);background:rgba(244,232,215,.02);transition:background .35s var(--ease),color .35s var(--ease),border-color .35s}
.btn svg{width:16px;height:16px;transition:transform .45s var(--out)}
.btn:hover,.btn:focus-visible{background:var(--cream);color:var(--ink);border-color:var(--cream)}
.btn:hover svg{transform:translate3d(4px,0,0)}
.btn.solid{background:var(--amber);border-color:var(--amber);color:var(--ink)}
.btn.solid:hover,.btn.solid:focus-visible{background:var(--amber-2);border-color:var(--amber-2)}
.ul{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .5s var(--out)}
.ul:hover,.ul:focus-visible{background-size:100% 1px}
.down{display:flex;flex-direction:column;align-items:center;gap:6px;font:400 .62rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.down svg{width:18px;height:10px;animation:bob 2.2s var(--io) infinite}
@keyframes bob{50%{transform:translate3d(0,4px,0)}}

/* ---------- marquee (COMING SOON and friends) ---------- */
.mq{overflow:hidden;border-block:1px solid var(--line);padding:clamp(14px,2vw,26px) 0;white-space:nowrap}
.mq-track{display:inline-flex;align-items:center;gap:.5em;animation:mq 40s linear infinite;font-family:var(--dot);font-weight:900;text-transform:uppercase;font-size:clamp(34px,5.4vw,82px);line-height:1;letter-spacing:.06em;color:var(--cream)}
.mq-track span{display:inline-flex;align-items:center;gap:.5em}
.mq-track svg{width:.62em;height:.62em;color:var(--amber);animation:spin 6s var(--io) infinite}
@keyframes mq{to{transform:translate3d(-50%,0,0)}}
@keyframes spin{0%,40%{transform:rotate(0)}50%,90%{transform:rotate(180deg)}100%{transform:rotate(180deg)}}

/* ---------- footer ---------- */
.foot{position:relative;margin-top:clamp(60px,10vw,140px);border-top:1px solid var(--line)}
.foot-in{padding:clamp(40px,5vw,64px) var(--g) clamp(48px,6vw,80px);display:grid;grid-template-columns:1.7fr .9fr .9fr;gap:40px 32px}
.foot-labels{grid-column:1/-1;display:flex;justify-content:space-between;gap:16px;font:400 .74rem/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--cream)}
.foot-blurb{max-width:44ch;color:var(--mute);font-size:.95rem;line-height:1.6}
.foot-mail{display:inline-block;margin-top:28px;font:500 clamp(26px,3.6vw,58px)/1.05 var(--body);letter-spacing:-.03em;color:var(--cream);white-space:nowrap}
.foot-mid .btn{align-self:flex-start}
.foot-mail:hover{color:var(--amber-2)}
.foot-place{margin-top:12px;font-size:clamp(17px,1.7vw,24px);color:var(--cream-2)}
.foot-nav{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:32px;font:400 .74rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.foot-nav a{padding:8px 0}
.foot-mid{display:flex;flex-direction:column;gap:10px;align-self:end;font:400 .74rem/1.5 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.foot-mid a{color:var(--cream)}
.foot-card{position:relative;justify-self:end;width:min(100%,340px);aspect-ratio:16/9.6;border-radius:4px;overflow:hidden;background:var(--ink-3);perspective:900px}
.foot-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:rotateY(-24deg) scale(1.08);transition:opacity 1s var(--ease),transform 1.4s var(--out)}
.foot-card img.on{opacity:1;transform:none}
.foot-card span{position:absolute;left:12px;bottom:10px;font:400 .62rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--cream);text-shadow:0 1px 6px rgba(0,0,0,.7)}
.copy-mark{position:absolute;right:clamp(16px,6vw,96px);bottom:calc(var(--plate-h) - clamp(46px,6vw,74px));z-index:3;width:clamp(92px,11vw,150px);height:clamp(92px,11vw,150px);color:var(--cream)}
.copy-mark svg{width:100%;height:100%;animation:rot 26s linear infinite}
@keyframes rot{to{transform:rotate(360deg)}}
.plate{position:relative;height:var(--plate-h);overflow:hidden;background:
  radial-gradient(ellipse 60% 120% at 20% 0%,rgba(255,248,238,.5),rgba(255,248,238,0) 60%),
  linear-gradient(180deg,#d6c7b4 0%,#c3b19c 55%,#b3a08a 100%);color:#5b4a3a}
.plate::before{content:"";position:absolute;inset:0;opacity:.55;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .47 0 0 0 0 .39 0 0 0 .7 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.plate-word{position:absolute;left:var(--g);top:var(--pt);width:var(--ww);height:calc(var(--ww) / 2.345);color:#c5b4a0;--dot:#c5b4a0;overflow:visible}
.plate-meta{position:absolute;left:var(--g);top:16px;z-index:2;font:400 .66rem/1.6 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#4d3e30}
/* the plate is sized from the wordmark, so the whole "Kylro." (descender and period included) always fits */
.foot-wrap{position:relative;--ww:min(64vw,1100px);--pt:clamp(46px,5vw,72px);--plate-h:calc(var(--pt) + var(--ww) / 2.345 + clamp(22px,2.8vw,44px))}
@media (max-width:760px){.foot-wrap{--ww:calc(100vw - 2 * var(--g));--pt:62px}}
@media (max-width:900px){
  .foot-in{grid-template-columns:1fr;gap:28px}
  .foot-labels{flex-direction:column;gap:6px}
  .foot-card{justify-self:start;width:min(100%,420px)}
  .foot-mid{align-self:start}
}

/* ---------- shared section bits ---------- */
.wrap{padding-inline:var(--g)}
.sec-lbl{display:flex;justify-content:space-between;gap:16px;padding:14px var(--g);border-top:1px solid var(--line);font:400 .7rem/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--cream-2)}
.frame{border-radius:6px;overflow:hidden;background:var(--ink-3);box-shadow:0 30px 90px -30px rgba(0,0,0,.7),0 0 0 1px var(--line)}
.frame img{width:100%;height:auto}
.browser{border-radius:8px;overflow:hidden;background:#0d0906;box-shadow:0 40px 100px -40px rgba(0,0,0,.8),0 0 0 1px var(--line)}
.browser::before{content:"";display:block;height:26px;background:
  radial-gradient(circle at 14px 13px,#e0715a 4px,transparent 4.5px),
  radial-gradient(circle at 30px 13px,#e2b25a 4px,transparent 4.5px),
  radial-gradient(circle at 46px 13px,#77b16a 4px,transparent 4.5px),#1b130d;border-bottom:1px solid var(--line)}
.browser img{width:100%;height:auto}
.phone{border-radius:34px;padding:9px;background:#0b0806;box-shadow:0 40px 90px -30px rgba(0,0,0,.8),0 0 0 1px rgba(244,232,215,.16),inset 0 0 0 1px rgba(244,232,215,.06)}
.phone img{border-radius:26px;width:100%;height:auto}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
  .atmo::before,.atmo::after{animation:none}
  .mq-track{animation:none}
}
.copy-mark .cm-c{position:absolute;inset:0;display:grid;place-items:center;font:500 clamp(40px,4.6vw,64px)/1 var(--body)}
@media (max-width:520px){.foot-mail{font-size:clamp(22px,7.6vw,30px)}}
@media (max-width:760px){.copy-mark{bottom:calc(var(--plate-h) - 96px);right:12px;width:84px;height:84px;color:#4d3e30}.copy-mark .cm-c{font-size:34px}}
@media (max-width:440px){.menu .ms{display:none}}